Happy Friday! Watch the video to hear about what got me pumped up this week (hint, it has to do with 3.8 BILLION people!), and enjoy the 15 awesome posts, resources, and tutorials down below.
Enjoy!
KBall from ZenDev
CSS & SCSS
Getting Started With CSS Layout
An awesome guide for CSS newbies, but also for anyone who doesn’t feel like they’ve mastered CSS layout or haven’t been keeping up with all the latest developments in CSS Layout. Takes you through the fundamentals of flow on the web, layers in floats and positioning, and then goes through Flexbox and Grid. Excellent.
Solving Life’s Problems with CSS
An article by the author of the pure CSS portrait I linked to a couple weeks back, going a little bit into the power and place of CSS in the web tech stack, but also with an introduction to HOW THE HECK SHE DID THAT! I mean really - that portrait is amazing, and you should read this post. :D
Z-Index Explained: How to Stack Elements Using CSS
Z-Index is one of the elements of CSS that seems like it should be straightforward, but there’s all sorts of complications when you start actually using it. Understanding the nuances, particularly the idea of a stacking context, is key to making z-index your friend rather than staring frustrated at your screen. This article does a great job of explaining.
Know your ARIA: 'Hidden' vs 'None'
Deep dive into the nuances of different ways of hiding content from screen readers. Do you know the difference between aria-hidden and role="none"? If not, you should read this! (Don’t feel bad, I didn’t know either before reading this).
The 80-20 Approach to Sustainable SCSS
(Bias alert - this is my own post) I’m a huge fan of the great strides we’ve taken in css architecture over the last few years, allowing us to design really powerful systems that are far more maintainable than CSS used to be, but this has come at the cost of making CSS and SCSS sometimes seem intimidating to newcomers. The vast majority of projects don’t need anything super complicated, so this post attempts to break down 2 quick decisions you can make that will take you a long way towards sustainable SCSS without requiring deep study or crazy complex systems.
JavaScript
Lazy Load Animal Memes with Intersection Observer
The Intersection Observer API is one of my favorite new browser APIs - you can use it for lazy loading of course, but also for all sorts of fun things like adding animations as something scrolls into view, or efficiently auto-updating in-page navigation based on what’s visible. This whimsical tutorial takes you through how it works and shows you want is possible.
ES6 in Action: Enhanced Object Literals
A Sitepoint tutorial of all the new power available to us for defining and manipulating objects in newer versions of JavaScript. Understanding all the new ways of defining functions within an object will help you quickly grok a lot of Vue’s single component file syntax (which leans deeply on this to export an object that defines all of your component logic), while other functionality like default values in parameters is super valuable no matter what tools you’re using.
Vue.js — Considerations and Tricks
Vue is a lot simpler to learn than a lot of JavaScript frameworks, but there are still a number of areas that can be confusing or non-obvious. This is a a great set of takeaways and links to resources for how to do a handle many of these confusing/non-obvious cases.
What can React Context API do for you? Multi-language text, Modals, and Theme switchers
React’s new context API provides a simple way to share state across multiple components without needing to create deep-drilling props, or use a more complex library like Redux. Is it going to completely replace Redux or related libraries? Not at all! But for use cases where you need some shared state don’t need all the complexity that comes from a full-on flux architecture, this can be a great option. This post contains some examples of how you might use it in your applications.
JavaScript Start-up Optimization
We all love JavaScript (ok maybe not all of us, but most of us!) but that JavaScript comes with costs. This guide by Addy Osmani talks us through the components that go into the cost of JavaScript, particularly when it comes to mobile devices (It’s not just the bandwidth!). He then goes through some approaches we can use to minimize the all-important time-to-interactive on mobile.
Other Awesomeness
Mary Meeker’s Internet Trends Report 2018
Every year Mary Meeker of Kleiner Perkins publishes a slide deck that documents the trends happening in the internet, and it is one of the go-to resources used to divine trends in our industry. Possibly more interesting for those in product roles or startups than pure development, but it’s too good to miss, and this year’s report just went up!
Making Legacy Sites More Performant with Modern Front-End Techniques
I love this case study because not only does it expose a lot of great front-end performance techniques, but it tackles a problem so many of us are stuck with: applying those techniques to a legacy codebase without the luxury of a from-scratch rewrite.
Gatsby, the Open Source React-Based Static Site Generator, Gets Commercial Backing
I’m a huge fan of static site generators (my website is built on Jekyll, and I’ve built a number with the ZURB stack as well), so it’s exciting to see more innovation happening in this space. Gatsby is an open-source SSG based on React, and it’s seen enough interest that the core developers are forming a company around it as well to provide parallelized builds in the cloud. Very cool!
2018 Node.js User Survey Report
The Node.js Foundation just released the results of their 3rd annual user survey. Perhaps unsurprisingly, they found that Node users like using Node! :) Seriously, over ¾ of survey respondents are planning to keep increasing their use of Node… there’s a ton of other interesting tidbits in this interactive report, or if you want just a high level summary you could check out my writeup on InfoQ.
Dynamic Bézier Curves
Super cool interactive post creating dynamic bezier curves using React and SVG. It not only does a great job of teaching you how to do it, but it’s just fun to play around with his demos. Not to mention his morphing header effect is wicket cool.
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! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)