Friday Frontend | Flexbox, Grid, and demystifying ES**!
KBall from ZenDev
P.S. If you’re trying to figure out how to bring your front-end web stack up to speed, or even what technologies to use, I consult and do training on front-end architecture, workflows, and frameworks. Schedule a quick 15 strategy call to discuss how I can help you: https://calendly.com/kbal11/front-end-strategy
CSS & SCSS
I love Flexbox. Absolutely love it. There’s even a GIF floating around the internet that got started because I was trying to communicate how much I love it. It’s powerful, simple, and trivially solves problems that have plagued web developers for a decade. What I love about this article is that it does a beautiful job of graphically demonstrating one of the trickiest concepts in flexbox - how the concept of axis changes as you change flex direction. The rest of the article is solid as well, but that particular piece is best in class, something I haven’t seen as well done elsewhere.
Different folks learn different ways, and so as we all attempt to ramp up on the new amazingness that is CSS Grid, I’m continually on the lookout for articles that break it down differently. This post by Tim Wright on CSS Karma takes the approach of using a single example and deep diving through it as a way to explore the spec. He does a fantastic job in taking a simple CSS Grid layout with just 3 CSS properties and using it to break down 6 different concepts from CSS Grid into understandable, bite-sized chunks. A great article if you’re still just trying to wrap your head around CSS Grid and learn best by diving through particular examples.
While the previous article started from a simple CSS grid layout and broke it down, this one builds up a CSS Grid and Flexbox based layout from the ground up, piece by piece. If your preferred way to learn is a set of code steps that you can tinker with each way along, pop open this tutorial and codepen side by side and before you know it you’ll be creating beautiful layouts with CSS Grid.
I’m a big advocate of more fully-featured UI frameworks like Foundation, Material UI, or even Bootstrap (yeah, I said it - even as a core developer on Foundation I’ll advocate for Bootstrap over nothing). But sometimes you don’t need or want something like that, but you still want a bunch of pre-created css utilities to make your prototyping faster. These things are DIRTY, but sometimes you want something super quick and dirty, and if you’re in that boat this overview of available CSS utility libraries will be right up your alley.
Smartphones have taught us to expect instant notification when something important to us happens, and increasingly applications don’t live in one environment or another, but we expect them to follow us from device to device. This is probably why web applications increasingly ask for the ability to notify us as well. The underlying technology they’re using to do this is the Web Notification API, and this quick and easy walkthrough on Hackernoon will show you how incredibly simple it is to get started using it.
This is a great article, because it not only introduces a very useful tool for anyone building a React application, but it uses it to walk through two interesting and powerful design patterns for building React components - the “Function as Child” pattern and the “Controlled Props” pattern. Even if you don’t ever use downshift (though honestly, who couldn’t use a great tool for simple, flexible, ARIA compliant typeahead/dropdown/autocomplete/etc components?), you should still read this article if you’re building any sort of state-driven components, because it will make you a better developer.
I love animation as a way to improve interaction and bring a user interface to life. The Angular Animations module, built on top of the new Web Animations API, provides a straightforward way to create and chain animations within Angular components. This excellent post by Gerard Sans on the Google Developer Experts blog not only breaks down how to use the Angular Animations library, but also gives you some insight into a few of the principles behind creating effective animations. If you’re using Angular, you should definitely check this out!
As web developers, we are used to thinking of our colors very mechanistically. We define our palettes in terms of numbers, we assign semantic meanings to those palettes, and then apply them as they fit within our layouts. Seldom do we just play with color, exploring it the way my kids explore their paints. But if you ever get the urge to just play with color, and your artboard is a web browser like mine is, you’ll get a lot out of this article. In it, Ada Rose Edwards introduces the HSL representation of color, and then walks through a number of delightful ways you can use it to play with colors and effects.
Progressive web applications (PWAs) are a hot topic these days in the web development world. If you’re not familiar with them, essentially a PWA is a web application augmented with a manifest to become “installable”, and with some additional functionality that is able to run locally on a mobile device without a web connection. These are essentially a way to “bridge the gap” even further between web applications and native mobile applications, letting you get your web app on a user’s home screen and provide an improved experience when the user has no or a slow connection. In this focused walkthrough, you’ll learn about two of the easiest pieces to tackle to start moving your responsive web application into a PWA that can be installed on a user’s mobile phone.
Writing websites and applications to be accessible for differently abled folks and non-traditional devices like screen readers is becoming more and more important. With millions of people needing some form of accessibility assistance, not to mention many government websites around the world required to be accessible, this is a key area to stay informed on. Unfortunately, the spec is rather dry and challenging to read, and as things change it’s not always obvious what you need to update. Fortunately, there are resources to help. In this detailed breakdown, Adrian Roselli takes us through all of the changes in the Web Content Accessibility Guidelines (WCAG) update released earlier this month.
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday!