Search
The Cost of Javascript Frameworks
26.4.2020
I expect this post from Tim Kadlec to be quoted in every performance conference talk for the next few years. There is a lot of data here, so please check it out for yourself, but the short story is that JavaScript-framework-powered sites are definitely heavier and more resource-intensive than...
Puzzles and Mysteries
22.4.2020
Bob Hoffman:
Puzzles, [Malcom Gladwell] wrote, are problems for which there is not enough information. An example of a puzzle: Where is Jimmy Hoffa buried? If we had more information, we would know the answer. If someone told us “Jimmy Hoffa is buried in New Jersey,” we’d know a little more than...
Constrained CSS grids without `max-width`
21.4.2020
Ain’t nothing wrong with max-width, but Ethan makes a point in the last sentence:
Rather than simply defaulting to max-width as a constraint, I can use the empty space around my design, and treat it as a layout tool.
If the space “around” your grid...
The Contrast Triangle
21.4.2020
Chip Cullen:
Let’s say you’re building a site, and you’re working with a designer. They come to you with some solid designs, and you’re ready to go. You’re also a conscientious front end developer and you like to make sure the sites you build are accessible. The designs you’re working from have...
How (some) good corporate engineering blogs are written
18.4.2020
Interesting research from Dan Luu:
… it’s pretty common for my personal blog to get more traffic than the entire corp eng blog for a company with a nine to ten figure valuation and it’s not uncommon for my blog to get an order of magnitude more traffic.
I think this is...
Using CSS to Set Text Inside a Circle
14.4.2020
You want to set some text inside the shape of a circle with HTML and CSS? That’s crazy talk, right?
Not really! Thanks to shape-outside and some pure CSS trickery it is possible to do exactly that.
However, this can be a fiddly layout option. We have to take lots of different things into...
When debugging, your attitude matters
12.4.2020
Julia Evans:
I was debugging some CSS last week, and I think that post is missing something important: your attitude.
Now – I’m not a very good CSS developer yet. I’ve never written CSS professionally and I don’t understand a lot of basic CSS concepts (I think I finally understood for the first...
Create Diagonal Layouts Like it’s 2020
9.4.2020
Nils Binder covers the ways:
1. Use an SVG in the form of a triangle. This technique is nicely described by Erik Kennedy on CSS-Tricks.
2. Hide part of your section using clip-path. Read Diagonal Containers in CSS by Sebastiano Guerriero or Sloped edges with consistent angle...
The WebAIM Million—Updated
8.4.2020
This report made a big splash last year. It’s a large chunk of research that shows just how terribly the web does with accessibility. It’s been updated this year and (drumroll…) we got a little worse. I’ll use their blockquote:
The number of errors increased 2.1% between...
Google’s Technical Writing Guide
3.4.2020
It’s good!
I’ve written up my advice (sprinkled with great advice from others), but this is way more straightforward nuts-and-bolts training on technical writing. It’s structured like an actual course, with exercises along the way.
I’m far from an expert here. But between...
Accessibility Links
2.4.2020
Austin Gil has kicked off the first in a five-part series about “HTML Forms Right” and to starts with semantics. It’s talking to the “we build our front-ends with JavaScript” crowd. The first block of code is an example of an Ajax form submission where the data...
An Annotated Docker Config for Front-End Web Development
2.4.2020
Andrew Welch sings the praises of using Docker containers for local dev environments:
Here are the advantages of Docker for me:
• Each application has exactly the environment it needs to run, including specific versions of any of the plumbing needed to get it to work (PHP, MySQL...
Max Stoiber’s Strong Opinion About Margins
31.3.2020
Going with that title instead of the classic developer clickbait version Max used. ;)
We should ban margin from our components.
Don’t use margin?! This thing I’ve been doing my entire career and don’t have any particular problems with?!
Well, that’s not exactly Max’s...
RSS Stuff
31.3.2020
Laura Kalbag wrote How to read RSS in 2020. This would be a nice place to send someone curious about RSS: what it is, what it’s for, and how you can start using it as a reader. I like this callout, too:
Sometimes the content is just an excerpt, encouraging you to read the rest of the content...
Creating a Pencil Effect in SVG
28.3.2020
Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why it would be bad for the look of a pencil stroke:
Something like this pencil stroke would require many tens of thousands of different...
Emergency Website Kit
27.3.2020
Here’s an outstanding idea from Max Böck. He’s created a boilerplate project for building websites that fit within a single HTTP request. This is extremely important for websites that contain critical information for public safety. As Max writes:
In cases of emergency, many organizations need...
Maintaining Performance
27.3.2020
Real talk from Dave:
I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance professionals…...
Get Static
26.3.2020
In this piece, Eric Meyer argues that performance is more important than ever right now — especially for websites that contain critical information for the public:
If you are in charge of a web site that provides even slightly important information, or important services, it’s time to...
Emojis as Favicons
24.3.2020
Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck an emoji inside an SVG <text element and use that as the favicon.
Now that all modern browsers support SVG favicons, here's how...
Performance Links
24.3.2020
I've had a number of browser tabs open to articles all related to web performance and gosh darn it if blogging them is a way for me get some closure. They are all good!
Manuel Matuzovic, Why 543 KB keep me up at night:
Yes, I know, it depends. 543 KB aren't always bad, but on that specific page...