Dear Friend,
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)
Table of Contents
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)
Our sponsor: WebAssembly Working Group Leaders Tackle Your Questions Live-On-Air
There's a lot of hype going on about WebAssembly, the portable, size- and loading-time efficient format that is about to revolutionize web development. And, well, now's your chance to get your burning WebAssembly questions answered, from the Working Group leaders themselves.
On December 14th (10 AM, PT), Catchpoint, W3C and O'Reilly invite you to a free ask-me-anything WebAssembly video panel with Working Group Chair Bradley Nelson, Software Engineer Luke Wagner, and Working Group member Eric Prud'hommeaux. To see the panelists tackle your questions live during the event, just enter them online. Register now.
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)
Our sponsor: Online Masters in Information Design and Strategy
Learn to drive effective digital communication.
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)
8. Upcoming Smashing Conferences
It's time we test out something new at SmashingConf. New formats, new lightning talks, evening sessions and genuine, interesting conversations. Our next new adventure: SmashingConf London / #perfmatters.
SmashingConf London / #perfmatters (Feb 7-8)
SmashingConf San Francisco / #breakingthebox
(Apr 17-18)
We love bringing people together, and creating a friendly atmosphere for everybody to share and learn. No fluff, no theory — just actionable insights applicable to your work right away.
The conference will cover the ultimate CSS layout techniques, performance optimization, UX, strategies and design workflows, tips on establishing and maintaining design systems, and techniques to produce resilient, fast responsive websites. Get the early birds →
9. New On Smashing Job Board
Here are some of the most recent job openings at Smashing Jobs:
- Middleweight Web Developer at Farrows (Norwich, UK)
"We're seeking an energetic, ambitious and talented individual to join our digital team as a full-time Web Developer. We want someone who loves a challenge, is keen to make a difference, loves good design and has the skills to deliver." - Associate Creative Director at uShip (Austin, TX)
"An ideal candidate has experience launching successful projects with cutting-edge visual and interaction designs. This individual will provide strategic direction on new features as well as ongoing enhancements." - Logo and Corporate Identity Design at Designagentur Marne GbR (Freelance, Anywhere)
"You have a passion for designing logos and giving companies a new identity for a fresh start? Your tools are Adobe Illustrator and/or Sketch? We might have a job for you."
10. Our Most Popular Articles Last Month
- Using CSS Grid: Supporting Browsers Without Grid
When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement. - A Comprehensive Guide To Web Design
Web design is tricky. Designers and developers have to take a lot of things into account when designing a website, from visual appearance to functional design. To simplify the task, we've prepared this guide. - Mobile Interface Myths You Should Throw Out The Window
Let's take some time to cover five mobile interface myths you've probably been sold on (and why that might be a bad thing).
11. Most Recent Articles On Smashing
- Welcome To The Next Level Of Mobile App Development
Building a mobile app usually costs a lot of money and takes months to launch. Nick Babich explains how you can use Dropsource (a free visual platform for building mobile apps) to make the process faster and simpler. - Debugging CSS Grid Layouts With Firefox Grid Inspector
Chen Hui Jing covers known and obscure features of Firefox DevTools that can come in handy when you're building and debugging shiny new CSS Grid layouts. - Customizing Admin Columns In WordPress
WordPress' admin area does not show you much about your pages, posts, users and comments. David Mosterd and Jesper van Engelen demonstrate some simple custom solutions and a ready-to-deploy plugin to overcome this problem.
The authors are: Cosima Mielke (cm), Iris Ljeลกnjanin (il), Vitaly Friedman (vf), Markus Seyfferth (ms), Christiane Rosenberger (research), Elja Friedman (tools).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
No comments:
Post a Comment