Search
On Adding IDs to Headers
11.6.2020
Here’s a two-second review. If an element has an ID, you can link to it with natural browser behavior. It’s great if headings have them, because it’s often useful to link directly to a specific section of content.
<h3 id="step-2"Step 2</a
Should I be so inclined, I could...
How to Reverse CSS Custom Counters
11.6.2020
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:
5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post Title
But the above is just text. I wanted to do this with a semantic <ol> element.
The easy way
This can...
How to Get All Custom Properties on a Page in JavaScript
8.6.2020
We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with JavaScript. To review, let’s say we’ve declared a single custom property on the HTML element:
html {
--color-accent: #00eb9b;
}
In JavaScript...
Adding CSS to a Page via HTTP Headers
4.6.2020
Only Firefox supports it, but if you return a request with a header like this:
Header add Link "<style.css;rel=stylesheet;media=all"
…that will link to that stylesheet without you having to do it in the HTML. Louis Lazaris digs into it:
[…] the only thing I can think of that could...
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...
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...
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...
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...
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”...
“The Modern Web”
22.5.2020
A couple of interesting articles making the rounds:
Tom MacWrite: Second-guessing the modern web
Rich Harris: In defense of the modern web
I like Tom’s assertion that React (which he’s using as a stand-in for JavaScript frameworks in general) has an ideal usage:
There is a sweet spot...
Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages
22.5.2020
Apple is well-known for the sleek animations on their product pages. For example, as you scroll down the page products may slide into view, MacBooks fold open and iPhones spin, all while showing off the hardware, demonstrating the software and telling interactive stories of how the products...
Collective #606
21.5.2020
WebGL guide * Animated Sparkles in React * new.css * Runme.io * Minimalist HTML
Collective #606 was written by Mary Lou and published on Codrops
User agents
19.5.2020
Jeremy beating the classic drum:
For web development, start with HTML, then CSS, then JavaScript (and don’t move on to JavaScript too quickly—really get to grips with HTML and CSS first).
And then…
That’s assuming you want to be a good well-rounded web developer. But it might be that...
Offscreen Text for Copy & Paste
15.5.2020
The relationship between HTML and CSS is special: mixing content via HTML with presentation from CSS to make an awesome presentation. Sometimes, however, you need to employ CSS tricks solely to enhance functionality. This could be one of those cases. When browsing through the Firefox DevTools...
React Single File Components Are Here
13.5.2020
Shawn Wang is talking about RedwoodJS here:
… it is the first time React components are being expressed in a single file format with explicit conventions.
Which is the RedwoodJS idea of Cells. To me, it feels like a slightly cleaner version of how Apollo wants you to do it with useQuery....
Using CSS Masks to Create Jagged Edges
12.5.2020
I was working on a project that had this neat jagged edge along the bottom of a banner image.
Looking sharp… in more ways than one.
It’s something that made me think for a second and I learned something in the process! I thought I’d write up how I approached it so you can use it on your...
Let’s Take a Deep Dive Into the CSS Contain Property
8.5.2020
Compared to the past, modern browsers have become really efficient at rendering the tangled web of HTML, CSS, and JavaScript code a typical webpage provides. It takes a mere milliseconds to render the code we give it into something people can use.
What could we, as front-end developers, do...
Working With MDX Custom Elements and Shortcodes
7.5.2020
MDX is a killer feature for things like blogs, slide decks and component documentation. It allows you to write Markdown without worrying about HTML elements, their formatting and placement while sprinkling in the magic of custom React components when necessary.
Let’s harness that magic and look...