diff options
| -rw-r--r-- | .build.yml | 20 | ||||
| -rw-r--r-- | .gitignore | 8 | ||||
| -rw-r--r-- | 404.md | 10 | ||||
| -rw-r--r-- | Gemfile | 34 | ||||
| -rw-r--r-- | LICENSE | 4 | ||||
| -rw-r--r-- | Makefile | 14 | ||||
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | _config.yml | 48 | ||||
| -rw-r--r-- | _includes/feed.xml | 23 | ||||
| -rw-r--r-- | _includes/footer.html | 17 | ||||
| -rw-r--r-- | _includes/head.html | 11 | ||||
| -rw-r--r-- | _includes/header.html | 3 | ||||
| -rw-r--r-- | _layouts/all_posts.html | 12 | ||||
| -rw-r--r-- | _layouts/default.html | 16 | ||||
| -rw-r--r-- | _layouts/home.html | 14 | ||||
| -rw-r--r-- | _layouts/page.html | 7 | ||||
| -rw-r--r-- | _layouts/post.html | 8 | ||||
| -rw-r--r-- | _posts/2017-10-10-design-review-dropbox.md | 130 | ||||
| -rw-r--r-- | _posts/2023-03-16-rvm.md | 50 | ||||
| -rw-r--r-- | _posts/2023-04-11-html-dark-mode.md | 24 | ||||
| -rw-r--r-- | _posts/2024-05-27-Installing_WordPress_on_NearlyFreeSpeech.md | 195 | ||||
| -rw-r--r-- | about.md | 19 | ||||
| -rw-r--r-- | atom.xml | 22 | ||||
| -rwxr-xr-x | barf | 158 | ||||
| -rw-r--r-- | colophon.md | 19 | ||||
| -rw-r--r-- | footer.html | 22 | ||||
| -rw-r--r-- | header.html | 18 | ||||
| -rw-r--r-- | index.md | 29 | ||||
| -rw-r--r-- | pages/colophon.md | 16 | ||||
| -rw-r--r-- | pages/donate.md | 23 | ||||
| -rw-r--r-- | pages/now.md (renamed from now.md) | 12 | ||||
| -rw-r--r-- | pages/projects.md | 27 | ||||
| -rw-r--r-- | pages/resume.md | 109 | ||||
| -rw-r--r-- | pages/uses.md (renamed from uses.md) | 43 | ||||
| -rw-r--r-- | pages/wiki.md | 378 | ||||
| -rw-r--r-- | posts.md | 5 | ||||
| -rw-r--r-- | posts/$10.md (renamed from _posts/2022-11-23-10.md) | 7 | ||||
| -rw-r--r-- | posts/1kb.md (renamed from _posts/2022-08-02-1kb.md) | 7 | ||||
| -rw-r--r-- | posts/Building_rbenv_on_OpenBSD_7.5.md (renamed from _posts/2024-06-02-Building_rbenv_on_OpenBSD_7.5.md) | 38 | ||||
| -rw-r--r-- | posts/Installing_WordPress_on_NearlyFreeSpeech.md (renamed from wiki/wordpress_NearlyFreeSpeech_Setup.md) | 16 | ||||
| -rw-r--r-- | posts/My_Text_Editor_Is_Not_Open_Source.md (renamed from _posts/2024-01-02-My_Text_Editor_Is_Not_Open_Source.md) | 7 | ||||
| -rw-r--r-- | posts/New_Domain_and_Code_Forge.md (renamed from _posts/2024-01-29-New_Domain_and_Code_Forge.md) | 9 | ||||
| -rw-r--r-- | posts/OpenBSD_is_a_Cozy_Operating_System.md (renamed from _posts/2024-04-11-OpenBSD_is_a_Cozy_Operating_System.md) | 17 | ||||
| -rw-r--r-- | posts/Please_Make_Your_Table_Headings_Sticky.md (renamed from _posts/2024-02-23-Please_Make_Your_Table_Headings_Sticky.md) | 27 | ||||
| -rw-r--r-- | posts/Switching_Things_Over_to_ikiwiki.md (renamed from _posts/2023-12-17-Switching_Things_Over_to_ikiwiki.md) | 13 | ||||
| -rw-r--r-- | posts/Website_Backups_with_Apple_iCloud.md (renamed from _posts/2024-02-16-Website_Backups_with_Apple_iCloud.md) | 25 | ||||
| -rw-r--r-- | posts/adguard.md (renamed from _posts/2022-11-04-adguard.md) | 7 | ||||
| -rw-r--r-- | posts/af.md (renamed from _posts/2022-10-14-af.md) | 7 | ||||
| -rw-r--r-- | posts/alpine.md (renamed from _posts/2022-12-08-alpine.md) | 7 | ||||
| -rw-r--r-- | posts/animated-card-tiles.md (renamed from _posts/2019-02-27-animated-card-tiles.md) | 9 | ||||
| -rw-r--r-- | posts/animated-toggle-tabs.md (renamed from _posts/2021-01-05-animated-toggle-tabs.md) | 7 | ||||
| -rw-r--r-- | posts/audio-hotkeys-on-linux-mint.md (renamed from _posts/2020-06-14-audio-hotkeys-on-linux-mint.md) | 7 | ||||
| -rw-r--r-- | posts/aui.md (renamed from _posts/2016-06-28-aui.md) | 14 | ||||
| -rw-r--r-- | posts/avoid.md (renamed from _posts/2022-09-08-avoid.md) | 7 | ||||
| -rw-r--r-- | posts/base64-all-the-things.md (renamed from _posts/2020-03-18-base64-all-the-things.md) | 7 | ||||
| -rw-r--r-- | posts/basic-gulp-build-for-sass.md (renamed from _posts/2019-01-15-basic-gulp-build-for-sass.md) | 7 | ||||
| -rw-r--r-- | posts/batch-webp-conversion.md (renamed from _posts/2021-10-15-batch-webp-conversion.md) | 25 | ||||
| -rw-r--r-- | posts/battery.md (renamed from _posts/2023-06-13-battery.md) | 27 | ||||
| -rw-r--r-- | posts/being-efficient.md (renamed from _posts/2019-09-28-being-efficient.md) | 7 | ||||
| -rw-r--r-- | posts/berg.md (renamed from _posts/2022-07-29-berg.md) | 7 | ||||
| -rw-r--r-- | posts/better-box-shadows.md (renamed from _posts/2019-01-08-better-box-shadows.md) | 60 | ||||
| -rw-r--r-- | posts/bidirectional-scrolling.md (renamed from _posts/2020-11-09-bidirectional-scrolling.md) | 7 | ||||
| -rw-r--r-- | posts/browser-history-sucks.md (renamed from _posts/2019-04-20-browser-history-sucks.md) | 7 | ||||
| -rw-r--r-- | posts/character-unit.md (renamed from _posts/2019-04-23-character-unit.md) | 7 | ||||
| -rw-r--r-- | posts/chasing-performance.md (renamed from _posts/2017-11-20-chasing-performance.md) | 7 | ||||
| -rw-r--r-- | posts/cheap-portable-pi.md (renamed from _posts/2020-09-16-cheap-portable-pi.md) | 7 | ||||
| -rw-r--r-- | posts/chromebook-web-dev.md (renamed from _posts/2020-01-07-chromebook-web-dev.md) | 9 | ||||
| -rw-r--r-- | posts/css-js-mistake.md (renamed from _posts/2021-11-03-css-js-mistake.md) | 12 | ||||
| -rw-r--r-- | posts/css-slope-graphs.md (renamed from _posts/2021-06-07-css-slope-graphs.md) | 9 | ||||
| -rw-r--r-- | posts/css-variables.md (renamed from _posts/2018-03-24-css-variables.md) | 7 | ||||
| -rw-r--r-- | posts/css-video-backgrounds.md (renamed from _posts/2018-04-16-css-video-backgrounds.md) | 7 | ||||
| -rw-r--r-- | posts/current-color.md (renamed from _posts/2019-04-13-current-color.md) | 7 | ||||
| -rw-r--r-- | posts/cut-your-forms-in-half.md (renamed from _posts/2019-05-09-cut-your-forms-in-half.md) | 7 | ||||
| -rw-r--r-- | posts/death-of-personality.md (renamed from _posts/2017-11-01-death-of-personality.md) | 7 | ||||
| -rw-r--r-- | posts/default-brower-forms.md (renamed from _posts/2019-11-13-default-brower-forms.md) | 7 | ||||
| -rw-r--r-- | posts/default-html-style-updates.md (renamed from _posts/2021-11-09-default-html-style-updates.md) | 12 | ||||
| -rw-r--r-- | posts/design-review-dropbox.md | 108 | ||||
| -rw-r--r-- | posts/disabling-comments-in-wordpress.md (renamed from _posts/2020-12-28-disabling-comments-in-wordpress.md) | 7 | ||||
| -rw-r--r-- | posts/dts.md (renamed from _posts/2017-07-10-dts.md) | 7 | ||||
| -rw-r--r-- | posts/duckduckno.md (renamed from _posts/2022-05-17-duckduckno.md) | 13 | ||||
| -rw-r--r-- | posts/dump.md (renamed from _posts/2022-09-10-dump.md) | 9 | ||||
| -rw-r--r-- | posts/dv.md (renamed from _posts/2023-02-08-dv.md) | 9 | ||||
| -rw-r--r-- | posts/dwm-gnome.md (renamed from _posts/2023-11-02-dwm-gnome.md) | 7 | ||||
| -rw-r--r-- | posts/dynamic-checkboxes.md (renamed from _posts/2019-07-30-dynamic-checkboxes.md) | 7 | ||||
| -rw-r--r-- | posts/easy-custom-radio-inputs.md (renamed from _posts/2019-01-21-easy-custom-radio-inputs.md) | 7 | ||||
| -rw-r--r-- | posts/easy-toggle-switches.md (renamed from _posts/2019-02-18-easy-toggle-switches.md) | 7 | ||||
| -rw-r--r-- | posts/eero.md (renamed from _posts/2022-03-14-eero.md) | 70 | ||||
| -rw-r--r-- | posts/empty-table-cells.md (renamed from _posts/2019-07-17-empty-table-cells.md) | 7 | ||||
| -rw-r--r-- | posts/et-jekyll-theme.md (renamed from _posts/2018-01-14-et-jekyll-theme.md) | 7 | ||||
| -rw-r--r-- | posts/fake-3d-elements-with-css.md (renamed from _posts/2020-04-29-fake-3d-elements-with-css.md) | 7 | ||||
| -rw-r--r-- | posts/fathom-analytics-netlify.md (renamed from _posts/2021-01-19-fathom-analytics-netlify.md) | 7 | ||||
| -rw-r--r-- | posts/february-updates.md (renamed from _posts/2022-02-23-february-updates.md) | 7 | ||||
| -rw-r--r-- | posts/first-letter.md (renamed from _posts/2019-05-03-first-letter.md) | 7 | ||||
| -rw-r--r-- | posts/flexbox-bar-graphs.md (renamed from _posts/2020-12-08-flexbox-bar-graphs.md) | 7 | ||||
| -rw-r--r-- | posts/flexbox-grid.md (renamed from _posts/2018-11-22-flexbox-grid.md) | 7 | ||||
| -rw-r--r-- | posts/form-ui-improvements.md (renamed from _posts/2019-03-13-form-ui-improvements.md) | 7 | ||||
| -rw-r--r-- | posts/future-os-google.md (renamed from _posts/2022-01-06-future-os-google.md) | 19 | ||||
| -rw-r--r-- | posts/gallery.md (renamed from _posts/2022-10-03-gallery.md) | 7 | ||||
| -rw-r--r-- | posts/git-patches.md (renamed from _posts/2023-04-25-git-patches.md) | 15 | ||||
| -rw-r--r-- | posts/goodbye-css-preprocessors.md (renamed from _posts/2017-09-07-goodbye-css-preprocessors.md) | 7 | ||||
| -rw-r--r-- | posts/hamburger-menu-alternative.md (renamed from _posts/2019-06-14-hamburger-menu-alternative.md) | 7 | ||||
| -rw-r--r-- | posts/hamburgers.md (renamed from _posts/2023-05-05-hamburgers.md) | 7 | ||||
| -rw-r--r-- | posts/heif.md (renamed from _posts/2023-07-21-heif.md) | 27 | ||||
| -rw-r--r-- | posts/hello-jekyll.md (renamed from _posts/2020-08-13-hello-jekyll.md) | 7 | ||||
| -rw-r--r-- | posts/html-dark-mode.md | 30 | ||||
| -rw-r--r-- | posts/html-like-1999.md (renamed from _posts/2019-06-06-html-like-1999.md) | 7 | ||||
| -rw-r--r-- | posts/html5-validator-badge.md (renamed from _posts/2019-07-05-html5-validator-badge.md) | 13 | ||||
| -rw-r--r-- | posts/improving-githubs-new-design.md (renamed from _posts/2020-07-07-improving-githubs-new-design.md) | 7 | ||||
| -rw-r--r-- | posts/improving-receipt-ux.md (renamed from _posts/2019-05-15-improving-receipt-ux.md) | 9 | ||||
| -rw-r--r-- | posts/improving-tufte-jekyll.md (renamed from _posts/2019-11-01-improving-tufte-jekyll.md) | 7 | ||||
| -rw-r--r-- | posts/introducing-notez.md (renamed from _posts/2021-01-13-introducing-notez.md) | 7 | ||||
| -rw-r--r-- | posts/introducing-pageroast.md (renamed from _posts/2021-03-11-introducing-pageroast.md) | 7 | ||||
| -rw-r--r-- | posts/jekyll-sourcehut.md (renamed from _posts/2021-12-06-jekyll-sourcehut.md) | 9 | ||||
| -rw-r--r-- | posts/jekyll.md (renamed from _posts/2022-09-19-jekyll.md) | 7 | ||||
| -rw-r--r-- | posts/jelly.md (renamed from _posts/2022-03-12-jelly.md) | 7 | ||||
| -rw-r--r-- | posts/jsincss-parent-selector.md (renamed from _posts/2018-12-19-jsincss-parent-selector.md) | 7 | ||||
| -rw-r--r-- | posts/keynote-slides-css.md (renamed from _posts/2020-06-22-keynote-slides-css.md) | 7 | ||||
| -rw-r--r-- | posts/launching-thriftyname.md (renamed from _posts/2021-02-25-launching-thriftyname.md) | 7 | ||||
| -rw-r--r-- | posts/lazy-dev-dark-mode.md (renamed from _posts/2021-04-12-lazy-dev-dark-mode.md) | 7 | ||||
| -rw-r--r-- | posts/learning-to-floss.md (renamed from _posts/2020-02-07-learning-to-floss.md) | 7 | ||||
| -rw-r--r-- | posts/lf.md (renamed from _posts/2022-09-20-lf.md) | 7 | ||||
| -rw-r--r-- | posts/linux-love.md (renamed from _posts/2022-07-14-linux-love.md) | 15 | ||||
| -rw-r--r-- | posts/linux-mint-macbook-air.md (renamed from _posts/2020-08-16-linux-mint-macbook-air.md) | 7 | ||||
| -rw-r--r-- | posts/load-image-on-click.md (renamed from _posts/2021-03-25-load-image-on-click.md) | 7 | ||||
| -rw-r--r-- | posts/localwp-fedora.md (renamed from _posts/2020-05-06-localwp-fedora.md) | 7 | ||||
| -rw-r--r-- | posts/loop.md (renamed from _posts/2022-08-12-loop.md) | 11 | ||||
| -rw-r--r-- | posts/luba.md (renamed from _posts/2023-05-19-luba.md) | 23 | ||||
| -rw-r--r-- | posts/macos-convert-to-html.md (renamed from _posts/2022-01-28-macos-convert-to-html.md) | 52 | ||||
| -rw-r--r-- | posts/macos-icon-css.md (renamed from _posts/2021-04-13-macos-icon-css.md) | 7 | ||||
| -rw-r--r-- | posts/mail.md (renamed from _posts/2023-05-11-mail.md) | 33 | ||||
| -rw-r--r-- | posts/mango.md (renamed from _posts/2023-03-09-mango.md) | 11 | ||||
| -rw-r--r-- | posts/menu-toggle-css.md (renamed from _posts/2020-10-19-menu-toggle-css.md) | 9 | ||||
| -rw-r--r-- | posts/mini-interactive-keyboard-with-pure-css.md (renamed from _posts/2020-05-13-mini-interactive-keyboard-with-pure-css.md) | 9 | ||||
| -rw-r--r-- | posts/minimal-css-menu.md (renamed from _posts/2019-04-26-minimal-css-menu.md) | 7 | ||||
| -rw-r--r-- | posts/minor-website-changes.md (renamed from _posts/2021-11-25-minor-website-changes.md) | 16 | ||||
| -rw-r--r-- | posts/mongodb-arch.md (renamed from _posts/2023-09-11-mongodb-arch.md) | 37 | ||||
| -rw-r--r-- | posts/monitor.md (renamed from _posts/2023-03-03-monitor.md) | 9 | ||||
| -rw-r--r-- | posts/multiple-css-background-images.md (renamed from _posts/2018-09-28-multiple-css-background-images.md) | 7 | ||||
| -rw-r--r-- | posts/my-pi-desktop.md (renamed from _posts/2020-09-02-my-pi-desktop.md) | 13 | ||||
| -rw-r--r-- | posts/my-static-blog-publishing-setup.md (renamed from _posts/2022-03-21-my-static-blog-publishing-setup.md) | 7 | ||||
| -rw-r--r-- | posts/ndenting-text-with-css.md (renamed from _posts/2019-04-05-ndenting-text-with-css.md) | 7 | ||||
| -rw-r--r-- | posts/netlify-urls.md (renamed from _posts/2021-12-03-netlify-urls.md) | 11 | ||||
| -rw-r--r-- | posts/news-websites-are-dumpster-fires.md (renamed from _posts/2019-05-29-news-websites-are-dumpster-fires.md) | 7 | ||||
| -rw-r--r-- | posts/notice.md (renamed from _posts/2022-09-22-notice.md) | 11 | ||||
| -rw-r--r-- | posts/obvious-js-injection-fallback.md (renamed from _posts/2020-12-04-obvious-js-injection-fallback.md) | 7 | ||||
| -rw-r--r-- | posts/one-css-property.md (renamed from _posts/2019-11-29-one-css-property.md) | 7 | ||||
| -rw-r--r-- | posts/one-thing.md (renamed from _posts/2023-01-09-one-thing.md) | 13 | ||||
| -rw-r--r-- | posts/open-source-typeface-pairings.md (renamed from _posts/2018-01-25-open-source-typeface-pairings.md) | 7 | ||||
| -rw-r--r-- | posts/openring.md (renamed from _posts/2022-12-02-openring.md) | 146 | ||||
| -rw-r--r-- | posts/over-engineering-an-oil-tank.md (renamed from _posts/2020-09-09-over-engineering-an-oil-tank.md) | 7 | ||||
| -rw-r--r-- | posts/over-nesting.md (renamed from _posts/2019-01-06-over-nesting.md) | 7 | ||||
| -rw-r--r-- | posts/paid-mac-apps.md (renamed from _posts/2022-06-29-paid-mac-apps.md) | 12 | ||||
| -rw-r--r-- | posts/pblog.md (renamed from _posts/2022-07-06-pblog.md) | 7 | ||||
| -rw-r--r-- | posts/performance-focused-wordpress-theme.md (renamed from _posts/2021-09-08-performance-focused-wordpress-theme.md) | 7 | ||||
| -rw-r--r-- | posts/personal-website-opinions.md (renamed from _posts/2021-05-19-personal-website-opinions.md) | 7 | ||||
| -rw-r--r-- | posts/phpetite.md (renamed from _posts/2021-04-22-phpetite.md) | 7 | ||||
| -rw-r--r-- | posts/pi-400-internal-ssd.md (renamed from _posts/2021-08-13-pi-400-internal-ssd.md) | 7 | ||||
| -rw-r--r-- | posts/pihole-cloudflare.md (renamed from _posts/2021-10-28-pihole-cloudflare.md) | 7 | ||||
| -rw-r--r-- | posts/plain-text-emails.md (renamed from _posts/2019-09-09-plain-text-emails.md) | 10 | ||||
| -rw-r--r-- | posts/poor-mans-full-bleed.md (renamed from _posts/2020-10-07-poor-mans-full-bleed.md) | 7 | ||||
| -rw-r--r-- | posts/poormans-comment-system.md (renamed from _posts/2022-02-03-poormans-comment-system.md) | 7 | ||||
| -rw-r--r-- | posts/proper-ui-hierarchy.md (renamed from _posts/2019-02-05-proper-ui-hierarchy.md) | 7 | ||||
| -rw-r--r-- | posts/ps4-download-ui.md (renamed from _posts/2021-06-20-ps4-download-ui.md) | 7 | ||||
| -rw-r--r-- | posts/publish-with-jekyll.md (renamed from _posts/2019-06-20-publish-with-jekyll.md) | 7 | ||||
| -rw-r--r-- | posts/pure-css-simple-dropdown-plugin.md (renamed from _posts/2018-09-20-pure-css-simple-dropdown-plugin.md) | 7 | ||||
| -rw-r--r-- | posts/quick-dirty-theme-switcher.md (renamed from _posts/2020-06-04-quick-dirty-theme-switcher.md) | 7 | ||||
| -rw-r--r-- | posts/rss-click.md (renamed from _posts/2022-06-20-rss-click.md) | 13 | ||||
| -rw-r--r-- | posts/rss-hacks.md (renamed from _posts/2022-05-23-rss-hacks.md) | 21 | ||||
| -rw-r--r-- | posts/rvm.md | 40 | ||||
| -rw-r--r-- | posts/safari-default-dark-mode.md (renamed from _posts/2022-04-18-safari-default-dark-mode.md) | 34 | ||||
| -rw-r--r-- | posts/safari-extensions-catalina-patcher.md (renamed from _posts/2021-09-23-safari-extensions-catalina-patcher.md) | 7 | ||||
| -rw-r--r-- | posts/schools.md (renamed from _posts/2022-05-30-schools.md) | 26 | ||||
| -rw-r--r-- | posts/self-hosted-blogs.md (renamed from _posts/2018-10-18-self-hosted-blogs.md) | 9 | ||||
| -rw-r--r-- | posts/self-hosting-fathom.md (renamed from _posts/2021-02-02-self-hosting-fathom.md) | 7 | ||||
| -rw-r--r-- | posts/setting-up-free-ssl.md (renamed from _posts/2018-08-07-setting-up-free-ssl.md) | 7 | ||||
| -rw-r--r-- | posts/seven-years.md (renamed from _posts/2023-06-24-seven-years.md) | 14 | ||||
| -rw-r--r-- | posts/sharing-the-things-we-use.md (renamed from _posts/2021-07-24-sharing-the-things-we-use.md) | 7 | ||||
| -rw-r--r-- | posts/shinobi-website.md (renamed from _posts/2022-05-13-shinobi-website.md) | 17 | ||||
| -rw-r--r-- | posts/shiny-css-buttons.md (renamed from _posts/2021-04-27-shiny-css-buttons.md) | 7 | ||||
| -rw-r--r-- | posts/simple-accessibility.md (renamed from _posts/2018-09-07-simple-accessibility.md) | 7 | ||||
| -rw-r--r-- | posts/simple-does-not-mean-ugly.md (renamed from _posts/2019-03-26-simple-does-not-mean-ugly.md) | 7 | ||||
| -rw-r--r-- | posts/simple-jekyll-navigation.md (renamed from _posts/2020-09-29-simple-jekyll-navigation.md) | 7 | ||||
| -rw-r--r-- | posts/skip-to-content.md (renamed from _posts/2019-03-25-skip-to-content.md) | 7 | ||||
| -rw-r--r-- | posts/slabtop.md (renamed from _posts/2023-05-01-slabtop.md) | 25 | ||||
| -rw-r--r-- | posts/slow.md (renamed from _posts/2022-11-22-slow.md) | 15 | ||||
| -rw-r--r-- | posts/soma-terminal-css.md (renamed from _posts/2021-05-29-soma-terminal-css.md) | 7 | ||||
| -rw-r--r-- | posts/spec.md (renamed from _posts/2022-11-07-spec.md) | 7 | ||||
| -rw-r--r-- | posts/srht2.md (renamed from _posts/2022-11-14-srht2.md) | 13 | ||||
| -rw-r--r-- | posts/stay-hungry.md (renamed from _posts/2018-02-12-stay-hungry.md) | 7 | ||||
| -rw-r--r-- | posts/sticky-elements.md (renamed from _posts/2019-10-06-sticky-elements.md) | 7 | ||||
| -rw-r--r-- | posts/still-using-jquery.md (renamed from _posts/2019-04-15-still-using-jquery.md) | 7 | ||||
| -rw-r--r-- | posts/stripe-menu-css.md (renamed from _posts/2020-03-31-stripe-menu-css.md) | 7 | ||||
| -rw-r--r-- | posts/sublime.md (renamed from _posts/2023-04-13-sublime.md) | 42 | ||||
| -rw-r--r-- | posts/suckless.md (renamed from _posts/2022-12-23-suckless.md) | 13 | ||||
| -rw-r--r-- | posts/super-mario-blocks-css.md (renamed from _posts/2019-02-15-super-mario-blocks-css.md) | 7 | ||||
| -rw-r--r-- | posts/tabbed-content.md (renamed from _posts/2019-01-28-tabbed-content.md) | 8 | ||||
| -rw-r--r-- | posts/tables.md (renamed from _posts/2019-06-11-tables.md) | 13 | ||||
| -rw-r--r-- | posts/te.md (renamed from _posts/2016-11-15-te.md) | 7 | ||||
| -rw-r--r-- | posts/text-align-justify.md (renamed from _posts/2019-05-22-text-align-justify.md) | 7 | ||||
| -rw-r--r-- | posts/they-wont-wait.md (renamed from _posts/2019-06-25-they-wont-wait.md) | 7 | ||||
| -rw-r--r-- | posts/use-text-not-icons.md (renamed from _posts/2021-12-17-use-text-not-icons.md) | 15 | ||||
| -rw-r--r-- | posts/user-select.md (renamed from _posts/2019-06-04-user-select.md) | 7 | ||||
| -rw-r--r-- | posts/vscode.md (renamed from _posts/2023-06-05-vscode.md) | 27 | ||||
| -rw-r--r-- | posts/webfonts.md (renamed from _posts/2023-03-14-webfonts.md) | 9 | ||||
| -rw-r--r-- | posts/width-vs-flex-basis.md (renamed from _posts/2018-11-28-width-vs-flex-basis.md) | 7 | ||||
| -rw-r--r-- | posts/windows.md (renamed from _posts/2022-09-02-windows.md) | 154 | ||||
| -rw-r--r-- | posts/wp-enqueue-for-beginners.md (renamed from _posts/2020-05-05-wp-enqueue-for-beginners.md) | 7 | ||||
| -rw-r--r-- | posts/x201.md (renamed from _posts/2023-04-02-x201.md) | 9 | ||||
| -rwxr-xr-x[-rw-r--r--] | posts/x220.md (renamed from _posts/2023-09-26-x220.md) | 19 | ||||
| -rw-r--r-- | projects.md | 34 | ||||
| -rw-r--r-- | public/images/Screenshot_2024-01-15_at_10.00.31__8239__AM.png | bin | 81987 -> 0 bytes | |||
| -rw-r--r-- | public/images/Screenshot_2024-03-20_at_10.49.01__8239__AM.png | bin | 664451 -> 0 bytes | |||
| -rw-r--r-- | public/images/open-suck-75.png | bin | 0 -> 573597 bytes | |||
| -rw-r--r-- | public/images/pizza.svg | 30 | ||||
| -rw-r--r-- | public/images/safari-full-address.png | bin | 81987 -> 0 bytes | |||
| -rw-r--r-- | public/images/safari-settings-custom-css.png | bin | 599023 -> 0 bytes | |||
| -rw-r--r-- | style.css | 99 | ||||
| -rw-r--r-- | stylesheets/main.css | 37 | ||||
| -rw-r--r-- | stylesheets/pygments.css | 143 | ||||
| -rw-r--r-- | wiki/alpine-linux.md | 41 | ||||
| -rw-r--r-- | wiki/cgit.md | 61 | ||||
| -rw-r--r-- | wiki/dotfiles.md | 142 | ||||
| -rw-r--r-- | wiki/ikiwiki_NearlyFreeSpeech.md | 100 | ||||
| -rw-r--r-- | wiki/ikiwiki_comments.md | 19 | ||||
| -rw-r--r-- | wiki/ikiwiki_search.md | 25 | ||||
| -rw-r--r-- | wiki/index.md | 48 | ||||
| -rw-r--r-- | wiki/openbsd.md | 10 | ||||
| -rw-r--r-- | wiki/openbsd_desktop_environment.md | 60 | ||||
| -rw-r--r-- | wiki/openbsd_installation.md | 102 | ||||
| -rw-r--r-- | wiki/ps2.md | 10 | ||||
| -rw-r--r-- | wiki/ps2_networking.md | 21 | ||||
| -rw-r--r-- | wiki/ps2_pcsx2.md | 15 | ||||
| -rw-r--r-- | wiki/qutebrowser.md | 32 | ||||
| -rw-r--r-- | wiki/safari.md | 35 | ||||
| -rw-r--r-- | wiki/scripts.md | 78 | ||||
| -rw-r--r-- | wiki/sublime-text.md | 51 | ||||
| -rw-r--r-- | wiki/ubuntu.md | 89 | ||||
| -rw-r--r-- | wiki/wordpress_database_update.md | 25 | ||||
| -rw-r--r-- | wiki/xbox.md | 9 | ||||
| -rw-r--r-- | wiki/xbox_softmodding.md | 28 |
240 files changed, 1930 insertions, 3336 deletions
diff --git a/.build.yml b/.build.yml new file mode 100644 index 0000000..2f9a51d --- /dev/null +++ b/.build.yml @@ -0,0 +1,20 @@ +image: alpine/latest +oauth: pages.sr.ht/PAGES:RW +packages: +- rsync +- lowdown +- go +- hut +environment: +site: bt.srht.site +sources: +- https://git.sr.ht/~bt/btxx.org +tasks: +- build: | + cd 1mb-club + sudo make build +- package: | + cd btxx.org/build + tar -cvz . > ../../site.tar.gz +- upload: | + hut pages publish -d bt.srht.site site.tar.gz
\ No newline at end of file @@ -1,7 +1 @@ -_site -.sass-cache -.jekyll-cache -.jekyll-metadata -.ruby-version -Gemfile.lock -vendor +build/ @@ -1,10 +0,0 @@ ---- -permalink: /404.html -layout: default ---- - -# 404 - -**Page not found :(** - -The requested page could not be found. diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 0c0860d..0000000 --- a/Gemfile +++ /dev/null @@ -1,34 +0,0 @@ -source "https://rubygems.org" -# Hello! This is where you manage which Jekyll version is used to run. -# When you want to use a different version, change it below, save the -# file and run `bundle install`. Run Jekyll with `bundle exec`, like so: -# -# bundle exec jekyll serve -# -# This will help ensure the proper Jekyll version is running. -# Happy Jekylling! -gem "jekyll", "~> 4.3.3" - -gem "rouge" - -# If you want to use GitHub Pages, remove the "gem "jekyll"" above and -# uncomment the line below. To upgrade, run `bundle update github-pages`. -# gem "github-pages", group: :jekyll_plugins -# If you have any plugins, put them here! -group :jekyll_plugins do - gem "jekyll-feed", "~> 0.12" -end - -# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem -# and associated library. -platforms :mingw, :x64_mingw, :mswin, :jruby do - gem "tzinfo", ">= 1", "< 3" - gem "tzinfo-data" -end - -# Performance-booster for watching directories on Windows -gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin] - -# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem -# do not have a Java counterpart. -gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby] @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2024 Bradley Taunt +Copyright (c) 2022 Bradley Taunt Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE.
\ No newline at end of file +SOFTWARE. diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..118e9e6 --- /dev/null +++ b/Makefile @@ -0,0 +1,14 @@ +build: + sh ./barf + rsync -r public/ build/public + rsync style.css build/style.css + +clean: + rm -rf build/* + +watch: + while true; do \ + ls -d .git/* * posts/* pages/* header.html | entr -cd make build ;\ + done + +.PHONY: build clean watch @@ -1,3 +1,3 @@ # btxx.org -Jekyll source files for my personal blog: btxx.org
\ No newline at end of file +The personal blog of me, Bradley Taunt, built with [barf](https://barf.btxx.org) diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 7226597..0000000 --- a/_config.yml +++ /dev/null @@ -1,48 +0,0 @@ -title: btxx -meta_title: btxx.org -email: bt@btxx.org -author: - name: Bradley Taunt - email: bt@btxx.org -description: >- # this means to ignore newlines until "baseurl:" - Designer, developer, hardware tinkerer, open source advocate, consumer of dark roast coffee, and writer of very long sentences. -baseurl: "" # the subpath of your site, e.g. /blog -url: "" # the base hostname & protocol for your site, e.g. http://example.com - -host: 0.0.0.0 - -highlighter: rouge - -# Build settings -plugins: - - jekyll-feed - -defaults: - - scope: - path: "" - type: "posts" - values: - permalink: /posts/:title/ - -feed: - path: feed.xml - -# Exclude from processing. -# The following items will not be processed, by default. -# Any item listed under the `exclude:` key here will be automatically added to -# the internal "default list". -# -# Excluded items can be processed by explicitly listing the directories or -# their entries' file path in the `include:` list. -# -# exclude: -# - .sass-cache/ -# - .jekyll-cache/ -# - gemfiles/ -# - Gemfile -# - Gemfile.lock -# - node_modules/ -# - vendor/bundle/ -# - vendor/cache/ -# - vendor/gems/ -# - vendor/ruby/ diff --git a/_includes/feed.xml b/_includes/feed.xml deleted file mode 100644 index 310c90b..0000000 --- a/_includes/feed.xml +++ /dev/null @@ -1,23 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" ?> -<rss version="2.0" - xmlns:content="http://purl.org/rss/1.0/modules/content/" - xmlns:dc="http://purl.org/dc/elements/1.1/" - xmlns:media="http://search.yahoo.com/mrss/" - xmlns:atom="http://www.w3.org/2005/Atom"> - <channel> - <title>{{ site.title | xml_escape }}</title> - <link>{{ site.url }}{{ site.baseurl }}</link> - <description>{{ site.description | xml_escape }}</description> - <atom:link href="{{ site.url }}{{ site.baseurl }}/feed.xml" rel="self" type="application/rss+xml"/> - - {% for post in site.posts limit:10 %} - <item> - <title>{{ post.title | xml_escape }}</title> - <link>{{ site.url }}{{ post.url }}</link> - <guid isPermaLink="false">{{ site.url }}{{ post.url }}</guid> - <pubDate>{{ post.date | date_to_rfc822 }}</pubDate> - <description><![CDATA[{{ post.content | xml_escape }}]]></description> - </item> - {% endfor %} - </channel> -</rss>
\ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html deleted file mode 100644 index 1f27e5a..0000000 --- a/_includes/footer.html +++ /dev/null @@ -1,17 +0,0 @@ -<footer> - <p>This is my footer. There are many like it but this one is mine.</p> - <nav id="menu"> - <ul> - <li><a href="/">Home</a></li> - <li><a href="/posts">Posts</a></li> - <li><a href="/wiki">Wiki</a></li> - <li><a href="/projects">Projects</a></li> - <li><a href="/colophon">Colophon</a></li> - <li><a href="/uses">Uses</a></li> - <li><a href="/pizza">Pizza</a></li> - <li><a href="/recipes">Recipes</a></li> - <li><a href="/now">Now</a></li> - <li><a href="/resume">Resume</a></li> - </ul> - </nav> -</footer> diff --git a/_includes/head.html b/_includes/head.html deleted file mode 100644 index 33002b3..0000000 --- a/_includes/head.html +++ /dev/null @@ -1,11 +0,0 @@ -<head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta name="color-scheme" content="dark light"> - <link rel="stylesheet" type="text/css" href="/stylesheets/main.css"> - <link rel="stylesheet" type="text/css" href="/stylesheets/pygments.css"> - <link rel="icon" href="data:,"> - {%- feed_meta -%} - <title>{% if page.title %}{{ page.title }} ·{% endif %} {{ site.meta_title | escape }}</title> -</head> diff --git a/_includes/header.html b/_includes/header.html deleted file mode 100644 index 164fe0c..0000000 --- a/_includes/header.html +++ /dev/null @@ -1,3 +0,0 @@ -<header> - <a href="/">Home</a><span> / </span><a class="menu" href="#menu">Menu ↓</a> -</header>
\ No newline at end of file diff --git a/_layouts/all_posts.html b/_layouts/all_posts.html deleted file mode 100644 index 182a2d0..0000000 --- a/_layouts/all_posts.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -layout: default ---- - -<h1>{{ page.title }}</h1> - -{{ content }} - -{% for post in site.posts %} - <small>{{ post.date | date: "%B %-d, %Y" }}</small><br><a href="{{ post.url }}">{{ post.title }}</a><br><br> -{% endfor %} - diff --git a/_layouts/default.html b/_layouts/default.html deleted file mode 100644 index f969a9d..0000000 --- a/_layouts/default.html +++ /dev/null @@ -1,16 +0,0 @@ -<!DOCTYPE html> -<html lang="{{ page.lang | default: site.lang | default: 'en' }}"> - - {%- include head.html -%} - - <body> - <div class="wrapper"> - {%- include header.html -%} - <main> - {{ content }} - </main> - {%- include footer.html -%} - </div> - </body> - -</html> diff --git a/_layouts/home.html b/_layouts/home.html deleted file mode 100644 index 5fea726..0000000 --- a/_layouts/home.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -layout: default ---- - -{{ content }} - -{% for post in site.posts limit:5 %} -<div class="post"> - <h3><a href="{{ post.url }}">{{ post.title }}</a></h3> - <span class="post-date">{{ post.date | date: "%B %-d, %Y" }}</span> - {{ post.excerpt }} -</div> -{% endfor %} - diff --git a/_layouts/page.html b/_layouts/page.html deleted file mode 100644 index 80476ae..0000000 --- a/_layouts/page.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -layout: default ---- - -<h1>{{ page.title }}</h1> - -{{ content }} diff --git a/_layouts/post.html b/_layouts/post.html deleted file mode 100644 index 50545e8..0000000 --- a/_layouts/post.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -layout: default ---- - -<h1>{{ page.title }}</h1> -<p><small>{{ page.date | date: "%B %-d, %Y" }}</small></p> - -{{ content }} diff --git a/_posts/2017-10-10-design-review-dropbox.md b/_posts/2017-10-10-design-review-dropbox.md deleted file mode 100644 index 6b7a2c3..0000000 --- a/_posts/2017-10-10-design-review-dropbox.md +++ /dev/null @@ -1,130 +0,0 @@ ---- -layout: post -title: "Unsolicited Design Review - Dropbox" -date: 2017-10-10 ---- - - -Earlier last week the design team at Dropbox unveiled their new branding / design system for the company as a whole. If you haven't seen the updated design yet, you can do so here: <a href="https://dropbox.design/">dropbox.design</a> (Take your time, I can wait). - - - -I won't mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them. - -So without anymore fluff - let's get into it. Please leave your bias at the door. - -## Purpose - -It's good to try and understand the motive or problem that a company is trying to solve when redesigning something as fundamental as core branding, but this is where the first red flag appears for Dropbox. There is <i>no real problem to solve</i>. - -On the marketing site promoting the new design system, the Dropbox team doesn't mention a single problem that this branding redesign is meant to fix. Were users confused by the previous system? Is there data showing large drop-off and a lack of conversion directly connected with the design system itself? All they state is they needed a change with zero reasoning as to why. - -<blockquote> - <p>We realized our brand needs to change</p> -</blockquote> - -As I stated at the beginning of this review - it's a redesign for the sake of a redesign. Sometimes this can be acceptable if done correctly, but this is not the case for Dropbox. - -<blockquote> - <p>Our new brand system shows that Dropbox isn't just a place to store your files - <strong>it's a living workspace that brings teams and ideas together</strong>.</p> - <cite><a href="https://dropbox.design/">Dropbox marketing website</a></cite> -</blockquote> - -Let's stop right there. "A place to store your files" is literally 99% of what Dropbox does. I get that they want to be involved in more than that but Dropbox <i>is</i> a cloud storage service. Why is there a desperate need to shift away from that? - -There isn't much else to speak of in terms of 'purpose' regarding the redesign since there doesn't seem to be one. Let's move on. - -## Design Principles - -I hate to be that guy who bases design on a written list of principles, but when it works it works. Dieter Rams states it best: - -1. Good design is innovative -2. Good design makes a product useful -3. Good design is aesthetic -4. Good design makes a product understandable -5. Good design is unobtrusive -6. Good design is honest -7. Good design is long-lasting -8. Good design is thorough down to the last detail -9. Good design is environmentally friendly -10. Good design is as little design as possible - -<p><strong>1. Good design is innovative</strong>. There is zero innovation in this re-brand, it's simply following the trend of quirky / brutal / modern flat elitism that is currently sweeping the industry. It's a fad and will be out-of-date rather quickly.</p> - -<p><strong>2. Good design makes a product useful</strong>. Looking through their reasoning and explanations I can see no boost or improvement to the usefulness of the product. Not to repeat myself, but without any supporting data as to <i>why</i> this change was made we have nothing to base it off of.</p> - -<p><strong>3. Good design is aesthetic</strong>. See #1.</p> - -<p><strong>4. Good design makes a product understandable</strong>. Were customers not able to understand the Dropbox brand prior to this update? Were users misinformed about what the product could do for them? The previous design did a wonderful job of getting out of the way and showing the user exactly what they needed / wanted.</p> - -<p><strong>5. Good design is unobtrusive</strong>. Talk about going backwards on this one. Original system was clean, readable and friendly to new users. Their current system uses an illegible typeface, colors with terrible contrast and a lack of support for the visually impaired, crude illustrations that give no explanation as to what they represent (more on that later), and a lack of browser support / performance issues.</p> - -<p><strong>6. Good design is honest</strong>. Dropbox still maintains this principle. They don't over-promise or outright lie about who and what they are as a product.</p> - -<p><strong>7. Good design is long-lasting</strong>. See #1 & #3 again.</p> - -<p><strong>8. Good design is thorough down to the last detail</strong>. The fact that even their marketing site crashes latest Firefox, lags on Safari for iOS and stutters in Chrome on desktop shows the lack of performance testing that was done. Not to mention the complete disregard for those with visual impairments with their color palette, typeface and contrast selections.</p> - -<p><strong>9. Good design is environmentally friendly</strong>. Doesn't really apply here.</p> - -<p><strong>10. Good design is as little design as possible</strong>. This new brand system is incredibly over-designed.</p> - -<blockquote> - <p>Our users...tell us they feel overwhelmed and distracted during the workday...we want to change this, by building products and a brand that help people focus on meaningful work, instead of busywork.</p> -</blockquote> - -Then maybe your design system should get out of the way. To me, this seems like you want your design to take center-stage over the user's content. - -<strong>Remember: a great design system should go completely unnoticed.</strong> - -## Accessibility - -Any persons with visual impairments need not apply. This design system is not built for you - seek shelter elsewhere. - -<blockquote> - <p>With 259 fonts, our new typeface Sharp Grotesk gives us lots of versatility, allowing us to "speak" in a variety of tones.</p> -</blockquote> - -<figure> - <img src="/public/images/dropbox-fonts_vthivw_c_scale.webp" alt="Dropbox Fonts"> - <figcaption>Not a single one of these typeface styles is initially readable</figcaption> -</figure> - -The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can't help but feel this falls into the "let's be trendy" category and ends up sacrificing almost all good usability practices for gimmicky type. - -<blockquote> - <p>Our users run the gamut from business professionals to scientists and creative types. Most of these folks tell us they feel overwhelmed and distracted during the workday, and that this is one of the biggest barriers to creating work they’re proud of.</p> -</blockquote> - -Irony at it's finest. "Our users tell us that they hate being distracted and overwhelmed, so we've decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system". I hate coming off as mean-spirited - but this is some elaborate joke, right? - -<figure> - <img src="/public/images/dropbox-logos-color_fcogaj_c_scale.webp" alt="Dropbox Color Logos"> - <figcaption>Oh Dropbox...my eyes!</figcaption> -</figure> - -After running it through a color contrast accessibility checker: - -<figure> - <img src="/public/images/dropbox-contrast_plkfxb_c_scale.webp" alt="Dropbox Contrast"> - <figcaption>Multiple accessibility failures</figcaption> -</figure> - -Next we have the child-like 'scribble' illustrations. Now don't get me wrong, I love seeing different illustration styles and I actively use 'sketch / scribble' artwork myself, but I don't believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey. - -Another issue with these illustrations is their usage. Look at the image below and ask yourself if you would correlate it with an error page if no accompanying text was present. - -<figure> - <img src="/public/images/dropbox-404_bovayg_c_scale.webp" alt="Dropbox error page imagery"> - <figcaption>What does this have to do with a 404 error page?</figcaption> -</figure> - -## Closing Thoughts - -I could go into even deeper analysis (including the oversimplification of their box logo, etc.) but I believe I've spent enough time defending my initial reaction as well as my thoughts after a week of soak time. In my opinion this redesign was completely unnecessary. I think this was a problem of too many designers with too much time without a proper project to channel all that talent. - -Unfortunately because they decided to just follow the current trend and design with a lack of purpose, I see Dropbox launching another redesign within the next year once this current design fad dies. My only hope is that the next brand system sets out to solve an actual problem, instead of just trying to be trendy. - -### Personal Remarks - -<i>I love Dropbox as a product and use it every single day. I'm inspired by many of the designers who work there and this article is by no means a personal attack on the company or it's employees. This is merely a blunt and honest review of their new brand design system.</i> diff --git a/_posts/2023-03-16-rvm.md b/_posts/2023-03-16-rvm.md deleted file mode 100644 index 3b914e2..0000000 --- a/_posts/2023-03-16-rvm.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -layout: post -title: "Installing Ruby with RVM on Alpine Linux" -date: 2023-03-16 ---- - - -For some on-going projects I need to switch to different versions of `ruby`. Although there exist many step-by-step instructions on installing and configuring `rvm` for most Linux distros, there aren't many focused on Alpine "daily drivers". - -So this post is more or less a helpful document for my future self. If it happens to help others then that's an added bonus! - -## Simple Setup - -Make sure you have the basic packages first: - - - apk update - apk add curl gcc gnupg gpg dirmngr procps musl-dev linux-headers zlib zlib-dev openssl openssl-dev libssl1.1 - - -Next download the latest `stable` version of `rvm` from Github, unpack it, place it in the proper user directory (~/.rvm) and install any required libs: - - - curl -sSL https://github.com/rvm/rvm/tarball/stable -o rvm-stable.tar.gz - echo 'export rvm_prefix="$HOME"' > ~/.rvmrc - echo 'export rvm_path="$HOME/.rvm"' >> ~/.rvmrc - mkdir rvm && cd rvm - tar --strip-components=1 -xzf ../rvm-stable.tar.gz - ./install --auto-dotfiles --autolibs=0 - - -Now we can remove everything and properly link to `rvm`: - - - cd ../ && rm -rf rvm-stable stable.tar.gz rvm - source ~/.rvm/scripts/rvm - - -**Note**: If you plan to work with `bundler` be sure to do the following before installing ruby versions via `rvm`: - - - rvm pkg install openssl - rvm pkg install libyaml - - -Now you can freely install any version of Ruby that you desire! - - - rvm install ruby-X.X.X - diff --git a/_posts/2023-04-11-html-dark-mode.md b/_posts/2023-04-11-html-dark-mode.md deleted file mode 100644 index 32050a6..0000000 --- a/_posts/2023-04-11-html-dark-mode.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -layout: post -title: "HTML Dark Mode" -date: 2023-04-11 ---- - - -I wrote an article back in 2021 called [The Lazy Developer's Dark Mode](https://bt.ht/lazy-dev-dark-mode/) where I explained how to implement -a very basic "dark mode" by using the `prefers-color-scheme` CSS attribute. This stills works perfectly fine, and in fact there is a cleaner variation of this created by *jacksonchen666*: [These 3 Lines of CSS Will Give You Dark Mode for Free](https://jacksonchen666.com/posts/2023-04-09/13-47-16/). - -But today I wanted to show how to add dark mode functionality to a website without *any CSS at all*. - - - <meta name="color-scheme" content="dark light"> - - -Add that line inside the `head` tags on your HTML files and you're good to go. - -## Minor Caveat - -I mentioned this same issue on the official [barf blog post](https://barf.bt.ht/dark-mode/) but it doesn't hurt to repeat it here. Safari still has minor ahref / link color issue when defaulting to browser dark mode. If supporting that browser is a deal-breaker for you, I suggest looking at my [hacky solution](https://bt.ht/safari-default-dark-mode/). - -Hopefully this helps others to add dark mode to their existing websites and projects with minimal effort! - diff --git a/_posts/2024-05-27-Installing_WordPress_on_NearlyFreeSpeech.md b/_posts/2024-05-27-Installing_WordPress_on_NearlyFreeSpeech.md deleted file mode 100644 index 08b5c80..0000000 --- a/_posts/2024-05-27-Installing_WordPress_on_NearlyFreeSpeech.md +++ /dev/null @@ -1,195 +0,0 @@ ---- -layout: post -title: Installing WordPress on NearlyFreeSpeech -permalink: /posts/Installing_WordPress_on_NearlyFreeSpeech/ ---- - -I recently went through the process of porting over my wife's small business website (built off of WordPress + Woocommerce) from EasyWP to NearlyFreeSpeech. Although the process was fairly easy-going, I thought I would post my complete process here. That way, others who might wish to make the same switch can avoid running into any minor bumps along the way. - -> Some of this information has been lifted from [the official NFS docs](https://members.nearlyfreespeech.net/tdarb/support/wordpress), but these pages require a membership to access - -### Download WordPress - -We will use the `wp-cli` that comes packaged with NearlyFreeSpeech (NFS): - -1. Connect to your site via SSH. -2. Change to the directory you want to be the base of your blog (e.g. /home/public if WordPress will be running the whole site, or /home/public/blog if you want to share the site with other content). - -For help using WP-CLI from the SSH command line, use this command: - -```sh -wp help -``` - -To download and unpack the latest version of WordPress, enter the following command: - -```sh -wp core download -``` - -## Create a MySQL Process and Database - -Follow the instructions in the NearlyFreeSpeech.NET FAQ to [create a MySQL process](https://members.nearlyfreespeech.net/faq?q=MySQL#MySQL) if you haven't already. - -Next, [create a new database](https://members.nearlyfreespeech.net/faq?q=CreateDatabase#CreateDatabase) within that process. Note the name of the process and the name of the database. - -**Important**: Do not use your own MySQL credentials to connect WordPress to your database. Instead, create a new user. This will protect your member password in the event that your site becomes compromised. - - -- Click on the [MySQL tab](https://members.nearlyfreespeech.net/mysql) in the member interface -- Click "[Open phpMyAdmin](https://phpmyadmin.nearlyfreespeech.net/" in the Actions box. -- Enter the DSN ("Server") of your MySQL Process, MySQL username, and MySQL password. The DSN and username can be found on the Process Information page in our member UI. -- Click on the "Users" tab. -- Click "Add user." (It's toward the bottom left of the page.) -- Give the user a descriptive name. We'll use exampledbuser here, but you should pick something better, like wpuser or something representative of your blog. -- Make sure to leave the Host: selectbox on "Any host." -- Click the "Generate" link to generate a nice strong password. -- Use cut and paste to copy the new password somewhere, you'll need it later. (We'll use dbpassword here.) -- Grant the following permissions to the new user: - - All the permissions except "file" in the "data" box, - - Everything in the "structure" box, and - - "LOCK TABLES" in the "administration" box. -- Click the "Go" button in the lower right. -- Exit phpMyAdmin. - -## Generate a WordPress Configuration File - -At the SSH command line (replace the examples with the info for the database and user you created above): - -```sh -wp core config --dbhost=example.db --dbname=exampledb --dbuser=exampledbuser --dbpass=dbpassword -chmod 644 wp-config.php -``` - -## Run the WordPress Installation and Setting Permissions - -To get your permalinks to work properly, you must set up an .htaccess file. - - -1. Go to the Dashboard for your WordPress site. (e.g. https://www.example.com/wp-admin/index.php) -2. In the navigation sidebar, find Settings and, under that, Permalinks. -3. Select your preferred link style under "Common Settings." (We like "Day and name.") -4. Scroll down and select the "Save Changes" button. - -Next, create an `.htaccess` file for your WordPress site. We suggest doing this directly from the SSH command line using the cat shell command: - -```sh -# This line is a shell command, not part of .htaccess! -cat >.htaccess <<NFSNRULES -RewriteEngine On -RewriteBase / -RewriteRule ^index\.php$ - [L] -RewriteCond %{REQUEST_FILENAME} !-f -RewriteCond %{REQUEST_FILENAME} !-d -RewriteRule . /index.php [L] -NFSNRULES -``` - -If you prefer, you can copy-paste the text into an editor: - -```sh -RewriteEngine On -RewriteBase / -RewriteRule ^index\.php$ - [L] -RewriteCond %{REQUEST_FILENAME} !-f -RewriteCond %{REQUEST_FILENAME} !-d -RewriteRule . /index.php [L] -``` - -We need to run the following commands in order to install, uninstall, activate, and deactivate plugins/themes from within the admin web GUI of WordPress: - -```sh -chgrp web .htaccess -chmod 664 .htaccess -chgrp -R web * -find . -type d -exec chmod 775 {} \; -find . -type f -exec chmod 664 {} \; -wp config set FS_METHOD direct -``` - -## Enable File Uploading - -In your main WordPress installation folder enter the following SSH commands: - -```sh -cd wp-content -mkdir -p uploads -chgrp -R web uploads -chmod -R 775 uploads -``` - -## Keeping WordPress Up-To-Date Automatically via Command Line - -It is **critically** important to keep your WordPress installation up-to-date including, if applicable, your theme and plugins. PHP, WordPress, and WordPress themes and plugins all have a track record of security problems. Most of those get fixed quickly, but if you don't update, you don't get the fixes. - -To help you keep WordPress up-to-date, NFS provides a streamlined script. - -This command, which must be run from an interactive ssh session, will set up our system to check your WordPress install (and themes & plugins) for you every day, and update them automatically when needed: - -```sh -wp-update.sh -a -``` - -By default, it will tell you via email when updates happen. If you don't want that, just add `-q` (for "quiet") to the command. It will work silently unless there is an error. - -If you get errors from wp-cron (not wp-update) about failed automatic updates, you may also wish to add this to your wp-config.php file: - -```sh -define( 'AUTOMATIC_UPDATER_DISABLED', true ); -``` - -This disables the insecure automatic updater bundled with recent versions of WordPress. - -**Do not attempt** to use WordPress's built-in ability to update itself through its admin panel. That insecure, outdated approach should not still exist. It does not work on NFS, which is a feature, not a bug. Getting it to work requires almost completely destroying your site's security, thereby ensuring that any undiscovered security flaw can enable hackers to completely obliterate your site. The update methods described here are faster, easier, and safer. - -## Logging In - -You should be able to navigate to `yourwebsite.com/wp-admin`, login and have everything work as expected. Congrats - enjoy your blog! - -Below you can find more advanced configuration to get the most out of your WordPress project. - ---- - -## Backing up WordPress - -NFS recommends backing up your WordPress setup on a regular basis. - -This is a two-step process. You must back up both the files and the database. - -### Backing up WordPress Files - -To back up your WordPress files directly from a Unix-like system of your own, you can use a command like: - -```sh -ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net tar -C /home/public -cvf - . | gzip >name-of-wordpress-backup.tar.gz -``` - -To back up WordPress to a file on our system that you can transfer via SFTP to your own computer, you can use a command like: - -```sh -tar -C /home/public -cvzf /home/tmp/name-of-wordpress-backup.tar.gz . -``` - -This assumes that your WordPress install is in the default location (`/home/public`). It will put your backup file in your `/home/tmp` directory. - -Do not try to back up your WordPress folder into your WordPress folder, as that occasionally results in attempts to use infinite disk space by trying to back up the backup of the backup of the backup of the... - -### Backing up the WordPress Database - -If you have a Unix-like system of your own (e.g. macOS or Linux), you can do the backup directly from there using your local command prompt using the MySQL username and password you created for WordPress: - -```sh -ssh yourmembername_siteshortname@ssh.phx.nearlyfreespeech.net wp db export - | gzip >wordpress-backup.sql.gz -``` - -Or you can do it from the SSH command line via WP-CLI: - -```sh -wp db export /home/tmp/wordpress-backup.sql -``` - -The `wordpress-backup.sql` file this generates will be stored in your site's `/home/tmp` directory. Download it from there to have a local copy. - -## That's It! - -Your WordPress site should be up-and-running now. Further customization or extra plugins/services can be freely added if so desired. Enjoy your site! diff --git a/about.md b/about.md deleted file mode 100644 index 097cbda..0000000 --- a/about.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: page -title: About -permalink: /about/ ---- - -Hi, my name is Bradley Taunt. I'm a designer/developer hybrid helping software companies improve their user experience and ship more performant products. Currently making search engine results data more accessible at [SerpApi](https://serpapi.com). - -But you probably read all that on my homepage. Interested to learn more? - -## I am... - -* Married to a wonderful wife (she also happens to be my best friend) -* Raising 3 awesome kids (aged 6, 4 and 2) with said wife -* Living in rural Canada (I can see cows and horses outside my window!) -* Passionate about open source software / hardware -* A huge hockey fan - Go Sens Go! -* An avid gamer (whenever I get a chance), specifically the "soulsborne" type genre -* A collector of vintage computers and electronics diff --git a/atom.xml b/atom.xml deleted file mode 100644 index b50e1c7..0000000 --- a/atom.xml +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: none ---- -<?xml version="1.0" encoding="utf-8"?> -<feed xmlns="http://www.w3.org/2005/Atom"> - <title>{{ site.title | xml_escape }}</title> - <link href="{{ site.url | append: site.baseurl | append: '/atom.xml' }}"/> - <updated>{{ site.time | date_to_xmlschema }}</updated> - <id>{{ site.url | append: site.baseurl | append: '/atom.xml' }}</id> - <author> - <name>{{ site.author.name }}</name> - </author> - {% for post in site.posts limit:10 %} - <entry> - <title>{{ post.title | xml_escape }}</title> - <link href="{{ post.url | prepend: site.baseurl | prepend: site.url }}"/> - <id>{{ post.id }}</id> - <updated>{{ post.date | date_to_xmlschema }}</updated> - <summary>{{ post.content | xml_escape }}</summary> - </entry> - {% endfor %} -</feed> @@ -0,0 +1,158 @@ +#!/bin/sh + +domain="https://btxx.org" + +# Check the operating system +os_name=$(uname -s) + +if [ "$os_name" = "OpenBSD" ]; then + alias sed=gsed + alias date=gdate + alias rsync=openrsync +elif [ "$os_name" = "Darwin" ]; then + alias sed=gsed + alias date=gdate +fi + +set -eu +MARKDOWN=lowdown +IFS=' ' + +# Create tab separated file with filename, title, creation date, last update +index_tsv() { + for f in "$1"/*.md + do + title=$(sed -n '/^# /{s/# //p; q}' "$f") + printf '%s\t%s\t%s\t%s\n' "$f" "${title:="No Title"}" + done +} + +index_html() { + # Print header + title=$(sed -n '/^# /{s/# //p; q}' index.md) + sed "s/{{TITLE}}/$title/" header.html + + # Intro text + $MARKDOWN index.md + + echo "<ul>" + + # Posts + while read -r f title created; do + link=$(echo "$f" | sed -E 's|.*/(.*).md|\1/|') + created=$(echo $(head -3 "$f" | tail -1)) + echo "<li>$created · <a href=\"$link\">$title</a></li>" + done < "$1" | sort -r + + echo "</ul>" + + # Print footer after post list + cat footer.html +} + +atom_xml() { + uri=$(sed -rn '/atom.xml/ s/.*href="([^"]*)".*/\1/ p' header.html) + first_commit_date=$(git log --pretty='format:%ai' . | cut -d ' ' -f1 | tail -1) + + cat <<EOF +<?xml version="1.0" encoding="utf-8"?> +<feed xmlns="http://www.w3.org/2005/Atom"> + <title>$(sed -n '/^# /{s/# //p; q}' index.md)</title> + <link href="$domain/atom.xml" rel="self" /> + <updated>$(date +%FT%TZ)</updated> + <author> + <name>$(git config user.name)</name> + </author> + <id>$domain,$first_commit_date:default-atom-feed/</id> +EOF + + while read -r f title created; do + + content=$($MARKDOWN "$f" | sed 's/&/\&/g; s/</\</g; s/>/\>/g; s/"/\"/g; s/'"'"'/\'/g') + post_link=$(echo "$f" | sed -E 's|posts/(.*).md|\1|') + basic_date=$(echo $(head -3 "$f" | tail -1)) + published_date=$(date -d $basic_date -u +%Y-%m-%dT10:%M:%SZ) + + cat <<EOF + <entry> + <title>$title</title> + <content type="html">$content</content> + <link href="$domain/$post_link"/> + <id>$domain/$post_link</id> + <updated>$published_date</updated> + <published>$published_date</published> + </entry> +EOF + done < "$1" + + echo '</feed>' +} + +rss_xml() { + uri=$(sed -rn '/rss.xml/ s/.*href="([^"]*)".*/\1/ p' header.html) + first_commit_date=$(git log --pretty='format:%ai' . | cut -d ' ' -f1 | tail -1) + + cat <<EOF +<?xml version="1.0" encoding="utf-8"?> +<rss version="2.0"> + <channel> + <title>$(sed -n '/^# /{s/# //p; q}' index.md)</title> + <link>$domain/rss.xml</link> + <description>Feed description here</description> + <lastBuildDate>$(date -u +"%a, %d %b %Y %H:%M:%S %z")</lastBuildDate> + <pubDate>$(date -u +"%a, %d %b %Y %H:%M:%S %z")</pubDate> + <generator>Custom RSS Generator</generator> + <ttl>1800</ttl> +EOF + + while read -r f title created; do + content=$($MARKDOWN "$f" | sed 's/&/\&/g; s/</\</g; s/>/\>/g; s/"/\"/g; s/'"'"'/\'/g') + post_link=$(echo "$f" | sed -E 's|posts/(.*).md|\1|') + basic_date=$(echo $(head -3 "$f" | tail -1)) + published_date=$(date -d "$basic_date" -u +"%a, %d %b %Y %H:%M:%S %z") + + cat <<EOF + <item> + <title>$title</title> + <description>$content</description> + <link>$domain/$post_link</link> + <guid isPermaLink="false">$domain/$post_link</guid> + <pubDate>$published_date</pubDate> + </item> +EOF + done < "$1" + + echo '</channel>' + echo '</rss>' +} + +write_page() { + filename=$1 + directory=$(echo $(basename "$filename" .md)) + $(mkdir -p build/$directory) + target=$(echo "$filename" | sed -r 's|\w+/(.*).md|build/\1/index.html|') + created=$(echo $(head -3 "$filename" | tail -1)) + title=$2 + + $MARKDOWN "$filename" | \ + cat header.html - |\ + sed "s|{{TITLE}}|$title|" \ + > "$target" && cat footer.html >> "$target" +} + +rm -rf build && mkdir build + +# Blog posts +index_tsv posts | sort -rt " " -k 3 > build/posts.tsv +index_html build/posts.tsv > build/index.html +atom_xml build/posts.tsv > build/atom.xml +rss_xml build/posts.tsv > build/rss.xml +while read -r f title created; do + write_page "$f" "$title" "$created" +done < build/posts.tsv + +# Pages +index_tsv pages > build/pages.tsv +while read -r f title created; do + write_page "$f" "$title" "$created" +done < build/pages.tsv diff --git a/colophon.md b/colophon.md deleted file mode 100644 index ac3c102..0000000 --- a/colophon.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: page -title: Colophon -permalink: /colophon/ ---- - -This website is a collection of living, breathing documents. As I mention on the homepage, this place is better referred to as an online [brain dump](/posts/dump). It might change over time. Styles might come and go. I can't help that, since tinkering with my personal blog is something I am very fond of. It's almost therapeutic. - -For those interested I try to keep the details of the blog up-to-date with the information below: - -## Website Fast Facts - -| Parameter | Source | -|---|---| -|Built with:|[Jekyll](https://jekyllrb.com)| -|Hosted on:|[Sourcehut Pages](https://sourcehut.org)| -|Source code:|[Sourcehut](https://git.sr.ht/~bt/btxx.org)| -|Licensed under:|[MIT](https://git.sr.ht/~bt/btxx.org/tree/master/item/LICENSE)| -|Developed on:|ThinkPad X220 / MacBook Air M2| diff --git a/footer.html b/footer.html new file mode 100644 index 0000000..7974080 --- /dev/null +++ b/footer.html @@ -0,0 +1,22 @@ +<footer role="contentinfo"> + <h2>Menu Navigation</h2> + <ul id="menu"> + <li><a href="/">Home</a></li> + <li><a href="/projects">Projects</a></li> + <li><a href="/uses">Uses</a></li> + <li><a href="/wiki">Wiki</a></li> + <li><a href="/resume">Resume</a></li> + <li><a href="/colophon">Colophon</a></li> + <li><a href="/now">Now</a></li> + <li><a href="/donate">Donate</a></li> + <li><a href="/atom.xml">RSS</a></li> + <li><a href="#top">↑ Top of the page</a></li> + </ul> + <small> + Built with <a href="https://barf.btxx.org">barf</a>. <br> + Feeds: <a href="/atom.xml">Atom</a> & <a href="/rss.xml">RSS</a><br> + Maintained with ♥ for the web. <br> + Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br> + The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>. + </small> +</footer>
\ No newline at end of file diff --git a/header.html b/header.html new file mode 100644 index 0000000..323a01f --- /dev/null +++ b/header.html @@ -0,0 +1,18 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="color-scheme" content="dark light"> + <link rel="icon" href="data:,"> + <title>{{TITLE}}</title> + <link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> + <link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> +<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style> +</head> + +<nav> + <a href="#menu">Menu ↓</a> +</nav> + +<main> @@ -1,31 +1,18 @@ ---- -layout: home ---- - # Designer, developer, hardware tinkerer, open source advocate, consumer of dark roast coffee, and writer of very long sentences. -Hi, my name is Bradley Taunt. I'm a designer/developer hybrid helping software companies improve their user experience and ship more performant products. - -I also actively maintain several [open source projects](/projects). +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](/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](/posts/dump). -### Skills & Languages +## Skills & Languages -Core programming languages are HTML, CSS, JavaScript, and Ruby. For design work, my preferred tools are Sketch, GIMP, and Figma. I also enjoy tinkering with basic shell scripts and [Unix systems](/public/images/unix.gif). - ---- +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](/public/images/unix.gif). ## Design Thought Experiments -[Stop Using Hamburger Menus (Sometimes)](/posts/hamburgers)<br> Common performance and accessibility issues caused by using hamburger menus. - -[Better Search Results](https://search.bt.ht)<br> Rethinking the UX flow of modern search engines. - -[My Coffee Maker Just Makes Coffee](/posts/one-thing)<br> How products should focus on doing *one thing* very well. - -[Blog Anonymously](https://anon.btxx.org)<br>A basic starting point for those wishing to blog privately. - ---- +* [Stop Using Hamburger Menus (Sometimes)](/posts/hamburgers) +* [Better Search Results](https://search.btxx.org) +* [My Coffee Maker Just Makes Coffee](/posts/one-thing) +* [Blog Anonymously](https://anon.btxx.org) -## Latest Posts +## Articles & Tutorials diff --git a/pages/colophon.md b/pages/colophon.md new file mode 100644 index 0000000..294dc64 --- /dev/null +++ b/pages/colophon.md @@ -0,0 +1,16 @@ +# Colophon + +This website is a collection of living, breathing documents. As I mention on the homepage, this place is better referred to as an online [brain dump](/dump). It might change over time. Styles might come and go. I can't help that, since tinkering with my personal blog is something I am very fond of. It's almost therapeutic. + +For those interested I try to keep the details of the blog up-to-date with the information below: + +## Website Fast Facts + +| Parameter | Source | +|---|---| +|Built with:|[barf](https://barf.bt.ht)| +|Hosted on:|[SourceHut Pages](https://srht.site/)| +|Source code available:|[SourceHut](https://git.sr.ht/~bt/bt.ht)| +|Licensed under:|[MIT](https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE)| +|Developed on:|ThinkPad X201| +|Operating system:|OpenBSD| diff --git a/pages/donate.md b/pages/donate.md new file mode 100644 index 0000000..85197ff --- /dev/null +++ b/pages/donate.md @@ -0,0 +1,23 @@ +# Donate + +If you feel the burning desire to help support this small blog of mine, please take a look at the options below. You can still enjoy everything on this blog for free, so please don't feel obligated to donate. + +## How are donations used? + +That's a good question. Almost all money donated goes towards hosting, domain renewal costs and [open source services I use myself](/uses). Anything "extra" ends up getting me a coffee (or beer) to enjoy while I publish more free (and hopefully useful) content. + +### Standard Donations + +- [Buy Me a Coffee](https://www.buymeacoffee.com/WQTMtn7ir) +- [PayPal](https://paypal.me/bradtaunt) +- [Directly through Stripe](https://buy.stripe.com/eVa14A885elO9JS9AE) + +### Crypto Donations? + +Besides producing massive e-waste, consuming an enormous amount of energy, being largely used in association with fraudulent activities, and taking advantage of those under economic difficulties, crypto overall is something I am strongly opposed to. + +If crypto is the only payment option at your disposal and you still wish to make a donation; **don't**. Instead, make that donation to a local non-profit organization. "Cash it in" and use that money in your own community. Donate your *time* to others. + +Or simply shoot me an email, talk a little about yourself and say hello. A friendly conversation is worth a lot more than any crypto. + +Thanks for understanding.
\ No newline at end of file @@ -1,19 +1,17 @@ ---- -layout: page -title: Now -permalink: /now/ ---- +# Now This page is based off the [now page concept](https://nownownow.com/about) by Derek Sivers. +**Updated October 09, 2023** + ## Work - Working as a UX designer & fullstack developer hybrid ## Life -- Raising my three children (aged 6, 4 and 2 respectively) with my wonderful wife +- Raising my three children (aged 5, 3 and 1 respectively) with my wonderful wife - Trying to contribute more to open source projects that I actively use - Slowly teaching myself C & RSpec - Advancing my knowledge of Ruby -- Currently playing Halo 2 on the original Xbox! (Thanks Insignia!) +- Currently playing Darktide on Xbox
\ No newline at end of file diff --git a/pages/projects.md b/pages/projects.md new file mode 100644 index 0000000..be6d948 --- /dev/null +++ b/pages/projects.md @@ -0,0 +1,27 @@ +# Projects + +## Active Projects +* [barf](https://barf.bt.ht): Minimal blog engine in a tiny shell script +* [ssgit](https://ssgit.bt.ht): Static site git page generator +* [Vanilla CSS](https://vanillacss.com): A minimal baseline stylesheet for any web project +* [Web Audit](https://audit.bt.ht): Detailed checklist audit for developing websites +* [Normform](https://normform.netlify.app): Minimal CSS form plugin (6KB) +* [23 Tales](https://23tales.netlify.app): Online collection of works by Beatrix Potter +* [Shinobi](https://shinobi.bt.ht): Text-based, RSS focused blogging "system" +* [pblog](https://pblog.bt.ht): Pandoc static blog generator +* [Light Speed](https://ls.bt.ht): Jekyll theme with a perfect Lighthouse score + +## Clubs +* [1MB Club](https://1mb.club): A collection of web pages weighing less than 1 megabyte +* [1kB Club](https://1kb.club): A collection of web pages weighing less than 1 kilobyte +* [XHTML Club](https://xhtml.club) A collection of HTML-focused websites + +## Installers / Setups +* [Open Suck](https://git.sr.ht/~bt/open-suck): OpenBSD desktop based on the suckless philosophy +* [Void Suck](https://vs.bt.ht): Void Linux desktop based on the suckless philosophy +* [Alpine Suck](https://as.bt.ht): Alpine Linux desktop based on the suckless philosophy +* [Alpine Wayland Desktop](https://git.sr.ht/~bt/alpine-linux-setup): Bare-bones Wayland "Desktop" Alpine installer script + +## Experiments +* [Blog Anonymously](https://anon.bt.ht): A basic starting point for those wishing to blog privately +* [Better Search Results](https://search.bt.ht): Rethinking the UX flow of modern search engines diff --git a/pages/resume.md b/pages/resume.md new file mode 100644 index 0000000..429085b --- /dev/null +++ b/pages/resume.md @@ -0,0 +1,109 @@ +# Bradley Taunt + +**UX Designer & Software Engineer**<br> +brad@bt.ht + +As a designer/developer hybrid, I help software companies improve their user experience and ship more performant products. + +## 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. + +## Experience + +|Title|Company|Duration| +|-----|-------|--------| +|Full Stack Engineer|SerpApi|2023-Now| +|Senior UX Designer|Donorbox|2021-2023| +|Senior Designer|Purism|2019-2021| +|Lead Product Designer|Benbria|2012-2019| +|Web Designer|Netvatise|2009-2012| + +<!-- - **Fullstack Engineer at SerpApi** + - *2023-Now* / Remote<br> +- **Senior UX Designer at Donorbox** + - *2021-2023* / Remote<br> +- **Senior Designer at Purism** + - *2019-2021* / Remote<br> +- **Lead Product Designer at Benbria** + - *2012-2019* / Ottawa, Canada<br> +- **Web Designer & SEO Technician at Netvatise** + - *2006-2009* / Oshawa, Canada<br> --> + +<!-- ### Fullstack Engineer at SerpApi + +**2023-Now** / Remote + +- Update and implement frontend designs +- + +### Senior UX Designer at Donorbox + +**2021-2023** / Remote + +- Conduct user and customer interviews +- Collect and analyze user testing interviews +- Implement new designs in Figma +- Create interactive prototypes for internal testing +- Develop front-end web components +- Sync and test development work with front-end team + +### Senior Designer at Purism + +**2019-2021** / Remote + +- Designed and developed product pages +- WordPress / WooCommerce management and maintenance +- Developed one-off mini-sites +- Updated SEO-targeted landing pages +- Social media and community management + +### Lead Product Designer at Benbria + +**2012-2019** / Ottawa, Canada + +- Redesigned entire customer inbox (web app) journey +- Built the customer-facing UI for clients such as A&W, Royal Caribbean International, Sandals, Delta, Farm Boy, and more +- Worked with iOS developers to port existing web app to native for iPads/iPhones + +### Web Designer & SEO Technician at Netvatise + +**2009-2012** / Toronto, Canada + +- Static website design and deployment +- WordPress / WooCommerce management and maintenance +- SEO content updates / performance boosts +- Web analytics reviews & audits --> + +## Education + +|Institution|Program|Completion| +|-----------|-------|------| +|Durham College|Multimedia Design|2009| + +<!-- ### Durham College + +**2006-2009** / Oshawa, Canada + +- Associates Degree in Multimedia Design - 3 Year Program --> + +## Interests + +- Open source software +- Web accessibility +- Data analysis, big and small +- Visualization +- Performance and utilization +- Linux systems +- Software security and privacy +- Minimal user interface design +- Detailed documentation +- Optimizing build times and version control +- Writing technical articles + +Other: playing with my kids, hockey, video games, Linux distro-hopping. + +## References + +Available upon request. + @@ -1,8 +1,4 @@ ---- -layout: page -title: Uses -permalink: /uses/ ---- +# Things I Use This page contains a somewhat up-to-date listing of all hardware and software that I currently use. Seeing similar pages on other people's personal websites have proved quite valuable to me, so I figured I would do the same! @@ -12,39 +8,31 @@ I'm proud to support open source products and privacy-respecting communities. Th |Service|Cost/year| |-------|--------------| -|[NearlyFreeSpeech](https://nearlyfreespeech.net)<br>Domains (5), web hosting & personal code forge|~$115| -|[Migadu](https://migadu.com)<br>Email service|$19| -|[Mullvad](https://mullvad.net)<br>Privacy focused VPN|$60| -|[Sourcehut](https://sourcehut.org)<br>Backup open source code forge & web hosting|~$30| +|[gandi](https://gandi.net) - Domain renewal|$172| +|[gandi mail](https://webmail.gandi.net) - Email service|$64| +|[sourcehut](https://sourcehut.org) - Open source code forge.|$60| +|[mullvad](https://mullvad.net) - Privacy focused VPN service provider.|$60| -## Work Laptop +## Laptops - -- **M2 MacBook Air** (Daily Driver) - - CPU: Apple M2 +- **M2 MacBook Air** (Daily Work) + - CPU: M2 Apple Silicon - RAM: 16GB - Storage: 256GB - - OS: MacOS Sonoma - -## Personal Laptops - -- **ThinkPad X201** - - CPU: Intel Core i5-520M @ 2.9 GHz - - RAM: 8GB - - Storage: 128GB SSD - - OS: Alpine Suck ([see build](https://git.btxx.org/alpine-suck/about/)) + - OS: macOS - **ThinkPad X220** - CPU: Intel Core i5 2540M @ 2.6 GHz - RAM: 16GB - Storage: 128GB SSD - - OS: OpenBSD ([see build](https://git.btxx.org/open-suck/about/)) + - OS: OpenBSD ([see build](https://git.btxx.org/open-suck/about)) + - OS: Alpine Linux ([see build](https://git.btxx.org/alpine-suck/about)) -- **ThinkPad X260** - - CPU: Intel i5-6300U (4) @ 3.000GHz - - RAM: 32GB +- **ThinkPad X201** + - CPU: Intel Core i5-520M @ 2.9 GHz + - RAM: 8GB - Storage: 128GB SSD - - OS: Ubuntu + - OS: FreeBSD ([see build](https://git.btxx.org/suckless-beastie/about)) As you can tell: I *really* like ThinkPads... @@ -52,7 +40,6 @@ As you can tell: I *really* like ThinkPads... - Logitech Pebble Mouse - Cheap USB microphone -- Samsung 27" 4K Monitor ## "Mobile" Devices diff --git a/pages/wiki.md b/pages/wiki.md new file mode 100644 index 0000000..3e684b6 --- /dev/null +++ b/pages/wiki.md @@ -0,0 +1,378 @@ +# Wiki + +## Introduction + +This is a living document that will expand alongside my own personal experiences and knowledge. Topics range from device settings, computer configurations, household product serial numbers / expiry dates, and so on. Hopefully this can end up being helpful to others as well. + +## Open Suck + +My personal, lightweight desktop installer for OpenBSD based on the suckless philosophy. Includes my own custom set of suckless tools (dwm, slstatus, dmenu, etc.) + +- [https://git.sr.ht/~bt/open-suck](https://git.sr.ht/~bt/open-suck) + +## vimrc + +``` +" Don't try to be vi compatible +set nocompatible + +" Helps force plugins to load correctly when it is turned back on below +filetype off + +" TODO: Load plugins here (pathogen or vundle) + +" Turn on syntax highlighting +syntax on + +" For plugins to load correctly +filetype plugin indent on + +" TODO: Pick a leader key +" let mapleader = "," + +" Security +set modelines=0 + +" Show line numbers +set number + +" Show file stats +set ruler + +" Blink cursor on error instead of beeping (grr) +set visualbell + +" Encoding +set encoding=utf-8 + +" Whitespace +set wrap +set textwidth=79 +set formatoptions=tcqrn1 +set tabstop=2 +set shiftwidth=2 +set softtabstop=2 +set expandtab +set noshiftround + +" Cursor motion +set scrolloff=3 +set backspace=indent,eol,start +set matchpairs+=<:> " use % to jump between pairs +runtime! macros/matchit.vim + +" Move up/down editor lines +nnoremap j gj +nnoremap k gk + +" Allow hidden buffers +set hidden + +" Rendering +set ttyfast + +" Status bar +set laststatus=2 + +" Last line +set showmode +set showcmd + +" Searching +nnoremap / /\v +vnoremap / /\v +set hlsearch +set incsearch +set ignorecase +set smartcase +set showmatch +map <leader><space> :let @/=''<cr> " clear search + +" Remap help key. +inoremap <F1> <ESC>:set invfullscreen<CR>a +nnoremap <F1> :set invfullscreen<CR> +vnoremap <F1> :set invfullscreen<CR> + +" Textmate holdouts + +" Formatting +map <leader>q gqip + +" Visualize tabs and newlines +set listchars=tab:▸\ ,eol:¬ +" Uncomment this to enable by default: +" set list " To enable by default +" Or use your leader key + l to toggle on/off +map <leader>l :set list!<CR> " Toggle tabs and EOL + +" Color scheme (terminal) +set t_Co=256 +set background=dark +let g:solarized_termcolors=256 +let g:solarized_termtrans=1 +" put https://raw.github.com/altercation/vim-colors-solarized/master/colors/solarized.vim +" in ~/.vim/colors/ and uncomment: +" colorscheme solarized +``` + +## .zshrc extras / aliases + +``` +export EDITOR="/bin/vim" + +alias suck="sudo rm -rf config.h ; sudo make install" +alias fixmonitor="xrandr --auto --output eDP1 --mode 1366x768 --below DP2-2" +alias vscode="alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil"" +``` + +## mimeapps.list + +Place this file under `/usr/share/applications/mimeapps.list` + +``` +[Default Applications] +x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop +x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop +x-scheme-handler/ftp=org.qutebrowser.qutebrowser.desktop +x-scheme-handler/chrome=org.qutebrowser.qutebrowser.desktop +text/html=org.qutebrowser.qutebrowser.desktop +application/x-extension-htm=org.qutebrowser.qutebrowser.desktop +application/x-extension-html=org.qutebrowser.qutebrowser.desktop +application/x-extension-shtml=org.qutebrowser.qutebrowser.desktop +application/xhtml+xml=org.qutebrowser.qutebrowser.desktop +application/x-extension-xhtml=org.qutebrowser.qutebrowser.desktop +application/x-extension-xht=org.qutebrowser.qutebrowser.desktop +image/jpeg=feh +image/png=feh +image/webp=feh +``` + +## qutebrowser + +### Greasemonkey + +All of these scripts should be added under `~/.local/share/qutebrowser/greasemonkey/`. Then be sure to run the proper command within qutebrowser: `:greasemonkey-reload` + +#### Auto Skip YouTube Ads + +``` +// ==UserScript== +// @name Auto Skip YouTube Ads +// @version 1.0.0 +// @description Speed up and skip YouTube ads automatically +// @author jso8910 +// @match *://*.youtube.com/* +// @exclude *://*.youtube.com/subscribe_embed?* +// ==/UserScript== +setInterval(() => { + const btn = document.querySelector('.videoAdUiSkipButton,.ytp-ad-skip-button') + if (btn) { + btn.click() + } + const ad = [...document.querySelectorAll('.ad-showing')][0]; + if (ad) { + document.querySelector('video').playbackRate = 10; + } +}, 50) +``` + +## `ffmpeg` to MP4 + +``` +ffmpeg -i input_filename.avi -c:v copy -c:a copy -y output_filename.mp4 +``` + +## Mount USB HDD via CLI + +``` +mkdir /media/usb-drive +mount /dev/sdX /media/usb-drive/ +``` + +## Run Mullvad on Alpine Linux (Wireguard) + +``` +# Install wireguard +apk add wireguard-tools +``` + +Login into Mullvad and download the proper wireguard configuration files(s). After downloaded, place in the proper directory: + +``` +doas cp <MULLVAD_FILENAME>.conf /etc/wireguard/" +``` + +Then setup an aliases for easier up/down states: + +``` +alias vpnup="doas wg-quick up /etc/wireguard/<MULLVAD_FILENAME>.conf" +alias vpndown="doas wg-quick down /etc/wireguard/<MULLVAD_FILENAME>.conf" +``` + +## Alpine Linux `mini_racer` Tweaks + +Gem lockfile: + +``` +PLATFORMS + ruby + x86_64-linux-musl + +mini_racer (0.6.3) + <remove child dependency> +``` + +then run: `bundle update mini_racer` + +## Docker + +Installing `ghost` + +``` +docker pull ghost +``` + +``` +docker run -d \ + --name ghost-name \ + -e NODE_ENV=development \ + -p 2368:2368 \ + -v $HOME/path/to/ghost/blog:/var/lib/ghost/content \ + ghost:alpine +``` + +## MongoDB 3.4 on Ubuntu 23.10 + +``` +wget http://launchpadlibrarian.net/668089858/libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb +sudo apt install ./libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb +sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10 + +echo "deb http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list +``` + +Now edit `/etc/apt/sources.list.d/mongodb-org-3.4.list`: + +``` +deb [trusted=yes] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4... +``` + +Then finish things up: + +``` +sudo apt-get update --allow-unauthenticated +sudo apt-get install -y mongodb-org + +sudo mkdir -p /data/db +sudo chmod -R 777 /data/db +``` + +## Redis 6.0.7 on Ubuntu 23.10 + +``` +sudo apt-get install build-essential tcl +cd /tmp +curl -O http://download.redis.io/releases/redis-6.0.7.tar.gz +tar xzvf redis-6.0.7.tar.gz +cd redis-6.0.7 +``` + +Install redis: + +``` +make +make test +sudo make install + +sudo mkdir /etc/redis +sudo cp /tmp/redis-6.0.7redis.conf /etc/redis +``` + +Edit `/etc/redis/redis.conf` with the following changes: + +- `supervised systemd` +- `dir /var/lib/redis` + +Create systemd unit file for redis: `/etc/systemd/system/redis.service`: + +``` +[Unit] +Description=Redis In-Memory Data Store +After=network.target + +[Service] +User=redis +Group=redis +ExecStart=/usr/local/bin/redis-server /etc/redis/redis.conf +ExecStop=/usr/local/bin/redis-cli shutdown +Restart=always + +[Install] +WantedBy=multi-user.target +``` + +Final steps: + +``` +sudo adduser --system --group --no-create-home redis +sudo mkdir /var/lib/redis +sudo chown redis:redis /var/lib/redis +sudo chmod 770 /var/lib/redis +``` + +## Ruby 2.7.2 with rbenv on Ubuntu 23.10 + +Edit the `/etc/apt/sources.list` file: + +``` +deb [trusted=yes] http://security.ubuntu.com/ubuntu bionic-security main +``` + +Then run `sudo apt-get update`. After completion, install `libssl1.0-dev`: + +``` +sudo apt-get install libssl1.0-dev +``` + +## Fix screen tearing + +``` +sudo micro /etc/X11/xorg.conf.d/20-intel.conf +``` + +Add the following contents to `20-intel.conf`: + +``` +Section "OutputClass" + Identifier "Intel Graphics" + MatchDriver "i915" + Driver "intel" + Option "DRI" "3" + Option "TearFree" "1" +EndSection +``` + +## Enabling "tap to click" + +``` +sudo micro /etc/X11/xorg.conf.d/30-touchpad.conf +``` + +Add the following contents to `30-touchpad.conf`: + + + Section "InputClass" + Identifier "touchpad" + Driver "libinput" + MatchIsTouchpad "on" + Option "Tapping" "on" + Option "TappingButtonMap" "lmr" + EndSection + +## Woocommerce + +**Reset all product menu_order to `0`** + +``` +UPDATE wp_posts SET menu_order = 0 WHERE post_type = 'product'; +``` diff --git a/posts.md b/posts.md deleted file mode 100644 index fbd68e5..0000000 --- a/posts.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -layout: all_posts -title: Posts -permalink: /posts/ ---- diff --git a/_posts/2022-11-23-10.md b/posts/$10.md index f3c6abf..077c74d 100644 --- a/_posts/2022-11-23-10.md +++ b/posts/$10.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Do You Have an Extra $10?" -date: 2022-11-23 ---- +# Do You Have an Extra $10? +2022-11-23 As software designers and developers, think of all the little things that we spend $10 on. Maybe it's a couple coffees over the course of a week. Maybe it's a TV streaming subscription. Maybe it's an impulse buy while we're out shopping for groceries. Maybe it goes into a mason jar on top of the fridge, stored away for a rainy day. diff --git a/_posts/2022-08-02-1kb.md b/posts/1kb.md index 0f4ad7c..ff1f1b3 100644 --- a/_posts/2022-08-02-1kb.md +++ b/posts/1kb.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Making a Website Under 1kB" -date: 2022-08-02 ---- +# Making a Website Under 1kB +2022-08-02 I recently launched (another) website club called the [1kB Club](https://1kb.club). Unlike the [1MB Club](https://1mb.club), it isn't as accessible for most modern websites to become official members. Building a website that actually serves useful content while squeezing its page size under 1,024 bytes is no easy feat. diff --git a/_posts/2024-06-02-Building_rbenv_on_OpenBSD_7.5.md b/posts/Building_rbenv_on_OpenBSD_7.5.md index 1e6a9fb..90f5479 100644 --- a/_posts/2024-06-02-Building_rbenv_on_OpenBSD_7.5.md +++ b/posts/Building_rbenv_on_OpenBSD_7.5.md @@ -1,8 +1,6 @@ ---- -layout: post -title: Building rbenv on OpenBSD 7.5 -permalink: /posts/Building_rbenv_on_OpenBSD_7.5/ ---- +# Building rbenv on OpenBSD 7.5 + +2024-06-02 I use Ruby (specifically with Jekyll) for a lot of my clubs/projects while using my personal laptop ([X220 ThinkPad](/posts/x220/)) which is runs OpenBSD. Since I recently upgraded to OpenBSD 7.5 I thought it could be helpful for others if I shared my process of building and using `rbenv` to install different Ruby versions. @@ -17,45 +15,33 @@ First, be sure to install the required packages in order to build from source, a Add `rbenv` to your PATH and initialize it (place this inside your `.bashrc` or `.zshrc` etc): -```sh -export PATH="$HOME/.rbenv/bin:$PATH" -export PATH="$HOME/.rbenv/shims:$PATH" -export RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" -eval "$(rbenv init -)" -``` + export PATH="$HOME/.rbenv/bin:$PATH" + export PATH="$HOME/.rbenv/shims:$PATH" + export RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" + eval "$(rbenv init -)" Then reload your shell (zsh in this example): -```sh -source ~/.zshrc -``` + source ~/.zshrc Next we will need to install `ruby-build` as a `rbenv` plugin. Clone the ruby-build repository into the rbenv plugins directory: -```sh -git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build -``` + git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build ## Installing Ruby and Setting Our Version Now use `rbenv` to install the desired version of Ruby (we will get an older version for this example): -```sh -rbenv install 3.3.0 -``` + rbenv install 3.3.0 If you run into issues, you may need to specify your openssl directory: -```sh -RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" rbenv install 3.3.0 -``` + RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" rbenv install 3.3.0 If you're on a slower machine (like mine) this might take a little bit. Just grab a coffee or a snack while you wait! Then navigate to your project of choice and set the `local` Ruby version: -```sh -rbenv local 3.3.0 -``` + rbenv local 3.3.0 That's it! If you'd prefer to set this version of Ruby for all projects going forward, simply replace `local` with `global`. diff --git a/wiki/wordpress_NearlyFreeSpeech_Setup.md b/posts/Installing_WordPress_on_NearlyFreeSpeech.md index 4957726..4af9a4e 100644 --- a/wiki/wordpress_NearlyFreeSpeech_Setup.md +++ b/posts/Installing_WordPress_on_NearlyFreeSpeech.md @@ -1,10 +1,10 @@ ---- -layout: page -title: WordPress Setup on NearlyFreeSpeech -permalink: /wiki/wordpress/NearlyFreeSpeech_Setup/ ---- +# Installing WordPress on NearlyFreeSpeech + +2024-05-27 -## Installing WordPress on NearlyFreeSpeech +I recently went through the process of porting over my wife's small business website (built off of WordPress + Woocommerce) from EasyWP to NearlyFreeSpeech. Although the process was fairly easy-going, I thought I would post my complete process here. That way, others who might wish to make the same switch can avoid running into any minor bumps along the way. + +> Some of this information has been lifted from [the official NFS docs](https://members.nearlyfreespeech.net/tdarb/support/wordpress), but these pages require a membership to access ### Download WordPress @@ -160,3 +160,7 @@ Or you can do it from the SSH command line via WP-CLI: wp db export /home/tmp/wordpress-backup.sql The `wordpress-backup.sql` file this generates will be stored in your site's `/home/tmp` directory. Download it from there to have a local copy. + +## That's It! + +Your WordPress site should be up-and-running now. Further customization or extra plugins/services can be freely added if so desired. Enjoy your site! diff --git a/_posts/2024-01-02-My_Text_Editor_Is_Not_Open_Source.md b/posts/My_Text_Editor_Is_Not_Open_Source.md index d92c361..76b05f0 100644 --- a/_posts/2024-01-02-My_Text_Editor_Is_Not_Open_Source.md +++ b/posts/My_Text_Editor_Is_Not_Open_Source.md @@ -1,7 +1,6 @@ ---- -layout: post -title: My Text Editor Is Not Open Source ---- +# My Text Edtior is Not Open Source + +2024-01-02 I've been using Sublime Text on and off for longer than I can remember. I think Sublime has been around since the start of my "real" career over 10 years ago, but I could be mistaken[^1]. It certainly *feels* that long. And in that time I have never gotten upset with Sublime. I've never rage quit or ran into an issue of Sublime not being able to *do the thing I wanted it to do*. As much of a cliche it may sound: it just works. diff --git a/_posts/2024-01-29-New_Domain_and_Code_Forge.md b/posts/New_Domain_and_Code_Forge.md index e2f451b..f02db18 100644 --- a/_posts/2024-01-29-New_Domain_and_Code_Forge.md +++ b/posts/New_Domain_and_Code_Forge.md @@ -1,7 +1,6 @@ ---- -layout: post -title: New Domain and Code Forge ---- +# New Domain and Code Forge + +2024-01-29 As you can clearly see, my site's domain has switched over to **btxx.org**. This post will go into details about the reason for this URL swap (spoilers: I'm a cheapskate) - but that isn't all. I have moved my personal git repositories over to my own hosting. I will explain the reasoning for that switch as well. @@ -60,4 +59,4 @@ I'm aware that to have extra protection from "downtime" that I should also mirro My code forge is far from perfect. Mobile view is lacking, there is no dark mode support and things could be slightly more intuitive. But I love it. The beauty of hosting everything on my own is that I can improve these things myself. For now, I'm happy with the outcome! -[^1]: Someone oddly picked up that domain and piggybacked off the back-links. They happen to also be a designer...Guess the naming was that cool? 🤷♂️ +[^1]: Someone oddly picked up that domain and piggybacked off the back-links. They happen to also be a designer...Guess the naming was that cool? diff --git a/_posts/2024-04-11-OpenBSD_is_a_Cozy_Operating_System.md b/posts/OpenBSD_is_a_Cozy_Operating_System.md index b2b4a84..584d5e1 100644 --- a/_posts/2024-04-11-OpenBSD_is_a_Cozy_Operating_System.md +++ b/posts/OpenBSD_is_a_Cozy_Operating_System.md @@ -1,13 +1,10 @@ ---- -layout: post -title: "OpenBSD is a Cozy Operating System" -date: 2024-04-11 ---- +# OpenBSD is a Cozy Operating System -<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> +2024-04-11 + + + +*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. @@ -31,4 +28,4 @@ You can find both of those wiki-pages below: - [Installing OpenBSD](https://btxx.org/wiki/openbsd/installation/) - [Setting up a Desktop Environment for OpenBSD](https://btxx.org/wiki/openbsd/desktop_environment/) -Some additional reading I highly recommend is: [c0ffee.net/blog/openbsd-on-a-laptop](https://www.c0ffee.net/blog/openbsd-on-a-laptop)
\ No newline at end of file +Some additional reading I highly recommend is: [c0ffee.net/blog/openbsd-on-a-laptop](https://www.c0ffee.net/blog/openbsd-on-a-laptop) diff --git a/_posts/2024-02-23-Please_Make_Your_Table_Headings_Sticky.md b/posts/Please_Make_Your_Table_Headings_Sticky.md index 3a9e611..249066a 100644 --- a/_posts/2024-02-23-Please_Make_Your_Table_Headings_Sticky.md +++ b/posts/Please_Make_Your_Table_Headings_Sticky.md @@ -1,14 +1,12 @@ ---- -layout: post -title: Please Make Your Table Headings Sticky ---- +# 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... - <video width="100%" controls> - <source src="/public/videos/not-fixed-header-tables.mp4" type="video/mp4"> -Your browser does not support the video tag. -</video> +[Click here to see standard table headers video](/public/videos/not-fixed-header-tables.mp4) + +<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. @@ -16,20 +14,15 @@ Look at that table header disappear! Now, if I scroll all the way down to item # Check it out: - <video width="100%" controls> - <source src="/public/videos/fixed-header-tables.mp4" type="video/mp4"> -Your browser does not support the video tag. -</video> +[Click here to see "fixed" table headers video](/public/videos/fixed-header-tables.mp4) 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`: -```scss -position: sticky; -top: 0; -``` + position: sticky; + top: 0; That's it! Best of all, `sticky` has [~96% global support](https://caniuse.com/?search=sticky) 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](https://codepen.io/bradleytaunt/pen/bGZyJBj). -If you found this interesting, feel free to check out my other table-focused post: [Making Tables Responsive With Minimal CSS](https://btxx.org/posts/tables/) +If you found this interesting, feel free to check out my other table-focused post: [Making Tables Responsive With Minimal CSS](/posts/tables/) diff --git a/_posts/2023-12-17-Switching_Things_Over_to_ikiwiki.md b/posts/Switching_Things_Over_to_ikiwiki.md index 393919a..8d0cbde 100644 --- a/_posts/2023-12-17-Switching_Things_Over_to_ikiwiki.md +++ b/posts/Switching_Things_Over_to_ikiwiki.md @@ -1,9 +1,8 @@ ---- -layout: post -title: Switching Things Over to ikiwiki ---- +# Switching Things Over to ikiwiki -I've done it again. My personal website is no longer generated with [barf](https://barf.bt.ht) but is instead built on top of [[ikiwiki]]. The old RSS feed ([bt.ht/atom.xml](https://bt.ht/atom.xml)) still exists but will no longer receive updates. The new feed can be found on the bottom of the homepage ([index.rss](/index.rss)) +2023-12-17 + +I've done it again. My personal website is no longer generated with [barf](https://barf.btxx.org) but is instead built on top of ikiwiki. The old RSS feed ([btxx.org/atom.xml](https://btxx.org/atom.xml)) still exists but will no longer receive updates. The new feed can be found on the bottom of the homepage ([index.rss](/index.rss)) ## Why a Wiki? @@ -15,9 +14,9 @@ What if I come across that issue at a later point in time? Will I even remember ## Text Editors, Terminals, and Web UI - Oh My! -[[ikiwiki]] comes packed with multiple ways to publish pages and posts. Since it is built with [[ikiwiki/git]] version control in mind, you have the ability to push out changes directly to your server similar to that of pre-existing static site generators. It also gives you the choice to `ssh` directly into your server and publish content from your terminal if you so desire. +ikiwiki comes packed with multiple ways to publish pages and posts. Since it is built with ikiwiki and git version control in mind, you have the ability to push out changes directly to your server similar to that of pre-existing static site generators. It also gives you the choice to `ssh` directly into your server and publish content from your terminal if you so desire. -Best of all, [[ikiwiki]] offers a web UI interface. This is something I have long missed since leaving "dynamic" websites behind. +Best of all, ikiwiki offers a web UI interface. This is something I have long missed since leaving "dynamic" websites behind. ## But Wait, There's More! diff --git a/_posts/2024-02-16-Website_Backups_with_Apple_iCloud.md b/posts/Website_Backups_with_Apple_iCloud.md index d736012..e045bfd 100644 --- a/_posts/2024-02-16-Website_Backups_with_Apple_iCloud.md +++ b/posts/Website_Backups_with_Apple_iCloud.md @@ -1,31 +1,24 @@ ---- -layout: post -title: Website Backups with Apple iCloud ---- +# Website Backups with Apple iCloud + +2024-02-16 My main work machine, an M2 MacBook Air, meshes really well with my iPhone SE (they are in the same ecosystem after all - duh!). Since both of these devices are Apple products, it makes sense that I pay for the optional iCloud service for extra storage. 50GB to be exact. I only need to bare minimum which costs just $1.68 a month, making this storage option cheaper than most cups of coffee these days. Recently I've been using iCloud as my "middle-man" backup system. I still have local, offline storage for most personal data but having additional off-site backups is never a bad thing. I make things easier for myself by taking advantage of `rsync`. You'll need to make sure you have that program installed before trying this yourself: -```sh -# This assumes you have homebrew installed first -brew install rsync -``` + # This assumes you have homebrew installed first + brew install rsync Then, whenever I feel like backing up an existing project or website I simply run: -```sh -rsync -a user_name@ssh.webserver.domain:/home/var/www/ /Users/username/Library/Mobile\ Documents/com\~apple\~CloudDocs/Backups/site-backup -``` + rsync -a user_name@ssh.webserver.domain:/home/var/www/ /Users/username/Library/Mobile\ Documents/com\~apple\~CloudDocs/Backups/site-backup > Note: The `-a` option tells `rsync` to sync directories recursively, transfer special and block devices, preserve symbolic links, modification times, groups, ownership, and permissions. The beautiful magic of `rsync`! Obviously, you'd want to properly name your directories (ie. `/Backups/site-backup`) for a cleaner structure and ensure that your iCloud directory is set correctly. (remember to read code before just copy-pasting!). With this approach you can backup entire server directories or be specific with each individual project folder. I would also recommend setting up some alias in your `.bashrc` or `.zshrc` etc. to make things more streamlined when running backups manually: -```sh -alias site-backup="rsync -a user_name@ssh.webserver.domain:/home/var/www/ /Users/username/Library/Mobile\ Documents/com\~apple\~CloudDocs/Backups/site-backup" -# Then you simply run the following for a manual backup: -site-backup -``` + alias site-backup="rsync -a user_name@ssh.webserver.domain:/home/var/www/ /Users/username/Library/Mobile\ Documents/com\~apple\~CloudDocs/Backups/site-backup" + # Then you simply run the following for a manual backup: + site-backup You can take this further by automating things via cron jobs, but for my use case that is a little overkill. Hopefully this helps anyone looking for a quick and dirty backup system, especially one that can piggyback of your existing iCloud that you might be paying for already. diff --git a/_posts/2022-11-04-adguard.md b/posts/adguard.md index 18a4ce9..f896f6f 100644 --- a/_posts/2022-11-04-adguard.md +++ b/posts/adguard.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Setting Up AdGuard Home with Eero" -date: 2022-11-04 ---- +# Setting Up AdGuard Home with Eero +2022-11-04 Eariler this year I posted [detailed instructions on setting up Pi-Hole with Eero](/eero) and it seemed to help out a few people having troubles. With AdGuard Home recently popping up on the [frontpage of HackerNews](https://news.ycombinator.com/item?id=33387678), I thought now would be a great time to post instructions of setting up *that* service alongside Eero devices. diff --git a/_posts/2022-10-14-af.md b/posts/af.md index d3971b5..1d6d7b5 100644 --- a/_posts/2022-10-14-af.md +++ b/posts/af.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Avoiding Featurism" -date: 2022-10-14 ---- +# Avoiding Featurism +2022-10-14 I rather enjoy the term "featurism". I came across this term while reading the wonderful article [Why I don't use Netscape](https://www.complang.tuwien.ac.at/anton/why-ancient-browsers.html), which the author credits to Bernd Paysan. Although it sums up the current "digital product" industry quite well the more specific terminology, *creeping featurism*, works better: diff --git a/_posts/2022-12-08-alpine.md b/posts/alpine.md index 788f181..2f03444 100644 --- a/_posts/2022-12-08-alpine.md +++ b/posts/alpine.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Adventures in Creating a Minimal Alpine Linux Installer" -date: 2022-12-08 ---- +# Adventures in Creating a Minimal Alpine Linux Installer +2022-12-08 ## Introduction diff --git a/_posts/2019-02-27-animated-card-tiles.md b/posts/animated-card-tiles.md index 1b8bd1d..4cbc8b7 100644 --- a/_posts/2019-02-27-animated-card-tiles.md +++ b/posts/animated-card-tiles.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Animated Card Tiles" -date: 2019-02-27 ---- +# Animated Card Tiles +2019-02-27 *The design trend of using "cards" or "tiles" to display interactive* sections/article headings in an app or website remains a popular choice among designers. So, let's build a set of animated cards with only HTML & CSS. @@ -24,7 +21,6 @@ For the base skeleton of these cards we only need: - the inner child element that will display on `:hover` - proper `h4` and `p` tags inside that child element ---- <div class="card-tiles-container"> <div class="card-tile"> @@ -35,6 +31,7 @@ For the base skeleton of these cards we only need: </div> </div> + That's all that is needed - for now. We will be returning to this code shortly to add some extra classes to make our lives easier. ## The CSS diff --git a/_posts/2021-01-05-animated-toggle-tabs.md b/posts/animated-toggle-tabs.md index bc3a348..dcbcfea 100644 --- a/_posts/2021-01-05-animated-toggle-tabs.md +++ b/posts/animated-toggle-tabs.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Animated Radio Tab Toggles" -date: 2021-01-05 ---- +# Animated Radio Tab Toggles +2021-01-05 *In this demo tutorial, we are making the assumption* that we need to create a radio slide toggle for our made-up payment options. For this we want to display 3 simple payment choices to the user: diff --git a/_posts/2020-06-14-audio-hotkeys-on-linux-mint.md b/posts/audio-hotkeys-on-linux-mint.md index 3c398cd..09aaf5e 100644 --- a/_posts/2020-06-14-audio-hotkeys-on-linux-mint.md +++ b/posts/audio-hotkeys-on-linux-mint.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Audio Hotkeys on Linux Mint" -date: 2020-06-14 ---- +# Audio Hotkeys on Linux Mint +2020-06-14 I recently switched out the OS on my old 2011 MacBook Air with Linux Mint. It's a distro I've used a few times in the past, but never set it as one of my main daily drivers until now. diff --git a/_posts/2016-06-28-aui.md b/posts/aui.md index 153b4c9..fa6786b 100644 --- a/_posts/2016-06-28-aui.md +++ b/posts/aui.md @@ -1,16 +1,12 @@ ---- -layout: post -title: "Aqua UI CSS Buttons" -date: 2016-06-28 ---- +# Aqua UI CSS Buttons +2016-06-28 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/2022-09-08-avoid.md b/posts/avoid.md index 9bc136a..51c3a04 100644 --- a/_posts/2022-09-08-avoid.md +++ b/posts/avoid.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "A Warning for New Designers: Avoid Dribbble" -date: 2022-09-08 ---- +# A Warning for New Designers: Avoid Dribbble +2022-09-08 Everyday a new designer begins their journey into the world of [*insert design industry here*] and it is magical! Having a fresh pair of eyes untainted from the current trends of the time can help improve design as a whole. Newbies can even teach new things to older, grumpier luddites (like yours truly). But over the years I've noticed a concerning trend among junior designers; **they rely too heavily on Dribbble**. diff --git a/_posts/2020-03-18-base64-all-the-things.md b/posts/base64-all-the-things.md index 1c88f21..40641f7 100644 --- a/_posts/2020-03-18-base64-all-the-things.md +++ b/posts/base64-all-the-things.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Base64 All The Things! (Sometimes)" -date: 2020-03-18 ---- +# Base64 All The Things! (Sometimes) +2020-03-18 *An extremely overlooked process for displaying fonts*, images, documents, spreadsheets, etc. on the web is the use of **base64 encoding**. Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations. diff --git a/_posts/2019-01-15-basic-gulp-build-for-sass.md b/posts/basic-gulp-build-for-sass.md index 456587d..48fa014 100644 --- a/_posts/2019-01-15-basic-gulp-build-for-sass.md +++ b/posts/basic-gulp-build-for-sass.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Basic Gulp Build for Sass" -date: 2019-01-15 ---- +# Basic Gulp Build for Sass +2019-01-15 Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like `gulp` and `grunt` can seem daunting at first. So, I've decided to showcase my go-to setup for `gulp` and explain what the heck it does step-by-step. diff --git a/_posts/2021-10-15-batch-webp-conversion.md b/posts/batch-webp-conversion.md index 63c73c3..4bf930e 100644 --- a/_posts/2021-10-15-batch-webp-conversion.md +++ b/posts/batch-webp-conversion.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Batch Converting Images to webp with macOS Automator" -date: 2021-10-15 ---- +# Batch Converting Images to webp with macOS Automator +2021-10-15 A great deal of my time working as a web/UI designer is spent exporting and/or converting images for software products and websites. Although a lot of modern applications can render image conversions at build time, a custom conversion is sometimes requested for an image to be set as `webp`. @@ -39,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: @@ -70,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/2023-06-13-battery.md b/posts/battery.md index 1ec7980..4147ce8 100644 --- a/_posts/2023-06-13-battery.md +++ b/posts/battery.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Improving Laptop Battery Performance on OpenBSD" -date: 2023-06-13 ---- +# Improving Laptop Battery Performance on OpenBSD +2023-06-13 It is no secret that OpenBSD has poor battery performance on laptops. Although not as impressive as something like Alpine Linux or FreeBSD, you can tweak OpenBSD *just enough* to squeeze more life out of your machine's battery. @@ -11,21 +8,21 @@ It is no secret that OpenBSD has poor battery performance on laptops. Although n I won't go into great detail about `ampd` here - that's what the incredible [documentation is for](https://man.openbsd.org/apmd). You'll want to make sure to start it before trying to configure it: - - doas rcctl start apmd - +``` +doas rcctl start apmd +``` If already running in a live session, you can default to `-A` (auto) but I suggest setting cpu performance to low: - - apm -L - +``` +apm -L +``` To make these changes permanent on boot: - - doas rcctl set apmd flags -L - +``` +doas rcctl set apmd flags -L +``` Optimizating battery life via `ampd` will have the most noticable impact but you can improve things even further by implementing some extra "small" performance wins. @@ -36,4 +33,4 @@ Optimizating battery life via `ampd` will have the most noticable impact but you 3. Enable battery saving options in your system BIOS (if available) 4. Disable the fingerprint scanner and bluetooth in your system BIOS (if available) 5. Use utilities such as `mpv` and `ffmpeg` for media consumption -6. Reduce the number of open applications at any given time +6. Reduce the number of open applications at any given time
\ No newline at end of file diff --git a/_posts/2019-09-28-being-efficient.md b/posts/being-efficient.md index 97561c5..3f65dcf 100644 --- a/_posts/2019-09-28-being-efficient.md +++ b/posts/being-efficient.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Being More Efficient as a Designer and Developer" -date: 2019-09-28 ---- +# Being More Efficient as a Designer and Developer +2019-09-28 *I recently began working on a small side project* (a marketing site / blog for an upcoming UX book I'm writing, but I have nothing to promote yet - sorry) and found myself circling around different static site generators (SSG) in the initial design concepts. The thought of learning an entirely new blogging platform was inspiring and seemed like a good excuse to expand my skillset. diff --git a/_posts/2022-07-29-berg.md b/posts/berg.md index 6c89377..44caded 100644 --- a/_posts/2022-07-29-berg.md +++ b/posts/berg.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Hosting with Codeberg Pages" -date: 2022-07-29 ---- +# Hosting with Codeberg Pages +2022-07-29 I recently switched the [pblog](https://pblog.bt.ht) project repo over from Sourcehut to Codeberg (mostly for UX reasons) and it got me looking into [Codeberg Pages](https://codeberg.page). It seemed like a cleaner approach to host my personal blog on the same platform I planned to also share the source code. diff --git a/_posts/2019-01-08-better-box-shadows.md b/posts/better-box-shadows.md index 39d5fb5..76d62cd 100644 --- a/_posts/2019-01-08-better-box-shadows.md +++ b/posts/better-box-shadows.md @@ -1,9 +1,39 @@ ---- -layout: post -title: "Better Box Shadows" -date: 2019-01-08 ---- - +# Better Box Shadows + +2019-01-08 + +<style> + .message { + position: relative; + z-index: 1; + } + .box-container, + .box-container-depth { + background: white; + box-shadow: 0 4px 8px rgba(0,0,0,0.3); + border: 1px solid #eee; + border-radius: 10px; + margin: 2rem auto; + padding: 10px; + position: relative; + height: 200px; + width: 250px; + } + .box-container-depth { box-shadow: none; } + .box-container-depth .box-container-depth-inner { + bottom: 0; + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + content:''; + position: absolute; + width: 94%; + height: 94%; + left: 3%; + z-index: -1; + } + .box-container-depth-inner.blur { + filter: blur(6px); + } +</style> Box shadow on <abbr title="hypertext markup language">HTML</abbr> elements has been widely supported across most browsers for a while now, but I find the default options don't allow for much visual manipulation of the shadows in general. @@ -36,6 +66,12 @@ We should also add some minimal styling to cleanup the `.box-container` a little } +Which would render as this: + + +<div class="box-container"></div> + + Not bad - but we can do a lot better than this. ## Please sir, I want some more (depth) @@ -83,7 +119,11 @@ We also need to target the `box-container-inner` element set inside the current } -Which will make the drop-shadow render with a little more realistic depth. +Which will make the drop-shadow render with a little more realistic depth: + + +<div class="box-container-depth"><span class="box-container-depth-inner"></span></div> + ## But wait - there's more! @@ -116,9 +156,11 @@ So your final code would look like this: } -Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth. +Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth: -Take a look at all the examples in the [CodePen examples](https://codepen.io/bradleytaunt/pen/dyNbZNj) +<div class="box-container-depth"> + <span class="box-container-depth-inner blur"></span> +</div> diff --git a/_posts/2020-11-09-bidirectional-scrolling.md b/posts/bidirectional-scrolling.md index 996c2ab..019c331 100644 --- a/_posts/2020-11-09-bidirectional-scrolling.md +++ b/posts/bidirectional-scrolling.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Bidirectional Scrolling: Why Not Both?" -date: 2020-11-09 ---- +# Bidirectional Scrolling: Why Not Both? +2020-11-09 *I recently came across Adam Silver's post [about the merits and pitfalls of bidirectional scrolling](https://adamsilver.io/articles/bidirectional-scrolling-whats-not-to-like/)* and found myself conflicted with the design arguments put forth in the article. It's a very good article overall, and I suggest giving it a read before digging deeper into my post here. diff --git a/_posts/2019-04-20-browser-history-sucks.md b/posts/browser-history-sucks.md index 3ad451e..24c3715 100644 --- a/_posts/2019-04-20-browser-history-sucks.md +++ b/posts/browser-history-sucks.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Browser History Sucks" -date: 2019-04-20 ---- +# Browser History Sucks +2019-04-20 *Have you ever needed to step back through your browser history* to find a particular site or product? Do you remember that experience being good? Most likely not. diff --git a/_posts/2019-04-23-character-unit.md b/posts/character-unit.md index 5c4879b..b88ad45 100644 --- a/_posts/2019-04-23-character-unit.md +++ b/posts/character-unit.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "CSS Character Unit" -date: 2019-04-23 ---- +# CSS Character Unit +2019-04-23 *When it comes to proper readability with large portions of text*, the golden standard is to have no more than [75 characters per line](http://webtypography.net/2.1.2). This is easy to achieve in the world of print but on the responsive, ever-changing web - statically defined typography becomes a little more difficult. diff --git a/_posts/2017-11-20-chasing-performance.md b/posts/chasing-performance.md index b02e3db..0171f11 100644 --- a/_posts/2017-11-20-chasing-performance.md +++ b/posts/chasing-performance.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Chasing Performance" -date: 2017-11-20 ---- +# Chasing Performance +2017-11-20 ## Update diff --git a/_posts/2020-09-16-cheap-portable-pi.md b/posts/cheap-portable-pi.md index 011cfe5..d8d4aeb 100644 --- a/_posts/2020-09-16-cheap-portable-pi.md +++ b/posts/cheap-portable-pi.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal" -date: 2020-09-16 ---- +# Portable Pi: Cheap Raspberry Pi Zero Hacker Terminal +2020-09-16 *I recently came across [the incredibly cool design](https://n-o-d-e.net/zeroterminal3.html) for an "ultimate Raspberry Pi computer"* by NODE and was inspired to create my own "portable" Pi device. Although, with my concept, I decided to set a few restrictions on the build: diff --git a/_posts/2020-01-07-chromebook-web-dev.md b/posts/chromebook-web-dev.md index b68d68e..4d3214a 100644 --- a/_posts/2020-01-07-chromebook-web-dev.md +++ b/posts/chromebook-web-dev.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Web Development on a $200 Chromebook" -date: 2020-01-07 ---- +# Web Development on a $200 Chromebook +2020-01-07 *This blog post was written, edited and tested locally* on a cheap $200 Chromebook. The article draft was composed in Sublime Text. Jekyll (the SSG this website uses) was generated via the Linux Beta Terminal running alongside Chrome OS. It was then pushed to the Github repo from the same Terminal and published automatically to Netlify. But more on that later. @@ -13,7 +10,7 @@ First, we need to ask an important question: why use a Chromebook for web develo Looking from the outside, I always liked the concept of the Chrome OS ecosystem. It had a solid list of features that appealed to me, specifically: -- Blazing fast boot times +- Blazingly fast boot times - Long lasting battery life (roughly 8 hours with consistent usage) - Extremely cheap entry point for "low-end" devices - And, more recently, support for Android & Linux apps diff --git a/_posts/2021-11-03-css-js-mistake.md b/posts/css-js-mistake.md index 5159d11..c071998 100644 --- a/_posts/2021-11-03-css-js-mistake.md +++ b/posts/css-js-mistake.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "A Reality Where CSS and JavaScript Don't Exist" -date: 2021-11-03 ---- +# A Reality Where CSS and JavaScript Don't Exist +2021-11-03 *This is my personal opinion. Please leave your pitchforks at the door...* @@ -45,7 +42,8 @@ Of course, to our[^2] eyes, this design might look ugly or seem as though the si Now, back to designing UIs for the web... -[^1]: Selected site based on my own personal preference +## Refs -[^2]: Referring to current users of the web +1. Selected site based on my own personal preference +2. Referring to current users of the web diff --git a/_posts/2021-06-07-css-slope-graphs.md b/posts/css-slope-graphs.md index b1e82b9..8c3ce3a 100644 --- a/_posts/2021-06-07-css-slope-graphs.md +++ b/posts/css-slope-graphs.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "CSS Slope Graphs" -date: 2021-06-07 ---- +# CSS Slope Graphs +2021-06-07 *I am a huge sucker for simplistic and beautifully designed visual data on the web*. Most data tends to be graphed via line or bar systems - which is fine - but I think slope graphs are highly underrated. Let's change that, shall we? @@ -109,8 +106,6 @@ Now we need to design how our slope graph will look on larger screens / desktops 5. Remember that `data-name` variable? We now use that for our `:before` pseudo element for `table tbody tr td:nth-of-type(3)` 6. After that, you can see the simple customization we include to render the angle / position of the slope lines and the corresponding labels ---- - @media(min-width:800px) { table { diff --git a/_posts/2018-03-24-css-variables.md b/posts/css-variables.md index e0a17ed..dff8f13 100644 --- a/_posts/2018-03-24-css-variables.md +++ b/posts/css-variables.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "CSS Variables" -date: 2018-03-24 ---- +# CSS Variables +2018-03-24 The CSS language is becoming even more awesome and powerful everyday. In this quick article I'd like to focus specifically on the "new" CSS variable function that you can start using in your projects *right now*. diff --git a/_posts/2018-04-16-css-video-backgrounds.md b/posts/css-video-backgrounds.md index 17c6115..d4a3123 100644 --- a/_posts/2018-04-16-css-video-backgrounds.md +++ b/posts/css-video-backgrounds.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "CSS Video Backgrounds" -date: 2018-04-16 ---- +# CSS Video Backgrounds +2018-04-16 With the release of Safari 11.1 on macOS and Safari on iOS 11.3, developers now have the ability to support background videos (mp4 support only - at the time of this article) with pure CSS. diff --git a/_posts/2019-04-13-current-color.md b/posts/current-color.md index cff4e48..bb9fe99 100644 --- a/_posts/2019-04-13-current-color.md +++ b/posts/current-color.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "CSS Value: currentColor" -date: 2019-04-13 ---- +# CSS Value: `currentColor` +2019-04-13 *There are a large number of nuanced and mostly unheard of* CSS value types, but today we are going to focus on `currentColor`. So what is the `currentColor` value type anyway? diff --git a/_posts/2019-05-09-cut-your-forms-in-half.md b/posts/cut-your-forms-in-half.md index 6469a9e..da82437 100644 --- a/_posts/2019-05-09-cut-your-forms-in-half.md +++ b/posts/cut-your-forms-in-half.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Cut Your Forms in Half" -date: 2019-05-09 ---- +# Cut Your Forms in Half +2019-05-09 *Building web forms can sometimes feel like a boring or daunting task*. Don't pass this dread on to your users - rip out as many of your form fields as possible. diff --git a/_posts/2017-11-01-death-of-personality.md b/posts/death-of-personality.md index 2ae8951..07be682 100644 --- a/_posts/2017-11-01-death-of-personality.md +++ b/posts/death-of-personality.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "The Death of Personality" -date: 2017-11-01 ---- +# The Death of Personality +2017-11-01 On September 18, 2013 truly original product design (everything from icon and app design to UI and experience interactions) began it's fast decline into the abyss with the release of Apple's iOS 7 update. It was called revolutionary. It was seen as a 'new age' of design. I think it was a big mistake. diff --git a/_posts/2019-11-13-default-brower-forms.md b/posts/default-brower-forms.md index d0b34b3..804e656 100644 --- a/_posts/2019-11-13-default-brower-forms.md +++ b/posts/default-brower-forms.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Very Basic Form Styling" -date: 2019-11-13 ---- +# Very Basic Form Styling +2019-11-13 Web forms can be great - I'm borderline obsessed with them. I love tinkering with pre-existing logins / sign up pages and I've also open sourced a minimal CSS form-styling plugin: [Normform](https://normform.netlify.com/). While simple CSS plugins like these can be helpful, I often feel like we are over-engineering our web forms. I'm certainly guilty of it. diff --git a/_posts/2021-11-09-default-html-style-updates.md b/posts/default-html-style-updates.md index bfbc164..578628f 100644 --- a/_posts/2021-11-09-default-html-style-updates.md +++ b/posts/default-html-style-updates.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Modern Improvements for Default Browser Styles" -date: 2021-11-09 ---- +# Modern Improvements for Default Browser Styles +2021-11-09 This website *almost* exclusively uses the browser's (whichever one that might be) default styling to render it's HTML. I firmly believe, and have [stated in a previous post](/css-js-mistake/), that the default HTML styling across all browsers is a thing of beauty. "Consistent and boring" is how I tend to refer to default browser styles - and I mean that in a *good way*. @@ -89,7 +86,8 @@ There isn't much else to say, really. I think these tiny tweaks would greatly im } -[^1]: `18px` seems to be the perfect sweet spot between "almost too large, yet not small enough to strain my eyes" +## Refs -[^2]: At the time of this article's publish date +1. `18px` seems to be the perfect sweet spot between "almost too large, yet not small enough to strain my eyes" +2. At the time of this article's publish date diff --git a/posts/design-review-dropbox.md b/posts/design-review-dropbox.md new file mode 100644 index 0000000..20ebd72 --- /dev/null +++ b/posts/design-review-dropbox.md @@ -0,0 +1,108 @@ +# Unsolicited Design Review - Dropbox + +2017-10-10 + +Earlier last week the design team at Dropbox unveiled their new branding / design system for the company as a whole. If you haven't seen the updated design yet, you can do so here: [dropbox.design](https://dropbox.design/) (Take your time, I can wait). + + + +I won't mince words when I say I believe this is a huge step backwards for their brand. Not only is it uninspired and broken, but it also shows how our industry is plagued with a need to redesign things just for the sake of redesigning them. + +So without anymore fluff - let's get into it. Please leave your bias at the door. + +## Purpose + +It's good to try and understand the motive or problem that a company is trying to solve when redesigning something as fundamental as core branding, but this is where the first red flag appears for Dropbox. There is <i>no real problem to solve</i>. + +On the marketing site promoting the new design system, the Dropbox team doesn't mention a single problem that this branding redesign is meant to fix. Were users confused by the previous system? Is there data showing large drop-off and a lack of conversion directly connected with the design system itself? All they state is they needed a change with zero reasoning as to why. + +> We realized our brand needs to change + +As I stated at the beginning of this review - it's a redesign for the sake of a redesign. Sometimes this can be acceptable if done correctly, but this is not the case for Dropbox. + +> Our new brand system shows that Dropbox isn't just a place to store your files - **it's a living workspace that brings teams and ideas together** + +Let's stop right there. "A place to store your files" is literally 99% of what Dropbox does. I get that they want to be involved in more than that but Dropbox *is* a cloud storage service. Why is there a desperate need to shift away from that? + +There isn't much else to speak of in terms of 'purpose' regarding the redesign since there doesn't seem to be one. Let's move on. + +## Design Principles + +I hate to be that guy who bases design on a written list of principles, but when it works it works. Dieter Rams states it best: + +1. Good design is innovative +2. Good design makes a product useful +3. Good design is aesthetic +4. Good design makes a product understandable +5. Good design is unobtrusive +6. Good design is honest +7. Good design is long-lasting +8. Good design is thorough down to the last detail +9. Good design is environmentally friendly +10. Good design is as little design as possible + +--- + +1. **Good design is innovative**. There is zero innovation in this re-brand, it's simply following the trend of quirky / brutal / modern flat elitism that is currently sweeping the industry. It's a fad and will be out-of-date rather quickly. + +2. **Good design makes a product useful**. Looking through their reasoning and explanations I can see no boost or improvement to the usefulness of the product. Not to repeat myself, but without any supporting data as to *why* this change was made we have nothing to base it off of. + +3. **Good design is aesthetic**. See #1. + +4. **Good design makes a product understandable**. Were customers not able to understand the Dropbox brand prior to this update? Were users misinformed about what the product could do for them? The previous design did a wonderful job of getting out of the way and showing the user exactly what they needed / wanted. + +5. **Good design is unobtrusive**. Talk about going backwards on this one. Original system was clean, readable and friendly to new users. Their current system uses an illegible typeface, colors with terrible contrast and a lack of support for the visually impaired, crude illustrations that give no explanation as to what they represent (more on that later), and a lack of browser support / performance issues. + +6. **Good design is honest**. Dropbox still maintains this principle. They don't over-promise or outright lie about who and what they are as a product. + +7. **Good design is long-lasting**. See #1 & #3 again. + +8. **Good design is thorough down to the last detail**. The fact that even their marketing site crashes latest Firefox, lags on Safari for iOS and stutters in Chrome on desktop shows the lack of performance testing that was done. Not to mention the complete disregard for those with visual impairments with their color palette, typeface and contrast selections. + +9. **Good design is environmentally friendly**. Doesn't really apply here. + +10. **Good design is as little design as possible**. This new brand system is incredibly over-designed. + +> Our users...tell us they feel overwhelmed and distracted during the workday...we want to change this, by building products and a brand that help people focus on meaningful work, instead of busywork. + +Then maybe your design system should get out of the way. To me, this seems like you want your design to take center-stage over the user's content. + +**Remember: a great design system should go completely unnoticed.** + +## Accessibility + +Any persons with visual impairments need not apply. This design system is not built for you - seek shelter elsewhere. + +> With 259 fonts, our new typeface Sharp Grotesk gives us lots of versatility, allowing us to "speak" in a variety of tones. + + + +Not a single one of these typeface styles is initially readable... + +The typeface they have chosen looks terrible at any view-port size and readability takes a backseat. I can't help but feel this falls into the "let's be trendy" category and ends up sacrificing almost all good usability practices for gimmicky type. + +> Our users run the gamut from business professionals to scientists and creative types. Most of these folks tell us they feel overwhelmed and distracted during the workday, and that this is one of the biggest barriers to creating work they’re proud of. + +Irony at it's finest. "Our users tell us that they hate being distracted and overwhelmed, so we've decided to use headache inducing color palettes, crude illustrations, a barely legible typeface, and some of the most visually loud photography throughout our system". I hate coming off as mean-spirited - but this is some elaborate joke, right? + + + +After running it through a color contrast accessibility checker: + + + +Multiple accessibility failures... + +Next we have the child-like 'scribble' illustrations. Now don't get me wrong, I love seeing different illustration styles and I actively use 'sketch / scribble' artwork myself, but I don't believe this is the best fit for a brand like Dropbox. These cartoon visuals conflict with the business enterprise service Dropbox should be trying to convey. + +Another issue with these illustrations is their usage. Look at the image below and ask yourself if you would correlate it with an error page if no accompanying text was present. + + + +What does this have to do with a 404 error page? + +## Closing Thoughts + +I could go into even deeper analysis (including the oversimplification of their box logo, etc.) but I believe I've spent enough time defending my initial reaction as well as my thoughts after a week of soak time. In my opinion this redesign was completely unnecessary. I think this was a problem of too many designers with too much time without a proper project to channel all that talent. + +Unfortunately because they decided to just follow the current trend and design with a lack of purpose, I see Dropbox launching another redesign within the next year once this current design fad dies. My only hope is that the next brand system sets out to solve an actual problem, instead of just trying to be trendy. diff --git a/_posts/2020-12-28-disabling-comments-in-wordpress.md b/posts/disabling-comments-in-wordpress.md index 2af1c83..62ba779 100644 --- a/_posts/2020-12-28-disabling-comments-in-wordpress.md +++ b/posts/disabling-comments-in-wordpress.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Disabling Comments in WordPress" -date: 2020-12-28 ---- +# Disabling Comments in WordPress +2020-12-28 *I seem to come across a decent amount of clients* and users online that have a difficult time knowing how to disable comments for both future *and* previous blog posts. It isn’t the easiest for both use cases, so let’s break it down. diff --git a/_posts/2017-07-10-dts.md b/posts/dts.md index f44ce19..59fef10 100644 --- a/_posts/2017-07-10-dts.md +++ b/posts/dts.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Designers Need Thicker Skin" -date: 2017-07-10 ---- +# Designers Need Thicker Skin +2017-07-10 I'm not normally one to comment or even really care about "drama" within our design industry. Opinions are just that and should just be consumed at face value. But this week I was moderately annoyed with a subset of designers in design-land. diff --git a/_posts/2022-05-17-duckduckno.md b/posts/duckduckno.md index eafb46c..e626ba1 100644 --- a/_posts/2022-05-17-duckduckno.md +++ b/posts/duckduckno.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Two Weeks with the DuckDuckGo Browser" -date: 2022-05-17 ---- +# Two Weeks with the DuckDuckGo Browser +2022-05-17 After using the beta apps for the new DuckDuckGo browser for both macOS and iOS, I have returned to Safari. @@ -40,7 +37,9 @@ I appreciate the effort from the DuckDuckGo team. I'm certain this project will As it stands now, this feels like something that should be an extension[^2], not a standalone browser. -[^1]: [https://sensible.com/dont-make-me-think/](https://sensible.com/dont-make-me-think/) -[^2]: Technically this already exists as a Safari extension [here](https://apps.apple.com/us/app/duckduckgo-privacy-essentials/id1482920575?mt=12) +## Refs + +1. [https://sensible.com/dont-make-me-think/](https://sensible.com/dont-make-me-think/) +2. Technically this already exists as a Safari extension [here](https://apps.apple.com/us/app/duckduckgo-privacy-essentials/id1482920575?mt=12) diff --git a/_posts/2022-09-10-dump.md b/posts/dump.md index ab48664..4a3dd13 100644 --- a/_posts/2022-09-10-dump.md +++ b/posts/dump.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Don't Make a Blog, Make a Brain Dump" -date: 2022-09-10 ---- +# Don't Make a Blog, Make a Brain Dump +2022-09-10 Not enough people have personal blogs. This is a point brought up by many of those passionate about the "golden age" in the timeline of the modern internet. A time when websites were more like a small collection of winding side-streets and flea markets. Today, it's all shopping malls, hostile pedestrians, and corporate buildings. People have their one or two "outlets" that make it easier for them to meet-up with friends and family. There's no need for these people to have their "own thing". Someone else has already built it for them. They're become fully adjusted to their internet slums. @@ -110,4 +107,4 @@ There are many services in both categories above that I did not include. That's At the end of the day - who cares what you choose. Just choose *something*. Stop looking at it as "blogging" or trying to "capture an audience". Dump your brain's thoughts out into the internet, on your *own piece* of the internet, and help make the world wide web as fun as it used to be! -[^1]: Facebook, Twitter, Reddit, Instagram, etc. These should be completely avoided for the sake of both your health and your internet freedom. +[^1]: Facebook, Twitter, Reddit, Instagram, etc. These should be completely avoided for the sake of both your health and your internet freedom.
\ No newline at end of file diff --git a/_posts/2023-02-08-dv.md b/posts/dv.md index 9e956de..476cdf9 100644 --- a/_posts/2023-02-08-dv.md +++ b/posts/dv.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Dynamic Viewports with CSS" -date: 2023-02-08 ---- +# Dynamic Viewports with CSS +2023-02-08 I think it's safe to assume most web designers and developers are familiar with the standard `vh` and `vw` parameters in CSS. These parameters are used for setting an element's height and/or width, relative to the viewport (v) height (h) or width (w). For example: @@ -49,4 +46,4 @@ So our examples above would translate into: **Note:** Even though the caniuse page states that Firefox 109+ and iOS Safari 16.3 do not support `dvh`, in my experiments they do. I'm not sure what testing was done for those two browsers, so YMMV. -If you want to play it safe, use dynamic viewports with standard "traditional" viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties. +If you want to play it safe, use dynamic viewports with standard "traditional" viewports as backup. That way you support all use cases while still taking advantage of newer CSS properties.
\ No newline at end of file diff --git a/_posts/2023-11-02-dwm-gnome.md b/posts/dwm-gnome.md index d3d111f..7b5ecee 100644 --- a/_posts/2023-11-02-dwm-gnome.md +++ b/posts/dwm-gnome.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Bringing dwm Shortcuts to GNOME" -date: 2023-11-02 ---- +# Bringing dwm Shortcuts to GNOME +2023-11-02 The `dwm` window manager is my standard "go-to" for most of my personal laptop environments. For desktops with larger, higher resolution monitors I tend to lean towards using GNOME. The GNOME DE is fairly solid for my own purposes. This article isn't going to deep dive into GNOME itself, but instead highlight some minor configuration changes I make to mimic a few `dwm` shortcuts. diff --git a/_posts/2019-07-30-dynamic-checkboxes.md b/posts/dynamic-checkboxes.md index cb53ee4..d1b63c6 100644 --- a/_posts/2019-07-30-dynamic-checkboxes.md +++ b/posts/dynamic-checkboxes.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Dynamic Checkboxes" -date: 2019-07-30 ---- +# Dynamic Checkboxes +2019-07-30 Checkboxes are used quite frequently on forms across the web. Whether you're selecting a pricing plan during a site's sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element. diff --git a/_posts/2019-01-21-easy-custom-radio-inputs.md b/posts/easy-custom-radio-inputs.md index b22d90c..abc6dbb 100644 --- a/_posts/2019-01-21-easy-custom-radio-inputs.md +++ b/posts/easy-custom-radio-inputs.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Easy Custom Radio Inputs" -date: 2019-01-21 ---- +# Easy Custom Radio Inputs +2019-01-21 Default radio inputs are notoriously horrible looking and are something designers tend to over-think when trying to customize them. Let's walk through how to create custom radio buttons with *pure CSS*, while still preserving performance and accessibility. diff --git a/_posts/2019-02-18-easy-toggle-switches.md b/posts/easy-toggle-switches.md index 16a4c63..f7b1235 100644 --- a/_posts/2019-02-18-easy-toggle-switches.md +++ b/posts/easy-toggle-switches.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Easy Toggle Switches" -date: 2019-02-18 ---- +# Easy Toggle Switches +2019-02-18 Sometimes there is a need to use toggle elements in-place of the default `checkbox` inputs. The problem is, I tend to see a lot of developers reaching for plugins or JavaScript components in order to implement these toggles. diff --git a/_posts/2022-03-14-eero.md b/posts/eero.md index 367bc07..ba4f2f3 100644 --- a/_posts/2022-03-14-eero.md +++ b/posts/eero.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Setting Up a Pi-hole Server with Eero" -date: 2022-03-14 ---- +# Setting Up a Pi-hole Server with Eero +2022-03-14 For the past few years, I've been using a set of Eero routers as my home mesh network. It's worked fairly great in that time and even seamlessly transitioned without any hiccups when my family moved house. During the initial setup, I installed <a href="https://pi-hole.net">Pi-hole</a> on a Raspberry Pi Zero WH because advertisements and tracking scripts suck. @@ -26,18 +23,18 @@ Before we get into the step-by-step details, here are the required items you'll Before you place your microSD card into the Pi and boot it up, connect it to your local computer (via USB adapter) - we will need to add some files first. Once loaded into the `boot` folder, add an empty file simply called `ssh` (no extensions). Next open your preferred text editor and enter the following code, editing the content to match your own country code and home network settings: -```sh -country=US -ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev -update_config=1 -network={ - ssid="WIFI_SSID" - scan_ssid=1 - psk="WIFI_PASSWORD" - key_mgmt=WPA-PSK -} -``` + country=US + ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev + update_config=1 + + network={ + ssid="WIFI_SSID" + scan_ssid=1 + psk="WIFI_PASSWORD" + key_mgmt=WPA-PSK + } + Save this file as `wpa_supplicant.conf` and add it to the `boot` directory as well. @@ -47,9 +44,9 @@ You can now safely eject the microSD card and place it into your Raspberry Pi. Connect power to your Pi and give it a bit of time to boot up. Once you see a nice solid green LED, go back to your local computer's terminal and enter the following command: -```sh -ssh pi@raspberrypi.local -``` + + ssh pi@raspberrypi.local + If everything was set up properly you will be asked to trust this device. Next, you will be prompted to enter the device password. The default password will be: `raspberry` @@ -57,21 +54,21 @@ If everything was set up properly you will be asked to trust this device. Next, Once you are connected directly to the Pi, it's best to check for updates: -```sh -sudo apt update -``` + + sudo apt update + ...and if updates are in fact available, install them via: -```sh -sudo apt upgrade -``` + + sudo apt upgrade + This next step is optional but I highly recommend it for security purposes. You should change both the hostname and password of this soon-to-be Pi-hole server. To do this simply run: -```sh -sudo raspi-config -``` + + sudo raspi-config + 1. Edit Hostname: navigate to `System Settings` --> `Hostname` 2. Edit Password: navigate to `System Settings` --> `Password` @@ -82,9 +79,9 @@ Once complete, reboot the Pi. Just remember that when you try to reconnect to th This is the easy part: -```sh -curl -sSL https://install.pi-hole.net | bash -``` + + curl -sSL https://install.pi-hole.net | bash + Pi-hole runs a full install script that walks you through step-by-step on setting things up. It's best to use the suggested defaults during the install - everything is pretty simple. @@ -92,9 +89,9 @@ Near the end of the setup you'll be show the newly created static IP for this Pi Once it's finished, shutdown the Pi safely by running: -```sh -sudo shutdown now -``` + + sudo shutdown now + ## Hardware Setup @@ -135,6 +132,7 @@ None of this stuff if groundbreaking, but my hope is that even one person across Best of luck blocking those pesky ads and trackers! -[^1]: You don't *have* to use your Eero gateway for this step (credit: [/u/RollMeAway83](https://old.reddit.com/user/RollMeAway83)) +## Refs -[^2]: Thanks to [u/YankeesIT](https://old.reddit.com/user/YankeesIT) for pointing out that this is required not *optional* +1. You don't *have* to use your Eero gateway for this step (credit: [/u/RollMeAway83](https://old.reddit.com/user/RollMeAway83)) +2. Thanks to [u/YankeesIT](https://old.reddit.com/user/YankeesIT) for pointing out that this is required not *optional* diff --git a/_posts/2019-07-17-empty-table-cells.md b/posts/empty-table-cells.md index 2b6883e..aa2bfb3 100644 --- a/_posts/2019-07-17-empty-table-cells.md +++ b/posts/empty-table-cells.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Styling Empty Table Cells" -date: 2019-07-17 ---- +# Styling Empty Table Cells +2019-07-17 Often when designing tables on the web you're bound to come across empty pockets of data. These will be rendered as "blank" table cells, which isn't always the intended outcome. Let's take a quick look at how to target and style empty table cells. diff --git a/_posts/2018-01-14-et-jekyll-theme.md b/posts/et-jekyll-theme.md index 02ed594..0c31462 100644 --- a/_posts/2018-01-14-et-jekyll-theme.md +++ b/posts/et-jekyll-theme.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "ET-Jekyll Theme" -date: 2018-01-14 ---- +# ET-Jekyll Theme +2018-01-14 ET-Jekyll theme is based off of <a href="http://www.daveliepmann.com">Dave Liepmann's</a> awesome <a href="https://edwardtufte.github.io/tufte-css/">Tufte CSS</a> - which takes it's style and inspiration from the wonderful book and handout designs of <a href="https://www.edwardtufte.com/tufte/">Edward Tufte</a>. diff --git a/_posts/2020-04-29-fake-3d-elements-with-css.md b/posts/fake-3d-elements-with-css.md index e80402a..3e094ce 100644 --- a/_posts/2020-04-29-fake-3d-elements-with-css.md +++ b/posts/fake-3d-elements-with-css.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Faking 3D Elements with CSS" -date: 2020-04-29 ---- +# Faking 3D Elements with CSS +2020-04-29 Although not always practical, creating the illusion that some of your web elements are 3D can be a fun experiment. I set out to see if I was able to create such an illusion with only 2 HTML elements and as little CSS as possible. diff --git a/_posts/2021-01-19-fathom-analytics-netlify.md b/posts/fathom-analytics-netlify.md index 727d2c2..427388e 100644 --- a/_posts/2021-01-19-fathom-analytics-netlify.md +++ b/posts/fathom-analytics-netlify.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Setting Up Fathom Analytics with Netlify" -date: 2021-01-19 ---- +# Setting Up Fathom Analytics with Netlify +2021-01-19 It's no secret that I'm passionate about open source software, but I'm also extremely adamant about protecting the privacy of all users across the web. So when I decided to implement analytics on my own personal website, I ended up choosing <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> (*get a $10 credit using that link!*). diff --git a/_posts/2022-02-23-february-updates.md b/posts/february-updates.md index 597cf7b..9a2e1e2 100644 --- a/_posts/2022-02-23-february-updates.md +++ b/posts/february-updates.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "February 2022 Update" -date: 2022-02-23 ---- +# February 2022 Update +2022-02-23 It's been a little quiet around here lately and for good reason: my wife gave birth to our third child last Thursday. Her name is Harmony and she was born in the late afternoon weighing in at 7 pounds 8 ounces. diff --git a/_posts/2019-05-03-first-letter.md b/posts/first-letter.md index 8cd34d6..e1768d5 100644 --- a/_posts/2019-05-03-first-letter.md +++ b/posts/first-letter.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "First Letter Pseudo Element" -date: 2019-05-03 ---- +# First Letter Pseudo Element +2019-05-03 In today's TypeTip we will be taking a look at the often overlooked `:first-letter` CSS pseudo element. Though you might only use this for specific article-format web pages, it's still a nice-to-have in your web dev toolset. diff --git a/_posts/2020-12-08-flexbox-bar-graphs.md b/posts/flexbox-bar-graphs.md index 8739c1c..5862d86 100644 --- a/_posts/2020-12-08-flexbox-bar-graphs.md +++ b/posts/flexbox-bar-graphs.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Pure CSS Bar Graphs with Graceful Mobile Fallbacks" -date: 2020-12-08 ---- +# Pure CSS Bar Graphs with Graceful Mobile Fallbacks +2020-12-08 I recently published a new open source project, <a target="_blank" href="https://flexbox-bar-graphs.netlify.app/">Flexbox Bar Graphs</a>, and wanted to share a simple breakdown of how it was built. It isn't anything mind-blowing, but I like the idea of placing bar graphs in a web page with *zero* Javascript. diff --git a/_posts/2018-11-22-flexbox-grid.md b/posts/flexbox-grid.md index a6eb872..9831826 100644 --- a/_posts/2018-11-22-flexbox-grid.md +++ b/posts/flexbox-grid.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Adaptable Flexbox Grid" -date: 2018-11-22 ---- +# Adaptable Flexbox Grid +2018-11-22 You can use `flexbox` for many tricky layout "hacks" and implementing a grid layout is no different. diff --git a/_posts/2019-03-13-form-ui-improvements.md b/posts/form-ui-improvements.md index e14281c..845b757 100644 --- a/_posts/2019-03-13-form-ui-improvements.md +++ b/posts/form-ui-improvements.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Prescription Form UI Improvements" -date: 2019-03-13 ---- +# Prescription Form UI Improvements +2019-03-13 I was browsing the <a href="https://www.clearly.ca">Clearly</a> website a few days ago and ended up using their prescription form to update my worsening eyesight. The design of this form wasn't *bad* per se, but it could certainly be improved. diff --git a/_posts/2022-01-06-future-os-google.md b/posts/future-os-google.md index 939e649..93b0fe0 100644 --- a/_posts/2022-01-06-future-os-google.md +++ b/posts/future-os-google.md @@ -1,15 +1,12 @@ ---- -layout: post -title: "Chrome OS Could Become the Future Leader of Computing" -date: 2022-01-06 ---- +# Chrome OS Could Become the Future Leader of Computing +2022-01-06 **FOSS Enthusiasts**: This article discusses the use of proprietary software and places it in a *positive* light. You have been warned. No angry emails please... - - - -Google has created one of the best operating systems designed with the everyday user[^1] in mind: [Chrome OS](https://www.google.com/chromebook/chrome-os/). It is undeniably simple, reliable, easy to setup, and ships with several years of support before any form of EOL kicks in. New models have built-in support for the Google Play Store and Android applications, which is helpful for application development and debugging. +Google has created one of the best operating systems designed with the everyday user<sup>1</sup> in mind: [Chrome OS](https://www.google.com/chromebook/chrome-os/). It is undeniably simple, reliable, easy to setup, and ships with several years of support before any form of EOL kicks in. New models have built-in support for the Google Play Store and Android applications, which is helpful for application development and debugging. In addition, Chrome OS devices allow you to run Linux in a separate container alongside the main OS (on supported devices). You can't complain about that! @@ -84,10 +81,10 @@ Testing out Chrome OS with your non-technical friends and family could help redu I have no crystal ball to see what the future of Chrome OS holds but it looks pretty promising to me. -[^1]: "Users" referring to those mainly using their devices for word documents, spread sheets, media consumption, programming, messaging, minor interactivity (no heavy video or production editing) -[^2]: These updates go unnoticed, compared to that of MacOS or Windows... +## Refs -[^3]: Your mileage may vary depending on how much RAM you have on your device - -[^4]: Although, Stadia's current game selection leaves a lot to be desired +1. "Users" referring to those mainly using their devices for word documents, spread sheets, media consumption, programming, messaging, minor interactivity (no heavy video or production editing) +2. These updates go unnoticed, compared to that of MacOS or Windows... +3. Your mileage may vary depending on how much RAM you have on your device +4. Although, Stadia's current game selection leaves a lot to be desired diff --git a/_posts/2022-10-03-gallery.md b/posts/gallery.md index 0df6247..d069896 100644 --- a/_posts/2022-10-03-gallery.md +++ b/posts/gallery.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Simplifying the Craigslist Gallery" -date: 2022-10-03 ---- +# Simplifying the Craigslist Gallery +2022-10-03 **This article was updated on October 11, 2022** diff --git a/_posts/2023-04-25-git-patches.md b/posts/git-patches.md index 149767b..2618e6f 100644 --- a/_posts/2023-04-25-git-patches.md +++ b/posts/git-patches.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Applying Email-Based Git Patches in Evolution on Linux" -date: 2023-04-25 ---- +# Applying Email-Based Git Patches in Evolution on Linux +2023-04-25 Users who work with git patches through email most likely use a terminal-based program such as `aerc` or `mutt`. CLI email clients tend to have built-in support for easily applying patches directly to their local repos. But what about people who prefer to use graphical email apps? @@ -19,12 +16,12 @@ Next, locate the email patch in Evolution and right-click on it. Select "Save as Now simply open your terminal, navigate to your project and run: - - git am <path-to-patches-folder>/<patch-filename>.mbox - +``` +git am <path-to-patches-folder>/<patch-filename>.mbox +``` This should apply the patch directly to your project without issue. You are now free to test these changes locally. If everything looks good, you're able to instantly push these changes remotely. Done and done. -Feel free to purge your `patches` folder regularly or keep them around for future reference if you prefer! +Feel free to purge your `patches` folder regularly or keep them around for future reference if you prefer!
\ No newline at end of file diff --git a/_posts/2017-09-07-goodbye-css-preprocessors.md b/posts/goodbye-css-preprocessors.md index 82e7b02..6f64037 100644 --- a/_posts/2017-09-07-goodbye-css-preprocessors.md +++ b/posts/goodbye-css-preprocessors.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Goodbye CSS Preprocessors" -date: 2017-09-07 ---- +# Goodbye CSS Preprocessors +2017-09-07 I have been using preprocessors across all my side projects since they first popped onto the scene. Sass, Stylus, LESS — you name the CSS preprocessor and I've most likely used it because CSS preprocessors are awesome. diff --git a/_posts/2019-06-14-hamburger-menu-alternative.md b/posts/hamburger-menu-alternative.md index 384fd40..47af1a1 100644 --- a/_posts/2019-06-14-hamburger-menu-alternative.md +++ b/posts/hamburger-menu-alternative.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Using Hamburger Menus? Try Sausage Links" -date: 2019-06-14 ---- +# Using Hamburger Menus? Try Sausage Links +2019-06-14 When designing medium to large sized menu navigations on the mobile web the default go-to, for some time now, has been hamburger menus. This isn't necessarily a <i>bad</i> thing, but there is a simpler alternative for certain use cases. diff --git a/_posts/2023-05-05-hamburgers.md b/posts/hamburgers.md index 5f15580..ef788c8 100644 --- a/_posts/2023-05-05-hamburgers.md +++ b/posts/hamburgers.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Stop Using Hamburger Menus (Sometimes)" -date: 2023-05-05 ---- +# Stop Using Hamburger Menus (Sometimes) +2023-05-05 I recently [tooted about my hatred of website hamburger menus](https://fosstodon.org/@tdarb/110264983268249599) which was met with a surprising amount of support from other users. It seems like most people *don't actually like hamburger menus*. So why do we, as developers, keep using them in our products and designs? Is it our only option? Or is it because we have become conditioned to expect it? diff --git a/_posts/2023-07-21-heif.md b/posts/heif.md index da5de8a..f0d645a 100644 --- a/_posts/2023-07-21-heif.md +++ b/posts/heif.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Converting HEIF Images with macOS Automator" -date: 2023-07-21 ---- +# Converting HEIF Images with macOS Automator +2023-07-21 Often times when you save or export photos from iOS to iCloud they often render themselves into `heif` or `heic` formats. Both macOS and iOS have no problem working with these formats, but a lot of software programs will not even recognize these filetypes. The obvious step would just be to convert them via an application or online service, right? @@ -24,17 +21,15 @@ For this example script we are going to convert the image to JPG format. You can 4. Set the label "in" to `Finder` 5. From the left pane, select "Library > Utilities" 6. From the presented choices in the next pane, drag and drop `Run Shell Script` into the far right pane -7. Set the area "Pass input" to (`as arguments`) +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") -<span></span> - - 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 @@ -44,5 +39,5 @@ Simple as that. Happy converting! If you're interested, I also have some other Automator scripts available: -- [Batch Converting Images to webp with macOS Automator](/batch-webp-conversion/) -- [Convert Files to HTML with macOS Automator Quick Actions](/macos-convert-to-html/) +- [Batch Converting Images to webp with macOS Automator](/posts/batch-webp-conversion/) +- [Convert Files to HTML with macOS Automator Quick Actions](/posts/macos-convert-to-html/) diff --git a/_posts/2020-08-13-hello-jekyll.md b/posts/hello-jekyll.md index ab2fd09..da57fc3 100644 --- a/_posts/2020-08-13-hello-jekyll.md +++ b/posts/hello-jekyll.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Goodbye WordPress, Hello Jekyll (Again)" -date: 2020-08-13 ---- +# Goodbye WordPress, Hello Jekyll (Again) +2020-08-13 For the past four months this blog has been running on WordPress - but that ended today. I've officially switched back over to Jekyll. I'm not going to spend too much time delving into *why* I made the transition back, but I'll leave some cliff-notes for any interested parties. diff --git a/posts/html-dark-mode.md b/posts/html-dark-mode.md new file mode 100644 index 0000000..224699f --- /dev/null +++ b/posts/html-dark-mode.md @@ -0,0 +1,30 @@ +# HTML Dark Mode + +2023-04-11 + +I wrote an article back in 2021 called [The Lazy Developer's Dark +Mode](https://bt.ht/lazy-dev-dark-mode/) where I explained how to implement +a very basic "dark mode" by using the `prefers-color-scheme` CSS attribute. +This stills works perfectly fine, and in fact there is a cleaner variation of +this created by *jacksonchen666*: [These 3 Lines of CSS Will Give You Dark Mode for Free](https://jacksonchen666.com/posts/2023-04-09/13-47-16/). + +But today I wanted to show how to add dark mode functionality to a website +without *any CSS at all*. + +``` +<meta name="color-scheme" content="dark light"> +``` + +Add that line inside the `head` tags on your HTML files and you're good to go. + +## Minor Caveat + +I mentioned this same issue on the official [barf blog +post](https://barf.bt.ht/dark-mode/) but it doesn't hurt to repeat it here. +Safari still has minor ahref / link color issue when defaulting to browser dark +mode. If supporting that browser is a deal-breaker for you, I suggest looking +at my [hacky solution](https://bt.ht/safari-default-dark-mode/). + +Hopefully this helps others to add dark mode to their existing websites and +projects with minimal effort! + diff --git a/_posts/2019-06-06-html-like-1999.md b/posts/html-like-1999.md index 47ab2d6..96c02f4 100644 --- a/_posts/2019-06-06-html-like-1999.md +++ b/posts/html-like-1999.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Write HTML Like It's 1999" -date: 2019-06-06 ---- +# Write HTML Like It's 1999 +2019-06-06 I am sure it's safe to say that most developers love to use the latest and greatest web tools available. Helpful resources such as preprocessors, template engines, syntax formatters - you name it - can all make a developer's life easier. Unfortunately, this sometimes comes at a cost: the HTML structure. diff --git a/_posts/2019-07-05-html5-validator-badge.md b/posts/html5-validator-badge.md index eefd87b..a0da5e2 100644 --- a/_posts/2019-07-05-html5-validator-badge.md +++ b/posts/html5-validator-badge.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Using HTML Validator Badges Again" -date: 2019-07-05 ---- +# Using HTML Validator Badges Again +2019-07-05 There was a time on the Internet when websites wore badges of honor, declaring that their code was semantic and followed the W3C guidelines. The validators we used weren't great (and **still** aren't perfect) but they represented a community that took pride in caring about the quality of their work. I think it's time we bring HTML badges back. @@ -34,11 +31,13 @@ Guiding first-timers towards HTML validators let's them rethink their structure ## Open source HTML5 badge -Since the W3C doesn't officially produce any badges for HTML5 validation[^1], I've gone ahead and open sourced `SVG` and `PNG` versions of a badge based off the current W3C designs. You can check out the Github repo: [HTML5 Valid Badge](https://github.com/bradleytaunt/html5-valid-badge) +Since the W3C doesn't officially produce any badges for HTML5 validation <sup><a href="#1">1</a></sup>, I've gone ahead and open sourced `SVG` and `PNG` versions of a badge based off the current W3C designs. You can check out the Github repo: [HTML5 Valid Badge](https://github.com/bradleytaunt/html5-valid-badge) If you decide to use these badges, be sure to link these images to your valid passing URL ([html5.validator.nu](https://html5.validator.nu)). You can see an example of the link in the footer of this website. Please feel free to reach out and share your websites / projects that pass as valid HTML and include an HTML valid badge. I'd love to check them out! -[^1]: [Interview with Mike Smith](http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/): "There won't be any proper Valid HTML5 icon forthcoming, so if you'd like to use one in your content, you'll probably need to create one on your own." +## Refs + +<sup id="1">1</sup> [Interview with Mike Smith](http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/): "There won't be any proper Valid HTML5 icon forthcoming, so if you'd like to use one in your content, you'll probably need to create one on your own." diff --git a/_posts/2020-07-07-improving-githubs-new-design.md b/posts/improving-githubs-new-design.md index 9182f67..dd9074d 100644 --- a/_posts/2020-07-07-improving-githubs-new-design.md +++ b/posts/improving-githubs-new-design.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Improving Github's New Design" -date: 2020-07-07 ---- +# Improving Github's New Design +2020-07-07 Like many other Github users, I am not a big fan of their recent repository page redesign. In my mind it seems like a change just for the sake of change - the original UI worked perfectly fine. diff --git a/_posts/2019-05-15-improving-receipt-ux.md b/posts/improving-receipt-ux.md index 7673dc8..e138444 100644 --- a/_posts/2019-05-15-improving-receipt-ux.md +++ b/posts/improving-receipt-ux.md @@ -1,13 +1,10 @@ ---- -layout: post -title: "Improving Receipt UX" -date: 2019-05-15 ---- +# Improving Receipt UX +2019-05-15 There was a pretty interesting article posted a couple days ago about <a href="https://www.fastcompany.com/90347782/the-humble-receipt-gets-a-brilliant-redesign">rethinking the standard receipt design</a> that I found quite compelling. Although, as good as the concept is, I think it can be improved (simplified) even further. -## What was the redesign exactly? +## What was the redesign exaclty? Overall [Susie Lu](https://twitter.com/datatoviz?lang=en) did a wonderful job tackling such an old and forgotten design. She fixed some major pain points with the current receipt layout: diff --git a/_posts/2019-11-01-improving-tufte-jekyll.md b/posts/improving-tufte-jekyll.md index 0497f99..d311dfd 100644 --- a/_posts/2019-11-01-improving-tufte-jekyll.md +++ b/posts/improving-tufte-jekyll.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Improving Tufte CSS for Jekyll" -date: 2019-11-01 ---- +# Improving Tufte CSS for Jekyll +2019-11-01 After creating the ET-Jekyll theme almost two years ago, I finally got around to revamping the structure and improving a lot of minor performance issues. Items that have been surely needing of updates for the last couple of years. diff --git a/_posts/2021-01-13-introducing-notez.md b/posts/introducing-notez.md index 7248f35..b6ade23 100644 --- a/_posts/2021-01-13-introducing-notez.md +++ b/posts/introducing-notez.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Introducing Notez" -date: 2021-01-13 ---- +# Introducing Notez +2021-01-13 I have always been a fan of simple note taking applications, since I tend to take a lot of random notes throughout the work day. Sometimes I reach for simple pen and paper, but other times it's nice to stay focused jotting down notes on the same device I'm working on. diff --git a/_posts/2021-03-11-introducing-pageroast.md b/posts/introducing-pageroast.md index 997f73b..22832d7 100644 --- a/_posts/2021-03-11-introducing-pageroast.md +++ b/posts/introducing-pageroast.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Introducing PageRoast" -date: 2021-03-11 ---- +# Introducing PageRoast +2021-03-11 Following up with my concept of releasing small side projects weekly, I have officially launched [PageRoast](https://pageroast.com). What is PageRoast I hear you ask? diff --git a/_posts/2021-12-06-jekyll-sourcehut.md b/posts/jekyll-sourcehut.md index 8dac582..8485324 100644 --- a/_posts/2021-12-06-jekyll-sourcehut.md +++ b/posts/jekyll-sourcehut.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Hosting a Jekyll Site on Sourcehut" -date: 2021-12-06 ---- +# Hosting a Jekyll Site on Sourcehut +2021-12-06 I recently decided to switch my personal, static site's hosting from Netlify to [sourcehut pages](https://srht.site). The process went *fairly* smoothly with only a couple minor hiccups; nothing rage-inducing. After everything was up and running smoothly, I figured writing out a step-by-step tutorial might help others who are thinking of doing a similar switch (or looking to host their first static site). @@ -94,4 +91,6 @@ Hopefully this helps to streamline the process for others to host their static s Even low-effort support for open-source products (like where you host your static site or FOSS projects) can go a long way. Just some food for thought. +<hr data-content="footnotes"> + [^1]: Thanks to [McSinyx](https://cnx.srht.site/) for pointing out that the repo used for creating your website can be named anything (instead of defaulting to your sourcehut username) diff --git a/_posts/2022-09-19-jekyll.md b/posts/jekyll.md index c24565d..d6e7093 100644 --- a/_posts/2022-09-19-jekyll.md +++ b/posts/jekyll.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Setup Jekyll from Scratch on a New Linux System" -date: 2022-09-19 ---- +# Setup Jekyll from Scratch on a New Linux System +2022-09-19 **Special Note:** Credit needs to be given to user [Achraf JEDAY](https://stackoverflow.com/users/4974784/achraf-jeday) for putting these instructions together on Stack Overflow (although his comments were targeting an older version of Ruby). This post is more for my own personal notes than anything else. diff --git a/_posts/2022-03-12-jelly.md b/posts/jelly.md index 198c7a2..9ea0db5 100644 --- a/_posts/2022-03-12-jelly.md +++ b/posts/jelly.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4)" -date: 2022-03-12 ---- +# Transferring Media from macOS to a Jellyfin Server (Raspberry Pi 4) +2022-03-12 I run a personal media server using Jellyfin on a Raspberry Pi 4 in my home. It's pretty great and works well across most devices - Google TV, iOS and Android devices, Chromebooks, etc. diff --git a/_posts/2018-12-19-jsincss-parent-selector.md b/posts/jsincss-parent-selector.md index f7244ba..f6176d8 100644 --- a/_posts/2018-12-19-jsincss-parent-selector.md +++ b/posts/jsincss-parent-selector.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Using Parent Selectors in CSS" -date: 2018-12-19 ---- +# Using Parent Selectors in CSS +2018-12-19 I recently saw a Twitter thread posted by <a href="https://twitter.com/innovati/status/1068998114491678720">Tommy Hodgins</a> on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the `parent` selector instantly peaked my interest. diff --git a/_posts/2020-06-22-keynote-slides-css.md b/posts/keynote-slides-css.md index 883dc90..a42fa48 100644 --- a/_posts/2020-06-22-keynote-slides-css.md +++ b/posts/keynote-slides-css.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Keynote Slides with Pure CSS" -date: 2020-06-22 ---- +# Keynote Slides with Pure CSS +2020-06-22 There are a great deal of options available on the web and built into most operating systems when you need to create presentation / keynote slides. You could use native software like LibremOffice Impress, Powerpoint, Apple's Keynote, etc. You could also decide to use preexisting web-based apps like Google Slides or an open source project such as RevealJS. All of these are good options. diff --git a/_posts/2021-02-25-launching-thriftyname.md b/posts/launching-thriftyname.md index 452addb..0d18aba 100644 --- a/_posts/2021-02-25-launching-thriftyname.md +++ b/posts/launching-thriftyname.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "ThriftyName: $5 Brand Names" -date: 2021-02-25 ---- +# ThriftyName: $5 Brand Names +2021-02-25 It's been a while since I've written anything on this blog, but for good reason - **I've been working on a handful of side projects**. I plan to drip-feed release these projects over time, but for today I'm announcing [ThriftyName](https://thrifty.name). diff --git a/_posts/2021-04-12-lazy-dev-dark-mode.md b/posts/lazy-dev-dark-mode.md index cff0faf..58026b5 100644 --- a/_posts/2021-04-12-lazy-dev-dark-mode.md +++ b/posts/lazy-dev-dark-mode.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "The Lazy Developer's Dark Mode" -date: 2021-04-12 ---- +# The Lazy Developer's Dark Mode +2021-04-12 After recently jumping back to Jekyll for my personal blog, I decided to take a closer look at how I was supporting `dark mode` for my visitors. I was using the proper CSS query to target those who had system-wide dark mode enabled, but I found that the code had far too many caveats and targeted too many custom classes. diff --git a/_posts/2020-02-07-learning-to-floss.md b/posts/learning-to-floss.md index 74bf4c6..a1b5ed0 100644 --- a/_posts/2020-02-07-learning-to-floss.md +++ b/posts/learning-to-floss.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "How to 'FLOSS' as a Web Designer" -date: 2020-02-07 ---- +# How to "FLOSS" as a Web Designer +2020-02-07 I have a profound respect for the open source community. I most likely wouldn't have the skills or knowledge I do today with it. Unfortunately, when I was just starting out in "web dev" some 10 years ago, proprietary software was the main go-to for a newbie designer. diff --git a/_posts/2022-09-20-lf.md b/posts/lf.md index d106805..4451b91 100644 --- a/_posts/2022-09-20-lf.md +++ b/posts/lf.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Installing Custom Fonts on Linux from the Command Line" -date: 2022-09-20 ---- +# Installing Custom Fonts on Linux from the Command Line +2022-09-20 Installing custom fonts is a fairly streamlined feature on operating systems like MacOS and Windows. Linux, on the other hand, struggles to make this workflow *easy* for everyday users. Many newcomers tend to get frustrated with using the default "Fonts" application managers shipped with most Linux distros. diff --git a/_posts/2022-07-14-linux-love.md b/posts/linux-love.md index d6b5f17..8929af7 100644 --- a/_posts/2022-07-14-linux-love.md +++ b/posts/linux-love.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "The Linux Desktop is Hard to Love" -date: 2022-07-14 ---- +# The Linux Desktop is Hard to Love +2022-07-14 I want to love the "Linux Desktop". I really do. But I've come to the realization that what I love is the *idea* of the Linux Desktop. The community. The security and core focus on open source. The customizable environments. Tweaking as much or as little of the operating system as I please! @@ -51,8 +48,8 @@ I might have attacked the overall Linux desktop experience in favor of macOS a l I just don't *love* it. -[^1]: People swear by CUPS working well on Linux, but this has caused issues for me in the past as well. Unsure why macOS handles it fine... +## Refs -[^2]: Depending on the desired distro, resources required, etc. - -[^3]: A couple that come to mind are Zorin OS and elementary OS +1. People swear by CUPS working well on Linux, but this has caused issues for me in the past as well. Unsure why macOS handles it fine... +2. Depending on the desired distro, resources required, etc. +3. A couple that come to mind are Zorin OS and elementary OS
\ No newline at end of file diff --git a/_posts/2020-08-16-linux-mint-macbook-air.md b/posts/linux-mint-macbook-air.md index 664233c..ab187c1 100644 --- a/_posts/2020-08-16-linux-mint-macbook-air.md +++ b/posts/linux-mint-macbook-air.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Linux Mint MacBook Air Setup" -date: 2020-08-16 ---- +# Linux Mint MacBook Air Setup +2020-08-16 I don't like the idea of throwing away old or outdated tech (within reason), so I try to find a new purpose for some of my "retired" devices. This article will cover how to switch over a mid-2011 model MacBook Air to utilize Linux Mint. diff --git a/_posts/2021-03-25-load-image-on-click.md b/posts/load-image-on-click.md index 979d7a1..32dfd61 100644 --- a/_posts/2021-03-25-load-image-on-click.md +++ b/posts/load-image-on-click.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Click to Load Website Images" -date: 2021-03-25 ---- +# Click to Load Website Images +2021-03-25 In my previous post about [switching my Jekyll blog over to PHPetite](https://uglyduck.ca/#2021-03-22-89-posts-one-file), I briefly mentioned how I only loaded in article images if the user *clicked or tapped* the empty file element. diff --git a/_posts/2020-05-06-localwp-fedora.md b/posts/localwp-fedora.md index 5cbfd31..c6f915d 100644 --- a/_posts/2020-05-06-localwp-fedora.md +++ b/posts/localwp-fedora.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Fixing LocalWP on Fedora 32" -date: 2020-05-06 ---- +# Fixing LocalWP on Fedora 32 +2020-05-06 I recently upgraded from Fedora 31 to 32 and everything went very smoothly - except for one application: **LocalWP**. After the upgrade, all local WordPress builds would fail and complain about two missing packages: diff --git a/_posts/2022-08-12-loop.md b/posts/loop.md index b38f74e..f0a5759 100644 --- a/_posts/2022-08-12-loop.md +++ b/posts/loop.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Looping Through Jekyll Collections" -date: 2022-08-12 ---- +# Looping Through Jekyll Collections +2022-08-12 I recently needed to add a couple new items to my wife's personal recipe website ([cookingwith.casa](https://cookingwith.casa)) which I hadn't touched in quite a while. The Jekyll build still worked fine, but I realized I was statically adding each `collection` by hand on the main homepage[^1]. @@ -59,4 +56,6 @@ That's it! Now if I plan to add any new collections down the line, I just need t Enjoy looping through your Jekyll collections! -[^1]: Just the sections were statically rendered. All the recipes were pulled in dynamically - I'm not that insane! +## Refs + +1. Just the sections were statically rendered. All the recipes were pulled in dynamically - I'm not that insane! diff --git a/_posts/2023-05-19-luba.md b/posts/luba.md index b0aba60..08dc7be 100644 --- a/_posts/2023-05-19-luba.md +++ b/posts/luba.md @@ -1,18 +1,14 @@ ---- -layout: post -title: "My Robotic Mower Woes" -date: 2023-05-19 ---- +# My Robotic Mower Woes +2023-05-19 ## A Brief Background I'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. -<figure> - <img src="/public/images/mower-1.jpeg" alt="The Husqvarna 450X"> - <figcaption>The Husqvarna 450X (not mine but same model)</figcaption> -</figure> + + +*The Husqvarna 450X (not mine but same model)* 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't have been (ie. root systems and dirt "craters"). 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 *not* so lucky... @@ -45,10 +41,9 @@ So I contacted my local dealer again about these specific units. I came away wit While researching "wireless" automowers, I came across the [Luba Series 5000](https://mammotion.com/?ref=bpjfzw7s) (referral link) and kept it in my "maybe" pile to follow-up on if needed. So follow-up I did. -<figure> - <img src="/public/images/mower-2.webp" alt="The Luba Series 5000"> - <figcaption>The Luba Series 5000 AWD (not mine but same model)</figcaption> -</figure> + + +*The Luba Series 5000 AWD (not mine but same model)* This mower seemed to check all my boxes: @@ -83,4 +78,4 @@ The only minor problem I have run into is the need to manually clean grass build My hope is that the software continues to improve over time and that the core hardware lasts as long as my 450X did. Which now reminds me - I need to sell that thing... -Hopefully this post helps others looking to snag their own robotic mower. So far, I can safely recommend Luba. +Hopefully this post helps others looking to snag their own robotic mower. So far, I can safely recommend Luba.
\ No newline at end of file diff --git a/_posts/2022-01-28-macos-convert-to-html.md b/posts/macos-convert-to-html.md index 126c0f3..3349354 100644 --- a/_posts/2022-01-28-macos-convert-to-html.md +++ b/posts/macos-convert-to-html.md @@ -1,11 +1,8 @@ ---- -layout: post -title: "Convert Files to HTML with macOS Automator Quick Actions" -date: 2022-01-28 ---- +# Convert Files to HTML with macOS Automator Quick Actions +2022-01-28 -Since a few people have reached out and thanked me for my previous post [Batch Converting Images to webp with macOS Automator](/batch-webp-conversion), I thought I would continue to share more of my own custom Automator Quick Actions. Today's post will cover the ability to convert *any* text-based document into pure HTML. +Since a few people have reached out and thanked me for my previous post [Batch Converting Images to webp with macOS Automator](/posts/batch-webp-conversion), I thought I would continue to share more of my own custom Automator Quick Actions. Today's post will cover the ability to convert *any* text-based document into pure HTML. I know - there are over 6 billion conversion apps that do this very same thing. But our way of doing it is *cooler*. Our conversion tool: @@ -51,18 +48,17 @@ Wait for everything to finish and you're done! Next you'll want to open the macOS Automator app and create a new "Quick Action" when given the prompt to do so. -<figure> - <img src="/public/images/new-automator.png" alt="Toggle prompt for new automation in macOS Automator"> - <figcaption>After opening Automator, select "Quick Action" from the menu (<a href="/public/images/new-automator.webp">link to hi-res image</a>)</figcaption> -</figure> + + +*After opening Automator, select "Quick Action" from the menu* Now do the following (reference the image further below to make sure your parameters match): -1. Set "Workflow receives current" to <strong>documents</strong> in <strong>any application</strong> +1. Set "Workflow receives current" to **documents** in **any application** 2. In the search bar type in "Run Shell Script" 3. Drag-and-drop the "Run Shell Script" from the left pane into the right pane -4. Set the "Shell" parameter to <strong>/bin/bash</strong> -5. Set "Pass input" as <strong>as arguments</strong> +4. Set the "Shell" parameter to **/bin/bash** +5. Set "Pass input" as **as arguments** Once all that is done, simply paste the following in the open text field within the "Run Shell Script" item: @@ -75,10 +71,7 @@ Once all that is done, simply paste the following in the open text field within If you've done everything correctly it should look something like this: -<figure> - <img src="/public/images/new-automator-2.png" alt="Automator quick action details for converting to HTML"> - <figcaption>This is what your finished Automator quick action should look like (<a href="/public/images/new-automator-2.webp">link to hi-res image</a>)</figcaption> -</figure> + Save this new Quick Action (Name is something like "Convert to HTML" to keep things simple). That's it! Amazing, right? @@ -86,28 +79,25 @@ Save this new Quick Action (Name is something like "Convert to HTML" to keep thi Now it is finally time to see our Quick Action is *action*! Navigate to any document file in a Finder window and follow along. -1. First, right-click on the file you wish to convert. ([Figure 1](#fig-1)) +1. First, right-click on the file you wish to convert. See Fig.1) 2. In the pop-up container, scroll down and hover over `Quick Actions`. -3. A secondary pop-out will appear. Look for the action `Convert File to HTML` and click it. ([Figure 2](#fig-2)) +3. A secondary pop-out will appear. Look for the action `Convert File to HTML` and click it. See Fig.2) + + -<figure id="fig-1"> - <img src="/public/images/macos-convert-1.png" alt="A markdown file in macOS Finder"> - <figcaption><strong>Figure 1:</strong> Finding and right-clicking on your desired file (<a href="/public/images/macos-convert-1.webp">link to hi-res image</a>)</figcaption> -</figure> +*Fig 1: Finding and right-clicking on your desired file* -<figure id="fig-2"> - <img src="/public/images/macos-convert-2.png" alt="Convert to HTML action selection"> - <figcaption><strong>Figure 2:</strong> From the "Quick Actions" menu, select "Convert to HTML" (<a href="/public/images/macos-convert-2.webp">link to hi-res image</a>)</figcaption> -</figure> + + +*Fig 2: From the "Quick Actions" menu, select "Convert to HTML"* 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! Don't forget - you can also *batch* convert multiple files and multiple file *types* at once. The possibilities are endless! -<figure> - <img src="/public/images/macos-convert-3.png" alt="Finder window showing a Markdown file and an HTML file"> - <figcaption>Our converted document is now available in HTML. Absolutely glorious. (<a href="/public/images/macos-convert-3.webp">link to hi-res image</a>)</figcaption> -</figure> + + +*Our converted document is now available in HTML. Absolutely glorious.* ## No Limits diff --git a/_posts/2021-04-13-macos-icon-css.md b/posts/macos-icon-css.md index 75a1b9f..e49d80e 100644 --- a/_posts/2021-04-13-macos-icon-css.md +++ b/posts/macos-icon-css.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Create a Mac App Icon with Pure HTML and CSS" -date: 2021-04-13 ---- +# Create a Mac App Icon with Pure HTML and CSS +2021-04-13 I have always been a huge fan of [Bogdan's work on Dribbble](https://dribbble.com/bg-d) and was recently inspired to see if I could replicate one of his awesome icon designs with only HTML & CSS. What was the outcome? I think it's a half-way decent copy - of course the original will always look significantly better. diff --git a/_posts/2023-05-11-mail.md b/posts/mail.md index f32e165..d50e5a5 100644 --- a/_posts/2023-05-11-mail.md +++ b/posts/mail.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Working with `git` Patches in Apple Mail" -date: 2023-05-11 ---- +# Working with `git` Patches in Apple Mail +2023-05-11 > **Before we begin**: You could likely automate this process in a more streamlined way, but for most use cases this workflow should be fine. @@ -13,10 +10,9 @@ I recently covered how to [work with git email patches in Evolution on Linux](/g The first thing you'll need to do is make a new `Patches` mailbox folder inside your existing mail account. Once done, your default Mail sidebar should look similar to the following: -<figure> - <img src="/public/images/apple-mail-1.png" alt="The Apple Mail sidebar with the Patches folder present"> - <figcaption>The Apple Mail sidebar with the "Patches" folder present</figcaption> -</figure> + + +*The Apple Mail sidebar with the "Patches" folder present* ## Applying Patches @@ -24,22 +20,21 @@ Now navigate to the email message containing a `git` patch. Right-click and sele Inside this folder you should see something similar to the following structure: -<figure> - <img src="/public/images/apple-mail-2.png" alt="The contents of the saved Patches mailbox folder"> - <figcaption>The contents of the saved Patches mailbox folder</figcaption> -</figure> - -Once saved, open your terminal, navigate to the project you wish to apply this new patch to: + +*The contents of the saved Patches mailbox folder* - cd my-path/very-cool-project +Once saved, open your terminal, navigate to the project you wish to apply this new patch to: +``` +cd my-path/very-cool-project +``` and then run: - - git apply ~/Patches/<saved-patches-mailbox-folder>/mbox - +``` +git apply ~/Patches/<saved-patches-mailbox-folder>/mbox +``` Congrats! You've successfully applied a git email patch through Apple Mail! Well, kind of. The terminal did most of the *real* work. Just be sure to periodically *purge* your local *Patches* folder to keep things clean! diff --git a/_posts/2023-03-09-mango.md b/posts/mango.md index cf5080c..f35299a 100644 --- a/_posts/2023-03-09-mango.md +++ b/posts/mango.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Replacing My Eero Mesh Network with Two Mangos" -date: 2023-03-09 ---- +# Replacing My Eero Mesh Network with Two Mangos +2023-03-09 It has been one week since I retired my Eero mesh network setup and replaced it with two [Mango Mini Travel Routers (GL-MT300N-V2)](https://www.gl-inet.com/products/gl-mt300n-v2/). There were some obvious reasons to make this switch but I was initially unsure how the overall performance on the Mangos would hold up compared to the "cutting edge" tech that Eero devices claim to have. @@ -78,11 +75,11 @@ Stats for the new Mini Mango setup: Some additional data comparisons for those interested. Prices shown are in Canadian dollars. -| |Eero|Mango| +||Eero|Mango| |-----|----|-----| |**Power**|5W|2.75W| |**Size** (mm)|139x139x55|58x58x22| |**Bands** (GHz)|2.4/5|2.4| |**Cost** (per unit)|$99+|$39| -That mostly covers it. I'm extremely happy with my switch away from the locked-down, "upsell" heavy Eeros. My only regret is that I didn't make this change sooner. +That mostly covers it. I'm extremely happy with my switch away from the locked-down, "upsell" heavy Eeros. My only regret is that I didn't make this change sooner.
\ No newline at end of file diff --git a/_posts/2020-10-19-menu-toggle-css.md b/posts/menu-toggle-css.md index e0408e1..e08fd96 100644 --- a/_posts/2020-10-19-menu-toggle-css.md +++ b/posts/menu-toggle-css.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Menu Toggle with Pure CSS" -date: 2020-10-19 ---- +# Menu Toggle with Pure CSS +2020-10-19 When thinking through navigation designs for mobile devices sometimes the best option is to store away the content behind a toggle button. This button would then display the menu items upon interaction. Let me show you how to create such an element with only CSS - no need for JavaScript today! @@ -27,8 +24,6 @@ To implement this design you really don't need much in terms of HTML: - A `label` that corresponds to the `checkbox` - A `nav` element to house our unordered list items ---- - <!-- The checkbox input & label partner --> <input type="checkbox" id="menu-toggle"> diff --git a/_posts/2020-05-13-mini-interactive-keyboard-with-pure-css.md b/posts/mini-interactive-keyboard-with-pure-css.md index ac4d136..ac60d1b 100644 --- a/_posts/2020-05-13-mini-interactive-keyboard-with-pure-css.md +++ b/posts/mini-interactive-keyboard-with-pure-css.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Mini Interactive Keyboard with Pure CSS" -date: 2020-05-13 ---- +# Mini Interactive Keyboard with Pure CSS +2020-05-13 Lately, I've become obsessed with trying to see what I can create using only HTML and CSS (besides websites of course). Since playing with the concept of [faking 3D elements](https://uglyduck.ca/fake-3d-elements-with-css/), I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard. @@ -25,8 +22,6 @@ The core skeleton of this project is very simple, since the keyboard consists of - Command button - 'Z' letter button ---- - <!-- This is keyboard main base --> <div class="base"> diff --git a/_posts/2019-04-26-minimal-css-menu.md b/posts/minimal-css-menu.md index ec90cb4..a343e81 100644 --- a/_posts/2019-04-26-minimal-css-menu.md +++ b/posts/minimal-css-menu.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Minimal CSS: Dropdown Menu" -date: 2019-04-26 ---- +# Minimal CSS: Dropdown Menu +2019-04-26 I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let's build out a demo example with a simple menu dropdown element. diff --git a/_posts/2021-11-25-minor-website-changes.md b/posts/minor-website-changes.md index 1d53d80..3100192 100644 --- a/_posts/2021-11-25-minor-website-changes.md +++ b/posts/minor-website-changes.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Using a New Domain and Switching Static Hosts" -date: 2021-11-25 ---- +# Using a New Domain and Switching Static Hosts +2021-11-25 As you can most likely tell by looking at your browser's URL - I've swapped over to a new domain for my personal website: [tdarb.org](https://tdarb.org). I'm a fickle person and this is a random change - but it is one I've been planning to do for some time. @@ -17,7 +14,7 @@ But overtime I came to somewhat dislike[^1] it and set out to change it. ## So what the heck is "tdarb"? -I explain this on my updated homepage but I will mention it again here: +I explain this on my updated [about page](/about) but I will mention it again here: **tdarb**[^2] is simply my first name and last initial spelt backwards – Brad T. Mind blowing, right? @@ -51,9 +48,10 @@ I still have ownership of the old domain for almost another full year. I feel li I don't have much else to report besides having made minor tweaks to this website design (yet again) and I have also finally added a picture of [workstation on the "Things I Use" page](/uses). That's it. -[^1]: not *hate* - just discontent -[^2]: pronounced tee-darb +## Refs -[^3]: Namecheap support were very helpful - this was more of a limitation of what their redirects can do +1. not *hate* - just discontent +2. pronounced tee-darb +3. Namecheap support were very helpful - this was more of a limitation of what their redirects can do diff --git a/_posts/2023-09-11-mongodb-arch.md b/posts/mongodb-arch.md index e8279e2..45babac 100644 --- a/_posts/2023-09-11-mongodb-arch.md +++ b/posts/mongodb-arch.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Installing Older Versions of MongoDB on Arch Linux" -date: 2023-09-11 ---- +# Installing Older Versions of MongoDB on Arch Linux +2023-09-11 I've recently been using Arch Linux for my main work environment on my ThinkPad X260. It's been great. As someone who is constantly drawn to minimalist operating systems such as Alpine or OpenBSD, it's nice to use something like Arch that boasts that same minimalist approach but with greater documentation/support. @@ -15,16 +12,16 @@ So I thought I would share my process of setting up an older version of MongoDB You will need to target the specific version of MongoDB using the very awesome AUR packages: - - yay -S mongodb34-bin - +``` +yay -S mongodb34-bin +``` Follow the instructions and you'll be good to go. Don't forget to create the `/data/db` directory and give it proper permissions: - - mkdir -p /data/db/ - chmod -R 777 /date/db - +``` +mkdir -p /data/db/ +chmod -R 777 /date/db +``` ## What About My "Tools"? @@ -32,16 +29,16 @@ If you plan to use MongoDB, then you most likely want to utilize the core databa So, you'll have to build from source locally: - - git clone https://github.com/mongodb/mongo-tools - cd mongodb-tools - ./make build - +``` +git clone https://github.com/mongodb/mongo-tools +cd mongodb-tools +./make build +``` Then you'll need to copy the built executables into the proper directory in order to use them from the terminal: - - cp bin/* /usr/local/bin/ - +``` +cp bin/* /usr/local/bin/ +``` And that's it! Now you can run `mongod` directly or use `systemctl` to enable it by default. Hopefully this helps anyone else curious about running older (or even outdated!) versions of MongoDB. diff --git a/_posts/2023-03-03-monitor.md b/posts/monitor.md index d44d557..b572398 100644 --- a/_posts/2023-03-03-monitor.md +++ b/posts/monitor.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Why I Stopped Using an External Monitor" -date: 2023-03-03 ---- +# Why I Stopped Using an External Monitor +2023-03-03 For the longest time I've been using a Samsung 27" UHD monitor as my main display. This monitor was connected to my ThinkPad X260 (in clamshell mode) through the official Lenovo dock. It wasn't a bad setup, but I have since changed my ways. @@ -59,4 +56,4 @@ Yes, I am aware that I could simply keep the UHD monitor and perform my work wit I want to see the fuzzy text, slightly blurred imagery and muted button shadows. I want to see these things because that's how some *users* will experience it. -Maybe that's extreme - but it works for me. +Maybe that's extreme - but it works for me.
\ No newline at end of file diff --git a/_posts/2018-09-28-multiple-css-background-images.md b/posts/multiple-css-background-images.md index b90a897..1fd0180 100644 --- a/_posts/2018-09-28-multiple-css-background-images.md +++ b/posts/multiple-css-background-images.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Using Multiple CSS Background Images" -date: 2018-09-28 ---- +# Using Multiple CSS Background Images +2018-09-28 It isn't something developers have a need to do very often, but you *can* set multiple background images on a single element. diff --git a/_posts/2020-09-02-my-pi-desktop.md b/posts/my-pi-desktop.md index 53f5473..e5daee0 100644 --- a/_posts/2020-09-02-my-pi-desktop.md +++ b/posts/my-pi-desktop.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "My Raspberry Pi Desktop" -date: 2020-09-02 ---- +# My Raspberry Pi Desktop +2020-09-02 I use a Raspberry Pi 4 as my personal daily driver and it's pretty great. I know these types of devices tend to be used for smaller pet-projects or fun experiments, but I thought I would share my experience using one as my main computer. Hopefully this can be a solid guide to help others who might be interested in creating a similar setup. @@ -84,9 +81,9 @@ Since *actual* data speaks louder than anecdotal chit-chat, I performed a very s First, clear the cache to avoid conflicting data: - - sync; echo 3 | sudo tee /proc/sys/vm/drop_caches - +``` +sync; echo 3 | sudo tee /proc/sys/vm/drop_caches +``` ### Write diff --git a/_posts/2022-03-21-my-static-blog-publishing-setup.md b/posts/my-static-blog-publishing-setup.md index 29cd3a2..499334e 100644 --- a/_posts/2022-03-21-my-static-blog-publishing-setup.md +++ b/posts/my-static-blog-publishing-setup.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "My Static Blog Publishing Setup and an Apology to RSS Subscribers" -date: 2022-03-21 ---- +# My Static Blog Publishing Setup and an Apology to RSS Subscribers +2022-03-21 In case you missed it, this website is now generated with pure HTML & CSS. Although, generated isn't the proper way to describe it anymore. _Written_ is a better description. diff --git a/_posts/2019-04-05-ndenting-text-with-css.md b/posts/ndenting-text-with-css.md index 3335c8a..f0444fc 100644 --- a/_posts/2019-04-05-ndenting-text-with-css.md +++ b/posts/ndenting-text-with-css.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "CSS: Indenting Text" -date: 2019-04-05 ---- +# CSS: Indenting Text +2019-04-05 A lot of developers tend to do the bare minimum when it comes to implementing proper website typography. This isn't an insult - I'm happy that typography is given any thought at all during development, I just believe more can always be done to improve upon it. diff --git a/_posts/2021-12-03-netlify-urls.md b/posts/netlify-urls.md index fdad5e3..5ccf903 100644 --- a/_posts/2021-12-03-netlify-urls.md +++ b/posts/netlify-urls.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Using Netlify for Dynamic URL Redirects" -date: 2021-12-03 ---- +# Using Netlify for Dynamic URL Redirects +2021-12-03 With the [recent domain switch](/minor-website-changes/) that took place on this website, I needed to have a dependable setup to forward my old domain URLs to the new one. While using something like "URL forwarding" through your domain provider could work, it doesn't natively support *dynamic* linking. Let me explain using a basic example: @@ -32,4 +29,6 @@ That's it! Now Netlify will dynamically forward all your pre-existing URLs from Hopefully this helps others trying to dynamically redirect their domains without the headache. -[^1]: I normally set this up through Github / git hosting +## Refs + +1. I normally set this up through Github / git hosting diff --git a/_posts/2019-05-29-news-websites-are-dumpster-fires.md b/posts/news-websites-are-dumpster-fires.md index 3edb0ba..e16e99a 100644 --- a/_posts/2019-05-29-news-websites-are-dumpster-fires.md +++ b/posts/news-websites-are-dumpster-fires.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "News Websites Are Dumpster Fires" -date: 2019-05-29 ---- +# News Websites Are Dumpster Fires +2019-05-29 Online news outlets are a dying breed and many users have decided to consume information elsewhere. Why? Because the news industry has become a cesspool of anti-consumer and blackhat practices that has eroded trust for the sake of money. diff --git a/_posts/2022-09-22-notice.md b/posts/notice.md index b1eab7e..02496fd 100644 --- a/_posts/2022-09-22-notice.md +++ b/posts/notice.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "RE: Creating a Simple HTML/CSS Notice Box" -date: 2022-09-22 ---- +# RE: Creating a Simple HTML/CSS Notice Box +2022-09-22 I recently read Kev Quirk's post, [How to Create a Simple HTML/CSS Notice Box](https://kevquirk.com/how-to-create-a-simple-html-css-notice-box/) and loved the simplicity of it. I'm a sucker for using pseudo elements in creative ways but still managing to make them useful. Of course, this got me thinking as to whether or not the same style of box could be achieved *without* the use of static, pseudo elements... @@ -78,10 +75,10 @@ Important to note: you can hide the default "arrow toggle" on `summary` elements details > summary { - list-style: none; + list-style: none; } details > summary::-webkit-details-marker { - display: none; + display: none; } diff --git a/_posts/2020-12-04-obvious-js-injection-fallback.md b/posts/obvious-js-injection-fallback.md index 149dc4e..5143f7f 100644 --- a/_posts/2020-12-04-obvious-js-injection-fallback.md +++ b/posts/obvious-js-injection-fallback.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Obvious Javascript 'Injection' Fallback" -date: 2020-12-04 ---- +# Obvious Javascript 'Injection' Fallback +2020-12-04 Sometimes websites and web apps might require content to be "injected" via Javascript. I should mention that I am strongly against this practice - but often this kind of thing is out of one's hands. So, the least I can do is setup these "injections" to have proper fallbacks for users who disable JS. You would be surprised how many developers build *empty* HTML elements with the assumption they will be filled via Javascript. diff --git a/_posts/2019-11-29-one-css-property.md b/posts/one-css-property.md index 682aec3..fe9f9ae 100644 --- a/_posts/2019-11-29-one-css-property.md +++ b/posts/one-css-property.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Billing for One CSS Change" -date: 2019-11-29 ---- +# Billing for One CSS Change +2019-11-29 Every second you spend working as a designer should be billed back to the client. A simple button color change? Bill them. Additional links added to an existing menu? Send that invoice over. Some basic typeface changes? Don't do it for free. diff --git a/_posts/2023-01-09-one-thing.md b/posts/one-thing.md index 85b8677..877e4ef 100644 --- a/_posts/2023-01-09-one-thing.md +++ b/posts/one-thing.md @@ -1,15 +1,14 @@ ---- -layout: post -title: "My Coffee Maker Just Makes Coffee" -date: 2023-01-09 ---- +# My Coffee Maker Just Makes Coffee +2023-01-09 + + I had to replace my dual Keurig coffee maker *twice* over a period of five months. This occurred a year ago and these are my findings. ## Built to Fail? -I followed the manufacturer's suggested cleaning schedule and took care of the appliances. My initial conclusion was that the product's design wasn't thought-out well. "It's built to fail!" I said to my wife the morning of the *second* machine's failure. Another product replaced under warranty, while the broken one's tossed aside. More e-waste because why not? +I followed the manufactor's suggested cleaning schedule and took care of the appliances. My initial conclusion was that the product's design wasn't thought-out well. "It's built to fail!" I said to my wife the morning of the *second* machine's failure. Another product replaced under warranty, while the broken one's tossed aside. More e-waste because why not? But after some further reflection, I came to realize the "poor design" was a symptom of a greater cause: @@ -44,4 +43,4 @@ And it's been running *perfect* for over 8 months now. I clean it every so often ## "Brewing" Software -At least, for me, I plan to only design what *needs to be*. If someone asks for a "coffee", they'll get a cup of hot, black coffee and nothing else. +At least, for me, I plan to only design what *needs to be*. If someone asks for a "coffee", they'll get a cup of hot, black coffee and nothing else.
\ No newline at end of file diff --git a/_posts/2018-01-25-open-source-typeface-pairings.md b/posts/open-source-typeface-pairings.md index 257d731..271db4a 100644 --- a/_posts/2018-01-25-open-source-typeface-pairings.md +++ b/posts/open-source-typeface-pairings.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Open Source Typeface Pairings" -date: 2018-01-25 ---- +# Open Source Typeface Pairings +2018-01-25 I always love finding new typeface pairings to use across my personal and client projects, but I find many suggested pairings come with a hefty price tag (rightly so - premium typefaces are normally always worth their cost). diff --git a/_posts/2022-12-02-openring.md b/posts/openring.md index 70e1708..8c1c6c6 100644 --- a/_posts/2022-12-02-openring.md +++ b/posts/openring.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Building openring with Jekyll Build" -date: 2022-12-02 ---- +# Building openring with Jekyll Build +2022-12-02 I think it's great when bloggers post their own personal "reading list" of blogs they themselves follow. Whether this is a customized Blogroll page or footnotes in their individual articles, I find it really helpful to find more interesting content on the "indie" web. This isn't a new concept by any means, but I wanted something a little more "dynamic"[^1] for my own blog. @@ -27,58 +24,58 @@ You *could* setup a whole new directory specifically for your openring files, bu ### openring-in.html Contents -{% raw %} - <!-- License-Id: CC0-1.0 --> - <section class="webring"> - <h3>Articles from blogs I follow around the world wide web</h3> - <section class="articles"> - {{range .Articles}} - <div class="article"> - <h4 class="title"> - <a href="{{.Link}}" rel="noopener">{{.Title}}</a> - </h4> - <p class="summary">{{.Summary}}</p> - <small class="source"> - via <a href="{{.SourceLink}}">{{.SourceTitle}}</a> - </small> - <small class="date">{{.Date | datef "January 2, 2006"}}</small> - </div> - {{end}} - </section> - <p class="attribution"> - Generated by - <a href="https://git.sr.ht/~sircmpwn/openring">openring</a> - </p> - </section> - <style> - .webring .articles { - display: flex; - flex-wrap: wrap; - margin: -0.5rem; - } - .webring .title { - margin: 0; - } - .webring .article { - flex: 1 1 0; - display: flex; - flex-direction: column; - margin: 0.5rem; - padding: 0.5rem; - background: #eee; - min-width: 10rem; - } - .webring .summary { - font-size: 0.8rem; - flex: 1 1 0; - } - .webring .attribution { - text-align: right; - font-size: 0.8rem; - color: #555; - } - </style> -{% endraw %} +``` +<!-- License-Id: CC0-1.0 --> +<section class="webring"> + <h3>Articles from blogs I follow around the world wide web</h3> + <section class="articles"> + {{range .Articles}} + <div class="article"> + <h4 class="title"> + <a href="{{.Link}}" rel="noopener">{{.Title}}</a> + </h4> + <p class="summary">{{.Summary}}</p> + <small class="source"> + via <a href="{{.SourceLink}}">{{.SourceTitle}}</a> + </small> + <small class="date">{{.Date | datef "January 2, 2006"}}</small> + </div> + {{end}} + </section> + <p class="attribution"> + Generated by + <a href="https://git.sr.ht/~sircmpwn/openring">openring</a> + </p> +</section> +<style> +.webring .articles { + display: flex; + flex-wrap: wrap; + margin: -0.5rem; +} +.webring .title { + margin: 0; +} +.webring .article { + flex: 1 1 0; + display: flex; + flex-direction: column; + margin: 0.5rem; + padding: 0.5rem; + background: #eee; + min-width: 10rem; +} +.webring .summary { + font-size: 0.8rem; + flex: 1 1 0; +} +.webring .attribution { + text-align: right; + font-size: 0.8rem; + color: #555; +} +</style> +``` > Sidenote: You will get minor Liquid Syntax warnings in the console when running your website via `serve` or `build`. I don't really mind those warnings but if you do, feel free to move these files out into their own sub-directory in your project folder. @@ -92,31 +89,33 @@ To simplify things, we are going to place our main commands in a single build sc Place the following inside that file: - - openring \ - -s https://example.com/feed.xml \ - -s https://example.com/feed.xml \ - -s https://example.com/feed.xml \ - < _includes/openring-in.html \ - > _includes/openring-out.html - bundle exec jekyll build - +``` +openring \ + -s https://example.com/feed.xml \ + -s https://example.com/feed.xml \ + -s https://example.com/feed.xml \ + < _includes/openring-in.html \ + > _includes/openring-out.html +bundle exec jekyll build +``` ## Edit `_config.yml` Next we need to make sure we exclude our new `build-site` script file, since we really don't need that pushed up to the main server: - # Includes / Excludes - exclude: - - build-site.sh +``` +# Includes / Excludes +exclude: + - build-site.sh +``` ## Almost Done... Now you just need to decide where you want your `openring` feed outputs to render. For this example, we will place them at the bottom of every blog post inside the `_layouts/post.html` file, like so: - - {% raw %}{% include openring-out.html %}{% endraw %} - +``` +{% raw %}{% include openring-out.html %}{% endraw %} +``` ## Build It & They Will Come @@ -128,5 +127,6 @@ I won't go into great detail about build script for SourceHut Pages, but feel fr Happy sharing! +## Refs -[^1]: Well, as dynamic as a static website can be! +1. Well, as dynamic as a static website can be!
\ No newline at end of file diff --git a/_posts/2020-09-09-over-engineering-an-oil-tank.md b/posts/over-engineering-an-oil-tank.md index 5685eab..ae516fc 100644 --- a/_posts/2020-09-09-over-engineering-an-oil-tank.md +++ b/posts/over-engineering-an-oil-tank.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Over-Engineering an Oil Tank Gauge" -date: 2020-09-09 ---- +# Over-Engineering an Oil Tank Gauge +2020-09-09 I almost went down the path of investing a huge amount of time and effort into fixing a stuck oil fuel tank float-gauge in my house. Recently, the float mechanism became stuck and permanently displayed `empty` regardless of how much fuel was in the tank - not ideal. It's a 20 year-old tank, so I wasn't surprised that the float finally gave out. diff --git a/_posts/2019-01-06-over-nesting.md b/posts/over-nesting.md index 0811788..1003fd0 100644 --- a/_posts/2019-01-06-over-nesting.md +++ b/posts/over-nesting.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Over-Nesting" -date: 2019-01-06 ---- +# Over-Nesting +2019-01-06 I think since our design industry moves so quickly and exciting new technologies get released almost daily, that we often forget some of the basics when writing CSS. I bring this up because I've recently worked on a few projects that show a slight disregard for proper class/selector nesting. diff --git a/_posts/2022-06-29-paid-mac-apps.md b/posts/paid-mac-apps.md index bd680fd..47b9626 100644 --- a/_posts/2022-06-29-paid-mac-apps.md +++ b/posts/paid-mac-apps.md @@ -1,11 +1,8 @@ ---- -layout: post -title: "Happily Paying For macOS Apps" -date: 2022-06-29 ---- +# Happily Paying For macOS Apps +2022-06-29 -It's no secret that I am a huge advocate for open source software. A solid chunk of my day-to-day workload is done so via FOSS[^1] systems. I also manage a handful of fun side projects that are normally shipped under either MIT or GPL licensing. But that doesn't mean I still don't enjoy _some_ non-free, proprietary software. +It's no secret that I am a huge advocate for open source software. A solid chunk of my day-to-day workload is done so via FOSS[^0] systems. I also manage a handful of fun side projects that are normally shipped under either MIT or GPL licensing. But that doesn't mean I still don't enjoy _some_ non-free, proprietary software. So, I thought I would share my collection of macOS applications that I happily paid for. (There aren't many since my needs are limited) @@ -49,7 +46,8 @@ URL: [https://panic.com/transmit/](https://panic.com/transmit/) I know this list only includes 3 applications, but that's truly all the ones I've spent money on. If in the future I happen to purchase any others I will be sure to update this post accordingly. +## Refs -[^1]: Free & open source software +1. Free & open source software diff --git a/_posts/2022-07-06-pblog.md b/posts/pblog.md index 3d29065..7deedbe 100644 --- a/_posts/2022-07-06-pblog.md +++ b/posts/pblog.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Yet Another Static Site Generator Switch" -date: 2022-07-06 ---- +# Yet Another Static Site Generator Switch +2022-07-06 If you're an RSS subscriber, I've probably blown up your feed reader (again). This seems to be an on-going theme with this blog. I can't help it. diff --git a/_posts/2021-09-08-performance-focused-wordpress-theme.md b/posts/performance-focused-wordpress-theme.md index 141dffc..a973166 100644 --- a/_posts/2021-09-08-performance-focused-wordpress-theme.md +++ b/posts/performance-focused-wordpress-theme.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Create a Performance-Focused WordPress Blog" -date: 2021-09-08 ---- +# Create a Performance-Focused WordPress Blog +2021-09-08 With my recent switch back to WordPress, and having read Kev Quirk’s <a href="https://kevq.uk/core-web-vitals-and-wordpress/" target="_blank" rel="noreferrer noopener">latest post about Core Web Vitals</a>, I wanted to make sure my blog still prioritized speed and performance above all else. I’m happy to say that I have closely replicated the same speed of my original *static* Jekyll-based version of this blog. diff --git a/_posts/2021-05-19-personal-website-opinions.md b/posts/personal-website-opinions.md index 86c9db6..aaae7de 100644 --- a/_posts/2021-05-19-personal-website-opinions.md +++ b/posts/personal-website-opinions.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "My Changing Opinion on Personal Website Design" -date: 2021-05-19 ---- +# My Changing Opinion on Personal Website Design +2021-05-19 Hey would you look at that - my personal blog has been redesigned *again*! Although I am still using good ol' Jekyll for the backend, I have now added a more fleshed-out CSS design which also includes a set of open source custom typefaces. diff --git a/_posts/2021-04-22-phpetite.md b/posts/phpetite.md index eba51b1..9eafa29 100644 --- a/_posts/2021-04-22-phpetite.md +++ b/posts/phpetite.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "89 Blog Posts in a Single HTML File" -date: 2021-04-22 ---- +# 89 Blog Posts in a Single HTML File +2021-04-22 *This is no longer the current setup of my blog*. I have switched back to Jekyll for performance reasons. I'll be leaving this post up as a point of reference though :) diff --git a/_posts/2021-08-13-pi-400-internal-ssd.md b/posts/pi-400-internal-ssd.md index 519d639..b54a206 100644 --- a/_posts/2021-08-13-pi-400-internal-ssd.md +++ b/posts/pi-400-internal-ssd.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Stuffing an SSD Inside the Raspberry Pi 400" -date: 2021-08-13 ---- +# Stuffing an SSD Inside the Raspberry Pi 400 +2021-08-13 I have successfully jammed an mSATA SSD into the main shell of my Raspberry Pi 400. It wasn't as straightforward as I thought it would be - in fact, most *real* hardware tinkerers will probably vomit in their mouths once they see how I achieved this... diff --git a/_posts/2021-10-28-pihole-cloudflare.md b/posts/pihole-cloudflare.md index a194dd2..0f59ca3 100644 --- a/_posts/2021-10-28-pihole-cloudflare.md +++ b/posts/pihole-cloudflare.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Setting Up 1.1.1.1 for Families on a Pi-Hole" -date: 2021-10-28 ---- +# Setting Up 1.1.1.1 for Families on a Pi-Hole +2021-10-28 After seeing Cloudflare's 1.1.1.1 for Families mentioned on the [front page of HackerNews](https://news.ycombinator.com/item?id=29024195), I thought it might be helpful to show those currently using a [pi-hole device](https://pi-hole.net) how to include 1.1.1.1 alongside it. diff --git a/_posts/2019-09-09-plain-text-emails.md b/posts/plain-text-emails.md index 50a722e..0d4cb36 100644 --- a/_posts/2019-09-09-plain-text-emails.md +++ b/posts/plain-text-emails.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Plain Text Emails, Please" -date: 2019-09-09 ---- +# Plain Text Emails, Please +2019-09-09 When it comes to website / product design and development most devs should try to keep things simple. By only using as much code as absolutely necessary, projects avoid growing out of scope or becoming bloated. So, why isn't this same approach taken for email? @@ -69,5 +66,6 @@ That being said, at the end of the day, companies will justify their own reasons The results might just surprise you. +## Refs -[^1]: This is the "latest" detailed survey I could find on email design preference +1. This is the "latest" detailed survey I could find on email design preference diff --git a/_posts/2020-10-07-poor-mans-full-bleed.md b/posts/poor-mans-full-bleed.md index 219fc00..0d88025 100644 --- a/_posts/2020-10-07-poor-mans-full-bleed.md +++ b/posts/poor-mans-full-bleed.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Poor Man's CSS Full-Bleed Layout" -date: 2020-10-07 ---- +# Poor Man's CSS Full-Bleed Layout +2020-10-07 I recently came across the very well written and interesting article, [Full-Bleed Layout Using CSS Grid](https://joshwcomeau.com/css/full-bleed/), while browsing my daily designer feeds. I won't go into the post's specifics here (I recommend you read the article for yourself) but it details how to render full-bleed element effects utilizing the CSS `grid` property. diff --git a/_posts/2022-02-03-poormans-comment-system.md b/posts/poormans-comment-system.md index 4ce4a1a..30e6c50 100644 --- a/_posts/2022-02-03-poormans-comment-system.md +++ b/posts/poormans-comment-system.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "My Cheapskate Commenting System" -date: 2022-02-03 ---- +# My Cheapskate Commenting System +2022-02-03 My blog now has comments! Well, *kind of*... diff --git a/_posts/2019-02-05-proper-ui-hierarchy.md b/posts/proper-ui-hierarchy.md index 168aa75..d5183fe 100644 --- a/_posts/2019-02-05-proper-ui-hierarchy.md +++ b/posts/proper-ui-hierarchy.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Proper UI Hierarchy" -date: 2019-02-05 ---- +# Proper UI Hierarchy +2019-02-05 I often feel like an old man when I complain about flat design and how designers these days have lost (or willfully forgotten) the skill to create accessible UIs with proper visual hierarchy. A skill which at it's core seems so simple - yet is overlooked in almost every current <i>modern</i> interface. diff --git a/_posts/2021-06-20-ps4-download-ui.md b/posts/ps4-download-ui.md index 021b84f..6c8881c 100644 --- a/_posts/2021-06-20-ps4-download-ui.md +++ b/posts/ps4-download-ui.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "PS4 Download UI with Pure CSS" -date: 2021-06-20 ---- +# PS4 Download UI with Pure CSS +2021-06-20 Overall, I'm fairly impressed with the user interface design of Sony's PS4 system OS. It's minimal and keeps the content front and center. Even with it's sometimes spotty performance hiccups, I've come to enjoy interacting with it. diff --git a/_posts/2019-06-20-publish-with-jekyll.md b/posts/publish-with-jekyll.md index 972d6b9..0c33e39 100644 --- a/_posts/2019-06-20-publish-with-jekyll.md +++ b/posts/publish-with-jekyll.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Publishing Simple Books With Jekyll" -date: 2019-06-20 ---- +# Publishing Simple Books With Jekyll +2019-06-20 When thinking about writing, designing and ultimately publishing an ebook, most people don't think of using a static site generator. Having products like Amazon Publishing, LaTeX or even Microsoft Word available, why should you use Jekyll? diff --git a/_posts/2018-09-20-pure-css-simple-dropdown-plugin.md b/posts/pure-css-simple-dropdown-plugin.md index 9f6c603..522618c 100644 --- a/_posts/2018-09-20-pure-css-simple-dropdown-plugin.md +++ b/posts/pure-css-simple-dropdown-plugin.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Pure CSS Simple Dropdown Plugin" -date: 2018-09-20 ---- +# Pure CSS Simple Dropdown Plugin +2018-09-20 I find myself blowing away default browser `select` styling and implementing my own custom dropdowns far more often than I'd like. So, I recently created a very simple and clean component using just pure CSS. diff --git a/_posts/2020-06-04-quick-dirty-theme-switcher.md b/posts/quick-dirty-theme-switcher.md index 08e7dbd..b66a2fc 100644 --- a/_posts/2020-06-04-quick-dirty-theme-switcher.md +++ b/posts/quick-dirty-theme-switcher.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Quick and Dirty Theme Switcher" -date: 2020-06-04 ---- +# Quick and Dirty Theme Switcher +2020-06-04 **Update**: This article is no longer relevant since my blog design has changed. I'm keeping this post up since it will still be useful for those wanting to implement a theme switcher on their own site. diff --git a/_posts/2022-06-20-rss-click.md b/posts/rss-click.md index 0592aae..d794c1b 100644 --- a/_posts/2022-06-20-rss-click.md +++ b/posts/rss-click.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Clickable Links Inside XML" -date: 2022-06-20 ---- +# Clickable Links Inside XML +2022-06-20 With the recent patch to the Shinobi Website project, I thought it would be best to share my experience implementing clickable links inside a rendered XML RSS file directly through a browser. This is made possible thanks to the awesome power of XSL formatting. @@ -17,8 +14,6 @@ Rendering your entry links as interactive URLs is fairly intuitive. You just nee 2. Set the inner child attribute to "href" 3. Set the value of that attribute to use the entry's `link` parameter ---- - <xsl:element name="a"> <xsl:attribute name="href"> @@ -45,4 +40,6 @@ In a supported browser, you can see the code in action here: https://pblog.bt.ht That's really all there is to it. -[^1]: https://shinobi.bt.ht/posts/patch-3.txt +## Refs + +1. https://shinobi.bt.ht/posts/patch-3.txt diff --git a/_posts/2022-05-23-rss-hacks.md b/posts/rss-hacks.md index 7ca7d11..0946f5c 100644 --- a/_posts/2022-05-23-rss-hacks.md +++ b/posts/rss-hacks.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "RSS Hacks With XSLT" -date: 2022-05-23 ---- +# RSS Hacks With XSLT +2022-05-23 In my spare time I've been further tinkering (hopefully for the better) with my humble Shinobi Website[^0] script. The most recent update in `patch-1` came with a solid amount of QoL improvements. If you're interested, I wrote about it on the official Shinobi blog[^1]. @@ -60,12 +57,10 @@ If you're interested in more updates and details about the shinobi project itsel [https://shinobi.bt.ht/feed.xml](https://shinobi.bt.ht/feed.xml) -[^1]: https://shinobi.website/ +## Refs -[^2]: https://shinobi.website/posts/patch-1.txt - -[^3]: http://len.falken.directory/ - -[^4]: https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html - -[^5]: https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2 +1. https://shinobi.website/ +2. https://shinobi.website/posts/patch-1.txt +3. http://len.falken.directory/ +4. https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html +5. https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2 diff --git a/posts/rvm.md b/posts/rvm.md new file mode 100644 index 0000000..50610fb --- /dev/null +++ b/posts/rvm.md @@ -0,0 +1,40 @@ +# Installing Ruby with RVM on Alpine Linux + +2023-03-16 + +For some on-going projects I need to switch to different versions of `ruby`. Although there exist many step-by-step instructions on installing and configuring `rvm` for most Linux distros, there aren't many focused on Alpine "daily drivers". + +So this post is more or less a helpful document for my future self. If it happens to help others then that's an added bonus! + +## Simple Setup + +Make sure you have the basic packages first: + +``` +apk update +apk add curl gcc gnupg gpg dirmngr procps musl-dev linux-headers zlib zlib-dev openssl openssl-dev libssl1.1 +``` + +Next download the latest `stable` version of `rvm` from Github, unpack it, place it in the proper user directory (~/.rvm) and install any required libs: + +``` +curl -sSL https://github.com/rvm/rvm/tarball/stable -o rvm-stable.tar.gz +echo 'export rvm_prefix="$HOME"' > ~/.rvmrc +echo 'export rvm_path="$HOME/.rvm"' >> ~/.rvmrc +mkdir rvm && cd rvm +tar --strip-components=1 -xzf ../rvm-stable.tar.gz +./install --auto-dotfiles --autolibs=0 +``` + +Now we can remove everything and properly link to `rvm`: + +``` +cd ../ && rm -rf rvm-stable stable.tar.gz rvm +source ~/.rvm/scripts/rvm +``` + +Now you can freely install any version of Ruby that you desire! + +``` +rvm install ruby-X.X.X +``` diff --git a/_posts/2022-04-18-safari-default-dark-mode.md b/posts/safari-default-dark-mode.md index b5c2401..14f48c0 100644 --- a/_posts/2022-04-18-safari-default-dark-mode.md +++ b/posts/safari-default-dark-mode.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Dear Apple, Please Fix Safari's Default Dark Mode Link Color" -date: 2022-04-18 ---- +# Dear Apple, Please Fix Safari's Default Dark Mode Link Color +2022-04-18 Supporting dark mode on the modern web falls under the realm of accessibility and should not be ignored. It is important and helps keep the visual flow of your content to match that of your users' operating system UI. Not to mention, it's easy to implement and keep consistent across browsers. @@ -15,9 +12,9 @@ A common practice is to include a `@media` query via CSS to target styling chang Adding the following meta tag inside your document's `head` element, you can enable dark mode instantly with zero configuration: -```html -<meta name="color-scheme" content="dark light" /> -``` + + <meta name="color-scheme" content="dark light" /> + There are minor caveats: @@ -42,15 +39,15 @@ Even though by adding the color-scheme meta tag we get ourselves good dark mode Luckily for us there is a simple solution using minimal amounts of CSS[^1]: -```scss -@supports (color-scheme: dark light) { - @media screen and (prefers-color-scheme: dark) { - a:link {color: #9e9eff;} - a:visited {color: #d0adf0;} - a:active {color: red;} + + @supports (color-scheme: dark light) { + @media screen and (prefers-color-scheme: dark) { + a:link {color: #9e9eff;} + a:visited {color: #d0adf0;} + a:active {color: red;} + } } -} -``` + We are brute-forcing Safari to implement the same color HEX codes used by both Firefox and Chrome browsers. How a horrible accessibility oversight could happen within a company as large as Apple is astounding... @@ -60,6 +57,7 @@ My hope if that even one Safari design or development team member stumbles acros Thanks for reading and happy dark mode to you all! -[^1]: Special thanks to [Seirdy](https://seirdy.one/) for suggesting the use of :link and :active support. I recommend you check out his take on [dark mode / theme support](https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes). +## Refs -[^2]: This has an open ticket through [Webkit Bugzilla](https://bugs.webkit.org/show_bug.cgi?id=209851) +1. Special thanks to [Seirdy](https://seirdy.one/) for suggesting the use of :link and :active support. I recommend you check out his take on [dark mode / theme support](https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes). +2. This has an open ticket through [Webkit Bugzilla](https://bugs.webkit.org/show_bug.cgi?id=209851) diff --git a/_posts/2021-09-23-safari-extensions-catalina-patcher.md b/posts/safari-extensions-catalina-patcher.md index 998eac4..50f92cb 100644 --- a/_posts/2021-09-23-safari-extensions-catalina-patcher.md +++ b/posts/safari-extensions-catalina-patcher.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Enabling Safari Extensions with the macOS Catalina Patcher" -date: 2021-09-23 ---- +# Enabling Safari Extensions with the macOS Catalina Patcher +2021-09-23 I have an old 2011 MacBook Air that is running the latest version of macOS Catalina thanks to the very wonderful [Catalina Patcher](http://dosdude1.com/catalina/) by dosdude1. This project has made it possible for me to run and test some of the latest software from Apple - namely Safari 15. diff --git a/_posts/2022-05-30-schools.md b/posts/schools.md index 98865ac..f2ed666 100644 --- a/_posts/2022-05-30-schools.md +++ b/posts/schools.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Schools Should Be Using Open Source Software" -date: 2022-05-30 ---- +# Schools Should Be Using Open Source Software +2022-05-30 I firmly believe that proprietary software has no business in any school environment. Educational institutions lean heavily on Windows systems in the name of "security" or "easier platform management". This approach forces students into using locked-down, closed sourced software applications. @@ -36,11 +33,11 @@ Heck, you could even have a fleet of Raspberry Pi devices as your main student " ## Security -I briefly mentioned user and network security above but figured it deserved its own section. A great deal of push-back comes from stubborn IT professionals[^1] determined to keep things running on Windows - since this is mostly what they are familiar with. +I briefly mentioned user and network security above but figured it deserved its own section. A great deal of push-back comes from stubborn IT professionals[^0] determined to keep things running on Windows - since this is mostly what they are familiar with. My mother-in-law was an "at-risk" educator for most of her career. She explained to me that their IT department did a major switch over to use BRAND NEW Apple laptops for all the students just before her retirement. I can't even begin to imagine the cost associated with this change. Not to mention the cost of repair for any of these devices when (not if) damaged. -Who the hell is making these decisions? Even worse, who is approving them?! The school board had the opportunity to switch away from Windows devices and decided on Apple? Education reform is greatly needed[^2]. +Who the hell is making these decisions? Even worse, who is approving them?! The school board had the opportunity to switch away from Windows devices and decided on Apple? Education reform is greatly needed[^1]. ## What About The "Job Market" @@ -59,22 +56,21 @@ Another bonus in using fully open source software is the ability for the student So what are these "open source" alternatives? Check out my simple suggestions below: -MS Office Suite ==> LibreOffice Suite[^3] +MS Office Suite ==> LibreOffice Suite[^2] Photoshop ==> GIMP Illustrator ==> Inkscape -IE/Edge ==> Firefox[^4] +IE/Edge ==> Firefox[^3] Coding IDE (optional) ===> vim You could easily expand upon these options, but for most elementary school task these are more than enough. -[^1]: Not _all_ IT workers in the school system fall into this category. But most of the underlining structure prevents them from changing much. +## Refs -[^2]: At least in my country of Canada. I can't speak for others. - -[^3]: `groff` would be my personal suggestion instead, since it helps introduce children into the structure of basic file formatting and "programming". I'll go into greater details about this in another post. - -[^4]: As mentioned in the beginning of the post, I'd even suggest forks of Firefox -> LibreWolf or Pale Moon (if possible) +1. Not _all_ IT workers in the school system fall into this category. But most of the underlining structure prevents them from changing much. +2. At least in my country of Canada. I can't speak for others. +3. `groff` would be my personal suggestion instead, since it helps introduce children into the structure of basic file formatting and "programming". I'll go into greater details about this in another post. +4. As mentioned in the beginning of the post, I'd even suggest forks of Firefox -> LibreWolf or Pale Moon (if possible) diff --git a/_posts/2018-10-18-self-hosted-blogs.md b/posts/self-hosted-blogs.md index bd117da..a330b90 100644 --- a/_posts/2018-10-18-self-hosted-blogs.md +++ b/posts/self-hosted-blogs.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "What Happened to Self-Hosted Blogs?" -date: 2018-10-18 ---- +# What Happened to Self-Hosted Blogs? +2018-10-18 I remember a time on the internet<sup>1</sup> when everyone and their grandmother was running a personal blog. And I mean *personal* - not hosted on some side platform or a tacked-on addition to the rest of their website. @@ -28,5 +25,7 @@ I also believe this inspired people to write better content instead of opting fo Maybe I'm just a salty designer with a narrow-minded, pessimistic view on where our blogging communities seem to be heading - or maybe I just have higher standards. +## Refs + <small><sup>1</sup> <i>the design world of the internet</i><br/></small> <small><sup>2</sup> <i>by "All" I mean the majority</i></small> diff --git a/_posts/2021-02-02-self-hosting-fathom.md b/posts/self-hosting-fathom.md index d434ab6..e3c6c9e 100644 --- a/_posts/2021-02-02-self-hosting-fathom.md +++ b/posts/self-hosting-fathom.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Self-Hosting Fathom Analytics with DigitalOcean" -date: 2021-02-02 ---- +# Self-Hosting Fathom Analytics with DigitalOcean +2021-02-02 Since my previous post walked through the process of setting up <a href="/fathom-analytics-netlify">Fathom PRO on Netlify</a>, I figured it made sense to create a similar tutorial for the "Lite" variation, self-hosted on DigitalOcean. diff --git a/_posts/2018-08-07-setting-up-free-ssl.md b/posts/setting-up-free-ssl.md index 37fd8d1..538281c 100644 --- a/_posts/2018-08-07-setting-up-free-ssl.md +++ b/posts/setting-up-free-ssl.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Setting Up a Free SSL" -date: 2018-08-07 ---- +# Setting Up a Free SSL +2018-08-07 I never had to worry about SSL certificates when I originally hosted my blog through Github Pages, but since switching over to Surge.sh I lost my ability to utilize `https` protocol. diff --git a/_posts/2023-06-24-seven-years.md b/posts/seven-years.md index 119c7f0..f1c67ca 100644 --- a/_posts/2023-06-24-seven-years.md +++ b/posts/seven-years.md @@ -1,11 +1,8 @@ ---- -layout: post -title: "Blogging for 7 Years" -date: 2023-06-24 ---- +# Blogging for 7 Years +2023-06-24 -My [first public article](/posts/aui) was posted on June 28th 2016. That was *seven* years ago. +My [first public article](/aui) was posted on June 28th 2016. That was *seven* years ago. In that time, quite a lot has changed in my life both personally and professionally. So, I figured it would be interesting to reflect on these years and document it for my own personal records. My hope is that this is something I could start doing every 5 or 10 years (if I can keep going that long!). This way, my blog also serves as a "time capsule" or museum of the past... @@ -22,8 +19,7 @@ I originally started blogging on `bradleytaunt.com` using WordPress, but since t - [PHPetite](https://phpetite.bt.ht) - [Shinobi](https://shinobi.bt.ht) - [pblog](https://pblog.bt.ht) -- [barf](https://barf.bt.ht) -- [ikiwiki](https://ikiwiki.info) *Currently using!* +- [barf](https://barf.bt.ht) *Currently using!* **Personal:** @@ -42,4 +38,4 @@ As with anyone over time, the personal side of my life has seen the biggest *upd ## Nothing Special -This post isn't anything ground-breaking but for me it's nice to reflect on the time passed and remember how much can change in such little time. Hopefully I'll be right back here in another 7 years and maybe you'll still be reading along with me! +This post isn't anything ground-breaking but for me it's nice to reflect on the time passed and remember how much can change in such little time. Hopefully I'll be right back here in another 7 years and maybe you'll still be reading along with me!
\ No newline at end of file diff --git a/_posts/2021-07-24-sharing-the-things-we-use.md b/posts/sharing-the-things-we-use.md index c3c0fd8..7b0423d 100644 --- a/_posts/2021-07-24-sharing-the-things-we-use.md +++ b/posts/sharing-the-things-we-use.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Sharing The Things We Use" -date: 2021-07-24 ---- +# Sharing The Things We Use +2021-07-24 I always love stumbling across personal websites that include some form of a "uses" page. A place where the author lists out all the tools they use on a regular basis - whether it be hardware, software or something else entirely. It allows readers to get a slightly more personal peek into the daily work-life of that author and maybe even provides better context for *how* they work. diff --git a/_posts/2022-05-13-shinobi-website.md b/posts/shinobi-website.md index d503dac..dc7c3e3 100644 --- a/_posts/2022-05-13-shinobi-website.md +++ b/posts/shinobi-website.md @@ -1,11 +1,8 @@ ---- -layout: post -title: "This Site is Now a Shinobi Website" -date: 2022-05-13 ---- +# This Site is Now a Shinobi Website +2022-05-13 -**Update 2023**: this website is now built with [ikiwiki](https://ikiwiki.info) +**Update 2023**: this website is now built with [barf](https://barf.bt.ht) - - - @@ -66,8 +63,8 @@ Some may like the concept of reading my new articles in their RSS reader, others Thanks for taking the time to read my jumbled thoughts. -[^0]: Users can _of course_ still visit the individual article `.txt` files in their browser, if they so wish. +## Refs -[^1]: https://tdarb.org/blog/my-static-blog-publishing-setup.html - -[^2]: https://tdarb.org/blog/poormans-comment-system.html +1. Users can _of course_ still visit the individual article `.txt` files in their browser, if they so wish. +2. https://tdarb.org/blog/my-static-blog-publishing-setup.html +3. https://tdarb.org/blog/poormans-comment-system.html diff --git a/_posts/2021-04-27-shiny-css-buttons.md b/posts/shiny-css-buttons.md index 9f4f81a..f568a49 100644 --- a/_posts/2021-04-27-shiny-css-buttons.md +++ b/posts/shiny-css-buttons.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Shiny, Animated CSS Buttons" -date: 2021-04-27 ---- +# Shiny, Animated CSS Buttons +2021-04-27 Everyone can appreciate fancy, animated buttons - but often times they come with a performance cost: *JavaScript*. Luckily for us, we can create our very own shiny, animated buttons with pure CSS. diff --git a/_posts/2018-09-07-simple-accessibility.md b/posts/simple-accessibility.md index 035dc63..6796e55 100644 --- a/_posts/2018-09-07-simple-accessibility.md +++ b/posts/simple-accessibility.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Simple Accessibility" -date: 2018-09-07 ---- +# Simple Accessibility +2018-09-07 Implementing proper accessibility practices can seem a little daunting at first, but there are a few basic standards you can introduce into your project work-flow that are fairly straightforward: diff --git a/_posts/2019-03-26-simple-does-not-mean-ugly.md b/posts/simple-does-not-mean-ugly.md index 2474aea..aff0cfd 100644 --- a/_posts/2019-03-26-simple-does-not-mean-ugly.md +++ b/posts/simple-does-not-mean-ugly.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Simple Does Not Mean Ugly" -date: 2019-03-26 ---- +# Simple Does Not Mean Ugly +2019-03-26 I see new blog posts popping up now and again advocating for designers to keep their products as simple as possible - and I couldn't agree more. diff --git a/_posts/2020-09-29-simple-jekyll-navigation.md b/posts/simple-jekyll-navigation.md index d948f99..64faf04 100644 --- a/_posts/2020-09-29-simple-jekyll-navigation.md +++ b/posts/simple-jekyll-navigation.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Simple Navigation Setup in Jekyll 3.9.0" -date: 2020-09-29 ---- +# Simple Navigation Setup in Jekyll 3.9.0 +2020-09-29 I have found that there is a lot of information on the internet in regards to setting up "dynamic" navigation in Jekyll. The problem I've noticed is that a good amount of these implementations are overly complex. Here is the simplest way that I tend to use when building out `nav` elements in Jekyll (3.9.0 as of this writing). diff --git a/_posts/2019-03-25-skip-to-content.md b/posts/skip-to-content.md index 1d722cc..965c15c 100644 --- a/_posts/2019-03-25-skip-to-content.md +++ b/posts/skip-to-content.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Skip to Content Button" -date: 2019-03-25 ---- +# Skip to Content Button +2019-03-25 One of the golden rules for testing your website's accessibility is the "keyboard-only" audit. This is where you test navigating through your entire site without the use of a mouse, but instead rely solely on tabbing through your content. diff --git a/_posts/2023-05-01-slabtop.md b/posts/slabtop.md index 658da0f..9fa035b 100644 --- a/_posts/2023-05-01-slabtop.md +++ b/posts/slabtop.md @@ -1,11 +1,8 @@ ---- -layout: post -title: "Converting My X201 ThinkPad into a Slabtop" -date: 2023-05-01 ---- +# Converting My X201 ThinkPad into a Slabtop +2023-05-01 -I recently wrote [about physically disabling the WiFi toggle switch on my X201](/posts/x201/) which was a fun "hack" to an annoying issue I was running into. Since then, the laptop has been running flawlessly. +I recently wrote [about physically disabling the WiFi toggle switch on my X201](/x201/) which was a fun "hack" to an annoying issue I was running into. Since then, the laptop has been running flawlessly. The only other *minor* issue I had was the poor display quality. The screen works perfectly fine but the X201's age prevents it from being the best possible display for day-to-day tasks. Both the resolution and viewing angles are quite poor. @@ -23,10 +20,9 @@ Then I thought to myself, "Why not just remove the display *entirely*?" So that's what I did. -<figure> - <img src="/public/images/slabtop-1.webp" alt="The main X201 display and lid disconnected"> - <figcaption>The X201 display (still inside the top lid) disconnected from the body of the laptop.</figcaption> -</figure> + + +*The X201 display (still inside the top lid) disconnected from the body of the laptop.* Removing the entire top lid was easier than I initially thought it would be. The beautiful thing about these older, classic ThinkPads is the ability to completely dissemble them. I won't go into heavy details on how to take one of these machines apart, since great documentation [already exists](https://www.ifixit.com/Device/Lenovo_Thinkpad_X201_Tablet). But once you have the keyboard and hinge screws removed it is essentially as easy as *lifting* the lid out of the chassis. (After disconnecting the small display connectors, of course) @@ -34,13 +30,12 @@ Removing the entire top lid was easier than I initially thought it would be. The I love Alpine Linux. It's normally my [go-to distro](https://as.bt.ht) (paired with dwm) for most of my laptop devices. Unfortunately, I find tiling window managers a slight pain to use on larger, 4K displays. I also wanted this slabtop to "just work", instead of needing to fiddle around with WiFi, `xrandr`, audio etc. Not to mention that Debian is rock solid stable. Defaulting to the XFCE DE was a no-brainer as well since this device is somewhat *old*. -<figure> - <img src="/public/images/slabtop-2.webp" alt="The X201 slabtop connected to my 4K monitor"> - <figcaption>The X201 "slabtop" connected to my 27" 4K monitor via the ThinkPad UltraDock.</figcaption> -</figure> + + +*The X201 "slabtop" connected to my 27" 4K monitor via the ThinkPad UltraDock.* ## Closing Thoughts This slabtop gives me those old-school "Commodore64" vibes (or more recent devices like the Raspberry Pi 400). This setup certainly isn't for everyone but for my use case it's working well. Traveling with a machine like this might prove a little more challenging - although you could simply pair it with a smaller travel monitor (I'm sure the overall carrying weight would be similar to the standard X201). -If nothing else, it is good to keep this option in mind if you ever break your laptop's display and don't feel like spending the money to fix it. Just grab an external monitor you have laying around and make a slabtop! +If nothing else, it is good to keep this option in mind if you ever break your laptop's display and don't feel like spending the money to fix it. Just grab an external monitor you have laying around and make a slabtop!
\ No newline at end of file diff --git a/_posts/2022-11-22-slow.md b/posts/slow.md index 7bc8b12..761f25d 100644 --- a/_posts/2022-11-22-slow.md +++ b/posts/slow.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Embracing Slow Tech" -date: 2022-11-22 ---- +# Embracing Slow Tech +2022-11-22 I'm writing this post on my "new" X260 ThinkPad running [Garuda Linux](https://garudalinux.org/) through Wayland/Sway and it is going well so far. Setting things up was much easier than I initially expected. There were only a few minor tweaks I had to make, such as setting `vim` as the default EDITOR and installing a small collection of applications (Bitwarden, qutebrowser etc). @@ -59,8 +56,8 @@ It's completely fine to enjoy your own setup and device preferences - I'm not tr Thanks for reading. -[^1]: It helps that I have pretty much zero active accounts across most "popular" social media platforms. +## Refs -[^2]: Some of you readers might not have ever experienced the wonders of T9... - -[^3]: I understand that even smart phones can be classified as "computers". I am using this term in the classical sense. +1. It helps that I have pretty much zero active accounts across most "popular" social media platforms. +2. Some of you readers might not have ever experienced the wonders of T9... +3. I understand that even smart phones can be classified as "computers". I am using this term in the classical sense. diff --git a/_posts/2021-05-29-soma-terminal-css.md b/posts/soma-terminal-css.md index 572f1ce..201fe8c 100644 --- a/_posts/2021-05-29-soma-terminal-css.md +++ b/posts/soma-terminal-css.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "SOMA Inspired Terminal Display with CSS" -date: 2021-05-29 ---- +# SOMA Inspired Terminal Display with CSS +2021-05-29 A few years back I played (and loved) [SOMA](https://store.steampowered.com/app/282140/SOMA/), a first-person sci-fi horror-adventure game. The story was intriguing and the developers nailed the overall atmosphere of Pathos-II. Though both those aspects were great, what I found the most enjoyable were the interactive computers and displays found sprinkled throughout the world. diff --git a/_posts/2022-11-07-spec.md b/posts/spec.md index 0f9831a..254f572 100644 --- a/_posts/2022-11-07-spec.md +++ b/posts/spec.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Never Do Spec Work for Free" -date: 2022-11-07 ---- +# Never Do Spec Work for Free +2022-11-07 Your time is valuable and shouldn't be taken for granted. Let me say that again for the people in the back: *your time is valuable and shouldn't be taken for granted*. Time is the most precious commodity we have as human beings, so never waste that time on free "spec" work. It's never worth it. Ever. diff --git a/_posts/2022-11-14-srht2.md b/posts/srht2.md index 32d0568..ea4a5d6 100644 --- a/_posts/2022-11-14-srht2.md +++ b/posts/srht2.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Migrating from GitHub to sourcehut" -date: 2022-11-14 ---- +# Migrating from GitHub to sourcehut +2022-11-14 It has taken a little bit longer than I anticipated, but I have finally started to port over all my personal open-source projects to [sourcehut.org](https://sourcehut.org). I'll get into the *why* and *how* momentarily, but first let's take a look at all the impacted projects: @@ -48,5 +45,7 @@ Will I be deleting my GitHub profile outright? Maybe. I'm not sure. For now the For those interested, my sourcehut public profile is: [https://sr.ht/~bt/](https://sr.ht/~bt/). Maybe I'll see you on the other side ;) -[^1]: I keep an up-to-date document of all the open source software/communities I pay for on [my "Uses" page](/uses) for reference. -[^2]: Put your pitchforks and torches away - I'm aware that a web-facing UI exists on sourcehut as well! +## Refs + +1. I keep an up-to-date document of all the open source software/communities I pay for on [my "Uses" page](/uses) for reference. +2. Put your pitchforks and torches away - I'm aware that a web-facing UI exists on sourcehut as well! diff --git a/_posts/2018-02-12-stay-hungry.md b/posts/stay-hungry.md index 4db3c02..05f3c85 100644 --- a/_posts/2018-02-12-stay-hungry.md +++ b/posts/stay-hungry.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Stay Hungry" -date: 2018-02-12 ---- +# Stay Hungry +2018-02-12 It can feel daunting in this developer / designer landscape to keep yourself up-to-date with the latest and greatest technologies available. Which new framework should I invest the most time into? Will it even be maintained a couple years down the road? Is it just a fad? diff --git a/_posts/2019-10-06-sticky-elements.md b/posts/sticky-elements.md index e9fa80a..5292cbf 100644 --- a/_posts/2019-10-06-sticky-elements.md +++ b/posts/sticky-elements.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Stop Using Sticky Navigation on Mobile" -date: 2019-10-06 ---- +# Stop Using Sticky Navigation on Mobile +2019-10-06 Stop styling your web elements to be "sticky" on mobile. This creates a horrible experience for your users and also looks like trash from a UI perspective. Don't style your navigation (or any components for that matter) to be "sticky" on mobile. They create poor experiences for your users and take away valuable screen space. diff --git a/_posts/2019-04-15-still-using-jquery.md b/posts/still-using-jquery.md index cc07e85..0c26229 100644 --- a/_posts/2019-04-15-still-using-jquery.md +++ b/posts/still-using-jquery.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Yes, I Still Use jQuery" -date: 2019-04-15 ---- +# Yes, I Still Use jQuery +2019-04-15 I have seen a handful of condescending comments from front-end developers since the newest build of jQuery ([3.4.0](http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/)) released a couple of days ago. While I understand not all developers share the same work-style or are using the same tech-stack, dismissive comments towards any *useful* library comes off as entitled or elitist. diff --git a/_posts/2020-03-31-stripe-menu-css.md b/posts/stripe-menu-css.md index 2ad4867..4e2c2e3 100644 --- a/_posts/2020-03-31-stripe-menu-css.md +++ b/posts/stripe-menu-css.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Stripe Menu Dropdowns (CSS)" -date: 2020-03-31 ---- +# Stripe Menu Dropdowns (CSS) +2020-03-31 In a previous article I wrote, [Minimal CSS: Dropdown Menus](blog/minimal-css-menu), I showed how you could create a basic menu dropdown with only 121 bytes of CSS. While this demo is great for simple text-based menu dropdowns, it doesn't show just how complex (in a good way) you can make CSS-only menus. So, let's do just that. diff --git a/_posts/2023-04-13-sublime.md b/posts/sublime.md index c4c1f1e..ddf70f3 100644 --- a/_posts/2023-04-13-sublime.md +++ b/posts/sublime.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Launching Sublime Text with dmenu on Alpine Linux" -date: 2023-04-13 ---- +# Launching Sublime Text with dmenu on Alpine Linux +2023-04-13 Everyone seems to be running some version of VSCode as their main editor these days. But not me. I find VSCode to be too bloated for my needs - not to mention being built on top of electron instead of *native* code. I prefer running programs that don't try to devour all of my machine's available memory or spike my CPU. @@ -13,7 +10,7 @@ In case the title of this post didn't make this obvious, my editor of choice is The only minor downside is that it isn't *fully* open source. Personally, I think it is well worth buying a license directly from the developers to support their efforts. -If you haven't played around with it yet, I highly recommend giving it a try. At the very least, I guarantee you'll be impressed with the editor's performance and speed! [^1] +If you haven't played around with it yet, I highly recommend giving it a try. At the very least, I guarantee you'll be impressed with the editor's performance and speed! [<#1>] ## One Small Problem... @@ -23,33 +20,36 @@ You'll need to install flatpak, give your current user permission to install fla (The following snippets assume you are using `doas`. If you are using `sudo`, be sure to swap accordingly) - - apk add flatpak - adduser <YourUsername> flatpak - flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo - +``` +apk add flatpak +adduser <YourUsername> flatpak +flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo +``` Congrats. You now have setup `flatpak` on your machine! Next we install Sublime Text: - - flatpak install flathub com.sublimetext.three - +``` +flatpak install flathub com.sublimetext.three +``` You could stop now and simply open Sublime anytime by running the following command in your terminal: - - flatpak run com.sublimetext.three - +``` +flatpak run com.sublimetext.three +``` This works perfectly fine but I find it a little cumbersome. I would much rather open my programs directly through dmenu. Let's set that up. ## Creating System Links - - doas ln -s ~/.local/share/flatpak/exports/bin/com.sublimetext.three /usr/bin/sublimetext - +``` +doas ln -s ~/.local/share/flatpak/exports/bin/com.sublimetext.three /usr/bin/sublimetext +``` Now that those directories are linked, simply open dmenu and start typing `sublimetext`. Done and done. No more terminal commands needed to open Sublime! +- - - -[^1]: I am aware that using a terminal-based editor such as vim or emacs would be even *more* efficient. For my own personal use I find more classical "IDE" applications to work best for me. +<small> +1. <span id="1">I am aware that using a terminal-based editor such as vim or emacs would be even *more* efficient. For my own personal use I find more classical "IDE" applications to work best for me.</span> +</small>
\ No newline at end of file diff --git a/_posts/2022-12-23-suckless.md b/posts/suckless.md index b8e19d6..34ced38 100644 --- a/_posts/2022-12-23-suckless.md +++ b/posts/suckless.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "I Want to Suckless and You Can Too" -date: 2022-12-23 ---- +# I Want to Suckless and You Can Too +2022-12-23 ## The Desire to Suckless @@ -68,7 +65,7 @@ Everything *should* work out of the box, but in case it doesn't please [open a t We'll see how things go. So far I'm enjoying my time with a much simpler desktop and the "forced" push towards getting better with C is an added bonus. I still love Alpine, but Void is slowly winning me over... +## Refs -[^1]: I find this to be the best way to learn new things. Reading technical books are helpful, but concepts never stick with me unless I am forced to implement them. - -[^2]: This is a joke. Alpine is certainly not for everyone. There are many more "fully featured" distros available and everyone should use what they enjoy! Try not to take my blog posts so seriously... +1. I find this to be the best way to learn new things. Reading technical books are helpful, but concepts never stick with me unless I am forced to implement them. +2. This is a joke. Alpine is certainly not for everyone. There are many more "fully featured" distros available and everyone should use what they enjoy! Try not to take my blog posts so seriously...
\ No newline at end of file diff --git a/_posts/2019-02-15-super-mario-blocks-css.md b/posts/super-mario-blocks-css.md index f702c57..309b719 100644 --- a/_posts/2019-02-15-super-mario-blocks-css.md +++ b/posts/super-mario-blocks-css.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Super Mario Blocks in CSS" -date: 2019-02-15 ---- +# Super Mario Blocks in CSS +2019-02-15 Just because we can, let's make a quick demo on how to build interactive elements based off the original Mario punch blocks. diff --git a/_posts/2019-01-28-tabbed-content.md b/posts/tabbed-content.md index b6a18fd..b016b56 100644 --- a/_posts/2019-01-28-tabbed-content.md +++ b/posts/tabbed-content.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Tabbed Content Without JavaScript" -date: 2019-01-28 ---- +# Tabbed Content Without JavaScript +2019-01-28 Creating tabs is a fairly trivial and common practice in web design, but many times it requires JavaScript to properly implement. Fortunately it *is* possible to create tabbed content with only using CSS. @@ -28,7 +25,6 @@ The skeleton for this component is fairly basic - we just need the following str 3. Label linked to corresponding input 4. Inner content associated with each tab item ---- <!-- Simple main container for all elements --> <div class="tabs"> diff --git a/_posts/2019-06-11-tables.md b/posts/tables.md index b34abfc..787daed 100644 --- a/_posts/2019-06-11-tables.md +++ b/posts/tables.md @@ -1,19 +1,14 @@ ---- -layout: post -title: "Making Tables Responsive With Minimal CSS" -date: 2019-06-11 ---- +# Making Tables Responsive With Minimal CSS +2019-06-11 -<div class="update-box"> - <strong>Update (Oct 2019):</strong> <a href="https://twitter.com/aardrian">@aardrian</a> 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> -</div> +**Update (Oct 2019):** @aardrian wrote a previous post about how changing the `display` properties on tables can impact screen readers. I highly recommend his excellent article [Tables, CSS Display Properties, and ARIA](https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html) --- 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't do this - just use tables and some simple CSS. -My recent article, [Write HTML Like It's 1999](/html-like-1999), received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how `table` elements don't play nice with mobile devices or that it's not possible to have a useable layout on smaller screens. *This simply isn't true*. +My recent article, [Write HTML Like It's 1999](/posts/html-like-1999), received far more attention than I ever expected on HackerNews. With this attention came a few comments mentioning how `table` elements don't play nice with mobile devices or that it's not possible to have a useable layout on smaller screens. *This simply isn't true*. Included below are two separate demos showing how to optimize `table` 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 `div` elements to *look* like tables. diff --git a/_posts/2016-11-15-te.md b/posts/te.md index 2c2f3a8..1950c74 100644 --- a/_posts/2016-11-15-te.md +++ b/posts/te.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "The Wonders of Text Ellipsis" -date: 2016-11-15 ---- +# The Wonders of Text Ellipsis +2016-11-15 A common issue when working with constrained UI elements is text overflowing outside of it's parent or breaking into addition lines (thus breaking the layout). diff --git a/_posts/2019-05-22-text-align-justify.md b/posts/text-align-justify.md index 7390fff..e5ca05e 100644 --- a/_posts/2019-05-22-text-align-justify.md +++ b/posts/text-align-justify.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Text Align: Justify" -date: 2019-05-22 ---- +# Text Align: Justify +2019-05-22 The text-align property is fairly well known in the world of CSS, even among those just starting out with the language. Values such as `center`, `left` and `right` are used often with this property, but a more forgotten option is `justify`. diff --git a/_posts/2019-06-25-they-wont-wait.md b/posts/they-wont-wait.md index 84524b1..3129915 100644 --- a/_posts/2019-06-25-they-wont-wait.md +++ b/posts/they-wont-wait.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "They Won't Wait: A Warning for Slow Websites" -date: 2019-06-25 ---- +# They Won't Wait: A Warning for Slow Websites +2019-06-25 *Your website is probably slow*. I'm not trying to make you feel bad or dismiss all the hard work you've put into your project. Heck, performance might have been a core value of the design. But websites can always be faster. diff --git a/_posts/2021-12-17-use-text-not-icons.md b/posts/use-text-not-icons.md index ad73f0a..aa10832 100644 --- a/_posts/2021-12-17-use-text-not-icons.md +++ b/posts/use-text-not-icons.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Icons Should be Complementary - Text is Always Better" -date: 2021-12-17 ---- +# Icons Should be Complementary - Text is Always Better +2021-12-17 Designing[^1] software is a complex thing. A great deal of real-world testing and user feedback is needed to create the best solution to the problem you are trying to fix. Obvious requirements are to keep things simple, make it easy to understand by *looking* at it, and build it to be headache-resistant for future updates. All these things are easier said than done. This is the challenge of a designer's dat-to-day. @@ -51,8 +48,8 @@ I understand applications will have advanced or "pro" users that have full knowl As I stated above, try doing a quick design experiment by replacing all your existing iconography in your application with simple text. I assure you that at least you'll discover interesting design flaws in your system. -[^1]: By "design" I'm referring to visuals not programming or system engineering +## Refs -[^2]: Early software programs did save to an external floppy disk. My point stands that many digital file storage applications copied this iconography blindly. - -[^3]: Not to mention how rampant it is on plain ol' regular websites. If you're hiding five menu items behind a hamburger menu for "mobile users", you're doing it wrong. +1. By "design" I'm referring to visuals not programming or system engineering +2. Early software programs did save to an external floppy disk. My point stands that many digital file storage applications copied this iconography blindly. +3. Not to mention how rampant it is on plain ol' regular websites. If you're hiding five menu items behind a hamburger menu for "mobile users", you're doing it wrong. diff --git a/_posts/2019-06-04-user-select.md b/posts/user-select.md index 8b332ab..7564ea7 100644 --- a/_posts/2019-06-04-user-select.md +++ b/posts/user-select.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Using User-Select" -date: 2019-06-04 ---- +# Using User-Select +2019-06-04 Highlighting text in order to copy, cut or paste content is a staple action across the web. Now, what if I told you the ability to control what a user can select is configurable with a single CSS property? diff --git a/_posts/2023-06-05-vscode.md b/posts/vscode.md index 239a308..289d8ce 100644 --- a/_posts/2023-06-05-vscode.md +++ b/posts/vscode.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Running VSCode in Chromium on OpenBSD" -date: 2023-06-05 ---- +# Running VSCode in Chromium on OpenBSD +2023-06-05 VSCode and its many variations are not available on OpenBSD. This doesn't cause issue with many OpenBSD users, but those making the jump from Linux might miss access to such a popular editor. Lucky for us, there is a *hacky* workaround to solve this problem. @@ -17,20 +14,20 @@ Getting things to work seamlessly proved a little more challenging. I found the First we need to disable [unveil](https://man.openbsd.org/unveil.2) for Chromium. This will allow us to access our system files through [vscode.dev](https://vscode.dev) using the "Open folder..." or "Open file..." commands without issue: - - chrome --disable-unveil - +``` +chrome --disable-unveil +``` Everything should work pretty solid right out the box now - except it doesn't. Syntax highlighting does not work without enabling WASM/WebAssembly. Your experience might be different, but I had to include the following when launching Chromium from the terminal: - - ENABLE_WASM=1 chrome --enable-wasm - +``` +ENABLE_WASM=1 chrome --enable-wasm +``` Success! We can avoid typing out these complex commands everytime we want to launch our editor by setting up an `alias` (in my case via `.zshrc`): +``` +alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" +``` - alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" - - -That's it! Now I can just pop open VSCode on OpenBSD by simply running `vscode` in my terminal. Hopefully this can help others slowly transition over to OpenBSD - which you should do because it is amazing! +That's it! Now I can just pop open VSCode on OpenBSD by simply running `vscode` in my terminal. Hopefully this can help others slowly transition over to OpenBSD - which you should do because it is amazing!
\ No newline at end of file diff --git a/_posts/2023-03-14-webfonts.md b/posts/webfonts.md index 177432b..4f69c0d 100644 --- a/_posts/2023-03-14-webfonts.md +++ b/posts/webfonts.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Stop Using Custom Web Fonts" -date: 2023-03-14 ---- +# Stop Using Custom Web Fonts +2023-03-14 I recently read an excellent post by Manu Moreale titled [A rant on web font licenses](https://manuelmoreale.com/a-rant-on-web-font-licenses). I highly recommend you give it a read (it's relatively short) since Manu makes a solid argument against existing font licenses. After reading, I found myself thinking about it throughout the rest of the day. @@ -35,4 +32,4 @@ A lot of designers I've worked with or talked to in the past tend to be big supp It might be small in the grand scheme of things, but having an extra HTTP request (or more) for your custom fonts and requiring your users to consume more bandwidth on their end is not "eco". As designers we should cut the fat and reduce software bloat in the small areas that we're able to: the front end. -My hope is that even one designer reading this decides to rollout a web app or marketing page without dumping a bunch of custom fonts on their users. It's just the *nice* thing to do. +My hope is that even one designer reading this decides to rollout a web app or marketing page without dumping a bunch of custom fonts on their users. It's just the *nice* thing to do.
\ No newline at end of file diff --git a/_posts/2018-11-28-width-vs-flex-basis.md b/posts/width-vs-flex-basis.md index 260668d..534a42f 100644 --- a/_posts/2018-11-28-width-vs-flex-basis.md +++ b/posts/width-vs-flex-basis.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Width or Flex-Basis?" -date: 2018-11-28 ---- +# Width or Flex-Basis? +2018-11-28 Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let's breakdown how to solve this issue using both `inline-block` paired with `width` and `flex-basis`. diff --git a/_posts/2022-09-02-windows.md b/posts/windows.md index 654d3b7..ff5c44b 100644 --- a/_posts/2022-09-02-windows.md +++ b/posts/windows.md @@ -1,102 +1,52 @@ ---- -layout: post -title: "Setting Up Jekyll on Windows" -date: 2022-09-02 ---- - - - - -I've recently been playing around with using Windows 10 as my daily operating system. So far, it has been going fairly well. Nothing will probably ever feel as "optimized" as running a Linux-based system but it works well for my current needs. Getting a Jekyll development environment setup was a different story though... - - - -One of the first issues with using Windows 10 is the need to run a few of my open source projects that are built off Jekyll locally. This process initially seemed a like complex process to get things running smoothly but in the end was very straightforward. The main issue came from needing to bounce around through a handful of separate tutorials to get everything running smoothly. - - - -So, I thought I would make this quick write-up to help those in the same situation (or even for my future self the need arises). Let's get into it. - - - -## WSL - - - -The first step involves installing [WSL](https://docs.microsoft.com/en-us/windows/wsl/install) in order to run Linux alongside the main Windows OS. The documentation is well written and will get you up-and-running in no time. For quick reference, it essentially comes down to: - - - -1. Opening PowerShell or Command Prompt as an administrator - -2. Installing via the command: `wsl --install` - -3. Restarting your machine after the install completes - -4. Creating your UNIX username and password - - - -## Installing Ruby & Dependencies - - - -Once logged into your UNIX terminal session (with your created user) you can begin installing everything we need for Jekyll to work properly. The first step is to installing `rvm` and the [official project documentation](https://github.com/rvm/ubuntu_rvm) does a very good job of walking you through this. - - - -- Be sure dependencies as installed: `sudo apt-get install software-properties-common` - -- Add the PPA and install the package: - - - - - - sudo apt-add-repository -y ppa:rael-gc/rvm - sudo apt-get update - sudo apt-get install rvm - - - - - -- Add your existing user to the `rvm` group: `sudo usermod -a -G rvm $USER` - - - -You will need to close and restart your session to your Ubuntu system for these changes to take. After that, we can use `rvm` to install the latest version (at this time of writing) of ruby: - - - - - - rvm install 3.1.2 - - - - - -That's it! - - - -## Jekyll - Finally! - - - -The final step is to update our gems and install Jekyll: - - - - - - gem update - gem install jekyll bundler - - - - - -Once complete you can now run your Jekyll projects locally through WSL! Nothing ground-breaking but still pretty helpful for first-time users. And best of all, at least I have a good reference point in the future if I ever run into this issue again! - +# Setting Up Jekyll on Windows
+
+2022-09-02
+
+I've recently been playing around with using Windows 10 as my daily operating system. So far, it has been going fairly well. Nothing will probably ever feel as "optimized" as running a Linux-based system but it works well for my current needs. Getting a Jekyll development environment setup was a different story though...
+
+One of the first issues with using Windows 10 is the need to run a few of my open source projects that are built off Jekyll locally. This process initially seemed a like complex process to get things running smoothly but in the end was very straightforward. The main issue came from needing to bounce around through a handful of separate tutorials to get everything running smoothly.
+
+So, I thought I would make this quick write-up to help those in the same situation (or even for my future self the need arises). Let's get into it.
+
+## WSL
+
+The first step involves installing [WSL](https://docs.microsoft.com/en-us/windows/wsl/install) in order to run Linux alongside the main Windows OS. The documentation is well written and will get you up-and-running in no time. For quick reference, it essentially comes down to:
+
+1. Opening PowerShell or Command Prompt as an administrator
+2. Installing via the command: `wsl --install`
+3. Restarting your machine after the install completes
+4. Creating your UNIX username and password
+
+## Installing Ruby & Dependencies
+
+Once logged into your UNIX terminal session (with your created user) you can begin installing everything we need for Jekyll to work properly. The first step is to installing `rvm` and the [official project documentation](https://github.com/rvm/ubuntu_rvm) does a very good job of walking you through this.
+
+- Be sure dependencies as installed: `sudo apt-get install software-properties-common`
+- Add the PPA and install the package:
+
+
+ sudo apt-add-repository -y ppa:rael-gc/rvm
+ sudo apt-get update
+ sudo apt-get install rvm
+
+
+- Add your existing user to the `rvm` group: `sudo usermod -a -G rvm $USER`
+
+You will need to close and restart your session to your Ubuntu system for these changes to take. After that, we can use `rvm` to install the latest version (at this time of writing) of ruby:
+
+
+ rvm install 3.1.2
+
+
+That's it!
+
+## Jekyll - Finally!
+
+The final step is to update our gems and install Jekyll:
+
+
+ gem update
+ gem install jekyll bundler
+
+
+Once complete you can now run your Jekyll projects locally through WSL! Nothing ground-breaking but still pretty helpful for first-time users. And best of all, at least I have a good reference point in the future if I ever run into this issue again!
diff --git a/_posts/2020-05-05-wp-enqueue-for-beginners.md b/posts/wp-enqueue-for-beginners.md index bed8218..2d5667f 100644 --- a/_posts/2020-05-05-wp-enqueue-for-beginners.md +++ b/posts/wp-enqueue-for-beginners.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "WP Enqueue for Beginners" -date: 2020-05-05 ---- +# WP Enqueue for Beginners +2020-05-05 Throughout my career designing, developing and auditing WordPress themes, I've come across many that include their custom styles / scripts as static HTML elements inside their respective `header` and `footer` templates. This is perfectly _fine_, but there is a cleaner way to include these files. diff --git a/_posts/2023-04-02-x201.md b/posts/x201.md index 34219a2..49ac53d 100644 --- a/_posts/2023-04-02-x201.md +++ b/posts/x201.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "Bypassing the WiFi Hardware Switch on the Lenovo X201" -date: 2023-04-02 ---- +# Bypassing the WiFi Hardware Switch on the Lenovo X201 +2023-04-02 I recently received a ThinkPad X201 to start using as my daily driver. I purchased the X201 to replace my existing X260. Although some might look at this as a "downgrade" in terms of specs and hardware, I would have to disagree. @@ -54,4 +51,4 @@ Once it is on PIN20, place your card back into its port, rebuild you X201, pop i Best of all, you don't have to worry about accidentally toggling your WiFi toggle switch - it does nothing! Mine is actually set in the "OFF" position all the time now. -Enjoy less flaky WiFi. +Enjoy less flaky WiFi.
\ No newline at end of file diff --git a/_posts/2023-09-26-x220.md b/posts/x220.md index 71171d0..ef70da7 100644..100755 --- a/_posts/2023-09-26-x220.md +++ b/posts/x220.md @@ -1,9 +1,6 @@ ---- -layout: post -title: "The X220 ThinkPad is the Best Laptop in the World" -date: 2023-09-26 ---- +# The X220 ThinkPad is the Best Laptop in the World +2023-09-26 The X220 ThinkPad is the greatest laptop ever made and you're wrong if you think otherwise. No laptop hardware has since surpassed the nearly perfect build of the X220. New devices continue to get thinner and more fragile. Useful ports are constantly discarded for the sake of "design". Functionality is no longer important to manufacturers. Repairability is purposefully removed to prevent users from truly "owing" their hardware. @@ -35,10 +32,7 @@ Overall, this laptop is a device you can snatch up off your desk, whip into your ## Ports -<figure> - <img src="/public/images/ports-everywhere.jpg" alt="Buzz Lightyear and Woody meme: 'Ports, Ports Everywhere'"> - <figcaption>Ports. Ports Everywhere.</figcaption> -</figure> + I don't think I need to explain how valuable it is to have functional ports on a laptop. Needing to carrying around a bunch of dongles for ports that should already be *on the device* just seems silly. @@ -77,10 +71,9 @@ The ability to completely disassemble and replace almost everything on the X220 Best of all, Lenovo provides a very detailed [hardware maintenance manual](https://download.lenovo.com/pccbbs/mobiles_pdf/0a60739_01.pdf) to help guide you through the entire process. -<figure> - <img src="/public/images/x220-pieces.jpeg" alt="My disassembled X220 laptop"> - <figcaption>My disassembled X220 when I was reapplying the CPU thermal paste.</figcaption> -</figure> +My disassembled X220 when I was reapplying the CPU thermal paste: + + ## Bonus Round: Price diff --git a/projects.md b/projects.md deleted file mode 100644 index f7f88cc..0000000 --- a/projects.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: page -title: Projects -permalink: /projects/ ---- - -This page a growing collection of active (and not-so-active) projects I am working on. - -All my open source projects are hosted through git on both: [sourcehut.org](https://sr.ht/~bt/) and [git.btxx.org](https://git.btxx.org) - -## Active Projects -* [barf](https://barf.btxx.org): Minimal blog engine in a tiny shell script -* [jsfree](https://jsfree.org): Collection of web services that work without JavaScript -* [ssgit](https://git.btxx.org/ssgit/about): Static site git page generator -* [Vanilla CSS](https://vanillacss.com): A minimal baseline stylesheet for any web project -* [Web Audit](https://audit.btxx.org): Detailed checklist audit for developing websites -* [Normform](https://normform.netlify.app): Minimal CSS form plugin (6KB) -* [23 Tales](https://23tales.netlify.app): Online collection of works by Beatrix Potter -* [Shinobi](https://git.btxx.org/shinobi/about): Text-based, RSS focused blogging "system" -* [pblog](https://git.btxx.org/pblog/about): Pandoc static blog generator -* [Light Speed](https://git.btxx.org/lightspeed/about): Jekyll theme with a perfect Lighthouse score - -## Clubs -* [1MB Club](https://1mb.club): A collection of web pages weighing less than 1 megabyte -* [1kB Club](https://1kb.club): A collection of web pages weighing less than 1 kilobyte -* [XHTML Club](https://xhtml.club) A collection of HTML-focused websites - -## Suckless Installers / Setups -* [Open Suck](https://git.btxx.org/open-suck/about): OpenBSD desktop based on the suckless philosophy -* [Alpine Suck](https://git.btxx.org/alpine-suck/about): Alpine Linux desktop based on the suckless philosophy - -## Experiments -* [Blog Anonymously](https://anon.btxx.org): A basic starting point for those wishing to blog privately -* [Better Search Results](https://search.btxx.org): Rethinking the UX flow of modern search engines diff --git a/public/images/Screenshot_2024-01-15_at_10.00.31__8239__AM.png b/public/images/Screenshot_2024-01-15_at_10.00.31__8239__AM.png Binary files differdeleted file mode 100644 index a67a474..0000000 --- a/public/images/Screenshot_2024-01-15_at_10.00.31__8239__AM.png +++ /dev/null diff --git a/public/images/Screenshot_2024-03-20_at_10.49.01__8239__AM.png b/public/images/Screenshot_2024-03-20_at_10.49.01__8239__AM.png Binary files differdeleted file mode 100644 index 881cb67..0000000 --- a/public/images/Screenshot_2024-03-20_at_10.49.01__8239__AM.png +++ /dev/null diff --git a/public/images/open-suck-75.png b/public/images/open-suck-75.png Binary files differnew file mode 100644 index 0000000..1ed67e0 --- /dev/null +++ b/public/images/open-suck-75.png diff --git a/public/images/pizza.svg b/public/images/pizza.svg deleted file mode 100644 index 355130c..0000000 --- a/public/images/pizza.svg +++ /dev/null @@ -1,30 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="588" height="494" viewBox="0, 0, 588, 494"> - <g id="Layer_1"> - <path d="M0,325.849 L295.893,260.401 L516.989,342.899 L229.894,435.296 L0,325.849" fill="#746961"/> - <path d="M295.893,260.401 L295.893,288.451 L0,364.347 L0,325.849 L295.893,260.401" fill="#90847C"/> - <path d="M295.893,288.451 L516.989,381.399 L516.989,342.899 L295.893,260.401 L295.893,288.451" fill="#ACA099"/> - <path d="M337.692,22.256 L295.893,260.401 L516.989,342.899 L587.386,29.405 L337.692,22.256" fill="#D1C6BD"/> - <path d="M587.386,29.405 L553.292,39.305 L491.142,310.449 L516.989,342.899 L587.386,29.405" fill="#ACA099"/> - <path d="M337.692,22.256 L328.344,1.356 L556.591,5.206 L587.386,29.405 L337.692,22.256" fill="#90847C"/> - <path d="M337.692,22.256 L309.646,31.055 L269.75,239.189 L295.893,260.401 L337.692,22.256" fill="#ACA099"/> - <path d="M261.794,291.397 C361.729,290.091 442.741,318.828 442.741,355.582 C442.741,392.334 361.729,423.188 261.794,424.494 C161.861,425.798 80.848,397.064 80.848,360.309 C80.848,323.557 161.861,292.704 261.794,291.397" fill="#F1BB39"/> - <path d="M0,325.849 L0,364.347 L229.894,492.835 L229.894,435.296 L0,325.849" fill="#ACA099"/> - <path d="M516.989,342.899 L516.989,381.399 L229.894,492.835 L229.894,435.296 L516.989,342.899" fill="#90847C"/> - <path d="M261.794,299.479 C349.583,298.524 420.749,319.53 420.749,346.395 C420.749,373.26 349.583,395.814 261.794,396.767 C174.006,397.723 102.839,376.717 102.839,349.851 C102.839,322.986 174.006,300.433 261.794,299.479" fill="#F3D27E"/> - <path d="M420.095,350.803 C412.825,375.684 344.733,395.866 261.794,396.767 C178.854,397.669 110.763,378.969 103.492,354.245 C110.76,329.362 178.852,309.18 261.794,308.279 C344.735,307.377 412.828,326.079 420.095,350.803" fill="#FBE29E"/> - <path d="M300.992,366.276 C318.686,366.276 333.03,371.14 333.03,377.137 C333.03,383.137 318.686,388.002 300.992,388.002 C283.298,388.002 268.955,383.137 268.955,377.137 C268.955,371.14 283.298,366.276 300.992,366.276 z M379.639,341.526 C393.538,341.526 404.802,346.328 404.802,352.252 C404.802,358.174 393.538,362.976 379.639,362.976 C365.743,362.976 354.478,358.174 354.478,352.252 C354.478,346.328 365.743,341.526 379.639,341.526 z M299.617,319.252 C314.121,319.252 325.877,323.439 325.877,328.602 C325.877,333.765 314.121,337.951 299.617,337.951 C285.114,337.951 273.355,333.765 273.355,328.602 C273.355,323.439 285.114,319.252 299.617,319.252 z M223.856,317.052 C239.651,317.052 252.456,320.931 252.456,325.715 C252.456,330.498 239.651,334.377 223.856,334.377 C208.061,334.377 195.257,330.498 195.257,325.715 C195.257,320.931 208.061,317.052 223.856,317.052 z M155.794,344.002 C169.54,344.002 180.682,348.373 180.682,353.764 C180.682,359.156 169.54,363.526 155.794,363.526 C142.05,363.526 130.908,359.156 130.908,353.764 C130.908,348.373 142.05,344.002 155.794,344.002 z M231.967,350.327 C247.535,350.327 260.155,354.39 260.155,359.402 C260.155,364.412 247.535,368.476 231.967,368.476 C216.401,368.476 203.782,364.412 203.782,359.402 C203.782,354.39 216.401,350.327 231.967,350.327" fill="#B9372B"/> - <path d="M308.967,346.891 C302.931,346.891 298.036,348.43 298.036,350.329 C298.036,352.227 302.931,353.766 308.967,353.766 C315.004,353.766 319.899,352.227 319.899,350.329 C319.899,348.43 315.004,346.891 308.967,346.891 z M308.967,345.103 C317.092,345.103 323.679,347.443 323.679,350.329 C323.679,353.214 317.092,355.553 308.967,355.553 C300.843,355.553 294.254,353.214 294.254,350.329 C294.254,347.443 300.843,345.103 308.967,345.103" fill="#171716"/> - <path d="M348.5,328.559 C342.462,328.559 337.568,330.098 337.568,331.997 C337.568,333.895 342.462,335.434 348.5,335.434 C354.539,335.434 359.431,333.895 359.431,331.997 C359.431,330.098 354.539,328.559 348.5,328.559 z M348.5,326.771 C356.626,326.771 363.212,329.111 363.212,331.997 C363.212,334.882 356.626,337.221 348.5,337.221 C340.375,337.221 333.789,334.882 333.789,331.997 C333.789,329.111 340.375,326.771 348.5,326.771" fill="#171716"/> - <path d="M195.957,342.341 C189.918,342.341 185.025,343.879 185.025,345.778 C185.025,347.678 189.918,349.216 195.957,349.216 C201.994,349.216 206.888,347.678 206.888,345.778 C206.888,343.879 201.994,342.341 195.957,342.341 z M195.957,340.554 C204.082,340.554 210.668,342.893 210.668,345.778 C210.668,348.665 204.082,351.003 195.957,351.003 C187.831,351.003 181.245,348.665 181.245,345.778 C181.245,342.893 187.831,340.554 195.957,340.554" fill="#171716"/> - <path d="M190.425,373.646 C184.387,373.646 179.494,375.186 179.494,377.084 C179.494,378.982 184.387,380.521 190.425,380.521 C196.462,380.521 201.357,378.982 201.357,377.084 C201.357,375.186 196.462,373.646 190.425,373.646 z M190.425,371.86 C198.549,371.86 205.137,374.198 205.137,377.084 C205.137,379.97 198.549,382.308 190.425,382.308 C182.299,382.308 175.713,379.97 175.713,377.084 C175.713,374.198 182.299,371.86 190.425,371.86" fill="#171716"/> - <path d="M243.069,380.776 C237.031,380.776 232.136,382.313 232.136,384.213 C232.136,386.111 237.031,387.65 243.069,387.65 C249.106,387.65 254,386.111 254,384.213 C254,382.313 249.106,380.776 243.069,380.776 z M243.069,378.987 C251.193,378.987 257.781,381.327 257.781,384.213 C257.781,387.099 251.193,389.437 243.069,389.437 C234.943,389.437 228.357,387.099 228.357,384.213 C228.357,381.327 234.943,378.987 243.069,378.987" fill="#171716"/> - <path d="M355.235,368.272 C349.196,368.272 344.303,369.812 344.303,371.71 C344.303,373.609 349.196,375.147 355.235,375.147 C361.272,375.147 366.167,373.609 366.167,371.71 C366.167,369.812 361.272,368.272 355.235,368.272 z M355.235,366.485 C363.36,366.485 369.946,368.824 369.946,371.71 C369.946,374.595 363.36,376.933 355.235,376.933 C347.109,376.933 340.522,374.595 340.522,371.71 C340.522,368.824 347.109,366.485 355.235,366.485" fill="#171716"/> - <path d="M237.557,335.687 C245.355,333.885 254.637,333.763 263.002,335.751 C271.37,337.737 277.046,341.412 279.18,345.572 C271.382,347.374 262.1,347.496 253.735,345.508 C245.368,343.522 239.692,339.848 237.557,335.687" fill="#9FB93B"/> - <path d="M315.105,345.586 C322.904,343.786 332.184,343.664 340.551,345.65 C348.917,347.636 354.594,351.311 356.728,355.472 C348.931,357.273 339.649,357.395 331.283,355.409 C322.917,353.421 317.241,349.748 315.105,345.586" fill="#9FB93B"/> - <path d="M132.234,370.341 C140.033,368.541 149.314,368.419 157.681,370.406 C166.047,372.393 171.723,376.067 173.858,380.228 C166.06,382.029 156.778,382.151 148.412,380.164 C140.045,378.176 134.369,374.502 132.234,370.341" fill="#9FB93B"/> - <path d="M191.458,327.993 C183.66,326.191 174.378,326.07 166.011,328.057 C157.645,330.044 151.969,333.717 149.834,337.877 C157.632,339.679 166.915,339.801 175.281,337.814 C183.647,335.828 189.323,332.153 191.458,327.993" fill="#9FB93B"/> - <path d="M298.706,360.168 C290.907,358.366 281.625,358.245 273.259,360.231 C264.893,362.218 259.217,365.891 257.083,370.051 C264.88,371.854 274.162,371.974 282.528,369.989 C290.896,368.002 296.572,364.328 298.706,360.168" fill="#9FB93B"/> - </g> -</svg>
\ No newline at end of file diff --git a/public/images/safari-full-address.png b/public/images/safari-full-address.png Binary files differdeleted file mode 100644 index a67a474..0000000 --- a/public/images/safari-full-address.png +++ /dev/null diff --git a/public/images/safari-settings-custom-css.png b/public/images/safari-settings-custom-css.png Binary files differdeleted file mode 100644 index 28b20b9..0000000 --- a/public/images/safari-settings-custom-css.png +++ /dev/null diff --git a/style.css b/style.css new file mode 100644 index 0000000..b3102fa --- /dev/null +++ b/style.css @@ -0,0 +1,99 @@ +* { + box-sizing: border-box; +} +body { + background-color: #fffaf7; + font-family: system-ui, "Helvetica Neue", "Lucida Grande", sans-serif; + line-height: 1.55; + margin: 1rem auto; + max-width: 60ch; + padding: 10px; +} +h1,h2,h3,h4,h5,h6 { + line-height: 1.2; +} +h2,h3,h4,h5,h6 { + border-bottom: 1px solid; + margin: 3rem 0 0; + padding-bottom: 0.5rem; +} +a,a:visited { + color: darkred; +} +a:hover,a:focus { + background: yellow; + color: black; +} +figcaption { + font-size: 12px; +} +hr { + background: grey; + border: 0; + height: 1px; + margin: 2rem 0; +} +img { + height: auto; + max-width: 100%; + width: auto; +} +code { + background-color: white; + border: 1px solid; + font-size: 90%; + padding: 0.1rem 0.3rem; + tab-size: 4; +} +pre { + background-color: white; + border: 1px solid; +} +pre code { + border: 0; + display: block; + overflow-x: auto; + padding: 0.3rem 0.6rem; +} +table { + border-collapse: collapse; + margin: 2rem 0; + display: block; + overflow-x: auto; + white-space: nowrap; + text-align: left; + width: 100%; +} +tbody { + display: table; + min-width: 500px; + width: 100%; +} +tr { + border-bottom: 1px solid lightgrey; +} +td:last-of-type,th:last-of-type { + text-align: right; +} +.post-list { + list-style: none; + margin: 1rem 0 0; + padding: 0; +} +.post-list li { + align-items: center; + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + margin: 0 0 10px; +} +.post-list li small { font-variant-numeric: tabular-nums; } + +@media(max-width:650px) { + .post-list li { + align-items: flex-start; + flex-direction: column; + justify-content: baseline; + margin: 0 0 15px; + } +} diff --git a/stylesheets/main.css b/stylesheets/main.css deleted file mode 100644 index be01e55..0000000 --- a/stylesheets/main.css +++ /dev/null @@ -1,37 +0,0 @@ -/* General */ - -* { box-sizing: border-box; } - -body { - font-family: system-ui, sans-serif; - margin: 0; - padding: 12px; -} - -h1 { font-size: 2.4rem; margin-top: 0; padding: 0; } -h2,h3,h4,h5,h6{ margin: 1.4rem 0 0; } -img { height: auto; max-width: 100%; } -pre.highlight { border: 1px solid; box-shadow: 0 10px 6px -6px rgba(0,0,0, 0.11); overflow: auto; padding: 8px; } -blockquote { background: rgba(0,0,0,0.05); border-left: 4px solid; margin: 2rem 0 2rem 1rem; padding: 8px 8px 8px 16px; } -blockquote p { margin: 0; } -table { border-collapse: collapse; margin: 1rem 0; text-align: left; width: 100%; } -table tr { border-bottom: 1px solid; } -table td, table th { padding: 4px; } -figcaption { font-style: italic; } -.post-date { display: block; margin-top: 5px; } -.post-date, .footnotes { font-size: 85%; } -hr { border-bottom: 0; border-top: 1px solid; margin: 2rem 0; padding: 0; } -p { line-height: 1.4; } - -.wrapper { - margin: 0 auto; - max-width: 800px; -} - -header { margin: 1rem 0 2rem; } -footer { margin: 4rem 0 2rem; } -footer ul { list-style: none; padding: 0; } -footer ul li { - display: inline-block; - margin-right: 6px; -} diff --git a/stylesheets/pygments.css b/stylesheets/pygments.css deleted file mode 100644 index 87eccda..0000000 --- a/stylesheets/pygments.css +++ /dev/null @@ -1,143 +0,0 @@ -/* - * GitHub style for Pygments syntax highlighter, for use with Jekyll - * Courtesy of GitHub.com - */ - -.highlight .c { color: #999988; font-style: italic; } -.highlight .err { color: #a61717; background-color: #e3d2d2; } -.highlight .k { font-weight: bold; } -.highlight .o { font-weight: bold; } -.highlight .cm { color: #999988; font-style: italic; } -.highlight .cp { color: #999999; font-weight: bold; } -.highlight .c1 { color: #999988; font-style: italic; } -.highlight .cs { color: #999999; font-weight: bold; font-style: italic; } -.highlight .gd { color: #000000; background-color: #ffdddd; } -.highlight .gd .x { color: #000000; background-color: #ffaaaa; } -.highlight .ge { font-style: italic; } -.highlight .gr { color: #aa0000; } -.highlight .gh { color: #999999; } -.highlight .gi { color: #000000; background-color: #ddffdd; } -.highlight .gi .x { color: #000000; background-color: #aaffaa; } -.highlight .go { color: #888888; } -.highlight .gp { color: #555555; } -.highlight .gs { font-weight: bold; } -.highlight .gu { color: #800080; font-weight: bold; } -.highlight .gt { color: #aa0000; } -.highlight .kc { font-weight: bold; } -.highlight .kd { font-weight: bold; } -.highlight .kn { font-weight: bold; } -.highlight .kp { font-weight: bold; } -.highlight .kr { font-weight: bold; } -.highlight .kt { color: #445588; font-weight: bold; } -.highlight .m { color: #009999; } -.highlight .s { color: #dd1144; } -.highlight .n { color: #333333; } -.highlight .na { color: teal; } -.highlight .nb { color: #0086b3; } -.highlight .nc { color: #445588; font-weight: bold; } -.highlight .no { color: teal; } -.highlight .ni { color: purple; } -.highlight .ne { color: #990000; font-weight: bold; } -.highlight .nf { color: #990000; font-weight: bold; } -.highlight .nn { color: #555555; } -.highlight .nt { color: navy; } -.highlight .nv { color: teal; } -.highlight .ow { font-weight: bold; } -.highlight .w { color: #bbbbbb; } -.highlight .mf { color: #009999; } -.highlight .mh { color: #009999; } -.highlight .mi { color: #009999; } -.highlight .mo { color: #009999; } -.highlight .sb { color: #dd1144; } -.highlight .sc { color: #dd1144; } -.highlight .sd { color: #dd1144; } -.highlight .s2 { color: #dd1144; } -.highlight .se { color: #dd1144; } -.highlight .sh { color: #dd1144; } -.highlight .si { color: #dd1144; } -.highlight .sx { color: #dd1144; } -.highlight .sr { color: #009926; } -.highlight .s1 { color: #dd1144; } -.highlight .ss { color: #990073; } -.highlight .bp { color: #999999; } -.highlight .vc { color: teal; } -.highlight .vg { color: teal; } -.highlight .vi { color: teal; } -.highlight .il { color: #009999; } -.highlight .gc { color: #999; background-color: #EAF2F5; } - -@supports (color-scheme: dark light) { - @media screen and (prefers-color-scheme: dark) { - .highlight .hll { background-color: #49483e } - .highlight { background: #272822; color: #f8f8f2 } - .highlight .c { color: #75715e } /* Comment */ - .highlight .err { color: #960050; background-color: #1e0010 } /* Error */ - .highlight .k { color: #66d9ef } /* Keyword */ - .highlight .l { color: #ae81ff } /* Literal */ - .highlight .n { color: #f8f8f2 } /* Name */ - .highlight .o { color: #f92672 } /* Operator */ - .highlight .p { color: #f8f8f2 } /* Punctuation */ - .highlight .ch { color: #75715e } /* Comment.Hashbang */ - .highlight .cm { color: #75715e } /* Comment.Multiline */ - .highlight .cp { color: #75715e } /* Comment.Preproc */ - .highlight .cpf { color: #75715e } /* Comment.PreprocFile */ - .highlight .c1 { color: #75715e } /* Comment.Single */ - .highlight .cs { color: #75715e } /* Comment.Special */ - .highlight .gd { color: #f92672 } /* Generic.Deleted */ - .highlight .ge { font-style: italic } /* Generic.Emph */ - .highlight .gi { color: #a6e22e } /* Generic.Inserted */ - .highlight .gs { font-weight: bold } /* Generic.Strong */ - .highlight .gu { color: #75715e } /* Generic.Subheading */ - .highlight .kc { color: #66d9ef } /* Keyword.Constant */ - .highlight .kd { color: #66d9ef } /* Keyword.Declaration */ - .highlight .kn { color: #f92672 } /* Keyword.Namespace */ - .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ - .highlight .kr { color: #66d9ef } /* Keyword.Reserved */ - .highlight .kt { color: #66d9ef } /* Keyword.Type */ - .highlight .ld { color: #e6db74 } /* Literal.Date */ - .highlight .m { color: #ae81ff } /* Literal.Number */ - .highlight .s { color: #e6db74 } /* Literal.String */ - .highlight .na { color: #a6e22e } /* Name.Attribute */ - .highlight .nb { color: #f8f8f2 } /* Name.Builtin */ - .highlight .nc { color: #a6e22e } /* Name.Class */ - .highlight .no { color: #66d9ef } /* Name.Constant */ - .highlight .nd { color: #a6e22e } /* Name.Decorator */ - .highlight .ni { color: #f8f8f2 } /* Name.Entity */ - .highlight .ne { color: #a6e22e } /* Name.Exception */ - .highlight .nf { color: #a6e22e } /* Name.Function */ - .highlight .nl { color: #f8f8f2 } /* Name.Label */ - .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ - .highlight .nx { color: #a6e22e } /* Name.Other */ - .highlight .py { color: #f8f8f2 } /* Name.Property */ - .highlight .nt { color: #f92672 } /* Name.Tag */ - .highlight .nv { color: #f8f8f2 } /* Name.Variable */ - .highlight .ow { color: #f92672 } /* Operator.Word */ - .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ - .highlight .mb { color: #ae81ff } /* Literal.Number.Bin */ - .highlight .mf { color: #ae81ff } /* Literal.Number.Float */ - .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ - .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ - .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ - .highlight .sa { color: #e6db74 } /* Literal.String.Affix */ - .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ - .highlight .sc { color: #e6db74 } /* Literal.String.Char */ - .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */ - .highlight .sd { color: #e6db74 } /* Literal.String.Doc */ - .highlight .s2 { color: #e6db74 } /* Literal.String.Double */ - .highlight .se { color: #ae81ff } /* Literal.String.Escape */ - .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ - .highlight .si { color: #e6db74 } /* Literal.String.Interpol */ - .highlight .sx { color: #e6db74 } /* Literal.String.Other */ - .highlight .sr { color: #e6db74 } /* Literal.String.Regex */ - .highlight .s1 { color: #e6db74 } /* Literal.String.Single */ - .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ - .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ - .highlight .fm { color: #a6e22e } /* Name.Function.Magic */ - .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ - .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ - .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ - .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */ - .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ - } -} - diff --git a/wiki/alpine-linux.md b/wiki/alpine-linux.md deleted file mode 100644 index 53d2e4e..0000000 --- a/wiki/alpine-linux.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -layout: page -title: Alpine Linux -permalink: /wiki/alpine-linux ---- - -This page contains a helpful collection of configuration and application setups for Alpine Linux. - -## Run Mullvad on Alpine Linux (Wireguard) - - - # Install wireguard - apk add wireguard-tools - - -Login into Mullvad and download the proper wireguard configuration files(s). After downloaded, place in the proper directory: - - - doas cp <MULLVAD_FILENAME>.conf /etc/wireguard/" - - -Then setup an aliases for easier up/down states: - - - alias vpnup="doas wg-quick up /etc/wireguard/<MULLVAD_FILENAME>.conf" - alias vpndown="doas wg-quick down /etc/wireguard/<MULLVAD_FILENAME>.conf" - -## Alpine Linux `mini_racer` Tweaks - -Gem lockfile: - - - PLATFORMS - ruby - x86_64-linux-musl - - mini_racer (0.6.3) - <remove child dependency> - - -then run: `bundle update mini_racer` diff --git a/wiki/cgit.md b/wiki/cgit.md deleted file mode 100644 index ebf8845..0000000 --- a/wiki/cgit.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -layout: page -title: cgit -permalink: /wiki/cgit ---- - -This page contains a comprehensive guide to setting up cgit on NearlyFreeSpeech. It is assumed that you already have an account with NFS and also have access to a "site" online. - -Most of the following has been lifted from [NearlyFreeSpeech cgit application walkthrough](https://members.nearlyfreespeech.net/wiki/Applications/Cgit) but has been tweaked and updated. - -You can see a **live version** [here](https://git.btxx.org). - -## Building cgit - -The following assumes that you wish to have cgit running at the top-level of your chosen domain (ie. git.example.com) - -SSH into your account then download and unpack the latest release: - - git clone git://git.zx2c4.com/cgit cgit-src - cd cgit-src - -Create a cgit.conf file with desired locations: - - CGIT_SCRIPT_PATH = /home/public - CGIT_DATA_PATH = $(CGIT_SCRIPT_PATH) - CGIT_CONFIG = $(CGIT_SCRIPT_PATH)/cgitrc - CACHE_ROOT = $(CGIT_SCRIPT_PATH)/cgitcache - prefix = $(CGIT_SCRIPT_PATH)/local - -Get the git sources (needed to build libgit): - - git submodule init - git submodule update - -Build and install it: - - gmake install - -## Configuration - -Make a text file named `cgitrc` where you specified CGIT_CONFIG and add the following (these are some personal defaults to make things cleaner): - - logo=/cgit.png - root-title=main root title - root-desc=description for your git server - root-readme=/home/public/about.md - virtual-root=/ - - about-filter=/home/public/cgit-src/filters/about-formatting.sh - readme=:README.md - readme=:README - - include=/home/protected/cgitrepos - -Then in the specified file (`cgitrepos`), place your repos, ex: - - repo.url=MyRepo - repo.path=/home/public/MyRepo.git - repo.desc=This is my git repository - -**And you should be good to go!** diff --git a/wiki/dotfiles.md b/wiki/dotfiles.md deleted file mode 100644 index dfbcb89..0000000 --- a/wiki/dotfiles.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -layout: page -title: Dotfiles -permalink: /wiki/dotfiles ---- - -This page contains my (mostly) up-to-date dotfiles for a wide range of use cases. - -## .vimrc - - - " Don't try to be vi compatible - set nocompatible - - " Helps force plugins to load correctly when it is turned back on below - filetype off - - " TODO: Load plugins here (pathogen or vundle) - - " Turn on syntax highlighting - syntax on - - " For plugins to load correctly - filetype plugin indent on - - " TODO: Pick a leader key - " let mapleader = "," - - " Security - set modelines=0 - - " Show line numbers - set number - - " Show file stats - set ruler - - " Blink cursor on error instead of beeping (grr) - set visualbell - - " Encoding - set encoding=utf-8 - - " Whitespace - set wrap - set textwidth=79 - set formatoptions=tcqrn1 - set tabstop=2 - set shiftwidth=2 - set softtabstop=2 - set expandtab - set noshiftround - - " Cursor motion - set scrolloff=3 - set backspace=indent,eol,start - set matchpairs+=<:> " use % to jump between pairs - runtime! macros/matchit.vim - - " Move up/down editor lines - nnoremap j gj - nnoremap k gk - - " Allow hidden buffers - set hidden - - " Rendering - set ttyfast - - " Status bar - set laststatus=2 - - " Last line - set showmode - set showcmd - - " Searching - nnoremap / /\v - vnoremap / /\v - set hlsearch - set incsearch - set ignorecase - set smartcase - set showmatch - map <leader><space> :let @/=''<cr> " clear search - - " Remap help key. - inoremap <F1> <ESC>:set invfullscreen<CR>a - nnoremap <F1> :set invfullscreen<CR> - vnoremap <F1> :set invfullscreen<CR> - - " Textmate holdouts - - " Formatting - map <leader>q gqip - - " Visualize tabs and newlines - set listchars=tab:▸\ ,eol:¬ - " Uncomment this to enable by default: - " set list " To enable by default - " Or use your leader key + l to toggle on/off - map <leader>l :set list!<CR> " Toggle tabs and EOL - - " Color scheme (terminal) - set t_Co=256 - set background=dark - let g:solarized_termcolors=256 - let g:solarized_termtrans=1 - " put https://raw.github.com/altercation/vim-colors-solarized/master/colors/solarized.vim - " in ~/.vim/colors/ and uncomment: - " colorscheme solarized - -## .zshrc extras / aliases - - export EDITOR="/bin/vim" - - alias suck="sudo rm -rf config.h ; sudo make install" - alias fixmonitor="xrandr --auto --output eDP1 --mode 1366x768 --below DP2-2" - alias alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil" - export PATH="/usr/local/bin:$PATH" - export PATH="$PATH:/opt/local/bin" - export PATH="$PATH:/mongodb/bin" - -## mimeapps.list - -Place this file under `/usr/share/applications/mimeapps.list` - - [Default Applications] - x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop - x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop - x-scheme-handler/ftp=org.qutebrowser.qutebrowser.desktop - x-scheme-handler/chrome=org.qutebrowser.qutebrowser.desktop - text/html=org.qutebrowser.qutebrowser.desktop - application/x-extension-htm=org.qutebrowser.qutebrowser.desktop - application/x-extension-html=org.qutebrowser.qutebrowser.desktop - application/x-extension-shtml=org.qutebrowser.qutebrowser.desktop - application/xhtml+xml=org.qutebrowser.qutebrowser.desktop - application/x-extension-xhtml=org.qutebrowser.qutebrowser.desktop - application/x-extension-xht=org.qutebrowser.qutebrowser.desktop - image/jpeg=feh - image/png=feh - image/webp=feh diff --git a/wiki/ikiwiki_NearlyFreeSpeech.md b/wiki/ikiwiki_NearlyFreeSpeech.md deleted file mode 100644 index e37f575..0000000 --- a/wiki/ikiwiki_NearlyFreeSpeech.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -layout: page -title: ikiwiki on NearlyFreeSpeech -permalink: /wiki/ikiwiki/nearlyfreespeech ---- - -This page documents step-by-step how to properly setup and customize *ikiwiki* on [NearlyFreeSpeech](https://nearlyfreespeech.net). A good deal of the documentation here has been lifted from [ikiwiki.info/tips/nearlyfreespeech/](https://ikiwiki.info/tips/nearlyfreespeech/) but altered and updated. - -## Register for an account and set up a site - -After you get an account, create a site using their web interface. - -Mine is named `ikiwiki-test` and I used their DNS instead of getting my own, resulting in http://ikiwiki-test.nfshost.com/. (Not being kept up anymore.) - -They gave me 2 cents free funding for signing up, which is enough to pay for 10 megabytes of bandwidth, or about a thousand typical page views, at their current rates. Plenty to decide if this is right for you. If it is, $5 might be a good starting amount of money to put in your account. - -## ssh in and configure the environment - -ssh into their server using the ssh hostname and username displayed on the site's information page. Example: - - ssh username_ikiwiki-test@ssh.phx.nearlyfreespeech.net - -Now set up `.profile` to run programs from `~/bin`. - - cd $HOME - echo "PATH=$PATH:$HOME/bin" > .profile - . .profile - -## Download an unpack ikiwiki - -First, be sure to be under the proper `private` directory: - - cd /home/private - -Use `wget` to download the ikiwiki tarball. You can find the `tar` file at the bottom of this page: [packages.debian.org/unstable/source/ikiwiki](https://packages.debian.org/unstable/source/ikiwiki) - -Then unpack it: - - tar zxvf ikiwiki*.tar.gz - -## Build and install ikiwiki - - cd ikiwiki - export MAKE=gmake - perl Makefile.PL INSTALL_BASE=$HOME PREFIX= - $MAKE - $MAKE install - -## Create your wiki - -All it takes to create a fully functional wiki using ikiwiki is running one command. - - ikiwiki --setup /etc/ikiwiki/auto.setup - -Or, set up a blog with ikiwiki, run this command instead. - - ikiwiki --setup /etc/ikiwiki/auto-blog.setup - -Either way, it will ask you a couple of questions. - - What will the wiki be named? foo - What revision control system to use? git - What wiki user (or openid) will be admin? username - Choose a password: - -Then, wait for it to tell you an url for your new site.. - - Successfully set up foo: - url: http://example.com/~username/foo - srcdir: ~/foo - destdir: ~/public_html/foo - repository: ~/foo.git - To modify settings, edit ~/foo.setup and then run: - ikiwiki --setup ~/foo.setup - -We are almost done, but some parameters will most likely be incorrect. Edit your `foo.setup` file and change: - -- `url` to `yoursitename.nfshost.com` -- `srcdir` to `/home/private/foo` -- `destdir` to `/home/public` -- `cgiurl` to `http://yoursitename.nfshost.com/ikiwiki.cgi` -- `cgi_wrapper` to `/home/public/ikiwiki.cgi` - -Now rebuild again using: - - - ikiwiki --setup foo.setup - - -All done with building ikiwiki! - -## Setting up SSL - -Navigate to your main `public` directory and run the following: - - - tls-setup.sh - - -Follow the easy instructions and you'll have proper SSL setup in seconds! diff --git a/wiki/ikiwiki_comments.md b/wiki/ikiwiki_comments.md deleted file mode 100644 index 2cec3f7..0000000 --- a/wiki/ikiwiki_comments.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: page -title: ikiwiki Comments -permalink: /wiki/ikiwiki/comments ---- - -Content on this page is based off the discussions found here: [ikiwiki.info/tips/comments_feed/](http://ikiwiki.info/tips/comments_feed/) - -You've enabled the comments plugin, so a set of pages on your blog can have comments added to them. Pages with comments even have special feeds that can be used to subscribe to those comments. But you'd like to add a feed that contains all the comments posted to any page. Here's how: - - \[[!inline pages="comment(*)" template=comment]] - -The special PageSpec matches all comments. The template causes the comments to be displayed formatted nicely. - ---- - -It's also possible to make a feed of comments that are held pending moderation. - - \[[!inline pages="comment_pending(*)" template=comment]] diff --git a/wiki/ikiwiki_search.md b/wiki/ikiwiki_search.md deleted file mode 100644 index 0758a16..0000000 --- a/wiki/ikiwiki_search.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: page -title: ikiwiki Search -permalink: /wiki/ikiwiki/search ---- - -This page focuses on properly setting up ikiwiki search on [[ikiwiki/NearlyFreeSpeech]]. - -## Proper Packages - -You will need to install/enable `xapian-omega` in order to use the default ikiwiki search plugin. Switching your NFS realm to "white" should fix this problem but if not, you will need to reach out to support and request they add it for you. - -Once that is complete, edit your `foo.setup` file and update the `omega` path to: - - - /usr/local/www/xapian-omega/cgi-bin/omega - - -Then rebuild your ikiwiki: - - - ikiwiki --setup foo.setup - - -Now your web search should be working! diff --git a/wiki/index.md b/wiki/index.md deleted file mode 100644 index f053d47..0000000 --- a/wiki/index.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -layout: page -title: Wiki -permalink: /wiki/ ---- - -This is the homepage for my personal wiki. All sub-directories are listed below. This wiki is a growing set of documents, so things may change often. - -### Software - -- [Alpine Linux](/wiki/alpine-linux) -- [Dotfiles](/wiki/dotfiles) -- [OpenBSD](/wiki/openbsd) -- [Qutebrowser](/wiki/qutebrowser) -- [Safari](/wiki/safari) -- [Scripts](/wiki/scripts) -- [Sublime Text](/wiki/sublime-text) -- [Ubuntu](/wiki/ubuntu) - ---- - -### Hardware - -- [Xbox](/wiki/xbox) -- [PS2](/wiki/ps2) - ---- - -### Version Control Systems - -- [cgit](/wiki/cgit) - ---- - -### ikiwiki - -My own custom documentation for ikiwiki: - -- [NearlyFreeSpeech](/wiki/ikiwiki/NearlyFreeSpeech) -- [Comments](/wiki/ikiwiki/comments) -- [Search](/wiki/ikiwiki/search) - -### WordPress - -- [Database Update](/wiki/wordpress/database_update) -- [NearlyFreeSpeech Setup](/wiki/wordpress/NearlyFreeSpeech_Setup) - - diff --git a/wiki/openbsd.md b/wiki/openbsd.md deleted file mode 100644 index 6ec9650..0000000 --- a/wiki/openbsd.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -layout: page -title: OpenBSD -permalink: /wiki/openbsd ---- - -This page contains all of my personal scripts and tutorials for OpenBSD. The content ranges from setting up laptops and desktops, to running personal servers and optimization tweaks. - -* [Installation](/wiki/openbsd/installation) -* [Desktop Environment](/wiki/openbsd/desktop_environment) diff --git a/wiki/openbsd_desktop_environment.md b/wiki/openbsd_desktop_environment.md deleted file mode 100644 index 993da29..0000000 --- a/wiki/openbsd_desktop_environment.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -layout: page -title: OpenBSD Desktop Environment -permalink: /wiki/openbsd/desktop_environment ---- - -This page covers the initial setup for installing and configuring `dwm` as a desktop environment on OpenBSD. Everything posted here relies on my personal "Open Suck" installer: [Open Suck](https://git.btxx.org/open-suck/about/) - -## Show Don't Tell - -<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>Open Suck: OpenBSD 7.5 running dwm on my X220</figcaption> -</figure> - -## What You Get - -The Open Suck installer gives you the absolute barebones desktop experience: - -- `dwm` for window management -- `qutebrowser` as your core web browser -- `aerc` for your terminal-based mail client -- `slock` for screen locking -- `scrot`/`slop` for simple screenshot utilities -- `dunst` for notifications - -## Required Packages - -Before we begin setting things up, you will need to install `git`, `vim`, `bash`: - - pkg_add git vim bash - -## Cloning the Project - -Clone the main installer project and navigate instead the directory: - - git clone https://git.btxx.org/open-suck - cd open-suck - -## Installing - -1. Install dependencies by running `./install-dependencies.sh`. The script will simply read required packages from `dependencies.txt` and run `pkg_add`. -2. Compile and install suckless software by running the `./install.sh` - -## TL;DR - - # Install OpenBSD packages - doas sh ./install-dependencies.sh - # Install suckless tools - doas sh ./install.sh - # Apply .xinitrc - cp .xinitrc ~/.xinitrc - -Reboot the machine. Log in as your main user. Run: - - - startx - - -That's it! You now have a fully functional desktop environment built on top of `dwm`. diff --git a/wiki/openbsd_installation.md b/wiki/openbsd_installation.md deleted file mode 100644 index ed33343..0000000 --- a/wiki/openbsd_installation.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -layout: page -title: Installing OpenBSD -permalink: /wiki/openbsd/installation ---- - -Below you can find instructions for installing OpenBSD on a personal computer. - -The example below covers installing **OpendBSD 7.5** on a X220 ThinkPad laptop. - -## Requirements - -* USB device -* Ethernet connection (with active internet) -* A cup of coffee - -## Before the Install - -Make sure you have the latest OpenBSD image formatted on your USB device and that your computer/laptop is set to boot from USB via the BIOS. - -## Installation - -1. Boot from USB -2. Choose `Install` -3. Keyboard layout: `us` -4. Hostname: `x220` (or whatever you choose) -5. Network: `em0` -6. IPv4: `autoconf` -7. IPv6: `none` -8. Network interface: `done` -9. Password for root -10. Start sshd by default? `yes` -11. X Window System start with xenodm? `no` -12. Setup user? `username` (follow setup user steps) -13. Allow root ssh login? `no` -14. Timezone -15. Which disk? Use internal (`sd0` etc.) -16. Encrypt root disk? `no` -17. Use `WHOLE` disk -18. Use `AUTO` layout -19. Which disk to initialize: `done` -20. Location of sets: `http` -21. HTTP Proxy URL? `none` -22. HTTP Server? `1` (Toronto) -23. Confirm again -24. Server directory? `pub/OpenBSD/7.5/amd64` -25. Set names? `done` -26. Drink some coffee while it verifies (depends on network speed) -27. Location of sets? `done` -28. Congrats! -29. Reboot and remove USB device - -## First Boot Tweaks - -### User Permissions - -Before we do anything, we should give our main user full access via `doas`. Login as `root` and run the following: - - echo "permit nopass :wheel" >> /etc/doas.conf - -Now you can logout or reboot the machine. - -Running any of the commands might present you with a permissions error. If that happens, simply add `doas` to the start of every command. - -### Firmware - -Once your machine reboots, login as your created user. The next steps will help you ensure you have the latest firmware. - -Simply run the command: `fw_update` - - -### WiFi - -To enable wifi on your device, run the following command (filling in the proper details where need be) - - ifconfig iwn0 up - ifconfig iwn0 scan - echo "join WIFI-NAME wpakey PASSPHRASE" >> /etc/hostname.iwn0 - echo "dhcp" >> /etc/hostname.iwn0 - echo "inet6 autoconf" >> /etc/hostname.iwn0 - echo "up powersave" >> /etc/hostname.iwn0 - dhclient iwn0 - -Take note of the `iwn0`, as this might differ on your machine. (You can check this by running `ifconfig`) - -You might also need to run `doas sh /etc/netstart` after. - - -### Performance Boost - -This step is optional and targeted towards devices with batteries (obviously). Properly setup apmd: - - rcctl enable apmd - rcctl set apmd flags -A - rcctl start apmd - - -## Next Steps - -Now that the base system is up and running, it is time to setup our desktop environment: - -[Setting up a Desktop Environment for OpenBSD →](/wiki/openbsd/desktop_environment) diff --git a/wiki/ps2.md b/wiki/ps2.md deleted file mode 100644 index bf8b752..0000000 --- a/wiki/ps2.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -layout: page -title: PS2 -permalink: /wiki/ps2 ---- - -This page contains information about setting up PS2 hardware (and emulators) to work with online play. - -* [PCSX2](/wiki/ps2/pcsx2) -* [Networking](/wiki/ps2/networking) diff --git a/wiki/ps2_networking.md b/wiki/ps2_networking.md deleted file mode 100644 index 1066520..0000000 --- a/wiki/ps2_networking.md +++ /dev/null @@ -1,21 +0,0 @@ ---- -layout: page -title: PS2 Networking -permalink: /wiki/ps2/networking ---- - -This page contains all the information to get up and running with online servers for PS2 games. The instructions below work for both stock hardware and emulators. - -## DNS Changes - -In the game settings (depending on the game) change your Primary DNS information to the following: - - 45.7.228.197 - -## Emulator Settings - - - -If you're finding things tricky, [this YouTube video is extremely helpful](https://www.youtube.com/watch?v=9uXjpkBNkCk). - -That's it! diff --git a/wiki/ps2_pcsx2.md b/wiki/ps2_pcsx2.md deleted file mode 100644 index c32ec52..0000000 --- a/wiki/ps2_pcsx2.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -layout: page -title: PCSX2 -permalink: /wiki/ps2/pcsx2 ---- - -This page contains details on setting up PCSX2 on MacOS. - -1. Download the Mac version of the emulator from: [https://pcsx2.net](https://pcsx2.net) -2. Grab the PS2 BIOS file [here](https://www.retrostic.com/bios/pcsx2-playstation-2) -3. Place this `ps2-bios` folder under `Library > Application Support > PCSX2 > bios` -4. Open the application by right-clicking and selecting `Open` (avoids security issues) -5. Select the `.bin` file with the USA flag -6. Select your game directory. Grab game ROMs from [here](https://vimm.net/vault/?system=PS2) (For example, [Battlefront 2](https://vimm.net/vault/9362)) -7. Have fun! diff --git a/wiki/qutebrowser.md b/wiki/qutebrowser.md deleted file mode 100644 index 41effd0..0000000 --- a/wiki/qutebrowser.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -layout: page -title: Qutebrowser -permalink: /wiki/qutebrowser ---- - -This page contains all the custom configuration for qutebrowser. - -### Greasemonkey - -All of these scripts should be added under `~/.local/share/qutebrowser/greasemonkey/`. Then be sure to run the proper command within qutebrowser: `:greasemonkey-reload` - -#### Auto Skip YouTube Ads - - // ==UserScript== - // @name Auto Skip YouTube Ads - // @version 1.0.0 - // @description Speed up and skip YouTube ads automatically - // @author jso8910 - // @match *://*.youtube.com/* - // @exclude *://*.youtube.com/subscribe_embed?* - // ==/UserScript== - setInterval(() => { - const btn = document.querySelector('.videoAdUiSkipButton,.ytp-ad-skip-button') - if (btn) { - btn.click() - } - const ad = [...document.querySelectorAll('.ad-showing')][0]; - if (ad) { - document.querySelector('video').playbackRate = 10; - } - }, 50) diff --git a/wiki/safari.md b/wiki/safari.md deleted file mode 100644 index 1ada79f..0000000 --- a/wiki/safari.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -layout: page -title: Safari -permalink: /wiki/safari ---- - -This page contains details on how to properly configure Safari for the best user experience. - -## Extensions - -To avoid being bombarded with tracking scripts and advertisements, you'll want to install the following Safari extensions: - -* [AdGuard](https://adguard.com/en/adguard-mac/overview.html) -* [AdBlock](https://adblockplus.org/ad-blocker-safari) - -## Web Browsing QoL - -Display full links on hover (similar to default config for Firefox, Chrome): - -1. Open the `View` menu item -2. Click `Show Status Bar` - -Display full URL address in open tabs: - - - -## Custom CSS - -Include a "master" CSS file to override specific sites/elements with your own styling. - -1. Open Safari `Settings` -2. Navigate to the `Advanced` tab -3. Select your custom CSS file in the dropdown - - diff --git a/wiki/scripts.md b/wiki/scripts.md deleted file mode 100644 index cabd288..0000000 --- a/wiki/scripts.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -layout: page -title: Scripts -permalink: /wiki/scripts ---- - -This page contains helpful scripts and useful terminal commands. - -## Docker - -Installing `ghost` - - - docker pull ghost - docker run -d \ - --name ghost-name \ - -e NODE_ENV=development \ - -p 2368:2368 \ - -v $HOME/path/to/ghost/blog:/var/lib/ghost/content \ - ghost:alpine - - -## `ffmpeg` to MP4 - - - ffmpeg -i input_filename.avi -c:v copy -c:a copy -y output_filename.mp4 - - -## Mount USB HDD via CLI - - - mkdir /media/usb-drive - mount /dev/sdX /media/usb-drive/ - - -## Fix screen tearing - - - sudo vim /etc/X11/xorg.conf.d/20-intel.conf - - -Add the following contents to `20-intel.conf`: - - - Section "OutputClass" - Identifier "Intel Graphics" - MatchDriver "i915" - Driver "intel" - Option "DRI" "3" - Option "TearFree" "1" - EndSection - - -## Enabling "tap to click" - - - sudo micro /etc/X11/xorg.conf.d/30-touchpad.conf - - -Add the following contents to `30-touchpad.conf`: - - - Section "InputClass" - Identifier "touchpad" - Driver "libinput" - MatchIsTouchpad "on" - Option "Tapping" "on" - Option "TappingButtonMap" "lmr" - EndSection - - -## Woocommerce - -**Reset all product menu_order to `0`** - - - UPDATE wp_posts SET menu_order = 0 WHERE post_type = 'product'; - diff --git a/wiki/sublime-text.md b/wiki/sublime-text.md deleted file mode 100644 index f72cc6f..0000000 --- a/wiki/sublime-text.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -layout: page -title: Sublime Text -permalink: /wiki/sublime-text ---- - -Personal configuration for the text editor Sublime Text ([https://www.sublimetext.com/](sublimetext.com/)) - -## Themes / Color Schemes - -* Theme: Default -* Color scheme is set to `auto`: - * Light scheme: `Breakers` - * Dark scheme: `Dracula` - -## Plugins - -* BracketHighlighter -* Copy Relative Path -* Dracula Color Scheme -* Emmet -* Package Control - -## Settings - - - { - "ignored_packages": - [ - "Vintage", - ], - "color_scheme": "auto", - "dark_color_scheme": "Packages/Dracula Color Scheme/Dracula.tmTheme", - "light_color_scheme": "Packages/Colorsublime - Themes/Butterfly.tmTheme", - "font_face": "JetBrains Mono NL", - "font_size": 14, - "line_padding_top": 3, - "line_padding_bottom": 3, - "highlight_line": true, - "word_wrap": true, - "dark_theme": "Default Dark.sublime-theme", - "light_theme": "Default.sublime-theme", - "tab_size": 2, - "theme": "auto", - "index_files": true, - "show_definitions": false, - "show_full_path": true, - /*"tab_size": 2,*/ - "translate_tabs_to_spaces": true, - } - diff --git a/wiki/ubuntu.md b/wiki/ubuntu.md deleted file mode 100644 index 563d620..0000000 --- a/wiki/ubuntu.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -layout: page -title: Ubuntu -permalink: /wiki/ubuntu ---- - -This page contains a wide range of common scripts / application setups for Ubuntu - -## MongoDB 3.4 on Ubuntu 23.10 - - wget http://launchpadlibrarian.net/668089858/libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb - sudo apt install ./libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb - sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10 - - echo "deb http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list - -Now edit `/etc/apt/sources.list.d/mongodb-org-3.4.list`: - - deb [trusted=yes] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4... - -Then finish things up: - - sudo apt-get update --allow-unauthenticated - sudo apt-get install -y mongodb-org - - sudo mkdir -p /data/db - sudo chmod -R 777 /data/db - -## Redis 6.0.7 on Ubuntu 23.10 - - sudo apt-get install build-essential tcl - cd /tmp - curl -O http://download.redis.io/releases/redis-6.0.7.tar.gz - tar xzvf redis-6.0.7.tar.gz - cd redis-6.0.7 - -Install redis: - - make - make test - sudo make install - - sudo mkdir /etc/redis - sudo cp /tmp/redis-6.0.7/redis.conf /etc/redis - -Edit `/etc/redis/redis.conf` with the following changes: - -- `supervised systemd` -- `dir /var/lib/redis` - -Create systemd unit file for redis: `/etc/systemd/system/redis.service`: - - [Unit] - Description=Redis In-Memory Data Store - After=network.target - - [Service] - User=redis - Group=redis - ExecStart=/usr/local/bin/redis-server /etc/redis/redis.conf - ExecStop=/usr/local/bin/redis-cli shutdown - Restart=always - - [Install] - WantedBy=multi-user.target - -Final steps: - - sudo adduser --system --group --no-create-home redis - sudo mkdir /var/lib/redis - sudo chown redis:redis /var/lib/redis - sudo chmod 770 /var/lib/redis - -## Ruby 2.7.2 with rbenv on Ubuntu 23.10 - -Edit the `/etc/apt/sources.list` file: - - deb [trusted=yes] http://security.ubuntu.com/ubuntu bionic-security main - -Then run `sudo apt-get update`. After completion, install `libssl1.0-dev`: - - sudo apt-get install libssl1.0-dev - -Install `rbenv` and be sure to include the following in `.zshrc`: - - export PATH="$HOME/.rbenv/bin:$PATH" - eval "$(rbenv init -)" - - diff --git a/wiki/wordpress_database_update.md b/wiki/wordpress_database_update.md deleted file mode 100644 index c015c3d..0000000 --- a/wiki/wordpress_database_update.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: page -title: WordPress Database Update -permalink: /wiki/wordpress/database_update/ ---- - -The following page contains a collection of scripts to update WordPress for numerous things. - -## Updating the URL of the Database - - -- Replace in wp_options table - UPDATE wp_options SET option_value = REPLACE(option_value, 'example.com', 'example2.com') WHERE option_name = 'home' OR option_name = 'siteurl'; - - -- Replace in wp_posts table - UPDATE wp_posts SET post_content = REPLACE(post_content, 'example.com', 'example2.com'); - UPDATE wp_posts SET guid = REPLACE(guid, 'example.com', 'example2.com'); - - -- Replace in wp_postmeta table - UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'example.com', 'example2.com'); - - -- Replace in wp_usermeta table - UPDATE wp_usermeta SET meta_value = REPLACE(meta_value, 'example.com', 'example2.com'); - - -- Replace in wp_users table - UPDATE wp_users SET user_url = REPLACE(user_url, 'example.com', 'example2.com'); diff --git a/wiki/xbox.md b/wiki/xbox.md deleted file mode 100644 index 5a50268..0000000 --- a/wiki/xbox.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: page -title: Xbox -permalink: /wiki/xbox ---- - -This page contains all the details of my personal setup for the original Xbox console. This includes cleaning, repasting thermals, soft modding and more. - -* [Softmodding](/wiki/xbox/softmodding) diff --git a/wiki/xbox_softmodding.md b/wiki/xbox_softmodding.md deleted file mode 100644 index 9ef70d4..0000000 --- a/wiki/xbox_softmodding.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -layout: page -title: Xbox Softmodding -permalink: /wiki/xbox/softmodding ---- - -This page details the instructions on how to soft mod an original Xbox console (v1.6 in this instance) using a USB flash drive. - -## Materials - -* A Female USB to Xbox controller port adapter -* A USB flash drive that is 4GB or smaller -* (Optional) If running MacOS, a working install of Windows via UTM - -## Preparing the USB Drive - -* Turn on your console and connect your USB drive via the controller port adapter -* Navigate to `Memory` from the Xbox Dashboard -* Select the device from the available options (WARNING: This is erase everything on the USB) -* Remove the USB - -## Running the Exploit - -* Download the [Xbox Softmodding Tool.zip](https://drive.google.com/drive/folders/1Gs_yYVotDxAxtHZeHUVr_ts7KeMgqEmQ), open it, open the Softmod Package folder, and extract the contents of Endgame.zip. It should be a folder named `helper`, a folder named `trigger`, and a file called `payload.xbe`. -* Copy the helper folder, trigger folder, and payload.xbe to the root of your flash drive or memory unit. -* Plug the memory device into your controller and turn on the Xbox. Select "Memory", then click your memory device. It will freeze for a minute and then the LED ring on the front of your Xbox should cycle colors before booting into the softmod installer. -* Press A to install the softmod. Read the prompts that come up and press A to acknowledge them. Your Xbox will reboot. -* The tool will finish setting up. You will be left on the Xbox Softmodding Tool dashboard, which is just a skinned UnleashX dashboard. You can change the skin under System → Skins. |
