I was at VueConf.US this week, down in New Orleans, and had a wonderful time. It was the first US-based Vue conference, and the organizers did a wonderful job with a welcoming environment, wonderful talks, and a unique taste of New Orleans. First time I’ve ever marched down the street with a marching band & police escort at a tech conference. :)

In honor of VueConf, this week’s JavaScript links are primarily Vue focused, but of course we’ve also got a range of other excellent articles including a super cool technique for dealing with whitespace on text, a deep dive into responsive images, and much much more.

Happy Friday!
KBall from ZenDev

P.S. If you missed VueConf and want to learn more about what happened, check out #vueconfus on twitter, or watch my InfoQ profile where I’ll be publishing summaries and interviews from the conference over the next couple weeks.

CSS & SCSS

How display: contents; Works

I’ve never used display: contents; - probably because the browser support is pretty limited to date - but this article does a fantastic job of both explaining what it is and why it can be useful. As it gains wider browser support, I expect this property to be a key tool in our toolbox when creating CSS-grid enabled layouts.


CSS For Teams

A thoughtful article by the UI Architect for URBN on how they unified 3 sites and teams into one. Covers process, design, and CSS architecture.


Cropping Away Negative Impacts of Line Height

A very interesting technique and associated tooling for cropping away the whitespace above and below text. Fonts are bloody complicated, and if you’ve ever spent a bunch of time fiddling to try to make text of different sizes line up with non-text elements, you’ll very much appreciate this.


Implementing a reduced-motion mode

One of the things the amazing Rachel Nabors spoke about at VueConf is the fact that while for the vast majority of users animations will add to the experience and reduce cognitive load, there are a subset of users for whom animations can substantially impair their ability to use your website. In this article, Hugo Girard shows how simple it can be to offer a setting that disables animation using a single CSS custom property.


The Ultimate Guide to Background Images in Email

Okay, so styling in emails is a whole different world than styling for the web, despite its use of what are nominally the same tools, but this resource is too good not to share. Litmus has put together an incredible guide to different techniques for email background images, along with compatibility guides so you know what will work in which email clients.


JavaScript

7 Secret Patterns Vue Consultants Don’t Want You to Know - Chris Fritz

Chris gave this talk at VueConf, and it was phenomenal. I learned several new patterns I’m planning to put into practice immediately.  This recording is from a different event, but I highly recommend watching it.


Renderless Components in Vue.js

A great deep-dive into a more advanced pattern for developing Vue.js components: separating presentational components from purely logical/state-container components (here called renderless components). This pattern will help you build more reusable code; I’d especially recommend it for folks developing libraries and frameworks.


Vue CLI 3: A Game Changer For Frontend Development

While I’m not sure I’d call the new CLI a game changer for all of front-end development, it is definitely a big step forward, and perhaps a hint of the future for FE framework CLIs in general. One of the big improvements is that Vue is leaning into webpack as a platform, big time. Taking advantage of webpack-merge and webpack-chain, they make it far easier to both take advantage of community knowledge for default configurations, and customize your build as desired. Pre-version 3, once you customized your config you could pretty much kiss upgrades goodbye, as you were responsible for managing the entire config. With version 3, this problem should go away, allowing you to seamlessly upgrade the entire vue build toolchain while still maintaining your own custom pieces.


Exploring Zero Configuration With Vue

An exploration of different ways to build your Vue Application, using webpack, Parcel, or jumping whole-hog into the vue-cli. What’s nice is that these days, they’re all pretty straightforward. The days of spending hours wrangling config files just to get a build going seem to be increasingly behind us.


GPU-accelerated Neural Networks in JavaScript

Okay, so this article isn’t Vue related, but it was just too darned cool to pass up. The increasing ease of applying high-powered machine learning techniques is one of the biggest developments going on in our industry right now, and this article highlights a number of ways you can dive in using pure JavaScript.


Other Awesomeness

Are you too old to learn to code?

Spoiler alert: The answer is no. Popular culture (even popular tech culture) envisions software developers as all young, single men. I think this comes out of the “Silicon Valley” steriotype, and is perpetuated by things like the StackOverflow developer survey, where young singles are over-represented since they’re the ones with time to waste filling out online surveys. One thing I loved at VueConf.US this week was how many of the folks I met were in their 30s, 40s, and 50s and had kids. This industry is more diverse than its stereotypes, and if you don’t believe the author, believe me: You’re not too old to learn to code.


w descriptors and sizes: Under the hood

A deep dive into responsive images and the way browsers treat them. I haven’t used srcset much so this was new to me - lots of unexpected behavior and interesting edge cases!


Cool Chrome DevTools tips and tricks you wish you knew already

With everything from screenshotting individual elements to breakpoints on DOM changes to saving live-edited CSS, this article is loaded chock-full with tricks that will make your life easier. Definitely take a look through!


How Fast Is Amp Really?

A fascinating dive into the performance of AMP, separated from the special billing and treatment AMP pages get in Google search results. Especially if you’ve been following the drama around Google’s special treatment of AMP pages and the pressures that puts on publishers and related. Turns out the vast majority of the perceived performance benefits come from Google special treatment, not from AMP itself.


A complete introduction to Apollo, the GraphQL toolkit

If you’re interested in GraphQL but haven’t played with it yet, this tutorial will give you everything you need to set up a GraphQL server and client on top of any existing API you might have, using the Apollo open source toolkit.