Dear Friends,

Whenever you hear someone saying, "But our users aren't going to...", interrupt them on the spot. Those statements are often pure guesswork, based on common assumptions and lacking evidence. The truth is that you never know, and quite frankly, we can't reliably know since usage patterns and behaviors can change over time. Our websites should be prepared for that "unknown", with enough time spent on research and planning.

A little bit more UX, every day, can't hurt a project. A few good UX practices are collected in the free UX Reader eBook and UX Thought Of The Day.

In fact, I'd argue that planning is often one of the most underrated assets in the entire design process; and lack of planning is a cause for project delays, underbudgeting and stressed-out teams. So what if you tried to allocate just a few extra hours for a content gap analysis, for user interviews, for discovery and exploration, for content and interface inventories, for content priority lists, for performance budgets, for final refinements and even quality assurance tweaks? Look closely into out how the delivery of the project would be affected by this change, and iterate and revise. In fact, that's what we are doing at the moment, and it's showing significant improvements.

In times when complexity of projects (particularly responsive ones) require us to craft scalable, flexible, comprehensive design systems, proper planning can't be a luxury — it's a necessity. We have to keep different form factors and interactions modes in mind, design patterns and technical requirements, CMS shortcomings and legacy code base, design components and strategic decisions — and that's just scratching the surface! Starting to design without having a clear roadmap in front of you is a risky and dangerous undertaking.

Design decisions shouldn't be informed by guesswork. To eliminate misleading assumptions, we should have to validate our statements by good ol' UX work. A little bit more UX, every day.

– Vitaly (@smashingmag)

1.	Useful References For Quality Front-End Code
2.	Outline Bitmap Images Into SVG
3.	Grid Displayer For Bootstrap And Foundation
4.	What Happens When...
5.	Forget The Film, Watch The Titles
6.	Reconsider Your Free Work
7.	Inspiring Design And Art Documentaries
8.	A Freelancer's Business Report
9.	The Perpetual State Of Wanderlust
10.	Keep Calm… And Attend A Smashing Workshop!

1. Useful References For Quality Front-End Code

On the web, technology is rapidly evolving, and with auto-updates being a well-established practice in modern browsers, the code that you've written a few months ago may now appear bloated and unnecessarily complex. To maintain the code quality, we need to keep revising and refactoring the code. Perhaps those vendor prefixes aren't required any more, or Flexbox syntax has changed, or WOFF2 has gained a significant push from browser implementors? Or perhaps new versions of those pesky Android browsers or Opera Mini recently came out?

To stay on float of what's going on, we need good, reliable references. Luckily, there are plenty of good ones out there. The State of Web Type provides up-to-date data on support for typographic features on the web. Is ServiceWorker Ready?tracks the support of ServiceWorkers in browsers. CSS Triggersis a reference for the rendering work triggered by changing various CSS properties, and obviously Can I Use lets you get a detailed data on browser support for CSS, HTML, SVG and JavaScript and even compare specific (mobile/desktop/tablet) browsers — and so does HTML5 Please. Or perhaps you'd like to track browser support for broken/missing images? Now this would provide you with a good agenda for your next refactoring week and help keep your front-end code clean, shiny and up to date! (vf)

2. Outline Bitmap Images Into SVG

We all love resources that help us speed up our workflows. So what if you have a small bitmap image of a shape or a small illustration, but would love to quickly outline it into SVG? They all work right in the browser and create SVGs by tracing the original images. You might want to use illustrator's image tracking function, but you could also use a few online tools: PicSVG andConvertio. All you have to do is simply upload a picture to the respective site and the SVG is created instantly. PicSVG even lets you choose a color for the SVG as well as a filter.

The features which Vectormagic offers are a bit more sophisticated. Not only does it produce SVGs which are more rich in detail, but the tool also lets you review the results and adjust more settings, such as the level of detail and color. However, in order to download your SVG from Vectormagic, you'll have to sign up to the site first. Two conversions are free, afterwards you'll be charged a monthly fee. Happy SVGing! (cm)

3. Grid Displayer For Bootstrap And Foundation

