How to Section Your HTML | CSS-Tricks
A deep dive with good advice on using—and labelling—sectioning content in HTML: nav, aside, section, and article.
Tags: frontend
1255
Drop caps & design systems - Vox Product Blog
Sit down and listen to a story from uncle Ethan.
A Complete Beginner’s Guide to React by Ali Spittel
This really is a most excellent introduction to React. Complete with cheat sheet!
The Crushing Weight of the Facepile—zachleat.com
Using IntersectionObserver to lazy load images—very handy for webmention avatars.
7 absolute truths I unlearned as junior developer
This is a wonderfully written post packed with hard-won wisdom.
This are the myths that Monica dispelled for herself:
- I’m a senior developer
- Everyone writes tests
- We’re so far behind everyone else (AKA “tech FOMO”)
- Code quality matters most
- Everything must be documented!!!!
- Technical debt is bad
- Seniority means being the best at programming
When should you be using Web Workers? — DasSur.ma
Although this piece is ostensibly about why we should be using web workers more, there’s a much, much bigger point about the growing power gap between the devices we developers use and the typical device used by the rest of the planet.
While we are getting faster flagship phones every cycle, the vast majority of people can’t afford these. The more affordable phones are stuck in the past and have highly fluctuating performance metrics. These low-end phones will mostly likely be used by the massive number of people coming online in the next couple of years. The gap between the fastest and the slowest phone is getting wider, and the median is going down.
ffconf - Web development & JavaScript conference in Brighton, UK
All of the talks from ten years of FF Conf …including this pretentious one from five years ago.
Relearn CSS layout: Every Layout
A new site from Heydon and Andy that provides CSS algorithms for common layout patterns.
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
HTML is the Web ~ Pete Lambert
The lowest common denominator of the Web. The foundation. The rhythm section. The ladyfingers in the Web trifle. It’s the HTML. And it is becoming increasingly clear to me that there’s a whole swathe of Frontend Engineers who don’t know or understand the frontend-est of frontend technologies.
This page is a truly naked, brutalist html quine.
What you see really is what you get. I like this style!
Baking accessibility into components: how frameworks help
A very thoughtful post by Hidde that draws a useful distinction between the “internals” of a component (the inner workings of a React component, Vue component, or web component) and the code that wires those components together (the business logic):
I really like working on the detailed stuff that affects users: useful keyboard navigation, sensible focus management, good semantics. But I appreciate not every developer does. I have started to think this may be a helpful separation: some people work on good internals and user experience, others on code that just uses those components and deals with data and caching and solid architecture. Both are valid things, both need love. Maybe we can use the divide for good?
The CSS Mindset | Max Böck - Frontend Web Developer
This post absolutely nails what’s special about CSS …and why supersmart programmers might have trouble wrapping their head around it:
Other programming languages often work in controlled environments, like servers. They expect certain conditions to be true at all times, and can therefore be understood as concrete instructions as to how a program should execute.
CSS on the other hand works in a place that can never be fully controlled, so it has to be flexible by default.
Max goes on to encapsulate years of valuable CSS learnings into some short and snappy pieces of advices:
No matter what your level of CSS knowledge, this post has something for you—highly recommended!
An Introduction to ARIA States | a11y with Lindsey
A very useful explanation of the ARIA attributes relating to state:
aria-expanded,hidden,aria-hidden, andaria-current.
Jeremy Keith: Going offline - YouTube
Here’s the opening keynote I gave at Frontend United in Utrecht a few weeks back.
Building on Vimeo
Here’s the video of the opening talk I gave at New Adventures earlier this year. I think it’s pretty darn good!
SOTB2018 - Jeremy Keith - The Web Is Agreement - YouTube
Here’s the video of the talk I gave at State Of The Browser last year. The audio is a bit out of sync with the video.
The talk is called The Web Is Agreement. It’s ostensibly about web standards, but I used that as a jumping off point for talking about life, the universe, and everything.
I enjoyed giving this talk, but I’ve only ever given it this one time. If you know of any events where this talk would be a good fit, let me know.
Patterns for Promoting PWA Installation (mobile) | Web Fundamentals | Google Developers
Some ideas for interface elements that prompt progressive web app users to add the website to their home screen.
Designing for actual performance by Adam Silver
This is something I’ve been thinking about a lot lately. The justification for single page apps feels like circular thinking to me. A JavaScript framework is needed to avoid full page refreshes because full page refreshes are expensive because that means assets will be reloaded …assets like the JavaScript framework that only exists to avoid the full page refresh.
This is how it goes. We put a load of shit into a single web page. This makes the page slow. Slow to load, slow to render. Slow.
Instead of getting rid of the shit, we blame the page refresh.
JAMstack? More like SHAMstack. | CSS-Tricks
Chris makes the very good point that the J in JAMstack isn’t nearly as important as the static hosting part.
I also pointed out to Phil recently that the M (markup) is far more important than the J (JavaScript), which is there to enhance the M. So I suggested that the acronym be updated accordingly:
MAJstack!
This is my maj.
Self-Host Your Static Assets – CSS Wizardry
Trust no one! Harry enumerates the reason why you should be self-hosting your assets (and busts some myths along the way).
There really is very little reason to leave your static assets on anyone else’s infrastructure. The perceived benefits are often a myth, and even if they weren’t, the trade-offs simply aren’t worth it. Loading assets from multiple origins is demonstrably slower.