This week I got super excited about the latest wave of JavaScript Framework innovation - the ecosystems around the frameworks!

As the core frameworks of React, Vue, and Angular mature we’re seeing more and more innovation in the tooling and ecosystems around those frameworks.

This reminds me a lot of the maturation in server-side framework ecosystems ~5-10 years ago, and bodes REALLY WELL for the front-end ecosystem. Learn more in this week’s Friday Frontend Inspiration Video:

Enjoy!

KBall from ZenDev

P.S. I'm traveling all next week so there will no newsletter. Next newsletter will come out on Friday August 17. Talk to you then!

CSS & SCSS

The trick to viewport units on mobile

Interesting approach to handling the funkiness that comes from the ways that mobile browsers treat viewport units, vh in particular.

5 hot new CSS features and how to use them

Some pretty interesting new stuff in here, taught via a step by step walkthrough creating a UI. I’m particularly intrigued by :focus-within. Lets you solve some pretty interesting and common problems that used to require JavaScript with pure CSS.

The peculiar magic of flexbox and auto margins

Huh, so apparently margin: auto; works differently in Flexbox. I’ve done a lot of flexbox, but somehow never really run into this… I think because within flexbox I just use justify-content and align-items or align-self and that typically handles it. That said, it never hurts to have another tool in the toolchest….

The frustrations of using CSS Shapes and CSS Exclusions

This article is framed in the negative - hey, it’s challenging to use this new feature - but I think it’s actually a great demonstration of the power of the new feature. With the exception of the lack of Microsoft Edge support, I think all the other issues raised by the author are overcomeable (in fact the comments answer some of them directly), and this stands as a demonstration of the fact that WE DON’T HAVE TO JUST USE BOXES ANYMORE IN CSS. 😁😁😁

CSS-only double-click

This is just wacky. Utilizing extra (hidden) elements, focus, and CSS transforms to implement a “double click” feature without any JavaScript. Should you do this? No! But will it expand your mind and understanding of CSS to dig through and figure out how it works? Absolutely!

JavaScript

TypeScript 3.0 — what has come?

The latest major release of TypeScript is out, and this post breaks down some the major new features. The addition of a new type/language keyword for unknown is big, and probably the breaking change that force this to be a major version release, but there’s plenty of other good stuff in there too.

Understanding JavaScript Objects

A very good fundamental breakdown of JavaScript objects, covering some of their underlying mechanics (prototypes), functions available for working with them, and some of the quirks and particulars of their behavior.

I created the exact same app in React and Vue. Here are the differences.

Very interesting approach to teaching about React and Vue. Highlights both the differences in thinking but also to me shows the fundamental sameness of many aspects of these frameworks. Will be useful if you’re familiar with one and curious about the other.

React vs. Vue (vs. Angular)

In a similar comparison vibe, but a different approach. Compares React and Vue along a number of dimensions - learning curve, code style, performance, tooling, community, and more. Based on a readthrough I think the author’s opinions slant a bit towards Vue, but they do a pretty good job of laying out the facts.

Introducing Fusion.js: A Plugin-based Universal Web Framework

Very interesting - a framework more or less comparable with Next.js or Nuxt.js, providing universal JavaScript support (server-side rendering + client side hydration to a SPA), built in code splitting, and a very powerful middleware/plugin approach. Definitely worth trying out!

Other Awesomeness

Building Wordpress Gutenberg Blocks with Vue.js

(Bias alert: I wrote this) While React is the primary framework supported for Gutenberg, there have been indications that implementing Gutenberg blocks using other JavaScript frameworks like Vue.js should be possible using libraries like vuera, so I decided to explore how to get this to happen and how well it works.

Why the New V8 is so Damn Fast

A dive into the new JavaScript compiler architecture that’s been making Chrome faster since version 58 (mid 2017) and Node faster since version 8.3. If you geek out like I do on the inner guts of what makes our tools work, you’ll love this, and even for those just focused on application programming I bet you’ll learn something new. Like for performance object argument order matters - { x, y, z } is different from { y, x, z}... who knew?!?

The Cost Of JavaScript In 2018

An excellent breakdown of the performance impacts of shipping large amounts of JavaScript, and some advice for how to reduce the amount you’re shipping, as well as mitigate the performance impact for the code you continue to ship.

7 Javascript EEG Mind Reading Libraries for 2018

In the “OMG JavaScript is everywhere” camp, this goes through a set of open-source libraries available for interacting with EEG equipment using JavaScript. I can just imagine pairing this with some of the tensorflow based facial and pose recognition to build applications that not only read your body, but literally read your mind. We live in the FUTURE!

Teaching Your Clients How to Use The Website You Built Them

For those of us in the business of building websites and applications for clients, we know that handoff is a huge challenge. How do you encapsulate all the knowledge about how to use this thing that you’ve build into a digestible set of information for the client? This is a super useful compendium of techniques different folks use, and while some of them may seem obvious to you, I bet you find at least 1 that you’re not already doing.

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