(Jay Freestone’s) Front-end predictions for 2021
React framework maturity, early container queries, WASM adoption, and monoliths. I’ll take all four, please. Not feeling like a particularly front-end-y? Jay says:
Interestingly, the biggest developments in the front-end are unlikely to be traditionally front-end concerns. Back in our 2019 forecast..
Exploring the Complexities of Width and Height in CSS
The following article is co-authored by Uri Shaked and Michal Porag.
Let’s explore the complexities of how CSS computes the width and height dimensions of elements. This is based on countless late-night hours debugging and fiddling with lots of combinations of CSS properties, reading though the spe..
Weekly Platform News: The :not() pseudo-class, Video Media Queries, clip-path: path() Support
Hey, we’re back with weekly updates about the browser landscape from Šime Vidas.
In this week’s update, the CSS :not pseudo class can accept complex selectors, how to disable smooth scrolling when using “Find on page…” in Chrome, Safari’s support for there media attribute on
Some React Blog Posts I’ve Bookmarked and Read Lately
The React Hooks Announcement In Retrospect: 2 Years Later — Ryan Carniato considers hooks to be the most significant turning point in front end in the past five years, but he also says hooks have muddied the waters as well.Mediator Component in React — Robin Wieruch’s article made me think just how ..
Some Typography Blog Posts I’ve Bookmarked and Read Lately
Font-size: An Unexpectedly Complex CSS Property — From Manish Goregaokar in 2017. Of many oddities, I found the one where font: medium monospace renders at 13px where font: medium sans-serif renders at 16px particularly weird.The good line-height — Since CSS supports unitless line-height, you probab..
Lazy Load Routes in Vue with webpack Dynamic Comments
The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the component to render. Let’s take a look at how to do this in Vue/Vue Router with lazy loading, and do it as cleanly as possible. I us..
Algolia
Algolia is for search. Literally any website can take advantage of Algolia-powered search. You put JSON data (“records”) in, and then you can search them at lightning speed. The magic of Algolia is that they help you with both of those things: getting data in and getting search results out.
As far ..
Some Performance Blog Posts I’ve Bookmarked and Read Lately
Back/forward cache — I always assumed browsers just do fancy stuff with the back/forward buttons and us developers had very little control. Philip Walton tells us it’s critical that we understand “what makes pages eligible (and ineligible) for bfcache to maximize their cache-hit rates.” For example,..
Going From Solid to Knockout Text on Scroll
Here’s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol’ HTML and CSS!
This effect is created by rendering two containers with fixed
elements. The first co..
The Web is for More Than Document Viewing
I poked at a tweet from Ken Kocienda over the weekend:
“Water not wet” reports man standing in ocean. https://t.co/5oUUdWARTU
— Chris Coyier (@chriscoyier) January 31, 2021
I don’t know Ken, so I feel a little bad for being harsh. But I haven’t changed how I feel. Saying “Web browsers are for vie..