diff options
Diffstat (limited to 'posts')
| -rw-r--r-- | posts/OpenBSD_is_a_Cozy_Operating_System.md | 7 | ||||
| -rw-r--r-- | posts/Please_Make_Your_Table_Headings_Sticky.md | 16 | ||||
| -rw-r--r-- | posts/aui.md | 7 | ||||
| -rw-r--r-- | posts/batch-webp-conversion.md | 18 | ||||
| -rw-r--r-- | posts/heif.md | 12 |
5 files changed, 35 insertions, 25 deletions
diff --git a/posts/OpenBSD_is_a_Cozy_Operating_System.md b/posts/OpenBSD_is_a_Cozy_Operating_System.md index 93d70ec..584d5e1 100644 --- a/posts/OpenBSD_is_a_Cozy_Operating_System.md +++ b/posts/OpenBSD_is_a_Cozy_Operating_System.md @@ -2,10 +2,9 @@ 2024-04-11 -<figure> -<img src="https://btxx.org/posts/OpenBSD_is_a_Cozy_Operating_System/open-suck-75.png" alt="Screenshot of OpenBSD 7.5 running dwm"> -<figcaption>OpenBSD 7.5 running dwm on my X220</figcaption> -</figure> + + +*OpenBSD 7.5 running dwm on my X220* With the recent release of OpenBSD 7.5, I decided to run through my [personal OpenBSD "installer"](https://git.btxx.org/open-suck/about/) for laptop/desktop devices. The project is built off of the `dwm` tiling window manager and only installs a few basic packages. The last time I updated it was with the release of 7.3, so it's been due for an minor rework. diff --git a/posts/Please_Make_Your_Table_Headings_Sticky.md b/posts/Please_Make_Your_Table_Headings_Sticky.md index b64928d..ef2e810 100644 --- a/posts/Please_Make_Your_Table_Headings_Sticky.md +++ b/posts/Please_Make_Your_Table_Headings_Sticky.md @@ -4,7 +4,14 @@ I often stumble upon large data sets or table layouts across the web. When these tables contain hundreds of rows of content, things become problematic once you start to scroll... -[Link to video example of standard table header](/public/videos/not-fixed-header-tables.mp4) + +<video width="100%" controls> +<source src="https://btxx.org/posts/Please_Make_Your_Table_Headings_Sticky/not-fixed-header-tables.mp4" type="video/mp4"> +Your browser does not support the video tag. +</video> + + +<h2>This should be a header</h2> Look at that table header disappear! Now, if I scroll all the way down to item #300 (for example) will I remember what each column's data is associated with? If this is my first time looking at this table - probably not. Luckily we can fix this (no pun intended!) with a tiny amount of CSS. @@ -12,7 +19,12 @@ Look at that table header disappear! Now, if I scroll all the way down to item # Check it out: -[Link to video example of fixed table header](/public/videos/fixed-header-tables.mp4) + +<video width="100%" controls> +<source src="https://btxx.org/ikiwiki/git/fixed-header-tables.mp4" type="video/mp4"> +Your browser does not support the video tag. +</video> + Pretty awesome, right? It might look like magic but it's actually very easy to implement. You only need to add 2 CSS properties on your `thead`: diff --git a/posts/aui.md b/posts/aui.md index 2aa7fdb..fa6786b 100644 --- a/posts/aui.md +++ b/posts/aui.md @@ -4,10 +4,9 @@ Though it may feel like nostalgia, the old OS design for Mac was arguably better than the current iteration (as of this writing - High Sierra). I recently designed a quick Dribbble shot showcasing how the older operating system used to have so much more character and depth. -<figure> -<img src="/public/images/aqua-ui-css-buttons.webp" alt="Old macOS Buttons"> -<figcaption>My initial Dribbble shot, which can be found <a href="https://dribbble.com/shots/4561658-Aqua-Buttons-UI">here</a>.</figcaption> -</figure> + + +*My initial Dribbble shot, which can be found [here](https://dribbble.com/shots/4561658-Aqua-Buttons-UI)* Since I've been wanting to dip my toes into more tutorial-based articles (maybe I'll even do some screencasts in the future), I decided to start out simple. Let's walk through how to implement these 'aqua' UI buttons with pure CSS. diff --git a/posts/batch-webp-conversion.md b/posts/batch-webp-conversion.md index f9666ec..4bf930e 100644 --- a/posts/batch-webp-conversion.md +++ b/posts/batch-webp-conversion.md @@ -36,12 +36,12 @@ You *could* download one of the many native apps from the Mac App Store to do th 8) Enter the following code below as your script and type `⌘-S` to save (name it something like "Convert to webp") - - for f in "$@" - do - /usr/local/bin/cwebp -q 85 "$f" -o "${f%.*}.webp" - done - +``` +for f in "$@" +do +/usr/local/bin/cwebp -q 85 "$f" -o "${f%.*}.webp" +done +``` For visual reference, it should look something like this: @@ -67,9 +67,9 @@ Simple as that! I was contacted by the very helpful [Kev Quirk](https://kevq.uk) about a minor problem he encountered while following this tutorial. When trying to run `cwebp` he received the following error message: - - cwebp cannot be opened because it's from an unverified developer - +``` +cwebp cannot be opened because it's from an unverified developer +``` Doing the next steps seemed to have fixed this issue for him: diff --git a/posts/heif.md b/posts/heif.md index 50f6847..dc747b4 100644 --- a/posts/heif.md +++ b/posts/heif.md @@ -24,12 +24,12 @@ For this example script we are going to convert the image to JPG format. You can 7. Set the area "Pass input" to `as arguments` 8. Enter the following code below as your script and type `⌘-S` to save (name it something like "Convert HEIC/HEIF to JPG") - - for f in "$@" - do - /opt/homebrew/bin/heif-convert "$f" "${f%.*}.jpg" - done - +``` +for f in "$@" +do +/opt/homebrew/bin/heif-convert "$f" "${f%.*}.jpg" +done +``` ## Making Edits |