Friday Frontend: Grids and Components Edition
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!
KBall from ZenDev
CSS & SCSS
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.
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.
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!!!
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.
Fantastic new web-based GUI for generating a layout with CSS Grid and exporting the code for use in your project.
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).
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.
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.
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.
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.
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.
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.
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.
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.