aboutsummaryrefslogtreecommitdiff
path: root/posts
diff options
context:
space:
mode:
authorBradley Taunt <bt@btxx.org>2024-06-10 09:41:25 -0400
committerBradley Taunt <bt@btxx.org>2024-06-10 09:41:25 -0400
commit07e4a2dafe248280b5610f8c7d09b0f30b530f54 (patch)
tree8a145d1d4d07e1278a837ff15dadccc322d27515 /posts
parent16d28628aca9b2d356de31c319f5e7bc0f5b2b02 (diff)
Initial modifications to rebuilt only changed files based on mod date, performance updates
Diffstat (limited to 'posts')
-rw-r--r--posts/OpenBSD_is_a_Cozy_Operating_System.md7
-rw-r--r--posts/Please_Make_Your_Table_Headings_Sticky.md16
-rw-r--r--posts/aui.md7
-rw-r--r--posts/batch-webp-conversion.md18
-rw-r--r--posts/heif.md12
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>
+![Screenshot of OpenBSD 7.5 running dwm](/public/images/open-suck-75.png)
+
+*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>
+![Old macOS Buttons](/public/images/aqua-ui-css-buttons.webp)
+
+*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