CSS-Tricks Chronicle XXXVII
12.11.2019
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.
My talk...
Awesome Demos Roundup #10
12.11.2019
Get inspired with this collection of fresh, creative coding experiments from around the web.
Awesome Demos Roundup #10 was written by Mary Lou and published on Codrops
Making an Audio Waveform Visualizer with Vanilla JavaScript
12.11.2019
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...
When to Use SVG vs. When to Use Canvas
12.11.2019
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...
scrapestack: An API for Scraping Sites
12.11.2019
(This is a sponsored post.)
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...
A Super Weird CSS Bug That Affects Text Selection
12.11.2019
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:
Leave that selector empty
Link it from an external stylesheet (rather than <style> block)
Selecting text will have no style at all....
Pac-Man… in CSS!
11.11.2019
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.
See the Pen
Animated Pac-Man by Maks Akymenko (@maximakymenko)
...
Disabled buttons suck
11.11.2019
In this oldie but goodie, Hampus Sethfors digs into why disabled buttons are troubling for usability reasons and he details one example where this was pretty annoying for him. The same has happened to me recently where I clicked a button that looked like a secondary button and... nothing happened....
Collective #564
11.11.2019
GSAP 3 * React Conf 2019 * :is() selector * Paged.js * Day as a Dev * Scroll Snap in CSS
Collective #564 was written by Pedro Botelho and published on Codrops
Hello Fenix!
11.11.2019
Over seven years ago I made the massive career leap to Mozilla. Two years ago I realized a dream of joining the Firefox DevTools team — it’s been a rewarding adventure helping to improve the Firefox DevTools Debugger and other super helpful tools. I’m frightened, excited,...
WDRL — Edition 276: Back again and here’s how we can be a better self and do a good job
11.11.2019
Hey,
Sometimes a break is needed but you don’t notice. With the last WDRL edition on SmashingMag in September, this was apparently the case for me with this project. First, I wanted to pause for two weeks but it turned easily into over a month now. It brought back my motivation to write...
Two-Value Display Syntax (and Sometimes Three)
8.11.2019
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...