*Sorry web readers - this is going up a few days late due to conferences being FREAKING EXHAUSTING. To get it every Friday right on time sign up to get it by email!
Happy Friday! I’m just getting back from two back-to-back conferences and am feeling simultaneously inspired and exhausted. There is SO much amazing stuff going on in the front-end world right now, it’s great to see.
In terms of articles this week, there’s a lot of great stuff. I loved the look at CSS dev tools in Firefox, enjoyed the dive into vanilla JS based rendering, and got a TON out of the images deep dive. But all of the articles, really, there’s so much good stuff.
Have a great weekend! Enjoy!
Best,
KBall from ZenDev
CSS & SCSS
Weaving One Element Over and Under Another Element
Wow, this is a super cool effect taking advantage of the mix-blend-mode property. And while some of the comments highlight that there may be simpler ways to achieve the particular effect chosen as an example, it does a great job of exposing the potential available with this property.
A Guide To New And Experimental CSS DevTools In Firefox
Great rundown of a bunch of new tools in Firefox for understanding HTML and CSS. The team at Mozilla has really been pushing the envelope here, with both the accessibility visualization and the inactive CSS tool being really revolutionary for learning.
Creating a custom focus style
Because default focus styles in most browsers are ugly, it used to be super common to just remove them as a part of a CSS Reset. That practice is terrible for accessibility, so a better solution is to create a custom focus style that works well with your design. This post goes through a few different examples on how you can do this.
CSS Circles
Everything you might ever want to know about creating circles with CSS. Goes waaaay beyond the simple “use border-radius: 50%” and deep into questions of text, background images, and more.
Avoid 100vh On Mobile Web
The vh unit is great, and feels super intuitive when you want to have something fit exactly within the screen size. There’s just one problem: It doesn’t react well to address bars showing on mobile. But that problem is huge, so you should almost certainly look into this as an alternative approach.
Toucaan—Rethinking CSS Frameworks.
I include this not because I think this framework is ready to work in yet - it looks like it’s still very early stages and under development - but because I think they introduce and do a good job of explaining a super key concept. Many of us are used to thinking about things in breakpoints, coming from a history of limited sets of devices, but in the almost infinitely varied device world we have today, it makes sense to think of just two modes: Portrait and landscape.
JavaScript
Decouple Vue.js components from the Vuex Store
Solid post. The technique described (creating an interface layer between your datastore and your components) is super useful even outside the immediate context of Vue and Vuex.
Ember-engines: the what, what not and why? – Part 1
I know most of us (including me) are not using Ember, but this is a concept I’d love to see adopted more in the front-end space. An “engine” is essentially a self-contained set of pages in an application, that you can simply install and have running out of the box, but then extend or customize as needed. I remember e.g. in Ruby on Rails simply installing an engine and getting authentication out of the box, end to end, forms and everything. That simplicity has been lost in our new SPA/client-side JS heavy environment, but I’d love to see more examples like this that let us get it back.
What is linting and how can it save you time?
I was shocked recently to be in a conversation with someone doing JavaScript and discover that they weren’t already familiar with and using a linter. Most of you won’t need this article, but if you are someone new to the ecosystem and not already using or familiar with JavaScript linting, READ THIS ARTICLE. It will change your life for the better.
Vanilla JavaScript and HTML - No frameworks. No libraries. No problem.
More and more folks coming into the industry out of bootcamps are learning to use frameworks without getting a solid grasp on the fundamentals. And there’s nothing wrong with that - getting productive fast in a framework so you can find work puts you in a position to keep learning. But at some point, it’s important to drop back to understanding what you can do without a framework. This is a great article to help with that.
🧠 Memory leaks and Garbage Collection 🗑️ in JavaScript.
Back in the day when we were all build server-rendered apps, memory leaks in JavaScript weren’t a big deal. Everything gets thrown away on a new page load, so nothing ever got too far out of hand. But today with SPAs, a user might not do a page reload for literal months, and memory leaks are a much bigger deal. This explains how all of that works, how garbage collection works in JS, and some common sources of memory leaks.
Other Awesomeness
Images done right: Web graphics, good to the last byte
Wow. This is the deepest dive into images and thinking about images that I think I’ve ever seen. Very very good. Do check it out. It’s not short, but you will learn a lot.
Announcing Tina: an open-source site-editor
This is pretty interesting, something I ran into at JAMStackConfSF. It’s essentially an open-source library (plus related service) to turn your static site into a CMS, letting users (or you) directly edit in page, and then write back to git. Kind of like NetlifyCMS, but decoupled from any particular provider. Very cool!
A Breakdown of HTML Usage Across ~8 Million Pages (& What It Means for Modern SEO)
If you’re interested in SEO, this is well worth a look through, because it relays both some info on best practices and a lot of comparative data about what people are actually doing in the wild.
The wonderful thing about Tiggers (audio + transcript)
(Bias alert - I MC’d this show). I know many of you use this newsletter as a way to learn and keep up in our crazy rapidly moving front-end world. This recent show on the JSParty podcast went deep into learning, looking at different ways to learn different things, sharing tips and best practices.
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)