Tuesday, May 19, 2015

Smashing Newsletter #137: Smart Front End, Happy Icons and Browser Hacks

With perceived performance tricks and nifty map designs. Issue #137 Tuesday, May 19th 2015 180,678 readers View in the browser

The Smashing Email Newsletter

Dear Friends,

What was the latest challenge you accepted? Perhaps something uncomfortable, exciting or slightly frightening? Perhaps doing something you've never done before, or exploring a city you've never visited before? Or maybe even both? Well, we love creative challenges, and we love finding ways of making things work. In fact, we do it with everything, and guess what? Our latest challenge already lies ahead of us.

¡Mañana, mañana! The Smashing Conference in Barcelona is coming up in October 20–21, 2015
¡Mañana, mañana! The SmashingConf Barcelona 2015 is coming up in Oct 20–21. It's going to be quite smashing indeed.

A brand new Smashing Conference. In a brand new, special location. With the same guiding principles that we care about — a lot. Connecting with the community. Practical lessons learned. Pragmatic insights from people who've learned a thing or two from their very own experiences. Two days, 16 speakers, lots of networking. Sound like a good recipe to you?

Well, meet SmashingConf Barcelona, taking place on October 20–21st in the (unbelievable!) Palau de la Música Catalana in Barcelona, Spain. The first speakers are already announced, and the tickets go on sale on June 9th, at 14:00 CET. As usual, we only have 400 tickets available. Our new challenge, with a few new, mysterious ideas and good ol' focus on UX and front end. You better not miss this one! Seriously.

¡Mañana, mañana!
Vitaly (@smashingmag)

Table of Contents

1. Perceived Speed And Reactive Design
2. Diving Into Browser Hacks
3. Maps To Get Lost In
4. Smart Front-End Techniques
5. A Set Of Happy And Unique Icons
6. Get Back On Track With Batch Install Scripts And Tools
7. Displaying Large Data Sets Easily
8. Sidestep The Most Common Design Pitfalls
9. Mastering The True Craft Of Web Typography
10. Keep Calm And Attend A Smashing Workshop

1. Perceived Speed And Reactive Design

There is no better way to alienate your users than to make them wait. But even if our hands are tied when it comes to certain technical limitations, we can at least use UX to cater for a smooth and painless experience: perceived speed is the magic word. If you want to dive in deeper into the world of perceived performance, pre-rendering, filler content, and progressive image rendering, Spencer Grover's article "UX Tactics To Make Slow Things Seem Faster" is a good read for you.

Perceived Speed And Reactive Design

Spencer takes a closer look at how renowned companies such as Instagram and Google work around common speed pitfalls to connect their users quickly to the content they want. For even more insights about perceived speed, fellow front-end developer Gabin Aureche has started Reactive Design, a Tumblr blog where he collects interesting insights and little tricks to speed things up — or just make waiting times appear much shorter. Short and sweet, and with links to a plethora of articles on the matter. (cm)

2. Diving Into Browser Hacks

Browser hacks. Hopefully you won't need them, but sometimes you have to be pragmatic and get things done, especially if you need to actively support an old family of old browsers. Obviously, creating a separate partial dedicated specifically for legacy browsers is a good idea, so when the time comes, you can just keep removing stuff from the file, and reduce your technical debt. But how do you keep track of all those nasty browser hacks?

Diving Into Browser Hacks

Well, with BrowserHacks. The site provides an extensive list of browser-specific CSS and JavaScript hacks, i.e. for older Android browsers, Firefox, Internet Explorer and even Opera Mini. The list is well documented and tagged. You can search for a specific version of a specific browser and check available tests as well. Hopefully the resource won't be necessary in most cases, but helpful just in case you do end up needing it! (vf)

3. Maps To Get Lost In

Maps partake of something fascinating. They take you to distant places, sometimes even on a trip back in time, and, well, often they are just wonderful eye candy. To celebrate the beauty of the cartographic craft, the Tumblr blog Beautiful Maps is dedicated to maps of all shades.

Maps To Get Lost In

Old and modern maps are showcased in the collection that Dennys Hess has put together, some of them flagships of precision, some rather artistic takes on the subject. The collection takes you on a stroll through tangled streets and uncharted territories, vibrant graphics and subtle drawings. Such a pity that we rely almost entirely on our smartphones to guide us the way, isn't it? (cm)


4. Smart Front-End Techniques

It doesn't matter how much you experiment with front end, there is always something to be discovered, and new use cases to consider. What if you wanted to establish a dynamic type hierarchy that depends both on width and height of the viewport? Well, you could use calc(2em + 2vw + 2vh) for font-size, for instance, using viewport width and viewport heights to control the size of the type.

Smart Front-End Techniques

