This week’s edition of the newsletter has some super cool CSS effects, a nice balance of JavaScript fundamentals to fancy frameworks, and a great introduction to git (yeah I know it’s not purely topical, but it is a key fundamental skill) for those still working on mastering source control.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

CSS Grid for UI Layouts

Great article on the Mozilla hacks blog showing some of the exact UI layout problems that CSS Grid solves, and how you can use it to do so.


Modern CSS Explained For Dinosaurs

The evolution of CSS and CSS best practices. A great way to start to understand how we got to where we are today, along with brief points on what some of the best practices of today are. If you’re relatively new to the web and have always been able to use modern CSS, this will be eye opening!


Everything you need to know about CSS Variables

An in-depth guide to the newest non-grid CSS superpower: CSS custom properties, AKA CSS Variables. Now supported in essentially every browser but IE and Opera Mini, these are completely changing what we can do with CSS. Time to learn them.


Direction Aware Hover Effects

Lots of takes on a super cool effect - hover effects that vary based on which direction your mouse entered. Several of them use some JavaScript in the detection, but there’s some wicked cool pure css variations as well.


Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

Another one that’s pretty much pure fun - using all sorts of fancy not-yet-fully-supported CSS properties to create a doughnut chart tied into a range input using almost purely CSS. Sure, we could probably do the same thing with D3 and SVGs, but this is so much cooler!


JavaScript

Private Variables in JavaScript

One of the interesting oddities of the JavaScript language is that while it supports objects and classes, it has no true concept of private variables. Developers have created many ways to work around this limitation; this post digs through quite a few of them with their pros and cons. Useful material, but also just a fun set of examples of different JavaScript functionality for those working on mastering the language.


An Overview of JavaScript Testing in 2018

A great, extensive article covering best practices, terms, tools, approaches, and essentially everything you might possibly need to know about how folks are testing JavaScript today. Too long for most folks to read in 1 go, but a heckuva resource to dig through at leisure.


Replacing jQuery With Vue.js: No Build Step Necessary

Vue.js has all of the power and ability to create complex single page applications that similar frameworks like Angular and React do, but one of the beautiful things about it is that it is so simple and lightweight that we can also use it as a more elegant replacement to tools like jQuery for small, contained pieces of interactivity in our page.


Developing Games with React, Redux, and SVG - Part 2

We featured Part 1 of this awesome series last week, with part 2 and part 3 being published this week. Learn how to create interactive vector games by using React to create and manipulate SVGs. Doesn’t get any more cool than this!


Vue on 2018 — Interview with Evan You, author of the Vue.js framework

Learn a little bit of the story behind how Vue came to be, as well as the creator’s insights on the sources of the framework’s success and where it is going in the future.


Other Awesomeness

GIT Good: A Practical Introduction to GIT and GitHub (Hello GitHub)

Understanding source control (and these days that almost always means git) is one of the most important things for a developer in today’s world, and it it is rarely covered in courses. I often recommend the git book to folks, but if you’re looking for a more bite-sized introduction this article and its sequel are a good place to start.


Popular HTTP Headers for Enhancing Performance

Okay, so it’s a bit away from the front-end, but performance is key for user experience, and there’s some pretty cool quick wins in here. If you’re doing any sort of management of your own hosting, definitely check this out.


Barrier Grid Animation: Illusions on the Web Part 2

Took me a while to understand what exactly he was doing, but this article by Dan Wilson is super cool - it’s a retro approach to animation inspired by flip-book and related physical animations. Probably more fun than useful, but you never know when you’ll want to recreate an effect like this.


CSS Code Can Be Abused to Collect Sensitive User Data

We’ve had some recent big news reminders about being careful with 3rd party JavaScript as hackers were able to insert bitcoin mining scripts on major government sites, but did you know that you need to be super careful with 3rd party CSS as well? Check out these crazy security holes!