Social Image Generator + Jetpack
I feel like my quest to make sure this site had pretty sweet (and automatically-generated) social media images (e.g. Open Graph) came to a close once I found Social Image Generator.
The trajectory there was that I ended up talking about it far too much on ShopTalk, to the point it became a common ..
“Just in Time” CSS
I believe acss.io is the first usage of “Atomic CSS” where the point of it is to be a compiler. You write CSS like this:
text
And it will generate CSS like:
.C(#333) {
color: #333;
}
.P(20px) {
padding: 20px;
}
(Or something like that.)
The point is ..
Fun Times Styling Checkbox States
We might leave a text input unstyled. We might leave a link unstyled. Even a button. But checkboxes… we don’t leave them alone. That’s why styling checkboxes never gets old.
Although designing checkboxes is not that complicated, we also don’t have to settle for simple background color changes, or a..
EyeDropper API Dropped
I had no idea this was coming but it’s pretty neat! Chrome has shipped the EyeDropper API in v95 (Canary, as I write).
🎨 Loving the new `EyeDropper` Web API:
“`js
await new EyeDropper().open();
// Returns the picked color, e.g.,
// { "sRGBHex": "#ddd9e0" }
“`
Try it in Chrome 95. pic.twitter.com..
Frameworks Helping Image Usage
I recently blogged about how images are hard and it ended up being a big ol’ checklist of things that you could/should think about and implement when placing images on websites.
I think it’s encouraging to see frameworks — these beloved tools that we leverage to help us build websites — offering a..
Improve Largest Contentful Paint (LCP) on Your Website With Ease
(This is a sponsored post.)
Optimizing the user experience you offer on your website is essential for the success of any online business. Google does use different user experience-related metrics to rank web pages for SEO and has continued to provide multiple tools to measure and improve web perfor..
Mars Theme: A Deep Look at Frontity’s Headless WordPress Theme
This post was in progress before Automattic acquired Frontity and its entire team. According to Frontity’s founders, the framework will be transitioned into a community-led project and leave the project in “a stable, bug-free position” with documentation and features. Like other open-source communit..
Don’t attach tooltips to document.body
Here’s Atif Afzal on using a
that is permanently on the page where tooltips are added/removed and how they perform vastly better than plopping those same tooltips right into the . It’s not really discussed, but the reason you put them that high-up in the DOM is so you can absolutely posi..
The Story Behind TryShape, a Showcase for the CSS clip-path property
I love shapes, especially colorful ones! Shapes on websites are in the same category of helpfulness as background colors, images, banners, section separators, artwork, and many more: they can help us understand context and inform our actions through affordances.
A few months back, I built an applic..
Can we have custom media queries, please?
Stefan Judis notes that there is a spec for custom media queries, but seemingly no momentum on it at the moment. That lack of movement is unfortunate, as it’s almost guaranteed front-end developers all over would start using it as soon as it’s ready. I know I would, as I liberally use custom propert..
