Welcome to the last Friday Frontend of 2018!

I’ll be taking a 2 week hiatus for the holidays, and then will be back to our regularly scheduled newsletter on Friday, January 11th. I hope you too get a chance to take a break this holiday season, or at least a day here and there to reflect on the year that has been and the year to come.

Down below we’ve got an interesting and eclectic set of articles, ranging from philosophical arguments on best practices in CSS to a cool background-removing image tool, stopping off to talk about XSS. There’s also a number of more straightforward tutorials to keep upping your game. Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

Keep Math in the CSS

An argument that we should keep even pre-calculatable math in our CSS, rather than running the calculations and only including the final work. I definitely agree with this - reminds me of the statement that code is written once but read dozens of time. This is leaving notes to your future self (or anyone else in your codebase).


When do the :hover, :focus, and :active pseudo-classes apply?

Very nice breakdown of the lifecycle of these different pseudo-classes, and how that changes when we take mobile devices into account.


The visibility property isn’t just about visibility

A look into all the nuances of the visibility property and how it impacts accessibility.


Researching a Property in the CSS Specifications

In the ‘teaching a man to fish’ category, this article breaks down how the CSS specifications are organized and how you can go about using them to learn about CSS. If you’re trying to do something with CSS and can’t find a good tutorial or article on it, the specifications are the canonical source. Knowing how to research what you need will go a long way.


New CSS Logical Properties!

This is really interesting… more recent CSS specifications like flexbox have gone away from the old-web tendency to use physical directions like ‘left’, ‘right’, ‘top’, and ‘bottom’ in favor of logical directions like ‘start’ and ‘end’. This has made it far easier to manage a single set of CSS for multiple languages with different natural directions, making the web less english-centric. Now there are proposals (and implementations!) to extend this concept back to older properties like margins, paddings, float, and more. There are still challenges, but this is a very interesting direction.


JavaScript

Advanced JavaScript Injections

Wow. I don’t normally include security stuff in here, but this caught my attention and seriously blew my mind as I went through it. A dive into the thinking behind XSS and how any direct translation of URL components into JavaScript code can open the doors to a clever hacker.


Tech Trends Showdown🏆: React vs Angular vs Vue

I’ve spent a lot of time in the last few weeks thinking about, researching, and discussing the strengths and weaknesses of different surveys. My number 1 conclusion? They all have biases, and it’s important to look at a range of sources when drawing your conclusions. This take shows pretty different answers to the recently debated State of JavaScript survey - in particular Angular shows up way higher and Vue a fair amount lower - but is definitely worth adding to your dataset if you’re considering which framework to invest and learn in.


JavaScript and Civil Rights

A look at the factors to consider as JavaScript developers when it comes to things like civil rights. One commonly discussed area is accessibility - enabling users who are disabled to still be able to use our web sites and applications. Other areas covered in here are things like right to privacy and the importance of protecting users from 3rd party code. Definitely a set of items worth having in mind as we do our work.


Why I no longer use D3.js

D3 used to be the standard for creating custom data visualizations. It enabled power, data-driven and reactive animations in the time of jQuery and Backbone when creating ‘reactive’ front-ends was an extreme challenge. But as this article highlights - tools change, and in these days with the ability to control SVGs using powerful reactive frameworks like React and Vue, it may well be worth rethinking what tooling we should use for our dataviz.


Other Awesome

Remove.bg

A hosted tool that automatically identifies the background in photos and removes it, leaving you with bare images with transparent backgrounds. Seems to only work reliably with pictures of people, but still very very cool!


Calling all web developers: here’s why you should be using Firefox

With last week’s news about Edge going to a Chromium base, there have been all sorts of “negative’ takes on why we need to use Firefox to help support diversity in browser engines and prevent a monopoly, but this is a great positive piece on the benefits of switching to Firefox.


Static vs. Server Rendering

JavaScript developers, and particularly front-end developers, used to have it easy when it came to execution options. Your code was going to run in the browser, no ifs and or buts. That story has gotten much more complicated - with the latest trend towards using Server Side Rendering (SSR) with frameworks like React, Vue, and Angular, and additionally to full-on static site generation with tools like Gatsby, it’s worth stepping back and understanding the differences and what your options are.


2019 UI and UX Design Trends

Very design focused, but worth a readthrough, especially if you’re working in close coordination with designers, to understand the trends that then come trickling down to us in front-end implementation.


CSS & JavaScript Snippets for Creating Infographics

Pretty specific, but there is a trend towards making infographics interactive using HTML, CSS, and JavaScript rather than fixed in an image. If you’re having to do this, you may find these snippets of use - each one in its own codepen for easy access and tinkering.