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, so I’ll quote those as a taste here:… Read article “Tailwind versus BEM”
Sponsored by
Mailchimp
The text-combine-upright CSS property combines characters into the space of one character. The spec calls this “horizontal-in-vertical” composition which is a nice way of describing the use case: situations where you may need some characters in a vertical writing mode to display horizontally on the same line.
span {
text-combine-upright: all;
}
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 dashboards and tools. All of this still applies to the framework.
However, today I would like to talk about an area of the … Read article “Considerations for Making a CSS Framework”
Here are the big categories of rendering websites:
<div id="root"</div and let a JavaScript template render all of it.They are not mutually exclusive.
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 about this workflow.… Read article “How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy”
Some baby bear thinking from Katie Sylor-Miller:
… Read article “The Core Web Vitals hype train”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. I worry that the outsized emphasis placed on Core Web Vitals by including them in SEO scoring will result in developers focusing solely on those three numbers without truly understanding what they
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 in CSS, but it’s a little more particular to get positioning just right, especially across viewports and for responsive development.… Read article “Creating UI Components in SVG”
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. Canvas is imperative, as in, you script instructions for it to follow.
Canvas is a JavaScript API, so it may jive well with JavaScript developers or … Read article “Graphery SVG”
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 is clean and modular and I don’t have to go digging in some gigantic CSS file to see if a class I need already exists. … Read article “DRY-ing up styled-components”
The survey results from the State of CSS aren’t out yet, but they made this landing page that randomly shows you what one person wrote to answer that question. Just clicking the reload button a bunch, I get the sense that the top answers are:
I’m sure different people picture different things when they think about webrings, so let me clarify what I picture. I see an element on a website that:
But then another major thing:
Customer Journey Smarts helps visualize purchasing paths a customer may take.
