Since I decided to move to a PostCSS workflow from SASS, there are a few other plugins that I want to look at to consider adding them to the workflow. I'm not 100% sure that any of these plugins will make it to the PostCSS process. I'm documenting them here to keep a record of what the thought process was. Management: These plugins will control behavior and results of using PostCSS postcss-nestedhttps://github.com/postcss/postcss-nested will cover nesting until we can be certain that all browsers can handle nesting postcss-sortinghttps://github.com/hudochenkov/postcss-sorting sorts the properties in a rule postcss-easy-importhttps://github.com/TrySound/postcss-easy-import inlines the content of imported files...
Once I got a basic migration working how I want to, I can look at details that go beyond content and deal with styling and layout. Typography And Other CSS Work As much work as I've done in typography to make the Eleventy site look like the WordPress version, there is work still to do. Typography The first thing to do is to create a more apealing typograhical experience. I created a major third typographical scale using Type Scalehttps://typescale.com/. I increased the base font size slightly from 1.125 to 1.25 to make the text easier to read. We first define...
For a while I've been thinking about moving my blog out of WordPress and into a static site. There are a number of reasons why I want to do this but the main one relates to the block editor The block editor makes it harder for me to create custom content the way that I want to do it. Rather than use blocks, I prefer to use HTML and CSS to create layouts. With every new release, WordPress becomes more block-oriented and less acommodating to other design and development patterns. You have to use plugins to re-enable the traditional editor...
Web fonts are awesome but there are times when they are not enough. There may be foundries that don't provide web versions of their fonts or licenses to use their fonts on the web. Chromium browsers now have the choice of using local fonts for your web projects. This will allow users to take full advantage of the fonts they own for their projects without violating licenses or other potential legal issues. Feature detection Since the feature is only supported in Chrome and Edge but not on other Chromium Browser like Opera or Samsung Internet, Firefox or Safari, we need...
The more I play with color.jshttps://colorjs.io, 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 works. The tools I've built each tool as a separate Vitehttps://vitejs.dev/ project to make sure I got them working. A future iteration of this project will combine them into a single project. The future version will also move to Typescript as I become more comfortable with types and the Typescript extensions to Javascript. Color conversion The first...
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 fun. To modify the appearance of lists we'll look at the list-style-typehttps://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type property and the @counter-stylehttps://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style at-rule. list-style-type list-style-type lets CSS authors select from a list of available list styles to use. THe list of available values for both ordered and unordered lists is in the MDN pagehttps://developer.mozilla.org/en-US/docs/Web/CSS/list-style-typevalues We'll use the values on that list to create custom ordered and unordered...
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 to the page and additional information that may be useful when working with events. What are events? The Eventhttps://developer.mozilla.org/en-US/docs/Web/API/Event API represents an event that happens in the DOM. See MDN's Event referencehttps://developer.mozilla.org/en-US/docs/Web/Events page for a list of the different types of events that are available. Handling events Browsers generate events all the time. When you move the mouse or tab...
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: classNamehttps://developer.mozilla.org/en-US/docs/Web/API/Element/className and classListhttps://developer.mozilla.org/en-US/docs/Web/API/Element/classList. For this post we'll concentrate in classList since it provides methods to manipulate the class attribute and it avoids the string manipulation that you'd have to do when working with className. classList is a read-only property that returns a live space-separated list of the class attributes of the element that we can manipulate using classList methods The classList methods are: addhttps://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add : Adds...
Starting in Node 20.6.0https://nodejs.org/en/blog/release/v20.6.0 there is built-in support for loading environment variables from a .env file into process.envhttps://nodejs.org/docs/latest/api/process.htmlprocessprocessenv as recommended in The Twelve-Factor Apphttp://12factor.net/config methodology. In this post we'll talk about .env, what it is, why use it, and how it works in Node. What is .env file and why use it? An .env file contains all configuration files for your application like passwords, API keys and other potentially sensitive information. The idea comes from the Twelve-Factor App Methodologyhttps://12factor.net/ that suggest that we store config in environment variables. These environment variables are easy to change and they won't be checked...
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 disabled, do you know who asked Google to disable satellite imagery? You’re assuming it was Google’s decision when it might not have been. ^1 Unclassified or commercial satellite imagery is not good enough for you to be able to see what’s going on in the ground, it is also very expensive. You’d need aircraft-generated imagery to get to high-resolution images. The reasons why that...
