Happy December! Month of elves, family, presents, nonstop department store music, and seasonal depression. Hopefully more of the first three and less of the last two, but in my experience you tend to get them all.

This week’s Friday Frontend has an extra helping of beautiful CSS. I’ve seen a lot of CSS, so it isn’t often that someone blows me away, but the article on building wireframes on top of existing sites with CSS just knocked me over, and the codepen animation examples is simply gorgeous.

Of course we have some great content for JavaScripters as well, with both an incredibly comprehensive comparison of JavaScript frameworks and a phenomenal resource for folks who just want to use plain old vanilla JS. Enjoy!

Happy Friday!
KBall from ZenDev

CSS & SCSS

Learn CSS Grid in 5 Minutes

Simple, to the point, and gets you from nothing about CSS grid to understanding the basics of templated columns and rows. I know I harp on this a lot, but if you’re still struggling with using CSS grid, maybe check this out.


Generating Wireframe Boxes with CSS and HTML5

Wow. As someone who frequently advocates using HTML & CSS for wireframing, you wouldn’t think this would impress me as much as it did, but boy did it. This shows how you can take an existing page and add literal wireframe boxes with labels etc on them using CSS. So cool!


The Art of Solving Problems with CSS

This post does something that I don’t see enough of - walk through not only how CSS works, but the thought process involved in translating from a design to the CSS that implements it. Highly highly recommend.


How To Animate Using CSS

Great walkthrough of how to set up keyframe animations using CSS. As excited as I am about the new web animations API, keyframe animations are still the core of most of the animating I end up doing.


Codepen: CSS Only Checkbox Animation

I typically link more to articles than pure examples, but this was too cool not to share. After reading the above article on animation, check out this example of a wicked-cool checkbox animation built with SVG and CSS.


JavaScript

Plainjs.com: Vanilla JavaScript for building powerful web applications

This is a really powerful resource for those who are doing a fair amount of JavaScript who want to ditch jQuery but don’t want the complexity that sometimes comes with adopting a large framework. Tons of example functions and plugins built with vanilla JavaScript.


Redux: A Practical Tutorial

Redux-like architectures are a key advance in the evolution of Front-end web development. You can see them springing up everywhere, starting with flux, moving on to redux, VueX in Vue, the Elm architecture in Elm. This tutorial is good because it not only gives you the key concepts, but actual code to get you up and running in seconds. Plus it uses JavaScript testing! Double win!


Dynamic import()

The ability to import modules based on logic at runtime rather than statically is HUGE. It not only lets you defer expensive code loads that are not commonly needed, but has been key for me recently when including some “client side only” code into an app that does both server-side and client-side rendering.


11 React Component Libraries You Should Know In 2018

Given all my work on ZURB Foundation, it’s probably not surprising to hear I’m a big advocate of component libraries. Here’s a great list of available component libraries for those of you working in React.


Web Frameworks: Conclusions

The most thorough comparison of current JavaScript frameworks that I’ve seen in a long time, covering not only the “big 4” that I track - Angular/React/Vue/Ember, but a number of others that I’m less familiar with. They also do a great job of breaking down strengths and weaknesses in ways that are on point for the frameworks I know, leading me to trust them for the ones I don’t.


Other Awesomeness

New in Firefox 58: Developer Edition

I’m not ashamed to say I might be turning into a Mozilla fanboy. It’s not a secret that tooling for front-end web developers has lagged behind server-side tooling, but the arms race between Chrome and Firefox on developer tools promises to change that. So much good stuff!


The 2 types of software engineering interviews and how to prepare for them

I hadn’t seen it broken down this way before, but this definitely matches what I’ve seen. A great breakdown of 2 fundamentally different approaches to technical interviews, and how to go about preparing for them.


The web is ready for great graphic design

A strong argument that with the rise of CSS Grid, we will be able to shed a number of current “defensive” design approaches and bring truly great graphic design to far more of the web.


Hacking the Visual Norm

Data visualization is hard, but the capabilities and tools we have available to us now to create stunningly awesome data visualizations are just mind-blowing. Check out this great talk & related slides on creating some visually stunning data visualizations.


Common Security Issues in Web Applications. Part 1

The beautiful and terrifying thing about building an application for the web is that it’s “out there” in the world where anyone can get to it. Terrifying, because that also means anyone can try to hack it. Learning some common ways that applications can be hacked and how to avoid them is therefor KEY. This article does a nice job of letting you know about some of the most common without getting too hairy or overwhelming.