November 15, 2016 Smashing Newsletter: Issue #170
Editorial This newsletter issue was sent out to 247,792 newsletter subscribers on Tuesday, November 15th 2016. If you are not subscribed yet, feel free to subscribe to our email newsletter anytime. Imagine a cloudy, rainy November evening. After a long day, you walk home along the streets, following the dimmed street lamps. Everybody seems to be busy, rushing somewhere, crossing paths with strangers and lonely stores. It’s dark and cold outside, and it’s difficult to see things through, so you decide to take a shortcut route to shorten the path.
Editorial
This newsletter issue was sent out to 247,792 newsletter subscribers on Tuesday, November 15th 2016. If you are not subscribed yet, feel free to subscribe to our email newsletter anytime.
Imagine a cloudy, rainy November evening. After a long day, you walk home along the streets, following the dimmed street lamps. Everybody seems to be busy, rushing somewhere, crossing paths with strangers and lonely stores. It’s dark and cold outside, and it’s difficult to see things through, so you decide to take a shortcut route to shorten the path.
Suddenly you see a bright light and music streaming from one of the remote corners of the street. Out of curiosity, you slowly walk towards the light and noise, and hold your breath for a second. You discover a little cozy place with a fireplace, packed with a crowd of people, jazzy tunes, and the smell of pizza, pasta and red wine. You see people smiling. Talking. Laughing. Sharing. Inviting you to join them.
You probably have a whole bunch of reasons to keep on walking down that street, but what if you walked inside instead? Well, that’s what joining the Smashing Conference experience feels like: It’s an intimate, personal, friendly event for web designers and developers. Don’t take our word — see for yourself.
In fact, we have SmashingConf San Francisco 2017 coming up in April next year, featuring tasty front-end ingredients, UX recipes and neat design beats from the hidden, remote corners of the web. Mark your calendar: Tickets will go live this Thursday, on Nov 17th, at 10:00 AM PST. Of course, we’ve got your back: You can always use the Convince Your Boss PDF.
We’d love you to come and join us. Walk in. Take a seat. We’ll miss you otherwise, and that would be a shame indeed.
— Vitaly (@smashingmag)
1. Freebie: A Hand-Painted Brush Sans Named Westfalia
Westfalia. The name of the famous camper van stands for outdoor adventures and exploring new routes. No wonder that Pixelsurplus named their free brush font Westfalia for the vehicle: with its hand-drawn feel, messy edges and varied line thickness, the font comes with a warm feeling of authenticity and adventure that wakes memories of camping trips and grilling s’mores over the bonfire.
Westfalia comes in one weight, with capital letters, numbers and punctuation marks, and works especially well as bold headings or on posters. You can download the font for free after providing your email address and use it both in personal as well as commercial projects. Where will it lead you? (cm)
2. Copying Text To The Clipboard Made Easy
Copying text to the clipboard should be easy. It shouldn’t require a lot of steps to configure, nor hundreds of kilobytes to load, nor any bloated frameworks. That’s the idea Zeno Rocha had in mind when he built clipboard.js, a new approach to copy text to the clipboard. The library gets by without any frameworks or Flash and weighs only 3KB gzipped.
You can install clipboard.js via npm, bower, or a good ol’ ZIP file. After having it set up, the library lets you copy content from another element by adding a data-clipboard-target attribute in your trigger element, and by defining a data-clipboard-action attribute, you specify if you want to either copy or cut content. A nice detail: To show some user interaction or capture what has been selected, the library fires custom events such as success and error for you to listen to and implement your custom logic. Worth checking out. (cm)
3. Free Tutorials To Brush Up Your Web Development Skills
Ready to take your web development skills to the next level? Here are some free tutorials that are bound to up you in the coding game. To get to grips with the CSS Grid Layout specification, check out “Grid by Example”. It’s a collection of short video tutorials and example code that show you the key features of Grid and how they work.
When it comes to finding your way around ES6, you’re well off with the interactive ES6 cheatsheet that Swizec Teller created. Using editable code examples, it teaches you the basics of the ES6 syntax in five minutes, so you’ll be able to read and understand the new JavaScript syntax. Using it on your own might take longer, though.
A real potpourri of valuable tutorials comes from Wes Bos. His “What The Flexbox” course lets you in on the secrets of, well, Flexbox. In “Learn Redux”, Wes teaches you in 2.5 hours how to build a simple photo app to simplify the ideas behind Redux, React Router, and React.js. And, last but not least, in “Command Line Power User” you’ll learn to develop a modern command line workflow with ZSH, Z, and related tools.
Finally, one for the designers: If you’ve ever played with the thought to switch to Sketch for UI design and prototyping purposes, Craft and InVision have teamed up to bring you the free “Switch to Sketch” tutorial. The 8-part video series offers insights into the basics of Sketch and its workflow and also features some advanced tips for the pros amongst you. Happy learning! (cm)
4. Conference Videos! Fresh Conference Videos!
What could be better after a long day than finding a comfy spot on the couch, preparing a nice cup of tea (or coffee if you prefer), and catching up on some fresh conference videos? Just last week the Beyond Tellerand conference took place in Berlin, and, well, good news, the videos from it are now ready to be tuned in. They cover a wide range of topics, from typographic workflows of the future and refactoring CSS to why measuring data doesn’t necessarily create more meaning and how you and your team can adopt pattern thinking. Good stuff.
For a good dose of CSS, be sure to tune into the videos that CSS Day recently uploaded from their June event in Amsterdam. And, last but not least, the videos from SmashingConf Barcelona are now online, too. Responsive web apps with container queries, real art direction on the web, designing choice, and optimizing eCommerce conversion rates are just a few of the topics covered. Enjoy! (cm)
5. Virtual Reality: Where We Are Today And Where We’re Heading
With more and more VR headsets hitting the market, 2016 has been named “the year of VR”. VR can reproduce and, most importantly, enhance every other medium (think film, theater, games, apps) in a virtual environment. In most minds, however, VR is still considered nothing but a gimmick. And that’s only human. We as humans are critical whenever new technologies and platforms hit the market. We were when the first ever flight was conducted in 1903 (in fact, it took five years until the press and the public reacted to the fact that humans were now able to fly), just like when laptops were introduced in the 80s. With virtual reality, we are at the same turning point today. The opportunity is here, now we need to figure out what to do with it. Where do its strengths lie? Where can VR create real value?
In his Medium article “Here’s why you’re overlooking how much VR actually matters”, Jory MacKay takes a closer look at why we underestimate the significance of VR and at the new opportunities it brings along to connect people, explore distant places, revolutionize learning, and change the way we shop. The future of virtual reality looks bright, but it will also take a long time before a large volume of content will be available for it to make the technology really shine. WebVR could get us a step closer to this by giving content creators the opportunity to build and distribute virtual reality experiences via a web browser. WebVR already landed in the Firefox Nightly build and is planned to move from beta builds to a stable Chrome release by the end of this year. Microsoft also announced experimental WebVR support in Edge. And some websites are already using Web VR live.
By the way, a good primer on developing for VR already today comes from David Gordon. In it, he shares insights into how he and his team built a mobile application demo for Samsung Gear VT that enables users to explore the features, pricing, interiors and exteriors of vehicles. Let’s not wait what the future might bring for VR, let’s start shaping it. (cm)
6. Refactoring Code Without Losing Your Mind
Nobody likes to work with legacy code, but often it’s something you just don’t get around doing. Perhaps you’ve hard-coded your CSS to see if it would work and now you need to make it production-ready? Or you need to tidy things up because you did things in a hurry? Sometimes your CSS might also become too difficult and expensive to maintain and the only option is to rewrite it.
Whatever it is that makes you refactor your CSS, Harry Roberts shared some valuable tips and tricks to make it happen without losing your mind in a talk he recently gave at CSSconf Argentina. The accompanying slides are available on Speakerdeck. They help you assess what to refactor and when and offer some further insights into tackling the task the right way. Among others, Harry explains how you can refactor CSS while still shipping features, how to avoid regressions when adding new CSS, and how you can avoid the dreaded refactoring tunnel. Last but not least, you’ll also take a look at running new and legacy code in tandem. Speaking of technical debt: Maiz Lulkin also wrote a great primer on the topic. (cm)
7. Freebie: Anaglyph Photoshop Actions
Our brains are easy to trick. To turn a simple image 3D, for example, it takes nothing but two differently filtered color layers (most often red and cyan). When we view the image through anaglyph glasses where one eye is covered with a red, the other with a cyan filter, we get the impression to see a three-dimensional image. Simple yet cool. If you’re into things like these, well, good news: The folks at Micromove Creative Design built a set of 15 free, anaglyph Photoshop actions so you can turn any image into an anaglyph image.
To apply the effect, just open your plain ol’ image in Photoshop and double-click the .ATN file that you download with the actions bundle. Then select one of the 15 effects and hit Play in your Action panel tabs. To find the best composition, you can adjust the positions of the red and blue layers using the Move tool, and ta-daa — there it is your own anaglyph image! By the way, the effect can also look cool when viewed without anaglyph glasses. (cm)
8. Secrets From The Road
How about a trip around the world? No time for that, you say? Of course! Just check out Eva-Lotta Lamm’s virtual travel diary Secrets From The Road, and she’ll take you with her on a round-the-world trip — in sketchnotes. Next stop: India.
In September 2014, Eva-Lotta embarked on the 14-months-long journey. To capture all those encounters and observations, the foods she tried, the things that made her smile, the ideas she had, she spent one to two hours every day to document the stage in a sketchnote. Now, two years after the departure, Eva-Lotta publishes one sketchnote every day for us to follow along and revive the trip for the whole 14 months.
The sketchnotes are pure eye candy, and there are so many interesting, funny, and also strange things to discover about the places she visited. A very personal and inspiring look at an impressive journey. Next time you plan a trip, remember to take a notebook and jot down your experiences. What’s in it will be more precious than what an armada of memory cards could ever hold. Promised. (cm)
Inspiration, Workflow, Misc.
- Where Are The World’s Best Open Device Labs?
- Define Your Process To Master Time, Gain Clarity, And Take Control
- Breaking Out Of The Box: Design Inspiration (November 2016)
- Web Development Reading List #157: FlyWeb, Lying Charts, And Feedback Without Context
- Web Development Reading List #158: Form Usability, Vue.js, And Unfolding Critical CSS
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.