This week’s Friday Frontend got me super excited. Not only are there some great beginner articles in it with tutorials and guided exercises, but some amazing deep dives into topics near and dear to my heart like SCSS architecture and functional JavaScript. I hope you enjoy these as much as I did! And if there are any of these that don’t make sense to you, or that you want to learn more about, shoot me a quick note and I’ll be sure to answer your questions, find more resources, or write up some posts myself if the resources don’t exist.

Happy Friday!
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

Here's a Super Quick Way to Try out CSS Grid

I keep getting more excited about CSS Grid, as the number of browsers supporting it keep ticking higher and higher (up to 80% in the US with prefixes!). If you haven’t learned how to use CSS Grid yet, now is the time! This post by Jen Simmons contains not only a super simple, minimal introduction to using grid, but a series of guided exercises in the form of codepens that you can use to teach yourself grid in no time.


Tutorial: Three Awesome CSS Hover Transitions & Animations for Beginners

It’s amazing what a few simple transitions can do to improve the feel of your website. It doesn’t take much to go from something that feels dry and static to something that feels much more organic and interactive. For those just getting started with CSS animations, this straightforward tutorial by Brandon Morelli gives you quick 1-2-3 set of tools to put into your toolchest for adding that basic interactivity and making your website come alive.


How to Create Beautiful HTML & CSS Presentations with WebSlides

Ever wish you could use your HTML and CSS skills to prepare presentations, rather than being stuck fidgeting with keynote or powerpoint for hours on end? The WebSlides library makes it incredibly easy to do so, and in this straightforward sitepoint walkthrough Ivaylo Gerchev gives you everything you need to create beautiful, simple html + css based slides in no time flat.


CSS Architecture and the Three Pillars of Maintainable CSS

CSS often gets a bad rap from software engineers, but is a highly complex and powerful descriptive language with its own set of best practices largely analogous to other programming environments. Good CSS Architecture is more than just naming conventions like BEM, but requires many other standard software engineering practices like separating concerns, carefully structuring hierarchies and composition, and managing the right levels of abstraction. In this high level walkthrough on Sitepoint, Zsolt Nagy walks through the architectural pillars of a maintainable CSS and an example of how familiar software engineering principles like inheritance vs composition play out in a CSS environment.


Draw a horizontal tree using CSS pseudo elements

Pseudo elements in CSS are incredibly powerful, and often underutilized by developers who are new to CSS. While the English in this post by Gaurav Sehrawat can be a little hard to follow, the subject of the tutorial and the resulting demo are a wonderful exposure to the types of things you can do with a thoughtful use of pseudo elements. As you grow in your front-end skills, mastering pseudo elements will allow you to create far more detailed and beautiful components with less markup.


JavaScript

Understanding Scope in JavaScript

The more you grow as a JavaScript developer, the more important it is to understand the nuances of the language and how different parts of it work. Scope is one of those key components, and this article is a great introduction to it. Read this to understand what the different types of scope are in JavaScript, what variables are available where, how to hide/create “private” variables, and what the scope implications of the new ES6 let and const keywords are.


Higher Order Functions: Using Filter, Map and Reduce for More Maintainable Code

Higher order functions are a concept from functional programming - essentially, these are functions that accept functions as arguments. I would say that learning to utilize functional programming concepts like filter, map, and reduce has done more to improve my development skills than any other single concept. If you’re not already using them, you absolutely should be digging into this quick walkthrough by Guido Schmitz on Freecodecamp’s blog. And if this stuff doesn’t make sense to you, hit me up with questions and I’ll help out - like I said, there’s probably no more valuable single concept to wrap your head around as a developer.


How to create a Neural Network in JavaScript in only 30 lines of code

Deep learning is all the rage in the artificial intelligence community, with all sorts of increasingly complex tooling enabling more and more breakthroughs in machine-learning based pattern recognition, but you don’t need to dig deep into Tensorflow to get started with machine-learning software. Deep learning is built on top of neural networks, and Synaptic.js is a straightforward neural networking library written in JavaScript for use in either node.js or the browser. In this succinct and accessible walkthrough, Per Harald Borgen will teach you the basics of building and training a neural network in just 30 lines of JavaScript.


