Earlier this week, Dan Abramov’s talk on future features of React at JSConf Iceland lit up twitter like crazy, and so this week we have an extra helping of React-focused articles for you. But that’s not all, there’s also a delightful resource of bite-sized CSS examples, a stunning interactive hover effect, and a very exciting glimpse into the future of the Web with the Houdini CSS Paint API.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Responsive Vertical Rhythm with CSS Custom Properties and CSS Calc

Neat walkthrough of how to create a responsive Vertical Rhythm system for your site using extremely minimal code, utilizing CSS Custom Properties and CSS Calc.


30 Seconds of CSS

A delightful set of CSS examples, each bite-sized and intended to be understandable in 30 seconds or less, showing how to achieve a number of common outcomes, along with explanations. Wonderful.


How We Adopted CSS Grid at Scale

A great real-life case study of utilizing CSS Grid for a large-scale production website. Covers some technical details but more the decision making process, how and why they chose to use Grid and what sorts of fallbacks they used.


Using Sass to Control Scope With BEM Naming

Super cool article on thinking about scope within Sass. JavaScript developers may be familiar with capturing this as a variable named self for use in closures and components, but I’d never thought about doing the same in Sass. You can! This article shows you how and gets you started on thinking about the potential applications.


Stunning hover effects with CSS variables

Simply stunning. Visually beautiful, and super simple to implement, and adds a wonderful interactivity to the page. It reminds me of some explorations I did while at ZURB on reactive animations, but it’s far easier to implement. Very cool!


JavaScript

Understanding the pure function

A gentle and understandable introduction to a key functional programming concept - pure functions - in JavaScript. If you come from an Object Oriented background, understanding the concept of purity when it comes to functions can be one of the key stumbling blocks in shifting to a more functional style, but it comes with a ton of benefits. Take a look!


Sneak Peek: Beyond React 16

At JSConf Iceland 2018, Dan Abramov from the React team gave a talk that gave a sneak peak into what’s coming up for React, and for a day my twitter feed was filled with awe, excitement, snark, and criticism. Love it or hate it, there’s no doubt that React is the leader in the JS Framework world right now, and their innovations are likely to make it into other frameworks soon. This post contains a link to the official video of the talk.


Beyond React 16: Time Slicing and Suspense API

If you’d rather learn by reading rather than watching a video (I tend to fall into this camp, though I will occasionally watch a video), this post on the Auth0 does a good job of breaking down the key features announced in Dan’s talk and showing how you’d use them in a few different scenarios.


Redesigning Redux

Nice combo post that dives a little into what makes Redux tick, then introduces a proposal for a simpler API and finally links to a wrapper around Redux making the API available. What I really like about this post is that it doesn’t rip Redux apart and try to make it go away, but rather highlights a compatible way of solving the problem and implements it in a way that plays nicely with the existing system. Backwards compatibility FTW!


25 React Native Tutorials

One of the super exciting things about React is the ability to use it not just for the web, but for creating native mobile applications. I haven’t used React Native, but my understanding is it is strikingly close to “just React”, meaning if you understand React you can jump over into React Native pretty quickly. To help make that jump, this is a great list of 25 different tutorials on different aspects of React Native.


Other Awesomeness

Say Hello To Houdini and the CSS Paint API

If you want to talk about up and coming features of the web platform, there are none that get me more excited than Houdini. Houdini takes the concept of CSS polyfills and extensibility to the next level, giving you direct access to the brower’s CSS rendering engines using a JavaScript API. There are many pieces in the pipeline, but Chrome just shipped the first one - the CSS Paint API. I could tell you more about it, but this article does a better job than I would.


The Ultimate Guide to JavaScript SEO

My immediate reaction to JavaScript SEO (which really tends to mean SEO on client-side rendered content) is to avoid at all costs. It is increasingly straightforward to set up server-side rendering for your JavaScript frameworks, plus many SEO-focused pages and sites really don’t need a fancy JS framework. However, there are times when it just doesn’t make sense to render any other way than as a SPA, and you really need to know how Google perceives that content. This is the best resource I’ve seen yet for that.


PhantomJS: Archiving the project: suspending the development

There are other headless browser options these days, but many people still depend on PhantomJS so I suspect this will be of interest. There appears to have been some drama in the community that led to this being made official, but it sounds like this has been a long slow decline as the core team no longer is able to invest time in the project and new folks have not stepped up. Will this provoke some change? We’ll see.


A curated list of technical talks and articles about real-world enterprise frontend development

Everything from full-length talks to articles to in-depth reddit comments, this repository is a treasure trove of insights around front-end development, all derived from real-world case studies, and sorted by the company where the case study took place.