Pagefind: Static Search for Astro Sites
Pagefind is a new static site search tool built in Rust and ideal for Astro sites.
Blog Posts
I write on whatever topics seem most interesting at the time.
Safari Mobile is Ignoring My CSS
Safari will upscale your text if it thinks text on your site is too small. Here's how to fix it.
How to Create and Use Multiple VSCode Profiles
VSCode profiles are a great way to keep your work and personal projects separate. In this post, I'll show you how to create and use multiple VSCode profiles.
JavaScript Reduce Method
The reduce method is one of the most powerful array methods in JavaScript, but it can also be the most confusing. In this post, I'll explain how to use the reduce method in JavaScript.
VS Code Keyboard Shortcuts for Coding Productivity
VS Code is a powerful tool made more powerful and quick by a few key keyboard shortcuts. Here are VS Code keyboard shortcuts I use every day to be more productive while coding.
Introduction to Terminal Commands
When you’re first learning web development, the terminal can intimidating. Once you grasp the basics, however, you can move much more efficiently for most tasks through the command line. This post will introduce you to basic command line commands.
Templating Classes in Astro
You can included templated language in Astro components to scaffold out dyanmic classes with the class:list directive.
Listing Array Items in Natural Language
When you have a list of name or items in an array, you can quickly convert the array into a string so they read in natural language (*, *, and *).
How to Update Npm Packages Safely With Npm Check Updates
When you come back to an old web dev project, it’s important to update your packages to get new features, bug fixes, and security patches. NPM Check Updates is a CLI that will help you safely make those updates.
Custom HTML Prompt With Keyboard Maestro
Keyboard Maestro’s Custom Floating HTML Prompt opens the door to endless automation with web languages and tools like HTML, CSS, and JavaScript. I wrote a custom HTML prompt script in Keyboard Maestro that let’s me quickly copy YouTube links from my channel.
Add Styling to Keyboard Keys with CSS
You can style keyboard input keys with the <kbd> element so it looks more like a physical keycap. Here’s the custom CSS I use on my site.
Create a Lazy Loading Custom Youtube Embed
Lazy load YouTube embeds and use the YouTube thumbnail as a cover. I’ll also show you how to add your own custom play button on the thumbnail image and (as a bonus) how to use the embed as a custom shortcode or partial in the Hugo SSG.
JavaScript new Date() Returns NaN or is Blank in Safari
Why is my JavaScript not showing in Safari? Are you trying to add dates in the wrong format? Safari does not allow for all date formats and trying to add new events may show blank or throw an error in Safari if you’re using the wrong format.
How Do You Write a Variable in JavaScript?
Learn how to write JavaScript variables for beginners. I’ll cover three variable keywords, naming conventions, and variable values.
Introduction to JavaScript
This guide offers tips for learning JavaScript, emphasizing the importance of focusing on concepts over syntax, building projects from scratch, embracing failure, and iterating to improve skills.
Compile and Minify SCSS with Gulpjs in Hugo
With GulpJS, you can automatically compile, prefix, minify, and rename your SCSS to CSS.
How to Crop a Gif to a Square
If you need to crop a gif to 1:1 or crop a gif to square, there's a great command line tool called gifsicle that can crop, resize, and adjust your gif in a bunch of different ways.
Git Commands
A basic guide to regular git commands I always forget…
Hugo Setup
A basic guide to setting up a Hugo site with GitHub and Netlify.