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 yourself2.
In fact, we have SmashingConf San Francisco 20175 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 PDF6. 😉
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
- Freebie: A Hand-Painted Brush Sans Named Westfalia8
- Copying Text To The Clipboard Made Easy9
- Free Tutorials To Brush Up Your Web Development Skills10
- Conference Videos! Fresh Conference Videos!11
- Virtual Reality: Where We Are Today And Where We’re Heading12
- Refactoring Code Without Losing Your Mind13
- Freebie: Anaglyph Photoshop Actions14
- Secrets From The Road15
- Upcoming Smashing Workshops16
- New On Smashing Job Board17
- Smashing Highlights (From Our Archives)18
- Recent Articles On Smashing Magazine19
201. 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 Westfalia21 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)
232. 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.js24, 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
error for you to listen to and implement your custom logic. Worth checking out. (cm)
263. 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 Example27”. It’s a collection of short video tutorials and example code that show you the key features of Grid and how they work.
A real potpourri of valuable tutorials30 comes from Wes Bos. His “What The Flexbox31” course lets you in on the secrets of, well, Flexbox. In “Learn Redux32”, 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 User33” 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 Sketch34” 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)
354. 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 videos36 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 Day38 recently uploaded from their June event in Amsterdam. And, last but not least, the videos from SmashingConf Barcelona39 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)
405. 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 matters42”, 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. WebVR43 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 websites44 are already using Web VR live.
By the way, a good primer on developing for VR already today45 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)
466. 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 slides48 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 topic49. (cm)
507. 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 actions51 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)
538. 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 Road54, 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)
569. 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.
Our Public Workshops
- Warsaw, Poland — Smart Responsive Design Patterns58
Design Encounters, Warsaw, Poland, Nov. 18th
- Vilnius, Lithuania — Responsive Design: Tricks And Techniques59
Build Stuff, Vilnius, Lithuania, Nov. 20th
- London, UK — New Responsive Adventures: UX and Front-End60
White October Events, London, UK, Nov. 24-25th
- Munich, Germany — Smart Responsive UX Design Patterns61
Smashing Workshop, Munich, Germany, Nov. 28th
- Tel-Aviv, Israel — Smart Responsive Design Patterns62
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 firstname.lastname@example.org 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!
6410. New On Smashing Job Board
- UX Specialist/Web Developer66 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 Designer67 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 Engineer68 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.”
6911. Smashing Highlights (From Our Archives)
- Lessons Learned After Shutting My Startup, Following A Six-Year Struggle70
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 Process71
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 Professionals72
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.
7312. Recent Articles On Smashing Magazine
- True Lies Of Optimistic User Interfaces74
- You, Me And The Emoji: Character Sets, Encoding And Emoji75
- How To Create A Dramatic Vector Illustration76
- A Quick Guide For Designing Better Buttons77
- What Everyone Should Know About The Process Behind App Design78
- The Golden Rules Of Bottom Navigation Design79
Inspiration, Workflow, Misc.
- Where Are The World’s Best Open Device Labs?81
- Define Your Process To Master Time, Gain Clarity, And Take Control82
- Breaking Out Of The Box: Design Inspiration (November 2016)83
- Web Development Reading List #157: FlyWeb, Lying Charts, And Feedback Without Context84
- Web Development Reading List #158: Form Usability, Vue.js, And Unfolding Critical CSS85
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://www.flickr.com/photos/marcthiele/sets/72157672950578072
- 3 https://sf17.smashingconf.com/
- 4 https://sf17.smashingconf.com/
- 5 https://smashingconf.com/
- 6 http://smashingconf.com/pdf/convince-your-boss-sf.pdf
- 7 https://www.flickr.com/photos/marcthiele/29515898520/in/album-72157672950578072/
- 8 #a1
- 9 #a2
- 10 #a3
- 11 #a4
- 12 #a5
- 13 #a6
- 14 #a7
- 15 #a8
- 16 #a9
- 17 #a10
- 18 #a11
- 19 #a12
- 20 #
- 21 http://www.pixelsurplus.com/freebies/westfalia-free-font
- 22 http://www.pixelsurplus.com/freebies/westfalia-free-font
- 23 #
- 24 https://clipboardjs.com/
- 25 https://clipboardjs.com/
- 26 #
- 27 http://gridbyexample.com/video/
- 28 https://es6cheatsheet.com/
- 29 http://gridbyexample.com/video/
- 30 http://wesbos.com/courses/
- 31 http://flexbox.io/
- 32 https://learnredux.com/
- 33 http://commandlinepoweruser.com/
- 34 https://www.switchtosketchapp.com/
- 35 #
- 36 https://vimeo.com/channels/beyondtellerrand/
- 37 https://vimeo.com/channels/beyondtellerrand/
- 38 https://vimeo.com/channels/cssday
- 39 https://vimeo.com/smashingmagazine/videos
- 40 #
- 41 https://medium.com/swlh/is-vr-actually-going-to-change-anything-2225c979d97c#.eisg55yn9
- 42 https://medium.com/swlh/is-vr-actually-going-to-change-anything-2225c979d97c#.eisg55yn9
- 43 https://blog.sketchfab.com/webvr-future-vr/
- 44 http://conference.awwwards.com/
- 45 https://www.smashingmagazine.com/2016/09/developing-for-virtual-reality-what-we-learned/
- 46 #
- 47 https://speakerdeck.com/csswizardry/refactoring-css-without-losing-your-mind
- 48 https://speakerdeck.com/csswizardry/refactoring-css-without-losing-your-mind
- 49 https://medium.com/@joaomilho/festina-lente-e29070811b84#.es2302oqa
- 50 #
- 51 https://pixelbuddha.net/freebie/anaglyph-photoshop-actions-free-download
- 52 https://pixelbuddha.net/freebie/anaglyph-photoshop-actions-free-download
- 53 #
- 54 https://secretsfromtheroad.com/
- 55 https://secretsfromtheroad.com/
- 56 #
- 57 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
- 58 http://www.designencountersconf.com/
- 59 https://buildstuff2016workshops.sched.org/event/8Xo2/vitaly-friedman-responsive-design-clever-tricks-and-techniques
- 60 http://whiteoctoberevents.co.uk/training
- 61 https://shop.smashingmagazine.com/products/smashing-workshop-ux-design-vitaly-munich-nov-2016
- 62 http://www.uxsalon.com/responsive-design-workshop/
- 63 mailto:email@example.com
- 64 #
- 65 http://jobs.smashingmagazine.com/
- 66 http://jobs.smashingmagazine.com/j/UX-Specialist-Web-Developer/2443003
- 67 http://jobs.smashingmagazine.com/j/UX-Designer/2442644
- 68 http://jobs.smashingmagazine.com/j/Network-Security-Engineer/2441338
- 69 #
- 70 https://www.smashingmagazine.com/2015/11/lessons-learned-shutting-startup/
- 71 https://www.smashingmagazine.com/2014/11/why-you-should-include-your-developer-in-the-design-process/
- 72 https://www.smashingmagazine.com/2013/11/habits-successful-new-web-professionals/
- 73 #
- 74 https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/
- 75 https://www.smashingmagazine.com/2016/11/character-sets-encoding-emoji/
- 76 https://www.smashingmagazine.com/2016/11/how-to-create-a-dramatic-vector-illustration/
- 77 https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
- 78 https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/
- 79 https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
- 80 https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
- 81 https://www.smashingmagazine.com/2016/11/worlds-best-open-device-labs/
- 82 https://www.smashingmagazine.com/2016/11/define-your-process-master-time-gain-clarity-take-control/
- 83 https://www.smashingmagazine.com/2016/11/breaking-out-of-the-box-design-inspiration-november-2016/
- 84 https://www.smashingmagazine.com/2016/11/web-development-reading-list-157/
- 85 https://www.smashingmagazine.com/2016/11/web-development-reading-list-158/