Hope your week was amazing! What stood out to me about some of the articles I found this week was how much JavaScript is permeating everything in the tech world. With articles on using JavaScript in crypto and using React for terminal/CLI applications, this really is the universal (programming) language.

Naturally we have non-JavaScript stuff as well… some fun CSS techniques, a super cool ‘click to copy’ library of CSS effects, and some thought pieces on the role of UX and the many dichotomies of Front-end development.. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

A good tour of a variety of CSS tools all around the same example - creating a triangular breadcrumb ribbon. Touches topics including CSS grid, pseudoselectors & psuedoelements, fancy border tricks, clip paths, and more

Breaking to a new row with flexbox

Neat technique! Use some 0-height (or 0-width for column) elements with a 100% flex basis to force breaks between different points in your flexbox layout. Combine with the order property for dynamic shifting & playing. I like it!

Creating rounded triangles in CSS with clip-path

I’m very accustomed to creating triangles with the so called “border hack”, but this article takes a look at a new method for triangles via CSS enabled by the newer

Implementing a Mockup: CSS Layout Step by Step

This article is really aimed at folks in the beginner to intermediate stage with CSS, so if you’re an expert you can probably skip by it. However, if you’re in that area where getting asked to implement an entire layout or mockup sounds super intimidating, this is a nice step by step guide for how to walk through it.

Beautifully simple click-to-copy CSS effects

A collection of nifty CSS effects, displayed visually, and if you like one you can click it and instantly see the HTML & CSS used go generate it. Great both for inspiration and as a resource.

JavaScript

JavaScript async and await in loops

Super cool look at ways to use async/await inside of loops. This is an area where there can be a lot of gotchas, and it’s well worth reading through & thinking about. Some great tricks too - I like the mental model of using Array.map to turn a set of await calls into an array of promises.

Building the New facebook.com with React, GraphQL and Relay

I don’t usually link to videos, but this one is super relevant - rebuilding one of the most used web applications in the world with cutting edge tooling optimizing for extreme high performance. Very interesting. I hadn’t looked into Relay at all before, but it looks super cool! Starts to get into the tech at about 4:30 in.

Creating CLIs with Ink, React and a bit of magic

Creating terminal/CLI applications using React. My first reaction to this was “huh, why?” But then talking through it with some folks on JSParty I saw 2 big areas where this could cause incredible breakthroughs. First is for full terminal-absorbing applications (think top and its brethren) where hacking with readline to control the entire terminal feels like black magic. If that became just React, it would be so much lower barrier to entry. The other is in terms of standards of composability… it’s easy to install React components from NPM and use them, because the interface is so standardize. No such standards exist for traditional CLI apps, so this could create a much more robust pluggable ecosystem for creating CLI applications.

The JavaScript Developer’s Intro to Crypto

I tend to be a bit of a crypto-skeptic… there are many many applications for which blockchains are not good solutions, and a lot of the hype is overblown. That said, there is still some really interesting stuff there, and there’s no denying it’s a hot topic. This article shows how easy it is to get started using your favorite web technologies.

A Few Functional Uses for Intersection Observer to Know When an Element is in View

With new APIs and capabilities in the browser, it often takes a little while to figure out where and when they’ll be useful. This article looks at a few such cases for the Intersection Observer API. The first one (lazy loading images) is one I’ve seen before, but it’s still impressive how simple this is now with this API. The other examples I hadn’t thought about, but make perfect sense.

Promoted Link

Udemy Mother’s Day Savings

It seems like Udemy has a sale every other month, but it still amazes me how many AMAZING courses you can get for just $11.99. If you’ve been holding out, or meaning to but haven’t yet, here’s another opportunity. And as a reminder, some of my top recommended courses: this Vue course, this React course, and this CSS course.

Other Awesomeness

The Place of UX

An interesting think piece on user experience and what it’s role is within a product and within an organization. I love the concept of “UX” being at the boundaries between supply and demand for different things, and that this shows up inside at multiple layers.

Making Web Components for Different Contexts

Most articles I’ve seen about Web Components talk about how they work and how to build them. This is one of the first I’ve seen really looking at their role in the overall ecosystem and thinking about the ways we can and should use them. It also links out to some great resources on the ‘how to do it’ pieces if you need that too. Wonderful!

Microsoft is building Internet Explorer into its new Chromium Edge, adding new features

This is kind of brilliant. One of the things that has kept Internet Explorer being used long after even Microsoft wanted it to die was old, unmaintained, but mission critical internal business applications that only function on IE. So businesses would force employees to keep using it. But with this, they’ll be able to use a new modern browser that embeds IE for those old legacy monsters and uses Chromium for everything else. Win win!

Split

A fascinating exploration of a number of the dichotomies and tradeoffs at the heart of modern front-end development. A look at developer complexity, performance budgets, gatekeeping, and more.

Game of Frameworks: JavaScript trends of 2019

(Bias alert: I’m quoted in this article). An interesting look at the trends in terms of what skills and frameworks employers are looking for based on an analysis of job postings. I think there’s some generic “on all developer posts” items in there, but still and interesting look at demand in the market.

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html