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 newsletter anytime.
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 anniversary, 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 you. 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 ball 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, SmashingMag, and a very Happy Birthday to you all!
— Vitaly (@smashingmag)
01. Generate PDFs On The Fly
02. Don’t Sweat Your CSS Code
03. Photoshop And Illustrator Cheatsheets
04. LoremData: Generate Any Data Online
05. Fasten Your Seatbelts For A Journey Through Time
06. Washicons Freebie: Care For Your Laundry!
07. Sweet And Spicy Type
08. Free Vector Shapes For Photoshop: Basiliq It!
09. How Can We Make Computers Feel Faster?
10. London, Get Ready To Be Smashed!
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)
So how can we speed up and optimize the workflow of writing clean and uncluttered CSS code? Well, ExtractCSS 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.
uCSS 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)
Don’t worry, this is a cheatsheet you’re allowed to have. Zerolag has released free Photoshop and Illustrator CS6 cheatsheets 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)
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? Generatedata 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.
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 Stock, 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)
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.
Washicons 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)
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 Evans‘ 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 Typography 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 video explains how they were created. Why don’t you submit your tasty weekend masterpiece to the Tumblog as well? (kv)
The Cloud Castle Group have released a set with over 300 UI design elements 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)
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?
Faster Progress Bars 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)
We cannot emphasize enough the importance of quality. With our full-day workshops 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 Design and Photography while Addy Osmani will be running one later this year on how to become a Front-End Warrior.
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 List 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).
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!
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!