Grids are powerful, but working with them might be quite annoying at times. What class should you pick? What are the right margins to choose, and how do you properly distribute columns across the grid? To help you make such decisions, you can use Grid Displayer, which is a bookmarklet displaying the grid of your front-end framework (obviously, the most popular ones). Simply install it by dragging it into your bookmarks bar. If you don't want to edit parameters every time the page or the displayer is reloaded, set them once and for all by adding data attributes to the body.

Grid Displayer was designed and built by Antoine Lefeuvre along with some help from contributors. The current 3.2 version is currently available only in Firefox and WebKit browsers, and compatible with Foundation 2–5, as well as Bootstrap 2 and 3. The bookmarklet is released under the MIT license. (ml)

4. What Happens When...

What happens when you type in 'google.com' in your browser's address bar and press 'Enter"? As a web professional, that's probably no question to make you sweat. However, have you ever tried to answer that question providing as much detail as possible, without skipping out on anything? Not even the browser checking the hostname for non-ASCII Unicode characters?

Okay, it might sound a bit nerdy to go into so much detail, however, it also makes the idea for a quite interesting, collaborative project. The GitHub repository "What happens when..." attempts to answer this age old question — in as much detail as possible. It does already dig quite deep, however, there is still a lot missing. So, if you've got anything to add to it, don't hesitate, and send a pull request. If that's not enough for you to ponder about yet, the GitHub repository "Front-end Job Interview Questions" features a lot of interesting front-end-related questions that are sure to fuel many interesting discussions with fellow web developers. (cm)

5. Forget The Film, Watch The Titles

Once upon a time, introductory titles sequences of movies were so dull that the audience was grateful they didn't have to watch them. It was a time, when curtains didn't open before the opening credits were rolled. But when film producer Otto Preminger collaborated with graphic designer Saul Bass back in 1955, they changed the game. Bass created an opening title that was more than just a dull roll of credits and something that Preminger wanted his audience to see. When the projectionists got their hands on the film reels of The Man With The Golden Arm, a note on the film can said "Projectionists, please pull curtain before titles".

Bass' title design was simple but yet different, and that was what sparked a flame within the film industry. If you also love the magic that happens when the lights are dimmed out and the opening sequence begins, then you'll be captivated by the very best in title design over at Art of the Title and Watch The Titles. Focusing on the creative process of title design, these two brilliant websites cover a broad range of styles, genres and techniques. And guess what, 2014 was an incredible year for title design, so make sure to check out the Top 10 Title Sequences of 2014. (ea)

6. Reconsider Your Free Work

Have you ever counted the estimate value of your free work? No? Well, you could be surprised at how much money you "could have" earned over the years. Just like you, Ran Segall believed in all of the benefits of getting his work out even by giving it away for free. He believed in arising opportunities and in being the good guy among family and friends. Today, he comes to a different conclusion, i.e. it's all worth nothing, because people don't appreciate things they get for free.

If you work for clients, you should only accept working for equity in addition to salary. Paying for design work will commit your client to the project and to treat your time and your output seriously. If you volunteer, you need to consider that you might end up wasting 90% of your time and working 10%. Since nobody's paying for your time, then nobody really cares if your time is properly used. In fact, you might not even get the creative freedom you imagined. So, if you want people to start caring about your work, start charging the well-deserved amount of money for it. (ml)

7. Inspiring Design And Art Documentaries

Planning to have a movie night this upcoming weekend? Instead of soaking up the latest Hollywood craze, why not indulge your mind with something intellectual instead? If you agree that a well-done documentary can take it up with any fictional blockbuster and if you also happen to love art and design, then check out Designers:Watch, a great list of must-see documentaries for designers, artists and anyone interested.

Share the life and vision of some of the world's most influential painters, cartoonists, architects and photographers. Explore fascinating methods in the creative process. Watch "Teaching to See" to learn why you can't come up with ideas if you don't look and visualize first. Dive into the world of architecture and letClean Lines and Open Spaces show you how the post World War II building boom brought modern design into our homes. Or celebrate the digital revolution and how it has unleashed our creativity and talent in PressPausePlay. Now you've got your weekend plans covered! (ea)

8. A Freelancer's Business Report

