From e8876fb866c3d89c432dcd04634e9bd2ced18022 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Sun, 14 Jul 2024 12:26:35 -0400 Subject: Switch things back to smu instead of lowdown --- posts/Building_rbenv_on_OpenBSD_7.5.md | 28 +++++++++--------- posts/adguard.md | 16 +++++------ posts/alpine.md | 16 +++++------ posts/animated-card-tiles.md | 52 +++++++++++++++++----------------- posts/animated-toggle-tabs.md | 24 ++++++++-------- posts/audio-hotkeys-on-linux-mint.md | 4 +-- posts/aui.md | 24 ++++++++-------- posts/base64-all-the-things.md | 8 +++--- posts/basic-gulp-build-for-sass.md | 28 +++++++++--------- posts/batch-webp-conversion.md | 8 +++--- posts/battery.md | 12 ++++---- posts/berg.md | 24 ++++++++-------- posts/better-box-shadows.md | 28 +++++++++--------- posts/character-unit.md | 12 ++++---- posts/chasing-performance.md | 16 +++++------ posts/cheap-portable-pi.md | 16 +++++------ posts/css-slope-graphs.md | 16 +++++------ posts/css-variables.md | 8 +++--- posts/current-color.md | 8 +++--- posts/default-brower-forms.md | 8 +++--- posts/default-html-style-updates.md | 20 ++++++------- posts/dv.md | 12 ++++---- posts/easy-custom-radio-inputs.md | 32 ++++++++++----------- posts/flexbox-bar-graphs.md | 20 ++++++------- posts/git-patches.md | 4 +-- posts/heif.md | 4 +-- posts/html-dark-mode.md | 4 +-- posts/jekyll-sourcehut.md | 12 ++++---- posts/mail.md | 8 +++--- posts/mongodb-arch.md | 16 +++++------ posts/my-pi-desktop.md | 4 +-- posts/obvious-js-injection-fallback.md | 12 ++++---- posts/openring.md | 20 ++++++------- posts/poor-mans-full-bleed.md | 16 +++++------ posts/rvm.md | 16 +++++------ posts/sublime.md | 16 +++++------ posts/vscode.md | 12 ++++---- 37 files changed, 292 insertions(+), 292 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 3da1fad..07bad04 100644 --- a/posts/Building_rbenv_on_OpenBSD_7.5.md +++ b/posts/Building_rbenv_on_OpenBSD_7.5.md @@ -8,54 +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: -~~~sh +```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): -~~~sh +```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): -~~~sh +```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: -~~~sh +```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): -~~~sh +```sh rbenv install 3.3.0 -~~~ +``` If you run into issues, you may need to specify your openssl directory: -~~~sh +```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: -~~~sh +```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 5cd1e5a..f89ce2b 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 +```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: -~~~sh +```sh sudo apt update -~~~ +``` ...and if updates are in fact available, install them via: -~~~sh +```sh sudo apt upgrade -~~~ +``` ## Installing AdGuard Home Simply run the automated installer: -~~~sh +```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 78b2329..d4fc8f9 100644 --- a/posts/alpine.md +++ b/posts/alpine.md @@ -67,7 +67,7 @@ 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) -~~~sh +```sh [Default Applications] x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop @@ -96,7 +96,7 @@ 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. @@ -116,25 +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] -~~~sh +```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... -~~~sh +```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: -~~~sh +```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 486ec2f..1b5d86a 100644 --- a/posts/animated-card-tiles.md +++ b/posts/animated-card-tiles.md @@ -21,7 +21,7 @@ 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 -~~~html +```html
@@ -30,7 +30,7 @@ For the base skeleton of these cards we only need:
-~~~ +``` 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. @@ -38,17 +38,17 @@ That's all that is needed - for now. We will be returning to this code shortly t First we set the main housing container to use `flex` so we save ourselves the headache of aligning all the cards in a nice row: -~~~css +```css .card-tiles-container { display: flex; font-size: 14px; margin: 20px 0; } -~~~ +``` Next we create the default styling for our tile cards and set the `transform` property to scale the card on `:hover`: -~~~css +```css /* Default card tile styles */ .card-tile { border: 1px solid; @@ -63,7 +63,7 @@ Next we create the default styling for our tile cards and set the `transform` pr .card-tile:hover { transform: scale(1.1); } -~~~ +``` ### Where are my cards?! @@ -73,7 +73,7 @@ Our next step is to hide the default inner `text-content` and only show it on ho When the user hovers over a main card tile, we change the `text-content` values of both the opacity and z-index to 1. -~~~css +```css /* Card tile text content */ .card-tile .text-content { background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%); @@ -94,24 +94,24 @@ When the user hovers over a main card tile, we change the `text-content` values opacity: 1; z-index: 1; } -~~~ +``` Finally we add some minor styling for the inner header and paragraph tags: -~~~css +```css .card-tile .text-content h4, .card-tile .text-content p { color: #fff; margin: 0; text-shadow: 1px 1px 1px rgba(0,0,0,0.6); } -~~~ +``` ### Don't forget mobile We want out UI to stack the cards if users are viewing them on smaller devices: -~~~css +```css @media(max-width: 600px) { .card-tiles-container { flex-direction: column; @@ -121,13 +121,13 @@ We want out UI to stack the cards if users are viewing them on smaller devices: width: 100%; } } -~~~ +``` ## Customizing each card Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it's own custom coloring: -~~~html +```html
@@ -151,11 +151,11 @@ Remember how I mentioned that we would be adding more classes to the original HT
-~~~ +``` And these color classes correlate to some new CSS styling: -~~~css +```css /* Blue Card */ .card-tile.blue { background-color: #0093E9; @@ -168,9 +168,9 @@ And these color classes correlate to some new CSS styling: box-shadow: 0 8px 18px rgba(128,208,199,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -~~~ +``` -~~~css +```css /* Orange Card */ .card-tile.orange { background-color: #FAD961; @@ -183,9 +183,9 @@ And these color classes correlate to some new CSS styling: box-shadow: 0 8px 18px rgba(247,107,28,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -~~~ +``` -~~~css +```css /* Green Card */ .card-tile.green { background-color: #096e40; @@ -198,7 +198,7 @@ And these color classes correlate to some new CSS styling: box-shadow: 0 8px 18px rgba(9,110,64,0.4), inset 0 2px 1px rgba(255,255,255,0.6); } -~~~ +``` ### Adding transitions @@ -206,13 +206,13 @@ We can now see the actual cards visually and have the ability to interact with t Lucky we can target all elements we wish to animate with the `transition` property, like so: -~~~css +```css /* Shared transitions */ .card-tile, .card-tile .text-content { transition: .3s ease all; } -~~~ +``` Done and done. @@ -222,7 +222,7 @@ To make things easier for reference, I have included all the `html` and `css` be ### HTML -~~~html +```html
@@ -243,11 +243,11 @@ To make things easier for reference, I have included all the `html` and `css` be
-~~~ +``` ### CSS -~~~css +```css .card-tiles-container { display: flex; font-size: 14px; @@ -344,4 +344,4 @@ To make things easier for reference, I have included all the `html` and `css` be width: 100%; } } -~~~ +``` diff --git a/posts/animated-toggle-tabs.md b/posts/animated-toggle-tabs.md index 5404cfc..e964382 100644 --- a/posts/animated-toggle-tabs.md +++ b/posts/animated-toggle-tabs.md @@ -18,7 +18,7 @@ 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 +```html
@@ -28,14 +28,14 @@ Let’s get started with the base skeleton.
-~~~ +``` ## 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: -~~~css +```css .radio-toggles { align-items: center; background: #eee; @@ -49,21 +49,21 @@ Now for the main event – the CSS. First we want to style the wrapper that hold padding: 4px; position: relative; } -~~~ +``` Next, we “hide” (only visually) the default `radio` inputs: -~~~css +```css input[type="radio"] { left: -9999px; position: absolute; z-index: -1; } -~~~ +``` Then we give the corresponding `label` elements a little spacing and breathing room: -~~~css +```css label { cursor: pointer; padding: 10px 20px; @@ -71,11 +71,11 @@ label { 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: -~~~sh +```sh .slide-item { background: white; border-radius: 9999px; @@ -87,20 +87,20 @@ Remember that `.slide-item` I referenced earlier? That element will be the visua 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: -~~~css +```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 1037e91..0a3bd7a 100644 --- a/posts/audio-hotkeys-on-linux-mint.md +++ b/posts/audio-hotkeys-on-linux-mint.md @@ -8,7 +8,7 @@ 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 +```sh // Volume Up pactl set-sink-volume @DEFAULT_SINK@ +5% @@ -17,5 +17,5 @@ pactl set-sink-volume @DEFAULT_SINK@ -5% // Toggle Mute pactl set-sink-mute @DEFAULT_SINK@ toggle -~~~ +``` diff --git a/posts/aui.md b/posts/aui.md index 37cbd2f..f46eddf 100644 --- a/posts/aui.md +++ b/posts/aui.md @@ -14,27 +14,27 @@ 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 +```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. -~~~css +```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) -~~~css +```css button { -webkit-appearance: none; -moz-appearance: none; @@ -49,11 +49,11 @@ button { position: relative; transition: all ease .3s; } -~~~ +``` Then we separate the specific confirm and cancel button styles into their own class selectors: -~~~css +```css button.confirm { background: #4A90E2; border-color: #3672B6; @@ -65,7 +65,7 @@ button.cancel { border-color: #B8B8B8; color: #6F6F6F; } -~~~ +``` ### Playing with pseudo elements @@ -73,7 +73,7 @@ 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. -~~~css +```css button:before { background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); border-radius: 125px; @@ -85,18 +85,18 @@ button:before { transition: all ease .3s; width: 92%; } -~~~ +``` ### Adding interaction The final step is adding the user hover interaction: (Remember that `transition` property?) -~~~css +```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 36b3e4b..c061aef 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 dae8960..4ccbe5c 100644 --- a/posts/basic-gulp-build-for-sass.md +++ b/posts/basic-gulp-build-for-sass.md @@ -6,7 +6,7 @@ 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 +```js var gulp = require('gulp'); var shell = require('gulp-shell'); var sass = require('gulp-sass'); @@ -33,7 +33,7 @@ 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`. -~~~js +```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,9 +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): -~~~sh +```sh gulp.task('generate', shell.task('jekyll serve')); -~~~ +``` Don't worry if this `generate` isn't clear, we come back to that later. @@ -77,41 +77,41 @@ 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: -~~~js +```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 +```js .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError)) /* 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) -~~~js +```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`) -~~~js +```js /* Build */ @@ -119,7 +119,7 @@ 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 9befa46..54bc56b 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 +```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 +```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 dca86c4..83caf2b 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 +```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 +```sh apm -L -~~~ +``` To make these changes permanent on boot: -~~~sh +```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 d87cea3..176cf57 100644 --- a/posts/berg.md +++ b/posts/berg.md @@ -18,25 +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): -~~~sh +```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: -~~~sh +```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: -~~~sh +```sh git submodule add git@codeberg.org:USERNAME/pages.git pages -~~~ +``` ## The Workflow @@ -44,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: -~~~sh +```sh USERNAME.codeberg.page -~~~ +``` If you want to use your own custom domain (who doesn't?) then continue reading. @@ -54,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: -~~~sh +```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: -~~~sh +```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 c268a34..832a76a 100644 --- a/posts/better-box-shadows.md +++ b/posts/better-box-shadows.md @@ -39,21 +39,21 @@ Box shadow on HTML elements has b Let's take a look at a default configuration of `box-shadow`: -~~~css +```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: -~~~html +```html
-~~~ +``` -~~~css +```css .box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* Styles to make it less ugly */ @@ -65,7 +65,7 @@ We should also add some minimal styling to cleanup the `.box-container` a little position: relative; width: 250px; } -~~~ +``` Which would render as this: @@ -79,17 +79,17 @@ 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 +```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`. -~~~css +```css .box-container { /* No box-shadow needed on this element anymore */ /* Styles to make it less ugly */ @@ -101,13 +101,13 @@ Remember to set this child element behind it's parent by adding `z-index: -1`. 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: -~~~sh +```sh .box-container-inner { bottom: 0; /* The box-shadow is added here now */ @@ -118,7 +118,7 @@ We also need to target the `box-container-inner` element set inside the current width: 94%; z-index: -1; } -~~~ +``` Which will make the drop-shadow render with a little more realistic depth: @@ -131,7 +131,7 @@ We could stop now and have a decent drop-shadow that is certainly easier on the So your final code would look like this: -~~~css +```css .box-container { /* Styles to make it less ugly */ background: white; @@ -153,7 +153,7 @@ So your final code would look like this: 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 58b200b..abbd710 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: -~~~html +```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): -~~~css +```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: -~~~css +```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 775456c..daf7b08 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. -~~~css +```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,9 +170,9 @@ On top of that, I decided to also implement Filament Group's -~~~ +``` I could probably optimize this further by only calling these scripts if an image is actually present in the article post, but this fits my needs nicely as is. @@ -183,7 +183,7 @@ The only images I use are those included in supported blog posts, so the first s I've also included responsive image sizes for further optimization based on screen size and loading speeds. -~~~html +```html
-~~~ +``` What about users with JavaScript disabled I hear you ask? It's time for noscript to save the day: -~~~html +```html -~~~ +``` ### HTTPS & Caching diff --git a/posts/cheap-portable-pi.md b/posts/cheap-portable-pi.md index d77c110..ef5623b 100644 --- a/posts/cheap-portable-pi.md +++ b/posts/cheap-portable-pi.md @@ -96,7 +96,7 @@ I will be setting up this "portable pi" via [headless installation](https://www. - Next add an empty file named `wpa_supplicant.conf` - Open the `wpa_supplicant.conf` file in a code / text editor and paste the following (be sure to change `country` to your proper country code, as well as properly setting your network name / password): -~~~sh +```sh ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev update_config=1 country=US @@ -106,7 +106,7 @@ network={ psk="Your WPA/WPA2 security key" key_mgmt=WPA-PSK } -~~~ +``` - Unmount the microSD device, then place the microSD card in your RPi Zero @@ -119,9 +119,9 @@ network={ Open the terminal on your Raspberry Pi desktop and enter the following command: -~~~sh +```sh ssh pi@raspberrypi.local -~~~ +``` You will then be asked if you wish to trust this device (say yes), then prompted for the `pi` user's password - which is `raspberry`. After a moment you will be directly connected to your Raspberry Pi Zero. Hooray! @@ -139,19 +139,19 @@ That's it! Next we will need to download and run the drivers needed for our 3.5-inch display to play nicely with our Pi Zero (just a blank white screen doesn't help us much). While connected to our RPi Zero via SSH, run the following commands: -~~~sh +```sh wget http://kedei.net/raspberry/v6_1/LCD_show_v6_1_3.tar.gz -~~~ +``` If you have snail-paced rural internet like I do, now is a good time to go and grab a coffee while this download completes. Once the download has finished, extract the contents and navigate to the new directory and install the driver: -~~~sh +```sh sudo tar xzf LCD_show_v6_1_3.tar.gz cd LCD_show_v6_1_3 sudo ./LCD35_v -~~~ +``` Once completed, the RPi Zero will reboot and everything should work as expected! diff --git a/posts/css-slope-graphs.md b/posts/css-slope-graphs.md index b694933..36250a5 100644 --- a/posts/css-slope-graphs.md +++ b/posts/css-slope-graphs.md @@ -16,7 +16,7 @@ For this concept we will actually be building this graph out of `tables` - crazy (But more on that in the CSS section) -~~~html +```html

Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars)
Source: Statisa 2018

