Smashing Newsletter: Issue #92

This newsletter issue was sent out to 160,131 newsletter subscribers on Thursday, September 5th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

There are days that make you remember how things used to be, how they evolved over time and what your current direction in life is. Today is one of those days. It’s the day when it all started — the day when Smashing Magazine launched back in 2006. We celebrate our 7th anniversary2, and you, dear reader, are one of many who have made it possible and have kept us going.

Editorial3

To celebrate this special day, we have prepared a little something for you4. Obviously, we can’t buy a round of beer just yet, but we do have something a bit more… permanent and special: a Smashing stress relief ball5 and special birthday prices for our printed books, of course.

It’s been 7 years but the journey has just begun. We have a lot more in store, and we aren’t afraid of new challenges and are more than happy to take this journey with you. A huge thank you for being so helpful, engaging and supportive, and for staying with us all this time. It means the world to us. You mean the world to us.

Now it’s time to make a wish and blow out the candles… Happy Birthday, SmashingMag6, and a very Happy Birthday to you all!

— Vitaly (@smashingmag)

Table of Contents

01. Generate PDFs On The Fly7
02. Don’t Sweat Your CSS Code8
03. Photoshop And Illustrator Cheatsheets9
04. LoremData: Generate Any Data Online10
05. Fasten Your Seatbelts For A Journey Through Time11
06. Washicons Freebie: Care For Your Laundry!12
07. Sweet And Spicy Type13
08. Free Vector Shapes For Photoshop: Basiliq It!14
09. How Can We Make Computers Feel Faster?15
10. London, Get Ready To Be Smashed!16

171. Generate PDFs On The Fly

Usually, the fastest way to generate PDFs is to include a server-side script or perform it locally. But not anymore! jsPDF is an entirely client-side-based HTML5 solution that gets along without any server-side scripts. This free JavaScript library18 offers many built-in functions such as styling texts, inserting images and drawing shapes. Furthermore, it even supports landscape layouts and multi-page documents.

Generate PDFs On The Fly19

Integrating jsPDF is simple. All you have to do is include the jsPDF library in the <head> section of your markup, hook up a button to trigger the download and you’re ready to go. jsPDF is compatible with most browsers and offers a flash-based fallback for the ones that don’t naturally support it. Great for event tickets, reports, certificates — whatever you can think of! (cm)

202. Don’t Sweat Your CSS Code

So how can we speed up and optimize the workflow of writing clean and uncluttered CSS code? Well, ExtractCSS21 is a great tool that will extract IDs, classes and even inline styles from your HTML sheet and output them in an CSS file. A range of customization options are available to match your preferences. It’s great if you are rebuilding a legacy website and want to get an overview of all classes or IDs used in HTML.

Don't Sweat Your CSS Code22

uCSS23 perfectly complements the above tool, as it finds unused CSS selectors given your HTML code base, detects duplicate CSS selectors and counts matches for each rule. uCSS is written for Node and can be used both as a library and as a command line tool. Moreover, it provides an extensive documentation on how to set it up. uCSS is still in beta and open for contribution on GitHub. (ml)

243. Photoshop And Illustrator Cheatsheets

Don’t worry, this is a cheatsheet you’re allowed to have. Zerolag has released free Photoshop and Illustrator CS6 cheatsheets25 that are bound to save you time and help speed up your workflow. Both print-friendly as well as code versions are available, so you can save them for future reference or share them on your website.

Photoshop And Illustrator Cheatsheets26

These Photoshop and Illustrator infographics are pretty useful as they both show which keys create a shortcut, and which combination of keys will give you yet another shortcut. If you’re anything like me, you’ve probably hit the wrong key combination by mistake in the past, resulting in something you didn’t want to happen at all. Like showing the grid in Photoshop, for example, and you weren’t sure how to hide it again. Now, this cheatsheet surely comes in handy to avoid such kind of mistakes! (sh)

274. LoremData: Generate Any Data Online

