Articles by CSS Tricks from December 2019

Gatsby and WordPress is an interesting combo to watch. On one hand, it makes perfect sense. Gatsby can suck up data from anywhere, and with WordPress having a native REST API, it makes for a good pair...

This demo from Jrmie Patonnier is incredible. Make sure to look at it in Firefox because some Chrome bug apparently prevents the entire thing from working. The big idea is that the entire demo is one ...

Page reloads are a thing. Sometimes we refresh a page when we think its unresponsive, or believe that new content is available. Sometimes were just mad at the dang site and rage-refresh to let it know...

Say you have a design system and you're having a moment where it doesn't have what you need. You need to diverge and create something new. Yesenia Perez-Cruz categorizes these moments from essentially...

I wrote a piece for Layout, the blog of my hosting sponsor Flywheel. Stick around in this field for a while, and you'll see these libraries, languages, build processes, and heck, even entire philosoph...

There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment.Curated colors in contextHappy Hues demonstrate...

Someone emailed me:What approach to building a site should I take?Build a single responsive websiteBuild a site on a single domain, but detect mobile, and render a separate mobile siteBuild a separate...

I find all seven of these quite clever and useful. I particularly like using custom properties when you can sneak a variation into a place where you'd normally have to re-declare a whole big chunk of ...

Interesting question from Andy:Serious question. Why do we use .html instead of .htm? / @adactio @css— Andy Clarke (@Malarkey) December 12, 2019The most likely answer from the thread: DOS was a ...

With stuff like template literals in JavaScript and templating languages, like JSX, I've gotten used to wanting to write my HTML templates in one nice chunk and sprinkling in variables wherever I need...

One of the more powerful concepts I've stumbled across recently is the idea of abstract syntax trees, or ASTs. If you've ever studied alchemy, you may recall that the whole motivation for alchemists w...

GoGetSSL is a company that sells SSL certificates. You know, those things that are required to make your site use https://, not http:// which doesn't feel like an optional choice these days with brows...

Brian Rinaldi interviewed a variety of folks, asking them the same questions about JAMstack development and the landscape recently:Raymond Camden: I think we will see better competition from the bigge...

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It's not scroll-jacking — it's just a minor ...

When we're thinking about choosing colors in design, we're always thinking about accessibility. Whenever colors touch, there is contrast and, if we're talking about the color contrast of text, it need...

Should I use WordPress or React hooks?Should I use D3 or CSS?Should I use Markdown or JSON?Can I use flexbox in Gatsby?Can I use custom properties in Jekyll?Should I use HTML or the cloud?How do I add...

I recently looked at the CSS chapter of the Web Alamanc and had some thoughts. Here, Stefan Judis looks at the whole thing and rounds up the most interesting bits to him. Here are most of them:20% of ...

Is it harder or easier to build a website now than 10 years ago? Has the bar gone up or down? I don't have any data for you, but I can shell out some loosey-goosey opinions. HTMLHTML5 was the only big...

I recently did an AMA over on DEV. Just taking the opportunity to port over some answers here like a good indiewebber.If you were starting out as a front end dev in 2020, what would you say is the fir...

This seemingly simple task had me scratching my head for a few hours while I was working on my website. As it turns out, getting the current page URL in Gatsby is not as straightforward as you may thi...

This seemingly simple task had me scratching my head for a few hours while I was working on my website. As it turns out, getting the current page URL in Gatsby is not as straightforward as you may thi...

GraphQL has all kinds of awesome tooling built around it. But like everything on the web, it ultimately comes down to data shootin' across the ol' network and responses coming back. If you need to tal...

The team at HeroDevs has just released the alpha version of Scully, a static site generator for Angular. That's right, Angular didn't have an intuitive way to create JAMstack applications before, but ...

One box-shadow is cool and all, but check out Philipp Brumm's tool for building out comma-separated multiple box-shadows, which result in a much smoother and more natural look. This reminds me very mu...

(This is a sponsored post.)There are plenty of rank tracking software tools out there that allow you to track the position of your website inside the search results pages (SERP) of search engines for ...

Heres a couple of lessons Ive learned about how not to build React components. These are things I've come across over the past couple of months and thought they might be of interest to you if youre wo...

I always love seeing people get inspired by print design and trying to port it over to the web. There is a much deeper history of interesting print work to draw from, and still a ton of modern work ha...

We just ran a fancy article series here on CSS-Tricks with a bunch of different articles all answering the same question. By fancy, I mean two things:The articles had a specially-designed template jus...

I'm not sure what to call these icons from Astrit Malsija. The title is "500+ CSS Icons, Customizable, Retina Ready & API" and the URL is "css.gg" but they aren't really named anything. Anyway, t...

A clever idea from Matthew Strm:[...] design APIs dont seem like a stretch of the imagination. An API-driven approach is the natural extension of the work currently being done on design systems, inclu...

Thats right! And I can prove it, too. Lets look at some CSS first:.a { color: red;}.b { color: blue;}And now lets look at some markup:<div class="a b">Heres some text</div>The text i...

It's no big secret that Netlify invented the term JAMstack. While it's possible to embrace the JAMstack without using Netlify, it's notable that Netlify is at the very heart of the whole "JAMstack lan...

Container queries dont exist today but a lot of web developers have been arguing in their favor lately. At first, the idea sounds relatively simple: whereas media queries allow us to make style change...

Anil Dash:If Instagram users could post links willy-nilly, they might even be able to connect directly to their users, getting their email addresses or finding other ways to communicate with them. Lin...

