We’re just in week 2, and the format of this newsletter is evolving each week. As I’ve dug more into all of the articles being published about the front end every week, I found it impossible to limit myself to just five good ones, so I’m updating to a Friday Fifteen! Given the many different angles to the frontend, what I’m looking at is each week having five about CSS & SCSS, five on JavaScript, and five as a mishmash of other topics and news. Let me know what you think!

Happy Friday!
KBall from ZenDev

CSS & SCSS

Sass Functions to Kick-Start Your Style Sheets

Sass has pretty much won the ‘compile-to-css’ landscape, outstripping competitors like less and stylus due to its combination of css-like syntax (easier to learn) and powerful mixins and functions. If you’re new to Sass, you may only be using a subset of it’s power and not be aware of all of the built-in functions available to you out of the box. This article by Byron Houwens on Sitepoint gives you a great primer on built-in functions available to you out of the box with Sass.


The Difference Between Explicit and Implicit Grids

CSS Grid is all the rage, and for good reason. This new layout specification for grids, baked into the browser and incredibly powerful, is set to blow away all of the float and flex-box based grid systems out there. It’s a very exciting time for front-end developers and designers, but with great power comes great complexity - there’s a LOT there to learn about. In this excellent article on CSS Tricks, Manuel Matuzovic breaks down one of the dimensions of that complexity - explicit vs implicit grids.


CSS Hex Colors Demystified

Working in the front-end, we work with colors all the time, but we don’t always think about the way those colors work, and what the various hex codes we use are actually doing. Certainly when I’m experimenting with color palettes, I end up jumping back and forth between my code editor and a color wheel or color picker, copying and pasting codes. No longer! In this delightfully nerdy deep-dive into CSS colors, Dave Gash gives us everything we need to not only understand what all of those hex codes mean, but how to tweak and manipulate them to get exactly the colors we’re looking for.


More CSS Charts, with Grid & Custom Properties

Data visualization is an exceedingly common problems, with charts and graphs useful not only for admin dashboards and analytics but also for marketing sites, news, and personal trackers of all sorts. If you’re building out a complex dashboard, you may need all the power of a charting library like ChartJS, Chartist.js or d3.js, but if you just need a couple quick graphs to show comparisons on your marketing site it’s best if you can avoid that complexity and use simple markup. In this playful and exploratory article on CSS Tricks, Miriam Suzanne shows how you can use new CSS features like CSS-Grid and CSS Variables (Custom Properties) to create charts using clean and semantic HTML and relatively simple CSS.


CSS Utility Classes and "Separation of Concerns

CSS Architecture is a challenging and controversial subject. How important are semantic classes, vs reusable component classes? What naming system is going to be right? A recent issue discussing SCSS architecture for the next major version of Foundation has over 50 comments, many of them almost pages in length and vehement in tone. As in most engineering decisions, there is no true “right answer”, just different sets of tradeoffs and constraints. In this writeup by Adam Wathan from Full Stack Radio, he does a great walkthrough of how his css approach has changed over the years and what some of those tradeoffs have been.

JavaScript

React Animations In Depth

Animations are a key component of creating a user interface that feels natural, intuitive, and easy to use. The appropriate use of animation can take a static, awkward user experience and bring it to life, but as we abstract away different elements of our interface creation into frameworks like React the mechanisms for creating those animations change. Add the complication of multiple development targets with very different capabilities between React-Native, and React-Web, and you have a recipe for confusion. In this article Nader Dabit does an excellent job of breaking down a set of animation options for React, their pros and cons, and their implications for cross-platform development.


Understanding the JavaScript For...of Loop

Iteration has always been a bit of a weak point for JavaScript, especially when iterating over anything other than a plain vanilla array. Libraries like underscore and lodash mostly solved this, but with the revitalization of the JavaScript language happening in the last few years TC39 (the technical committee focused on the ECMAscript spec that defines JavaScript) has taken the opportunity to really level up JavaScript’s ability to handle iteration. In this tutorial, Orinami Olatunji walks us through the for...of loop style introduced in ES6 to allow straightforward looping through any iterable data structure.


