#159

[Chris]: I did a little reflection thread the other day where I went into some of the variety of sites I’ve worked on in my career. I’ve worked on some eCommerce sites. I’ve worked on brochure sites. I’ve worked on sites that were about as “big web app” as you get. I’ve worked on blogs and content-focused sites.

The tech behind the sites varied too, and it doesn’t always match up how you think it might. Some big apps I’ve worked on were raw PHP with no framework at all. Some content sites I’ve worked on were built from React components. You can’t silo tech into categories for what it is for, because the world will surprise you. You just never know how people will use particular technologies and where they will take it.

Just right now, some sites I work on:

  • CodePen = Ruby on Rails, React, Apollo GraphQL, Sass, CSS modules, CodeMirror (and a million more things)
  • CSS-Tricks = WordPress, Sass/Babel via Gulp, jQuery, Prism, (handful of other things)
  • ShopTalk Show = WordPress with Advanced Custom Fields
  • Email is good = Basic theme on WordPress.com
  • I’m also working on a tiny brochure site in Webflow

I think this variety gives me a certain amount of perspective about web tech that I benefit from. Still, I look around at what other developers I know are working on, and they are building things with tech I’ve never used and for products I don’t know much about. There is so much to know out there that none of us will come close to a complete understanding.

“The web is a big place,” they say. So why would I get all uppity about tech choices when I don’t understand it all myself? Just build websites.

(My recent talk isn’t 100% about this, but it’s highly related.)

The Accessibility Object Model is something I’ve never heard of before and so this post by Hidde de Vries makes for interesting reading:

The proposed Accessibility Object Model (AOM) will be “a JavaScript API to allow developers to modify (and eventually explore) the accessibility tree for an HTML page”. In other words: it gives developers direct access to the accessibility tree. In a way, that’s a bit like what Service Workers do for the network and Houdini for style: give developers control over something that was previously done only by the browser. All in the name of an extensible web: control over these low-level features enables developers to experiment and create new things without waiting for the standards process. Perhaps, with AOM, people could define Web Components that don’t exist in HTML just yet.

This sounds… interesting! I’m super excited to start experimenting with this stuff.


TTFB stands for Time to First Byte and in this excellent post by Harry Roberts dives into the fray. One way to think about this is that TTFB is everything that happens between you clicking on a link and that very first byte being downloaded. So the request, and all the server-side stuff that goes on before you even see anything in the browser. Harry writes:

The first—and often most surprising for people to learn—thing that I want to draw your attention to is that TTFB counts one whole round trip of latency. TTFB isn’t just time spent on the server, it is also the time spent getting from our device to the sever and back again (carrying, that’s right, the first byte of data!).

Harry’s advice here is that every byte counts. And if we can decrease the Time to First Byte then we’ll have to make up for that decrease in performance somewhere else. So every byte counts!


Here’s a whip-smart post by Nolan Lawson on high-performance input handling on the web where we’ll often need to handle events that are firing faster than the browser can paint. That might be an event such as scroll or mousemove. Nolan argues that…

If the user is dragging their finger across the screen, and pointermove fires 3 times for every frame, then we actually don’t care about the first and second events. We only care about the third one, because that’s the one we need to paint.

This makes an awful amount of sense because we just can’t do anything with that information, so there’s no need to worry about it!


? From the Blog

Moving text on a curved path

Chris looks into how to replicate a cute trick that he spotted on the New York Times where SVG text crawls across the screen on a curved path like this:

There’s a little bit of math involved here but it’s such a fun technique to mess around. The text crawling across the screen like this reminds me of Paul Ford’s ever-so-great piece for Bloomberg called What is Code?


How Google PageSpeed Works: Improve your score and search engine ranking

Ben Schwarz writes how to do just by learning how to effectively monitor our websites with tools such as Calibre, Ben’s tool that includes a number of ways to measure performance.

Ben also writes about an interesting change that Google made just last year to its search indexing and ranking algorithms:

In March, indexing became based on the mobile version of a page, rather than desktop.

In July, the SEO ranking algorithm was updated to include page speed as a ranking factor for both mobile pages and ads.

From this, we’re able to state two truths:

The speed of your site on mobile will affect your overall SEO ranking.

If your pages load slowly, it will reduce your ad quality score, and ads will cost more.

Using these recent changes to inspire change in your org that might not particularly put much value in performance is certainly helpful. And Ben then outlines a number of metrics we can use to define the problem and understand the scope of it all.


My Favorite Netlify Features

Netlify is immensely powerful. A short while back I switched my blog over to it and found that everything folks had been saying was true. But Netlify offers a TON of features and so Silvestar Bistrović has rather helpfully broken them down into a list of his favorites. Snippet injection, deploying a build to its own URL, A/B testing, and notifications are some of his favorites just to name a few!

But Netlify doesn’t stop there. They are introducing more and more new and shiny features, like Netlify Dev CLI for local development and deploy cancelations. Netlify has established as an undoubtedly game-changing platform in modern web development of static websites, and it is a big part of the growth and popularity of static sites.

For the longest time building websites was always the fun part of the gig and the deploying them was a confusing and stressful nightmare. But thanks to Netlify this is no longer the case! Yay for deployment!

Also, Chris recently wrote about how to set up an existing domain name with Netlify if you’re switching over, or if you need a new domain then you can just go straight through Netlify.


Pseudo Code

Chris has collected some notes on writing pseudo code just so that you can get your thoughts on the screen without having to worry about the programming language’s syntax or the figuring out what the right name is for this thing:

if (grid is supported)
  use grid
else
  lay out things in a basic row with flexbox

This is great because you can think about what’s the right way to solve the problem. Perhaps you can figure this layout issue out in a much simpler way, too. It’s sort of like wireframing but for code!

SPONSOR

Netlify

Wow, Netlify is quickly becoming an indispensable part of the front-end stack. Just this past week, Silvestar Bistrović wrote up his five favorite Netlify features and a beginner shared his journey getting a website live using Netlify as the host. We even used it for our front-end conferences and serverless sites. We highly recommend checking it out for your own projects!

Learn more about Netlify →


SPONSOR

Jetpack

Jetpack brings a whole range of features to your self-hosted WordPress site. From realtime backups that keep your site safe (and make it easy to move!) to improved search results. From related posts to social media integration – it’s a no-brainer plugin for people serious about making their sites better.

Seriously, we love Jetpack here at CSS-Tricks and rely on it for lots of stuff. Heck, this newsletter is powered by the Gutenberg block editor in WordPress and Jetpack has a number of Gutenberg blocks at the ready, from map embeds and markdown editing to form elements and PayPal integrations, among many, many others. Give Jetpack a try and take advantage of everything it offers to make content management in WordPress even easier!