There is very little guidance on how to organize front-end applications in the world of React. (Just move files around until it feels right, lol). The truth is that we can do better. Lets take a look ...

I recently accepted a teaching position at a local college here in SoCal where I'll be spouting off whatever I know (or more likely don't know!) about HTML and CSS. It's suffice to say I was all ears ...

November 30th, the official "Blue Beanie Day," has come and gone. I'm not sure I ever grokked the exact spirit of it, but I've written about what it means to me. Last year: Web standards, as an overal...

I think Adam's first prediction is his boldest, even beyond his Hail Mary prediction. CSS grid is awesome and gap is perhaps one of its best qualities, but gap superseding spacing things out in other ...

Interesting idea for a "chat room" from Postlight:Create a Yap chat room.Invite others to join and talk.Share a URL of just about anything.Everyone gathering can comment on what youve shared.If you th...

Most of the time you dont really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they got up to get a drink of water, or more like...

A standard copy-and-paste YouTube embed lands on your page as an <iframe> which loads a big ol' pile of other stuff to play that video. But the UX of it is still essentially an image and a pla...

In this week's news: Firefox gets strict, Opera goes to the dark side, and Chrome plans to let web apps run in the background.Let's get into the news.Firefox for Android will block tracking contentMoz...

Did you know there is a well-supported browser API that allows you to interface with interesting and even custom-built hardware using a mature protocol that predates the web? Let me introduce you to M...

Were sliding into the roaring twenties of the twenty-first century (cue Jazz music 🎷). Its important that you and I, as responsible people, follow the tradition of looking back on the past yea...

I don't see image sprites used that much anymore, but it's still a good technique for reducing downloaded decorative image assets when you have multiple on a page. The big idea is combining all the gr...

Seemingly out of the blue, the Gulp processing I had set up for this site started to have a race condition. I'd run my watch command, change some CSS, and the processing would sometimes leave behind s...

We just covered The Current State of Styling Selects in 2019, but we didn't get nearly as far and fancy as Julie Grundy gets here. There is a decent chunk of JavaScript that powers it, so I'm still ve...

(This is a sponsored post.)Have you ever looked at a site and knew exactly what CMS powers it? You might see a distinctive design aesthetic that gives it away. Or maybe it's something even less obviou...

Its all too common to see the incorrect HTML used for quotes in markup. In this article, lets dig into all this, looking at different situations and different HTML tags to handle those situations.Ther...

Dylan Paulus:Facebook actually hides 'dummy' DOM nodes between the 'Sponsored' text. These values are entirely random characters, with a random number of DOM nodes between them. Invisible characters. ...

Brad has a long history in music outside of being a web designer, and draws some interesting parallels. One is that he had reached for more complex music in an effort to become a better musician ̵...

For those who may not come from a design background, selecting a color palette is often based on personal preferences. Choosing colors might be done with an online color tool, sampling from an image, ...

Cassie Evans has a great intro to motion paths. That is, being able to animate an element along a path. Not just up/down/left/right, but whatever curvy/wiggly/weird path you want. It's an interesting ...

Lynn Fisher walks us step-by-step through the redesign process of her latest outstanding personal website. In this design, increasing the width of the browser window will cause the illustrations on th...

As is the rule in WebGL, anything that seems like it should be simple is actually quite complicated. Drawing lines, debugging shaders, text rendering they are all damn hard to do well in WebGL.Isnt th...

There is a lot to like from Mike Riethmuller here:The title. When you're building a website from JavaScript-powered components anyway, that is a moment to talk about how to do styling, because it open...

In this week's roundup: DuckDuckGo gets smarter encryption, a fight over the sale of dot org domains, and a new browser engine is in the works.Let's get into the news!DuckDuckGo upgrades and open-sour...

Heres a fresh update to my favorite design tool that is thoroughly exciting: Auto layout! That means we can make frames that resize based on the size of the content within it. That's particularly usef...

When you add anything with user-generated content or dynamic data to a static site, the complexity of the build process can become comparable to launching a monolithic CMS. How can we add rich content...

A great release from Firefox this week! See the whole roundup post from Chris Mills. I'm personally stoked to see clip-path: path(); go live, which we've been tracking as it's so clearly useful. We al...

I recently attended the ARTIFACT conference in Austin, TX, and was inspired by a few talks about accessibility through the lens of site performance. It became clear to me that there is this tendency ...

There are loads of microsites and developer tools for looking at color accessibility, including tools built right into browser DevTools. They often show you if a color passes AA or AAA WCAG guidelines...

Ive spent the last hour hunched over the new Klim Type foundry website with my arms outstretched as if it was a fire in a very dark cave. Klim Type makes and sells wondrous fonts like Tiempos, and Na...

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg">). And you can embed CSS within an SVG with a <style> el...

Well, hey, look at that — it's time for this year's State of JavaScript survey!You have taken this survey last year. Or in 2017. Or in 2016. It's been going on for a little while now and it alwa...

(This is a sponsored post.)If you could get one gift from your boss this holiday season, what would you want it to be? You know, other than the usual mouse pad, picture frame or, my favorite, the ol' ...

The other day, Cassie Evans tweeted a really neat trick that Ive never seen before: using SVG to mask one GIF on top of another. The effect is quite lovely, especially if you happen to grab a colorful...

Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to rem...

A couple of months ago, we invited Marc Anton Dahmen to show off his database-less content management system (CMS) Automad. His post is an interesting inside look at templating engines, including how ...