From b3bf04932880e9f984675cff5d70da58167316cc Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Fri, 5 Jul 2024 16:39:27 -0400 Subject: Start converting code samples into cleaner markdown chunks --- posts/Building_rbenv_on_OpenBSD_7.5.md | 36 +++- posts/adguard.md | 22 +- posts/alpine.md | 72 ++++--- posts/animated-card-tiles.md | 18 +- posts/animated-toggle-tabs.md | 125 +++++------ posts/audio-hotkeys-on-linux-mint.md | 15 +- posts/aui.md | 102 +++++---- posts/base64-all-the-things.md | 8 +- posts/basic-gulp-build-for-sass.md | 122 +++++------ posts/batch-webp-conversion.md | 8 +- posts/battery.md | 12 +- posts/berg.md | 36 ++-- posts/better-box-shadows.md | 153 +++++++------- posts/character-unit.md | 32 +-- posts/chasing-performance.md | 94 ++++----- posts/cheap-portable-pi.md | 39 ++-- posts/css-slope-graphs.md | 364 ++++++++++++++++----------------- posts/css-variables.md | 30 +-- posts/current-color.md | 32 +-- posts/default-brower-forms.md | 145 ++++++------- posts/default-html-style-updates.md | 98 ++++----- posts/dv.md | 31 +-- posts/git-patches.md | 4 +- posts/heif.md | 4 +- posts/html-dark-mode.md | 4 +- posts/mail.md | 8 +- posts/mongodb-arch.md | 16 +- posts/my-pi-desktop.md | 4 +- posts/obvious-js-injection-fallback.md | 6 +- posts/openring.md | 4 +- posts/rvm.md | 16 +- posts/sublime.md | 16 +- posts/vscode.md | 12 +- 33 files changed, 867 insertions(+), 821 deletions(-) (limited to 'posts') diff --git a/posts/Building_rbenv_on_OpenBSD_7.5.md b/posts/Building_rbenv_on_OpenBSD_7.5.md index 90f5479..3da1fad 100644 --- a/posts/Building_rbenv_on_OpenBSD_7.5.md +++ b/posts/Building_rbenv_on_OpenBSD_7.5.md @@ -8,40 +8,54 @@ I use Ruby (specifically with Jekyll) for a lot of my clubs/projects while using First, be sure to install the required packages in order to build from source, and then clone the core `rbenv` repo: - pkg_add git gcc gmake libffi libyaml openssl - git clone https://github.com/rbenv/rbenv.git ~/.rbenv +~~~sh +pkg_add git gcc gmake libffi libyaml openssl +git clone https://github.com/rbenv/rbenv.git ~/.rbenv +~~~ ## Building `rbenv` Add `rbenv` to your PATH and initialize it (place this inside your `.bashrc` or `.zshrc` etc): - export PATH="$HOME/.rbenv/bin:$PATH" - export PATH="$HOME/.rbenv/shims:$PATH" - export RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" - eval "$(rbenv init -)" +~~~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 -)" +~~~ Then reload your shell (zsh in this example): - source ~/.zshrc +~~~sh +source ~/.zshrc +~~~ Next we will need to install `ruby-build` as a `rbenv` plugin. Clone the ruby-build repository into the rbenv plugins directory: - git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build +~~~sh +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): - rbenv install 3.3.0 +~~~sh +rbenv install 3.3.0 +~~~ If you run into issues, you may need to specify your openssl directory: - RUBY_CONFIGURE_OPTS="--with-openssl-dir=/usr/local" rbenv install 3.3.0 +~~~sh +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: - rbenv local 3.3.0 +~~~sh +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/posts/adguard.md b/posts/adguard.md index f896f6f..5cd1e5a 100644 --- a/posts/adguard.md +++ b/posts/adguard.md @@ -26,31 +26,31 @@ Don't flash anything just yet! Be sure to use the gear icon and edit the setting Put the SD card into your Pi, connect power and ethernet. 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 piguard@piguard.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 you setup. Once you are connected directly to the Pi, it's best to check for updates: - - sudo apt update - +~~~sh +sudo apt update +~~~ ...and if updates are in fact available, install them via: - - sudo apt upgrade - +~~~sh +sudo apt upgrade +~~~ ## Installing AdGuard Home Simply run the automated installer: - - curl -s -S -L https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v - +~~~sh +curl -s -S -L https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v +~~~ Follow the instructions and you'll be setup in no time! To view your AdGuard dashboard at any time, you can now simply navigate to `piguard.local`. diff --git a/posts/alpine.md b/posts/alpine.md index a1c860b..78b2329 100644 --- a/posts/alpine.md +++ b/posts/alpine.md @@ -67,34 +67,36 @@ I'll save you both the headache and large amount of time I wasted on this silly I put the following in my `/etc/xdg/mimeapps.list` (which is included by default with the installer) - [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/bmp=feh.desktop - image/gif=feh.desktop - image/jpeg=feh.desktop - image/jpg=feh.desktop - image/png=feh.desktop - image/tiff=feh.desktop - image/x-bmp=feh.desktop - image/x-pcx=feh.desktop - image/x-tga=feh.desktop - image/x-portable-pixmap=feh.desktop - image/x-portable-bitmap=feh.desktop - image/x-targa=feh.desktop - image/x-portable-greymap=feh.desktop - application/pcx=feh.desktop - image/svg+xml=feh.desktop - image/svg-xml=feh.desktop +~~~sh +[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/bmp=feh.desktop +image/gif=feh.desktop +image/jpeg=feh.desktop +image/jpg=feh.desktop +image/png=feh.desktop +image/tiff=feh.desktop +image/x-bmp=feh.desktop +image/x-pcx=feh.desktop +image/x-tga=feh.desktop +image/x-portable-pixmap=feh.desktop +image/x-portable-bitmap=feh.desktop +image/x-targa=feh.desktop +image/x-portable-greymap=feh.desktop +application/pcx=feh.desktop +image/svg+xml=feh.desktop +image/svg-xml=feh.desktop +~~~ You might have also noticed that I use `feh` as my default image viewer as well. That's just my personal preference, feel free to switch that out as you see fit. @@ -114,19 +116,25 @@ Some of these "hacks" or tweaks I had to implement might help others who run int It is important to install `gawk` since `awk` isn't "real" on Alpine. Once you have that on you system `aerc` will render emails out-of-the-box.[^1] - apk add gawk +~~~sh +apk add gawk +~~~ ### Sublime Text Sublime Text requires flatpak, so if that isn't your *thing* then you're better off snagging a different editor. I've tried multiple times throughout my career to use an alternate editor (preferably 100% open source) but keep finding myself returning to Sublime. Maybe one day... - apk add flatpak - flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo +~~~sh +apk add flatpak +flatpak remote-add --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo +~~~ Then reboot your machine for the changes to take. Login again and run: - flatpak install flathub com.sublimetext.three +~~~sh +flatpak install flathub com.sublimetext.three +~~~ FYI: You *might* need to run the above commands under `sudo` if your current user lacks proper permissions. diff --git a/posts/animated-card-tiles.md b/posts/animated-card-tiles.md index 318583a..486ec2f 100644 --- a/posts/animated-card-tiles.md +++ b/posts/animated-card-tiles.md @@ -21,16 +21,16 @@ 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 - -
-
-
-

