Gosh bless the
element. Toss some content inside it and you have an accessible expand-for-more interaction with just about zero work.
See the Pen Simple details. by Chris Coyier (@chriscoyier) on CodePen.
Toss a
in there to customize what the expander text says.
See the Pen Multiple Details/Summary by Chris Coyier (@chriscoyier)...
Thursday, November 26, 2020
undefined
202
AVIF, the file format based on the AV1 video codec, is the latest addition to the next-gen image formats. Early reports and comparisons show good results compared to JPEG and WebP. However, even if browser support is good, AVIF is still on the bleeding edge in regards to encoding and decoding. Encoding, decoding, settings...
undefined
202
Some really refreshing technological comparison writing from Eric Bailey. Like, ya know, everything in life, we don’t have to hate or love everything. Baby bear thinking, I like to say. There are benefits and drawbacks. Every single bullet point here is well-considered and valid. I really like the first in each section,...
undefined
202
Around eight months ago, I started building a framework which would eventually go on to become Halfmoon. I made a post on this very website announcing the launch of the very first version. Halfmoon has been billed as a Bootstrap alternative with a built-in dark mode feature, that is especially good when it comes to building...
Wednesday, November 25, 2020
undefined
202
Here are the big categories of rendering websites:
Client: ship a <div id="root"></div> and let a JavaScript template render all of it.
Static: pre-render all the HTML.
Server: let a live server process requests and generate the HTML response.
They are not mutually exclusive.
A website could statically pre-render...
A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Google Fonts a zillion times a day, dropping its <link> tag into the <head>.
Let’s see what Lighthouse has to say...
undefined
202
Some baby bear thinking from Katie Sylor-Miller:
my excitement for Core Web Vitals is tempered with a healthy skepticism. I’m not yet convinced that Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS) are the right metrics that all sites should be measuring themselves against....
Tuesday, November 24, 2020
undefined
202
I’m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes and yet, still has elements, like text, links, and aria labels available to you. You can accomplish some of the same effects...
undefined
202
I’ve compared SVG and Canvas before. If you’re trying to decide between them, read that. I’d say the #1 difference between them is vector (SVG) versus raster (Canvas). But the #2 difference is how you work with them. SVG is declarative, as in, literal elements that express what they are through attributes and content....
undefined
202
I like working with styled-components. They allow you write CSS in your JavaScript, keeping your CSS in very close proximity to your JavaScript for a single component. As a front-end developer who loves to dissect a web page and break it down into reusable components, the idea of styled-components brings me joy. The approach...
