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...
When doing web development, one of the biggest pains is to have a local server where we can run the code without having to manually reload the page. This post will explore both third-party packages and built-in HTTP servers in multiple languages. Node For a variety of reasons, I've chosen Vitehttps://vitejs.dev/ as my base development environment. You can choose whether to use Typescript or a framework. In this example, we'll create a new workspace using Typescript and no framework. To start a new project with Vite, the command will depend on the version of NPM you're using. If you're using...
data attributes give developers a very powerful tool to create custom code on both CSS and Javascript. This post will look at three things: What are data attributes How to use data attributes in CSS How to use data attributes in javascript What are data attributes datahttps://developer.mozilla.org/en-US/docs/Web/HTML/Globalattributes/data- attributes allow you to insert arbitrary data on your HTML without hacks, and then use it in CSS and Javascript. The names of data attributes have the following restrictions The name must not start with the string xml case-insensitive The name must not contain any colon characters : The name must not contain...
I've been working on learning more about Grids used in book design and publishing and how it may be possible to apply them to web layouts. Grids are not without challenges when working on the web. There are many form factors to consider which means we may have to use media queries to modify the layout But let's start with the types of grids we may want to build or, in other words, what would we build grids for. I've always said that there is no reason why the web can't be like print and newer CSS tools like grid,...
