This edition is brought to you by components and component-based architectures. Not only do we have 4 different component-related JavaScript articles, but the new CSS Blocks tool released by LinkedIn is for component-based styles, and even the post focused on application design mentions components a massive 37 times.

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!

Happy Friday!
KBall from ZenDev

CSS & SCSS

Animating Progress

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 <progress> elements.


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.


CSS Blocks

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!


JavaScript

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”

This gets to a point I’ve been thinking about a fair amount recently - as different as the various JavaScript frameworks are, there has been a lot of consolidation into best practices over the last couple years. The details vary slightly, but the patterns are similar, meaning that increasingly if you master one framework you have an edge in learning the others. This post does a good job of showing you how this plays out across the big 3 of Angular, React, and Vue.


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

Speaking of Angular, believe it or not AngularJS (the evolution of the old Angular 1 that is still pure JavaScript rather than TypeScript) is still around. And not just around, but evolving and changing with version 1.7 planned for release later this year. Like the TypeScript based ‘Angular’ and most other advanced frameworks, AngularJS has evolved towards a component-based architecture, and if you’re using AngularJS without components this article should help you make the jump.  


Other Awesomeness

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!


Designing very large (JavaScript) applications

While the title says JavaScript, and many of the examples are JavaScript, this is really a globally applicable article that talks through the decision points that go into designing a large application. It does an excellent job of talking through tradeoffs and how to make software decisions without getting bogged down in code details.


Creating a Panning Effect for SVG

Nice, simple, and to the point. A tutorial on how to create an SVG that lets you grab it and move around, panning around your image. Shameless plug: If you feel a little intimidated by SVGs and interacting them with JavaScript, check out my intro course on SVGs as Code on Skillshare! You should be able to get free access through that link; if you have any trouble just shoot me an email and I’ll figure out how to get you access for free.


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.