Using ES2017 Async Functions

Another exciting new JavaScript feature, this one just finalized into the ES2017 spec in June, is a new mechanism for writing asynchronous functions in JavaScript. If you’ve ever struggled with deep callback chains, or even spent a ton of time writing promise-based code and wondered if there was a more intuitive way to do error handling, this is the feature you’ve been waiting for. Available today in most browsers, and definitely for those using Babel, the new async/await functionality takes JavaScript’s asynchronous programming model to the next level! Learn all about it in this short and powerful walkthrough by Eric Windmill on CSS Tricks.


Avoiding common confusions with modules in Angular

Managing modules in Angular has it’s own special quirks that are often confusing. Hierarchies don’t play out as you might intuitively think, and there’s this distinction between lazy and eager modules… JavaScript already has a ton of different module dependency approaches, why does Angular need to create it’s own? The answer lies in the dependency injection architecture that is one of the core architectural distinctions of Angular, but doesn’t fit cleanly into any of the other module dependency frameworks. It results in semantics that are just different enough to be massively confusing, but in this article by Maxim Koretsky, editor of Angular In Depth, you can get a great overview of common confusion points and start to make sense of it all.


All About React Router 4

I have to admit, coming from a more traditional routing background, both from Rails and Node on the server and Backbone followed by Angular on the front-end, React Router’s markup based approach threw me for a loop at first. Especially with version 4, which layers in the ability to define routes at any level of nesting in your markup. But after a little digging in, I’ve just been blown away by the ease and power of this solution. You can learn all about it in this excellent and comprehensive article by Brad Westfall on CSS Tricks.


Assorted Other Front-End

SVG can do THAT?!

If you’ve been following me at all through my time at Foundation, you’ll know that I think SVGs are the future, and dramatically underutilized. These vector graphics are not only perfectly scalable and responsive, but also allow powerful animation techniques and amazing text effects. In this interactive and compelling slideshow, the one and only Sarah Drasner - developer advocate at Microsoft and one of the top SVG experts out there - runs us through all of the amazing capabilities available to us with SVG.


Bootstrap 4 Beta

After two years of work, the gorilla in the front-end framework jungle has finally gotten to beta for version 4. In their own words, this means the bootstrap team is “done breaking all your stuff until our next major version (v5)”. While there are certainly more advanced frameworks out there *cough cough* there is no denying that Bootstrap is the most widespread front-end framework by a large margin, so this is a huge milestone and liable to shake up the landscape. Check out the post to learn all about what’s gone into the latest and greatest version of Bootstrap.


Accessibility Testing with pa11y

Accessibility is a hugely important part of modern web design and development, but still often feels like a black art with a few wizards who know what they’re doing while the rest of us blunder forward. That said, there is rapid innovation and improvement in this domain, and part of that is the development of a robust set of tooling to help guide us in making our web sites accessible. This article by Ire Aderinokun walks us through a new accessibility testing toolkit, pa11y. If you’re designing or developing accessible websites, this toolkit is a must, and Ire gets you going on how to use it!


How to Get Started With restdb.io and Create a Simple CMS

Ever have an idea for an amazing site or web application, start rocking out the front-end, and then grind to a halt as you realize that you’re going to need a backend, deal with operational details like getting a database set up, and all of that soul-crushing work that goes along with it? Then you are exactly the type of person for which services like restdb.io were designed. They provide a no-nonsense hosted nosql database system that is easy to set up and will even let you host and serve content straight from the database. In this great walkthrough you get everything you need to get started building database driven sites and applications without having to touch any of the backend yourself.


Migrating complex JavaScript applications

While on a JavaScript blog and nominally about JavaScript, this post more about the process and lessons learned during a large migration than anything particularly JavaScript. That said, this is a challenge many of us are facing in the rapidly evolving ecosystem that is JavaScript frameworks today - as these frameworks evolve and older frameworks become deprecated and stop receiving performance and security updates, how do we migrate our applications to new frameworks without eating up all of our resources or completely stopping the business while we do so?

Happy Friday!