Hope your week was great! I’ve got some really interesting articles for you this week. My favorites were both in the JavaScript section - first the fascinating article about tricks with resting and spreading, and then also the amazing article on writing resilient components.
Of course we’ve got other good things too… in the CSS I really enjoyed the partitioning article, and over in Other Awesome I spent far too long digging through the ‘Humane By Design’ site. Not to say any of the other articles are bad - I try to include only ones I think you’ll enjoy - but those were my favorites.
Enjoy!
Best,
KBall from ZenDev
CSS & SCSS
Stacked “Borders”
Super fun look at the ways to create fancy borders on your elements combining box shadows, outlines, borders, and even some background clipping. It was fun to go through, and opened my mind to possibilities for drawing attention to elements on page.
Sophisticated Partitioning with CSS Grid
Fascinating look through a variety of ways you can partition a grid, and then playing with that partitioning based on nth-child and other related specifiers. Creates a very organic feeling set of variations on ways to display content.
Why can’t I set the font size of a visited link?
Interesting little sideline into the ways browser protect your security by preventing websites from doing anything that might let them determine what else you’ve seen (and lying about colors in some cases to prevent websites from figuring things out)
Redesigning Our Docs – Part 4 – Building a Scalable CSS Architecture
Interesting case-study of choosing a “utility-first” CSS approach built off of Taliwind.js. I’ve been hearing more and more about these approaches as an alternative to BEM style approaches… haven’t tried it in a serious project myself yet, but the arguments are making more and more sense. Also, if you’re interested in Tailwind specifically check out this JSParty episode with the creator!
If statements and for loops in CSS
An interesting look trying to relate the concepts and metaphors of CSS into more traditional software development paradigms. Definitely interesting if you’re a JavaScript developer trying to wrap your head around CSS.
JavaScript
7 Tricks with Resting and Spreading JavaScript Objects
I love the ergonomics of using the rest/epread operator in JavaScript (That’s our fun little ... in case rest/spread doesn’t have meaning for you yet). In fact, if you want a quick and dirty intro check out a post I wrote last year. But if you’re already pretty comfortable with the basics, this article has some SUPER COOL tricks that you can use to extend. Love it!
Why you shouldn't use Moment.js…
The title is a little more opinionated than the article - this article is a bit of a breakdown of problems or challenges with Moment, but also a look at how different date libraries behave across various dimensions.
Reduce, Reduce, Reduce
I love reduce when I’m working with lists, but every single time I have to look up exactly how it works in JavaScript, and think through it carefully. This article does a deep dive on reduce and shows how to use it to create a set of useful functions like “groupBy” and “keyBy”.
React Component Types: A complete Overview
A great look at the various types of components that have grown up in the React ecosystem over time. What I particularly like about this article is that it gives the historical context for why all of these different component type exists, so those who haven’t been coding in React for years can better understand some of the why’s behind the variety of options they see today.
Writing Resilient Components
I saw someone tweet that every time Dan Abramov write a blog post half the front-end community loses 4 hours out of their day as they read and digest it. That’s a little overstated, but there is a grain of truth to it. This is a long post that will make you think a lot… and it is absolutely 100% worth it. It will improve how you’re thinking about writing components no matter what framework you’re using.
Promoted Link
The Complete 2019 Web Development Bootcamp for only $11.99
For those who are just getting started on this amazing journey we call web development, this is a great course that will get you up and going with the fundamentals of HTML, CSS, JavaScript, get you going with Bootstrap for rapid front-end buildouts, and teach you how to build a backend with Node.js and MongoDB. A great “bootcamp in a box” currently on sale at Udemy.
Other Awesome
Top 5 Frontend Development Megatrends
(Bias Alert: I wrote this article) In the last few years, while there has still been tremendously rapid change, and there are more front-end frameworks and packages available than ever, there has also been some consolidation of concepts into a few megatrends. This article breaks down what those megatrends are.
An Introduction to Web Components
Short and sweet overview of what Web Components are, the 3 technologies that make up a Web component, and just a little bit about what those enable. Also the first in a series of articles (the next 2 are here and here), so if this just gets you eager for more, there is more to be had!
Humane by Design
Fascinating set of principles for designing applications that are friendly to humans. With examples. Definitely worth some of your time to go in and click around a bit.
Introducing GraphQL Hooks
Neat little library for using GraphQL in React, using the Hooks API. Makes for a very nice and clean interface to GraphQL.
You probably don’t need input type=“number”
An interesting precautionary tale about using type=”number”. I definitely would not have thought about the negative side effects for things like account numbers, but does make it seem like one should opt out for most cases. The deep dive post referred to in the article is also fascinating, if you want to dig in a bit more detail.
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)