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.
Stylesheets in the <head> have been flagged by Lighthouse as render-blocking resources and they add a one-second delay to render? Not great.
We’ve done … Read article “How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy”
The post How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
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. 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
… Read article “The Core Web Vitals hype train”
The post The Core Web Vitals hype train appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Many shoppers, including web designers and web design teams, look forward to Black Friday as the year’s top shopping event. In the past, Black Friday meant getting up early and getting in line in the dark on a wet and windy November morning. Then charging through the doors when the store opened, and trying to […]
The post Web Designers: Check Out these 8 Black Friday 2020 Deals appeared first on WebAppers.
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.
What’s special … Read article “Creating UI Components in SVG”
The post Creating UI Components in SVG appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
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”
The post Graphery SVG appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
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 post DRY-ing up styled-components appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
then/catch (ES6) and async/await (ES7). These syntaxes give us the same underlying functionality, but they affect readability and scope in different ways. In this article, we’ll see how one syntax lends itself to maintainable code, while the other puts us on the road to callback hell!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:
Direct Link to Article — Permalink… Read article “What’s Missing from CSS?”
The post What’s Missing from CSS? appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
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:
… Read article “How You Might Build a Modern Day Webring”
The post How You Might Build a Modern Day Webring appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a position: sticky into your CSS ruleset, set the directional offset (e.g. top: 0) and you’re ready to impress your teammates with minimal effort. Check out this CSS-Tricks article to see some real fancy sticky positioning use cases.
But sticky positioning can get a bit tricky, particularly when it comes to height and the dangerous … Read article “A Dynamically-Sized Sticky Sidebar with HTML and CSS”
The post A Dynamically-Sized Sticky Sidebar with HTML and CSS appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
I think this might be my most popular tweet of all time, but I’m not sure how to verify that these days. I’ll restate this neat little trick here because blogging is cool and fun.
I used to do this a lot while debugging JavaScript:
console.log("myVariable: ", myVariable);But now I do this because it’s just easier to type quickly:
console.log({ myVariable });And you don’t miss out on anything in DevTools:
Now that this is a blog post, I … Read article “console.log({ myVariable });”
The post console.log({ myVariable }); appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
Have you ever had the idea for a website or new app that involved showing news content? You don’t have to create content yourself to have the right to build an innovative news reading experience. I remember when Flipboard came out. They didn’t (and still don’t) actually produce content — they just made a fantastic experience for reading it, and did very well with that.
Where do you get that news content? mediastack. You’re going to need a great … Read article “mediastack”
The post mediastack appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.