Friday Frontend Five Becomes Friday Frontend Fifteen!
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.
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.
for...of loop style introduced in ES6 to allow straightforward looping through any iterable data structure.
Using ES2017 Async Functions
Avoiding common confusions with modules in Angular
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.