For those not immersed in California culture, today’s date has a special connotation in the weed-smoking world. Not that I’d know much about that, especially these days when I’m a responsible adult, but I’ve heard of it. 😉

For those not busy getting high, we have a great set of front-end focused resources for you. Best practices with CSS Grid, Javascript for smart watches, multiple takes on animation, and much much more.

Happy Friday!
KBall from ZenDev

P.S. I wrote a couple blog posts this week that you might be interested in. One about alternatives to workaholism in the tech industry, the other about using Vue.js with the Foundation ZURB Stack. If you check them out, lemme know what you think!

CSS & SCSS

Best Practices With CSS Grid Layout

CSS Grid has been around and being used long enough that we’re starting to see some best practices congeal. Rachel Andrew goes through a set of them, informed both by her own experience (she’s one of the foremost advocates and teachers of CSS Grid, and was involved with the spec) and a survey of developers using grid. This is a must read.


Another Collection of Interesting Facts About CSS Grid

A set of lessons learned on how to use CSS Grid, some of the shorthand properties, and ways to handle explicit and implicit rows and columns. Filled with codepen-based examples, so you can dig in and tinker with the code to your heart’s content.


How browsers position floats

I hope that you’re in a position now where you can pretty much use Flexbox and Grid Layout all the time, but sometimes there are situations where you still need to use floats, or you’re working with an old CSS codebase that has floats all over the place. In those scenarios, it’s super helpful to understand the guts of how the browser treats floats. This is a great visual walkthrough of exactly that, letting you click through to see progressively more ways floats will get treated as you add new floating elements and clears.


Keep Pixelated Images Pixelated as They Scale

For those of us who are fans of retro 8-bit graphics games and the like, this is a cool little CSS property that gives you control of how pixels scale when you scale up images.


🏎 Mario Kart: CSS 🏁

Speaking of 8-bit graphics, check out this game built entirely with HTML and CSS. Not only does it animate through a game world (we had a similar example last month implementing a basic super mario animation) but it allows you to pick a character and navigate using the keyboard. How cool is that?


JavaScript

An Introduction to VuePress

Evan You, creator of Vue.js, has just shipped another project that has started getting rave reviews. VuePress is a static site generator powered by Vue.js. If you’re into static sites (I love them - my website is built using Jekyll, and I’ve done a lot of work with Panini as well), this will be of interest. It lets you take advantage of the power and simplicity of Vue to create a statically generated site, that oh by the way will act like a SPA once you load the first page. Super slick, super fast, and this article gives you a nice gentle introduction to it.


Fitbit ❤’s JerryScript: JavaScript Breaks into the Internet of Things

This is super cool! I was just talking last week on the JSParty podcast about the new WebUSB API and how we’re starting to be able to talk to devices from the browser using JavaScript, and now what should come up but this example of IoT devices using JavaScript. Fitbit’s new smartwatch ships with a special IoT optimized JavaScript runtime, and they’ve published an SDK, so you can create apps for the watch using pure JavaScript. How cool is that!?!?


ES6 in Action: How to Use Proxies

Proxies are a super powerful pattern - in fact, all of the Vue.js reactivity system is built on top of proxies, at least conceptually. In practice, the current reactivity system is not because proxies are not supported in IE11, so there’s an elaborate “re-implementation” of proxies with several drawbacks, and a proxy-based implementation in progress for once IE11 support is dropped. That should give you a sense of how powerful these things are, and this article gives you an introduction to what proxies are and how to start using them in your code.


Animations in React Using React Motion

Animations are an incredibly powerful tool for directing attention and making a UI feel immersive and polished. This is a nice introduction to the React Motion library for making animations within React. If you’re using React, this seems like a nice option, though I gotta admit reading through it makes me realize how much better the scene is over with Vue.js.


Vue In Motion

Speaking of animations in Vue, check out this awesome talk from VueConf.us where Rachel Nabors walks through how easy it is to create animations into Vue using the built-in transition component. This was one of my favorite talks from VueConf; definitely check it out.


Other Awesomeness

Scroll to the future

An in-depth look at how scrolling and scrollbars have evolved over the years, and what tools and best practices have evolved to make for the best possible user experience when scrolling through more content than fits on the screen.


Dependencies Done Right

Managing dependencies is enough of a pain for application developers, but for package maintainers it’s a whole extra level of complexity to think about all the different environments your package might be installed in. Luckily, the npm specification has thought about this - this article goes into the distinctions between dependencies, devDependencies and peerDependencies and when you should use each.


Going Offline

A whimsical high-level introduction to service workers. You won’t find much code, but you will find an easy-to-grok overview of all the high level concepts involved in service workers, along with the motivations behind them. This post is also the first chapter of a book, so if you get really excited about it you could probably get the book and then find some more detailed code. :)


Mission Critical: optimizing CSS for CDN

For those who are also doing their own operations stuff, a dive into how to optimize critical path CSS for use with CDNs, serving different versions of a page depending on whether the CSS is cached or not. Taking it to the extreme? Perhaps, but for performant sites on non-performant networks, this is a super valuable tool.