Smashing Newsletter: Secure Passwords, Style Guides and A Life Full Of Colors (Spring Edition)

This newsletter issue was sent out to 180,026 newsletter subscribers on Tuesday, May 27th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

With web technologies advancing every single day, there are a few quite remarkable improvements coming up our way very soon. Performance matters, and with smart browsers pushing the web forward, we should be able to develop smarter, faster and friendlier user interfaces much sooner than we think. But to do that, we need to be prepared for what’s coming up.

Editorial2

The future of responsive images looks bright: the picture element and srcset are already being implemented3 and there is no reason to wait4 — we can use them right away, with the shiny new Picturefill 2.0 to support legacy browsers. Besides, SPDY5, a predecessor of HTTP 2.0 with major speed improvements and a perfect fallback to HTTP 1.1, can be used today6 as well.

Flexbox7 and SVG8 are also gaining traction, speeding up the prototyping and development of smart, scalable websites. Finally, WOFF 2.0 (with a 30% better compression compared to WOFF 1.0) will be landing in Chrome 36, and Service Workers9, a smart replacement for AppCache, is on its way as well. Bright, isn’t it? And just before you ask, IE seems to play along nicely10, too! What else to wish, right?

Well, not all problems have been solved. The web is still way too slow on mobile, and faster networks around us won’t help us—so introducing performance budgets into design discussions will remain necessary and important. Media queries are not always the answer11, and to use them we will need JavaScript for quite some time. We need modular solutions, and unfortunately media queries alone can’t help us there. And this is going to be a big problem to tackle.

What problems have you been running in a lot recently? And what issues (except the support for legacy IE, of course) would you love to see solved? We’d love to hear your feedback via #smsolve12!

— Vitaly (@smashingmag)

Table of Contents

01. Typesetting Your CSS Objects, With Style Guides13
02. Griddify: Grids And Guide At Their Best14
03. Speed Up Your Site With Delayed Content15
04. The Science Of Selecting Secure, Memorable Passwords16
05. Smile, And Don’t Fall Off The Stage17
06. Fixing Fixed Bars, The Smart Way18
07. Learning Keyboard Shortcuts, One At A Time19
08. Buzzwords We Love To Hate20
09. A Life Full Of Colors21
10. Donuts, Lots Of (Canadian) Donuts…22
11. Full-Day Smashing Workshops23

241. Typesetting Your CSS Objects, With Style Guides

Styleguides. When building a responsive project, atomic approach25 or element collages26 can be quite helpful if you want to establish a visual direction first, then design the smallest units of your design, and finally combine the components into larger modules to build actual pages. However, usually we think about basic components in these approaches, but we could actually apply it to the interface elements of web apps as well.

Typesetting Your CSS Objects, With Style Guides27

Edenspiekermann’s case study on Typesetting CSS Objects28 provides some insights into how the design agency built a style guide for the font foundry FontShop and how the “FontShop Styleguide29” was built using KSS. The components were separated into globals30, objects31 and modules32 using dedicated class names for each group. An interesting insight into a more complicated responsive project. Worth reading! (vf)

332. Griddify: Grids And Guide At Their Best

If you’re a visual designer, chances are high that you live and breathe Photoshop — and know all of its little quirks and keyboard shortcuts, tricks and techniques, as well as the dos and don’ts. And yet, every now and again, you still find yourself squeezing and straining your eyes to focus very closely on a few fine design components to make sure that they’re aligned nicely on a guide. Don’t you just sometimes wish you had a smarter guide or grid generator to help you align all of the design elements efficiently, and without so much eye strain?

Griddify: Grids And Guide At Their Best34

Well, once you’ve tried Griddify35, you’ll be doing the happy dance in no time. This open-source tool helps you compose custom grid systems, vertical rhythm, and a whole bunch of other stuff with guides in Photoshop. The tiny, fast Photoshop panel allows you to define any custom grid easily, and you can either use the Photoshop CC version or the newly released CS6 version. Of course, the project is hosted on GitHub36 where you can also report issues in case you do happen to stumble upon any. (il)

373. Speed Up Your Site With Delayed Content

