Friday Frontend: Check out the Vue Edition
Hope you had a great week! I sure did - coming back from a conference all fired up almost always leads to a good week for me. It’s so good to get out of your normal space and re-inspire yourself!
Hope you have a great weekend!
KBall from ZenDev
CSS & SCSS
I left the title in all caps because this seriously BLEW MY MIND. I’ve used border radius a lot, but typically setting all the same radius. I had a vague idea that you could independently set radius for different corners, but I had NO IDEA you could independently set vertical and horizontal radii… so many amazing possibilities here.
A great exercise exploring the sibling (+) and subsequent sibling (~) selectors and how you can use them to fake out a ‘previous sibling’ selector. Even if you don’t want to do that, this will give you some great practice thinking through the applications of these sibling selectors.
I use the content property all the time because I do a lot of stuff with before/after pseudoelements, and they need content to be set in order to show up. But I’ve never thought to explore the boundaries of what’s possible to render with content… this is really wild.
I haven’t been using CSS Grid enough for it to get baked into my mental models yet, so this took me about 3 readthroughs and some poking at the demo to fully grok, but then it blew my mind.
This is great. The single file component approach with Vue lets you isolate your styles per component, but as the article states - many design properties are properly global, as cohesiveness is important in design. No problem, if those properties are encapsulated in files it’s super straightforward to import them into your Vue components automatically. Sweet!
(Bias alert - I wrote this) Modern frameworks like Vue.js do a ton for you. They manage DOM updates, maintain component lifecycles, and more. Layer on higher level frameworks like Nuxt.js and even more is taken care of you. But one of the key questions is - what happens when things break down? When something goes wrong, and there is so much happening behind the scenes outside of your code, how do you debug it? It’s almost like unraveling a murder mystery. So much so, that I decided that the right way to talk about it might be to tell it as an unraveling mystery...
Some neat stuff in the newest iteration of the Vue CLI. I think what I’m loving the most about the latest iteration of frontend CLI tools is the trend towards enabling build configuration *without* forcing you to manage your entire build. In the old world, to customize you had to “eject” a build and commit it all into your source code, thus taking ownership for ever more. In the newer world, you can “merge” in your build customizations while allowing the tool to still manage most of the config, thus letting you easily update to newer versions of the build as the tool updates.
This is a great combination of a new browser API (intersection observer) with Vue’s directive system to create a super clean way to lazy-load images exactly when you need them. I love it.
Nuxt is a phenomenal way to use Vue. It makes so many common decisions & setup questions just go away with a beautiful set of defaults, but remains customizable enough that you can escape those defaults if you want to. I’ve been using Nuxt for almost all my Vue work for the last year. If you’re interested in getting started, this is a good primer.
I think this could get a lot more thorough - it primarily covers design & testing, and at a pretty high level - but it’s a great place to start. I particularly like some of the suggested tests.
Speaking of accessibility… this seems like a pretty big deal. Folks in the accessibility community have been sounding alarms about Gutenberg for a while, but the Wordpress accessibility team lead just resigned and this looks to be all going down quite messily.
While not technically front-end related, this seems big enough that it’s worth highlighting. Github just announced the ability to set up essentially custom IFTTT-style code triggers running as a result of things happening on the platform. This opens the door to some dramatically more powerful continuous integration solutions, as well as some other very interesting possibilities.
Fascinating look at the ways your design & implementation choices influence how well your site/app can be used by people with different forms of mental challenges. I found the section on anxiety particularly helpful (probably because I know a lot of folks who struggle with anxiety) but they’re all good.