Dear Friends,
What's the best way to get to the root of the problem in front end? When we encountered an unintended behaviour back in the early days, we used to split the HTML/CSS or even JavaScript into parts, continuously tested whether the problem still existed and then cut the other half to isolate the cause of the problem. However, this strategy wouldn't always have helped if the problem was caused by multiple buggy instances in the code base.
Thanks to Firebug and console.log, debugging has become easier. Following Sakichi Toyoda's 5 Whys Principle, we could dig deep into the cause-and-effect relationships underlying a particular problem, just by diving into calls and the entire call stack. Today, with tools like DevTools and Webpack we can even visualize the code tree, let the tool analyze the code, eliminate duplicates and automatically resolve dependencies and bundle modules while polishing them up on the fly with PostCSS.
To approach debugging strategically though, we need a plan. Remy Sharp has published his debugging thought process and even gave a talk on the Art of Debugging which goes into details on how to isolate a problem and fix it as well as tooling, shortcuts and workflows that are useful to know while debugging. Definitely worth reading and watching.
A big "bon dia" to the second SmashingConf Barcelona! We're excited to announce the new site is live. Tickets will go live on Tuesday May 31st at 14:00 CET.
We will also spend quite a bit of time talking about how to get to the root of front end as well as UX problems at our upcoming conferences in New York (in only 4 weeks!) and Freiburg (almost sold out). Also, the SmashingConf Barcelona website has just gone live, and the tickets will go on sale on May 31st at 14:00 CET. Watch out for that one! ;-)
With bugs, never take "No" for an answer!
– Vitaly (@smashingmag)
Table of Contents
1. Take Your Sublime Skills To The Next Level
Learning by doing is one of the most effective ways to acquire new knowledge. That's also the idea behind Sublime Tutor, an interactive keyboard shortcut tutorial for Sublime Text 3. To give your Sublime workflow an efficiency boost, it provides exercises and shortcuts that will make you familiar with everything from basic to very advanced Sublime features. And the best part is that all of this happens right in your text editor — keeping you away from any distractions.
The tutor can be accessed directly from the Sublime menu or with a keyboard shortcut and is divided into six modules and 39 chapters that cover 70 features and shortcuts. Spaced repetition ensures that you remember them. A nice way to get you fit for using Sublime in all its glory. (cm)
2. Front End Metrics From News Sites Around The World
Metrics give us an interesting insight into the state of front end, and at how widespread the best practices out in the wild actually are. Front end developer Francesco Schwarz decided to get to the bottom of this by gathering data from 80 big news websites that, with their massive reach and traffic, have a certain responsibility of delivering quality front end code and serving information as fast and accessible as possible.
The metrics that Francesco checked for range from transferred page weights (both cached and uncached) and SSL encryption to usage of heading elements and usability without JavaScript. The results are in some cases quite surprising. Washington Post, for example, has a fully encrypted website (the only one among the tested sites) but, on the other hand, it doesn't use any heading elements in HTML (just like eight other sites in the test). When it comes to caching, most sites do a good job (cnn.com being an exception here weighing in with 965KB cached), but almost all lose in the initial page call — 2 to 4 MB uncached are, unfortunately, no exception. (cm)
Advertisement
3. Timing UI Animations
How fast should UI animations be? That's a question Val Head gets asked a lot in workshops and talks. To answer it for all of us, she now wrote up her thoughts on the topic, backed up by data from research. And, well, as it turns out, working with a flexible range will serve your designs much better as applying one set duration value to all your animations.
Val suggests a range between 200ms and 500ms for interface animations. Small UI animations that involve smaller elements and only small amounts of change are well served by a range of 200ms to 300ms. For larger motion that takes up a lot of ground or uses complex bounce and elastic easing, she recommends 400ms to 500ms. Having reference points like these is good, but you should also keep in mind that these are only suggestions and more important than exact numbers is that your animation feels right. (cm)
4. Keyboard Navigation Done Right
When it comes to accessibility and providing ways to navigate a website only with the keyboard, a lot of websites have still some catching up to do. One that does an excellent job, however, is Starbucks. The Starbucks site is a breeze to navigate only with the Tab key — even the mega-menu doesn't impose any problems.
Right at the beginning of tabbing through the pages, you'll find three links that either take you to the navigation, the main content or the footer. A nice detail. Unfortunately, screen reader users aren't that well off in this case. As Accessibility Wins points out, Starbucks could still do better in regards to screenreader support. Especially the mega-menu that shines with keyboard support, doesn't tell a screen readers that the menu links are in fact toggles controlling extra links. Nevertheless, a great example of an accessible design pattern that improves the experience for a lot of people. (cm)
Advertisement
5. Pixel-Fitting For Crisp And Sharp Vector Graphics
To cater for sharp edges on vector graphics, on both Retina and non-Retina screens, we have to rely on antialiasing. However, computer-automized antialiasing is, unfortunately, far from perfect and often leads to blurry edges. So in order to cater for crisp shapes, pixel-fitting is still the best option. Admittedly, the manual work takes some more time, but it's worth to go the extra mile, especially for prominent graphics like a site logo.
A good primer on how to get pixel-fitting right comes from Dustin Curtis. In it, he compares pixel-fitted graphics with the automized output from a graphics editor, and, well, the results speak for themselves. (cm)
6. Approaching A Strategic Debugging Process
What's your approach to debugging? Imagine a podcast website loads extremely slowly, or not at all — but this happens only sometimes and on Chrome. Where would you begin your search for the bug?
When Una Kravets noticed that toolsday.io behaves like this, she asked the Twitter community to find the root of the problem. Remy Sharp set to work and, what's even more interesting as the solution, is his write-up of how he got there. In it, he shares how he replicated the bug and the process of how he narrowed down where the issue exists. A nice example of a strategic approach to debugging. (cm)
Advertisement
7. 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 New York
Workshops at SmashingConf Freiburg
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! (vf)
8. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
- UI Designer, Web Usability at Rockwell Collins (Annapolis, MD)
"Are you a front end developer with a seasoned workflow and taste for design? Do you enjoy taking new feature concepts from paper to production? Are you looking for competitive pay, project completion incentives, awesome benefits, and the opportunity to have every other Friday off? You just might be who we are looking for!" - Senior Interaction Designer at inSided (Amsterdam, The Netherlands)
"As an interaction designer you are passionate about design and technology. You have designed and shipped designs for multiple platforms and viewports. You have an opinion on trends, techniques and technologies in this field and like collaborating with other designers, product owners and developers to deliver new features to our communities. You like to innovate and experiment with design solutions but know that in the end it's all about users. You are confident to present the designs and decisions you make." - Senior User Interface Designer at Easy UX (India, Chandigarh)
"EasyUX is a website that provides information on easy to use interface designs, sharing reliable and professional information on UX & UI Design. We are currently seeking a Senior User Interface Designer for 6 months."
9. Smashing Highlights (From Our Archives)
- Functional Animation In UX Design
A good UX designer can easily explain the logic behind each decision in a design concept. This includes the information architecture, the hierarchy of page content, the flow and the assumptions made. Sooner or later, animation will be introduced to the wireframe concept, and then making design decisions or explaining them becomes harder. - Mobile And Accessibility: Why You Should Care And What You Can Do About It
Mobile has revolutionized the way we use the web. This is especially true of disabled users, for whom mobile devices open the door to a whole new spectrum of interactions. - Color Theory for Designers, Part 1: The Meaning of Color
Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background.
10. Recent Articles On Smashing Magazine
Design & Coding Articles
Freebies, Inspiration, Misc.
No comments:
Post a Comment