Friday Frontend: Retrospectives Edition
What would the end of the year be like without retrospectives? We’ve got a few included in this week’s Friday Frontend, along with an AWESOME css-only game demo and some great tutorials. Enjoy!
KBall from ZenDev
P.S. I had a double helping of performing childcare this week while my wife was out of town. If you have kids in your life and have someone else helping to take care of them, remember to thank them. Kids are HARD WORK! Software is so much easier. :P
CSS & SCSS
A great walkthrough of the difference between SCSS variables and the new CSS variables, and how they enable vastly simplified utility classes.
You would think that something as conceptually simple as animating the border on a button would be easy to do, right? But no… it’s actually very hard to do right. This article on CSS tricks goes through the different approaches and their pros and cons.
As with any new technology, key to learning how to use CSS Grid is learning how to debug it. The Firefox Grid Inspector is the hands down best tool for doing this, and in this article on Smashing Magazine you can get a great introduction to what it enables.
The concept of cascading web design - of creating a progress enhancement of designs implemented using a combination of the standard CSS cascade and feature queries - is fascinating. It requires a totally different way of thinking about design, fluid instead of static, but I think this is the future.
I recently did a data visualization project that involved some D3… and it left me realizing how little I know relative to how powerful D3 is. This is an incredibly powerful tool, with the potential to make building complex SVG graphics as simple as basic DOM manipulation.
I wish there was more in this article that there is, but it’s a good place to start, with an overview of what a static site is and a bunch of links off to your options.. I’m a big advocate of using the minimum possible technology to solve your problem, and for many problem domains a static site is exactly the right approach. In fact, the number 1 reference in the article, Jekyll, is what I use for zendev.com
node_modules by 2 orders of magnitude. Crazy! I can’t wait to try it.
It’s crazy to think about all of the things that have happened in the last year. This is an excellent and thorough recap of the biggest trends in front-end development in 2017.