@@ -54,7 +54,7 @@ For this concept we will actually be building this graph out of `tables` - crazy
-~~~ +``` As you can see, nothing too fancy is happpening here. Pay close attention to the `data-set` and `data-name` variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements. @@ -64,7 +64,7 @@ As you can see, nothing too fancy is happpening here. Pay close attention to the To avoid overwhelming your brain all-at-once, let's break the CSS down into bite-sized chunks, starting with the base styling: -~~~css +```css @import url('https://opentype.netlify.com/et-book/index.css'); * { box-sizing: border-box; @@ -93,7 +93,7 @@ table { text-align: left; width: 100%; } -~~~ +``` Pretty basic stuff. @@ -106,7 +106,7 @@ 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 -~~~css +```css @media(min-width:800px) { table { display: block; @@ -204,11 +204,11 @@ Now we need to design how our slope graph will look on larger screens / desktops width: 56%; } } -~~~ +``` All that's left are some minor styles to make everything look nice on mobile: -~~~css +```css @media(max-width:800px) { p { margin: 2rem 0; @@ -221,7 +221,7 @@ All that's left are some minor styles to make everything look nice on mobile: text-align: right; } } -~~~ +``` ## Not the most practical This slope graph concept is far from perfect for use in real-world situations. The fact that you need to manually render each point of data yourself makes this implementation quite annoying for more in-depth projects. diff --git a/posts/css-variables.md b/posts/css-variables.md index 17df49f..f0b389f 100644 --- a/posts/css-variables.md +++ b/posts/css-variables.md @@ -8,12 +8,12 @@ The CSS language is becoming even more awesome and powerful everyday. In this qu Let's just jump right in - this is how you create variables in vanilla CSS: -~~~css +```css :root { --base-color: #e0e0e0; --text-color: #111; } -~~~ +``` We are using the `:root` selector at the very top of our CSS file in order to call these variables into any elements in the rest of our document. This is normally the safest way to include variables. @@ -21,7 +21,7 @@ As for the variables themselves, you declare that they are variables using the ` Now let's use those variables: -~~~css +```css .header { border: 1px solid var(--base-color); } @@ -30,7 +30,7 @@ Now let's use those variables: background-color: var(--base-color); color: var(--text-color); } -~~~ +``` That's it! It's also good to know that CSS variables have pretty decent [browser support](https://caniuse.com/#feat=css-variables) (who likes IE11 anyway). diff --git a/posts/current-color.md b/posts/current-color.md index 1e82067..3cad2ff 100644 --- a/posts/current-color.md +++ b/posts/current-color.md @@ -10,15 +10,15 @@ Let's assume with have a single div with the following properties: -~~~css +```css div { color: dodgerblue; } -~~~ +``` If we wanted to use that same color for other properties on elements inside that initial `div`, it's simple - we just need to call `currentColor` like so: -~~~css +```css div { color: dodgerblue; } @@ -30,7 +30,7 @@ div header { div a { border-bottom: 1px solid currentColor; } -~~~ +``` **Sidenote**: If you re-declare the default `color` property further along in your CSS, the `currentColor` value will update according to the last color set. diff --git a/posts/default-brower-forms.md b/posts/default-brower-forms.md index ffe928a..c465160 100644 --- a/posts/default-brower-forms.md +++ b/posts/default-brower-forms.md @@ -16,7 +16,7 @@ This form isn't going to win any design awards or blow anyone away with its crea Let's take a look at the HTML of the entire form: -~~~html +```html
Personal Details @@ -71,7 +71,7 @@ Let's take a look at the HTML of the entire form: -~~~ +``` Notice the `fieldset` and `legend` elements? I bet you don't see or hear about those HTML items very often. By default, `fieldset` allows sibling or related inputs to be semantically grouped together. The `legend` elements give the user great visual cues about which items are grouped together, helping to focus on each section individually as they complete the form. Use these grouping elements as much as possible (when it makes sense of course) for a better guided experience for your users. @@ -81,7 +81,7 @@ Avoid making your own custom sections and instead use these existing HTML semant Now it's time to style this form with only 6 property declarations: -~~~css +```css form label { display: block; } @@ -97,7 +97,7 @@ form input[type="reset"], form input[type="submit"] { width: auto; } -~~~ +``` Of course, you can always add minor adjustments (like in my demo example above) diff --git a/posts/default-html-style-updates.md b/posts/default-html-style-updates.md index 85a807b..8896d19 100644 --- a/posts/default-html-style-updates.md +++ b/posts/default-html-style-updates.md @@ -10,38 +10,38 @@ But that doesn't mean some minor, modern improvements couldn't be made... A little extra breathing room for a website's content never hurts. Browser defaults set the inner content too close to the main window borders, creating mild eye strain to focus on the far edges of the screen when reading. Pair this with a typeface set too small and you've got a recipe for disaster (in terms of user experience and accessibility). Luckily for us, adding two basic CSS properties fixes all of our readability woes. All that is required is a simple boost to the existing `margin` property set on the `body` element (I personally lean towards a very specific `1.5em`) and overriding the default `font-size` to `18px`[^1]: -~~~css +```css body { font-size:18px; margin:1.5em; } -~~~ +``` There is one *small* caveat with setting the `font-size` across the whole `body` element: code elements set in `monospace`. They will stand out larger than the other fonts found in the document (due to variations in different typeface heights, spacing etc.) so we will need to target these elements specifically: -~~~css +```css code { font-size:14px; /* Word wrap is optional if you plan to have long inline code snippets */ word-wrap:break-word; } -~~~ +``` ## Code & Pre Tags Since we've mentioned `code` elements, let's fix those as well. The existing styling for inline code snippets and larger pre-formatted text sections leave a lot to be desired. They don't provide any means to wrap their inner content or make use of `overflow` properties to avoid vertically scrolling on smaller device screens. Sharing code examples becomes quite a pain when your webpage's flow and layout is broken just by including them. Browsers could fix this easily enough by defaulting to: -~~~css +```css pre { overflow:auto; } -~~~ +``` ## Basic Dark Mode Support Barebones styling in current web browsers have no sane defaults[^2] for system-level dark mode. What a huge letdown. This is where the most "drastic" changes will be implemented with our browser default updates. We will need the browser to change the main `background-color`, along with resetting both the text and anchor link `color` for improved accessibility. Browser defaults for anchor link color in "light mode" are blue/purple - so I've opted towards using gold, orange and orangered in dark mode respectively: -~~~css +```css /* Dark mode */ @media (prefers-color-scheme: dark) { @media not print { @@ -51,7 +51,7 @@ Barebones styling in current web browsers have no sane defaults[^2] for system-l a:hover,a:focus{color: orangered;} } } -~~~ +``` That is probably the most streamlined dark mode on the web... @@ -65,7 +65,7 @@ Do you want to know an incredible feature built into browsers? *Window resizing* There isn't much else to say, really. I think these tiny tweaks would greatly improve the default browser experience and maybe even convince others to just *use* these defaults instead of falling down the CSS rabbit hole (as fun as that might be sometimes). For easier convenience, I'll leave the full set of CSS changes below: -~~~css +```css body { font-size:18px; margin:1.5em; @@ -84,7 +84,7 @@ pre { a:hover,a:focus{color: orangered;} } } -~~~ +``` [^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/dv.md b/posts/dv.md index c243eca..752f99f 100644 --- a/posts/dv.md +++ b/posts/dv.md @@ -6,19 +6,19 @@ I think it's safe to assume most web designers and developers are familiar with If I want my `.box` element to take up the entire height of a device's screen: -~~~css +```css .box { height: 100vh; } -~~~ +``` Or I want my `.box` element to take up the entire width of a device's screen: -~~~css +```css .box { width: 100vw; } -~~~ +``` These are wonderful options to have - specifically for those of us designing web applications. But there are some *minor* issues with `vh` and `vw`. @@ -34,12 +34,12 @@ Lucky for us there exists an awesome *new-ish* CSS API called dynamic viewport-p So our examples above would translate into: -~~~css +```css .box { height: 100dvh; width: 100dvw; } -~~~ +``` ### What About Browser Support? diff --git a/posts/easy-custom-radio-inputs.md b/posts/easy-custom-radio-inputs.md index a31a21f..ca6ea62 100644 --- a/posts/easy-custom-radio-inputs.md +++ b/posts/easy-custom-radio-inputs.md @@ -16,7 +16,7 @@ This is what we will be designing: ## The bones of our radio inputs (HTML) -~~~html +```html @@ -31,16 +31,16 @@ This is what we will be designing: -~~~ +``` I know it looks like a lot is going on here, but it's pretty straightforward so let's unpackage line by line: ### Radio inputs -~~~html +```html -~~~ +``` This is the default `radio` input. We give it: @@ -67,7 +67,7 @@ This is looking pretty terrible - but that's nothing some good ol' CSS can't fix First we give some basic styling to our `label` and `input` classes (along with hover states). The `radio` element is actually hidden from view, but by using the `visibility` attribute we still keep it accessible for screen-readers. -~~~css +```css .radio-label { background: white; border: 1px solid #eee; @@ -90,21 +90,21 @@ First we give some basic styling to our `label` and `input` classes (along with position: absolute; visibility: hidden; } -~~~ +``` Remember that `span` element inside the label? We set it's `user-select` property to `none` so we avoid any possible issue with the user selecting the text on-click: -~~~css +```css .radio-label span { -webkit-user-select: none; -moz-user-select: none; user-select: none; } -~~~ +``` Next we include the default empty selection element (to mimic the original radio input) via a pseudo element: -~~~css +```css .radio-label:before { background: #eee; border-radius: 50%; @@ -117,7 +117,7 @@ Next we include the default empty selection element (to mimic the original radio transition: .3s ease background-color; width: 30px; } -~~~ +``` ## A Few Final Steps @@ -125,7 +125,7 @@ The final step is adding the custom styling for when an `input` item is selected You will notice the use of a `base64` element for the custom checkmark - feel free to subsitute this for an actual image or none at all (this is just my personal design preference). -~~~css +```css .radio-btn:checked + .radio-label { background: #ECF5FF; border-color: #4A90E2; @@ -137,13 +137,13 @@ You will notice the use of a `base64` element for the custom checkmark - feel fr background-position: center; background-size: 15px; } -~~~ +``` **And that's it.** For easier reference the entire CSS file can be found below: -~~~css +```css .radio-label { background: white; border: 1px solid #eee; @@ -192,7 +192,7 @@ For easier reference the entire CSS file can be found below: background-position: center; background-size: 15px; } -~~~ +``` --- @@ -202,7 +202,7 @@ Since this demo is based off a survey-type questionaire, wouldn't it be interest We can do so by adding `positive`, `neutral` and `negative` class names to the radio inputs with their own respective properties: -~~~css +```css .radio-btn.positive:checked + .radio-label { background: #EAFFF6; border-color: #32B67A; @@ -221,6 +221,6 @@ We can do so by adding `positive`, `neutral` and `negative` class names to the r background-color: #E75153; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg=='); } -~~~ +``` I hope this shows new designers that simple custom radio inputs aren't so hard to implement after-all and can actually be pretty fun to design. diff --git a/posts/flexbox-bar-graphs.md b/posts/flexbox-bar-graphs.md index f7b071f..b792b97 100644 --- a/posts/flexbox-bar-graphs.md +++ b/posts/flexbox-bar-graphs.md @@ -29,7 +29,7 @@ The main "secret" of this project is that our graphs are constructed out of HTML All bases are covered! -~~~html +```html @@ -63,7 +63,7 @@ All bases are covered!
Web Performance Results
-~~~ +``` Nothing crazy is happening here - just your standard HTML table structure. The one main thing to notice is the `--data-set` CSS variable placed inline on each data point. This will be important for our CSS to configure the individual bar graphs properly. @@ -81,7 +81,7 @@ Here we target just our table elements with the `data-id` of `flexbox-bar-graph` The base `:root` element holds all of our bar graph colors. Change these as you see fit! -~~~css +```css /* Bar Graph color variables */ :root { --bar-color-1: #357EC7; @@ -90,9 +90,9 @@ The base `:root` element holds all of our bar graph colors. Change these as you --bar-color-4: #7D0541; --bar-color-5: #FFD801; } -~~~ +``` -~~~css +```css [data-id="flexbox-bar-graph"] { border-collapse: collapse; margin: 4rem 0 6rem; @@ -118,7 +118,7 @@ The base `:root` element holds all of our bar graph colors. Change these as you [data-id="flexbox-bar-graph"] tbody td p { margin: 0; } -~~~ +``` ### Desktop @@ -127,7 +127,7 @@ Now we set your "visual" bar graphs to show at a set width (in this example it i - The `thead tr th:nth-child(x):before` elements create the square "legends" beside each individual data point heading - The `tbody tr td:nth-of-type(x) span` elements are the bars themselves -~~~css +```css @media(min-width: 1000px) { [data-id="flexbox-bar-graph"] { background: transparent; @@ -250,7 +250,7 @@ Now we set your "visual" bar graphs to show at a set width (in this example it i text-align: center; } } -~~~ +``` ## Bonus Styling @@ -263,7 +263,7 @@ In the /.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. diff --git a/posts/heif.md b/posts/heif.md index 32a8166..7eb32ef 100644 --- a/posts/heif.md +++ b/posts/heif.md @@ -24,12 +24,12 @@ For this example script we are going to convert the image to JPG format. You can 7. Set the area "Pass input" to `as arguments` 8. Enter the following code below as your script and type `⌘-S` to save (name it something like "Convert HEIC/HEIF to JPG") -~~~sh +```sh for f in "$@" do /opt/homebrew/bin/heif-convert "$f" "${f%.*}.jpg" done -~~~ +``` ## Making Edits diff --git a/posts/html-dark-mode.md b/posts/html-dark-mode.md index 0d94def..c3c751d 100644 --- a/posts/html-dark-mode.md +++ b/posts/html-dark-mode.md @@ -11,9 +11,9 @@ this created by *jacksonchen666*: [These 3 Lines of CSS Will Give You Dark Mode But today I wanted to show how to add dark mode functionality to a website without *any CSS at all*. -~~~sh +```sh -~~~ +``` Add that line inside the `head` tags on your HTML files and you're good to go. diff --git a/posts/jekyll-sourcehut.md b/posts/jekyll-sourcehut.md index 5ae7196..c29d649 100644 --- a/posts/jekyll-sourcehut.md +++ b/posts/jekyll-sourcehut.md @@ -38,7 +38,7 @@ In order to have your Jekyll site build and push the correct files live, you wil To make things easier, you can copy the build file below (remember to use your *own* information for usernames, git repo naming etc): -~~~sh +```sh image: debian/stable oauth: pages.sr.ht/PAGES:RW packages: @@ -60,7 +60,7 @@ tasks: tar -cvz . > ../../site.tar.gz - upload: | acurl -f https://pages.sr.ht/publish/$site -Fcontent=@site.tar.gz -~~~ +``` Save this file as `.build.yml` and place it in the root directory of your Jekyll source code. @@ -73,17 +73,17 @@ If you're like me and want to use your own custom domain - have no fear! This pr First, add a new A Record through your domain provider: -~~~sh +```sh @ IN A 173.195.146.139 -~~~ +``` Then change the following `environment` parameter inside your existing `.build.yml` file: -~~~sh +```sh environment: site: yourcustomdomain.com -~~~ +``` And that's it - custom domain set! If you run into any issues check out the [official documentation on custom domains](https://srht.site/custom-domains). diff --git a/posts/mail.md b/posts/mail.md index 96950e6..7521630 100644 --- a/posts/mail.md +++ b/posts/mail.md @@ -26,15 +26,15 @@ Inside this folder you should see something similar to the following structure: Once saved, open your terminal, navigate to the project you wish to apply this new patch to: -~~~sh +```sh cd my-path/very-cool-project -~~~ +``` and then run: -~~~sh +```sh git apply ~/Patches//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/mongodb-arch.md b/posts/mongodb-arch.md index 1b74463..f2d01f5 100644 --- a/posts/mongodb-arch.md +++ b/posts/mongodb-arch.md @@ -12,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: -~~~sh +```sh 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: -~~~sh +```sh mkdir -p /data/db/ chmod -R 777 /date/db -~~~ +``` ## What About My "Tools"? @@ -29,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: -~~~sh +```sh 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: -~~~sh +```sh 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/my-pi-desktop.md b/posts/my-pi-desktop.md index 083d578..d4926f8 100644 --- a/posts/my-pi-desktop.md +++ b/posts/my-pi-desktop.md @@ -81,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: -~~~sh +```sh sync; echo 3 | sudo tee /proc/sys/vm/drop_caches -~~~ +``` ### Write diff --git a/posts/obvious-js-injection-fallback.md b/posts/obvious-js-injection-fallback.md index 366fcfe..8d3da3a 100644 --- a/posts/obvious-js-injection-fallback.md +++ b/posts/obvious-js-injection-fallback.md @@ -12,20 +12,20 @@ Let's pretend that we have a total tally that pulls in the number of current use Here we create an empty `h2` tag that will update with the current number of users via js: -~~~html +```html

-~~~ +``` ### Javascript You'll have to use your imagination here and assume that the `totalTally` variable pulls in the numbers dynamically via API: -~~~html +```html var totalTally = "273,677" /* This would pull something dynamically in prod */ document.getElementsByClassName("total-tally")[0].innerHTML=totalTally; -~~~ +``` ## The Problem @@ -37,11 +37,11 @@ The easiest way to avoid these types of empty tags - add static content. I know ### HTML (updated) -~~~html +```html

200,000+

-~~~ +``` You might be reading this and saying to yourself, "Wow! Thanks Captain Obvious!" and that's a fair reaction. This is an *obvious* demo on purpose. If even one single reader learns to avoid leaving empty HTML tags that are solely dependent on Javascript injection, then I'd say this demo was a huge success. diff --git a/posts/openring.md b/posts/openring.md index cbb6c3e..4841105 100644 --- a/posts/openring.md +++ b/posts/openring.md @@ -12,9 +12,9 @@ So, I thought others might be interested in how I've implemented openring throug You can pull the project [directly via SourceHut](https://sr.ht/~sircmpwn/openring/) if you wish, but I would recommend installing through your default package manager. I'm running Arch, so for me it was as simple as running: -~~~sh +```sh yay -S openring -~~~ +``` That's it. I now have full local access to openring! @@ -24,7 +24,7 @@ You *could* setup a whole new directory specifically for your openring files, bu ### openring-in.html Contents -~~~html +```html

Articles from blogs I follow around the world wide web

@@ -75,7 +75,7 @@ You *could* setup a whole new directory specifically for your openring files, bu color: #555; } -~~~ +``` > 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. @@ -89,7 +89,7 @@ To simplify things, we are going to place our main commands in a single build sc Place the following inside that file: -~~~sh +```sh openring \ -s https://example.com/feed.xml \ -s https://example.com/feed.xml \ @@ -97,25 +97,25 @@ openring \ < _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: -~~~sh +```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: -~~~ruby +```ruby {% raw %}{% include openring-out.html %}{% endraw %} -~~~ +``` ## Build It & They Will Come diff --git a/posts/poor-mans-full-bleed.md b/posts/poor-mans-full-bleed.md index 5bd18fe..9621e78 100644 --- a/posts/poor-mans-full-bleed.md +++ b/posts/poor-mans-full-bleed.md @@ -16,7 +16,7 @@ What does this have to do with full-bleed exactly? Well, the CSS we will be usin Let's create a single-column blog layout for this example. We will include a heading, some paragraphs, an image, and a blockquote to keep it simple: -~~~html +```html

Main Heading

@@ -34,11 +34,11 @@ Let's create a single-column blog layout for this example. We will include a hea

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.

-~~~ +``` This works well as it is, but we will need to "section" off our different areas of content based on whether we want them `full-bleed` or not. We do this with - you guessed it - the `section` element. In this demo we want the image and blockquote to become `full-bleed` when rendered, so we'll add the `full-bleed` class to those sections for now (more on that later): -~~~html +```html
@@ -66,7 +66,7 @@ This works well as it is, but we will need to "section" off our different areas
-~~~ +``` That's it for the HTML! @@ -74,7 +74,7 @@ That's it for the HTML! Now take a deep breath and get ready for some hard CSS work: -~~~css +```css article { width: 100%; } @@ -87,7 +87,7 @@ article section { article section.full-bleed { max-width: 100%; } -~~~ +``` That's it. *Really*. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as "full-bleed", just wrap it in a `section` tag and sick the `full-bleed` class on it. Done and done. @@ -97,11 +97,11 @@ Obviously you'll want to add more styling to clean-up and make your full-bleed l You could also further customize your options by including a class like `half-bleed`, which maybe only expands slightly outside the main section `max-width`: -~~~css +```css article section.half-bleed { max-width: 960px; } -~~~ +``` ### Sidenote diff --git a/posts/rvm.md b/posts/rvm.md index fb78025..c948d0e 100644 --- a/posts/rvm.md +++ b/posts/rvm.md @@ -10,31 +10,31 @@ So this post is more or less a helpful document for my future self. If it happen Make sure you have the basic packages first: -~~~sh +```sh 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: -~~~sh +```sh 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`: -~~~sh +```sh 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! -~~~sh +```sh rvm install ruby-X.X.X -~~~ +``` diff --git a/posts/sublime.md b/posts/sublime.md index 4a203cb..d319a73 100644 --- a/posts/sublime.md +++ b/posts/sublime.md @@ -20,31 +20,31 @@ 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) -~~~sh +```sh apk add flatpak adduser 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: -~~~sh +```sh flatpak install flathub com.sublimetext.three -~~~ +``` You could stop now and simply open Sublime anytime by running the following command in your terminal: -~~~sh +```sh 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 -~~~sh +```sh 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! diff --git a/posts/vscode.md b/posts/vscode.md index 9b3d0bb..5e46f6f 100644 --- a/posts/vscode.md +++ b/posts/vscode.md @@ -14,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: -~~~sh +```sh 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: -~~~sh +```sh 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`): -~~~sh +```sh 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! \ No newline at end of file -- cgit v1.2.3-54-g00ecf