One of the hardest things for me to understand in CSS is positioning: how to position an item the way I want it on the page. Over the years I've found out that there are multiple concepts associated with positioning: Display Box Model Containing Block Parent element Position z-index You can also work with perspective in CSS but that is not part of positioning so it will not be covered in this post Display The display CSS property defines an element is treated as a block or inline element and the layout used for its children, such as flow layout,...
The Streams API adds a set of tools to the web platform, allowing JavaScript to programmatically access streams of data received over the network and process them as desired by the developer. Basic Concepts As part of understanding streams, there are several concepts associated with streams that we need to be familiar with Chunks A chunk is a single piece of data that is written to or read from a stream. It can be of any type; streams can even contain chunks of different types. Most of the time, a chunk will not be the smallest unit of data for...
Reading, writing, and appending to files in Node is not trivial and has at least three different ways to perform each task: callback, sync callback, and promises. We will look at each of these methods for both reading and writing files to disk. To make things easier we use async/await in our promise-based code. This means that we limit our support to Node 14 end of life scheduled for April 2023, Node 16 end of life is scheduled for September 2023, and Node 18 the current release this is less of a concern for me than it used to be....
The Javascript Temporal proposal seeks a native fix for long-standing isues with Javascript's Date object as outlined in Fixing JavaScript Datehttps://maggiepint.com/2017/04/09/fixing-javascript-date-getting-started/: No support for time zones other than the user’s local time and UTC Parser behavior so unreliable it is unusable Date object is mutable DST behavior is unpredictable Computation APIs are unwieldy No support for non-Gregorian calendars Rather than patch the Date object, the proposal creates a new top-level object Temporal with the proposed changes Javascript now has: First class support for all time zones Support for DST-safe arithmetics An easy to use API for date computations Temporal objects...
CSS provides its own syntax for working with responsive images where it is appropriate. This works in a smiliar way to the srcset attribute in HTML. It lets authors specify images either by resolution or format and let the browser decide the best option to use. Although the most recent versions of browsers Chrome/Edge 113, Safari 16.4 with some limitations and Firefox 113 all claim to support the unprefixed version of image-set I've chose to write the examples with both -webkit- prefixed and unprefixed versions as a defensive measure. This ensures that the images will display in more browsers than...
I've built a Gulp system to generate HTML and PDF files. It works really well for that purpose. I saw Adam Argyle's Shortstackhttps://github.com/argyleink/shortstack starter project and it made me think it might be time to revisit bundling and CSS generation. This experiment will look at the following areas: Browserslist A sensible browserslisthttps://browsersl.ist/q=defaults default CSS PostCSShttps://postcss.org/ for the following: bundle all CSS into one file import from NPM, local or remote URLs postcss-preset-envhttps://preset-env.cssdb.org/ for latest CSS features JS Rolluphttps://rollupjs.org/ to do the following: bundle code treeshake import from NPM, local or remote URLs babel-preset-envhttps://babeljs.io/docs/en/babel-preset-env for latest JS features. Servers Browsersynchttps://www.browsersync.io/ A...
CSS Custom Properties also known as CSS Variables rock but they are not without drawbacks. Since you can put any value and change the values, the browser will treat the value as a string and force you to work around converting it to specific units. The following example, takes a variable defined in the :root element and then converts it to a length unit by multiplying it by 1rem. In example2 we take the same variable and multiply it by 1vw to get a completely different value... which one is the correct one? css :root { --default-width: 30; } .example...
::before and ::after are interesting but, to me, they are hard to understand and use correctly. These pseudo-elements are primarily used to insert content before and after an element. We can create interesting effects, particularly used with the contenthttps://developer.mozilla.org/en-US/docs/Web/CSS/content property from CSS Generated Content Modulehttps://w3c.github.io/csswg-drafts/css-content/ Level 3 specification. In this post, we'll look at some examples of how these pseudo-classes work. Two notes before we begin: The current syntax for these pseudo-elements is ::before and ::after. In CSS 2.1 the syntax was :before and :after with a single colon. Screen readers and other assistive technologies will not read the content...
As a follow-up to the prior post on converting JSON/JSON5 to CSS, we will look at providing font override metrics for fallback fonts and how to use them. Katie Hempenius provides a spreadsheet with the override valueshttps://github.com/khempenius/font-fallbacks-dataset for all fonts in the Google Fonts collection. If the font is not available in Google Fonts or you have the font available, you can use tools like Fontkithttps://www.npmjs.com/package/fontkit to query the font and get metrics for font fallbacks. The metrics that we need are: ascent descent lineGap UnitsPerEm And we use them to calculate the override values as follows: ascent-override = ascent/unitsPerEm...
The more I work with JSON in WordPress theme blocks, the more frustrated I become even though I understand why things are the way they are. JSON has become the default data interchange program for the web. It is not without its issues. Since it's meant mostly for machine-to-machine communication it is unforgiving of parsing and syntax errors. However, even though it is meant for machine communication, JSON is still written by hand by one or more humans. As such, I find the ideas in Suggested improvements to JSONhttp://bolinfest.com/essays/json.html to match my thinking on the subject. They can be summarized...
