Hope you had a great week! This last weekend was a crazy one in the Vue.js world as a recent RFC (actually linked to in our June 14 newsletter) inspired a tremendous amount of controversy and pushback. Included below are several articles exploring the RFC deeper, and that was enough to spark a theme so we’ve got some additional Vue articles as well.

As always, there’s also a regular helping of great CSS and other web focused articles. Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Building a Conference Schedule with CSS Grid

This is brilliant. I love the way he highlights how grid works with regular incremental units (in this case increments of half an hour), but then added named grid lines to make the actual styles extremely readable. I don’t know if you can get more semantic CSS than grid-row: time-0900 / time-1030; grid-column: track-1;.


CSS at Scale: Cosmetic vs Layout Properties

This is a super important concept; I’ve also heard this split described as “graphical” vs “structural” properties, but regardless of what you call it understanding the distinction between properties that influence how the page lays out vs those that simply apply “flare” or change visual properties of the exact item you’re manipulating is a key concept.


CJSS: A CSS based web framework

This is hilarious. You’ve heard of CSS-in-JS? This is JS-in-CSS. Not to mention HTML-in-CSS. It is a build-time framework that uses your CSS file as the source of truth and generates HTML and JavaScript files from it. Not for serious use, but very entertaining and thought provoking.


Pure CSS Only Portrait - Isla

In the “holy smokes that’s crazy” category of inspiration, check out this portrait made entirely with HTML and CSS. The author comments it took him “roughly 100 hours”, and includes a sped up video showing some of the process. Definitely click through to that video… in fact, it’s so good I’ll include a link directly here.


JavaScript

Vue's Darkest Day

Written in reaction to a series of extremely negative feedback on the recent Vue.js functional API RFC, this is both a refutation of the negativity and a set of code-based examples showing how the new API would make for cleaner code.


3 Key Insights from Vue's new functional API RFC

(Bias alert - I wrote this) My own take on the Vue.js functional API RFC, with a focus on what it can tell us about the future of front-end development. There is a ton of valuable and positive stuff here that is pushing the web forward.


Vue without View - An Introduction to Renderless Components

An interesting look using components as a way to compartmentalize logic and functionality that is not directly related to rendering templates. While personally I’m not a huge fan of this example, I think the approach is super valuable. A situation that makes a lot more sense to me using this approach is when creating components that interact with APIs like maps APIs, as shown in this talk from VueConf.US 2018.


10 Things You Should Know Before Writing Your Next Vue.js Component

A solid list of useful tips that you might not have come across if you’re relatively new to Vue.js. None of them are earthshattering, but all of them are useful.


Forget about component lifecycles and start thinking in effects

Great description of how the Hooks API leads us from an imperative style of implementing side effects (“Do thing x on mount, do thing y on unmount”) to a declarative style of implementing side effects.


Other Awesomeness

Render Snarky Web Comments in Comic Sans

This is absolutely delightful, and while it’s a couple of weeks old I think with all the negativity that was floating around this last week it’s well worth looking at ways like this to lighten things up.


Bringing service workers to Google Search

A fascinating case study looking at all of the challenges encountered and overcome in implementing service workers on Google Search. Google’s search features are perhaps the most performance-sensitive pages on the planet, loaded over 63,000 times PER SECOND, so their challenges are pretty unique, but some of the lessons they drew are broadly applicable.


The #1 Easiest Way to Speed Up a Slow Website

This is definitely some low hanging fruit, but I have sites where I haven’t done it properly. The method in question? Image optimization! The article provides some data on how widespread it is, the scope of the issue, and some recommendations on what you can do to address it.


Drop caps & design systems

Implementing drop caps in a consistent way on the web is strikingly hard. I remember a PR in ZURB Foundation attempting to handle this that got over 100 comments and multiple versions and iterations… and still never got merged. This article walks through some of the challenges as well as different approaches and the solution that Vox Media eventually landed on.


5 Keys to Accessible Web Typography

An excellent article on the elements that go into making typography accessible on the web. As someone who browses using standard web browsers but has pretty terrible vision, I really appreciate the tips to allow the resizing of typography based on user preferences and keeping the actual observed contrast high.