Card Title

-

Inner card content text

-
-
+~~~html +
+
+
+

Card Title

+

Inner card content text

- +
+
+~~~ 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. diff --git a/posts/animated-toggle-tabs.md b/posts/animated-toggle-tabs.md index dcbcfea..5404cfc 100644 --- a/posts/animated-toggle-tabs.md +++ b/posts/animated-toggle-tabs.md @@ -18,88 +18,89 @@ Let’s get started with the base skeleton.

There isn't anything special happening here. We just contain all our labels and inputs into a .radio-toggles wrapper, make sure those labels are each properly connected to their corresponding inputs, and then add an empty .slide-item element (more on that later).

- -
- - - - - - -
-
+~~~html +
+ + + + + + +
+
+~~~ ## The CSS Now for the main event – the CSS. First we want to style the wrapper that holds all of our pieces together. You can tweak this to your liking, but I prefer a simple and clean style: - - .radio-toggles { - align-items: center; - background: #eee; - border: 1px solid lightgrey; - border-radius: 9999px; - display: flex; - justify-content: center; - margin: 20px auto; - max-width: 400px; - overflow: hidden; - padding: 4px; - position: relative; - } - +~~~css +.radio-toggles { + align-items: center; + background: #eee; + border: 1px solid lightgrey; + border-radius: 9999px; + display: flex; + justify-content: center; + margin: 20px auto; + max-width: 400px; + overflow: hidden; + padding: 4px; + position: relative; +} +~~~ Next, we “hide” (only visually) the default `radio` inputs: - - input[type="radio"] { - left: -9999px; - position: absolute; - z-index: -1; - } - +~~~css +input[type="radio"] { + left: -9999px; + position: absolute; + z-index: -1; +} +~~~ Then we give the corresponding `label` elements a little spacing and breathing room: - - label { - cursor: pointer; - padding: 10px 20px; - text-align: center; - width: 33.33%; - z-index: 2; - } - +~~~css +label { + cursor: pointer; + padding: 10px 20px; + text-align: center; + width: 33.33%; + z-index: 2; +} +~~~ Remember that `.slide-item` I referenced earlier? That element will be the visual “slider” that animates between the individual radio options. We style that like so: - - .slide-item { - background: white; - border-radius: 9999px; - box-shadow: 0 2px 4px rgba(0,0,0,0.15); - height: calc(100% - 8px); - left: calc(33.33% + 4px); - position: absolute; - width: calc(33.33% - 8px); - transition: left .4s; - z-index: 0; - } - +~~~sh +.slide-item { + background: white; + border-radius: 9999px; + box-shadow: 0 2px 4px rgba(0,0,0,0.15); + height: calc(100% - 8px); + left: calc(33.33% + 4px); + position: absolute; + width: calc(33.33% - 8px); + transition: left .4s; + z-index: 0; +} +~~~ You'll notice the `left`, `height`, and `width` properties utilize the CSS `calc` attributes – this just gives some much needed padding and visual clean-up to the whole tabbed interface. For the finishing touches, we just need to tell the `.slide-item` where to position itself based on which `radio` input is currently selected: - - input[type="radio"]:nth-of-type(1):checked ~ .slide-item { - left: 4px; - } - input[type="radio"]:nth-of-type(3):checked ~ .slide-item { - left: calc(66.66% + 4px); - } - +~~~css +input[type="radio"]:nth-of-type(1):checked ~ .slide-item { + left: 4px; +} +input[type="radio"]:nth-of-type(3):checked ~ .slide-item { + left: calc(66.66% + 4px); +} +~~~ That's pretty much it! You now have a fully functional, animated toggle slider with just a set of simple `radio` inputs and pure CSS. diff --git a/posts/audio-hotkeys-on-linux-mint.md b/posts/audio-hotkeys-on-linux-mint.md index 09aaf5e..1037e91 100644 --- a/posts/audio-hotkeys-on-linux-mint.md +++ b/posts/audio-hotkeys-on-linux-mint.md @@ -8,13 +8,14 @@ Setting up all my go-to applications (Sublime, LocalWP, Riot, Evolution, etc) wa For my own personal reference, I'm also going to include those code snippets here since you never know when you might need it again! And who knows, maybe this will help someone else stumbling around the internet. +~~~sh +// Volume Up +pactl set-sink-volume @DEFAULT_SINK@ +5% - // Volume Up - pactl set-sink-volume @DEFAULT_SINK@ +5% +// Volume Down +pactl set-sink-volume @DEFAULT_SINK@ -5% - // Volume Down - pactl set-sink-volume @DEFAULT_SINK@ -5% - - // Toggle Mute - pactl set-sink-mute @DEFAULT_SINK@ toggle +// Toggle Mute +pactl set-sink-mute @DEFAULT_SINK@ toggle +~~~ diff --git a/posts/aui.md b/posts/aui.md index fa6786b..37cbd2f 100644 --- a/posts/aui.md +++ b/posts/aui.md @@ -14,50 +14,58 @@ Since I've been wanting to dip my toes into more tutorial-based articles (maybe Since this project consists of only two buttons elements, the HTML or skeleton of this project is very straightforward: - - +~~~html + + +~~~ ### Styling the buttons The first step is to remove the browser's default button styling by using the `appearance` property. This will help avoid having to fight against the browser and minimize our CSS code. - button { - -webkit-appearance: none; - -moz-appearance: none; - } +~~~css +button { + -webkit-appearance: none; + -moz-appearance: none; +} +~~~ Next, we apply a fairly simple set of CSS that will be shared across both the confirm and cancel buttons: (Pay attention to the `transition` property as we will be returning to that shortly) - button { - -webkit-appearance: none; - -moz-appearance: none; - border: 1px solid #ccc; - border-radius: 125px; - box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1); - cursor: pointer; - font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; - font-size: 2rem; - margin: 5rem 1rem; - padding: 1.2rem 4rem; - position: relative; - transition: all ease .3s; - } +~~~css +button { + -webkit-appearance: none; + -moz-appearance: none; + border: 1px solid #ccc; + border-radius: 125px; + box-shadow: inset 0 13px 25px rgba(255,255,255,0.5), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.1); + cursor: pointer; + font-family: 'Lucida Grande', Helvetica, Arial, sans-serif; + font-size: 2rem; + margin: 5rem 1rem; + padding: 1.2rem 4rem; + position: relative; + transition: all ease .3s; +} +~~~ Then we separate the specific confirm and cancel button styles into their own class selectors: - button.confirm { - background: #4A90E2; - border-color: #3672B6; - color: #fff; - } +~~~css +button.confirm { + background: #4A90E2; + border-color: #3672B6; + color: #fff; +} - button.cancel { - background: #D0D0D0; - border-color: #B8B8B8; - color: #6F6F6F; - } +button.cancel { + background: #D0D0D0; + border-color: #B8B8B8; + color: #6F6F6F; +} +~~~ ### Playing with pseudo elements @@ -65,26 +73,30 @@ Now that the button is styled and structured with basic formatting, it's time to The cleanest way to do this is by using the `:before` pseudo element paired with a linear-gradient background. - button:before { - background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); - border-radius: 125px; - content:''; - height: 50px; - left: 4%; - position: absolute; - top: 1px; - transition: all ease .3s; - width: 92%; - } +~~~css +button:before { + background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); + border-radius: 125px; + content:''; + height: 50px; + left: 4%; + position: absolute; + top: 1px; + transition: all ease .3s; + width: 92%; +} +~~~ ### Adding interaction The final step is adding the user hover interaction: (Remember that `transition` property?) - button:hover { - box-shadow: inset 0 13px 25px rgba(255,255,255,0.8), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2); - transform: scale(1.02); - } +~~~css +button:hover { + box-shadow: inset 0 13px 25px rgba(255,255,255,0.8), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2); + transform: scale(1.02); +} +~~~ That's it! diff --git a/posts/base64-all-the-things.md b/posts/base64-all-the-things.md index c061aef..36b3e4b 100644 --- a/posts/base64-all-the-things.md +++ b/posts/base64-all-the-things.md @@ -12,15 +12,15 @@ It might be common knowledge, but I think breaking down exactly what base64 enco In simpler terms: it is a encoded format that can change an element like this: -```html +~~~html Cool image -``` +~~~ Into this: -```html +~~~html Cool image -``` +~~~ ## See it in action diff --git a/posts/basic-gulp-build-for-sass.md b/posts/basic-gulp-build-for-sass.md index 48fa014..dae8960 100644 --- a/posts/basic-gulp-build-for-sass.md +++ b/posts/basic-gulp-build-for-sass.md @@ -6,34 +6,34 @@ Some designers might shy away from build tools when first starting out and I can Here is the final `gulp.js` file in all it's glory: +~~~js +var gulp = require('gulp'); +var shell = require('gulp-shell'); +var sass = require('gulp-sass'); - var gulp = require('gulp'); - var shell = require('gulp-shell'); - var sass = require('gulp-sass'); - - /* Build and watch Jekyll (change this task to whatever you need) */ - gulp.task('generate', shell.task('jekyll serve')); - - /* Compile SCSS files to CSS */ - gulp.task('styles', function () { - return gulp.src('_includes/assets/sass/styles.scss') - .pipe(sass({ - outputStyle: 'compressed' - }).on('error', sass.logError)) - .pipe(gulp.dest('_includes/assets/css/')); - }); - - /* Compile the assets */ - gulp.task('assets', gulp.parallel( - 'styles' - )); - - /* Build */ - gulp.task('build', gulp.series( - 'assets', - 'generate' - )); +/* Build and watch Jekyll (change this task to whatever you need) */ +gulp.task('generate', shell.task('jekyll serve')); +/* Compile SCSS files to CSS */ +gulp.task('styles', function () { + return gulp.src('_includes/assets/sass/styles.scss') + .pipe(sass({ + outputStyle: 'compressed' + }).on('error', sass.logError)) + .pipe(gulp.dest('_includes/assets/css/')); +}); + +/* Compile the assets */ +gulp.task('assets', gulp.parallel( + 'styles' +)); + +/* Build */ +gulp.task('build', gulp.series( + 'assets', + generate' +)); +~~~ Trust me, it's not complicated at all. @@ -41,11 +41,11 @@ Trust me, it's not complicated at all. For our basic build file we are going to need only three modules: `gulp`, `gulp-shell` and `gulp-sass`. - - var gulp = require('gulp'); - var shell = require('gulp-shell'); - var sass = require('gulp-sass'); - +~~~js +var gulp = require('gulp'); +var shell = require('gulp-shell'); +var sass = require('gulp-sass'); +~~~ #### gulp This is the streaming build system, without it we can't do anything else. @@ -66,8 +66,9 @@ Required for gulp to compile Sass into vanilla CSS. Our first step is to create the default task that will generate our build. In this example we are making the assumption that we're building a Jekyll website (but you can place any build command here): - - gulp.task('generate', shell.task('jekyll serve')); +~~~sh +gulp.task('generate', shell.task('jekyll serve')); +~~~ Don't worry if this `generate` isn't clear, we come back to that later. @@ -76,48 +77,49 @@ Don't worry if this `generate` isn't clear, we come back to that later. We will name this next task `styles` since that's what it outputs - our styling. We start by telling gulp where our main `scss` directory is: - - /* Change this directory to match yours */ - return gulp.src('_includes/assets/sass/styles.scss') +~~~js +/* Change this directory to match yours */ +return gulp.src('_includes/assets/sass/styles.scss') +~~~ This next piece tells the plugin to compress our final compiled CSS, log any errors if there are issues with the build and then export it to our destination directory: +~~~js +.pipe(sass({ + outputStyle: 'compressed' +}).on('error', sass.logError)) - .pipe(sass({ - outputStyle: 'compressed' - }).on('error', sass.logError)) - - /* Change this to your destination directory */ - .pipe(gulp.dest('_includes/assets/css/')); - +/* Change this to your destination directory */ +.pipe(gulp.dest('_includes/assets/css/')); +~~~ ## Building our assets This step isn't 100% needed, but I like to include it for when more assets need to be added (minifying JavaScript, compressing images, etc) - - /* - Compile the assets - */ - gulp.task('assets', gulp.parallel( - 'styles' - )); - +~~~js +/* +Compile the assets +*/ +gulp.task('assets', gulp.parallel( + 'styles' +)); +~~~ ## Altogether now! Now we add a task that runs all other tasks in our gulp file (in this case it will run both `assets` and `generate`) - - /* - Build - */ - gulp.task('build', gulp.series( - 'assets', - 'generate' - )); - +~~~js +/* +Build +*/ +gulp.task('build', gulp.series( + 'assets', + 'generate' +)); +~~~ And that's it - we're done! A very basic `gulp` build for compiling Sass. diff --git a/posts/batch-webp-conversion.md b/posts/batch-webp-conversion.md index 4bf930e..9befa46 100644 --- a/posts/batch-webp-conversion.md +++ b/posts/batch-webp-conversion.md @@ -36,12 +36,12 @@ You *could* download one of the many native apps from the Mac App Store to do th 8) Enter the following code below as your script and type `⌘-S` to save (name it something like "Convert to webp") -``` +~~~sh for f in "$@" do /usr/local/bin/cwebp -q 85 "$f" -o "${f%.*}.webp" done -``` +~~~ For visual reference, it should look something like this: @@ -67,9 +67,9 @@ Simple as that! I was contacted by the very helpful [Kev Quirk](https://kevq.uk) about a minor problem he encountered while following this tutorial. When trying to run `cwebp` he received the following error message: -``` +~~~sh 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/battery.md b/posts/battery.md index 4147ce8..dca86c4 100644 --- a/posts/battery.md +++ b/posts/battery.md @@ -8,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: -``` +~~~sh 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: -``` +~~~sh apm -L -``` +~~~ To make these changes permanent on boot: -``` +~~~sh 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. diff --git a/posts/berg.md b/posts/berg.md index 44caded..d87cea3 100644 --- a/posts/berg.md +++ b/posts/berg.md @@ -18,23 +18,25 @@ The first step is to create the main repo that would house the core files of `pb Once your two repos are created, you will need to make some minor edits to the `_config.sh` in the core `pblog` project to tell the build script where the generated files should go (in this case the `pages` repo): - - OUTPUT="_output/pages/" +~~~sh +OUTPUT="_output/pages/" +~~~ ## The Submodule Using terminal, navigate to the `_output/` directory in your core `pblog` project. Run the following, remembering to replace the USERNAME parameter with your own: - - git submodule add git@codeberg.org:USERNAME/pages.git - +~~~sh +git submodule add git@codeberg.org:USERNAME/pages.git +~~~ If everything worked correctly you should now have a `.gitmodules` file in your main `pblog` project. If you get any errors, you might need to include the name of the directory at the end of the command: - git submodule add git@codeberg.org:USERNAME/pages.git pages - +~~~sh +git submodule add git@codeberg.org:USERNAME/pages.git pages +~~~ ## The Workflow @@ -42,9 +44,9 @@ Now you can make changes, add new posts and pages in the main `pblog` project an Now you can navigate to the standard Codeberg Pages URL to see it in action: - - USERNAME.codeberg.page - +~~~sh +USERNAME.codeberg.page +~~~ If you want to use your own custom domain (who doesn't?) then continue reading. @@ -52,18 +54,18 @@ If you want to use your own custom domain (who doesn't?) then continue reading. The first thing you will need to do is add a `.domains` file to your `pages` root directory. In this file you will want to list your custom domain on the first line, followed by the standard Codeberg pages URL below it. Like so: - - yourcustomdomain.com - USERNAME.codeberg.page - +~~~sh +yourcustomdomain.com +USERNAME.codeberg.page +~~~ I'm keeping this very basic, but I suggest you look further into the [official documentation](https://docs.codeberg.org/codeberg-pages/#custom-domains) if there are any extra settings you'd like to tinker with. The final step is configuring a `CNAME` DNS setting through your registrar: - - @ -> USERNAME.codeberg.page - +~~~sh +@ -> USERNAME.codeberg.page +~~~ Give the DNS settings a bit of time to take (24-48 hours) and you'll have your custom domain working just fine. diff --git a/posts/better-box-shadows.md b/posts/better-box-shadows.md index 76d62cd..c268a34 100644 --- a/posts/better-box-shadows.md +++ b/posts/better-box-shadows.md @@ -39,32 +39,33 @@ Box shadow on HTML elements has b Let's take a look at a default configuration of `box-shadow`: - - .box-container { - box-shadow: 0 4px 8px rgba(0,0,0,0.3); - } - +~~~css +.box-container { + box-shadow: 0 4px 8px rgba(0,0,0,0.3); +} +~~~ In the example above the first property number is the origin of the *x-axis*, the second number is the origin of the *y-axis* and the third is the amount of *blur*. We should also add some minimal styling to cleanup the `.box-container` a little bit for our example: - -
- - - .box-container { - box-shadow: 0 4px 8px rgba(0,0,0,0.3); - /* Styles to make it less ugly */ - background: white; - border-radius: 10px; - border: 1px solid #eee; - height: 200px; - padding: 10px; - position: relative; - width: 250px; - } - +~~~html +
+~~~ + +~~~css +.box-container { + box-shadow: 0 4px 8px rgba(0,0,0,0.3); + /* Styles to make it less ugly */ + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; +} +~~~ Which would render as this: @@ -78,89 +79,87 @@ Not bad - but we can do a lot better than this. We just need to add a simple child `div` (or use a `pseudo` element if you prefer) inside our main element we want to apply the shadow to: - -
-
-
- +~~~html +
+
+
+~~~ Now we make our inner child element `absolute` and set it's `height` and `width` dynamically to be slightly smaller than it's parent (percentages work best for this). Remember to set this child element behind it's parent by adding `z-index: -1`. - - .box-container { - /* No box-shadow needed on this element anymore */ - /* Styles to make it less ugly */ - background: white; - border-radius: 10px; - border: 1px solid #eee; - height: 200px; - padding: 10px; - position: relative; - width: 250px; - } - +~~~css +.box-container { + /* No box-shadow needed on this element anymore */ + /* Styles to make it less ugly */ + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; +} +~~~ ## Inner Containers We also need to target the `box-container-inner` element set inside the current parent to reflect our custom shadow styling: - - .box-container-inner { - bottom: 0; - /* The box-shadow is added here now */ - box-shadow: 0 4px 12px rgba(0,0,0,0.3); - height: 94%; - left: 3%; - position: absolute; - width: 94%; - z-index: -1; - } - +~~~sh +.box-container-inner { + bottom: 0; + /* The box-shadow is added here now */ + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + height: 94%; + left: 3%; + position: absolute; + width: 94%; + z-index: -1; +} +~~~ Which will make the drop-shadow render with a little more realistic depth:
- - ## But wait - there's more! We could stop now and have a decent drop-shadow that is certainly easier on the eyes - but we can make this even better with one extra property - `filter:blur();`. So your final code would look like this: - - .box-container { - /* Styles to make it less ugly */ - background: white; - border-radius: 10px; - border: 1px solid #eee; - height: 200px; - padding: 10px; - position: relative; - width: 250px; - } - - .box-container-inner { - bottom: 0; - box-shadow: 0 4px 12px rgba(0,0,0,0.3); - filter: blur(6px); - height: 94%; - left: 3%; - position: absolute; - width: 94%; - z-index: -1; - } - +~~~css +.box-container { + /* Styles to make it less ugly */ + background: white; + border-radius: 10px; + border: 1px solid #eee; + height: 200px; + padding: 10px; + position: relative; + width: 250px; +} + +.box-container-inner { + bottom: 0; + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + filter: blur(6px); + height: 94%; + left: 3%; + position: absolute; + width: 94%; + z-index: -1; +} +~~~ Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth:
- +
diff --git a/posts/character-unit.md b/posts/character-unit.md index b88ad45..58b200b 100644 --- a/posts/character-unit.md +++ b/posts/character-unit.md @@ -12,28 +12,28 @@ By setting your main containers or text elements with the CSS character unit (`c Let's say you have an article which will fill the entire length of the screen. Something like this: - -
-

Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.

-

Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.

-
- +~~~html +
+

Reprehenderit aliqua in quis eiusmod ea culpa aliquip. Velit duis est irure voluptate occaecat labore laborum ut pariatur ex veniam deserunt esse est. Esse sunt exercitation id reprehenderit deserunt elit commodo sit ullamco amet commodo magna consequat. Excepteur voluptate tempor consectetur eu aliqua aliquip laboris aliquip veniam excepteur labore.

+

Voluptate excepteur sint magna ipsum occaecat irure sit. In occaecat excepteur in id ullamco id est incididunt irure et. Consectetur veniam exercitation occaecat exercitation labore nulla excepteur irure ex anim. Commodo sint anim non ad excepteur exercitation eiusmod Lorem nisi. Tempor ut ipsum do adipisicing dolore.

+
+~~~ With this structure, you might normally set the default `max-width` property with your desired maximum width (whatever you believe is the best reading length): - - .container { - max-width: 38em; - } - +~~~css +.container { + max-width: 38em; +} +~~~ This works - but it isn't ideal. Time for character units to save the day! You will still target the `max-width` property but this time we set it to use the `ch` value like so: - - .container { - max-width: 66ch; - } - +~~~css +.container { + max-width: 66ch; +} +~~~ This setting makes sure content will not exceed more than 66 characters per line, making for a better reading experience with little effort. diff --git a/posts/chasing-performance.md b/posts/chasing-performance.md index 0171f11..775456c 100644 --- a/posts/chasing-performance.md +++ b/posts/chasing-performance.md @@ -147,11 +147,11 @@ Webfonts I'm not using any webfonts but instead defaulting to the user's OS System Fonts. I love custom typefaces but performance takes just too much of a hit on my personal site to bother with them. - - body { - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons; - } - +~~~css +body { +font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif,"Sans Serif",Icons; +} +~~~ For reference, there are some things you should to look out for when using custom typefaces: @@ -170,8 +170,9 @@ On top of that, I decided to also implement Filament Group's +~~~html +