Smashing Newsletter #170: Refactoring Code, Photoshop Actions and Secrets From The Road

Imagine a cloudy, rainy November evening. After a long day, you walk home along the streets, following the dimmed street lamps... Issue #170 • Tuesday, November 15th 2016 • 247,796 readers • [View in the browser] [Smashing Email Newsletter] Dear Friends, 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]. [We’re cookin’ something fancy in the kitchen. Mind tasting it?] We’re [cookin’ something fancy] in the kitchen. Mind tasting it? 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]. 😉 [Just a Smashing Conference. Una Kravets, one of the speakers, seems to like the Lego contest… a lot!] Just a Smashing Conference. Una Kravets, one of the speakers, seems to like the Lego contest… a lot! 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) --------------------------------------------------------------- Table of Contents 1. [Freebie: A Hand-Painted Brush Sans Named Westfalia] 2. [Copying Text To The Clipboard Made Easy] 3. [Free Tutorials To Brush Up Your Web Development Skills] 4. [Conference Videos! Fresh Conference Videos!] 5. [Virtual Reality: Where We Are Today And Where We’re Heading] 6. [Refactoring Code Without Losing Your Mind] 7. [Freebie: Anaglyph Photoshop Actions] 8. [Secrets From The Road] 9. [Upcoming Smashing Workshops] 10. [New On Smashing Job Board] 11. [Smashing Highlights (From Our Archives)] 12. [Recent Articles On Smashing Magazine] --------------------------------------------------------------- 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. [Freebie: Westfalia — A Hand-Painted Brush Sans] 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. [Clipboard.js] 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) --------------------------------------------------------------- Our sponsor: Simplify Website Administration With The New Plesk Creating and running web projects can be frustrating, especially if your tools don’t play well with one another. The recently updated [Plesk Onyx] was built to integrate with all the amazing tools you use. It has a neat Let’s Encrypt and Slack integration, supports automated deploys through Git, creating multiple Docker containers at once, manages all the CMSs (plugins included), and so much more. Check out their [demo and free trial]. [plesk] --------------------------------------------------------------- 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. [Grid by Example] 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. [Beyond Tellerrand Conference videos] 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) --------------------------------------------------------------- Our sponsor: GraphicStock Is Giving You 7 Days To Download Anything You Want There are many places to download free stock images and illustrations, but you never can be sure whether the provided assets are free from any copyright claims, and neither will you find the same level of quality you'll get from professional platforms. [GraphicStock] is such a platform that offers more than 300,000 of high-quality photos, illustrations, backgrounds, and design elements for only USD 99 per year. The number of downloads for videos, templates and images is unlimited. And there's a free 7 day trial available, too. Anything that you download during the trial period is yours to keep and use forever. [Happy downloading]! [GraphicStock] --------------------------------------------------------------- 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? [Virtual Reality] 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. [Refactoring CSS Without Losing Your Mind] 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) --------------------------------------------------------------- Our sponsor: Get Access to $1 Stock Images from Depositphotos [Ad] Just $1 per any image of any size from Depositphotos. --------------------------------------------------------------- 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. [Freebie: Anaglyph Photoshop Actions] 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. [Secrets From The Road] 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) --------------------------------------------------------------- Our sponsor: Online Masters in Information Design and Strategy [Ad] Learn to drive effective digital communication. --------------------------------------------------------------- 9. 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. [Smashing Public Workshops] Our Public Workshops - Warsaw, Poland — [Smart Responsive Design Patterns] Design Encounters, Warsaw, Poland, Nov. 18th - Vilnius, Lithuania — [Responsive Design: Tricks And Techniques] Build Stuff, Vilnius, Lithuania, Nov. 20th - London, UK — [New Responsive Adventures: UX and Front-End] White October Events, London, UK, Nov. 24-25th - Munich, Germany — [Smart Responsive UX Design Patterns] Smashing Workshop, Munich, Germany, Nov. 28th - Tel-Aviv, Israel — [Smart Responsive Design Patterns] UX Salon, Tel-Aviv, Israel, Dec. 5th Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at [vitaly@smashingconf.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! --------------------------------------------------------------- 10. New On Smashing Job Board Here are the recent job openings published on our [Smashing Job Board]: - [UX Specialist/Web Developer] at Pew Research Center (Washington, DC) “This position’s primary responsibilities include planning, conducting, and analyzing usability tests and other user research, as well as consulting on information architecture and design as needed based on knowledge of published research in the field of human-computer interaction.” - [UX Designer] at Exact (Delft, Netherlands) “Are you the interaction designer who brings our innovative cloud solution to the next level? We have a tremendous opportunity for a UX Designer that might just be giving you the boost you need.” - [Network Security Engineer] at American Institutes for Research (Washington, DC) “We are seeking a Network Security Engineer to join the software engineering and product development team of AIR Assessment. The American Institutes for Research (AIR) is one of the world’s largest behavioral and social science research and evaluation organizations.” --------------------------------------------------------------- 11. Smashing Highlights (From Our Archives) - [Lessons Learned After Shutting My Startup, Following A Six-Year Struggle] Yaakov Karda shares a few insights, mistakes and lessons learned, so you know what to watch out for in your projects. - [Why You Should Include Your Developer In The Design Process] Should designers be able to code? This topic never seems to die, with its endless blog posts, Twitter discussions and conference talks. - [The Habits Of Successful New Web Professionals] Practices that seem like common sense to those of us who have been in the web industry for some time might not be as obvious to designers and developers without the benefit of our experience. --------------------------------------------------------------- 12. Recent Articles On Smashing Magazine Design Articles - [True Lies Of Optimistic User Interfaces] - [You, Me And The Emoji: Character Sets, Encoding And Emoji] - [How To Create A Dramatic Vector Illustration] - [A Quick Guide For Designing Better Buttons] - [What Everyone Should Know About The Process Behind App Design] - [The Golden Rules Of Bottom Navigation Design] Coding Articles - [CSS Grids, Flexbox And Box Alignment: Our New System For Web Layout] 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] --------------------------------------------------------------- Sent to truly [smashing] readers via [Mailchimp]. We sincerely appreciate your kind support. You rock. Email: newsletter@smashingmagazine.com [Follow us on Twitter] • [Join us on Facebook] [Smashing Freddie: Sent via Mailchimp.] The authors are: Cosima Mielke (cm), Iris LjeÅ¡njanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools). [unsubscribe] • [update preferences] • [view in your browser]