Friday Frontend: Ultimate Guide to Learning CSS Edition
I spent the last 3-4 weeks putting together a massive compendium of resources for learning CSS, and it got me re-excited about CSS as a language. CSS is an incredibly rich and powerful language that gives us detailed access to the most powerful rendering engine in the world. How amazing is that!?!?
KBall from ZenDev
CSS & SCSS
CSS is deceptive - it can seem simple, but there is so much there (over 400 unique properties!), and it’s hard to figure out what to learn next. That’s why I put a ton of time into putting together this guide, with over 100 curated resources categorized and ordered to make it easy to learn.
Excellent introduction to using a pattern library as the underlying building block of your CSS. I happen to know that the ZURB Foundation open source CSS framework grew out of a similar approach at ZURB.
A beautiful collection of different ways folks have styles radio buttons. Super slick animations, toggles, and more. Useful both as an inspiration around the possibilities but also as a study guide because every example is in a codepen so you can see exactly how it was done.
Also a bit on the inspiration side, exploring some modern CSS tricks like filters, clipping, and more to really set your websites apart from the norm.
Now that there’s been official support for the Paint API (Part of CSS Houdini) in Chrome for a while we’re starting to see more and more of these articles about how to use it. This is great! Hopefully we’ll see enough interest that the other browsers pick up the pace and get this working, because this is one of the most exciting developments in CSS today (even compared with other great features like Grid and custom properties, Houdini takes the cake).
This is one of those posts I kind of wish I had written. :) A great step by step guide to Vue.js taking you from “what is this?” to full applications. Looooong post, but also available as downloadable PDF or mobi, and definitely a good step by step for those looking to get into Vue for the first time.
Google is placing more and more importance on website speed when it comes to search results, with a new update coming this month! Apparently unlike previous binary “slow/fast” ranking factors, the new update factors in incremental improvements. I know I took this as an impetus to go through and do some incremental optimizations!
First place to improve performance is with some auditing tools, and while Chrome devtools (and Lighthouse) still have a huge advantage in mindshare, Firefox Developer Tools has been making great strides. This is a great place to start learning about them, focused primarily on performance.
All the whys and wherefores of graphql, it’s advantages and disadvantages. Good stuff. Fundamentally, GraphQL is about how the front-end loads and manages data, and as we’re moving more and more complexity into the front-end we need more options in that domain. For another take on the power of GraphQL, check out the first segment of this JSParty episode where I interviewed Brian Douglas from Github about GraphQL.
Ok, I dunno if this is going to be as cool for anyone who isn’t addicted to VIM like I am, but CHECK THIS OUT! They ported VIM to WebAssembly, so now you can use VIM in the browser… and unlike most vim “ports” or keybindings, it supports everything, including macros and all sorts of goodness. It’s a little bit slower than running in my terminal, but woah… imagine plugging this into a web-based file system like e.g. google docs or dropbox, and the possibilities are excited.
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!