React Without Build Tools
Jim Nielsen: I think you’ll find it quite refreshing to use React A) with a JSX-like syntax, and B) without any kind of build tooling. Refreshing indeed:
Chris Coyier
on
Popular
this
month
Sponsored by
Mailchimp
Front-End Dissatisfaction (and Backing Off)
To the brain, reading computer code is not the same as reading language
Mistakes I’ve Made as an Engineering Manager
WordPress 5.7: Big ol’ jQuery Update
The Differences in Web Hosting (Go with the Happy Path)
How to Create a Shrinking Header on Scroll Without JavaScript
Exploring the Complexities of Width and Height in CSS
Dynamically Switching From One HTML Element to Another in Vue
Is CSS float deprecated?
A DRY Approach to Color Themes in CSS
#203: A First Look at Cloudflare Pages
Cloudflare Pages is Jamstack hosting, meaning it’s a static file host that run your builds and lets you do dynamic things with JavaScript and services. You might normally think of Cloudflare as something you put in front of your site’s …
Chris Coyier
on
How to Animate the Details Element
Here’s a nice simple demo from Moritz Gießmann on animating the triangle of a <details> element, which is the affordance that tells people this thing can be opened. Animating it, then is another kind of affordance that tells people …
Chris Coyier
on
The Best Font Loading Strategies and How to Execute Them
Zach Leatherman wrote up a comprehensive list of font loading strategies that have been widely shared in the web development field. I took a look at this list before, but got so scared (and confused), that I decided not to …
Zell Liew
on
The “Gray Dead Zone” of Gradients
Erik D. Kennedy notes an interesting phenomenon of color gradients. If you have a gradient between two colors where the line between them in the color space goes through the zero-saturation middle, you get this “gray dead zone” in …
Chris Coyier
on
(Updated on )
How to Map Mouse Position in CSS
Let’s look at how to get the user’s mouse position and map it into CSS custom properties: --positionX and --positionY.
We could do this in JavaScript. If we did, we could do things like make make an element …
Amit Sheen
on
CSS Border Font
Every letter in this “font” by Davor Suljic is a single div and drawn only with border. That means employing some trickery like border-radius with exotic syntax like border-radius: 100% 100% 0 0 / 37.5% 37.5% 0 0; which …
Shared by
Chris Coyier
on
Next.js on Netlify
If you want to put Next.js on Netlify, here’s a 5 minute tutorial¹. One of the many strengths of Next.js is that it can do server-side rendering (SSR) with a Node server behind it. But Netlify does …
Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw
In this week’s roundup, we highlight a proposal for a new <popup> element, check the use of prefers-reduced-motion on award-winning sites, learn how to opt into cross-origin isolation, see how WhiteHouse.gov approaches accessibility, and warn the dangers of 100vh.…
Šime Vidas
on
The Things I Add to Tailwind CSS Right Out of the Box
In every project where I use Tailwind CSS, I end up adding something to it. Some of these things I add in every single project. I’ll share these with you, but I’m also curious what y’all are adding to …
Greg Wolanski
on
(Updated on )
An Interactive Guide to CSS Transitions
A wonderful post by Josh that both introduces CSS transitions and covers the nuances for using them effectively. I like the advice about transitioning the position of an element, leaving the original space it occupied alone so it doesn’t result …
Shared by
Chris Coyier
on
Our Learning Partner
Frontend Masters
