My Markdown Cheatsheet
One of the reasons to move my blog from WordPress to Eleventy was the flexibility of convert the Markdown I write into proper HTML without using raw HTML in the Markdown files. But adding Markdown-it...
Color tools and experiments - Color Converter
The more I play with color.js, the more I love it. I created two simple tools on top of it to make my life easier. The first one is a color converte. This post will discuss why I created it and how it...
Custom List Styles in CSS
CSS lists look nice with the standard list styles but there are cases when we may want to use special characters in the styles, the language that we use may have special, or we may just want to have...
Javascript events
When working on a demo for a different post, I realised that I don't really know how events work beyond how to add them to the page. This post will look at events and events listeners, how to add them...
Programmatically manipulating CSS classes
When working with Javascript there will be times when we need to change the CSS we apply to the web pages we're working on. Javascript provides two methods to manipulate an HTML element's classes:...
Node native .env support
Starting in Node 20.6.0 there is built-in support for loading environment variables from a .env file into process.env as recommended in The Twelve-Factor App methodology. In this post we'll talk about...
Testing Footnotes
I can use Google Earth Web and get the satellite image. I can’t get detailed resolution and the satellite image I get doesn’t show anything about the current war on either side. If it has been...
Updates to @font-face (part 2) (2023)
@font-face has been around for a while and it works fine for the existing monochrome, one file per style fonts that we've been using so far. CSS Fonts level 4 introduced two new properties to the src...
Updates to @font-face (2023)
With new CSS technologies, it's good to look at new or updates descriptors inside the @font-face at-rule. font-weight, font-style and font-stretch # font-weight,font-style, and font-stretch can now...
Testing Mermaid
graph LR; A[Want graphs in 11ty] -->|Search Plugin| B(Found plugin); B --> C{Use plugin?}; C -->|Yes| D[NICE GRAPHS]; C -->|No| E[NO...