Happy end of May! We’re definitely getting into summer time now, and I’m super excited about the return to warm weather!

Lots of good stuff in this week’s edition, but two big things stood out to me. First some excellent articles on CSS Grid and a cool new grid generator. Then down in JS land we’ve got some great articles that draw out key component-oriented-development principles. They happen to use React examples, but should be useful regardless of the framework you’re in.

Oh yeah, be sure not to miss the WebAssembly case study down in other awesome. Very very interesting glimpse at both the challenges & the benefits of using WASM. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Folding the DOM

This seriously blew my mind. A great step-by-step on how to implement 3-d effects (like for example folding and unfolding an image) within the DOM.

Wrapping long words with CSS or HTML

I just recently was grappling with this problem - how to get words to wrap in just the right places based on the space allotted to them. There are a number of options based both on CSS and markup, each with their own pros and cons. This article goes through them in great detail.

Digging Into The Display Property: Grids All The Way Down

A great dive into how the display: grid property actually works, how it interacts with other display properties like floating, and what nesting looks like. Also as a subnote, I see a mention that the new subgrid feature has landed in Firefox nightly. Exciting!!!

Create a split, faux-container layout with CSS Grid and Flexbox

A nice example of how CSS Grid and Flexbox can be used in a complementary manner. The author uses Grid to implement the outer layout, and then Flexbox to lay out the content inside each grid item.

CSS Grid Generator

Fantastic new web-based GUI for generating a layout with CSS Grid and exporting the code for use in your project.

JavaScript

Functional JavaScript: How to use Array reduce for more than just numbers

By the same author as last week’s popular article on elegant JavaScript error handling, this is a beautifully clear article explaining the power of the reduce method on arrays. I already use and feel pretty comfortable with reduce, and this still expanded my vision of the possibilities and power of this method. I highly recommend reading the article.

Why you should use an object, and not an array, for lists in Redux

Front-end development requires an increasing amount of data management, and it’s important to think through the pros and cons of different approaches. Data normalization is a huge question, and this is a compelling case for using objects over arrays as your fundamental structure. (To extend a little on the article, one method I’ve seen for cases where ordering is important is to store the core data in a keyed object like this and then keep an array of keys in the order you care about).

What are Reusable Components in React?

Component-oriented development is one of the clear megatrends in the front-end, and so regardless of your framework understanding better component techniques will be helpful. This article walks through the process of refactoring a React component to be more reusable, but the concepts involved are applicable in any framework.

A React Lift State Up & Down Example

By the same author as the article right above, but so good I had to put it in. Dealing with state management and where state should live is such a fundamental piece of component-oriented development, and often as you do development the “right answer” changes. This article walks through the process of moving which component owns state up to a parent or down to a child. Great work, and once again while the example is in React, this concept applies to any component-oriented framework.

8 DOM features you didn’t know existed

Yes it’s more DOM specific than JavaScript specific, but they are ways to interact with the DOM using JavaScript, and in a front-end context that’s a huge part of what we’re doing. Besides, there’s neat stuff in there!

Promoted Link

TripleByte - Get Offers From Top Tech Companies

I’ve had a couple folks reach out about finding jobs recently, and I definitely recommend TripleByte. They take a lot of the application hassle out of jobhunting, and they’re built by engineers for engineers. The process is straightforward: Take an online test, followed by a phone interview with someone from TripleByte. If you pass both, they then do the legwork to skip you straight to final onsite interviews with tons of companies. Currently only for folks looking for jobs in the San Francisco Bay Area, New York City, Seattle and Los Angeles, but if you’re in one of those spots and thinking about finding a new job 100% give TripleByte a try.

Other Awesomeness

Font-display is incompatible with icon fonts

I’m already a big advocate of inline SVG for icons, but this is a tour de force against the practice of icon fonts. It links out to a set of existing arguments against icon fonts, and then goes through step by step how the new font-display property has literally no correct usage with an icon font.

Accessible Icon Buttons

Great in-depth dive into all the ways you can make icon-based buttons accessible. What I love is that it not only shows the ways, but shows the tooling around how you’d check your accessibility in chrome devtools, and talks through the thinking as well. A great resource for improving your accessibility skills.

WebAssembly at eBay: A Real-World Use Case

A great example of using cutting edge technology on a real problem, digging into edgecases and places it doesn’t behave as expected, and then tracking a measurable (and large) improvement in customer outcomes.

Fundamental design principles for non-designers

As front-end developers, we are often in a position of trying to interpolate between the (static) design we have and the (dynamic) needs of a product. Something comes up that isn’t quite covered by the design, what should we do? In an ideal world we could have a conversation with the designer, but the world is rarely ideal, so it’s useful to have at least a sense of good practices to apply.

13 GraphQL Tools and Libraries You Should Know in 2019

No major surprises but a solid list, so if you’re using GraphQL (or thinking about starting to use it) this is worth a scan.

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