Friday Frontend: Welcome to 2019
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!
KBall from ZenDev
CSS & SCSS
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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