Tutorspree
How Google is Killing Organic Search
Google is building a new version of the search engine that made it great. This time, however, it is a search engine exclusive to the garden of Google…
There is only one content with this tag:
Tutorspree
How Google is Killing Organic Search
Google is building a new version of the search engine that made it great. This time, however, it is a search engine exclusive to the garden of Google…
Chris Taylor
Awesome post about progressive enhancement: With such a wide array of both expected and unexpected properties of the current technological revolution,…
Every time I hear or read "just", I remember this awesome post Brad Frost wrote back in 2015. Read it. And stop using "just" thoughtlessly.
As a general trend, we’re not getting faster software with more features. We’re getting faster hardware that runs slower software with the same features.…
Kévin Dunglas
Mercure: server-sent live updates, protocol and reference implementation
Mercure is a protocol allowing to push data updates to web browsers and other HTTP clients in a convenient, fast, reliable and battery-efficient way.…
Peter O’Shaughnessy
Why Mastodon is defying the “critical mass”
It’s a mistake to judge the fediverse as though it’s a Valley startup […] So let’s ease up on constantly counting Mastodon’s user base. Let’s ease…
I generally avoid terms like “mobile”, “tablet”, and “desktop” in my work. It’s not that they’re bad; it’s because they’re broad. In my experience,…
Should I Use JavaScript to Load My Web Fonts?
the advanced web font loading control offered by JavaScript still provides more than sufficient value to keep it around. You can adapt your page’s…
Steve Souders
What catches my eye are the gaps between TTFB and the paint metrics, and between the paint metrics and First CPU Idle. These gaps are caused by JavaScript…
the language icon is an initiative started in 2008 to standardise the language selection icon, the idea and initial icon was designed by Onur Mustak…
Steven Garrity
The inability to deal with long strings of text is the most basic and maybe most common way components can fail when coming in contact with real data.…
Hidde de Vries
Making password managers play ball with your login form
Password managers are essential to secure internet usage, so making our login fields work with them is extremely important. This will mostly happen…
If you’re going to build an image loader that hides the whole page until all images are ready, you must also ask yourself what if the images don’t…
Your Apps Know Where You Were Last Night, and They’re Not Keeping It Secret
The mobile location industry began as a way to customize apps and target ads for nearby businesses, but it has morphed into a data collection and…
CSS Indexes: A listing of every term defined by CSS specs
This is a non-normative document. It lists every term defined in CSS, as long as it’s marked up correctly for the spec generator. It is intended as…
The average web page is 3MB. How much should we care?
You can have large, robust pages that still feel fast. But you should care about page bloat in terms of how it affects mobile users, especially mobile-only…
Maximiliano Firtman
Is there a cold war between Android and Chrome because of PWAs?
I think there is a silent war between Android and Chrome, and the first one seems to be ahead. PWAs on Android could have a much better experience,…
Your Site—Any Site—Should be a PWA
PWAs don’t require you use a particular JavaScript framework or any JavaScript framework at all. You don’t need to be building a Single Page App either.…
Monica Dinculescu
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont…
great news: there are two on-the-horizion web platform features that are trying to make no-jank, fixed-aspect-ratio, fluid-width images a natural…
Bruce Lawson
The practical value of semantic HTML
We’re seeing more and more types of devices connecting to the web, and semantic HTML can help these devices display your content in a more usable…
Adrian Zumbrunnen
Creating distraction-free reading experiences
Distractions have always been a natural constituent of our lives. But with the rise of mobile technology, a circus of notifications, and all the noise…
Troy Hunt
Passwords Evolved: Authentication Guidance for the Modern Era
Great read about security and passwords, summarizing bet practices we've known for a while now, but unfortunately too few enterprises already follow.…
Tim Berners-Lee
Computer Science in the 1960s through 1980s spent a lot of effort making languages that were as powerful as possible. Nowadays we have to appreciate…
Marco Bellinaso
Flutter: the good, the bad and the ugly
[Flutter is] an open-source software development kit (SDK), developed by Google, to quickly build iOS and Android apps, sharing most of the code.…
Hidde de Vries
On the importance of testing with content blockers
To build good websites, I think we should prioritise working websites above gathering potentially useful data (if doing that at all). As developers,…
If it's interactive, it needs a focus style
I love this really didactic talk about focus styles: Focus styles don't have to be ugly! Focus styles are an integral part of any mature design system.…
I've been using Brid.gy since I started using Webmentions on this site, to get mentions from silos (Twitter mostly) back to the contents. This is…
The Flexbox Holy Albatross Reincarnated
when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid…
David Heinemeier Hansson
Signal v Noise (aka SvN), the famous Basecamp blog, is also leaving Medium, joining the movement towards re-de-centralization of blogs. 👍🏻 Traditional…
Ben Francis
I really loved Firefox OS. I even own 2 Firefox OS devices. I really wanted to believe in KaiOS's future, but this article shows I should be worried:…
Paul Kinlan
Inter-app communication is one of the major missing pieces of the web platform, and specifically one of the last major missing features is native…
Tali Garsiel
How Browsers Work: Behind the scenes of modern web browsers
As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best…
Font sizing with rem could be avoided
I don't really agree with the simple statement made in the title of this article, as sizing fonts with rem
is sometimes useful to escape the default…
Jeremy Keith explains how he built the timeline of inspirations and achievements of the World Wide Web: I thought it would be interesting not only…
Rob Weychert
Sophisticated Partitioning with CSS Grid
Tinnitus Tracker is the live music diary of Rob Weychert, listing more than 300 shows he's attended. Events lists can be really boring to scroll through,…
We’re bombarded by more information than ever before. With the rise of all this information comes a rise of the amount of bullshit we’re exposed to.…
Yuan Chuan
Yuan Chuan creates art from everything available in CSS, created < css-doodle />
(a web component for drawing patterns with CSS), and gave a talk…
Poul-Henning Kamp
Why Should I Care What Color the Bikeshed Is?
The really, really short answer is that you should not. The somewhat longer answer is that just because you are capable of building a bikeshed does…
Fading out siblings on hover in CSS
Trys here shows a nice little CSS trick to make hovered elements pop out (quite easy), while diming the siblings (that's the trick). Well done!
Jason Pamental
Progressive Font Enrichment: reinventing web font performance
In issue #11 of his great Web Fonts & Typography News newsletter, Jason Pamental shares the progress made by the W3C Web Fonts Working Group towards…
Dave Ceddia
Implementing a Mockup: CSS Layout Step by Step
If you don't know yet how to do Web layout with CSS, or feel like struggling with it, this great (baby) step by step tutorial will help you a lot:…
Owen Williams
The secret energy impact of your phone
I discovered this article in Anselm Hannemann 's great Web Development Reading List (#265 ). So it’s up to networks and cloud providers to push energy…
Cody Lindley
Front-end Developer Handbook 2019
If you want to grok the great diversity of topics and technologies involved in Front-end Web development, here is probably the most comprehensive…
Surma
When should you be using Web Workers?
Surma explains very well how “low-end phones will mostly likely be used by the massive number of people coming online in the next couple of years“,…
Remy Sharp
I've been using Webmention for almost 2 years now, and I am fortunate to use Aaron Gustafson 's jekyll-webmention_io plugin for Jekyll, the static…
Jay Freestone
Functional CSS (sometimes referred to as atomic CSS) is the practice of using small, immutable and explicitly named utility classes to construct components.…
Andy Bell
and
Heydon Pickering
Every Layout: Relearn CSS layout
Andy and Heydon teach us CSS layout with modern standards, what they call "algorithmic layout design ": Employing algorithmic layout design means…
Opquast
The Web Quality Checklist is intended for all professionals who create websites. It is designed in a collaborative way by a community of Web professionals,…
Johan Halse
If code is explicit and testable but hard to read and follow, then we’ve lost our most important property along the way. Code is first and foremost…
Jack Schofield
Can I buy a phone that doesn’t use anything from Google or Apple?
Here's a good overview of mobile (smart)phones alternative to Google and Apple ones (or lack thereof), if you want to make sure you're not spied on.…
Remy Sharp
Publishing a draft originally written in 2015, Remy shows Progressive Enhancement is still a strong topic all developers should understand and work…
The power of progressive enhancement
Here's another nice take about progressive enhancement, where Andy Bell explains how he developed My Browser, a nice tool for support. Progressive…
Ramesh Periyathambi
Improving the Speed and Accuracy of the Item Page with Light Service
Ramesh Periyathambi explains why eBay developed a dedicated "light" service to get critical informations about products, to speed up presentation…
Chen Hui Jing
Chen Hui Jing helps fix a little issue with overflowing Flexbox containers: If you have tried to apply padding to a flex container with an horizontal…
Cassie Evans
Cassie Evans shares the multiple steps involved in the creation of the lovely animated logo of her personal website: There's a few things going on…
Farhad Manjoo
I Visited 47 Sites. Hundreds of Trackers Followed Me.
For several days this spring, I lived my life through this Invasive Firefox, which logged every site I visited, all the advertising tracking servers…
Tim Kadlec
Because while the web keeps getting heavier and we keep moving further away from page weight as a primary performance metric, the data I’ve seen so…
Sebastian Hermida
Follow the adventures of Certificat, Browserbird, and Compugter as they explain why HTTPS is crucial for the future of the web and how it all works…
Charlie Owen
Charlie writes about the vast majority of Web developers that we never hear/read from on social networks (Twitter, Mastodon, etc.), Web publication…
Rémy Parmentier
Rémy and a few others launched an awesome resource for people who plan to struggle with rich email using HTML and CSS, which are not well supported…
Caching best practices & max-age gotchas
Used correctly, caching is a massive performance enhancement and bandwidth saver. Favour immutable content for any URL that can easily change, otherwise…
Paint the Picture, Not the Frame: How Browsers Provide Everything Users Need
Eric describes the issues people can face while using browsers to navigate on the Web, with a lot of great accessibility hints. people who feel they…
Stéphanie Walter
The Ultimate Guide to Not Fucking Up Push Notifications
Awesome article about everything you have to take into consideration when planning to use Push notifications. For the sake of ** sick ** growth hacking,…
If you don't understand why CSS is one of the great strengths of the Web, even if you've been using it for a while, you really have to spend these…
ASPIRE: Ideals to Aspire to When Building Websites
Just like Scott says, "the types of sites I personally want to see on the web aim to excel at these qualities": A ccessible S ecure P erformant I…
Martin Kleppmann, Adam Wiggins, Peter van Hardenberg and Mark McGranaghan
I talk a lot about POSSE these days, but it's mainly about content, not applications. For them, it is often difficult to host a solution yourself,…
Trackers on Your Domain, Revenue Risk
In this article, Boris shows how new practices around third party trackers hidden as first party assets, to "escape" GDPR and trackers blockers, can…
Even if I follow Max' work and content, I don't remember reading this article back in June. Thanks David for your article "Publier " (in French),…
Yoav Weiss
Intent to Deprecate and Freeze: The User-Agent string
User-Agent sniffing, used for example to (try to) perform dynamic serving instead of true responsive web design, has always been a really bad practice,…
Florens Verschelde
A short history of body copy sizes on the Web
A nice overview of the many variations body copy has seen since the Web exists. I agree with the conclusion: I’m […] sad that we’re somehow chasing…
We have to stop confusing the excesses of capitalism with the hallmarks of quality. Sometimes Google aren’t better, they’re just more pervasive.
Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. […]…
Humans can't read URLs. How can we fix it?
Jake leads this HTTP 203 episode with his reflexions about current URL display practice in browsers, and how it could be improved, at least for security.…
Amelia Wattenberger
The CSS Cascade, or how browsers resolve competing CSS styles
This is a great explanation/illustration of the CSS Cascade! 👍
Adam Silver
In defence of graceful degradation and where progressive enhancement comes in
Interesting explanation about graceful degradation not being the opposite of progressive enhancement. Graceful degradation is an integral part of…
The web is far from perfect, but I think we underrate how resilient it can be. I miss it every time I’m away.
Rich Harris
A new technique for making responsive, JavaScript-free charts
I really like this clever use of a mix of SVG and HTML/CSS to create responsive charts. Because we're using a percentage-based coordinate system,…
Pierre-Louis Boyer
OneDevice, a smartphone that makes sense
I really like this idea. I loved my iPhone 4 size in the pocket. I even paid more to get an iPhone Xs instead of the cheaper but bigger Xr. we could…
The layered approach of progressive enhancement echoes the separation of concerns in the front-end stack: HTML, CSS, and JavaScript—each layer expressing…
Vincent De Oliveira
Deep dive CSS: font metrics, line-height and vertical-align
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use…
Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so…
Katharine Schwab
Google’s new reCAPTCHA has a dark side
Because reCaptcha v3 is likely to be on every page of a website, if you’re signed into your Google account there’s a chance Google is getting data…
Keir Watson
Responsive Grid Magazine Layout in Just 20 Lines of CSS
Interesting dive into some of CSS Grid subtleties, to build a nice magazine layout. Incredibly, this layout only took 21 lines of CSS (excluding global…
Sebastiano Guerriero
I remember seing a clever design years ago that had this effect on scroll, but it was just for a logo, with a single image. Now that we have clip-path
…
Kitty Giraudel
Great article where Kitty shows how React helps providing N26 clients the features they're looking for even if they unfortunately have JavaScript…
Trey Harris
The case of the 500-mile email
Let me quote just one phrase: "We can't send mail more than 500 miles," the chairman explained. Now I'll let you read, and laugh. Looks like Trey…
Joel Spolsky
Don’t Let Architecture Astronauts Scare You
When you go too far up, abstraction-wise, you run out of oxygen. Sometimes smart thinkers just don’t know when to stop, and they create these absurd,…
Eleventy’s New Performance Leaderboard
Eleventy doesn’t do any special optimizations out of the box to make your sites fast. It doesn’t protect you from making a slow site. But importantly…
Laura Kalbag
Another big benefit of RSS is that you curate your own feeds. You get to choose what you subscribe to in your feed reader, and the order in which…
deleting all local storage (including Indexed DB, etc.) after 7 days effectively blocks any future decentralised apps using the browser (client side)…
Bryan L. Robinson
Climbing the 11ty Performance leaderboard with Cloudinary, critical CSS and more
This is an excellent writeup of the different paths Bryan went to optimize the performance of his site built with Eleventy. I will definitely look…
Apple’s attack on service workers
After the link to Aral's post yesterday, some details in this post from Jeremy Keith. This is not a minor change. This is a crippling attack on service…
Lighthouse changes how Performance Score is calculated
Lighthouse 6 is the first major release of the popular auditing tool since May 2019, introducing critical changes that will impact everyone relying…
Jessica Davies
After GDPR, The New York Times cut off ad exchanges in Europe — and kept growing ad revenue
Great demonstration that GDPR is not a threat for publishers who favor quality: The desirability of a brand may be stronger than the targeting capabilities.…
Remy Sharp
How I'm teaching the kids coding for the web
I love how Remy progressively explained HTML tags and CSS selectors to his children: I loaded up a browser and explained that "this is a web page".…
Second-guessing the modern web
[…] there is a swath of use cases which would be hard without React and which aren’t complicated enough to push beyond React’s limits. But there are…
I guess you were already using the Machete Order to watch the first two Star Wars trilogies, like anyone serious about it. 😅 Now that there are eleven…
If you're using Google Fonts service instead of self-hosting the fonts (even if they come from Google Fonts), Harry shows here the optimal performance…
Tim Kadlec
The Cost of Javascript Frameworks
In an ideal world, I believe a framework should go beyond developer experience value and provide concrete value for the people using our sites. Performance…
Responsive web design turns ten
I remember being really excited when I read Ethan's Responsive Web Design article on A List Apart and saw the final responsive result. 10 years later,…
Jon Sneyers
How JPEG XL Compares to Other Image Codecs
With many competing image formats available, it's not always easy to know which one(s) we have to use to provide both the best performance and visual…
m4dz
The Hell With Dependencies: The Complete Guide to Killing Local Dev Environments
What an amazing tutorial to dive into VSCode's abilities for remote development!
Sara Soueidan
Inclusively Hiding & Styling Checkboxes and Radio Buttons
Sara shows us how to properly use SVG and CSS to design beautiful, engaging and accessible checkboxes and radio button in her new very detailed article,…
Use Speedlify to Continuously Measure Site Performance
If you don't have any budget for Dareboost (or competitors) yet, Speedlify can help you monitor your site's performance for free, and build your performance…
Style Stage and old people of the web
Let’s not get too hung up about the past and how much great and good we did back then. And let’s fight that first urge to be snarky and feel a “oh…
Christian Holst
4 Design Patterns That Violate “Back” Button Expectations – 59% of Sites Get It Wrong
The consequences of breaking the user’s expectations of how the browser “Back” button should behave can be dire. During our usability tests, it has…
Stéphanie Walter
Designing Adaptive Components, Beyond Responsive Breakpoints
A great talk from Stéphanie about responsible use of responsive components: In the talk, I show how I design systems of components that go beyond…
Adobe PhoneGap
Update for Customers Using PhoneGap and PhoneGap Build
Since [PhoneGap]’s beginning in 2008, the market has evolved and Progressive Web Apps (PWAs) now bring the power of native apps to web applications.…
Nick Winkler
Performance vs. Functionality: Making the Right Site Speed Tradeoffs
Fortunes are made and lost based on how brands thread the needle between site speed and functionality. Despite this, the Retail Systems Research (RSR)’s…
Stéphanie Walter
Enhancing User Experience With CSS Animations
Another amazing resource from Stéphanie, a detailed transcript of a talk she gave for Shift Remote. With CSS and JS progress, implementing animations…
Matt Hobbs
Why you should be testing your 404 pages web performance
Nice overview of the issue encountered by users if your 404 error page weights too much, with actual data from HTTP Archive. Assuming that an optimised…
Maximiliano Firtman
Is the Phone Gap closed in 2020?
Following Adobe announcing the end of development for PhoneGap and PhoneGap Build, Maximiliano Firtman looks at what PhoneGap provided, and what it…
Autonomy Online: A Case For The IndieWeb
This is a great introduction to IndieWeb and its principles! 👍 In the past few years, I began to notice I was losing control of online life. What…
node-gyp
Installation notes for [node-gyp on] macOS Catalina
I was confronted with this error at least once a month for several months (once again yesterday) when trying to npm install
a freshly checked out…
Mark Nottingham
RFC8890: The Internet is for End Users
The Internet has been with us for almost 40 years and has contributed to profound changes in society. It currently faces serious challenges — issues…
Matt Anderson
as the device landscape continues to converge, the categorizations will continue to blur. And as you introduce more interactivity and complex features…
Sam Morris
Are Your Country’s Cellphone Plans a Rip-off?
The cost of mobile data plans—and their quality—varies widely across the globe, according to data assembled by The Markup, and often, you don’t get…
Laura Kalbag
This One Weird Trick Tells Us Everything About You
The web, and Big Tech at large, is tracking our every move, habit, and facial expression. As designers and developers who are also users, we both…
Netlify redirects and downloads
I knew about the download
attribute, but not that it requires for the files to be on the same origin. Technically, what Jeremy does on Netlify is…
Florens Verschelde
A quick look at privacy-focused analytics for small sites
A nice overview of some options if you're looking for an analytics solution that is more privacy-oriented than Google's one (which still runs on this…
I really enjoyed Tenet, Christopher Nolan's new action packed movie! I already saw it twice, and would definitely enjoy a third time. If you already…
Evan Minto
Intrinsically Responsive CSS Grid with minmax() and min()
I've been using a CSS Grid layout on some pages here for a while, and had issues with some of it triggering an horizontal scroll on thin viewports…
Breaking Out With CSS Grid Layout
Now that CSS Grid support in browsers is great, I will start using this nice layout presented by Tyler more than 3 years ago. We want to limit the…
Breaking out with CSS Grid explained
Here is a detailed explanation of Tyler Stika's Breaking Out With CSS Grid Layout article I shared previously. What this demonstrates is that when…
Full-Bleed Layout Using CSS Grid
Josh shows here beautifully how to use CSS Grid to contain page elements' width and have some expand outside this containment. As the web has evolved,…
Lisa Charlotte Rost
How to Pick More Beautiful Colors for your Data Visualizations
Amazingly detailed article about how to best chose colors for visualizations ! This is not the right article for you if you’re trying to find good…
Maria Farrell
Allowing people who share responsibility for our tech dystopia to keep control of the narrative means we never get to the bottom of how and why we…
Always remember that although a subset of the JavaScript community can be very loud, they represent a paltry portion of the web as a whole. This means…
Simon Hearne
How to Improve Core Web Vitals
Here's a great overview of both what will come soon in Google ranking algorithm, and how to detect and fix issues with these Core Web Vitals. Google…
Marcy Sutton
What we learned from user testing of accessible client-side routing techniques with Fable Tech Labs
There are multiple variations recommended in the industry for accessible, client-rendered page changes, yet very little user research on those methods.…
Léonie Watson
Everybody be Coil. You… Be Coil
I've been using Web Monetization and Coil for a little more than one year now, and I couldn't agree more with Léonie: I am under no illusion that…
Marie Manandise
Accessibility of Content Management Systems – what’s stopping us?
The funny thing was, no matter who we talked to or who we read from, the unanimous message was: “We care very much about accessibility”. And yet,…
Tim Kadlec
When the skeleton screen doesn’t match the outcome, we’ve created confusion and frustration that will overcome any benefit you might have gotten from…
Nicolas Goutay
Towards a Lightweight Jamstack
Not having to use a JavaScript framework also meant that HTML, not JSX or Vue components, is now front and center in the code you write. This helped…
Léonie Watson
Text descriptions and emotion rich images
A good alt text can conjure up wonderfully stimulating mental images. A friendly smile is the same in print, photo or wax crayon. Whether you listen…
Tim Kadlec
Proxying Cloudinary Requests with Netlify
So we get reduced data cost, with no extra connection from the browser, and what appears to be pretty negligible cost at the CDN (the difference in…
Accessible SVG Icons with Inline Sprites
Standing on their own, icons can be misinterpreted […]. The most important issue though: they lack text. Text is the most accessible format for information…
Henry Desroches
How To Convert Variable TTF Font Files to WOFF2
In previous experience, converting variable TTF to WOFF via online tools like convert.io or FontSquirrel would often break the axes needed to interpolate…
Remy Sharp
Please disable JavaScript to view this site
Most of the web sites I visit on an average day require JavaScript to allow me to navigate the site fully. At least once a week there will be a web…
Improving Your Tweet Accessibility
Consider your audience. Consider making your tweets accessible. Now you can have a bigger audience.
Jakob Nielsen
10 Usability Heuristics for User Interface Design
Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific…
Get a list of local URL links from a root URL. Works with JavaScript generated content. Can also act as a live-DOM CSS search across multiple files…
Laurel Schwulst
My website is a shifting house next to a river of knowledge. What could yours be?
Although they may seem initially accommodating and convenient to their users, universally popular social media sites—like Facebook, Instagram, Snapchat,…
Mike Riethmuller
Understanding Filters, Shortcodes and Data in 11ty
I've been using Eleventy for 2 years now (already! 😮), and I thought Mike's post would be a nice one to send to beginners, but I actually learned…
Emerson Loustau
Big picture performance analysis using Lighthouse Parade
Here is a great new open source tool provided by the Cloud Four team! 👍 Lighthouse Parade is a Node.js command line tool that crawls a domain and…
Cee-Roo
2020 Remixed ! (Year review by Cee-Roo)
This year review gives me goosebumps and tears… 😭 https://www.youtube.com/watch?v=eMOUTgWQM74 Let's hope 2021 will be at least a little bit better.…
Anthony Ricaud
HTML and CSS techniques to reduce your JavaScript
relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards.…
Michael Scharnagl
Loading and replacing HTML parts with HTML
I really would like HTML to be more powerful, and I think showing other content without a full page reload is something people wanted for decades…
Brian Louis Ramirez
We humans are creatures of comfort. We like taking the easy route, the low-hanging fruit, the way that doesn’t make us think. […] In this article,…
Grant for the Web
W3C receives grant to help guide open web design principles for the Grant for the Web community
W3C and Grant for the Web are committed to getting more heads, hearts, and minds involved in building new business models on the web. We believe that…
Romaric Pascal
Adjust font size with CSS custom properties
I do love beautiful Web fonts, even if there are none on this site currently, so I plan to add at least one soon. I might use this nice solution.…
Tim Kadlec
Understanding the True Cost of Client-Side A/B Testing
Client-side A/B testing has been a performance loving developer’s worst friend for years. […] With either approach, you’re putting a pause button…
Xiao Zhuo Jia
So there it is, 5 different variations of fully accessible, CSS only mobile menu. I might have overdone it, but it was fun.
Lee Reilly
A list of popular/awesome video games, add-ons, maps, etc. hosted on GitHub. Any genre. Any platform. Any engine. Of course, I had to make a Pull…
Jeremy Wagner
The juxtaposition of The HTTP Archive’s analysis and The State of JS 2020 Survey results suggest that a disproportionately small—yet exceedingly vocal…
Charity Majors
Fulfilling the promise of CI/CD
This may surprise you, but continuous deployment is far and away the easiest way to write, ship, and run code in production. This is the counterintuitive…
Nils Binder
A new nice responsive layout trick built upon Heydon Pickering's Flexbox Holy Albatross.
Simon Hearne
How to avoid layout shifts caused by web fonts
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT). In this post we will explore the surprisingly…
Jon Sneyers
Legacy and Transition: Creating a New Universal Image Codec
JPEG XL’s legacy-friendly feature is a game-changer for the transition problems described above. Besides saving both storage and bandwidth from the…
Chris Zacharias
After a week of data collection, the numbers came back… and they were baffling. The average aggregate page latency under Feather had actually INCREASED.…
Eleventy: Building an Image Gallery with CSS Grid and PhotoSwipe
Mark is using my Images Responsiver plugin for Eleventy with Netlify Large Media and PhotoSwipe to build an image gallery, and it's really great!
The unreasonable effectiveness of simple HTML
Are you developing public services? Or a system that people might access when they’re in desperate need of help? Plain HTML works. A small bit of…
Carolina Gilabert
Rebuilding my site - Part 1: Eleventy
Carol shares the process to build her new site with Eleventy, with a section about image optimisation, a topic I'm very interested in, as you should…
Heydon is back with a new brilliant Webbed Briefs video, this time about the rise and fall of the free Web, and the new hope that is IndieWeb. This…
I feel sorry for anyone trying to get into the field of web performance. Not only are there complex browser behaviours to understand, there’s also…
When these things happen, as a community, I feel we should respond with kindness, support, and understanding when someone steps back from community…
I learned a lot with this detailed article about z-index
! When it comes to CSS, things work in a similar way: elements are grouped into stacking…
JavaScript performance beyond bundle size
There’s a huge focus recently on JavaScript bundle size: how big are your dependencies? Could you use a smaller one? Could you lazy-load it? But I…
Hynek Schlawack
Semantic Versioning Will Not Save You
As a maintainer of several open source projects (both in Ruby and JavaScript), I agree with everything Hynek says about the difficulty for a maintainer…
Adrian Todorov
Please support Web Monetization if you want less ads on the web
for a lot of web content creators, ads remain the main way to make money of the content they produce, which could be just to compensate costs, as…
Michael Wolfe
Why are software development task estimations regularly off by a factor of 2-3?
I have never found a better analogy to show the systematic difficulty in providing software estimates, which are frequently wrong: Man, this is slow…
Daniel Miessler
Atom > RSS: Why We Should Just Call Them “Feeds” Instead of “RSS” Feeds
I’m no longer calling feeds “RSS feeds”. From now on I’m calling them “syndication” feeds, or just “feeds”. There have been two standards for doing…
Performance-testing the Google I/O site
Jake continues his series of web performance audits, this time with the site for Google's I/O conference, and the result is a real shame. Imagine…
Ashley Spencer
An oral history of Tom Holland's sensational 'Lip Sync Battle' performance
Today I learned there is a "Tom Holland Umbrella Law" : "Once you watch it, you must share". So I do. I watched this several times over the years,…
Sarah Dayan
No, Utility Classes Aren't the Same As Inline Styles
People who follow me should now know that I'm not a big fan of "utility alone" CSS (yet?), but I do use some utility classes in my own code and understand…
How To Fix Cumulative Layout Shift (CLS) Issues
Barry shows here a few ways to prevent layout shifts and make your visitors happier. All of these techniques basically involve setting aside the correct…
Sara Soueidan
How I set up Glyphhanger on macOS for optimizing and converting font files for the Web
I already had Glyphhanger installed on my computer, but I remember having similar issues, so Sara's article is welcome for anyone who wants to use…
Maarten Van Hoof
Responsive SVGs - container vs media queries
Maarten shows here (only in Chrome Canary for now) how container queries will allow us to have responsive SVG images inline in the HTML. Responsive…
Add punctuation to your alt text
To add a description to an image, author a string inside of an alt
attribute declared on an img
element. Assistive technology will recognize the…
A Bashful Button Worth 8 Million Dollars
6 years ago I reported a bug about 100vh being larger than the viewport height in Safari. It was "intentional" according to webkit/Safari team, and…
Kornel
To make a fair comparison you really have to pay meticulous attention to encoder settings, normalizing quality, and ensuring that compared images…
Ryan Mulligan
Positioning Overlay Content with CSS Grid
These are really nice ways to use CSS Grid!
The Large, Small, and Dynamic Viewports
Bramus shows how the situation might finally improve for viewport height CSS units, more than 6 years after I reported the unreliable 100vh value…
Baymard Institute
The Current State of Homepage UX – 8 Common Pitfalls
while the homepage may not be the predominant entrance path it once was […], it still serves a central role as an anchor for the site’s category taxonomy,…
Michael Rose
I'm not using Jekyll anymore, but I would have liked to find such a detailed documentation when I did start using it, years ago. One particular need…
Jérôme Coupé
Jérôme tells us how he structures his Eleventy projects. Appart from the content
folder, this is almost exactly how I do myself, including in Pack11ty,…
Mastodon & Fediverse for Beginners
Here's a good introduction to the Fediverse from Paula, with details about Mastodon and Pixelfed. Imagine Twitter, Facebook, Instagram & Co were all…
Does shadow DOM improve style performance?
This article is about style performance improvement with Shadow DOM, but it also contains a useful comparison of selector performance between ids,…
Elie Sloïm
Web Quality Assurance: From User Requirements To Web Risk Management
Users need to be able to find the website. They need to be able to use and perceive it correctly, they need the website to function correctly, they…
Tim Kadlec
The business models that support much of the content on the web don’t favor better performance. Nor does the culture of many organizations who end…
Simon Hearne
An Inclusive Web is Fast by Default
This is a great talk! 65% of the developing world […] do not have a consistently fast internet connections (20% of the developed world). For them,…
Kev Bonett
Expandable Sections Within a CSS Grid
This is a great use case for CSS Grid's dense packing algorithm! I also love how Kev suggests this could replace annoying pop-ins/modals: This could…
The Art of Deception, Lighthouse Score Edition
I agree with Zach that the Lighthouse scores we see - shared mostly on Twitter - should be taken with a grain of salt, as they are often shared without…
Which SVG technique performs best for way too many icons?
Using SVG with performance in mind is not an easy topic because there are many ways to show SVG images in pages. Just yesterday, I chose to inline…
Christine Vallaure
Why designers should move from px to rem - and how to do that in Figma
If you're a Web developer (as most of my readers), you already know that users DO change font size (in their browser preferences), so you make sure…
Have Core Web Vitals made the web faster?
Barry dives into data from HTTP Archive to show how Google's push for web performance with Core Web Vitals helped — or not 😅 — improve the performance…
Karl Dubost
Encyclopedia Of Broken UserAgent String Detections
Karl shows multiple examples of bad usage of the browsers' User Agent string to try to infer browser type or version identification or supported features.…
Performant A/B Testing with Cloudflare Workers
The problem with the current A/B testing tools is they construct the test on the client. They block rendering until they can determine which experiment…
Richard Ishida
How to sort the list of languages?
When asked about how to sort languages for the W3C site redesign, Richard made a great detailed answer, with a nice focus on user needs: Sorting by…
Trailing Slashes on URLs: Contentious or Settled?
I have mixed feelings about URLs without an extension (.html
for example) or a trailing slash. It certainly comes mostly from 25 years of unexpected…
The Minimum Content Size In CSS Grid
Sometimes, while building a component, you suddenly notice a weird horizontal scroll bar. You keep trying and fixing the wrong thing, only to realize…
Maximiliano Firtman
This is a compatibility list of supported features on Safari on iOS and iPadOS vs. what's available in the most used PWA browser in current market…
Vanilla JavaScript and old-school SSGs are the best choices for web performance
True. That's why I love #Eleventy so much!
Marc
Having only the content I want to see only be shown when I want to see it with the freedom to jump between readers as I please, all with no ads? For…
Internet Explorer’s Decline in Usage in 2021
We all want IE11 to be ancient history. Unfortunately, some people still use it. A lot more than I thought, in some countries: there are some countries…
“Evergreen” Does Not Mean Immediately Available
With the actual, final, no-seriously-we-mean-it-this-time death of Internet Explorer, evergreen browsers are now the main consideration for desktop…
Matt Burgess
I'm really concerned about Firefox' future. I've been using since… forever. I was using Netscape before. I switched to Phoenix the day they released…
Matt Cambion
Personal Websites as Self-Portraiture
What Matt writes echoes a lot with some IndieWeb principles, even if he doesn't mention it. What, then, is a personal website? It is precisely that,…
Is HTML A Programming Language?
Heydon released a new Webbed Briefs episode, always entertaining! In this episode, I ask a question that has never been asked before and has certainly…
Goodreads lost all of my reviews
Goodreads lost all data Nelson contributed for years, this is a sad reminder that owning our data is the only way to make sure it is safe for the…
Maite Vermeulen, Leon de Korte and Henk van Houtum
How maps in the media make us more negative about migrants
A great demonstration of how maps and dataviz can influence our understanding of what happens in the world, in our society. As journalists and illustrators,…
Thoughtworks
Thoughtworks Technology Radar Volume 26
In [the Techniques section], there's a "SPA by default" blip set to "Hold": the sheer prevalence of teams choosing a single-page application (SPA)…
Taylor Hunt
Routing: I’m not smart enough for a SPA
Here comes Taylor's 4th article in his great "Streets" series about web performance and front end architectures. Overall, SPAs’ reliance on client…
Jeremy describes how using our blogs to write about bugs and/or solutions can help other people, and how this is rewarding for us. That warms the…
Seriously, Don’t Use Icon Fonts
I share it now, but Tyler wrote it 7 years ago, and many other said the same, so I really wonder why people keep using icon fonts… 🤦♂️ we need to…
Chris Nielsen
I Replaced My Native iOS App with a Cross-Platform Web App and No One Noticed
in the past I had disregarded cross platform web apps. I just assumed they were too slow. But they were the perfect choice for my app. Every year…
Building a design system with Eleventy
Trys shows here some of the power of Eleventy, the best static site generator, to generate a Design System with components. Eleventy was the obvious…
The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?
Josh's attention to details in all his articles is awesome. Here, he's presenting evidences that the rem
unit should be used for font sizes, media…
Design Happens Between Breakpoints
💯 we need to recognize that design doesn’t stop when something is handed off to developers. It continues until launch so designers can be involved…
Tim Kadlec
Introducing Opportunities & Experiments: Taking the Guesswork out of Performance
The WebPageTest team has been working on improving the platform since Catchpoint acquired them, and now they're releasing awesome new features to…
Lē McNamara
Beyond WCAG: Losing Spoons Online
Lē McNamara uses the spoon theory to explain how cognitively diverse people might suffer from some design decisions, even if sites respect current…
Into the Personal-Website-Verse
I can't believe I didn't share this great article sooner, when Matthias published it 3 years ago (already!). As he says, I should have done it: Whenever…
This is really clever, I hope we'll get support for :has()
everywhere soon! I can remember a time when it was difficult to find selectors that would…
Nick Routley
billions of people around the world have a skewed perception of the true size of countries thanks to a cartographic technique called the Mercator…
Nate Baldwin
Colorimetry and the Cartography of Color
A good comparison for interpolation and color spaces is that of cartography and illustrating flight paths. Here we can think of color spaces as being…
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
Layout shifts are a real annoyance on most sites, so please, read this new gem from Jake, about preventing images layouut shifts the right way… or…
Joe Liccini
Why Your Cached JavaScript Is Still Slow and Incurs Performance Overhead
Most developers still don't understand that large JavaScript code is really hurting performance, let's hope this great explanation by Joe, that this…
Jens Oliver Meiert
There's unfortunately a lot to know when you want to provide social networks/apps with personnalized informations (title, description, image), while…
Miško Hevery
The re-execution of code on the client that the server already executed as part of SSR/SSG is what makes hydration pure overhead: that is, a duplication…
Hubert Sablonnière
Prevent layout shifts with CSS grid stacks
I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links! 😎 No more layout shifts! Compared…
Orange Digital Accessibility
Some personas - Orange digital accessibility guidelines
situations of digital disabilities aren’t inevitable, we can all act to avoid them. Are you a creator of communication media? Are you participating…
Ad Hoc
The Ad Hoc Accessibility Beyond Compliance Playbook
We see accessibility as a duty in our mission to better serve people. We believe in the social model of disability […], which means we hold responsibility…
Nate Baldwin
Nate Baldwin created an amazing resource about colors, with interactive examples that help understand many concepts. This website is for designers…
Robin Rendle
There are no rules to blogging except this one: always self-host your website because your URL, your own private domain, is the most valuable thing…
Joe Liccini
Why Your Cached JavaScript Is Still Slow and Incurs Performance Overhead
Caching assets is a fantastic way to optimize the network overhead of your web application, there is still plenty of computational overhead associated…
Using :has() as a CSS Parent Selector and much more
let’s take a step-by-step hands-on look at what web developers can do with this desperately desired tool. It turns out, the :has()
pseudo-class…
HTTP Archive
Media chapter of the 2022 Web Almanac by HTTP Archive
I had the honor to review the Media chapter of the 2022 edition of The Web Almanac by HTTP Archive, "a comprehensive report on the state of the web,…
Brian Louis Ramirez
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.
Malte Ubl
a tool that automatically matches the fallback font to the custom font–because computers are good at that stuff. The tool allows you to select every…
Tom Greenwood
Could sustainable websites increase energy consumption?
Having lost some sleep over this, I am relieved to find that when it comes to the web, Sustainable Web Design is the solution to the Jevons paradox.By…
Is Progressive Enhancement Dead Yet?
Progressive enhancement is Scary Mary™ to some but there is no need to cry or pass out. Let me use a shark in a fez, Tony Hawk, and a couple of zombie…
For all the resulting script is asynchronous, the `` block that creates it is fully synchronous, which means that the discovery of the script is governed…
Simon Hearne
Client-side caching is a key technique to improving front-end speed and user experience. Whilst it may appear complex and risky, investing the time…
Async Alpine — Asynchronous Alpine component loading
Async Alpine is a wrapper for the fantastic Alpine.js JavaScript library, giving you greater control of component loading and adding asynchronous/lazy…
Jenni Nadler
When life gives you lemons, write better error messages
Wix reviewed and fixed 7,643 error messages that were “generic” or “not helpful”, and Jenni explains how to provide better assistance to users: What…
if you did your best when you created a piece of work, but your perfectionism or fear of judgement or lack of confidence makes you not like it, ask…
The Proprietary Syndication Formats
Guess which format is going to outlast all these proprietary syndication formats. I’d say RSS, which I believe to be true, but really, it’s HTML.…
Jonathan Griffin
Google doesn't see content behind Load More buttons or Infinite Scroll
Google’s John Mueller has confirmed in a Webmaster Hangout that they no longer crawl content behind JavaScript “load more” buttons. Also, Mueller…
Jeff Delaney
WTF are all these config files for?
Every JavaScript project has a collection of config files to control the behavior of tools like Prettier, ESLint, Typescript, Vite, Tailwind, Post…
Stéphanie Walter
A Designer’s Guide to Documenting Accessibility & User Interactions
A lot of sites were not designed and developed with accessibility needs in mind. As designers, a lot of us think that “accessibility is the job of…
Léonie Watson
How A Screen Reader User Surfs The Web
In this webinar you’ll learn how and why semantic HTML helps screen reader users browse your website, whilst being mostly transparent to people who…
Matthias reacts to Manuel Matuzović's Twitter account suspension: Gone. Years of careful consideration, of sharing your knowledge, of building connections,…
Progressive Enhancement: Where Do I Begin?
Aaron shares the slides of his latest talk about progressive enhancement, a topic he's been talking about for a while, with his book "Adaptive Web…
a number of people asked for specifics on how the user interface (UI) within Mastodon actually worked, and how to get started with the platform. So…
I’m going to try and cover all of the basics of Mastodon in this post, as well as the details of how it all works. By the end of this post, you should…
One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should…
Your account is permanently suspended
Manuel's ban from Twitter should be a lesson for us all. If there’s something I’ve learned from this whole thing, it’s that I must be more careful…
Jon Sneyers
Jon gives a good overview of everything JPEG XL improves over other image formats. This article can be seen by some as biaised, as Jon is part of…
Nate Baldwin
Component-level Design Tokens: are they worth it?
At one point in time Spectrum had 210,180 design tokens in an 18MB JSON file. We had to reinvent “design tokens” in a way that could accommodate for…
Sam Magura
Why We're Breaking Up with CSS-in-JS
Thanks for reading this deep dive into runtime CSS-in-JS. Like any technology, it has its pros and cons. Ultimately, it's up to you as a developer…
Ziemek Bućko
Google Needs 9× More Time To Crawl JS Than HTML
It took Google 313 hours to get to the final, seventh page of the JavaScript folder. With HTML, it took just 36 hours. That’s nearly 9 times faster.…
Converting Your Twitter Archive to Markdown
So, your Twitter archive is far from being a safe, independent backup in case you want to delete your account or if Twitter ever dies completely.…
Why you should never use px to set font-size in CSS
Let’s be very clear: it absolutely does matter what unit you use in your CSS. And you should avoid px
when setting font-size
wherever possible.…
Owning your content on the web should not require extensive technical knowledge or special skills. It should be just as easy as signing up for a cellphone…
I was not aware of this new Mastodon feature, this is great! it enables users to follow other users but in only selected languages. It may be only…
Yet another great Utopia tool, this time for grids, but the right way: the 12 column grid itself is an illusion, or at best a fading artefact of the…
The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how…
Layout & Grid in Design Systems
This interdisciplinary disconnect around grid’s mental model affects how teams execute grid. In a broken, unidirectional, “developer handoff” process,…
Our web design tools are holding us back
nowadays we can build things with CSS that are impossible to create with our design tools. We have scroll-snap, we have complicated animations, we…
Responsive images on Shopify with Liquid
We launched the image_tag
and image_url
filters to help with generating responsive images. Before we dive in, what do these filters do? What are…
A new barrier to communicating about design systems
the only thing more dangerous to a design system’s funding case than a lack of understanding of what it is, is a false understanding of what it is.…
Many of the latest additions to HTML, CSS, and JavaScript first existed as JavaScript libraries or frameworks or pre-processors or polyfills and then…
Why you should have your own website
Don't wait for the next new platform to put all of those things into a walled garden - choose openness, interoperability and decentralization instead.…
Richard Ishida
This is a great page on the W3C site showing multiple languages requiring different font styles and fallback. Not everybody has to know all of this,…
DNSimple
This is a nice little comic to understand HTTPS. Have you ever wondered why a green lock icon appears on your browser URL bar? And why is it important?…
While both the alt
attribute and the figcaption
element provide a way to describe images, the way we write for them is different. alt
descriptions…
How do you test a service worker, anyway?
if you're writing a service worker from scratch, if you're using one of Workbox's more exotic plugins or custom strategies, or if your service worker's…
Responsive Logo Composition With SVG
This is not a recent article, but it's still very useful, I should have shared it earlier! Logos are an ideal use-case for SVG. […] But what if we…
Henny Swan
Browsing with assistive technology videos
Understanding how people with disabilities browse the web using assistive technologies (AT) is core to making an accessible and inclusive user experience.…
SVG sprites: old-school, modern, unknown, and forgotten
Let’s try to remember why we needed SVG sprites in the first place, then see what other less-known options are available and how they might be useful.
Beating Latency on Scalemates.com
In order to beat latency you should first try to cache at the CDN. If that does not work you can bring your origin closer to the end users. If that…
The Performance Inequality Gap, 2023
Testing performance on actual device should be mandatory for every project, as it makes so many issues obvious. The best analouge you can buy for…
The Right Way to Use fonts.com Web Fonts
Let’s talk about web fonts. More specifically, about a mistake I have seen developers make in several projects for different agencies: Embedding a…
Priority Hints and optimizing LCP
Increasing the priority of a resource usually comes at the cost of another resource, so Priority Hints should be used sparingly. However, if the browser…
This is a slippery slope, and we’re already on it. Seeing basic functions like editing RAW files suddenly flooded by “AI powered tools” is the canary…
Let’s think about Quality, for the web
I this article, I’ll try make you care about quality when you design, make, or just think of the Web. I’ll also talk about Opquast, its approach to…
Why web performance still matters in 2023
Another excellent article from Sia about performance, but also equity and the environment. 😍 Oh, and I really wish everyone knew this: Lighthouse…
100 days of advices about IndieWeb from Tantek, there will be plenty to learn for sure! This is day 1 of my 2023 #100Days project, #100DaysOfIndieWeb,…
I want to be a web developer, not a JavaScript developer. Same. (Read the whole post, of course.)
Shaun Bent and Tyce Clee
Can I get an Encore? Spotify’s Design System, Three Years On
To build the semantic token layers we mentioned in the previous lesson, we developed a color-theming algorithm that, given a few input values, can…
The Top Five Static Site Generators for 2023 (and when to use them!)
Eleventy is a great choice for developers who value simplicity, flexibility, and customizability, and who want an SSG with fast build times and a…
Brendan Kenny
The venerable Time To Interactive (TTI) metric is being removed in Lighthouse 10, with its 10% score weight shifted to Cumulative Layout Shift (CLS),…
The Content Management System of my Dreams
François started writing a series of articles about static vs dynamic publishing, content management and pages publication, etc. Most tech people…
Midnight is a Terrible Time for Coffee
It’s easy to assume that folks won’t use the defaults, but some will (intentionally or accidentally.) By improving these defaults, you improve the…
With push notifications in mobile Safari, the arguments for making proprietary apps get weaker. That’s good. Yeees! 🥳 But… there's a big "but" in…
Understanding the cost of not being accessible
the single worst accessibility-related business strategy you can take is to stay in that audit-fix-audit-fix cycle
Rob O'Leary
The next generation image format for the web is not JPEG XL?
Perhaps, the jig is not up for JPEG XL and HEIC. WebP was in Chrome for 5 years before the others decided to follow suit. The format war is a war…
Why you need to know your site's performance poverty line (and how to find it)
The performance poverty line is the plateau at which changes to your website’s rendering metrics (such as Start Render and Largest Contentful Paint)…
According to the results presented above, we can conclude that JXL is the superior format for both lossy and lossless operations. That is clear by…
Having my phone in my pocket doesn’t trigger anything but distraction. It can do everything, and so I feel nothing in particular about it. A physical…
Coil bids farewell, but not goodbye
we’ve decided to sunset Coil’s products and development efforts. On February 2, 2023, we will no longer accept sign-ups for the Coil Membership. On…
Everything is awesome: Don't forget the Lego
Six paediatric health-care professionals were recruited to swallow a Lego head. Previous gastrointestinal surgery, inability to ingest foreign objects…
Accessibility Beyond Code Compliance
Design systems (and pattern libraries within them) codify your organization’s design and coding guidelines in such a way that the software you produce…
Ten tips for better CSS transitions and animations
users may not realize what it is about the transitions or animations on our websites and apps, but they can keenly spot the difference between good…
For a data format, yaml is extremely complicated. It aims to be a human-friendly format, but in striving for that it introduces so much complexity,…
what will happen to Sass’s nesting? First of all, we won’t ever change existing valid Sass code so that it starts emitting CSS that’s incompatible…
Using :is() in complex selectors selects more than you might initially think
While I wouldn’t write a selector like that myself, this is highly relevant because of CSS Nesting that is getting specified. There, the Nesting Selector…
On Container Queries, Responsive Images, and JPEG-XL
It is natural to think that the problem with images in container queries is a mere oversight. We used to only have media queries to design with. Now…
Largest Contentul Paint change in Chrome 112 to ignore low-entropy images
This may result in LCP times increasing, if a low-content background was being painted very early, or if a low-content placeholder was being used…
How Tweetbot died (and lived again)
Tweetbot’s sudden death, open-casket funeral, and reincarnation as a Mastodon app. I've been using Twitter and Tweetbot for years. I'm now using Mastodon…
3 Methods for Scoped Styles in Web Components That Work Everywhere
WebC allows folks to broaden access to things built with web components without the drawbacks of other methods I really have to try WebC more seriously,…
Pixels vs. Relative Units in CSS: why it’s still a big deal
Remember, users really do change their settings under the hood, and we should be maintaining users’ control over their own browsing experience. If…
So, one of the main benefits of progressive enhancement is providing additional capabilities where supported and failing gracefully. This seems like…
30th anniversary of licensing the Web for general use and at no cost
the 30th anniversary of the release of the World Wide Web into the public domain, for general use, and at no cost, on 30 April 1993 by CERN. This…
Nick Vlku
[Algolia] introducing new developer-friendly pricing
Algolia’s freemium journey has been heralded in the developer community for many years, and today we’re doubling down. We’ve replaced the Free plan…
Live, in-browser detection of modern CSS support for selectors, features, and at-rules. Applies support-based classes, exposes a results object, and…
The intersectionality of web performance
Sure, those people almost certainly do care about the business. Who doesn’t? But they’re also humans. I feel like if really want to convince them,…
What makes Web Components different than JS frameworks is that they're a set of Web Standards built into the platform.
Unlike SPAs, HTMX doesn't throw away the architectural approach of REST ; it augments the browser, improving its hypermedia capabilities and making…
The ongoing defence of frontend as a full-time job
We truly are the shape shifters of the market. So to say that someone who is “just” a frontend developer isn’t flexible enough means first and foremost…
Building a modern design system in layers
While there has been a lot written in the form of “Web Components vs. $FRAMEWORK”, you find that this is totally the wrong frame. There are a variety…
Getting started with View Transitions on multi-page apps
View Transitions for MPAs are a feature that’s high on my CSS wishlist, so I got to it. It took less than an hour to do, requires zero JavaScript,…
Early Days Examples of View Transitions
All of these are page transitions, like when you leave one page and go to another. As opposed to the document.startViewTransition kind, which are…
display: contents considered harmful
At this point, I don’t think we as an industry can use display: contents
with confidence. Past actions are a good indicator of future behavior,…
My double standards about JS framework compilers
I probably need to unpack some emotional baggage from past decades of work doing ObjC,.Net, and Java client work. Those were not my favorite projects…
Watch Out for Layout Shifts with ‘ch’ Units
In our case, we were using ch
units to define our page layout. This meant that our post content was equal to 50ch
units (or the width of fifty…
Is there a viable animated GIF alternative yet or what?
We need to talk about video and animated image formats in the same breath. Many articles compare video formats to GIF, or image formats to each other,…
Cyclic Dependency Space Toggles
this method is so simple and powerful I'm not so sure about the "simple" part… 😅 But I definitely agree about the "powerful" one! 🤯
New Recommendations for Ecommerce Images
For ecommerce companies—particularly for those selling apparel—it likely makes sense to prioritize image quality above file size. This is a really…
This is the new CSS. The most powerful design tool for the Web ever. Only by using CSS, you can leverage what the platform is now capable of. Only…
Cropping Images with CSS While Keeping a Focal Point in the Center
This is a lovely way to deal with image crop and focal point with CSS only! 😍 And I love that Johannes put this warning in the beginning: While client-side…
Thoughts from “Meet Safari for Spatial Computing”
It’s 2023 and would you look at that: semantic, accessible HTML is still as important as ever. HTML isn’t just for old beige tower computers connected…
Synchronize videos, 3D-models, etc. to Scroll-Driven Animations
With Scroll-Driven Animations it’s really easy to animate elements as they enter/exit/whatever. But what if you want to sync a video to that? Or maybe…
Tomas Pueyo
Maps Distort How We See the World
If all these maps follow so many conventions, and they distort the perception of the world to such an extreme, why does the international community…
What does the image decoding attribute actually do?
So use it on your `` elements if you want. It's maybe good that image components for libraries use this, or that platforms like WordPress set it by…
isn’t it an uncomfortable feeling to think that there’s a third party service that you absolutely must appease? It’s the same kind of justification…
Alex Molas
you shouldn’t care even a little bit about what other think. Here are my reasons about why you should care about your blog
Have you come across an issue where there is a fixed element on mobile, and when the keyboard is activated, that element will be hidden underneath…
Enhance vs. Lit vs. WebC…or, How to Server-Render a Web Component
WebC is the only tool I’m aware of on the market today which lets you author web components as HTML from the very start. The .webc
extension of…
Andy Bell
,
Leanne Renard
and
Liridon Hasani
The ideal viewport doesn’t exist
you simply do not know how users are going to visit your website or web app. Instead of making design decisions on strict, limited breakpoints, keep…
Educational Sensational Inspirational Foundational
A historical record of foundational web development blog posts. I've already read most of these great articles, and will of course read the few missing.…
We're Bringing Responsive Video Back!
Responsive videos with simple HTML and no JS! 😍 Hopefully, this patch will show up in an upcoming Firefox release! 🤞
Two-way data binding and reactivity with 15 lines of vanilla JavaScript
how to keep two copies of the same form in sync with each other. […] a simple trick that uses JS Proxies and 15 lines of vanilla JS. Nice!
“Smart quotes” are the ideal form of quotation marks and apostrophes, and are commonly curly or sloped. "Dumb quotes," or straight quotes, are a vestigial…
Cooper Hewitt Accessibility
Cooper Hewitt Guidelines for Image Description
Image descriptions help visitors who are blind or have low-vision access the information contained in images. Description also makes it easier to…
Tech is not neutral. It can't be. It is always the sum total of human decisions, priorities, and tradeoffs, deployed to meet certain ends and desires,…
Andrey Sitnik
and
Travis Turner
OKLCH in CSS: why we moved from RGB and HSL
By moving to OKLCH today, we’re preparing ourselves for the not-so-distant future where native color modification will be available in CSS. OKLCH…
How I am blogging the IndieWeb way
If you’re a writer and not especially techy, this may all seem overwhelming to you, but trust me, it’s truly worth it not to be too centralised or…
The ethics of syndicating comments using WebMentions
This is a complicated problem. I want to see what people are writing in public about my posts. I also want to direct people to the conversations which…
The Indieweb privacy challenge (Webmentions, silo backfeeds, and the GDPR)
while a Twitter user technically “publishes” a message for all world to see as they like or retweet a tweet, the consequence that simply pushing a…
Joshua Rivera
Ahsoka never bothered telling anyone it was just the middle of a story
The current fixation on interconnected cinematic universes and the vertical integration that fuels streaming platforms does a lot to make the viewer…
POSSE: a better way to post on social networks
The idea is that you, the poster, should post on a website that you own. Not an app that can go away and take all your posts with it, not a platform…
Great article on #POSSE by David Pierce
By practicing POSSE, even manually, you will learn what aspects of POSSE & backfeed matter the most to you, what aspects actually involve reaching…
It's 2023, here is why your web design sucks.
In a lot of orgs, the people that do design are now UX designers. It's a completely different role with a different budget for head count. They sit…
Building a photography website
Last year, I started a photography hobby. Soon after, I've created a place where I can share some of my work, without any attention-driven algorithms…
Comparing Manual and Free Automated WCAG Reviews
My concern is that too many managers, bosses, stakeholders, and even testers, may do no more than run a free automated [accessibility testing] tool…
Technologists trying to maximise user agency often fall into the trap of measuring agency by looking only at time saved (in the same way that they…
View transitions and stacking context: Why does my CSS View Transition ignore z-index?
Paint order, the order in which your elements are painted, cannot be easily calculated without applying a complex algorithm, especially since many…
StaticShape — Migrate to an SSG at scale
StaticShape is a tool for automatically shaping a fully static site into an SSG site.
CDN Planet
How to Improve TTFB on Cloudflare with Speculation Rules
Speculation Rules prefetch improved TTFB on our […] website by ~300 ms for ~20% of eligible pageviews. This can be done everywhere, not only on Cloudflare.…
By the end of 1975, the expulsion and exile of the Chagossian people was complete. A survey showed 26 families had died together in poverty. Young…
Kuba Bartwicki and Monica Crusellas
A bold new look for the GOV.UK homepage
we’ve made the design of the homepage bolder and clearer on mobile devices. We redesigned the header area and increased font sizes and spacing throughout…
CrUX to Sea Level: Lessons in Distilling RUM
How you tell & present a story from user data can encourage organizational buy-in (or hinder it). Go from aggregate data & rough SQL to the polished…
Stop Using AI-Generated Images
The proliferation of AI content on the web may feel all but inevitable, and perhaps it is. But we can choose whether to participate in that harm or…
Netlify
This is an awesome new feature for Netlify! With Netlify Image CDN, you can transform images on demand without impacting build times. Netlify Image…
Worth mentioning again that this is just CSS with a touch of HTML. Also worth pointing out that very little of this is specific to CSS view transitions.…
Psychology of Speed: A Guide to Perceived Performance
When people mention web performance, they usually focus on development-first aspects like JavaScript frameworks and performance metrics. These are…
An Interactive Guide to CSS Grid
In this tutorial, I'm going to share the biggest 💡 lightbulb moments I've had in my own journey with CSS Grid. You'll learn the fundamentals of this…
Desktop progressive web applications
Sit with that for a second, you can write a desktop application with no tooling, launch it from your phone to the internet for free, and seconds later…
Conversations about this topic often end up with people saying "we need a better way to freeze the page in DevTools". Some of it is due to people…
The Tension and Future of Jamstack
This intellectual honesty allows us to make better decisions when architecting projects: when it is and is not appropriate to use Jamstack.
#TheFutureOfJamstack is a shared vision we’re writing, transparently and collectively. Join the movement to hear stories of the people who live and…
MajorLinux
PlayStation to wipe purchased Discovery content from consoles
Many are suggesting […] that many of the licensing deals need to be revisited. I honestly don’t care. If I purchased the content, I purchased it as…
Luke Wroblewski
All Mobile Apps Expand Until...
Every mobile app attempts to expand until it includes chat. Those applications which do not are replaced by ones which can.
Sizes="auto" pretty much requires width and height attributes
sizes="auto"
is a great new feature of HTML for lazy loaded responsive images. are we dealing with an with sizes=auto? Then its natural dimensions…
Even if people only ever add your website into their feed reader and let the app find the RSS feed (see below for more info on this), showing an RSS…
Shawn Cheris
Introducing Spectrum 2: Our vision for the future of Adobe experience design
Because Adobe has products that span platforms (including macOS, Windows, iOS, Android, and web), we’ve had to think a lot about the right balance…
Getting started with Web Performance 🚀
JavaScript is the most expensive resource in terms of performance on the web, and is a really common bottleneck when used too much. Where you can…
Pipe Dreams: The life and times of Yahoo Pipes
Pipes was inspirational to a generation of programmers, user interface designers, and product people. Just in the way the Pipes team ran with ideas…
How Comics Were Made! A Visual History from the Drawing Board to the Printed Page
I want to tell the story of the whole comic-strip evolution: from the Yellow Kid and early syndication through the very latest webcomics—the whole…
Netlify’s Disingenuous Survey-based Attack on Next.js (and Eleventy, too)
Reading the report, it’s clear that Netlify has a vested interest in elevating Astro because Astro is best poised to dethrone Next.js. If Astro wins,…
Have you heard about CRDTs and wondered what they are? Maybe you’ve looked into them a bit, but ran into a wall of academic papers and math jargon?…
RSS Parrot: Turn Mastodon into your feed reader
RSS Parrot, a Fediverse service that lets you turn Mastodon into your feed reader. The Parrot follows the RSS or Atom feeds of a large number of websites,…
How Lego builds a new Lego set
In addition to production, packing, packaging, and marketing, Lego has a host of teams that work directly with designers, including a function testing…
This is a call to action to create a Global Design System that provides the world’s web designers & developers a library of common UI components.…
Doug Abrams
WCAG refers to testing viewports at 320 px wide and 256 px high. They chose these dimensions in part because they’re equivalent to a midrange desktop…
Where have all the flowers gone?
So where have all the websites gone? Well, the people who make them have all gone to war for the capitalist machine. They grew up and got jobs. A…
My take on fading content using transparent gradients in CSS
So that's two ways to fade text content. mask-image
is a little more flexible, but background-clip
is a little more widely supported. Both are…
Platform Tilt: Documenting the Uneven Playing Field for an Independent Browser Like Firefox
People deserve choice, and choice requires the existence of viable alternatives. Alternatives and competition are good for everyone, but they can…
I love all this shared tooling for the same reason I like consent-based federation and communities over networks: it brings the moderation focus back…
RLI (Recently Logged-In) Browser Cache Bypassing
On websites where both guests and authenticated users navigate the same pages, a recently logged in user runs the risk of seeing anonymous content…
What happened with the Web Monetization API?
I wanna send $1 to a website, it happens instantly and anonymously, and the developer can do things around this. Like unlock features! For instance,…
Let's call the things we write and publish on social networks posts. That term has the longest history, it's simple, one syllable, and isn't tied…
Web Push on iOS - 1 year anniversary
Web Push on iOS requires users to find a hidden feature and perform a bunch of steps to install a website to the home screen. Whatever the motives…
The Web Component Success Story
Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks.…
the Interop team
JPEG XL has not been selected for Interop 2024
Thank you for proposing JPEG XL image format for inclusion in Interop 2024. We wanted to let you know that this proposal was not selected to be part…
Belinda Luscombe
The Power of Bryce Dallas Howard’s Body in Argylle
A beautiful, smart, non-sample-size woman in a $200 million action movie by a major director should not be that rare in 2024, but it is. And it should…
Mobile INP performance: The elephant in the room
Unfortunately, due to lack of Safari support for some performance metrics – including Core Web Vitals – iPhone performance continues to be a blind…
Opportunities for AI in Accessibility
I have no doubt that AI can and will harm people… today, tomorrow, and well into the future. But I also believe that we can acknowledge that and,…
How far we’ve come: What it would mean to lose the GOV.UK Design System
Although the team works on a thing used by thousands of other people, it’s the invisible systems work that has a bigger impact. Reviewing. Advising.…
Jon Sneyers
This consolidates JPEG XL’s position as the best image codec currently available, for both lossless and lossy compression, across the quality range…
Dominikus Baur
and
Alice Thudt
Full of Themselves: An analysis of title drops in movies
A title drop is when a character in a movie says the title of the movie they're in. Here's a large-scale analysis of 73,921 movies from the last 80…
Linrui Tian, Qi Wang, Bang Zhang and Liefeng Bo
We proposed EMO, an expressive audio-driven portrait-video generation framework. Input a single reference image and the vocal audio, e.g. talking…
How many bytes is “normal” for a web font: a study using Google fonts
So here it is, folks, a web font file that supports extended Latin characters, your Às and your Ás and Â, Ã, Ä, Å... should weigh around 20K. Anything…
Arguments for opening links in a new tab or window
A significant percentage of web professionals believe that opening outbound links in new tabs or windows provides a benefit to site owners. Why? Is…
Every day, we browse the Web and scroll our timelines. And every day, we find even more interesting websites, blog posts, articles, videos, podcasts,…
Web Accessibility Initiative (WAI)
The Business Case for Digital Accessibility
Public use of the web is more than 25 years old. It is no longer a novelty but an integrated, critical tool of modern life. As smart businesses integrate…
View transitions: Handling aspect ratio changes
When folks ask me for help with view transition animations that "don't quite look right", it's usually because the content changes aspect ratio. Here's…
Identifying Font Subsetting Opportunities with Web Font Analyzer
In this article, we’ll explore some potential issues around font loading and the performance benefits of a lesser used feature - font subsetting.…
How we’re approaching theming with modern CSS
in the context of heavy theming, semantic CSS is going to be the key for long term success, not atomic stylesheets (ASS)
67 Weird Debugging Tricks Your Browser Doesn't Want You to Know
A list of useful, not-obvious hacks to get the most out of your browser’s1 debugger. Assumes an intermediate-level-or-higher understanding of the…
An Interactive Guide to CSS Container Queries
Ahmad Shadeed once again offers us a very detailed and interactive article - a true work of art! While building layouts in CSS, we always wanted a…
Lydia Hallie
JavaScript Visualized - Promise Execution
The cool thing about Promises is that this can trigger an asynchronous action if a handler is attached by either then
or catch
. Since the handlers…
Awesome article, not just for the advice about printers. an entire ecosystem of content farms seems motivated to constantly update articles about…
those old experiments I did with the brick […] caught the eye of the production team gearing up to make The Lego Movie around 2012 or 2013. In search…
Christo Buschek and Jer Thorp
As artists, academics, practitioners, or as journalists, dataset investigation is one of the few tools we have available to gain insight and understanding…
Shōgun and Ripley might not be your thing, but they’re both shows that have clearly put care into their visual look—they’re not lazy, and that deserves…
Hardest Problem in Computer Science: Centering Things
Even if it’s hard. Even if tools make it inconvenient. Even if you have to search for solutions. Together, I trust, we can find our way back to putting…
Bobae Kang
[HTMX] can get you 80% there with radically less complexity. No extra dependencies, no build step, no advanced tooling (now re-written in Rust!),…
A week ago, I finally got round to implementing an idea I’d been toying with for years: what if your computer made a little bit of noise every time…
Own Your Web – Issue 14: Webmentions
Wouldn’t it be amazing to be able to collect reactions from other personal websites or large platforms when we publish something on our own sites?…
Own Your Web – Issue 10: Links Worth Sharing
many of us seem to instinctively drop most of the interesting links we find right into the timelines of the many – oh, so many! – social media silos.…
SpeedCurve | NEW: RUM attribution and subparts for Interaction to Next Paint!
In addition to advanced settings, navigation types, and page attributes, we've just released more diagnostic detail for the latest flavor in Core…
I want it all but, it is impossible
I need to work and live life outside of consumption and entertainment. Same.
Towards a quieter, friendlier web
Be kind, be honest and engage on your own terms. Walk away from anything that doesn't serve you and don't be afraid to craft a browsing experience…
Subsetting.xyz — Type foundries that allow font subsetting
Subsetting removes unused characters from a font to reduce file size. For example, you might not use math symbols like ≤ and ∫, and removing them…
Going to the cinema is a data visualization problem
So I decided to take matters into my own hands and build a cinema selection website I always dreamed of. I love it! 🍿
Jeremy Wagner
New field insights for debugging INP
Interaction to Next Paint (INP) is a Core Web Vital that measures how responsive a page is to interactions. Due to INP's scope, it can be difficult…
Chrome extension to play sounds on network requests depending on content type and domain. Higher pitch for bigger files. Reminds me a lot of Tracker…
Emile Horizon
The axiom nudity = money, is very sick and I’m afraid this will have consequence with the time on many levels of our culture. And obviously, internet…
Microsoft Edge Team
JavaScript must be downloaded, then run through a JIT compiler (even if you don’t use it), and then executed, and all this must be done before any…
“Web components” considered harmful
This is a branding problem as much as it is an education problem. Neither the HTML standard nor the DOM standard mentions the term “web components”…
Why Lighthouse Performance Score Doesn’t Work
There is some correlation between the [Lighthouse] Performance Score and how well your site will do for real users. Still, lab testing alone doesn’t…
Speculative Rules API – a new iteration in the pre-loading journey
The Speculative Rules API is the latest development in a long-standing narrative. The issues I’ve discussed were already inherent in previous solutions.…
Cory Rylan
Flow Charts with CSS Anchor Positioning
With the introduction of the CSS Anchor Position API in Chrome 125, it's never been easier to position an element relative to another element. This…
New to the world of web performance? Welcome! Here's everything you need to know to master website monitoring, analytics, and diagnostics. Learn how…
Highlighting Blogging on Mastodon
With this new author byline, a direct connection between the article and the corresponding fediverse accounts is established that increases the visibility…
Fit-to-Width Text: A New Technique
Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query…
I wrote this book back in 2016. SVG wasn't new then, but it was starting to catch on a little bit more for front-end developers. I thought, and still…
I don’t want to suggest that my experience was bumpy, mind you — far from it! Overall, I am delighted by how easy it was to move a decade’s worth…
Have It All: External, Styleable, & Scalable SVG
here I'll demonstrate a 4th approach that I think hits the center of the venn diagram for External, Styleable, and Scalable SVG.
David Rubino
How can Firefox create the best support for web apps on the desktop?
we’re taking a fresh look at Progressive Web Apps (PWAs), which have long been a top request from our Mozilla Connect community. Today I want to share…
Learn Grid Now, Container Queries Can Wait
There’s no rush to rip out all your media queries, and replace them with containers. You’ll be fine waiting for widely available support and your…
Blog posts are like these little robot evangelists you release out into the world on your behalf. They work tirelessly, 24/7, spreading your thoughts…
GIFs Are Forever, Let’s Make Them Better
Everyone loves animated GIFs, right? Not if you have finite bandwidth, a shaky network connection or motion sensitivity! But fear not: Thanks to newly…
Discovering Third Party Performance Risks
[…] a tool called Third Party Explorer, which leverages WebpageTest data to help analyze a third party’s impact on a page load. The idea behind this…
The Dev Tools Performance Monitor Panel
The Performance Monitor collects performance data in realtime and puts it on a graph. It’s handy for detecting performance problems at a high-level.…
Should form labels be wrapped or separate?
All browsers and assistive technologies support explicit association, however implicit association is not reliably supported by voice control software.…
Cookie Status team
Cookie Status :: Current Status Of Browser Tracking Prevention
The cookiestatus.com website is a knowledge sharing resource for the various tracking protection mechanisms implemented by the major browsers and…
So what is the current state of ES5 on the web today? And what are the best practices for web developers when building code for production? TL;DR:…
Tyler
Multiple studies conducted by real scientists and doctors over the past several centuries have repeatedly concluded that a positive relationship with…
Jeremy Gray
Why Apple Uses JPEG XL in the iPhone 16 and What it Means for Your Photos
For iPhone photographers, the benefits far outweigh the potential downsides. There’s little doubt that JPEG XL is an excellent image format that offers…
The thing with switching to a new formatting context, as we do with flex and grid layouts, is that the minute you use display: flex
or `display:…
McKayley Gourley
The Department of Energy Wants You to Know Your Conservation Efforts Are Making a Difference
By not showering for two whole weeks, you enabled an AI Facebook bot to create and post several images of Jesus eating breakfast at a Denny’s, which…
Syndicating an RSS feed to Mastodon using a Cloudflare worker
Everything shared from my site to Mastodon runs out of a single all activity RSS feed. […] This feed is populated from a fairly verbose processContent
…
Is the sticky thing stuck? Is the snappy item snapped? A look at state queries in CSS
Is the sticky thing stuck? A lot of us have been there, we have a header navigation that should remain sticky and should only show a shadow from the…
Introducing TODS – a typographic and OpenType default stylesheet
The idea is to set sensible typographic defaults for use on prose (a column of text), making particular use of the font features provided by OpenType.…
Darren Horrocks
Why Copilot is Making Programmers Worse at Programming
If you as the developer do not understand the code, do not understand how you got to where you are, do not understand how to solve the problem yourself.…
Cloudflare
,
Alex Krivit and
Suleman Ahmad
Introducing Speed Brain: helping web pages load 45% faster
With the initial release of Speed Brain, we have designed a solution with important side effect prevention guardrails that completely removes the…
kliksphilip
JPEG VS AVIF - The Battle of Compression
In this super thorough study I test one single HD image and come to vast sweeping conclusions about JPEG XL and AVIF. But that's still one image comparison…
Zsolt Ero
OpenFreeMap lets you display custom maps on your website and apps for free. You can either self-host or use our public instance. Everything is open-source,…
I wasted a day on CSS selector performance to make a website load 2ms faster
It was at this point that the second penny dropped and I realised I’d been duped by a graphing misunderstanding and my own enthusiasm for improving…
Building a Single-Page App with htmx
It’s a simple proof of concept todo list. Once the page is loaded, there is no additional communication with a server. Everything happens locally…
It helps a lot that various libraries in the ecosystem compose well. Just snapping together ProseMirror, Yjs and Y-Sweet gave me a collaborative rich…
Michael Andrews
Separating content and presentation: Moving past FUD
The biggest barrier to the universal adoption of content-presentation separation is poor implementation. Bad tools, weak requirements, and immature…
Grant Gross
Devs gaining little (if anything) from AI coding assistants
“It becomes increasingly more challenging to understand and debug the AI-generated code, and troubleshooting becomes so resource-intensive that it…
An expert developer can stand up on a conference stage and show off the amazing scores for their site (perfect performance! perfect accessibility!…
anyone should be able to make a website with HTML if they want. This book will teach you how to do just that. It doesn’t require any previous experience…
Web font file size study: a variable font addition
The sum is smaller than the parts. A variable font that has both normal and heavy (bold) weight (and also everything in between) is slightly smaller…
Sometimes things change and your dumb old thoughts need to be buried so you can just move on and be you. Sometimes things that seemed so big and important…
Select the last occurrence of an element in the whole document
Oh CSS… 😍
Should masonry be part of CSS grid?
An exploration of examples showing masonry as both a part of CSS Grid and as its own display type. Ahmad provides compeling use cases and code examples…
I don't know why Bluesky hasn't added the federation systems that would enable freedom of exit to its service. Perhaps there are excellent technical…
None of this is accidental. The output of a platform tells you what it is designed to do: In X’s case, all of this is proof of a system engineered…
It’s not lost on me that more than at any other point in history our relationships to each other are sculpted by the whims of a handful of commercial…
Gwendolyn Rak
Tactile Controls: Why Buttons Are Making a Comeback
When I’m driving, it’s actually unsafe for my car to be operated in that way [with a touchscreen]. It’s hard to generalize and say, buttons are always…
I despise accessibility overlays, and get really quite upset when they're mentioned in a serious context. Unfortunately, getting increasingly upset…
Why is anybody who deplores Trump’s reelection and Musk’s own degradation of public discourse with racism, antisemitism, misogyny, union-busting,…
The Guardian
Why the Guardian is no longer posting on X
Thankfully, we can do this because our business model does not rely on viral content tailored to the whims of the social media giants’ algorithms…
Google iOS App Page Annotation
this will lead to people going to your site, then Google injecting links on your site that will lead your website visits to Google Search. Like Google…
Bluesky claims to be billionaire proof, which is either hopelessly naive or deliberately smarmy. Claims that their platform is open and decentralized…
Yes, progressive enhancement is a fucking moral argument
I know that progressive enhancement is harder than just jumping straight in and coding your app in whatever your favourite framework is. But guess…
A Book Apart authors
In 2024, A Book Apart closed its doors after publishing a much-loved collection of more than 50 brief books for people who make websites. The rights…
Daniel Appelquist
,
Hadley Beeman
and
W3C
The web should be a platform that helps people and provides a positive social benefit. As we continue to evolve the web platform, we must therefore…
Online following and Starter Packs
I want people to follow me naturally because they enjoy my posts in particular, I don’t want a tech/demoscene/gamedev/etc audience showing up in bulk…
Lens: Meta Tag Checker (Robb's Version)
There are a few ways people like to check the meta tags on their sites. […] as the old developer saying goes, none of them did exactly what I wanted…
Mattrbld
and
Amadeus Maximilan
Mattrbld is a headless content management system for teams and individuals who don’t want to be locked into a specific platform or framework. It offers…
Stop Human Approval in Pull Requests: A case for better collaboration
Human approval in PRs delays delivery, does not ensure quality, creates friction, diminishes ownership, and leads to enormous context switching. Automation…
This is not a sub-post about Harrison; I just want to defend Signs, M. Night Shyamalan’s best film
it does seem as though we’ve collectively moved more and more toward artistic literalism, where anything not explicitly stated in the text by the…
Accelerating AI may sound exciting but it’s also is accelerating destruction of life. Which is very annoying as I’m very impressed by AI, like many…
Benj Edwards
Why extracting data from PDFs is still a nightmare for data experts
Despite their promise, LLMs introduce several new problems to document processing. Among them, they can introduce confabulations or hallucinations…
The work is never just “the work”
Without a proper audit it is impossible to properly quantify how long work takes over the longer term, but given the breakdowns above “double it and…
Never do pixel math with em
and rem
units. That’s where we went wrong, by assuming that 16px == 1em
is a reliable fact. It reminds me a lot…
Jen Simmons
,
Saron Yitbarek,
Elika Etemad and
Brandon Stewart
Item Flow, Part 1: A new unified concept for layout
As we worked through the details, we started to get excited. Suddenly new features for Flexbox and Grid that people have wanted for years had an obvious…
The fact is folks who use Tailwind aren’t thinking about responsibility and scale in this way. They are thinking how can I push this out as fast as…
CSS Custom Properties vs. Sass Variables: A Pragmatic Guide
The interplay between Sass variables and CSS custom properties should be a strategic partnership. Over nearly a decade of evolving web practices,…
Zell Liew
Tailwind's @apply Feature is Better Than it Sounds
Tailwind’s utilities are very powerful by themselves, but they’re even more powerful if you allow yourself to use @apply
(and allow yourself to…
Last night, my role at Google was eliminated. I'm quite sick to my stomach, extremely sad, and even more angry. The way Google handled Adam's firing…
The font project is owned by the design system team at IKEA, but working with fonts is quite a specialist skill and we wanted to cast a wide net,…
Optical Size tweaking for dark mode
Most type considerations for dark mode are exclusively colour. Changing the foreground and background on a toggle or by the user’s OS preferences.…
Will Yarborough
This is a series [of video tutorials] designed to get photographers up and running using Synology NAS! Starting with locally editing files and going…
Don't let your voice be flattened by the über theme
consider for a moment that I can’t tell you the last Medium post I’ve read because they’re all the same to me. […] I can’t tell you a single person…
It is right to ask ourselves to change, too. There are a few things in my life, in my heart, that are non-negotiable. The rest is up for discussion.…
View Transitions Break Incremental Rendering
Instead of showing users that this thing is the same as that thing, we’ve told them, perhaps with extra motion/panache, that even though these the…
A Web Component UI library for people who love HTML
A lot of libraries approach Web Components with a React mindset, and treat them more like an implementation detail than a feature. Instead of leaning…
Your design system is an idea. Every asset you build will require compromise of some kind. […] You have to think of your design system as a concept…
Benj Edwards
AI video just took a startling leap in realism. Are we doomed?
As these tools become more powerful and affordable, skepticism in media will grow. But the question isn't whether we can trust what we see and hear.…
Elena Rossini
,
Samuel Aaberg
and
Riyen Patel
Introducing the Fediverse: a New Era of Social Media is a 4-minute video explainer about the Fediverse, a galaxy of interconnected, free, open-source…
Pedro Tavares
Writing Code Was Never The Bottleneck
The marginal cost of adding new software is approaching zero, especially with LLMs. But what is the price of understanding, testing, and trusting…
David Bridie
Spotify used to seem like a necessary evil for musicians. Now it just seems evil
We can’t keep handing our creativity, our loyalty and our cash to amoral tech giants who see music as content and war as business. I’d rather earn…
An Interactive Guide to SVG Paths
The SVG `` element is notoriously tricky. When I first encountered it, I found it totally inscrutable. Its syntax isn’t quite as bad as Regex, but…
Harley Turan
Any app that can access your photo library can, with enough effort, determine your address, where you shop, where your friends live, where you go…
James Folta
Why you should get (back) into RSS curation
It feels like riding a bike: fast enough to get somewhere, but slow that the ride is enjoyable. And like reading, you control the frame rate, and…
Cloudflare proposes the Spotify model for the web
We'll pool some revenue and dole it out to you based on how valuable we decide it is. How do we decide how valuable it is? Shut up and trust us. It's…
Apple's first desktop operating system was Tahoe. Like any first version, it had a lot of issues. Users and critics flooded the web with negative…
See all tags.