Friday Frontend: February 23 Edition
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.
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.
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!
We’re nearing the 7.0 Babel release. Here’s all the cool stuff we’ve been doing.
Demystifying the Dependency Inversion Principle in Angular
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.
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
Handling long titles with truncation
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!