Search
Increment Issue 13: Frontend
30.5.2020
Increment is a beautiful quarterly magazine (print and web) published by Stripe “about how teams build and operate software systems at scale”. While there is always stuff about making websites in general, this issue is the first focused on front-end¹ development.
I’ve got...
Global CSS options with custom properties
30.5.2020
With a preprocessor, like Sass, building a logical “do this or don’t” setting is fairly straightforward:
$option: false;
@mixin doThing {
@if $option {
do-thing: yep;
}
}
.el {
@include doThing;
}
Can we do that in native CSS with custom properties? Mark Otto shows...
Building Your First Serverless Service With AWS Lambda Functions
29.5.2020
Many developers are at least marginally familiar with AWS Lambda functions. They’re reasonably straightforward to set up, but the vast AWS landscape can make it hard to see the big picture. With so many different pieces it can be daunting, and frustratingly hard to see how they fit seamlessly into...
Jamstack News!
29.5.2020
I totally forgot that the Jamstack Conf was this week but thankfully they’ve already published the talks on the Jamstack YouTube channel. I’m really looking forward to sitting down with these over a coffee while I also check out Netlify’s other big release today: Build Plugins.
These are plugins...
Core Web Vitals
29.5.2020
Core Web Vitals is what Google is calling a a new collection of three web performance metrics:
LCP: Largest Contentful Paint
FID: First Input Delay
CLS: Cumulative Layout Shift
These are all measurable. They aren’t in Lighthouse (e.g. the Audits tab in Chrome DevTools) just yet, but sounds...
A First Look at `aspect-ratio`
29.5.2020
Oh hey! A brand new property that affects how a box is sized! That’s a big deal. There are lots of ways already to make an aspect-ratio sized box (and I’d say this custom properties based solution is the best), but none of them are particularly intuitive and certainly not...
Why we at $FAMOUS_COMPANY Switched to $HYPED_TECHNOLOGY
29.5.2020
Too funny:
After careful consideration, we settled on rearchitecting our platform to use $FLASHY_LANGUAGE and $HYPED_TECHNOLOGY. Not only is $FLASHY_LANGUAGE popular according to the Stack Overflow developer survey, it’s also cross platform; we’re using it to reimplement our mobile apps as well....
PureCSS Gaze
28.5.2020
Diana Smith with another mind-bending all HTML & CSS painting.
I love that these occupy a special place on the “Should I draw this in CSS?” curve. Things like simple shapes are definitely on the “yes” side of the curve. Then there’s a large valley where things...
Background Patterns, Simplified by Conic Gradients
28.5.2020
For those who have missed the big news, Firefox now supports conic gradients!
Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true (it’s false by default and all it takes to switch...
The Expanding Gamut of Color on the Web
27.5.2020
CSS was introduced to the web all the way back in 1996. At the time, most computer monitors were pretty terrible. The colors of CSS — whether defined with the RGB, HSL, or hexadecimal format — catered to the monitors of the time, all within the sRGB colorspace.
Most newer devices have a wide-gamut...
The Many Bad (and Good!) Patterns for Close Buttons
27.5.2020
Manuel Matuzović details 10 bad HTML patterns for a close button. You know, stuff like this:
<a class="close" onclick="close()"×</a
Why is that bad? There is no href there, so it really isn’t a link (close buttons aren’t links). Not to mention the missing href makes this...
Get Programmatic Control of your Builds with Netlify Build Plugins
27.5.2020
Today at Jamstack_Conf, Netlify announced Build Plugins. What it does is allow you to have particular hooks for events within your build, like when the build starts or ends. What’s nice about them is that they’re just a plain ‘ol JavaScript object, so you can insert some logic...
Responsive web design turns ten.
27.5.2020
Ethan on the thinking and research that inspired the term:
Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people would move them apart for a...
Responsive web design turns ten.
27.5.2020
Ethan on the thinking and research that inspired the term:
Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people...
A Guide to the Responsive Images Syntax in HTML
27.5.2020
This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We'll go over srcset and , plus a whole bunch of things to consider to help you get the best performance and design control from your images.
The post A Guide to the Responsive Images Syntax...
CSS Tips for New Devs
27.5.2020
Amber Wilson has some CSS Tips for New Devs, like:
It’s not a good idea to fix shortcomings in your HTML with CSS. Fix your HTML first!
And…
You can change CSS right in your browser’s DevTools (to open them, right-click the browser window and choose “inspect”...
Using Structured Data to Enhance Search Engine Optimization
26.5.2020
SEO is often considered the snake oil of the web. How many times have you scrolled through attention-grabbing headlines on know how to improve your SEO? Everyone and their uncle seems to have some “magic” cure to land high in search results and turn impressions into conversions. Sifting through...
Framer Web
26.5.2020
The prototyping app Framer just launched the web version of their design tool and it looks pretty darn neat. I particularly love the design of the marketing site that explains how to use Framer and what sets it apart from other design tools. They have a ton of examples that you can pop open...
Block Links: The Search for a Perfect Solution
25.5.2020
I was reading this article by Chris where he talks about block links — you know, like wrapping an entire card element inside an anchor — being a bad idea. It’s bad accessibility because of how it affects screen readers. And it’s bad UX because it prevents simple user tasks, like selecting text.
But...
How to Convert a Date String into a Human-Readable Format
25.5.2020
I’ll be the first to admit that I’m writing this article, in part, because it’s something I look up often and want to be able to find it next time. Formatting a date string that you get from an API in JavaScript can take many shapes — anything from loading all of Moment.js to have...