This week we had not one but two corporate megaconferences - both Google IO and Microsoft Build took place, with the companies competing with jaw-dropping AI demonstrations and lots of great web platform improvements. It is great to see the extent to which Microsoft in particular has embraced Open Source in the last few years.

We’ve also got a bunch of great inspiration and articles - from CSS debugging to CSS Grid inspiration, JavaScript regular expressions to npm security audits, with of course some great React and Vue content mixed in.

Happy Friday!
KBall from ZenDev

CSS & SCSS

Editorial Design and CSS Grid: Inspiration and examples

Some beautiful examples and inspiration of how CSS grid allows us to bring editorial design from print and integrate it into the web. I particularly love the idea of “defining empty spaces with the same intensity that we define full spaces”.


CSS Grid — Responsive layouts and components

A walkthrough on using CSS Grid to build a layout and make it responsive, showing how to can use minmax, auto-fit, and auto-fill to add quite a bit of responsiveness before you even think about a media query.


Create Unique Web Experiences with CSS Custom Cursors

Very cool and simple css mechanism to create a unique experience that guides your users to important parts of your website. Sure, you could use this for evil, but used properly custom cursors for different parts of your site can set you apart and help users understand what is important.


Learn This One Weird 🙊 Trick To Debug CSS

This type of in-page CSS visualization can be really helpful when you’re struggling to get something to lay out quite right and can’t figure out why, or you’re still trying to wrap your head around the box model. You can get most of the way there with Chrome or Firefox developer tools, but sometimes it’s nice to just see it all right in front of you.


CSS Environment Variables

Way out, early days, “unofficial proposal draft” spec level, but I love to see the ongoing innovation on the web platform. CSS Environment Variables were first introduced as a non-spec feature from Apple as a way to deal with things like “the Notch”, but now it’s looking like it may become a standard and powerful way to deal with both browser and author-defined variables. Neat!


JavaScript

`npm audit`: identify and fix insecure dependencies

Easy checking for known security vulnerabilities among dependencies, along with information about how serious the vulnerabilities are and some recommendations for how to fix. Given how complex npm dependency trees can get, having tools like this is a huge step forwards for implementing secure JavaScript applications.


A Guide to JavaScript Regular Expressions

Regular expressions are an extremely powerful tool, especially for text munging and analysis. They don’t get used that frequently in pure front-end development, but every now and then I run into a problem where they are the perfect solution. If you’re not already comfortable with using RegExp, this is a detailed and thorough guide to get you up and running.


Understanding the Spread Operator in JavaScript

Full disclosure: I wrote this one. The spread (‘...’) operator in JavaScript is one of my favorite features in modern JS, but it can definitely be a little opaque when you first encounter it. This is a quick article explaining what it is and how it works, using an example from Wordpress’s Gutenberg editor.


All the Talks from VueConf.US

VueMastery.com just finished publishing the last recorded talks from VueConf.US. You can find every single talk at this link. I particularly enjoyed the talks by Rachel Nabors, Sarah Drasner, John Lindquist, and Miriam Suzanne, but they were all excellent. Go watch!


A complete React with Apollo and GraphQL Tutorial

Massive and thorough. If you’re looking for an end-to-end practice project to learn how to use GraphQL with the Apollo ecosystem, this looks like a good option. It uses React for the front-end, though the author also points out that adapting Apollo and GraphQL to Vue or Angular is straightforward as well.


Other Awesomeness

The Front-End Tooling Survey 2018 - Results

We linked out to this survey in a previous newsletter, now the results are in! Some fascinating details about what tools and methodologies front-end developers are using today. Still a long way to go on CSS Grid adoption, but we’ve made some serious progress! And check out the rapid rise of React and Vue. Very cool to see these powerful tools taking off.


Inspecting Animations in DevTools

Sarah Drasner had a great tweet about how 90% of animation is tinkering and tweaking timings until your eyes bleed - having tools like this speeds that tinkering process up dramatically, maybe taking it down to only 70 or 80%


Google IO 2018 Web Development Talks

Google IO 2018 was this week, and along with the somewhat jaw-dropping announcement/demo of Google Duplex, there were a ton of talks relevant to us as web developers. Harry Manchanda put together this youtube playlist of all of the web development-focused talks from IO.


Microsoft Build 2018 Talks

At the same time as Google IO, just a few hundred miles up the coast Microsoft was hosting it’s own megaconference. While I don’t have a similarly curated playlist of talks, I did find this list of *all* of the talks that happened, and a quick scan through finds some extremely relevant talks on PWAs, Angular, and TypeScript. Enjoy!


A Guide To The State Of Print Stylesheets In 2018

Ever go to print a page from a website and discover that what you’ve printed bears essentially no relationship to what you saw on the website? Turns out, styling for print has a lot in common with styling for the web, but you need to be cognizant of the differences of the medium and either maintain a separate print stylesheet make sure you’re writing things like media queries with print in mind. Check out this comprehensive guide on Smashing Mag!