When it comes to speeding up your site, reducing the number of HTTP requests is usually the first thing to do. However, there remains one area that could turn out to be a real performance killer: gravatars. Although their requests are pretty small and Gravatar’s servers are usually pretty fast, they can easily add up to delays of several seconds on a page with a lot of comments. Luckily, there is a smart and simple solution to circumvent this: loading the avatars only after the rest of the content has loaded38.

Speed Up Your Site With Delayed Content39

All it takes is to use the HTML5 data attribute on a comment (instead of the img tag) and use JavaScript to load gravatars once the page has fully loaded (the article’s example provides a jQuery script). Since comments usually already have a textual name attached, the avatars could be considered just a visual enhancement and as such, if JavaScript is not available, don’t ruin the user experience on the page. A practical solution that might also come in handy for other elements which aren’t critical to the page and could be delayed to give way to more important content. (cm)

404. The Science Of Selecting Secure, Memorable Passwords

It feels like each of us has at least a hundred web accounts and they are all protected by one single thing: the almighty password. We know that we shouldn’t use the same password for every account, and so sometimes we use password managers with a master password to be able to keep track of the passwords that it, well, manages. Nor are we really capable of memorizing a different key phrase for each site that we use. And since it’s good practice to include a combination of special characters and numbers in the password, keeping track of all the passwords can be quite a nightmare.

The Science Of Selecting Secure, Memorable Passwords41

So what can you do, especially if you don’t want to rely on sophisticated, advanced password managers? Hans Anderson wrote an article on creating secure password patterns42 with a few guidelines on how to use a pattern to keep your accounts safe and sound and the passwords easy to memorize. Troy Hunt has also analyzed how people choose their passwords43 and provides a few common patterns that we should avoid when selecting our passwords. (ml)

445. Smile, And Don’t Fall Off The Stage

If you’re passionate about anything, no matter what that is, it’s very likely that you’ll find yourself speaking publicly one day, sharing your passion with your fellow colleagues. Our community loves to meet in order to learn and share, and sooner or later it might be you who’s up there on stage because you have something interesting to share with your peers! So, getting ready for your big gig already?

Smile, And Don't Fall Off The Stage45

While speaking in public can be a blast, there’s a horrible number of things that can go wrong. Your long dangly earrings which you’ve forgotten to take off could mess up your headset microphones. You could even vomit from sheer fear, or fall off the stage. Well, if you do happen to fall off the stage, don’t acknowledge it. Pretend it was a part of your gig. Never apologize for your mistakes. What the audience doesn’t know, doesn’t hurt them. For more great advice, check out Mark Boulton’s Speaking And Audience Tips46, Frank’s Suggestions For Speakers47 and Ethan’s Speaking? Pack A Plan.48 (ea)

496. Fixing Fixed Bars, The Smart Way

In the good ol’ days, we used to rely on carousels to hide some parts of the content but still make them accessible from a prominent spot on the front page. Now that carousel’s reputation50 has51 suffered52, we tend to ignore the pattern altogether. And that’s good! However, fixed bars are becoming a new nightmare today—especially on mobile where you don’t have a lot of space available anyway. But if you do want to keep the navigation accessible, you don’t need to reserve a slot for header to do it.

Fixing Fixed Bars, The Smart Way53

One option is to keep the navigation icon (preferably just a button with the text “Menu” on it) in the right upper corner, semi-transparent and let it flow with the content as you scroll, hence not blocking an area of the page at the top of the screen. Another option is to follow Medium’s UX pattern and make the navigation fade away as the user scrolls down, and bring it back into a fixed position whenever the user scrolls back up. Dmitry Fadeyev has summarized a few interesting options54 for the scroll up bar, and you can also use Smart Fixed Header55, a vanilla JavaScript that allows you to set how many pixels from the top of the page to initialize (delay) and sensitivity (sensitivity). Alternatively, you can use Headroom.js56 as well. Another problem conveniently solved! (vf)

577. Learning Keyboard Shortcuts, One At A Time

Ah, the good ol’ keyboard shortcuts! There are quite a few of them that we’ve learned to love over the years, but many of them still remain unknown, mostly because they often remain hidden in documentation or convoluted help files. If you really want to speed up your work a little bit at a time, why not search for keyboard shortcuts of your most used application, or just memorize a shortcut from the context menu?

Learning Keyboard Shortcuts, One At A Time58

Image source: Taking control of Mac’s clipboard59

