In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example,
<input type="email"/>) and validation attributes (such as
While incredibly easy and super lightweight, this approach does have a few shortcomings.
- You can style fields that have errors on them with the
:invalidpseudo-selector, but you can't style the error messages themselves.
- Behavior is also inconsistent across browsers.
User studies from Christian Holst and Luke Wroblewski (separately) found that displaying an error when the user leaves a field, and keeping that error persistent until the issue is fixed, provided the best and fastest user experience.
In this series, I'm going to show you two lightweight ways to validate forms on the front end. Both take advantage of newer web APIs. I'm also going to teach you how to push browser support for these APIs back to IE9 (which provides you with coverage for 99.6% of all web traffic worldwide).
Finally, we'll take a look at MailChimp's sign-up form, and provide the same experience with 28× less code.
I've long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design control, and they are predictable and performant.
I've also often advocated for a SVG icon system that is based on
<symbol></symbol>s (an "SVG sprite") and the
<use></use> element for placing them. I've changed my mind a little. I don't think that is a bad way to go, really, but there is certainly a simpler (and perhaps a little better) way to go.
Eric Portis joins me to dig into the world of responsive images.
We start at the basics. Responsive images are specifically images in HTML and exist because of a desire for better performance. Images are probably the biggest culprit in the overall weight of websites. If we can avoid sending too many pixels across the network, we should. After all, a screen that is only 720 pixels wide doesn't need a 2000 pixel wide image, even if it's a 2x display.
There's never a better time to work in software. Developers and designers are among the most desired people on the market. Companies all over the world seem to have a never-ending thirst for software experts. In 2003 the U.S. Bureau of Labor Statistics estimated the number of software engineers working in the US to be 677,900 people. In 2016, this number increased over 5× to 3,870,000.
At the same time, design teams grew faster than software development. In the last 5 years, the design-developer ratio increased by an average of 2.5×. These changes put enormous pressure on designers and developers to take on more projects while delivering higher quality faster. But the challenge is that software development doesn't scale easily.
Suppose you've built a zippy new event listing React app for a client. The app is hooked up to an API built with your favorite server-side tool. A couple weeks later the client tells you that their pages aren't showing up on Google and don't look good when posted to Facebook. Seems solvable, right?
I was working with CSS Grid and came to the
grid-row properties. I paused for a moment.
They're not overly complicated. They are shorthand properties for expressing where an element should start and end on a grids defined columns and rows.
What caught me was the fact that I can name these lines. (more…)
Even though CSS is relatively easy to write, it can be quite hard to maintain. The specificity, the global scope of everything, and the lack of guidance can easily lead to inconsistency, code duplication, and over-complication.
I've long been curious what a really well-documented CSS codebase looks like. Here, I'll share my experience, along with the expectations I have towards my vision of well-documented stylesheets.
Some fantastic behind-the-scenes stuff about Stripe's design work by Benjamin De Cock. Absolutely everything is clever and using very modern techniques.
- Using CSS grid for their iconic background stripes
- Using 3D cubes for aesthetic flair
- Using reduced motion media queries to accommodate that preference
Plus one I'd never seen before:
Connect's landing page uses the new Intersection Observer API which provides a much more robust and performant way to detect the visibility of an element ... The
observeScrollhelper simplifies our detection behavior (i.e. when an element is fully visible, the callback is triggered once) without executing anything on the main thread.
This is a real worry these days. I've heard it from lots of lots of developers. The years tick by on their projects, and all they ever seem to do is add to their CSS, never remove. It's not just a feeling, I've talked with companies before that track hard data on this. Over five years of tracking the size of their stylesheet, and all it's ever done is tick upwards in size.
This could be considered problematic for several reasons:
- Files getting bigger is worse for performance
- The developers are afraid of the CSS
I figure between (as I write) the 267 episodes of ShopTalk, 134 episodes of CodePen Radio, 154 video screencasts (and many hundreds more as part of the different series), and all my guest podcast apperances, I'm edging on 1,000 things I've voice-recorded for public consumption.
98% of that was with the Rode Podcaster, the same exact microphone I documented using in 2008. I figured it was about time for an upgrade, as I plan to continue podcasting and screencasting for another 10 years! I know audio quality is a big deal. I don't quite consider myself an audiophile, but I know I prefer listening to podcasts with good audio quality, and I'd like to make sure what I produce is as good of quality as is practical for me right now.
When we write CSS, sometimes we forget about some edge cases in the designs. For example, when the content is longer than we expected and we didn't account for that possibility, our design could break. We can't guarantee that our CSS will always work as expected, but at least we can reduce that by testing different types of content.
When you code CSS, you're writing abstract rules to take unknown content and organize it in an unknown medium. - Keith J. Grant
In this article, we will go through different UI bugs from real-world websites so we can account for them from the beginning. Ready? Let's go!
Another swell post by Ire Aderinokun, this time on the curious
minmax() CSS function and how it works alongside the CSS Grid features that we've been experimenting with lately.
What's especially great here is the examples where Ire explains how we can avoid media queries altogether. With just a couple of lines of CSS we can now build pretty complicated layouts.