Friday Frontend: CSS Animations on Demand Edition
Sorry no video this week - between client work, sleep problems, and childcare calling in sick I’m at a loss for time. That said, I got really excited by one of the links this week. Animista is a GUI for exploring and creating CSS-based animations. You poke around, see the animations, tweak the parameters, and then export CSS animation code ready to integrate into your project. How cool is that!?!?
Happy Friday! Enjoy!
KBall from ZenDev
CSS & SCSS
This has definitely tripped me up before. Specificity of pseudoclasses follows some simple rules, but unless you know those rules you can easily end up expecting one thing and running into something completely different. This is a short and sweet article that will give you clarity.
Thorough walkthrough of CSS selector options, including relationship selectors, various types of wildcard selectors (starts with, ends with, etc) as well as advanced pseudoselectors. Definitely worth a read through and some experimenting.
This is less in the ‘ok, this teaches me how to do something’ category and more in the ‘OMG how in the world is that possible?’ category. Security researchers used css blend modes and timing calculations to reconstruct content in iframes and bypass security concerns. Sounds like it’s been mostly fixed, but WOW I never would have thought to use CSS for that. :P
This is wicked cool - an interactive GUI that lets you play with and tweak animations, seeing them as you work with them, and then click to get the CSS code that you can then apply to your project. Sweet!
One of the first examples I’ve seen yet taking advantage of CSS Houdini to enable polyfilling of upcoming CSS features. CSS animations of gradients is only supported in IE and Edge (imagine that!), but Houdini lets you add them to webkit based browsers like Chrome and Safari. The catch? Houdini is still behind a feature flag in those browsers, not turned on by default, and not supported at all in Firefox yet. But soon, soon...
Nice big picture overview - less something you’re going to read to learn how to do something in React, and more something you’ll read to learn about how to learn about React. :) Focus is on big picture principles, with an additional learning list of concepts to dive into.
Simple but useful walkthrough of how to extract a component out of a project into it’s own package and publish it on NPM. Uses React as an example, but this same process would work for Vue, Angular, or really any componentized framework.
A simple, easy to read walk through of the new async/await syntax. I think this article did a better job of showing me how async/await is essentially syntactic sugar on top of Promises than any other articles I’ve read on this syntax. If you feel like you understand promises, but haven’t really dived into async/await, this is the article for you!
The big tech news that broke this week was that Microsoft is acquiring github. There was some immediate backlash, with competitor GitLab capitalizing on it by starting a #movingtogitlab hashtag on twitter and seeing massively increased imports after the announcement. That said, I’ve been very impressed with Microsoft’s dedication to open source and developer experience (hello VS Code) over the last few years, and they certainly haven’t broken recent acquisitions like LinkedIn, so I don’t think there’s any major reason for concern.
This is something I’ve played around with in the past but never highlighted an article on before - responsive images that actually change what features are visible based on the size of the container they are placed in! Because SVGs are AWESOME and let you write media-queries inside of them! (P.S. want a primer on manipulating SVGs as code? Check out my course on Skillshare!)
There’s a little bit of a ‘get off my lawn’ feel to this article, but I think there’s some important ideas in there too. It is way too easy to get drawn into the latest and greatest thing, and to forget that often the best solution is the simplest. Related to this concept, if you haven’t read Tim Berners-Lee’s Principles of Design, essentially guiding principles for the fundamental design of the web, you definitely should take a look. Particularly worthy of reading is the justification behind the principle of least power.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!