We’re baaaaaack! Hope you were able to take a break over the holidays, and I’m excited to be kicking off another year of the Friday Frontend with you.
Since we’re starting a new year, I want to make sure I invite you up front: Let me know what you want to read/learn about! I try to pick articles to highlight that I think you will love, and the more I know about what you like the better I’ll be able to do that. So if you’ve got something you wish you could find better resources about, or that you really like hearing about, or what have you just scroll down and let me know in the comments so I can keep a look out.
Without further ado, here’s your first Friday Frontend of 2019, with all sorts of great articles and resources from the last 3 weeks. Enjoy!
Best,
KBall from ZenDev
CSS & SCSS
How To Learn CSS
An excellent and thorough walk through a number of the fundamental principles of CSS, each with links out to more detailed places to learn. As the author states: Learning CSS is not about memorizing properties, but rather understanding the way the language works. You can always look up property details, but this will give you a good fundamental understanding of how things are working.
Sass Techniques from the Trenches
There are loads of articles out there about how to do CSS architectural things like BEM, and articles about the features of Sass, but I think this article does the best job I’ve seen yet of linking between the two and showing how the features of Sass help you right good clean CSS code.
Simple CSS Animation Tutorial
I kinda wish this had gone further. The first bit is great, gives a great introduction, and then right at the end they tease some more advanced techniques and ideas but don’t go into detail. That said, the diagrams for understanding how different animation properties work are top quality.
A Quick CSS Audit and General Notes About Design Systems
For all that it says ‘quick’, this article feels long, particularly if you try to read through all the screenshots from the CSS auditing. That said, it also gives a good sense of the types of things you might want to look for when auditing your CSS, as well as letting you know about a pretty cool tool for doing it.
Common CSS Issues For Front-End Projects
A set of common situations we have to handle as front-end developers, along with little gotchas that might come up and bite you along the way. Nothing worldshaking, but some nice reminders in there, with examples and notes on how to fix.
JavaScript
9 Tricks for Kickass JavaScript Developers in 2019
There’s some really good stuff in here to improve your JavaScript skills, definitely worth a readthrough. That said, I’d be a bit cautious on recommendation number 6 - while I *love* the terseness enabled by optional chaining (I’ve used it in ruby before) be cautious that this is still a stage-1 proposal, not an official part of the JavaScript language, and subject to change before it is finalized.
The React Handbook
Very long, thorough resource intended to be the ‘fast path’ to learning React. It definitely gives you pretty much everything you need to know to get productive in React all in one place. Worth a look through if you’re just getting started on React.
Understanding the Virtual DOM
Using a virtual DOM has become the defacto norm in JavaScript frameworks, enabling extremely powerful declarative approaches to templates and applications. If you’ve ever wondered what exactly that means, what a virtual DOM is and how it works, this is a great breakdown.
Understanding Throttling and Debouncing
When dealing with UI interaction, events, and triggering API calls understanding how to throttle and debounce are key. This is a solid introduction to both the thinking behind when you’d want to use these and how you can do it quickly using lodash utilities.
Data Wrangling with JavaScript: Printed!
This isn’t super front-end focused, but I wanted to highlight it because it shows how you can take JavaScript into an area that I think a lot of folks have avoided in favor of python and other languages: Data wrangling. We’ve looked a lot at using tools like tensorflow.js for client side rendering of machine learning models, but JavaScript is capable of tackling everything in your data pipeline. I read through some early versions of this book - if you muck about with data, it is well worth your time.
Other Awesome
2018 Staff Favorites | CSS Tricks
I enjoyed this as a meandering, whimsical, but also revealing look back through a lot of the big topics of the year. Compiled by CSS Tricks authors, but most of the articles are not on CSS Tricks.
The Elements of UI Engineering
A great post enumerating through the different types of challenges in front-end web development. If you’ve ever struggled to explain why front-end is so challenging, this will give you plenty of material to use. And if you’re looking to up your game, read through this and start thinking through how you’d solve some of these problems on your own, or in your framework of choice.
Fly CDN
A customizable, open source CDN written in typescript. Why would you want something like this? Because it lets you write all sorts of custom logic and have it pushed out into CDN edge servers, where it can run super close to your users. If you’re in the process of embracing things like JAMstack and Edge computing, this is another tool to put in your toolchest, and while it’s optimized for the company that released it, the project claims to work on any edge service worker enabled platform, so you should be able to run it with Cloudflare workers, Lamda@Edge, or whatever edge platform you might be using.
Awesome Demos from 2018
A set of very fun demos from codrops, each in a codepen so you can see how it’s done and use it if it tickles your fancy. Careful though - if you click through on the psychedelic waves demo you might find yourself stuck for longer than you think as your brain explodes. Or maybe that’s just me. :P
The melting pot of JavaScript
A deeply thoughtful look at the ecosystem and culture around JavaScript today. Yes it’s JS focused, but I’m putting it down in the ‘other awesome’ section because it’s more about the people, culture, and ecosystem than the language or any particular tool.
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)