Chrome + System Fonts Snafu
There was just a bug late last year where system fonts (at least on Mac, I don't know what the story was on other platforms) in Chrome appeared too thin and
“The title ‘Front-End Developer’ is obsolete.”
That title is from the opening tweet of a thread from Benjamin De Cock. I wouldn't go that far, myself. What I like about the term is that ‘Front-End’
My Visual Studio Code Setup: Extensions and Themes
Matthias Ott's posted his VS Code setup. I find lists like this (I rounded up some recent updates of my own) irresistible, probably because, like y'all, I
How (some) good corporate engineering blogs are written
Interesting research from Dan Luu¹:
Front-End Challenges
My favorite way to level up as a front-end developer is to do the work. Literally just build websites. If you can do it for money, great, you should. If the
Jetpack Instant Search!
Jetpack has had a search feature for a while. Flip it on, and it replaces your built-in WordPress search (which is functional, but not particularly good) with
No-Class CSS Frameworks
I linked up Water.css not long ago as an interesting sort of CSS framework. No classes. No <h2 class="is-title">. You just use semantic HTML and get
Create Diagonal Layouts Like it's 2020
Nils Binder covers the ways:
CSS Findings From The New Facebook Design
Ahmad Shadeed digs around the new Facebook's front-end code.
A Grid of Logos in Squares
Let's build a literal grid of squares, and we'll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo
CSS-Only Marquee Effect
You make sure the text is more than twice the width of the screen, then use negative translate animations to do the marquee movement.
Some Typography Links II
I just can't stop bookmarking great links related to typography. I'm afraid I'm going to have to subject you, yet again, to a bunch of them all grouped up. So
Google's Technical Writing Guide
It's good!
Accessibility Links
Austin Gil has kicked off the first in a five-part series about "HTML Forms Right" and to starts with semantics. It's talking to the "we build our front-ends
How They Fit Together: Transform, Translate, Rotate, Scale, and Offset
Firefox 72 was first out of the gate with "independent transforms." That is, instead of having to combine transforms together, like:
RSS Stuff
Laura Kalbag wrote How to read RSS in 2020. This would be a nice place to send someone curious about RSS: what it is, what it's for, and how you can start
gqless
This is so cool. I mean, GraphQL is already cool. It's very satisfying to write an understandable-looking query for whatever you want and then use that data
Creating a Pencil Effect in SVG
Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why
How to use CSS Scroll Snap
Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling
CSS Viewport Units
Deep dive from Ahmad. I like the coverage of vmin and vmax, which I think I don't reach for as often as I should.
Auto-Growing Inputs & Textareas
By default, <input> and <textarea> elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way
How To Use an Emoji as a Favicon Easily
With just a simple one-liner of code you can use any emoji as a favicon of your website. 😃
Different Favicon for Development
I bet a lot of us tend to have the production website and the development website up simultaneously a lot. It's almost a developer cliché at this point to
CSS :nth-of-class selector
That's not a thing.
Client-Side Image Editing on Mobile
Michael Scharnagl:
CSS2JS
To add inline styles on an element in JSX, you have to do it in this object syntax, like:
What Does `playsinline` Mean in Web Video?
I got myself confused about this the other day, went around searching for an answer and came up empty on finding something clear. The answer actually is quite
Flexbox and absolute positioning
Chen Hui Jing notes that when you absolutely position a flex item, it's no longer part of the flex layout. Except... it kinda is a little bit. If you make the
Tools for Optimizing SVG
This is our straight-to-the-point list of SVG optimizing tools across a number of categories. They are all largely based around SVGO, but how you use it depends. There are web apps, desktop apps, apis, and even design tool add-ons.
WooCommerce 4.0 & WooCommerce Payments Beta
Y'all know WooCommerce: it's a plugin for WordPress that adds robust eCommerce functionality to your site. Notably, like WordPress itself, it's open-source
Using the HTML title attribute
Steve Faulkner:
"weeds of specificity"
Lara Schenck:
Two Steps Forward, One Step Back
Brent Jackson says CSS utility libraries failed somewhat:
Make Yourself a Little API With Netlify Functions
Here's an example of a nice little use case for cloud functions. Glitch has this great package of friendly words. Say you wanted to randomly generate
Negative Margins
PPK digs into the subject, which he found woefully undercovered in web tech documentation. Our entry doesn't mention them at all, which I'll aim to fix.
Geoff's Redesign Posts
I love it when people redesign "in the open" and write about it. I'd just like to shout out to our own Geoff who has been doing this for 3 months now. He
What to Use Instead of Number Inputs
You might reach for <input type="number"> when you're, you know, trying to collect a number in a form. But it's got all sorts of issues. For one,
Currying in CSS
Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don't fully understand) and I
The Slideout Footer
A fascinating new site called The Markup just launched. Tagline: Big Tech Is Watching You. We’re Watching Big Tech. Great work from Upstatement. The
What React Does (and Doesn't Do)
With a name as big as React, it's bound to cause some Stream-Crossing Confusion, as I like to call it. How do you center a <div> in React? Dave Ceddia:
Vue.js: The Documentary
Hey how cool! A documentary about Vue! Good timing as it looks like VueConf is happening right now. (Reminder we have a site for conferences to tell you stuff
HTML: The Inaccessible Parts
<input type="number">, <input type="date">, <input type="search">, <select multiple>, <progress>, <meter>,
A Follow-Up to PHP Templating
Not long ago, I posted about PHP templating in just PHP (which is basically HEREDOC syntax). I'm literally using that technique for some super basic
Where to Learn WordPress Theme Development
Over a decade ago, I did a little three-part video series on Designing for WordPress. Then I did other series with the same spirit, like videocasting the
When CSS Blocks
Tim Kadlec:
Pages for Likes
I posted about parsing an RSS feed in JavaScript the other day. I also posted about my RSS setup talking about how Feedbin is at the heart of it.
Gutenberging
It's been over a year since the big WordPress launch of Gutenberg, the new editor. It seems to me most of the controversy around it has died down. There has
Fixed Headers and Jump Links? The Solution is scroll-margin-top
The problem: you click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>.
iOS 13 Design Guidelines, Templates, and Downloads
Erik Kennedy wrote up a bunch of design advice for designing for the iPhone. Like Apple's Human Interface Guidelines, only illustrated and readable, says Erik.
Animate SVG Path Changes in CSS
Every once in a while I'm motivated to attempt to draw some shapes with <path>, the all-powerful drawing syntax of SVG. I only understand a fragment of
Footnote Characters
There are special superset number characters that are sometimes perfect for footnotes. Here they are:
Solving Sticky Hover States with @media (hover: hover)
Mezo Istvan does a good job of covering the problem and a solution to it in a blog post on Medium. If you tap on something that has a :hover state but you don't leave the page then, on a mobile device, there is a chance that :hover state "sticks." You'll see this with stuff like jump-links used as tabs or buttons that trigger on-page functionality.
HTML Data Attributes Guide
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
Blame the implementation, not the technique
I'm not sure we've gotten much better at this since Tim Kadlec wrote this in 2012:
Links and Buttons Guide
Our complete guide to links, buttons, and button-like inputs in HTML, CSS, and JavaScript.
Creating a Details Element That Opens But Never Closes
The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary>
Neumorphism.io
I was sort of making fun of neumorphism the other day. I don't actually care that much. I mostly just think it only works on some flat colored backgrounds,
2020 Stack
In an article with the most clickbaity article ever, Joe Honton does a nice job of talking about the evolving landscape of web development. "Full-stack"
SFTP & Database Access on WordPress.com
Wait what?
How to Fetch and Parse RSS Feeds in JavaScript
Say you have an RSS feed like this one. The goal is to request that RSS feed, parse it, and do something useful with the data in it. RSS is XML, and XML is