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!
This week’s newsletter is specially focused on Vue.js. The entire JavaScript portion is focused on Vue… this is in honor of my recently announced new project LearnVueJS.com offering free webinars on Vue.js fundamentals. If you missed that announcement, you can check it out here.
Don’t worry if Vue’s not your thing - next week we’ll be back to our regular cross-the-javascript-world agenda, and for now maybe check out some of the CSS and other awesome posts. There’s a couple particularly mindblowing ones in the CSS section this week.
Hope you have a great weekend!
Best,
KBall from ZenDev
CSS & SCSS
CSS BORDER-RADIUS CAN DO THAT?
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.
CSS Previous sibling selectors and how to fake them
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.
Valid CSS Content
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.
Negative Grid Lines
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.
JavaScript
How to Import a Sass File into Every Vue Component in an App
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!
Advanced Vue Debugging: A Detective Story
(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...
What You Need to Know about Vue CLI 3
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.
Lazy Loading Images with Vue.js Directives and Intersection Observer
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.
Getting Started with Nuxt.js
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.
Other Awesomeness
Accessibility Cheatsheet
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.
WordPress, Accessibility, and Gutenberg
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.
Introducing GitHub Actions
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.
Designing for Cognitive Differences
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.
Start Performance Budgeting
Addy Osmani has been talking about web and JavaScript performance a lot; what I love about this post is how tactical it is. It’s not about explaining to you why you should care, but giving you explicit processes and tools you can use to improve your application’s performance.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)