If you’re redesigning a website or testing a brand new system, you’re lucky if you have enough input to test whether your code breaks or not. But what if you start something from scratch and there isn’t any data material that can be used for testing? Generatedata3028 is a little online service that takes care of this problem. This tool lets you generate large sets of custom data in a variety of formats to use while testing software, databases and anything else.

LoremData: Generate Any Data Online29

Generatedata3028 is built using JavaScript, PHP, and MySQL. It’s open source and free to use on your server, but you can also set it up on your own server for a little donation. Now you don’t need to worry about data for your test suits anymore! (ml)

315. Fasten Your Seatbelts For A Journey Through Time

Browsing through old photos feels like you’ve boarded a secret time machine. Somehow we find ourselves slowly travelling back to the times of horn-rims and pastel-colored streetcars and, as we pick up speed, all of a sudden we find ourselves on buzzing streets populated by Ford T models and ladies wearing flamboyant heads. Although we’re not familiar with the people in the photos, we can somehow still relate to them.

Fasten Your Seatbelts For A Journey Through Time32

If you visit Cole Townsend’s website New Old Stock33, you may probably get this same particular feeling. The beautiful collection features old photos from public archives — all of them free of known copyright restrictions. Ranging from the beginning of the 20th century to the 70s, the photos are a mix of styles and various subjects. Well, what more can be said other than, “Have a pleasant journey through time — and a safe landing back to 2013!” (cm)

346. Washicons Freebie: Care For Your Laundry!

So you bought that shiny new piece of clothing and you want to rock the next party wearing it? And you think that it’s a good idea to wash it before wearing it? Wait! Before you cage it up to get soaked and spinned around… If you really care about that piece of clothing, then you may want to take a look at that little white label to check out the washing instructions first.

Washicons Freebie: Care For Your Laundry! 35

Usually you’ll find the washing instructions portrayed as symbols and text on most labels, e.g. Wash with similiar colors, Wash inside out, Do not bleach, or Drip dry. “Drip dry”? That actually translates into: Hang dripping wet garment from line or bar, in- or outdoors, without hand shaping or smoothing. Attention please, you really shouldn’t drip dry a Drip Dry In Shade piece of cloth in the sunlight. Never ever! The cloth will most probably turn into a monster.

Washicons36 is an icon set that offers 81 common washing and caring symbols drawn on a 32×32 pixel grid — for free download! If you’re as fascinated by these symbols and their meanings as I am, then check them out now! (ea)

377. Sweet And Spicy Type

Did your parents always keep telling you not to play with your food on your plate nor to use your fingers to shove those mashed potatoes into your mouth? Well, Danielle Evans38‘ parents probably never did that — or maybe they did — we don’t know. What we do know, however, is that she’s a pro at whetting anyone’s appetite for creativity!

Sweet And Spicy Type39

Food Typography40 features extraordinary artworks in which traditional food ingredients are used to generate glyphs and words. The artworks featured had been created for a social media campaign in Canada, and a short how-to video41 explains how they were created. Why don’t you submit your tasty weekend masterpiece to the Tumblog as well? (kv)

428. Free Vector Shapes For Photoshop: Basiliq It!

The Cloud Castle Group have released a set with over 300 UI design elements43 dedicated specifically for prototyping. As we all know, producing high quality mock-ups is important, but other prototyping tools create an ugly aesthetic. This extensive Basiliq collection of hand-crafted icons makes designing a user interface that much easier.

Free Vector Shapes For Photoshop: Basiliq It!44

And well, it’s fun too! Like designing and building your own puzzle, you are literally building mockups with your hands. It’s also a great way to collaborate as everyone can get ‘stuck in’. You can download the ZIP file containing the vector shapes for Photoshop — for free! (sh)

459. How Can We Make Computers Feel Faster?

Time tends to fly by, connections get faster, but some things seem to always remain slow. Perfect example: a progress bar inching its way across the screen! There are so many great innovations in UX nowadays, but nevermind how fast your connection is, that bar is never quick enough. What has really been done to ease this pain? Well, it’s a matter of perception. Apart from how fast the operation actually is, the perceived duration is at least as important. So, what can be done to make the loading at least feel as if the bar is progressing faster?

