Smashing Newsletter: Issue #194

Editorial

After two (long) years of hard work on the big bang relaunch, we relaunched our little website a few days ago. New design and new technical stack. New personality and new ambitious goals. But most importantly, a new focus on our wonderful web community.

We’ve been cooking something new, and we can’t wait to give you a taste of what we have in mind!

In times when we fight all the craziness and narrow-mindedness around us, we need to remind ourselves how wonderful a vast majority of the web community actually is. There are thousands of active, hard-working folks who contribute to open-source projects, who share, blog, speak, teach and learn from each other.

Unfortunately, these people usually remain unnoticed, sometimes making huge contributions in their little spare time, and as time passes by, too often so does their motivation.

With the Smashing Membership, we want to reward and highlight these people, and support their contributions. Meet a friendly community with books, webinars, discounts, print magazine, Smashing TV and 68 enchanting cats. That’s the place we call home. We’d love you to join the Smashing family, too.

As things usually are with a relaunch, please be patient: not everything on the new site might work as expected, and we still have issues to fix. If you find an error, please report a bug, or help us squash it, the smashing way.

So long, and good luck finding all those 68 hidden cats!
Vitaly and the Smashing Family

Explore The World Of 3D
Upscaling And Enhancing Images With Neural Networks
Keyboard Shortcuts For Designers
A Checklist To Make Your Website Inclusive
Inspiring Examples Of UX
Size-Changing Toggles With Flexbox
A Chatbot To Fight Email Scammers
We’ve Got A Password Problem

1. Explore The World Of 3D

Virtual and augmented reality frees digital content from the flat screen and puts it into a three-dimensional world. But a world that can be explored from all angles also requires every object in it to be fully turnable, zoomable and explorable, too. That’s why Google recently released Poly, a cross-platform library that gives creators and developers a place to discover and download 3D objects and scenes.

No matter if it’s a robot, a dinosaur or an ice cream cone, Poly features thousands of free 3D models that you can use in your AR or VR apps. But not only that, many of them can also be remixed and customized to your liking — just import a remixable object with Tilt Brush or Blocks, make your edits, and Poly will automatically credit and link to the original when you publish your remix. The 3D objects work in the browser, too, of course, and if you want, you can even export your favorites as GIFs. Happy exploring! (cm)

2. Upscaling And Enhancing Images With Neural Networks

We can optimize images to reduce their weight without compromising quality. But how should we go about images that are of a rather low quality right from the beginning? Images that could need a little brush-up to make them shine even on high-resolution screens? Machine-learning is there to help, as a small but mighty tool called Let’s Enhance proves.

Whether it’s an old family photo that’s missing a detail or an image you want to scale up, Let’s Enhance uses state-of-the-art neural networks to fix your images. It can boost resolution by four times while keeping edges and features sharp and crisp, and if details are missing, the neural network hallucinates them to make the image look natural. The tool is free to use. To access your results, you’ll need to create an account, though. (cm)

3. Keyboard Shortcuts For Designers

The right shortcut at the right time can make a designer’s workflow so much more efficient. To have your favorite timesavers always at hand — and maybe even learn a few new ones, too — be sure to check out the shortcut collection which Michael van Heest put together especially for designers.

The keyboard shortcuts cover design tools like Sketch, Principle, InVision, Figma, and, of course, the Adobe suite. Sublime Text, WordPress and macOS are featured, too. Also, did you know that you can define your own shortcuts if they don’t already exist? Just head on over to System Preferences → Shortcuts → App Shortcuts, and simply add your shortcut. Nifty! (cm)

4. A Checklist To Make Your Website Inclusive

A lot of aspects add up to an inclusive web experience. Considerations that might not come to one’s mind in the first place — like the use of inclusive language or providing alternatives or descriptions for complex visualizations. To get your site on the best track of becoming truly inclusive, Heydon Pickering put together an Inclusive Design Checklist. The biggest and most comprehensive one available. That’s at least what it’s aiming for.

The checklist includes more than 70 items covering accessibility, performance, device support, interoperability, and language. From making sure heading sections describe a logical section structure and giving video content captions and transcripts, to using content-based media queries and providing tap-based alternatives for swipe gestures. Where necessary, the list provides links to useful tools and articles that dive deeper into a topic. A go-to place for all your inclusive design needs. (cm)

5. Inspiring Examples Of UX

Often, it’s the small things that take a user experience from good to memorable. Be it a useful tooltip, a value-driven onboarding flow, maybe even a well thought-out upsell prompt. To stay inspired with examples of outstanding UX, the site Really Good UX collects pleasant UX details from around the web and explains what makes them so good.

To find just the right inspiration you need, you can browse the showcase by collection — think product tours, user onboarding, tooltips, modal windows, upsell prompts, and feature releases, for example. And if you don’t want to miss any new additions, there’s a weekly newsletter that delivers a fresh breeze of UX goodness right to your inbox every week. (cm)

6. Size-Changing Toggles With Flexbox

With its ability to build grids that are flexible and aware of dynamic content, Flexbox has made coding challenges that once were hard or impossible to solve straightforward. Its potential is huge, and with a bit of tinkering, you can bring forth innovative results, as a recent CodePen demo by user Shaw (@shshaw) shows.

Shaw created a set of size-changing toggles using simple Flexbox transitions — a concept that shines with its simple beauty. Four rectangles form a grid; when a rectangle is active, its size is increased, and the neighboring rectangle becomes smaller in exchange. No JavaScript needed, only pure CSS goodness. Worth taking a closer look at! (cm)

7. A Chatbot To Fight Email Scammers

Scamming emails are annoying to say the least. And even though you probably smell one a mile away, the fake stories of Nigerian princes and Russian romances are a billion dollar industry with millions of victims. Time to fight back! That’s the idea behind Re:Scam, an initiative brought to life by New Zealand’s non-profit online safety organization Netsafe. Their weapon of choice: a chatbot that can take on multiple personalities to imitate victims and entangle scammers in an endless conversation — until the scammer gives up.

If you spot a shady email in your inbox, just forward it to me@rescam.com, and after ensuring that it actually is a spamming attempt, the bot does what it’s best at: faking interest, asking questions — well, put simply, wasting a scammer’s time. Of course, an annoying conversation won’t make a scammer give up their “business”, but by keeping them engaged for a while, they waste time they’d otherwise invest in other potential targets. Clever! By the way, Re:Scam uses a proxy email address to contact the spammer, so your personal information stays protected at all times. Now, well, dear spammers, you’ve got mail! (cm)

8. We’ve Got A Password Problem

When we shop online or want to use an online service, we’re often required to sign up. And with each account we create, we diligently (and a bit annoyed) add the new password to our secret list of credentials. Credentials which we can’t remember otherwise and which we might never use again anyways. In a nutshell: The web has a password problem — and that’s not only annoying from a user’s perspective, but can seriously harm a business, too.

As Luke Wroblewski recently pointed out on Twitter, authentication is one of the biggest reasons people don’t return to websites. 54% quit checkout if they are asked to sign up and 92% give up if they don’t remember a password or user name. But how can you as a designer or developer do better?

Passphrases, passwordless sign-in, and biometric authentication like Touch ID or the new Face ID are promising solutions to make the process a lot more straightforward as juggling with cryptic letter combinations. However, before you decide on an authentication process to use on your site, be sure to weigh its advantages and disadvantages to ensure it’s the best solution for your use case. (cm)

November 28, 2017 Smashing Newsletter: Issue #194

Previous Issues