Friday Frontend: Components Are Everywhere Edition
This is the nature of modern front-end development. :P We’ve also got some other fun CSS articles, a big Node.js announcement, and more!
KBall from ZenDev
CSS & SCSS
The progress element in HTML is super challenging to style in a cross-browser compatible way. This is one of the reasons frameworks like Foundation recreate progress bars completely using divs and classes. But that approach is pretty poor for semantics and tools like screen readers, so you may want to go back to the real thing, and if so this article does a great job of diving into all the guts of what you’ll need to do style and animate native
Using pseudo-elements with CSS Grid
Did you know that pseudo-elements are considered direct child elements, and thus completely positionable and styleable via CSS Grid? This makes for some really interesting possibilities, and this is a great example of utilizing this tool to solve a common layout problem.
A Look at CSS Viewport Units
Viewport units aren’t necessary very often, but there are a certain set of problems where they are incredibly useful, in fact there are no substitutes. If you’re not already familiar with them, take a look through this.
While I tend to be opposed to CSS-in-JS solutions for most problem domains, the ability to programmatically restrict styles to a component can be extremely nice, and there are certainly some situations (very large teams & products) where 100% per-component isolation makes a ton of sense. If you’re going to dive into some level of JS integration, this implementation just released by LinkedIn is the quite possibly the best I’ve seen, largely because it hews so closely to existing CSS best practices, while layering in automatic class-name generation, style scoping, and even static analysis and optimization. Pretty cool!
Grid to Flex
One of the pain points I heard that folks are feeling right now in the frontend is a lack of clarity of how to create fallbacks from modern tools like CSS Grid. There’s a lot of conversation about creating fallbacks, but doing so is still a pretty time and knowledge intensive process. This site is a start on a solution to this problem, at least for the CSS-Grid to Flexbox fallback. Una Kravitz is collecting and publishing an open source set of common layouts and patterns implemented with CSS Grid with flexbox toggles. Check it out, and if you’ve done a CSS Grid layout with a fallback, consider submitting it as a pull request!
What are Higher-Order Components in React?
One of the challenges of component-focused development is how to change non-UI code. Higher order components are one of the approaches to doing this, that has particularly taken hold in the React community but is potentially applicable to any component-based framework.
How components won the “framework wars”
Handling Errors in Vue with Error Boundaries
Well aligned with the concepts of higher order components and component-oriented development is the concept of Error Boundaries, essentially wrapper components that isolate errors for different subsections of code. This article uses Vue as an example, but React also has an equivalent feature. This is a super valuable pattern to allow you to isolate subsets of functionality and keep them from breaking other parts of your application.
Angular - All Talks from ng-conf 2018
Just this last weekend as ng-conf, and my twitter feed was abuzz with conversation about all the new things in Angular. The conference had a super rapid turnaround on recordings of the talks, and Nitay Neeman did the work to collect them all, along with slides and short descriptions, into a single blog post. If you’re in the Angular world, you’ll love this.
New Features for Developing AngularJS Applications - Part 1: Component-Based Architecture
The Node.js Project Introduces Latest Release Line: Node.js 10.x
The latest version of Node.js just came out, with big updates to security, a new binary API for native integration, HTTP2 support, and much much more. This is the release post, I also broke down this and the coordinated npm 6.0 release in a post on InfoQ. Not purely frontend, but lots of good stuff!
Creating a Panning Effect for SVG
Web Development Tutorials: Ultimate Playlist (2018)
A youtube playlist of web development tutorials posted by Udemy from a slew of their best instructors. Topics cover basic HTML, CSS, JS, React, Angular, and much more. Check it out!
PWAs to eat the world. Or maybe not. News at 11
This one’s a podcast, but you don’t have to listen if that’s not your thing, there’s a full transcript too. If you’re interested in PWAs at all, you might well enjoy this. It dives into what they are, the news from Apple, some pretty neat analysis tools, and spitballs some pretty interesting ideas for when and where PWAs make sense.