Hope you had a great week and are looking forward to a great weekend. This week’s Friday Frontend has an interesting hodge-podge of stuff… everything from super basics of CSS Syntax to fancy CSS-only sortable tables, fundamental tools enabling JavaScript (Babel) to super-niche microframeworks, and all sorts of stuff in between.

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

This is really back to the basics, but if you’re diving into CSS for the first time (or after a long time away) this may be exactly what you need. A walkthrough of exactly what syntactical pieces CSS is sensitive to and which it is not.


Variable Order

In one of the niftier applications of CSS custom properties I’ve seen so far, this blog post combines the checkbox hack, flexbox ordering, and CSS custom properties to create a pure HTML & CSS based sortable table. You can change sort order by column without using any JavaScript! I wouldn’t recommend this in production because it has negative accessibility consequences, but darn is it cool. Definitely opening my mind to new possibilities enabled by CSS custom properties.


Faux Subgrid

Subgrids are one of the most potentially powerful pieces of the CSS Grid specification, but they are not yet implemented in any browser. In this writeup, Zell walks through how we can fake out subgrids with today’s CSS, and shows a scss mixin for doing it automatically.


Revisiting Margin Collapse

Margin collapse is one of the trickier little edge cases in CSS that most of the time “just works” and occasionally will drive you completely bonkers. This is a nice, detailed article that goes into both what it is and how it works, and then a bunch of the edge cases where it doesn’t work or works differently.


CSS Keylogger

Last week we had an article talking about how there were potential security holes from CSS - here’s a working example someone put together! A keylogger built entirely using CSS. Crazy!


JavaScript

We’re nearing the 7.0 Babel release. Here’s all the cool stuff we’ve been doing.

The JavaScript language has been seeing a lot of innovation recently, with the development of core language features happening faster than ever before. It’s not an exaggeration to say this wouldn’t be possible without Babel, which allows developers to try out, play around with, and use new JavaScript language features before they have support in the browser. They’re getting close to another major release, and this is a rundown on all of the phenomenal work they’ve been doing.


Demystifying the Dependency Inversion Principle in Angular

Dependency injection is one of the techniques that sets Angular apart from most of the frameworks in the JavaScript ecosystem. It’s very powerful, but it can be daunting for developers who haven’t encountered it before and don’t come from languages where abstract interfaces are more common. This post is a short, clear walkthrough of what Dependency Inversion is and what it does for us.


Ember 3.0 Released

I don’t hear much about Ember anymore, but Yehuda Katz (one of the core contributors) is one of my development heroes, and I have a good friend who still swears by the framework, so I’m happy to see that it is ticking away. Ember’s release cycle is “backwards” from how many frameworks manage it so you won’t see big new features in a major release, but rather a cleanup of older deprecated features, but you can still read through to see what’s new.


Animated Transitions with React Router

Both a reasonable introduction to React Router and a nice overview of how to manage transitions and animations between routes with React Transition Group. Apply judiciously - too many animations can feel jarring - but when used appropriately this can make your app come alive.


Hyperapp for Redux refugees

I hadn’t heard of Hyperapp, but this is pretty cool. It’s a super-minimalistic alternate JS framework inspired by the Elm architecture. I’m not sure I’d recommend using this framework for production work - I tend to stay with mainstays and away from super niche frameworks when I have deadlines to hit & clients to please - but the tiny size and simplicity makes this a great framework for learning about what goes into a framework of this sort. The blog post linked is great, but you can also just check out the source on github - at only 1k of code, it’s very accessible to read through and see exactly how it works.


Other Awesomeness

How to Hand Code SVG

If you’ve been following the newsletter for a while, you know that I’m a big fan of SVG. The biggest reason is that SVGs are not just images, but actual code that you can understand and manipulate! If you’re relatively new to SVG code, this in-depth tutorial is just what you need - a step by step walkthrough of how to create SVG iconography directly as code, without ever stopping through a GUI editor like Sketch or Adobe Illustrator.


Front End Interview Handbook

For those preparing for job interviews, or just new to the field and trying to get a grasp of the fundamentals, this is a great resource. A list of questions, sorted between HTML, CSS, and JavaScript, with a focus on fundamentals (no framework-specific questions). You can see all the questions up front, try to answer them, and then click down to answers as needed.


Handling long titles with truncation

Including both CSS and JavaScript approaches, this article lays out all the options available to you when you want to/need to truncate long blocks of text.


AMP stories: Bringing visual storytelling to the open web

Love it or hate it, if you’re doing a lot of stuff on the mobile web AMP is important. So it’s important to know that the AMP Project just released a new variation - AMP Stories. You can now create a new type of AMP page focused on visual storytelling - think twitter moments, but this time for search results. Pretty neat!