Skip to main content
Fresh Article

CSS-Tricks Chronicle XXXVII

Chronicle posts are opportunities for me to round-up things that I haven't gotten a chance to post about yet, rounded up together. It's stuff like podcasts I've had the good fortune of being on, conferences I've been at or are going to be at, happenings at ShopTalk and CodePen, and more.… Read article

Article

Making an Audio Waveform Visualizer with Vanilla JavaScript

As a UI designer, I’m constantly reminded of the value of knowing how to code. I pride myself on thinking of the developers on my team while designing user interfaces. But sometimes, I step on a technical landmine.

A few years ago, as the design director of wsj.com, I was helping to re-design the Wall Street Journal’s podcast directory. One of the designers on the project was working on the podcast player, and I came upon Megaphone’s embedded player.… Read article

Article

When to Use SVG vs. When to Use Canvas

SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.

  • A little flat-color icon? That's clearly SVG territory.
  • An interactive console-like game? That's clearly canvas territory.

I know we didn't cover why yet, but I hope that will become clear as we dig into it.… Read article

Sponsored Link

scrapestack: An API for Scraping Sites

Not every site has an API to access data from it. Most don't, in fact. If you need to pull that data, one approach is to "scrape" it. That is, load the page in web browser (that you automate), find what you are looking for in the DOM, and take it.

You can do this yourself if you want to deal with the cost, maintenance, and technical debt. For example, this is one of the big use-cases for "headless" browsers, … Read article

Article

A Super Weird CSS Bug That Affects Text Selection

You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug.

If you:

  1. Leave that selector empty
  2. Link it from an external stylesheet (rather than <style></style> block)

Selecting text will have no style at all. 😳😬😕… Read article

Article

Pac-Man… in CSS!

You all know famous Pac-Man video game, right? The game is fun and building an animated Pac-Man character in HTML and CSS is just as fun! I’ll show you how to create one while leveraging the powers of the clip-path property.… Read article

Link

Disabled buttons suck

Article

Two-Value Display Syntax (and Sometimes Three)

You know the single-value syntax: .thing { display: block; }. The value "block" being a single value. There are lots of single values for display. For example, inline-flex, which is like flex in that it becomse a flex container, but behaves like an inline-level element rather than a block-level element. Somewhat intuitive, but much better served by a two-value system that can apply that same concept more broadly and just as intuitively.… Read article

Link

Diana Smith’s Pure CSS Artwork “Lace”

Article

Working with Fusebox and React

If you are searching for an alternative bundler to webpack, you might want to take a look at FuseBox. It builds on what webpack offers — code-splitting, hot module reloading, dynamic imports, etc. — but code-splitting in FuseBox requires zero configuration by default (although webpack will offer the same as of version 4.0).

Instead, FuseBox is built for simplicity (in the form of less complicated configuration) and performance (by including aggressive caching methods). Plus, it can be extended … Read article

Article

Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS Subgrid

In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox 70, and a new study confirms that users prefer to tap into content rather than scroll through it.

Let's get into the news.… Read article

Keep browsing in the archives

Monthly Mixup

Article

The Secret Weapon to Learning CSS

Article

Planning a Tech Event in 6 Months

Article

Slow Websites

Snippet

CSS Grid Starter Layouts

Monthly Sponsor
Thanks, monday.com!
icon-link icon-logo-star icon-search icon-star