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