For example, if you spend a lot of time working in a text editor on Mac, try inserting your cursor partway through a paragraph and hitting Ctrl + K. This should “kill” all of the text from that point to the end of the paragraph. You accidentally switched two characters around the cursor? No worries, just hit Ctrl + T to transpose the characters. If you want to paste the text as plain text without formatting, use Shift + Option + Cmd + V (Ctrl + Shift + V on Windows).

Looking for more? Explore shortcuts for Windows60 and shortcuts for Mac61. Do you have a favorite keyboard shortcut? Share it with us using the hash tag #smkbd on Twitter! (vf)

628. Buzzwords We Love To Hate

Are there any words in English that you just cannot see anymore? How about “big data”, “disruption”, “codify” — or even worse — “monetize”? You may be thinking, “What’s the big deal? I use those words every day, they’re just words.” Well, it all started with Carl Smith, a self-proclaimed deviant hippie. Carl was working on a project with a few friends when one of his most abhorred words worked its way into the conversation: “paradigm shift”. It could be marketing jargon or just a phrase that works on your nerves, so Carl collated a list of buzzwords we love to hate63.

Buzzwords We Love To Hate64

Sure, it’s not the words’ fault; they merely exist because we brought them into being and gave them meaning. And it’s exactly that what Carl detests, the meaning we have given to jargon terms. These terms are so overused and tired that they don’t mean much anymore, and can often lead conversations in a strange direction, or are used to create a big deal out of nothing. A good reminder of the words to avoid during your next meeting, maybe? (sh)

659. A Life Full Of Colors

What do the visual design of eBoy, iOS 7, Mike Oldfield and Lake Michigan in Spring have in common? For designer Nigel Evan Dennis, it’s the color blue. According to Nigel, everything contains a palette, and everything around us has been designed by someone at some point. Some palettes work better than others though, and Nigel collects the ones that he finds particularly interesting and worth capturing.

A Life Full Of Colors66

His project, thedayscolor67, is dedicated to just that: a daily color digest, with a variety of background colors and the source of inspiration for each palette. The artists is collecting his ideas which come to him by songs, nature or by his daily activities. What colors would you associate Radiohead’s “kid A” with? Does it sound grey, red and blue for you, too? (kv)

6810. Donuts, Lots Of (Canadian) Donuts…

Life can be complicated, but ordering coffee and donuts should really be no big deal, right? Are you sure? Yes? Great! Alright, then I’ll have a Double-Double along with a Dutchie, a Boston Cream, a Strawberry Blossom and, umm, a bunch of Apple Fritter Timbits, please! Yeah, I know, that’s quite a lot of sugar… but I’m just so hungry! Wait, what? You have no idea what I’m even talking about?!

Donuts, Lots Of (Canadian) Donuts...69

Unless you’re not from Canada, then I’m not surprised. You have just outed yourself as someone who does not possess the (highest possible) qualifications for ordering coffee and donuts at the one and only Tim Hortons restaurant in Canada. No need to worry though! We’ve found a fun place where you can learn all you need to know in case you do happen to pass by a Tim Hortons restaurant. Welcome to Lots Of Donuts70! (ea)

7111. Full-Day Smashing Workshops

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: full practical days that will help you become a better front-end expert, today.

Full-Day Smashing Workshops72

Here are a couple of practical, hands-on workshops you may want to consider attending:

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly[at]smashingconf[dot]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)

