From 14074019d62d98885c4c764401a9e7e1fd129f79 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 10:12:28 -0400 Subject: Set proper timestamps for header and footer HTML templates, update some post contents --- Makefile | 2 +- barf | 5 ++- build/atom.xml | 46 ++++++++++++++------- build/colophon/index.html | 3 +- build/donate/index.html | 3 +- build/index.html | 13 +++--- build/now/index.html | 3 +- build/posts/$10/index.html | 3 +- build/posts/1kb/index.html | 3 +- .../posts/Building_rbenv_on_OpenBSD_7.5/index.html | 3 +- .../index.html | 3 +- .../My_Text_Editor_Is_Not_Open_Source/index.html | 3 +- build/posts/New_Domain_and_Code_Forge/index.html | 3 +- .../index.html | 8 ++-- .../Switching_Things_Over_to_ikiwiki/index.html | 3 +- .../Website_Backups_with_Apple_iCloud/index.html | 3 +- build/posts/adguard/index.html | 3 +- build/posts/af/index.html | 3 +- build/posts/alpine/index.html | 3 +- build/posts/animated-card-tiles/index.html | 3 +- build/posts/animated-toggle-tabs/index.html | 3 +- build/posts/audio-hotkeys-on-linux-mint/index.html | 3 +- build/posts/avoid/index.html | 3 +- build/posts/base64-all-the-things/index.html | 3 +- build/posts/basic-gulp-build-for-sass/index.html | 3 +- build/posts/battery/index.html | 3 +- build/posts/being-efficient/index.html | 3 +- build/posts/berg/index.html | 3 +- build/posts/better-box-shadows/index.html | 3 +- build/posts/bidirectional-scrolling/index.html | 3 +- build/posts/browser-history-sucks/index.html | 3 +- build/posts/character-unit/index.html | 3 +- build/posts/chasing-performance/index.html | 3 +- build/posts/cheap-portable-pi/index.html | 3 +- build/posts/chromebook-web-dev/index.html | 3 +- build/posts/css-js-mistake/index.html | 3 +- build/posts/css-slope-graphs/index.html | 3 +- build/posts/css-variables/index.html | 3 +- build/posts/css-video-backgrounds/index.html | 3 +- build/posts/current-color/index.html | 3 +- build/posts/cut-your-forms-in-half/index.html | 3 +- build/posts/death-of-personality/index.html | 3 +- build/posts/default-brower-forms/index.html | 3 +- build/posts/default-html-style-updates/index.html | 3 +- .../disabling-comments-in-wordpress/index.html | 3 +- build/posts/dts/index.html | 3 +- build/posts/duckduckno/index.html | 3 +- build/posts/dump/index.html | 3 +- build/posts/dv/index.html | 3 +- build/posts/dwm-gnome/index.html | 3 +- build/posts/dynamic-checkboxes/index.html | 3 +- build/posts/easy-custom-radio-inputs/index.html | 3 +- build/posts/easy-toggle-switches/index.html | 3 +- build/posts/eero/index.html | 3 +- build/posts/empty-table-cells/index.html | 3 +- build/posts/et-jekyll-theme/index.html | 3 +- build/posts/fake-3d-elements-with-css/index.html | 3 +- build/posts/fathom-analytics-netlify/index.html | 3 +- build/posts/february-updates/index.html | 3 +- build/posts/first-letter/index.html | 3 +- build/posts/flexbox-bar-graphs/index.html | 3 +- build/posts/flexbox-grid/index.html | 3 +- build/posts/form-ui-improvements/index.html | 3 +- build/posts/future-os-google/index.html | 3 +- build/posts/gallery/index.html | 3 +- build/posts/git-patches/index.html | 3 +- build/posts/goodbye-css-preprocessors/index.html | 3 +- build/posts/hamburger-menu-alternative/index.html | 3 +- build/posts/hamburgers/index.html | 3 +- build/posts/heif/index.html | 4 +- build/posts/hello-jekyll/index.html | 3 +- build/posts/html-dark-mode/index.html | 3 +- build/posts/html-like-1999/index.html | 3 +- build/posts/html5-validator-badge/index.html | 3 +- .../posts/improving-githubs-new-design/index.html | 3 +- build/posts/improving-receipt-ux/index.html | 3 +- build/posts/improving-tufte-jekyll/index.html | 3 +- build/posts/introducing-notez/index.html | 3 +- build/posts/introducing-pageroast/index.html | 3 +- build/posts/jekyll-sourcehut/index.html | 3 +- build/posts/jekyll/index.html | 3 +- build/posts/jelly/index.html | 3 +- build/posts/jsincss-parent-selector/index.html | 3 +- build/posts/keynote-slides-css/index.html | 3 +- build/posts/launching-thriftyname/index.html | 3 +- build/posts/lazy-dev-dark-mode/index.html | 3 +- build/posts/learning-to-floss/index.html | 3 +- build/posts/lf/index.html | 3 +- build/posts/linux-love/index.html | 3 +- build/posts/linux-mint-macbook-air/index.html | 3 +- build/posts/load-image-on-click/index.html | 3 +- build/posts/localwp-fedora/index.html | 3 +- build/posts/loop/index.html | 3 +- build/posts/luba/index.html | 4 ++ build/posts/macos-convert-to-html/index.html | 21 +++++++--- build/posts/macos-icon-css/index.html | 3 +- build/posts/mail/index.html | 4 ++ build/posts/mango/index.html | 3 +- build/posts/menu-toggle-css/index.html | 3 +- .../index.html | 3 +- build/posts/minimal-css-menu/index.html | 3 +- build/posts/minor-website-changes/index.html | 3 +- build/posts/mongodb-arch/index.html | 3 +- build/posts/monitor/index.html | 3 +- .../multiple-css-background-images/index.html | 3 +- build/posts/my-pi-desktop/index.html | 3 +- .../my-static-blog-publishing-setup/index.html | 3 +- build/posts/ndenting-text-with-css/index.html | 3 +- build/posts/netlify-urls/index.html | 3 +- .../news-websites-are-dumpster-fires/index.html | 3 +- build/posts/notice/index.html | 3 +- .../posts/obvious-js-injection-fallback/index.html | 3 +- build/posts/one-css-property/index.html | 3 +- build/posts/one-thing/index.html | 3 +- .../posts/open-source-typeface-pairings/index.html | 3 +- build/posts/openring/index.html | 3 +- .../posts/over-engineering-an-oil-tank/index.html | 3 +- build/posts/over-nesting/index.html | 3 +- build/posts/paid-mac-apps/index.html | 3 +- build/posts/pblog/index.html | 3 +- .../performance-focused-wordpress-theme/index.html | 3 +- build/posts/personal-website-opinions/index.html | 3 +- build/posts/phpetite/index.html | 3 +- build/posts/pi-400-internal-ssd/index.html | 3 +- build/posts/pihole-cloudflare/index.html | 3 +- build/posts/plain-text-emails/index.html | 3 +- build/posts/poor-mans-full-bleed/index.html | 3 +- build/posts/poormans-comment-system/index.html | 3 +- build/posts/proper-ui-hierarchy/index.html | 3 +- build/posts/ps4-download-ui/index.html | 3 +- build/posts/publish-with-jekyll/index.html | 3 +- .../pure-css-simple-dropdown-plugin/index.html | 3 +- build/posts/quick-dirty-theme-switcher/index.html | 3 +- build/posts/rss-click/index.html | 3 +- build/posts/rss-hacks/index.html | 3 +- build/posts/rvm/index.html | 3 +- build/posts/safari-default-dark-mode/index.html | 3 +- .../safari-extensions-catalina-patcher/index.html | 3 +- build/posts/schools/index.html | 3 +- build/posts/self-hosted-blogs/index.html | 3 +- build/posts/self-hosting-fathom/index.html | 3 +- build/posts/setting-up-free-ssl/index.html | 3 +- build/posts/seven-years/index.html | 3 +- build/posts/sharing-the-things-we-use/index.html | 3 +- build/posts/shinobi-website/index.html | 3 +- build/posts/shiny-css-buttons/index.html | 3 +- build/posts/simple-accessibility/index.html | 3 +- build/posts/simple-does-not-mean-ugly/index.html | 3 +- build/posts/simple-jekyll-navigation/index.html | 3 +- build/posts/skip-to-content/index.html | 3 +- build/posts/slabtop/index.html | 3 +- build/posts/slow/index.html | 3 +- build/posts/soma-terminal-css/index.html | 3 +- build/posts/spec/index.html | 3 +- build/posts/srht2/index.html | 3 +- build/posts/stay-hungry/index.html | 3 +- build/posts/sticky-elements/index.html | 3 +- build/posts/still-using-jquery/index.html | 3 +- build/posts/stripe-menu-css/index.html | 3 +- build/posts/sublime/index.html | 3 +- build/posts/suckless/index.html | 3 +- build/posts/super-mario-blocks-css/index.html | 3 +- build/posts/tabbed-content/index.html | 3 +- build/posts/tables/index.html | 3 +- build/posts/te/index.html | 3 +- build/posts/text-align-justify/index.html | 3 +- build/posts/they-wont-wait/index.html | 3 +- build/posts/use-text-not-icons/index.html | 3 +- build/posts/user-select/index.html | 3 +- build/posts/vscode/index.html | 3 +- build/posts/webfonts/index.html | 3 +- build/posts/width-vs-flex-basis/index.html | 3 +- build/posts/windows/index.html | 3 +- build/posts/wp-enqueue-for-beginners/index.html | 3 +- build/posts/x201/index.html | 3 +- build/posts/x220/index.html | 3 +- build/projects/index.html | 3 +- build/resume/index.html | 3 +- build/rss.xml | 48 ++++++++++++++-------- build/uses/index.html | 3 +- build/wiki/index.html | 3 +- footer.html | 3 +- index.md | 10 ++--- posts/Please_Make_Your_Table_Headings_Sticky.md | 16 ++------ posts/heif.md | 4 +- posts/luba.md | 14 +++---- posts/macos-convert-to-html.md | 45 +++++++++----------- posts/mail.md | 14 +++---- posts/tables.md | 6 +-- timestamps.tsv | 24 ++++++----- 190 files changed, 502 insertions(+), 302 deletions(-) diff --git a/Makefile b/Makefile index 30e82be..118e9e6 100644 --- a/Makefile +++ b/Makefile @@ -8,7 +8,7 @@ clean: watch: while true; do \ - ls -d .git/* * posts/* pages/* header.html | entr -cd make ;\ + ls -d .git/* * posts/* pages/* header.html | entr -cd make build ;\ done .PHONY: build clean watch diff --git a/barf b/barf index c19ec94..b4ba0a5 100755 --- a/barf +++ b/barf @@ -175,10 +175,11 @@ EOF initialize_timestamps() { if [ ! -f "$timestamp_file" ] || [ ! -s "$timestamp_file" ]; then echo "Initializing timestamps..." - for f in index.md posts/*.md pages/*.md; do + touch "$timestamp_file" # Ensure the file exists + for f in index.md posts/*.md pages/*.md header.html footer.html; do update_timestamp "$f" done - echo "Timestamps initialized for all Markdown files." + echo "Timestamps initialized for all files." fi } diff --git a/build/atom.xml b/build/atom.xml index 2a34916..de68764 100644 --- a/build/atom.xml +++ b/build/atom.xml @@ -2,7 +2,7 @@ Making software better without sacrificing user experience. - 2024-06-10T09:40:10Z + 2024-06-10T10:11:12Z Bradley Taunt @@ -444,20 +444,18 @@ chmod -R 775 uploads <h1 id="please-make-your-table-headings-sticky">Please Make Your Table Headings Sticky</h1> <p>2024-02-23</p> <p>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&#8230;</p> -<p>Your browser does not support the video tag. -</p> +<p><a href="/public/videos/not-fixed-header-tables.mp4">Click here to see standard table headers video</a></p> <p>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&#8217;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.</p> <h2 id="sticky-header">Sticky Header</h2> <p>Check it out:</p> -<p>Your browser does not support the video tag. -</p> +<p><a href="/public/videos/fixed-header-tables.mp4">Click here to see &#8220;fixed&#8221; table headers video</a></p> <p>Pretty awesome, right? It might look like magic but it&#8217;s actually very easy to implement. You only need to add 2 CSS properties on your <code>thead</code>:</p> <pre><code>position: sticky; top: 0; </code></pre> <p>That&#8217;s it! Best of all, <code>sticky</code> has <a href="https://caniuse.com/?search=sticky">~96% global support</a> which means this isn&#8217;t some &#8220;bleeding-edge&#8221; property and can safely support a ton of browsers. Not to mention the improved experience for your end-users!</p> <p>You can view a live demo of this table on the <a href="https://codepen.io/bradleytaunt/pen/bGZyJBj">CodePen example pen</a>.</p> -<p>If you found this interesting, feel free to check out my other table-focused post: <a href="https://btxx.org/posts/tables/">Making Tables Responsive With Minimal CSS</a></p> +<p>If you found this interesting, feel free to check out my other table-focused post: <a href="/posts/tables/">Making Tables Responsive With Minimal CSS</a></p> https://btxx.org/posts/Please_Make_Your_Table_Headings_Sticky 2024-02-23T10:00:00Z @@ -4707,8 +4705,8 @@ done <p>Simple as that. Happy converting!</p> <p>If you&#8217;re interested, I also have some other Automator scripts available:</p> <ul> -<li><a href="/batch-webp-conversion/">Batch Converting Images to webp with macOS Automator</a></li> -<li><a href="/macos-convert-to-html/">Convert Files to HTML with macOS Automator Quick Actions</a></li> +<li><a href="/posts/batch-webp-conversion/">Batch Converting Images to webp with macOS Automator</a></li> +<li><a href="/posts/macos-convert-to-html/">Convert Files to HTML with macOS Automator Quick Actions</a></li> </ul> https://btxx.org/posts/heif @@ -5806,6 +5804,8 @@ input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) { <p>2023-05-19</p> <h2 id="a-brief-background">A Brief Background</h2> <p>I&#8217;m no stranger to robotic lawnmowers. When my wife and I moved into our rural home just over five years ago, we picked up the Husqvarna 450X Automower since I was far too lazy to manually mow my property and the cost was equal to that of a standard riding mower. It was a no-brainer.</p> +<p><img src="/public/images/mower-1.jpeg" alt="The Husqvarna 450X" /></p> +<p><em>The Husqvarna 450X (not mine but same model)</em></p> <p>Fast-forward five years. Everything is still going great with the Automower. Some minor repairs were needed but that was mostly my fault since I was allowing the mower into places it shouldn&#8217;t have been (ie. root systems and dirt &#8220;craters&#8221;). Then lightning struck our backyard at the beginning of April this year. The mower was fine, since we stow it away inside for the winter but the charging station, charging brick and perimeter wire we <em>not</em> so lucky&#8230;</p> <p>The lightning traveled along the main perimeter wire and went straight to the charging station. Boom. The charging dock was quite literally blown up into a million tiny pieces and scattered across my backyard. Giant trenches were carved up where the perimeter wire had been embedded in the lawn. This surge also followed the path towards the main power adapter and exploded that as well. All of this happened even with the charging station &#47; adapter <em>turned off and unplugged from any outlet</em>. At least my mower was safe&#8230;</p> <h2 id="shopping-for-automower-parts">Shopping for Automower Parts</h2> @@ -5827,6 +5827,8 @@ input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) { <p><em>Sigh</em>. The mower gods were trying to tell me something. It seemed Husqvarna was just not meant for me anymore.</p> <h2 id="luba-to-the-rescue">Luba to the Rescue!</h2> <p>While researching &#8220;wireless&#8221; automowers, I came across the <a href="https://mammotion.com/?ref=bpjfzw7s">Luba Series 5000</a> (referral link) and kept it in my &#8220;maybe&#8221; pile to follow-up on if needed. So follow-up I did.</p> +<p><img src="/public/images/mower-2.webp" alt="The Luba Series 5000" /></p> +<p><em>The Luba Series 5000 AWD (not mine but same model)</em></p> <p>This mower seemed to check all my boxes:</p> <ul> <li>Decently priced</li> @@ -5861,7 +5863,7 @@ input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) { Convert Files to HTML with macOS Automator Quick Actions <h1 id="convert-files-to-html-with-macos-automator-quick-actions">Convert Files to HTML with macOS Automator Quick Actions</h1> <p>2022-01-28</p> -<p>Since a few people have reached out and thanked me for my previous post <a href="/batch-webp-conversion">Batch Converting Images to webp with macOS Automator</a>, I thought I would continue to share more of my own custom Automator Quick Actions. Today&#8217;s post will cover the ability to convert <em>any</em> text-based document into pure HTML.</p> +<p>Since a few people have reached out and thanked me for my previous post <a href="/posts/batch-webp-conversion">Batch Converting Images to webp with macOS Automator</a>, I thought I would continue to share more of my own custom Automator Quick Actions. Today&#8217;s post will cover the ability to convert <em>any</em> text-based document into pure HTML.</p> <p>I know - there are over 6 billion conversion apps that do this very same thing. But our way of doing it is <em>cooler</em>. Our conversion tool:</p> <ul> <li>Will run directly inside macOS Finder (right-click actions FTW)</li> @@ -5890,13 +5892,15 @@ input[type="radio"]:nth-of-type(5):checked ~ .slide:nth-of-type(5) { <p>Wait for everything to finish and you&#8217;re done!</p> <h2 id="our-custom-automator-quick-action">Our Custom Automator Quick Action</h2> <p>Next you&#8217;ll want to open the macOS Automator app and create a new &#8220;Quick Action&#8221; when given the prompt to do so.</p> +<p><img src="/public/images/new-automator.webp" alt="Toggle prompt for new automation in macOS Automator" /></p> +<p><em>After opening Automator, select &#8220;Quick Action&#8221; from the menu</em></p> <p>Now do the following (reference the image further below to make sure your parameters match):</p> <ol> -<li>Set &#8220;Workflow receives current&#8221; to documents in any application</li> +<li>Set &#8220;Workflow receives current&#8221; to <strong>documents</strong> in <strong>any application</strong></li> <li>In the search bar type in &#8220;Run Shell Script&#8221;</li> <li>Drag-and-drop the &#8220;Run Shell Script&#8221; from the left pane into the right pane</li> -<li>Set the &#8220;Shell&#8221; parameter to &#47;bin&#47;bash</li> -<li>Set &#8220;Pass input&#8221; as as arguments</li> +<li>Set the &#8220;Shell&#8221; parameter to <strong>&#47;bin&#47;bash</strong></li> +<li>Set &#8220;Pass input&#8221; as <strong>as arguments</strong></li> </ol> <p>Once all that is done, simply paste the following in the open text field within the &#8220;Run Shell Script&#8221; item:</p> <pre><code>for f in "$@" @@ -5905,16 +5909,23 @@ do done </code></pre> <p>If you&#8217;ve done everything correctly it should look something like this:</p> +<p><img src="/public/images/new-automator-2.webp" alt="Automator quick action details for converting to HTML" /></p> <p>Save this new Quick Action (Name is something like &#8220;Convert to HTML&#8221; to keep things simple). That&#8217;s it! Amazing, right?</p> <h2 id="time-to-convert">Time to Convert</h2> <p>Now it is finally time to see our Quick Action is <em>action</em>! Navigate to any document file in a Finder window and follow along.</p> <ol> -<li>First, right-click on the file you wish to convert. (<a href="#fig-1">Figure 1</a>)</li> +<li>First, right-click on the file you wish to convert. See Fig.1)</li> <li>In the pop-up container, scroll down and hover over <code>Quick Actions</code>.</li> -<li>A secondary pop-out will appear. Look for the action <code>Convert File to HTML</code> and click it. (<a href="#fig-2">Figure 2</a>)</li> +<li>A secondary pop-out will appear. Look for the action <code>Convert File to HTML</code> and click it. See Fig.2)</li> </ol> +<p><img src="/public/images/macos-convert-1.webp" alt="A markdown file in macOS Finder" /></p> +<p><em>Fig 1: Finding and right-clicking on your desired file</em></p> +<p><img src="/public/images/macos-convert-2.webp" alt="Convert to HTML action selection" /></p> +<p><em>Fig 2: From the &#8220;Quick Actions&#8221; menu, select &#8220;Convert to HTML&#8221;</em></p> <p>If everything was set up properly (and depending on the size of the file) you should see your converted HTML file show up right next to your existing document. Time to celebrate!</p> <p>Don&#8217;t forget - you can also <em>batch</em> convert multiple files and multiple file <em>types</em> at once. The possibilities are endless!</p> +<p><img src="/public/images/macos-convert-3.webp" alt="Finder window showing a Markdown file and an HTML file" /></p> +<p><em>Our converted document is now available in HTML. Absolutely glorious.</em></p> <h2 id="no-limits">No Limits</h2> <p>Although this article has mainly focused on converting documents to HTML, <code>pandoc</code> is so powerful you could do any number of conversions. Re-using these steps above, you have the ability to make as many different conversion quick actions as your heart desires!</p> <p>Have fun converting!</p> @@ -6161,9 +6172,13 @@ done <p>I recently covered how to <a href="/git-patches">work with git email patches in Evolution on Linux</a>, so I thought it would make sense to walk through a similar workflow for those using Apple Mail on MacOS. The idea is essentially the same, with just a little extra work involved.</p> <h2 id="create-a-patches-mailbox">Create a &#8220;Patches&#8221; Mailbox</h2> <p>The first thing you&#8217;ll need to do is make a new <code>Patches</code> mailbox folder inside your existing mail account. Once done, your default Mail sidebar should look similar to the following:</p> +<p><img src="/public/images/apple-mail-1.png" alt="The Apple Mail sidebar with the Patches folder present" /></p> +<p><em>The Apple Mail sidebar with the &#8220;Patches&#8221; folder present</em></p> <h2 id="applying-patches">Applying Patches</h2> <p>Now navigate to the email message containing a <code>git</code> patch. Right-click and select <em>Move to</em> &#62; <em>Patches</em>. Now in the sidebar, right-click your <em>Patches</em> folder and select <em>Export Mailbox&#8230;</em>. You&#8217;ll be prompted to save this folder locally. I suggest having a top-level folder named <strong>Patches</strong> to make things consistent.</p> <p>Inside this folder you should see something similar to the following structure:</p> +<p><img src="/public/images/apple-mail-2.png" alt="The contents of the saved Patches mailbox folder" /></p> +<p><em>The contents of the saved Patches mailbox folder</em></p> <p>Once saved, open your terminal, navigate to the project you wish to apply this new patch to:</p> <pre><code>cd my-path&#47;very-cool-project </code></pre> @@ -9888,9 +9903,10 @@ flatpak remote-add --user --if-not-exists flathub https:&#47;&#47;flathu Making Tables Responsive With Minimal CSS <h1 id="making-tables-responsive-with-minimal-css">Making Tables Responsive With Minimal CSS</h1> <p>2019-06-11</p> +<p><strong>Update (Oct 2019):</strong> @aardrian wrote a previous post about how changing the <code>display</code> properties on tables can impact screen readers. I highly recommend his excellent article <a href="https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html">Tables, CSS Display Properties, and ARIA</a></p> <hr/> <p>I find that the need to create responsive table layouts pops up far more often than most developers would expect. The gut reaction might to be implement some sort of custom grid-system or pull in a pre-built library. Don&#8217;t do this - just use tables and some simple CSS.</p> -<p>My recent article, <a href="/html-like-1999">Write HTML Like It&#8217;s 1999</a>, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how <code>table</code> elements don&#8217;t play nice with mobile devices or that it&#8217;s not possible to have a useable layout on smaller screens. <em>This simply isn&#8217;t true</em>.</p> +<p>My recent article, <a href="/posts/html-like-1999">Write HTML Like It&#8217;s 1999</a>, received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how <code>table</code> elements don&#8217;t play nice with mobile devices or that it&#8217;s not possible to have a useable layout on smaller screens. <em>This simply isn&#8217;t true</em>.</p> <p>Included below are two separate demos showing how to optimize <code>table</code> HTML for mobile devices using only a minimal amount of CSS. These implementations may not be perfect, but they are far superior to injecting a bunch of custom <code>div</code> elements to <em>look</em> like tables.</p> <h2 id="demo-1-just-let-them-scroll">Demo 1: Just let them scroll</h2> <p>Okay I will admit, this implementation isn&#8217;t the <em>greatest</em> but I find it does work well with huge datasets. Simply set a <code>min-width</code> on your parent <code>table</code> element and the browser will just require the user to scroll the contents horizontally.</p> diff --git a/build/colophon/index.html b/build/colophon/index.html index ba4e3bd..faca9f4 100644 --- a/build/colophon/index.html +++ b/build/colophon/index.html @@ -69,7 +69,8 @@
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/donate/index.html b/build/donate/index.html index dc1c425..738413c 100644 --- a/build/donate/index.html +++ b/build/donate/index.html @@ -46,7 +46,8 @@
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/index.html b/build/index.html index dce4e7e..226fb51 100644 --- a/build/index.html +++ b/build/index.html @@ -17,15 +17,15 @@

    Making software better without sacrificing user experience.

    -

    As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. I also actively maintain several open source projects.

    -

    I’m passionate about open source software, usability, performance, privacy, and minimal design. This small piece of the internet stores a growing collection of my personal brain dumps.

    +

    As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. I also actively maintain several open source projects.

    +

    I’m passionate about open source software, usability, performance, privacy, and minimal design. This small piece of the internet stores a growing collection of my personal brain dumps.

    Skills & Languages

    -

    Core tools are Figma, HTML, CSS, JavaScript & WordPress. Currently improving my skills with Ruby, Rails, MySQL & PHP. I also enjoy tinkering with basic shell scripts and Unix systems.

    +

    Core tools are HTML, CSS, Ruby, JavaScript & WordPress. Currently improving my skills with Rails, MongoDB & PHP. I also enjoy tinkering with basic shell scripts and Unix systems.

    Design Thought Experiments

    Articles & Tutorials

    @@ -219,7 +219,8 @@
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/now/index.html b/build/now/index.html index d7ba91d..0751379 100644 --- a/build/now/index.html +++ b/build/now/index.html @@ -46,7 +46,8 @@
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/posts/$10/index.html b/build/posts/$10/index.html index 92ab3fa..d9cc6a6 100644 --- a/build/posts/$10/index.html +++ b/build/posts/$10/index.html @@ -83,7 +83,8 @@
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/posts/1kb/index.html b/build/posts/1kb/index.html index 4f3bee8..4c9d7e1 100644 --- a/build/posts/1kb/index.html +++ b/build/posts/1kb/index.html @@ -66,7 +66,8 @@
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/posts/Building_rbenv_on_OpenBSD_7.5/index.html b/build/posts/Building_rbenv_on_OpenBSD_7.5/index.html index 3cd3bd6..c90bbfa 100644 --- a/build/posts/Building_rbenv_on_OpenBSD_7.5/index.html +++ b/build/posts/Building_rbenv_on_OpenBSD_7.5/index.html @@ -64,7 +64,8 @@ eval "$(rbenv init -)"
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/posts/Installing_WordPress_on_NearlyFreeSpeech/index.html b/build/posts/Installing_WordPress_on_NearlyFreeSpeech/index.html index 9e202a4..248250a 100644 --- a/build/posts/Installing_WordPress_on_NearlyFreeSpeech/index.html +++ b/build/posts/Installing_WordPress_on_NearlyFreeSpeech/index.html @@ -156,7 +156,8 @@ chmod -R 775 uploads
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/posts/My_Text_Editor_Is_Not_Open_Source/index.html b/build/posts/My_Text_Editor_Is_Not_Open_Source/index.html index ec5b88e..173ce88 100644 --- a/build/posts/My_Text_Editor_Is_Not_Open_Source/index.html +++ b/build/posts/My_Text_Editor_Is_Not_Open_Source/index.html @@ -80,7 +80,8 @@
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/posts/New_Domain_and_Code_Forge/index.html b/build/posts/New_Domain_and_Code_Forge/index.html index 0f901a2..f7188f5 100644 --- a/build/posts/New_Domain_and_Code_Forge/index.html +++ b/build/posts/New_Domain_and_Code_Forge/index.html @@ -98,7 +98,8 @@
  • ↑ Top of the page
    • - Built with barf.
    + Built with barf.
    + Feeds: Atom & RSS
    Maintained with ♥ for the web.
    Proud supporter of Fathom & NextDNS.
    The content for this site is CC-BY-SA.
    The code for this site is MIT. diff --git a/build/posts/Please_Make_Your_Table_Headings_Sticky/index.html b/build/posts/Please_Make_Your_Table_Headings_Sticky/index.html index 6f37f67..3939d59 100644 --- a/build/posts/Please_Make_Your_Table_Headings_Sticky/index.html +++ b/build/posts/Please_Make_Your_Table_Headings_Sticky/index.html @@ -19,20 +19,18 @@

    Please Make Your Table Headings Sticky

    2024-02-23

    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…

    -

    Your browser does not support the video tag. -

    +

    Click here to see standard table headers video

    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.

    Check it out:

    -

    Your browser does not support the video tag. -

    +

    Click here to see “fixed” table headers 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:

    position: sticky;
 top: 0;

    That’s it! Best of all, sticky has ~96% global support which means this isn’t some “bleeding-edge” property and can safely support a ton of browsers. Not to mention the improved experience for your end-users!

    You can view a live demo of this table on the CodePen example pen.

    -

    If you found this interesting, feel free to check out my other table-focused post: Making Tables Responsive With Minimal CSS

    +

    If you found this interesting, feel free to check out my other table-focused post: Making Tables Responsive With Minimal CSS