This newsletter issue was sent out to 234,002 newsletter subscribers on Tuesday, February 7th 2017.
Not all websites are created equal. While experimental interfaces are out of place most of the time, they are more than welcome on websites that convey a character, a personality, and a unique point of view. That’s not just true for art-directed pages, personal portfolios or design agencies though. Music bands and art exhibitions can benefit from it as well.
With Smashing Magazine’s upcoming relaunch, we had to rediscover and redefine our personality, and as a part of it, discover and highlight what we call a signature. That signature doesn’t have to be overly prominent, but it should be noticeable and consistently delightful. In our case, Dan Mall had chosen to use the tilting of our logo in obvious and not-so-obvious places, even at risk of having it appear too playful at times. Let’s see where you’ll be able to spot it! ;-) Expect a little surprise very soon.
Looking for strategies to balance out the creative with the relevant? Well, that’s one of the themes at our upcoming SmashingConf San Francisco, taking place in April. With lots of opportunities for networking, speaking and getting better at your craft — be it front-end, UX, or anything in-between! Just check the speakers line-up. Well, I hope to see you there!
Find your signature.
– Vitaly (@smashingmag)
Table of Contents
- A Notebook That Follows You Through Your Browser Tabs
- Are You A Master Of The Command Line?
- Delightful Effects For Text Input Fun
- Monochromatic Eye Candy
- Implementing “Save For Offline” With Service Workers
- Good (And Partly Free!) Reads For Your Digital Bookshelf
- Could You Afford Living In The City Of Your Dreams?
- A Magic Button For Shopping
- Superheroes To The Rescue!
- Taking Visual Experiences To The Next Level
- Upcoming Smashing Workshops
- New On Smashing Job Board
- Smashing Highlights (From Our Archives)
- Recent Articles On Smashing Magazine
(#)1. A Notebook That Follows You Through Your Browser Tabs
Staying focused can be hard when you’re having a stressful day. Maybe you’ve tried to jot down reminders and to-dos to structure your thoughts and ideas to prevent you from getting lost. But when you forget to look at them because you’re either too absorbed in your work or because you’re constantly getting distracted, well, then the best notes are useless, too. The Chrome extension Mindful attempts to change just that.
Created by Adrian Zumbrunnen, Mindful gives your thoughts, ideas and ongoing tasks a new place. One that you always have in sight anyhow: Your browser. Whenever you open a new tab in Chrome, Mindful will make sure that your notes are right there. It’s not a fully-fledged writing suite, but that’s not what it’s about. Instead, Mindful tries to relinquish any additional distraction and lays its focus on simplicity so you can focus on the things that really matter: Your ideas. (cm)
(#)2. Are You A Master Of The Command Line?
You know the high-striker at the carnival that lets you test your strength? Well, the Command Line Challenge is something like that for developers. It’s not about muscle strength, though, of course, but your iron command line skills.
The challenge: You get a row of tasks that you need to solve with only a single line of bash. Extracting all IP addresses from certain files, for example, or printing the nth line in a given file. There are 30 tasks in total for you to master before you can call yourself a real command line hero. Ready to take on the challenge? (cm)
(#)3. Delightful Effects For Text Input Fun
Filling out a form is nobody’s favorite task. But actually, it doesn’t take a lot to enhance the experience. Just add a sprinkle of surprise and a seemingly dull interaction suddenly becomes a lot more delightful. To cater for some inspiration on how this can be done, the folks at Codrops put together some innovative text input effects.
What they all have in common is that they use CSS transitions and subtle animations to cater for some unusual effects once a user clicks on an input field: It’s either the position of the field label that might shift, borders will become animated, or colors will change. Keep in mind that animating the text input has bugs on iOS and Internet Explorer (the cursor of the input won’t move until you actually type). Nevertheless, a fantastic source of inspiration. (cm)
(#)4. Monochromatic Eye Candy
Who doesn’t love some good eye candy? If you need some fresh inspiration, be sure to stop by the Tumblr of The Afrix. Curated by designer Tom Wysocki, the Tumblr resembles a well-balanced exhibition of opposites — black and white, strict geometry and fluent, organic shapes — joining up to build a harmonious whole.
Among the works, you’ll find actual designs for portfolio websites and detailed illustrations, but also rather abstract and seemingly random digital experiments. It’s that mix of the unforeseen that makes the showcase so refreshing despite its monochromatic color palette. Beautiful works of art with a mysterious touch. (cm)
(#)5. Implementing “Save For Offline” With Service Workers
You probably too know the moments when you’re on the subway, reading an article, and suddenly your cell connection breaks down. To prevent her users from the unpleasant effects that a flaky connection brings along, Una Kravets recently added a small but mighty feature to her blog: An option that allows users to save blog posts for offline reading. Luckily for the rest of us, she wrote up a post explaining in detail how you can do it, too.
The idea behind Una’s approach is to give users the choice which articles they want to save for offline reading instead of automatically taking up precious space in their cache without asking. Thus, her solution relies on a trigger element (a little download button which is positioned next to each article’s heading) that gets the service worker magic rolling. Clever! (cm)
(#)6. Good (And Partly Free!) Reads For Your Digital Bookshelf
Do you need some new reading material? Then we might have something for you. We stumbled across a few free eBooks lately that are bound to take your skills to the next level. One of them is the Site Reliability Engineering: How Google Runs Production Systems book. In it, Google’s SRE team gives insights into how their engagement with the software lifecycle has enabled Google to build, deploy, monitor, and maintain some of the largest software systems in the world.
(#)7. Could You Afford Living In The City Of Your Dreams?
When we travel abroad, we are often surprised, sometimes even a bit shocked, about what certain things cost in other countries. Drink a beer in Denmark, for example, and you’ll have to pay something around $6.50. Drink one in Germany: $3.75. Costs of living differ. Sometimes a lot. Not only between countries but even cities. But what if you decided to move? Would you get by with your current income? Or would you need to make more to maintain your current standard of living?
Luckily, it doesn’t take rocket science to find out: citii.io, a small React app built by Hassan Djirdeh, will do the calculations for you. It uses the cost-of-living index attributed to Russian economist A. A. Konüs, paired with up-to-date data gathered from Numbeo, a database of user-contributed data about any kind of aspect of our lives. Just enter the city you’re currently living in, your annual salary and where you wish to live, and the app will tell you the equivalent you’ll need to make to keep up your standard. Insightful. (cm)
(#)8. A Magic Button For Shopping
Some little helpers are so genius that you start to wonder how you could ever get around without it: Wikibuy could be one of those. Available for Chrome and iPhone, Wikibuy attempts to change the way you shop — by providing you with the best deals from all over the web whenever you browse Amazon or scan a barcode.
In fact, while you browse a product on Amazon, it takes Wikibuy only 15 seconds to evaluate other vendors, among them Walmart, Target, and eBay and check if your desired product is available somewhere at a lower price. It then automatically confirms availability, price, taxes and shipping, and even tests for coupon codes and applies the best one at checkout. When you accept an offer, you pay Wikibuy, and they’ll track the order for you. An interesting concept. (cm)
(#)9. Superheroes To The Rescue!
Let’s be honest, have you ever actually read the iTunes Terms And Conditions before you clicked “Accept”? The entire wall of text? 96 pages of legal speak? Well, you can’t be blamed. We did neither. But a superhero now comes to the rescue, on a quest to make the T&C less boring. His name: R. Sikoryak. Profession: Cartoonist. And well, he’s got some mighty helpers to join him, among them X-Men, the Transformers, Snoopy, Tin Tin, Dilbert and even the Smurfs.
What sounds like a weird dream are the ingredients for iTunes Terms And Conditions: The Graphic Novel. Yes, R. Sikoryak did illustrate the entire legal document, word for word in the style of classic cartoon strips. And what came out of it is not only pure eye candy but also a stellar example of how some unexpected turns and a pinch of wit can transform something boring into a captivating experience. Hats off! (cm)
(#)10. Taking Visual Experiences To The Next Level
Websites are more than just a reference for folks to find more information about a company, service, person or project. Web developers and designers are aware of this fact, and have been busy trying out new ways to provoke the visual experience. For example, an Austrian interactive agency WILD brought Falter Inferno to life in order to express “a ride through today’s living hell”. Very impressive — we’re sure you’ll agree.
(#)11. Upcoming Smashing Workshops
With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
Workshops at SmashingConf SF 2017 — Apr 3
- Scalable Design Systems – Nathan Curtis (Sold out)
- Building Performant Websites – Tim Kadlec
- Smart Responsive UX Design Patterns – Vitaly Friedman (Sold out)
- Hands-On Checkout Optimization Workshop – Christian Holst
Workshops at SmashingConf SF 2017 — Apr 6
- Advanced SVG Animation – Sarah Drasner
- Advanced CSS Layouts With Flexbox And CSS Grids – Rachel Andrew (Sold out)
- Creative Data Visualization Techniques – Nadieh Bremer
- New Front-End Adventures In RWD – Vitaly Friedman
Our Public Workshops
- Amsterdam, Netherlands • Smart RWD Patterns
FITC, Feb. 19th, 2017
- Riga, Latvia • Designing Delightful Responsive eCommerce UX
UX Riga, Feb. 22nd, 2017
- Toronto, Canada • Smart Responsive Design Patterns
FITC Toronto, Apr. 22nd, 2017
- Sydney, Melbourne, Brisbane — Australia • Smart Responsive UX Design Patterns
Web Directions, May 4–12, 2017
Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at email@example.com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy!
(#)12. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
- Programmer/Analyst — Web at Duncan Aviation (Lincoln, NE)
As a Web Programmer/Analyst I, you will be part of a team that is passionate about learning and applying new technologies to create innovative solutions.
- React Engineer at FoxCommerce (Remote - Russia, Ukraine, Poland)
FoxCommerce is seeking a UI Engineer with the hunger to be more than just a cog in a giant machine. This is the perfect role for a technical leader that cares deeply about their craft.
- Web Application Developer at Quartz (New York City, NY)
Developers at Quartz may be called upon to work on any part of the site, rather than adhering to the usual labels of “front-end” and “back-end”. You should be comfortable adding a module to our Backbone.js application, building a custom WordPress plugin, or writing a hardware-accelerated CSS transition.
(#)13. Smashing Highlights (From Our Archives)
- Transforming Lufthansa’s Brand Strategy: A Case Study
This case study sheds light on how the team at Frontify worked with Lufthansa to create a living style guide (including for UI component libraries) and to manage its design and web projects. Their undertaking was to conceptually advise Lufthansa on how to create a style guide and UI library and how to use both in its design-to-development collaborations.
- An Exploration Of Carousel Usage On Mobile E-Commerce Websites
Does this title make you skeptical? Our author Kyle Peatt would have been too before he saw the research that led to this article. Ask anyone and they’ll tell you that carousels are an anti-pattern. Don’t use them. But maybe it’s not so cut and dry.
- 60 Stylish Round Icons – Meet The Roundicons
Everyone loves a good, clean and simple icon set, so we’re honored to present to you a set of 60 vector round icons which was cleverly designed by the creative trio at Roundicons and released exclusively for Smashing Magazine and its readers. Crafted with great attention to detail, this icon set is extremely easy to use and will most probably be the next ultimate resource for any one of your design projects.
(#)14. Recent Articles On Smashing Magazine
- Mobile-First Is Just Not Good Enough: Meet Journey-Driven Design
- Redesigning The Paris Metro Map
- The Underestimated Power Of Color In Mobile App Design
- HTML APIs: What They Are And How To Design A Good One
- How Mail.Ru Reduced Email Storage From 50 To 32 PB
- Making Responsive HTML Email Coding Easy With MJML
Inspiration, Freebies, Misc.
- Colorful Inspiration For Gray Days: Illustration And Photography At Their Best
- From The Design Community With Love: Unique And Inspiring Desktop Wallpapers
- 30 Sugar-Sweet Valentine’s Day Icons
- Live Stream From Awwwards London Conference: Chat Bots, Virtual Reality, And The Future Of UX
- SmashingConf New York 2017: Don’t Let Bad Front-End/UX Be Your Kryptonite!
- Web Development Reading List #168: Preload With Webpack, A Guide To Security Headers, And Service Worker Fallacies
- Web Development Reading List #167: On Team Retreats, Immutable Cache, And Eliminating Clearfix Hacks
- Front-End Cheatsheets
- Front-End Accessibility
- Open-Source Icons, Fonts and Goodies
- Next.js Boilerplates and Guides
- CSS Global Resets, Gradients and Transitions
- Interface Design Patterns
- Web Performance Optimization
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.