Money isn't something that a lot of folks usually talk about. However, as a freelancer it is actually quite crucial to know what others take for their service, in order to stay competitive but also to prevent yourself from selling your work at less than a fair value. In 2013, designer and developer Ivo Mynttinen decided to publish his total earnings from freelancing on his site, and since the feedback was so positive, he did the same for 2014 — his most successful in three years of freelancing as it turned out.

As you would expect from a business report, it lists Ivo's monthly income and some other key metrics about his little business, such as spendings. However, the most interesting part for other designers and developers is probably the insight which Ivo gives into his pricing policy and how he adapts his rates depending on the clients. Kudos for so much transparency! (cm)

9. The Perpetual State Of Wanderlust

There are many beautiful places on Earth — so many of which most of us have never heard of. However, we often tend to only go well-known destinations, often even places we've been to already. Crossing your comfort zone by traveling to an unknown place is the best medicine against routine, depression, hopelessness, deadlock and many other "illnesses", and also the best way to find yourself, get inspired and explore the world a bit more.

Now stop looking at these photos and get up there between the clouds. It's time to act, and the beginning of the year gives you another chance. Even though most "top lists" are pretty useless and try to impose subjective templates and clichés on you, you can still skim through them creatively and allow them to motivate you. NY Times rolled up an annual travel list where the editors personally recommend 52 destinations to go in 2015 (one place per week sounds inspiring) with pretty good explanation comments and interesting travel tips from their readers. Doesn't matter if you choose one of them or maybe your own list of 52 places to visit — just make the step beyond. (vf)

10. Keep Calm… And Attend A Smashing Workshop!

With so many techniques, tools, libraries, 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 front-end and RWD workshops are all about: practical front-end + RWD workshops that will help you become better front-end developers and designers, today.

UPCOMING ONLINE WORKSHOPS:

Advanced RWD Design & UXwith Vitaly Friedman, March 2
Advanced RWD Front-End Perf.with Vitaly Friedman, March 3

FULL-DAY WORKSHOPS IN OXFORD, UK:

Leveling Up With Flexboxwith Zoe M. Gillenwater, March 16
Idea Factorieswith Chris Murphy, March 16
Making Slow Responsive Websites Fastwith Guy Podjarny, March 16
Responsive Imageswith Yoav Weiss, March 16
JS Graphics & Animationwith Seb Lee-Delisle, March 19
Responsive User Experiencewith Marko Dugonjic, March 19
RWD Clever Tricks & Techniqueswith Vitaly Friedman, March 19

FULL-DAY WORKSHOPS IN LOS ANGELES, USA:

Creating A Robust Workflowwith Rachel Andrew, April 27
CSS3 For Responsive Web Designwith Andrew Clarke, April 27
Responsive Design Workflowwith Sara Soueidan, April 27
Creative Workshop Facilitationwith Andy Budd, April 30
RWD Tips And Techniqueswith Vitaly Friedman, April 30

You can also check more workshops coming up later this year. 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.comand 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!

New on Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:

PHP Expert at Goodgame Studios (Hamburg,DE)
We're looking for a PHP expert who will work in a team on our back-end systems such as our payment shop and our in-house core library.
Expert Googler at Knurture (Remote)
We're looking for an expert Googler who can help us out on a regular basis, but this is not a full time opportunity.
UI/UX Designer at Azavea (Philadelphia, PA)
We're looking for an ambitious in-house designer experienced in conceptualizing, designing, and building high-quality web and mobile applications.

Smashing Highlights (From Our Archive)

St. Valentine's Day Icon Set (16 PNG/EPS Icons)
The icons presented are available in transparent and non-transparent PNGs, as well as in EPS format and are perfect for any projects you have coming up for St. Valentine's Day. Enjoy!
Bizarre Websites On Which You Can Kill Time With Style
In this post, you'll find a collection of amusing websites that, by combining unconventional (and sometimes bizarre) ideas and clever JavaScript and Flash effects, will entice you to play on them for an embarrassing long time.
The Art And Science Of The Email Signature
Email signatures are so easy to do well, that it's really a shame how often they're done poorly. Many people want their signature to reflect their personality, provide pertinent information and more, but they can easily go overboard.

My Favorite Newsletter

2015년 1월 29일 목요일

Smashing Newsletter #130: Grids, SVG and Front-End Interview Questions