Friday Frontend: High as a 4-20 Kite Edition
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. 😉
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
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.
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.
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.
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.
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?
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.
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 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.
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.
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.
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.
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. :)
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.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!