DEV Community: Oliver Williams

FullyStacked

Oliver Williams — Sun, 02 Apr 2023 17:26:15 +0000

I’ve started publishing over on my own blog at https://fullystacked.net

Please add me to your RSS feed. I’ll be writing about CSS, Bun, new web platform features, and JavaScript.

The React core team finally have opinions about CSS

Oliver Williams — Fri, 24 Jun 2022 14:52:16 +0000

At a recent Q&A Dan Abramov talked of the React core team becoming more opinionated about styling approaches:

“We used to be very unopinionated about styling. We’re getting a few more opinions now because there are a few more constraints like streaming server rendering, server components. We start caring a bit more about performance. Overall we’re thinking for dynamic stuff just use inline styles. For things that don’t change use something that compiles to CSS so that it doesn’t have extra runtime costs. A lot of these approaches with runtimes are really expensive.”

This statement reiterated what had already been said by Sebastian Markbage.

CSS-in-JS solutions with a runtime include libraries like Emotion and Styled Components, which still remain popular.

Their impact on performance is a topic that Alex Russell, a Product Manager on Microsoft Edge, has harped on about for years, referring to the approach as a "full-on catastrophe", writing:

"At load time we can parallelise parsing of CSS, JS, and HTML. But when you stuff your CSS into JS, it means we need to parse & run JS to get rules into the doc."

Facebook/Meta had announced plans to open source their own zero-runtime CSS-in-JS tool, but that was several years ago so may never happen. There are several open source alternatives. An engineer at Airbnb recently blogged about that companies move from a runtime CSS-in-JS library to Linaria, a zero runtime option.

There’s also Vanilla Extract from Mark Dalgleish (a co-creator of CSS Modules), another zero runtime tool that involves writing styles in TypeScript and compiling them to static CSS files at build time. In my opinion the idea of writing styles in Typescript sounds appalling, but it’s not without its fans.

It’s been Tailwind, a JIT (Just In Time) compiled atomic CSS library (with no client-side runtime), that has really taken off, with fifty eight thousand GitHub stars at the time of writing.

Or you could just write CSS. With CSS itself getting more powerful with features like @layer, it’s fair to say that some of the original rationale for CSS-in-JS is less relevant today. Importing a SASS or CSS file at the top of a JSX file still works well for me. As someone that spends time designing in the browser I’d be happy to never see an unreadable machine-generated class like .atm_5tsdf ever again.

Using ES Modules with Fastify

Oliver Williams — Tue, 31 Aug 2021 16:04:06 +0000

Documentation for Fastify, as well as for all official Fastify plugins, uses the older Node CommonJS module syntax. You can however, make use of ES modules.

To use ES modules in Node, you can set "type": "module" in your package.json. Then, instead of const fastify = require('fastify')({ logger: true }) you can do:

import Fastify from 'fastify';
const fastify = Fastify({ logger: true });

The same is true for the official plugins:

import fastifyFormbody from 'fastify-formbody';
fastify.register(fastifyFormbody);

`dirname` and `filename`

One difference between CommonJS modules and ES modules is that __filename and __dirname are not available in ES modules. As the official Node docs suggest, they can be replicated with via import.meta.url

import path from 'path';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

import fastifyStatic from 'fastify-static';

fastify.register(fastifyStatic, {
    root: path.join(__dirname, 'public'),
    prefix: '/public/',
});

Internet Explorer finally dies

Oliver Williams — Sun, 18 Jul 2021 12:14:20 +0000

I’ve written about the death of Internet Explorer before over on CSS Tricks and A List Apart, perhaps prematurely, but we’ve finally reached a tipping point.

The majority of popular JavaScript frameworks have already dropped support:

Vue 3
Preact 11
Angular 13
Ember 4
Ionic, a library of UI components
Marko, the Javascript framework from Ebay
AMP from Google
SolidJS (a more recent JS framework)
React 18

The React framework itself does offer support for IE11 but some projects popular in the React ecosystem have dropped the browser. For example version 5 of MobX, released a few years ago, and the animation library Framer Motion. React dropped support for Internet Explorer with the release of version 18.

Bootstrap, still the most popular CSS framework, officially dropped support for IE with the release of Bootstrap 5. Tailwind, another popular CSS library, also dropped support for IE11 with the release of version 2.

WordPress dropped support with the release of version 5.8. Drupal will drop support with the forthcoming release of Drupal 10.

The list of companies that have dropped support is growing by the day, and includes: Adobe, Dailymotion, Skillshare, LinkedIn, Twitter, SAP, among many others.

Many of Microsoft's own products have already dropped support: Microsoft Teams web app ended support in November 2020. Microsoft 365 apps and services dropped support on August, 2021.

Windows 11 does not include Internet Explorer. On Windows 10 Internet Explorer 11 will be retired and go out of support on June 15, 2022.

Senior Director of Engineering at GoDaddy tweeted back in 2020: “We dropped support @GoDaddy for IE11 in April. We've seen 25% bundle size reductions since targeting modern JavaScript for transpilation”