All the fundamental React.js concepts, jammed into this single Medium article

When it comes to learning, I’m a big advocate in starting with a “frame” or “big picture” for any topic area. If you dive into the details without any sort of high level context, the details quickly become overwhelming and it’s hard to see how they interact. Add a high level understanding of the systems at play, and suddenly all of those details make sense because you know where to put them and how they relate. This post gives you that high level frame for React. Whether you’re brand new to React or an experienced hand, the 10 fundamentals of React laid out by Samer Buna will make sure that you have the context you need to put every detail in place and become a React expert.


Migrating A VueJS App To Vuex

I haven’t spent too much time doing VueJS development, but I know that I’d hate to build a React application without a state management library like Redux. Having a simple, easy to manage, centralized mechanism for managing application state is key to building any sort of complex state-driven application. Vuex is like Redux, for VueJS. If you’re building out applications with Vue and you’re not using a state management library, you’re almost certainly doing more work than you need to, and if you’re thinking to migrate to Vuex you should definitely check out this walkthrough by Anthony Gore on vuejsdevelopers.com.


Assorted Other

Increase your web development skill-set: 150 animated tips on Chrome DevTools

I love the Chrome devtools. I don’t think it’s hyperbolic to say that Chrome devtools have been responsible for some of the biggest improvements in front-end development ease and speed. The combination of power and performance has really raised the bar in browser tooling, but there’s so much there that I know I’ve only just scratched the surface of what’s possible. That’s where this post comes in - Umar Hansa publishes a weekly dev tools tip, packaged up as a bite-sized animated gif, and in this post he’s not only wrapped up some of the best but also links to the whole 150+ tip archive. Definitely check it out!


A Gulp Workflow for Frontend Development Automation

Modern front-end development has a LOT of tooling involved. Babel, webpack, grunt, gulp, broccoli… you’d be excused if you found this alphabet soup of possible tools overwhelming. This isn’t to say they aren’t useful - they are, these tools have drastically improved our ability to create powerful, complex, and performant front-ends. But it’s a lot to take in. Gulp is one of my favorites - we’ve been using gulp for our workflows in Foundation since Foundation 6 launched, and I’ve been using it even longer to build workflows in a simple “configuration as code” manner. This extremely detailed blog post by Andrew Welch at Studio 107 starts from an explanation of what gulp is and why we use it, and continues with an element by element breakdown of the battle-tested gulpfile they use for their own site.


Inside a super fast CSS engine: Quantum CSS

Do you ever wonder how in the world browsers actually translate your HTML and CSS into the interface that shows up on your screen? Like so much of programming when you dig down through the layers underneath the abstraction it is complex, beautiful, and really quite a miracle that it works at all, but at every single layer makes sense. In this article by Lin Clark you get a deep dive into the new, amazing CSS engine that just got added to Firefox nightly. Drawing code from the experimental rust-based Servo browser and inspiration from both the old Firefox Engine, and Webkit (chrome and safari), the new Quantum CSS engine is literally the most advanced CSS engine in the world, and Lin breaks it down for you into understandable, bite-sized chunks.


Web fonts: when you need them, when you don’t

One of the great improvements in web user interfaces in the last few years has been the proliferation and increased ease of use of web fonts. Controlling font dramatically improves our ability to brand and control information architecture on our web sites and applications. However, with that ease and power comes a problem - there is such a thing as too much of a good thing, and folks are now defaulting to web fonts even in cases where they actually impair the final output. In this excellent article on Hackernoon, David Gilbertson walks us through the decision process of when to use webfonts and not, including the pros and cons and even digging into the nuts and bolts of how to make your webfonts work better if you do decide to use them.


Run multiple versions of Chrome side-by-side

This post doesn’t have too awful much more to say than you could get by reading the title, but boy is this a big deal for those of us doing web development. Chrome now supports running multiple versions of chrome at the same time, at least on Windows, Android and Linux, with hopefully OS X not far behind. This is huge! It means you can have your stable build for personal use installed and running at exactly the same time as your beta or dev install for testing cutting edge improvements. Awesome!


Happy Friday!