Friday Frontend: React Attack Edition
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.
KBall from ZenDev
CSS & SCSS
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.
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.
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.
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.
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!
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.
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.
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!
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.
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.
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.
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!