Search
What does “revert” do in CSS?
28.1.2020
Miriam Suzanne has a Mozilla Developer video on the subject. The revert value is fairly new, supported in Firefox and Safari, but not yet in Chrome-world. We've already got a couple of related keywords that work on any property which are meant to help control inheritance and reset values....
Going Beyond Automatic SVG Compression With the “use” Element
27.1.2020
If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only few seconds and reduces your file size a lot. But if you need to use your SVG inline to animate or interact with...
“Browser Functions”
26.1.2020
Serverless functions are fairly straightforward. Put a bit of back-end language code, like Node, in the cloud and communicate with it via URL. But what if that URL didn't run a back-end language, it ran an actual browser? Richard Young:
We can now do full stack development using just Web APIs....
Flexible Captioned Slanted Images
25.1.2020
The end result of Eric Meyer's tutorial on creating this row of slanted images is pretty classy. But it's more about the journey than the destination (there isn't even really an isolated demo for it). Eric does an amazing job at talking it through like a thought process.
We did that recently, only...
Bundling JavaScript for Performance: Best Practices
24.1.2020
Performance advice from David Calhoun on how many scripts to load on a page for best performance:
[...] some of your vendor dependencies probably change slower than others. react and react-dom probably change the slowest, and their versions are always paired together, so they...
What’s the Difference Between Width/Height in CSS and Width/Height HTML attributes?
24.1.2020
Some HTML elements accept width and height as attributes. Some do not. For example:
<!-- valid, works, is a good idea --<img width="500" height="400" src="..." alt="..."<iframe width="600" height="400" src="..."</iframe<svg width="20" height="20"</svg<!-- not valid...
Min and Max Width/Height in CSS
24.1.2020
Here's a nice deep dive into min-width / min-height / max-width / max-height from Ahmad Shadeed. I like how Ahmad applies the properties to real-world design situations in addition to explaining how it works. In the very first demo, for example, he shows a button where min-width is used as a method...
Building Multi-Directional Layouts
23.1.2020
There are some new features in CSS that can assist us with building layouts for different directions and languages with ease. This article is about CSS logical properties and values (e.g. margin-inline-start).  These are a W3C working draft that still going under heavy editing, but have...
Component-Level CMSs
23.1.2020
When a component lives in an environment where the data queries populating it live nearby, there is a pretty direct line between the visual component and the database where that exact content lives. That is opening up doors to site editing experiences that travel that line. We're starting to...
Amelia Wattenberger’s The CSS Cascade
23.1.2020
If you're on a small screen, remind yourself to check it out on a big screen when you have the chance.
Did you know that styles from an active transition beat !important rules, but styles from an active animation do not? I definitely did not.
Or that there are "origins" that are almost like...
Searching the Jamstack
22.1.2020
Here's Raymon Camden on adding site search functionality to a site that is statically hosted. A classic trick! Just shoot 'em to Google and scope the results to your site:
<form action="https://www.google.com/search" method="get"<input type="search" name="q"...
JAMstack vs. Jamstack
21.1.2020
It's just a word to evoke the idea that serving as much as you can statically while using client-side code and hitting serverless APIs for any needs after that.
The "official website" changed their language from JAMstack (evoking the JavaScript, APIs, and Markup acronym) to Jamstack. It's nothing...
positionstack
21.1.2020
(This is a sponsored post.)
Say you have an address that your user typed in, like
1600 Pennsylvania Avenue NW, Washington, DC, USA
and now you need more information about it. Maybe you need the proper country code. Maybe you need the latitude and longitude. Maybe you need the postal code....
The Best Color Functions in CSS?
20.1.2020
I've said before that HSL is the best color format we have. Most of us aren't like David DeSandro, who can read hex codes. HSL(a) is Hue, Saturation, Lightness, and alpha, if we need it.
hsl(120, 100%, 40%)
Hue isn't intuitive, but it's not that weird. You take a trip around the color wheel from...
Getting Started with Front End Testing
20.1.2020
Amy Kapernick covers four types of testing that front-end devs could and should be doing:
Linting (There's ESLint for JavaScript and Stylelint or Prettier for CSS.)
Accessibility Testing (Amy recommends pa11y, and we've covered Axe.)
Visual Regression Testing (Amy recommends Backstop, and we've...
Timeless Web Dev Articles
18.1.2020
Pavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their perspective in some way. Fun! I'm gonna scour the thread and link up my favorites (that are actually articles, although not all of them...
The Design Squiggle
16.1.2020
I think we all have an intuitive understanding that, at the beginning of projects that require our creativity (be it design or code), things feel uncertain and messy. Then, as we go, things tend to straighten out. There is still some wiggling and setbacks, but by the end, we find a single solution...
A Web Component with Different HTML for Desktop and Mobile
16.1.2020
Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that ads present, and then presenting modern solutions to each of them.
One code snippet that caught my eye was a simple way to design a component...
The Deal with the Section Element
15.1.2020
Two articles published the exact same day:
Bruce Lawson on Smashing Magazine: Why You Should Choose HTML5 <article> Over <section>
Adam Laki on Pine: The Difference Between <section> and <div> Element
They are comparing slightly different things, but they both...
Debunking the Myth: Accessibility and React
15.1.2020
I find it notable when the blog of a major accessibility-focused company like Deque publishes an article called Debunking the Myth: Accessibility and React. Mark Steadman is essentially saying if a site has bad accessibility, it ain't React... it's you. The tools are there to achieve good...