How to Animate on the Web With Greensock
13.1.2020
There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: using GreenSock.
(They don’t pay me or anything, I just really enjoy...
Why do we have different programming languages?
13.1.2020
"But why do I have to learn Python?" She wailed, "I like Scratch!"
"I know," I said, "But there are different programming languages for different sorts of tasks."
"That's stupid" she said
I can empathize with the little girl in Terence Eden's story. In high school, I got super into Turbo Pascal....
Collective #580
13.1.2020
React-three-fiber v4 * /uses * Goodbye, Clean Code * Aria Tablist * Theme UI Gallery
Collective #580 was written by Pedro Botelho and published on Codrops
Re-creating the ‘His Dark Materials’ Logo in CSS
11.1.2020
The text logo has a slash cut through the text. You set two copies on top of one another, cropping both of them with the clip-path property.
What's interesting to me is how many cool design effects require multiple copies of an element to do something cool. To get the extra copy, at least with...
Water.css
11.1.2020
It's notable that Water.css was the #1 clicked thing from Louis Lazaris' Web Tools Weekly in 2019. It's from a 13-year old developer named Felix!
It's just a little bit of CSS you apply to class-free semantic HTML to give it nice basic responsive styles — the perfect kind of thing for a...
CSS-Only Carousel
10.1.2020
It's kind of amazing how far HTML and CSS will take you when building a carousel/slideshow.
Setting some boxes in a horizontal row with flexbox is easy.
Showing only one box at a time with overflow and making it swipable with -webkit-overflow-scrolling is easy.
You can make the "slides" line...
Things you can do with a browser in 2020
10.1.2020
I edit a good amount of technical articles about the web, and there is a tendency for authors to be super broad in their opening sentence, like "What we're able to do on the web has expanded greatly over the years."
I tend to remove stuff like that because it usually doesn't serve the article well...
Is it better to use ems/rems than px for font-size?
10.1.2020
The answer used to be absolutely yes because, if you used px units, you prevented the text from being resized by the user at all.
But browser zoom is the default method for making everything bigger (including text) these days and it works great even if you use px.
But... Kathleen McMahon really...
Our Learning Partner: Frontend Masters
10.1.2020
I'd like to think there is a lot to learn on CSS-Tricks. But we don't really offer much by the way of courses. You're probably reading this because you just generally read this site, and you land on CSS-Tricks otherwise mostly because you are looking for an answer to some front-end...
Fantastic Flight API with aviationstack (Sponsored)
9.1.2020
I didn’t fly until I was 25 years of age — I was hopeless in knowing I had to be there early, the process of security, and the whole gate structure. Now that I’ve flown dozens of times for Mozilla, I feel much more comfortable with the process of flying, but feel less comfortable...
Understanding Async Await
9.1.2020
When writing code for the web, eventually you'll need to do some process that might take a few moments to complete. JavaScript can't really multitask, so we'll need a way to handle those long-running processes.
Async/Await is a way to handle this type of time-based sequencing. It’s especially great...
let vs. const
9.1.2020
There are multiple ways to declare variables in JavaScript. We had var, and while that still works like it always has, it is generally said that let and const are replacements to the point we rarely (if ever) need var anymore. This doodle explanation does a pretty good job, if you need...