Smashing Newsletter: Issue #195

Editorial

As we head into the final month of 2017, things aren’t slowing down here at Smashing! The line-ups are taking shape for our Smashing Conferences in 2018, and we would love to see some of you at those events. However we know that not everyone can get to a conference, and we hope that Smashing TV can help to fill that gap.

We’ll be bringing you sessions with real experts, people with practical experience who love to share what they have learned. Not only will you get to enjoy a live presentation, but we’ve reserved 30 minutes for a Q&A. You can ask direct question to the speaker, find out about their workflow and their tips and tricks. Next up is Dan Mall, with a subject of Table setting guides for great design.

“Designing at your desk with Photoshop or HTML and CSS is easy, but getting your bosses and clients’ approval is often quite a feat. In this webinar, Dan will share some stories of tools, methodologies, and non-traditional deliverables that can help you get the buy-in you need!”

The webinar is free for all Smashing Members → (Signing up only takes 30 seconds.)

I hope to see you online soon!
— Rachel Andrew, Editor-in-Chief (@rachelandrew)

Meet Bankai, The Friendly Web Compiler
Syntaxes For Using Element Queries Already Today
Lona, A Tool For Streamlining Design Systems
Performance At The Financial Times
Scrollytelling Without The Scroll Jank
Empty States That Are Anything But Boring
Welcome To Infinitown

1. Meet Bankai, The Friendly Web Compiler

Building things for the web shouldn’t be hard no matter the vast possibilities the web has to offer. That’s what the creative minds behind the friendly web compiler Bankai thought, too. They wanted to have a tool that makes it easy to build for the web, a tool that evolves as the web evolves and that is able to apply the latest optimizations to your projects, all without you needing to be an expert to get things right.

On the outside, Bankai looks quite plain, but don’t let that fool you! The web compiler is a powerful little fellow; with only three commands, you can make it perform three different tasks. One command will start an application development server and detect, compile, and serve all of your application’s files — using HTTP/2. Once things are up and running, the second command will optimize your application, taking into account more than 30 little optimization finesses from flattening bundles to removing unused CSS code and inlining critical CSS and preloading the rest. Finally, Bankai takes care of writing to disk, too. It’s wrth taking a closer look at. (cm)

2. Syntaxes For Using Element Queries Already Today

Media queries helped make websites responsive. Now, element queries give you even more control over your responsive layouts by applying responsive conditions to elements on the page (like the number of children or text characters, for example) instead of only the width and height of the browser. However, as the specification is still work-in-progress, we need to find workarounds to make use of its power already today.

And, well, in fact, there are already quite a lot of different syntaxes that help express element queries in CSS. Tommy Hodgins recently collected demos of some of them in a tweet. Solutions include QSS, CSS Plus Selectory, reproCSS, EQCSS, and container queries using JS-in-CSS. Interesting demos to tinker with and dive deeper into the topic. (cm)

3. Lona, A Tool For Streamlining Design Systems

Are we bridging the gap between mock-up and prototype? Lona has the makings to do so. Created by the Airbnb team, the tool makes it easy to define design systems and use them to generate cross-platform UI code, Sketch files, images, and other artifacts. But be careful: Lona is still a highly experimental prototype.

The idea behind Lona is to provide a graphical interface for working with the JSON files that define a design system. It’s useful for building components and quickly mocking up new screens from existing components, for experimenting with designs across multiple screen sizes, and for viewing them with real data from JSON files or APIs, for example. Lona doesn’t attempt to replace the design tools you’re already using, but rather helps stress-test your designs and accurately translate them into UI code. A promising solution that’s worth keeping an eye on. (cm)

4. Performance At The Financial Times

It’s always interesting to sneak a peek at how successful websites tackle the challenges the web is bringing along. Samuel Parkinson, Senior Engineer at the Financial Times, now grants a look behind the scenes of what happens when you visit ft.com.

The article gives a detailed overview of the Financial Times stack, starting with their domain name system and diving all the way down to their Heroku applications. How does the Financial Times handle traffic? What do their caching headers look like? And what other finesses do they have in place to cater for a snappy experience? An insightful performance case-study. (cm)

5. Scrollytelling Without The Scroll Jank

Scrollytelling is popular. But, if you ever built a scroll-driven interaction, you know that they aren’t that easy to implement and quite difficult to make performant, too. A small, vanilla JavaScript library promises to change that: Scrollama.js.

One of the major issues with scrollytelling is that scroll events usually cause a sluggish experience. That’s why, to remove any scroll jank and cater for a much smoother user experience, Scrollama relies on IntersectionObserver instead. It also offers optional methods to implement the common scroll pattern where a graphic scrolls into view, becomes “stuck” for a duration of steps, then exits and moves further. To cover browsers that don’t support InteractionObserver yet, Scrollama comes polyfilled. Want to give it a try? A step-by-step guide helps you put together your own scrollytelling story. (cm)

6. Empty States That Are Anything But Boring

How do you design something, well, when there’s actually nothing to design? We’re talking about empty states. And as unexciting as an empty notification center, an empty to-do list or an empty profile might be, designers get really creative when it comes to breathing a bit of life into these blank screens, as the collection over on Empty States shows.

Be it a wise quote, a witty illustration or an on-point call-to-action — the limit to add a bit of delight to a plain empty state is your imagination. A great way to add some personality to your website or app — without a lot of effort. (cm)

7. Welcome To Infinitown

Imagine a little town with perfectly square city blocks, a park, a coffee shop, a factory, a gas station and cute little homes. Cars and trucks are driving through the streets, but as you navigate through the town, you realize that there’s a twist: no matter where you go, you’ll never reach the town limit. You’re in Infinitown.

Infinitown is a WebGL experiment made by the folks at digital studio Little Workshop. It’s an attempt to create a city that is alive and fun to watch — and, well, it is indeed. The secret behind the illusion of an endless cityscape: They generated a finite grid of random city blocks, then the viewpoint wraps around this grid, and — ta-daaa — welcome to Infinitown. Made with Three.js, Blender, and Unity. Nice! (cm)

December 5, 2017 Smashing Newsletter: Issue #195

Previous Issues