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

Specificity in :not(), :has(), and :matches()

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.


Level up your CSS selector skills

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.


CSS Is So Overpowered It Can Deanonymize Facebook Users

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


Animista: CSS Animations on Demand

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!


The State of Changing Gradients with CSS Transitions and Animations

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...


JavaScript

The most important lessons I’ve learned after a year of working with React

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.


Extracting a React JS component and publishing it on NPM

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.


Good Things Come to Those Who Await

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!


11 Javascript Utility Libraries You Should Know In 2018

I already am using some of these (hi there lodash & moment), but gosh going through this got me EXCITED about some new utilities! LIke Ramda? JavaScript functionality with built-in immutability & function currying? I’m going to find an excuse to bring that into my projects ASAP!


Best resources to learn Vue.js in 2018

Nice roundup of the learning resources out there for learning Vue.js. Vue has become my go-to framework for JavaScript-intensive projects, and I highly recommend it for anyone not already deeply invested in a framework. It has all the power of React and Angular, but is far easier to learn, especially for folks coming from more of a design or HTML/CSS background.


Other Awesomeness

Microsoft + GitHub = Empowering Developers

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.


Building a responsive image

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!)


ML in JS... well... yes?

The latest episode in the JSParty podcast (complete with transcript for those who don’t like listening). Bias alert: I was a panelist for this episode, but regardless I think this was an awesome conversation that you might well enjoy. We talked about machine learning in JavaScript, what some of the particular applications you might want to use it for (as distinct from ML in general), but also strayed into a range of other topics including the definition of art (is it art if an ML model makes it?) and the ethics of software development.


The Cult of the Complex

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.


Happy Friday!

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!