Hope your week has been great! Lots of interesting stuff this week, but in particular want to highlight the articles about Next.js and Nuxt.js, 2 higher level frameworks on top of React and Vue respectively.
Both frameworks embody a set of front-end architecture decisions (the Nuxt.js article explores those explicitly), and are part of a growing trend: Creating specialized ecosystems and “golden paths” around the top javascript frameworks. These “higher level” frameworks reduce the barrier to building “best in class” applications and really are fun to use.
Happy Friday! Enjoy!
KBall from ZenDev
CSS & SCSS
Introducing Trashy.css
This is pretty neat - a themable CSS library for highlighting the semantic structure of an HTML document. Also a bookmarklet that you can use to disable current CSS and throw this in place. I can see this as being extremely useful for debugging/highlighting accessibility issues, as well as just a useful learning tool.
Using SVG with Media Queries
Using media queries with SVG lets you do something kind of amazing - create responsive images. Images that not only resize perfectly (SVGs are vector images) as you scale up and down, but actually change which features are visible based on their size. I love it!
Refresh CSS Bookmarklet v2
Super simple bookmarklet for refreshing just the stylesheets on a current page. Ie for development when not working in an auto-refreshing environment. I do most of my dev work with webpack-based autorefreshing systems where this isn’t a thing, but when I’m working on my site (which uses Jekyll) I don’t, and this is a much nicer flow than doing the entire page refresh.
How to Use 2D Transformation Functions in CSS
Great overview of all the different transformation functions available in CSS. Translation, rotation, skewing, you name it and it’s in there. Even goes in a little bit to the fun of matrix transforms.
Flexbox: How Big Is That Flexible Box?
Rachel Andrew and Smashing Magazine are really doing amazing work on explaining the underlying “how” of various CSS features. This article dives into the sizing algorithms behind flexbox, explaining how browsers figure out what size to make flexbox elements.
JavaScript
7 Frontend Architecture Lessons From Nuxt.js
(Bias alert - I wrote this). One of the big things I heard from y’all in the survey I sent a few weeks back was an interest in more resources on front-end architecture. This post is one of the first in many that I’ll be doing attempting to fill that need - a look into the architectural choices taken by the Nuxt.js framework, and what the benefits of those choices are.
Next.js 7
While Nuxt.js (above) is for Vue, the original inspiration of Next.js (SSR framework for React) has just hit another milestone. I like the way frameworks are continuing to standardize on super simple code-spitting via dynamic imports. That and a bunch of other good if incremental updates in this release.
The 12 Things You Need to Consider When Evaluating Any New JavaScript Library
In an ecosystem as complex and fast-moving as the frontend world is, one of the hardest things is deciding what libraries and tools to learn about and use. This article does a great job of laying out 12 different criteria to use when making a decision.
Learning JavaScript: Call By Sharing, Parameter Passing
A little dense, but an important topic. Understanding how data flows around a JavaScript application and where things are copied is one of the areas I’ve seen a lot of junior developers slip up. This goes deep into what’s happening under the hood when you call a function with arguments that are regular values vs object or arrays.
Interviews from JSConf
(Bias alert - I did these interviews). I don’t normally plug too much of my own stuff in here, and I also know that podcast links tend to be a little lower interest than some, but I got so excited listening back through these I had to share. Some super cool interviews I had with folks at JSConf.US, covering things like the importance of DRY code, the metaphors we use for software, JavaScript communities across Latin America, how to advocate for modern tech stacks in large companies, and fostering mentorship. I learned a lot having these conversations, and more when I went back and listened to them again. Transcript also available so you don’t have to listen through the podcast.
Other Awesomeness
Color Cycling with Workers
This is a really interesting step by step story of attempting to create some animations in a canvas tag (via pixel shifting), running into performance challenges, and offloading the computation to a background thread via a service worker. I do wonder how much of the effect could have been achieved with SVG filters at lower performance cost though.
Aspect Ratio Media Elements and intrinsicsize
Overview of a proposal for a native way to deal with aspect ratios in media elements like images. Definitely something we need, and looks like it’s now under development in Chrome. Cool!
What makes a good front-end developer?
Chris Coyier of CSS Tricks poses the question and gathers answers from a number of luminaries in our field. I love that the word empathy comes up multiple times - this is something that I think is key to any development role, but especially front-end, and I’m glad to see it being highlighted.
HTML elements, unite! The Voltron-like powers of combining elements.
As someone who started off way deep in the backend and has gradually worked my way front, I keep coming across interesting holes in my knowledge that someone who started out focused on the front-end might not have. Like some of these super cool semantic HTML elements. There’s an element specifically to represent text for a keyboard input? Neat!
Explore the immersive web with Firefox Reality. Now available for Viveport, Oculus, and Daydream
This is pretty interesting - a web browser designed specifically for virtual and augmented reality headsets. This feels like still very much an untapped domain, with some interesting experiments and games out there but really a lot of people still trying to figure out how VR is going to work and what the killer applications will be. Having this as an in-experience discovery path may help speed that exploration process out.
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)