Friday Frontend: All Eyes on Vue Edition
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!
KBall from ZenDev
CSS & SCSS
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;.
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.
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.
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.
(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.
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.
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.
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.
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.
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.
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.
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.
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.