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!?!?
Enjoy!
KBall from ZenDev
CSS & SCSS
The Ultimate Guide to Learning CSS
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.
Pattern Library First: An Approach For Managing CSS
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.
CSS Radio Button Styles From CodePen
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.
CSS tricks to revolutionise your web layouts
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.
The CSS Paint API
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).
JavaScript
The Vue Handbook: a thorough introduction to Vue.js
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.
Web Components in 2018
Component-oriented development is more popular than ever, but every JavaScript framework has its own flavor of components… where is the common ground? The answer is the Web Components standard. While there aren’t that many frameworks that are directly targeting Web Components (polymer being a notable exception) increasingly I’m seeing “compile to web component” tools as a way to make framework-specific components shareable into other environments. This is a great article to bring yourself up to date with the current state of web components.
Understanding The Underlying Processes of JavaScript’s Closures And Scope Chain
A good tutorial on scopes in JavaScript, and a brief introduction to closures. I wish they’d gone a little deeper on closures with more examples, because it is such a key and valuable feature, but this is good enough on scopes that I think it’s worth a read through just for that piece. For a more in-depth dive into closures, check out this article on FreeCodeCamp.
React is just JavaScript
Part of me hates the “React is just JavaScript” mantra that is going around (this is one of many similar articles), because they tend to neglect the value and realities of tooling. Sure, React is just JavaScript - so is Vue, and Angular.js… while Angular and Dojo are “just TypeScript”. This framing ignores both the real complexity around tooling like build systems and JSX and the value that is why folks adopt that tooling anyway. All that said, this article does do a good job of demystifying React and how it works, and I think that is a very good thing.
An adventure in sparse arrays
JavaScript arrays have a nifty feature - they can be sparse, meaning you can create an array with a large length, but until you put values into each index of the array it doesn’t take up all that space. new Array(100) may have length 100 but it isn’t taking up 100 slots of memory until you put data into it. That said, because you know, JavaScript, sparse arrays have some quirky behavior. This article does a great job of walking through how they behave and how you can interact with them.
Other Awesomeness
Google's New Speed Update Works On Gradual Scale; Small Improvements Matter
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!
Performance Auditing: A Firefox Developer Tools Deep Dive
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.
15 HTML element methods you’ve potentially never heard of
This is a really nice walk through of a set of DOM api methods. Often obscured when working through frameworks that do all the DOM manipulation for you, these can be key when have a simple website and you want to just write some super lightweight native javascript to add a little interactivity.
Why GraphQL: Advantages, Disadvantages & Alternatives
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.
Vim Ported to WASM
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.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)