This week’s edition is a little on the short side because I managed to catch a nasty illness from my kids and spent a bunch of the time I would have been working on the newsletter flat in bed trying not to throw up. :(

Hope you’re having a great Friday, enjoy this (somewhat abridged) Friday Frontend

Happy Friday!
KBall from ZenDev

CSS & SCSS

Theming With Variables: Globals and Locals

I think using CSS Variables for theming is the clear future for both frameworks like Bootstrap and Foundation and more specific examples of themes like themes for Wordpress or Shopify. Along the way, there are architectural decisions that you’ll need to make, and this article does a good job of walking through some of the options, as well as landing on an approach that looks pretty darn good.


Super Mario World made only with CSS gradients - no JS, no embedded images/data URIs, no external images and using a micro HTML =)

If you want to get inspired with the crazy level of detail you can create with just CSS, check this out. The author has created a graphic completely reproducing Super Mario World using only CSS. Clouds, trees, and a running character, all with just CSS. Crazy!


Glitch Effect Slideshow

Also in the inspiration camp, this codrop takes the CSS Glitch effect and shows how you can apply it to a slideshow for a unique and awesome interaction.


JavaScript

Putting Things in Context With React

The new Context API in React creates a mechanism for passing data down from a parent to deeply nested child components without having to chain props the whole way down. It looks strikingly similar to provide / inject in Vue.js, and while it should be used in moderation, is a very nice solution for cleaning up complex components that have a bunch of shared data but clear functional decomposition.


React Tutorial: A Comprehensive Guide to learning React.js in 2018

An old good article recently updated with the latest and greatest, this is one of the better single-article introductions to React I’ve seen. If you’re already using React you probably won’t get very much out of it, but if you’re looking for a place to start this is 👍👍.


Using JSX with Vue and Why You Should Care

One of the things I like about Vue is that it handles most of its magic with simple HTML templates, letting you stay much closer to traditional web technologies. However, sometimes you want the powerful configuration ability that JSX gives you in React, and guess what! You can actually use it in Vue as well! Sweet


Other Awesomeness

How JavaScript works: the rendering engine and tips to optimize its performance

Another in an excellent series by SessionStack, this post dives into the nitty gritty of how browsers lay out content on the page, and what the implications are for how to make your web site or application highly performant. Not a simple topic, but they succeed in breaking out some simple things you can do to see improvements. Highly recommended.


10x Performance Increases: Optimizing a Static Site

While we’re talking about performance, check out this case study on optimizing page load time of a static site. Straightforward, practical steps you can use right away, baked into a real life example where the author took a page from 8s pageloads to 350ms pageloads. Nice!


Insights from Stack Overflow’s 2018 survey of 100,000 developers

If you were curious about the Stack Overflow survey that was in last week’s newsletter, but didn’t have time to dig through it in detail, this blog post may be of interest. The author dissected the report and pulled out a set of conclusions and insights. Definitely interesting and worth a look through, though part of me wonders how representative the sample is of the entire community vs the folks most likely to be super active in online communities (young and childless). Looking around, there appear to have been questions raised about representativeness, but no great answers.