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 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.
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.
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 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.
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.
const keywords are.
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.
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.
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.
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!
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.
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.
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.
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!
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!