Hope you had a great week this week! This week in the CSS section we had a couple of articles that jumped out with new media queries and how to use them.
I’m particularly excited to see info about using the prefers-reduced-motion query in more places, with some very cool opportunities to improve the web automatically for those who struggle with motion.
There’s also a bunch of great JavaScript articles, much of it focused on “relatively vanilla” JavaScript, and one arguing that hey maybe we shouldn’t throw jQuery away just yet. :) Finally a couple big announcements - a great new service for tracking hacked data, and a federated package manager. Enjoy!
Best,
KBall from ZenDev
CSS & SCSS
Reducing motion with the picture element
Not purely CSS, but did you know that a picture with a scrset can base which image it loads off of the prefers-reduced-motion media query? That’s so cool! I can imagine using this both manually in posts and in an automated manner to provide static fallbacks to animated gifs to protect folks who get photosensitive eleptic seizures.
Create a user controlled dark or light mode
Step by step tutorial to creating a user-toggleable dark or light mode hinging off of the prefers-color-schema media query. Not only a good intro to that query, but a great example of how to build themes using css custom properties.
The CSS background-image property as an anti-pattern
Rundown of the problems with using the background-image property in most of the places we use it, and guidance on how to use the picture element to handle most of the situations that led to wanting to use background images in the first place (like cover sizing).
CSS Architecture — Folders & Files Structure
File structure is one of the big “high bang for your buck” choices made in setting up a CSS architecture. This article is a great example of what one long-time CSS & HTML specialist uses for his approach.
JavaScript
Top 5 skills to learn as a junior JavaScript developer
(Bias alert - I wrote this). “What should I focus on” is a recurring theme in the JavaScript world because there’s sooooo much rapid change, and it’s hard to know what to focus on. We recently had a great conversation about this topic on JSParty #77, and in this blog post I break down the top 5 skills we agreed are key to focus on as a junior JavaScript developer.
5 Ways to Convert a Value to String in JavaScript
Bite-sized JavaScript nugget going through the various ways to convert values to strings and how they handle various edge cases.
Implementing Private Variables in JavaScript
A roundup of all the different ways we can approach having “private” variables in a language that doesn’t actually support private variables. Closes with a teaser for the new actually private proposal for private class fields. Of these, I use the module design pattern the most, but they all have their uses.
Why I'm still using jQuery in 2019
An interesting counterpoint to the drive towards using modern JavaScript frameworks for everything. Also takes on a little bit of the ‘You Might Not Need jQuery’ argument.
Introduction to Computed Properties in Vue JS
Computed properties are one of my favorite features of Vue, because they allow you to express your data in what amounts to a declarative approach, not just your templates. You can say “hey here’s how this data is defined” and the framework takes responsibility for keeping it up to date. I love it. This article is a solid introduction to the concept and how they work.
Promoted Link
Udemy Summer Megasale: $9.99 for most courses!
Prices as low as they go on pretty much every course. Tons of great content available, stock up now and work through the courses at your leasure. Courses I’ve been recommending recently include The Complete JavaScript Course 2019, Modern React with Redux (the course I learned React from, updated with all the latest features), and Vue JS 2 - The Complete Guide (by one of my favorite Udemy instructors, Maximilian Schwarzmüller. (And BTW if you’re looking for other webdev content, it might not be a bad idea to just browse his teacher page and check out his other courses)
Other Awesomeness
Unusual HTML tags worth knowing 🧩
Semantic HTML tags are wonderful for letting you create more accessible applications and web pages. The more you take advantage of these, the more you enable browser & tool vendors to make your content accessible rather than having to do it yourself. I didn’t know about a number of these tags (there’s a tag for abbreviations!?!?) but even being aware of them I will start to use them more.
Entropic: a federated package registry for anything
Announced in a widely applauded talk at JSConf EU, this new federated package manager has been the talk of JS twitter the last few days. Between this and the recent github announcement it looks like we’re looking at a polyglot ecosystem for package managers going forward, but there is a lot to be said for creating a federated approach that isn’t controlled by a for-profit company.
Firefox Monitor
This is great! A super friendly front-end and way to subscribe to essentially “have I been powned” - ie, given my email addresses what services have been hacked that released my info and what exactly was leaked.
Your first performance budget with Lighthouse
Woah - I’d heard about performance budgets, but I wasn’t aware that Lighthouse has tooling to explicitly label what your budget is and catch when you’re exceeding it. Very cool!
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 (1)
I'm not sure if this fits here, but here goes.
I have a SECTION tag with a class of showcase. Inside that I have a div.
In my css, I have the following:
.showcase {
background:url(img/test.jpg);
}
I am unable to display the image. I have tested opening it by clicking on it and it opens.
Any help would be appreciated.
Thanks,
Nick