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
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
"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
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>
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
Design Systems Blogathon
It was fun watching a bunch of back and forth blogging between a bunch of smart people quoting a bunch of smart people last week. If you missed it, you might
Is Having an RSS Feed Just Giving Content Away for Free?
I mean, kinda.
Select an Element with a Non-Empty Attribute
Short answer:
Browser Version Release Spectrum
Whenever a browser upgrades versions, it's a little marketing event, and rightly so. Looks like for Firefox it's about once a month, Chrome is ~6 weeks, and
HTTPS is Easy!
I've been guilty of publicly bemoaning the complexity of HTTPS. In the past, I've purchased SSL certificates from third-party vendors and had trouble
Native Image Lazy Loading in Chrome Is Way Too Eager
Interesting research from Aaron Peters on <img loading="lazy" ... >:
CSS4 is a Bad Idea
Louis Lazaris, reacting to the idea of CSS4:
CSS4
What is CSS4? Is it a real thing? I hate to break it to you, but not really. But maybe we could make it a thing? CSS3 was successful, so why not keep that train rolling like they do in JavaScript?
Overcomplicatin’
There's some famous quote that goes something like...
Freezing User-Agent Strings
There's been news about Chrome freezing their User-Agent string (and all other major browsers are on board). That means they'll still have a User-Agent (UA)
Get Moving (or not) with CSS Motion Path
We just linked up the idea that offset-path can be cleverly used to set type on a path. Don't miss Michelle Barker's experimentation either, with drawing
Full Stack Panic
A new podcast from Sean Fioritto inspired by Joel Califa's term "Full Stack Anxiety".
Smaller HTML Payloads with Service Workers
Short story: Philip Walton has a clever idea for using service workers to cache the top and bottom of HTML files, reducing a lot of network weight.
Apollo GraphQL without JavaScript
It's cool to see progressive enhancement being done even while using the fanciest of the fancy front-end technologies.