font-synthesis
The font-systhesis property in CSS gives the browser instructions for how to handle font bolded and italicized character when the specified font-family doesn’t include them.… Read article “font-synthesis”
Popular
this
month
Sponsored by
Frontend Masters
Warp SVG Online
Chris Coyier
The warping is certainly the cool part here. Some fancy math literally transforms the path data to do the warping. But the UX detail work here is just as nice. Scrolling the page zooms in and out via a transform: scale() on the SVG wrapper (clever!). Likewise, holding the spacebar lets you pan around which is as simple as transform: translate() on another wrapper (smart!). To warp your own SVG files, you just drag-and-drop them on the page (easy!).
Chapter 1: Birth
Tim Berners-Lee is fascinated with information. It has been his life’s work. For over four decades, he has sought to understand how it is mapped and stored and transmitted. How it passes from person to person. How the seeds of information become the roots of dramatic change. It is so fundamental to the work that he has done that when he wrote the proposal for what would eventually become the World Wide Web, he called it “Information Management, a Proposal.”… Read article “Chapter 1: Birth”
Computed Values: More Than Meets the Eye
Browser DevTools are indispensable for us front end developers. In this article, we’ll take a look at the Computed tab, a small corner of the DevTools panel that shows us big things, like how relative CSS values are resolved. We’ll also see how inheritance fits into the browser’s style computation process.… Read article “Computed Values: More Than Meets the Eye”
The Cicada Principle, revisited with CSS variables
Chris Coyier
Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks:
… Read article “The Cicada Principle, revisited with CSS variables”The main idea is simple: You write your main rule using CSS variables, and then use
:nth-of-*()rules to set these variables to something different every N items. If you use enough variables, and choose your Ns for them to be prime numbers, you reach a good appearance of pseudo-randomness with relatively small Ns.
Making Sense of react-spring
Animation is one of the trickier things to get right with React. In this post, I’ll try to provide the introduction to react-spring I wish I had when I first started out, then dive into some interesting use cases. While react-spring isn’t the only animation library for React, it’s one of the more popular (and better) ones.… Read article “Making Sense of react-spring”
Jetpack CRM
About a year ago, Automattic bought up Zero BS CRM. The thinking at the time was that it could be rebranded into the Jetpack suite and, well, that happened.
CRM meaning “Customer Relationship Management” if you’re like me and this is a little outside your sphere of everyday software. CRMs are big business though. When I lived in Silicon Valley, I would regularly drive by a very large building bearing the name of a CRM company that you’ve … Read article “Jetpack CRM”
Friction Logs
Chris Coyier
I first heard the term “Friction Log” from Suz Hinton back in April on ShopTalk. The idea makes an extreme amount of sense: Use a thing, and write down moments where you felt friction.
Did some installation step bug out? Did you see something that the docs didn’t mention? Did you have to stop and wonder if some particular API existed or how it worked? Were you confused about why a certain thing was called what it was? Friction! … Read article “Friction Logs”
The Making of: Netlify’s Million Devs SVG Animation Site
The following article captures the process of building the Million Developers microsite for Netlify. This project was built by a few folks and we’ve captured some parts of the process of building it here- focusing mainly on the animation aspects, in case any are helpful to others building similar experiences.
Building a Vue App out of an SVGThe beauty of SVG is you can think of it, and the coordinate system, … Read article “The Making of: Netlify’s Million Devs SVG Animation Site”
A Lightweight Masonry Solution
Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood how this new proposed CSS feature works.
Support is obviously limited to Firefox for now (and, even there, only behind a flag), but it still offered … Read article “A Lightweight Masonry Solution”
10 modern layouts in 1 line of CSS
Una doing an amazing job of showing just how (dare I say it?) easy CSS layout has gotten. There is plenty to learn, but what you learn makes sense, and once you have, it’s quite empowering. … Read article “10 modern layouts in 1 line of CSS”
