Tackling Authentication With Vue Using RESTful APIs
Authentication (logging in!) is a crucial part of many websites. Let’s look at how to go about it on a site using Vue, in the same way it can be done with any
How to Tame Line Height in CSS
In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we
CSS fix for 100vh in mobile WebKit
A surprisingly common response when asking people about things they'd fix about anything in CSS, is to improve the handling of viewport units.
Equal Width Columns in CSS Grid are Kinda Weird
Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you'd have equal-width columns, but that's a rare day. What
Using CSS Masks to Create Jagged Edges
I was working on a project that had this neat jagged edge along the bottom of a banner image.
React Single File Components Are Here
Shawn Wang is talking about RedwoodJS here:
Why does writing matter in remote work?
Talk to anyone who has an active blog and I bet they'll tell you it's been valuable to them. Maybe it's opened doors. Maybe it's got them a job. Maybe it's
Accepting Payments (including Recurring Payments) on WordPress.com
I'm a fan of building websites with the least amount of technical debt and things you have to be responsible for as possible for what you wanna do. Sometimes
Dealing With Stale Props and States in React’s Functional Components
There’s one aspect of JavaScript that always has me pulling my hair: closures. I work with React a lot, and the overlap there is that they can sometimes be
How I Put the Scroll Percentage in the Browser Title Bar
Some nice trickery from Knut Melvær.
min(), max(), and clamp() are CSS magic!
Nice video from Kevin Powell. Here are some notes, thoughts, and stuff I learned while watching it. Right when they came out, I was mostly obsessed with
How to Create Custom WordPress Editor Blocks in 2020
Peter Tasker on creating blocks right now:
Static Hoisting
The other day in "Static or not?" I said:
Angular + Jamstack! (Free Webinar)
It's easy to think that working with Jamstack means working with some specific set of technologies. That's how it's traditionally been packaged for us. Think
`lh` and `rlh` units
There's some new units I was totally unaware of from the Level 4 spec for CSS values! The lh unit is "equal to the computed value of line-height" and rlh is
List Style Recipes
Lists are a fundamental part of HTML! They are useful in things like blog posts for listing out steps, recipes for listing ingredients, or items in a
CSS Functions Guide
Like any other programming language, CSS has functions. They can be inserted where you’d place a value, or in some cases, accompanying another value declaration.
No-Comma Color Functions in CSS
There have been a couple of viral tweets about this lately, one from Adam Argyle and one from Mathias Bynes. This is a nice change that makes CSS a bit more
Playing With (Fake) Container Queries With watched-box & resizeasaurus
Heydon's <watched-box> is a damn fantastic tool. It's a custom element that essentially does container queries by way of class names that get added to
React Integration Testing: Greater Coverage, Fewer Tests
Integration tests are a natural fit for interactive websites, like ones you might build with React. They validate how a user interacts with your app without
CSS-Tricks Chronicle XXXVIII
Hey hey, these "chronicle" posts are little roundups of news that I haven't gotten a chance to link up yet. They are often things that I've done off-site,
How to Redirect a Search Form to a Site-Scoped Google Search
This is just a tiny little trick that might be helpful on a site where you don't have the time or desire to build out a really good on-site search solution.
Using Formik to Handle Forms in React
There is no doubt that web forms play an integral role in our web site or applications. By default, they provide a useful set of elements and features — from
Static or Not?
A quick opinion piece by Kev Quirk: Why I Don’t Use A Static Site Generator. Kev uses WordPress:
The Cost of Javascript Frameworks
I expect this post from Tim Kadlec to be quoted in every performance conference talk for the next few years. There is a lot of data here, so please check it
@property
The @property is totally new to me, but I see it's headed to Chrome, so I suppose it's good to know about!
How to Make a CSS-Only Carousel
Editor's Note: Chrome is prototyping a new feature for creating carousels directly in CSS, including scroll buttons and scroll markers for navigating between
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’
Rethinking Twitter as a Serverless App
In a previous article, we showed how to build a GraphQL API with FaunaDB. We've also written a series of articles explaining how traditional databases built
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
Building a Scalable CSS Architecture With BEM and Utility Classes
Maintaining a large-scale CSS project is hard. Over the years, we've witnessed different approaches aimed at easing the process of writing scalable CSS. In
How (some) good corporate engineering blogs are written
Interesting research from Dan Luu¹:
Better Form Inputs for Better Mobile User Experiences
Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and
Pseudo-Randomly Adding Illustrations with CSS
Between each post of Eric Meyer’s blog there’s this rather lovely illustration that can randomly be one of these five options:
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
Styling in the Shadow DOM With CSS Shadow Parts
Safari 13.1 just shipped support for CSS Shadow Parts. That means the ::part() selector is now supported in Chrome, Edge, Opera, Safari, and Firefox. We’ll
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.
How to Re-Create a Nifty Netflix Animation in CSS
The design for Netflix's browse page has remained pretty similar for a few years now. One mainstay component is the preview slider that allows users to scroll
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
Getting JavaScript to Talk to CSS and Sass
JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large
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
typespecimens.io
If you’re looking for a new typeface for that side project of yours then here’s a great website by John D. Jameson that collects a bunch of the latest type
Why Do Some HTML Elements Become Deprecated?
The internet has been around for a long while, and over time we’ve changed the way we think about web design. Many old techniques and ways of doing things
Rethinking Code Comments
Justin Duke asks if treating code comments like footnotes could help us understand the code in a file better. In his mockup, all the comments are hidden by
Performant Expandable Animations: Building Keyframes on the Fly
Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve
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
4 CSS Grid Properties (and One Value) for Most of Your Layout Needs
CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout
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
Creating an Editable Site with Google Sheets and Eleventy
Remember Tabletop.js? We just covered it a little bit ago in this same exact context: building editable websites. It’s a tool that turns a Google Sheet into
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
Consistent Backends and UX: How Do New Algorithms Help?
In previous articles, we explained what consistency is, the difference between "strong" and "eventual" consistency, and why this distinction is more important