How Can We Make Computers Feel Faster?46

Two factors have shown to be most interesting: the manipulation of movement (i.e. pauses, accelerations) and the manipulation of visual attributes (i.e. pulsating effect, animated ribbing). Faster Progress Bars47 is a study that has been published by researchers from Carnegie Mellon University who have investigated which behavior worked best in improving the perceived performance of a bar. And the winner is: a backwards-moving and decelerating-ribbed progress bar. Now who would’ve thought that that would make the load time appear 11% faster than a solid colored bar?! (ea)

4810. London, Get Ready To Be Smashed!

We cannot emphasize enough the importance of quality. With our full-day workshops49 in Germany, we aim to bring together only the best experts from various fields of Web design and development. And if these workshops won’t help you get better and smarter, what will?

London, Get Ready To Be Smashed!50

We’re proud to announce that we’ll be smashing up London with top-notch workshops quite soon! Dan Rubin will be running two workshops in November and Decemeber this year: Visual Design51 and Photography52 while Addy Osmani will be running one later this year on how to become a Front-End Warrior53.

As a little token of appreciation, we are happy to provide you with a discount code SMASH50 that you can use to save 50€ on your next workshop. The code is valid until September 9th 2013. And don’t forget to subscribe to the Events List54 to stay updated and find out where and when the next workshops take place! (il)

The authors in this newsletter are: Cosima Mielke (cm), Melanie Lang (ml), Shavaughn Haack (sh), Esther Arends (ea), 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://www.smashingmagazine.com/2013/09/05/the-seven-years-that-changed-everything/
  3. 3 http://provide.smashingmagazine.com/birthday-2013/
  4. 4 http://shop.smashingmagazine.com/
  5. 5 https://shop.smashingmagazine.com/smashing-cody-mascot.html
  6. 6 http://provide.smashingmagazine.com/birthday-2013/
  7. 7 #a1
  8. 8 #a2
  9. 9 #a3
  10. 10 #a4
  11. 11 #a5
  12. 12 #a6
  13. 13 #a7
  14. 14 #a8
  15. 15 #a9
  16. 16 #a10
  17. 17 #
  18. 18 http://parall.ax/products/jspdf
  19. 19 http://parall.ax/products/jspdf
  20. 20 #
  21. 21 http://extractcss.com/
  22. 22 https://github.com/operasoftware/ucss/
  23. 23 https://github.com/operasoftware/ucss/
  24. 24 #
  25. 25 http://www.zerolag.com/infographics/
  26. 26 http://www.zerolag.com/infographics/
  27. 27 #
  28. 28 http://www.generatedata.com
  29. 29 http://www.generatedata.com
  30. 30 http://www.generatedata.com
  31. 31 #
  32. 32
  33. 33
  34. 34 #
  35. 35 http://lucijanblagonic.github.io/Washicons/
  36. 36 http://lucijanblagonic.github.io/Washicons/
  37. 37 #
  38. 38 http://www.youtube.com/watch?v=XaVI43q3Qn4
  39. 39 http://foodtypography.com/
  40. 40 http://foodtypography.com/
  41. 41 http://www.youtube.com/watch?v=XaVI43q3Qn4
  42. 42 #
  43. 43 http://cloudcastlegroup.com/blog/basiliq
  44. 44 http://cloudcastlegroup.com/blog/basiliq
  45. 45 #
  46. 46 http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
  47. 47 http://www.chrisharrison.net/projects/progressbars2/ProgressBarsHarrison.pdf
  48. 48 #
  49. 49 https://shop.smashingmagazine.com/workshops/
  50. 50 https://shop.smashingmagazine.com/workshops/#London
  51. 51 https://shop.smashingmagazine.com/smashing-workshop-visual-design-essentials.html
  52. 52 https://shop.smashingmagazine.com/smashing-workshop-seeing-the-shot.html
  53. 53 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-london.html
  54. 54 http://www.smashingmagazine.com/the-smashing-conference-list-join-in/

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. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

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