How to Animate Text with SVG and CSS
The other day I was helping my pal Jez work on Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word “enthusiasm” in
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.
An Introduction to MDXJS
Markdown has traditionally been a favorite format for programmers to write documentation. It’s simple enough for almost everyone to learn and adapt to while
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. 😃
Building a Real-Time Chat App with React and Firebase
In this article, we’ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We’ll integrate third-party auth providers
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:
React Suspense in Practice
This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We'll look at how to integrate routing
Playing With Particles Using the Web Animations API
When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end
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:
Get Started Building GraphQL APIs With Node
We all have a number of interests and passions. For example, I’m interested in JavaScript, 90’s indie rock and hip hop, obscure jazz, the city of Pittsburgh,
Programming Sass to Create Accessible Color Combinations
We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.
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
Considerations When Choosing Fonts for a Multilingual Website
As a front-end developer working for clients all over the world, I've always struggled to deal with multilingual websites — especially cases
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.
Adventures in CSS Semi-Transparency Land
Recently, I was asked to make some tweaks to a landing page and, among the things I found in the code, there were two semitransparent overlays — both with the
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:
How We Created a Static Site That Generates Tartan Patterns in SVG
Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan
What I Like About Craft CMS
Looking at the CMS scene today, there are upwards of 150 options to choose from — and that’s not including whatever home-grown custom alternatives people
Making Things Better: Redefining the Technical Possibilities of CSS
Robin recently lamented the common complaint that CSS is frustrating. There are misconceptions about what it is and what it does. There are debates about what
4 Ways to Animate the Color of a Text Link on Hover
Let’s create a pure CSS effect that changes the color of a text link on hover… but slide that new color in instead of simply swapping colors.
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
Selectors Explained
Have you ever found yourself either writing a CSS selector that winds up looking confusing as heck, or seen one while reading through someone's code? That
Unfortunately, clip-path: path() is Still a No-Go
I was extremely excited when I first heard that clip-path: path() was coming to Firefox. Just imagine being able to easily code a breathing box like the one
HTML: The Inaccessible Parts
<input type="number">, <input type="date">, <input type="search">, <select multiple>, <progress>, <meter>,
How to Customize the WooCommerce Cart Page on a WordPress Site
A standard e-commerce site has a few common pages. There are product pages, shop pages that list products, and let’s not forget pages for the user account,
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
Why is CSS Frustrating?
Here’s a great thread by Kevin Powell that's making the rounds. He believes so many folks see CSS as a frustrating and annoying language:
When CSS Blocks
Tim Kadlec:
Instant GraphQL Backend with Fine-grained Security Using FaunaDB
GraphQL is becoming popular and developers are constantly looking for frameworks that make it easy to set up a fast, secure and scalable GraphQL API. In this
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
Add Background Colors to SVGs Using the “rect” Element
The advantages of using SVGs in web development are well known. SVGs are small in size, can be made quite accessible, are scalable while maintaining their
Seen by Indeed
Are you looking for a tech job where you clock in, or for a career where you’ll be seen?
Do This to Improve Image Loading on Your Website
In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank
Footnote Characters
There are special superset number characters that are sometimes perfect for footnotes. Here they are:
How to Build Vue Components in a WordPress Theme
The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.
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.
Moving from Vanilla JavaScript to a Reusable Vue Component
I recently wrote an article explaining how you can create a countdown timer using HTML, CSS and JavaScript. Now, let’s look at how we
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>