These are more random, miscelaneous, items that I'm working on to make the site look as close as possible to the WordPress version of the site. Implement Archive Pagination The way I want the blog structured, the index page only has the last 10 published posts and a link to the archive. In the first iteration, I want the archive to be paginated on 10-item blocks. yaml --- layout: layouts/home.njk pagination: data: collections.posts size: 10 reverse: true permalink: "{% if pagination.pageNumber > 0 %}page-{{ pagination.pageNumber }}/{% endif %}index.html" --- The content of the post itself doesn't change. It remains the...
People who have been waiting for the Temporal proposal, and for browsers to release their implementations unprefixed, have reason to be happy : IETF has approved draft-ietf-sedate-datetime-extendedhttps://datatracker.ietf.org/doc/draft-ietf-sedate-datetime-extended/, which was the last block before moving Temporal to stage 4 in the TC-39 processhttps://tc39.es/process-document/. Now, short of major implementation issues reported to TC39, this should move to stage 4 once two interoperable implementations ship in browsers. Using the Temporal polyfillhttps://www.npmjs.com/package/temporal-polyfill provides a spec-compliant workaround for the API until browsers implement it natively. I discussed using the polyfill along with examples of how the API works in Revisiting the TC39 Temporal proposal/revisiting-the-tc39-temporal-proposal/
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...
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 plugins mean additional syntax to remember and different ways to use established Markdown-it syntax. This document is my attempt at remembering all the things I've added so I can continue to use them. This post is my attempt at a cheat sheet for the extra Markdown Elements that I use in this blog. The commands, as explained in this post, are designed for this blog...
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...