The authors in this newsletter are: Cosima Mielke (cm), Melanie Lang (ml), Esther Arends (ea), Shavaughn Haack (sh), Kristina Vogt (kv), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://alistapart.com/article/creating-style-guides
  3. 3 http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
  4. 4 http://timkadlec.com/2014/05/dont-wait-on-responsive-images/
  5. 5 https://developers.google.com/speed/spdy/
  6. 6 http://caniuse.com/spdy
  7. 7 http://zomigi.com/blog/leveling-up-with-flexbox/
  8. 8 http://filamentgroup.com/lab/artifact-austin-svg-workflow.html
  9. 9 http://jakearchibald.com/2014/service-worker-first-draft/
  10. 10 http://status.modern.ie/
  11. 11 http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
  12. 12 https://twitter.com/hashtag/smsolve?f=realtime&src=hash
  13. 13 #a1
  14. 14 #a2
  15. 15 #a3
  16. 16 #a4
  17. 17 #a5
  18. 18 #a6
  19. 19 #a7
  20. 20 #a8
  21. 21 #a9
  22. 22 #a10
  23. 23 #a11
  24. 24 #
  25. 25 http://bradfrostweb.com/blog/post/atomic-web-design/
  26. 26 http://danielmall.com/articles/rif-element-collages/
  27. 27 http://www.edenspiekermann.com/blog/typesetting-your-css-objects
  28. 28 http://www.edenspiekermann.com/blog/typesetting-your-css-objects
  29. 29 http://next.fontshop.com/styleguide/
  30. 30 http://next.fontshop.com/styleguide/globals
  31. 31 http://next.fontshop.com/styleguide/objects
  32. 32 http://next.fontshop.com/styleguide/modules
  33. 33 #
  34. 34 http://gelobi.org/griddify/
  35. 35 http://gelobi.org/griddify/
  36. 36 https://github.com/pixana/griddify
  37. 37 #
  38. 38 http://24ways.org/2010/speed-up-your-site-with-delayed-content/
  39. 39 http://24ways.org/2010/speed-up-your-site-with-delayed-content/
  40. 40 #
  41. 41 http://ha17.com/768-remember-secure-passwords-create-a-password-pattern/
  42. 42 http://ha17.com/768-remember-secure-passwords-create-a-password-pattern/
  43. 43 http://www.troyhunt.com/2011/07/science-of-password-selection.html
  44. 44 #
  45. 45 http://frankchimero.com/blog/suggestions-for-speakers/
  46. 46 http://markboulton.co.uk/journal/speakingtips
  47. 47 http://frankchimero.com/blog/suggestions-for-speakers/
  48. 48 http://unstoppablerobotninja.com/entry/speaking-pack-a-plan/
  49. 49 #
  50. 50 http://shouldiuseacarousel.com/
  51. 51 http://bradfrostweb.com/blog/post/carousels/
  52. 52 http://weedygarden.net/2013/01/carousel-stats/
  53. 53 http://usabilitypost.com/2014/05/24/the-scroll-up-bar/
  54. 54 http://usabilitypost.com/2014/05/24/the-scroll-up-bar/
  55. 55 http://codepen.io/hkfoster/pen/zulGs/
  56. 56 http://wicky.nillia.ms/headroom.js/
  57. 57 #
  58. 58 http://mac.tutsplus.com/tutorials/productivity/take-control-of-your-macs-clipboard/
  59. 59 http://mac.tutsplus.com/tutorials/productivity/take-control-of-your-macs-clipboard/
  60. 60 http://msdn.microsoft.com/en-us/library/aa259912(v=vs.60).aspx
  61. 61 http://guides.macrumors.com/Keyboard_shortcuts
  62. 62 #
  63. 63 http://www.ngenworks.com/blog/250-buzzwords-we-love-to-hate
  64. 64 http://www.ngenworks.com/blog/250-buzzwords-we-love-to-hate
  65. 65 #
  66. 66 http://www.thedayscolor.com/#info
  67. 67 http://www.thedayscolor.com/#info
  68. 68 #
  69. 69 http://lotsofdonuts.com/
  70. 70 http://lotsofdonuts.com/
  71. 71 #
  72. 72 http://www.smashingmagazine.com/workshops/
  73. 73 https://shop.smashingmagazine.com/smashingconf-ny-workshop-dan-rose-resonsive-photoshoppian.html
  74. 74 https://shop.smashingmagazine.com/smashing-conference-new-york-workshop-jonathan-snook-smacss.html
  75. 75 https://shop.smashingmagazine.com/smashingconf-ny-workshop-fabio-carneiro-newsletter-design.html
  76. 76 https://shop.smashingmagazine.com/smashing-workshop-friedman-responsive-design-karlsruhe.html

The Smashing Newsletter Team prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' Web with the latest tips and tricks for designers and Web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Advertising
  1. 1

    Pieter-Jan de Vries

    May 29, 2014 7:28 am

    Hi,

    Just want to let you know that I love your Smashing Newsletters and look forward to the next issue each and every time.

    Regards,

    Pieter-Jan de Vries
    Obix webtechniek

    3

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top