Some interesting things going on the ‘Other Awesome’ segment this week. Both in terms of improving/increasing web developer involvement in CSS & JS specifications, and then in terms of merging together a couple foundations supporting JavaScript open source projects.
I’ll be at Node + JS Interactive next week interviewing folks for JSParty; I’ll see if I can nail down some of the members of the Node.js and JS Foundations for specifics on what that merger means.
In the meantime, hope you enjoy the rest of these links. Have a great weekend!
Best,
KBall from ZenDev
P.S. I heard from many of you that learning Vue.js is something you’d like to accomplish this year… I’m working on a project to help with exactly that. Be on the lookout in the next couple of weeks for an announcement!
CSS & SCSS
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
Combination article that talks both about design concerns when creating horizontally scrolling containers and implementation using CSS grid.
The Shapes of CSS
Super cool article showing how to create a wide range of shapes using just a single element and CSS. I’ve used a lot of the triangle and circle ones, but some of the later ones are wicked cool. I think my favorite is the Yin Yang. Mind. Blown.
Grid Vs Flexbox: Which Should You Choose?
My gut reaction when reading the headline was “both, they’re complimentary!” but luckily it turned out the author was on the same page, and the choice he had in mind was more of a ‘per-situation’ choice.This article actually does a very good job of showing a lot of comparisons between ways to do things in flexbox vs grid, and drawing out the tradeoffs for different use cases.
It’s 2018: You shouldn’t be writing vanilla CSS
I was expecting this to be touting CSS frameworks, but instead it’s an overview of your options when it comes to CSS preprocessors (SCSS all the way!), post-processors (postCSS is AMAZINGLY powerful), and CSS-in-JS options. Check it out.
Getting to Know a Legacy Codebase
Taken from the perspective of digging through a legacy CSS codebase, but I think the lessons in here are universally applicable. How do you approach learning a codebase that doesn’t have a guru that understands it all? One that’s evolved organically over time… this is a very real and interesting problem, and this article sums up a number of very useful techniques for approaching it.
JavaScript
Plans for the Next Iteration of Vue.js
This is big! Evan You, the creator & project lead of Vue.js, published a set of plans for the next major iteration of the framework. There’s some exciting technical details: a smaller, more modular codebase, big performance improvements, fragment and portal support, and built using TypeScript. But I’m almost more excited by the community process announcements - a formal RFC process and an explicit ‘compatibility’ build for old browsers. Vue is growing up!
JavaScript Arrow Functions: How, Why, When (and WHEN NOT) to Use Them
(Bias alert - I wrote this) One of the most heralded features in modern JavaScript is the introduction of arrow functions, sometimes called 'fat arrow' functions, utilizing the new token =>. However, like anything in engineering, arrow functions come with positives and negatives. This article first reviews how arrow functions work, then digs into examples of where arrow functions improve our code, and finally digs into a number of examples where arrow functions are not a good idea.
JavaScript Essentials: Types & Data Structures
The “lack of types” in JavaScript is one of the frequent criticisms of the language,and reasons for going to something like TypeScript. However, it’s not that JavaScript completely lacks types - it just has very weak and dynamic types, with lots of coercion going on behind the scenes. If you don’t understand how all of that works, this article is a must.
A comparison of Server Side Rendering in React and Angular applications
Combination of comparison and tutorial - goes through getting SSR working first in an Angular application and then in a React application. If you’re thinking about doing this in an existing app, this will definitely be helpful. If not, I definitely would recommend starting with a higher level framework or template (e.g. Next.js for React) that does a lot of this configuration for you. Side note: This definitely reinforced my inclination towards React over Angular… and made me curious to see a similar comparison with Vue involved. :)
Writing multiple Vue components in a single file
The ability to write small “helper” components within a single file is one of the patterns from React that I’ve genuinely missed going to Vue. Single file components are great, but sometimes you have something that’s just going to be used internal to one component, and splitting it out into another file can create a lot of boilerplate. This article goes through a number of ways to enable the ‘multiple components in a file’ approach in Vue, though honestly none feels quite as natural as the React version.
Other Awesomeness
Web Developer Representation in W3C
This is really interesting. A Dutch web developer group is considering becoming W3C member and paying to have some representatives from the web developer community in the spec process (the first being Rachel Andrew - you can read her post about this here). Contrast this to the vast majority of members who are representatives of browser vendors - not exactly the most disinterested group. They are also calling for more participation from other web developer groups. I’m not sure who might be good examples here - it’s kind of like a webdev focused professional group. Anyone know of one they can point me to?
Node.js Foundation and JS Foundation Announce Intent to Create Joint Organization
I’m not entirely sure what the implications of this will be, but I think overall it should be positive. The JS Foundation started as the jQuery foundation, eventually expanding to support a number of open source projects including lodash, ESLint, and webpack. The Node.js Foundation came out of a desire for non-corporate governance of Node.js after a big community split in 2014. Both are under the umbrella of the Linux foundation, and I think this merger should clean up an often specious distinction between ‘Node’ and the rest of the JavaScript world.
Best HTML, CSS, Javascript Practice : Chrome Extension
A nice walkthrough of the steps to create a Chrome extension. Targeted at relative newbies - folks who’ve just finished Codecademy - but useful for anyone who has never done an extension and wants to.
The Most Important Skill Nobody Taught You
From a few months back, but it spoke to me enough that I want to include it (and I think I’m not alone in find it spoke to me -- I’ve never seen a medium article with this many claps before!). Talking about the value of boredom, of facing ourselves, and of getting to know ourselves. It’s sooooo easy today (and especially in our industry) to try to be always connected & always keeping up, but it’s also important to spend some time alone getting to know ourselves.
Do You Really Know CORS?
CORS is something that used to not be something you had to worry about so much, back in the old days of server-rendered webpages that all lived on a single domain. But in today’s world of JAMStack, separated frontends, and more this is a topic every web developer is likely to run into at some point. If you’re not already familiar, you should really read this post.
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)