Or, to preserve the pixels of a [articular image when it gets bloated up, you could use the image-rendering property in CSS. You could also combine quantity queries with Flexbox to style elements based on quantity, or just arrange icons close to type, and perhaps use fancy pseudo-classes like :empty, :optional and :in-range along the way. Finally, you could also use animated CSS gradients with CSS alone and create motion blur effects for your animation, too. Yes, that's front end today, and it's pretty amazing! (vf)

5. A Set Of Happy And Unique Icons

You know how the saying goes, "Happiness is everywhere if you take the time to look"? Well, icons shouldn't be underestimated in our designs — you need to take the time to decide well. But then there are icons that don't even need a second look because they already look good at first glance, or perhaps just look happy right away. Take a peek at Happycons — you'll probably see what we mean.

A Set Of Happy And Unique Icons

This 'lil icon set is a set of 40 colorful, happy icons that will surely freshen up your designs. They're free to download, editable and available in 180px size in AI, Sketch, PNG, SVG and EPS formats. Feel free to use them to in your web projects or even print projects. They won't suit every project, but they might leave your users and visitors happy as well. So, what are you waiting for? (il)

6. Get Back On Track With Batch Install Scripts And Tools

How much time do you need to set up your working environment from scratch? And maybe it's not really about being prepared for the case of an emergency, but just having your tools and your setup ready to be ported to a new machine without unnecessary hassle. It's good to be prepared for every kind of situation, and having a proper setup in place within one hour would be ideal — and will save you quite some headaches down the line.

Get Back On Track With Batch Install Scripts And Tools

Automatic back-up is probably going to solve all your issues, but sometimes you might want to adjust global settings or batch install a few applications. You could just store all important data and installation files on a USB with a very detailed restoring machine guidelines for your working environment. There are also other tools and scripts available as well. Just make sure that you don't forget to bring over important files with you.

The guidelines provide an exact instruction what to do and what to avoid, commands to run in Terminal and settings to import, calendars to set up and notes to keep in mind. If you have one, too, why don't you share it as well, so everybody can use it? (vf)


7. Displaying Large Data Sets Easily

If you've been having performance issues displaying large data sets, well, you can now easily solve them with a tiny vanilla JavaScript plugin. To avoid DOM pollution, you can split the list into clusters, then show elements for current scroll position and add extra rows to the top and bottom of the list to emulate the full height of the table. That way, the browser can show a scroll bar for the full list. This lovely, useful little plugin is called Clusterize.js.

Displaying Large Data Sets Easily

You may be wondering whether it can also be used for anything other than a table? Sure, it can also be used for pretty much anything, including ordered and unordered lists or galleries. The library supports modern browsers and IE 8+. Licensed under the MIT license, this plugin could be something you may want to look into asap. (il)

8. Sidestep The Most Common Design Pitfalls

From "Nerd-Eye Blindness" to "Column Soup"... it's a jungle out there for newly-fledged web designers! In this free e-course, delivered weekly via email, author David Kadavy offers a helping hand, assisting the avoidance of the most common pitfalls designers make as they start out. What makes it extra interesting? The six-week course named "Design Pitfalls" is specifically geared towards the minds of developers.

Sidestep The Most Common Design Pitfalls

Kicking things off with the all too common font anxiety (how can you be sure you're picking the right one?), before moving on to font size stress, correct color selection and framework issues, the course rounds off with a warning to all hackers regarding UX and holding user attention. Registration closes this week, so if you're keen to join 30,000 other students, make sure not to miss the date. (cc)

9. Mastering The True Craft Of Web Typography

The time when web design was limited to just a handful of default system fonts seems like a distant memory. But with the coming of web font services, and all the choices they offer, the process of selecting and implementing the perfect typeface can sometimes feel like more of a chore and less of the pleasure that it should be.

Mastering The True Craft Of Web Typography

Donny Truong is here to help change that. With his new free eBook "Pro Web Type", described by Jeremy Keith as "practical and refreshingly succinct", Donny leads his readers step by step through the craft of making beautiful, successful typographic choices. From the various ways of delivering web fonts, through to selecting body text, setting type in the browser and picking type for UI, chapter by chapter, the website offers plenty of practical, applicable advice that is sure to put you back in confident control of your typography. (cc)


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.

Keep Calm And Attend A Smashing Workshop
Workshop image credits: Marc Thiele

Upcoming Online Workshops (2h):

Upcoming Smashing Workshops and Meet-Ups:

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.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — 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:

  • Senior UX Designer at YP (Glendale, CA)
    We're looking for a passionate candidate who has the ability to produce top-notch wireframes.

  • Animation Director at Rising Tide Games (Austin, TX)
    We're looking for talented and passionate artists to help build the next generation of social casino games in our new Austin studio.

  • Web Developer at Lamar University (Beaumont, TX)
    We're looking for a web developer with extensive knowledge of and skills with web technologies and best practices while delivering solutions contributing to user experience and the user interface.

Smashing Highlights (From Our Archive)

  • Writing Systems And Calligraphy Of The World
    The beauty of typography has no borders. While most of us work with the familiar Latin alphabet, international projects usually require quite extensive knowledge about less familiar writing systems from around the world.

  • Why Coding Style Matters
    When I was studying computer science in college, I had one extremely tough professor. His name was Dr. Maxey and he taught the more complicated courses like data structures and computer architecture.

  • Repurposing Photoshop For The Web
    Like any overzealous teenager aspiring to be a Web designer back in 1999, I found myself in an "Electronic Design" class, behind the wheel of one of those old-school aqua iMacs. If you found yourself in a similar situation, chances are you were given Adobe Photoshop as your vehicle for designing the Web. For me, it was version 6.0.

Recent Articles On Smashing Magazine

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

The authors are: Iris Lješnjanin (il), Vitaly Friedman (vf), Cosima Mielke (cm), Cat Clark (cc), Christiane Rosenberger (research), Elja Friedman (tools).

unsubscribe update preferences view in your browser

No comments:

Post a Comment