Smashing Newsletter: Issue #95

This newsletter issue was sent out to 163,599 newsletter subscribers on Thursday, October 17th 2013. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

A good conference is all about inspiring talks, practical takeaways and as much networking as possible. As part of a community, we all value learning and sharing, and an intimate, personal community event is what enriches and supports each and every single one of us. After two overwhelming Smashing conferences in our hometown Freiburg, we’re now very happy to raise the bar and take our conference on the road. Oxford… here we come!2

Editorial3
Same game, same rules: 1 track, 2 conference days, 5 workshops, 18 excellent speakers and just 350 available seats.

Mark your calendars: the Smashing Conference Oxford 20144 will be held in the one-of-a-kind Oxford Town Hall5 on March 18th–19th 2014. It will focus on practical takeaways, workflows and hands-on insights. We’re setting off to explore what works and doesn’t work in real-life projects and we want every talk to deliver tangible, actionable points that we all could learn from and use right away.

Ready? Well, first confirmed speakers are:

  • Andrew Clarke (All That Malarkey),
  • Lea Verou (“CSS Queen”),
  • Josh Clark (Global Moxie),
  • Wilson Page (Financial Times),
  • Ben Bodien (Neutron Creations),
  • Joe Leech (cxpartners),
  • …more speakers will be announced soon!

We pour our heart and soul into creating a friendly, memorable and inspiring community event for everybody involved. We will keep the ticket prices as affordable as possible, too. The tickets go on sale6 on Tuesday, October 22, at 14:00 CEST (8:00 EDT).

We’d be honored and humbled to see you in Oxford next year. It was about time for beers, wasn’t it? ;-)

— Vitaly (@smashingconf)

Table of Contents

01. Going An Extra Mile With SVG7
02. Don’t Let Good Ideas Pass You By!8
03. Rituals Of History’s Most Creative Minds9
04. Hostnames That You Can Easily Remember10
05. Reviving Hand Lettering11
06. Group Layer Renaming Photoshop Script By Captain Awesome12
07. A GitHub-Like Autocomplete Library13
08. Cocktails For Programmers14
09. Tasty Free Icons15
10. Come on, Mario! Let’s Go Save The Princess!16
11. Smashing Workshops In Berlin And London17

181. Going An Extra Mile With SVG

SVG is still extremely underrated. Usually, we tend to use SVG just as a scalable replacement for static PNG images, but we can actually go much further than that, by combining media queries, animations and even JavaScript with SVG. Now, this is where SVG truly shines!

Going An Extra Mile With SVG19

What about animated checkboxes and radio buttons with SVG20 using adjacent sibling selector for targeting the label and its pseudo-element? Or what about a responsive image map with SVG21 using SVG shapes and paths? The techniques aren’t quite bulletproof yet, and we do need a PNG-fallback, but of course we can enrich the experience in capable browsers and provide a “standard” functionality for the legacy browsers. We can use SVG22, you know. (vf)

232. Don’t Let Good Ideas Pass You By!

Think of how many times you let a good idea pass you by. Why? Was it not good enough? Oh, it was, but passion wasn’t involved? Well, Jeremy Loyd24 is a perfect example of how his idea was inspired by true love — for a TV show. Now for those of you who haven’t heard of Breaking Bad, it’s about time. Even the acting legend Anthony Hopkins25 says that the show is a must-see!

Don't Let Good Ideas Pass You By!26

Branding Bad27 is a wonderful collection of logos that have been designed by Jeremy for each of the eight final episodes of the Breaking Bad show. He has been asked by several people if he’d create logos for the remaining 50+ episodes, but he’s not ready to take that on quite yet. But why not encourage him via Twitter28 every now and then? We know we will! (ea)

293. Rituals Of History’s Most Creative Minds

Ever wonder what a typical day in the life of a history maker looked like? Oliver Burkeman reviews Daily Rituals, a work by Mason Curry, and let’s you in on the daily rituals of history’s most creative minds.

Rituals Of History's Most Creative Minds30

Who would’ve thought that waking up at the crack of dawn or eating the same thing every day for breakfast would do the trick to get your creative juices flowing? While many of the rituals are a bit out there, Burkeman highlights six lessons31 that we can learn from and try them out ourselves. (sh)

324. Hostnames That You Can Easily Remember

Most of you will most probably be familiar with this situation: you’ve set up a bunch of connected machines that you have to manage, yet how do you call them? Of course, referring to IP addresses is an option and this might work well in the documentation, but probably not in meetings. Instead of memorizing last digits of each address, you’ll probably come up with some sort of a category for every bunch of servers.

Hostnames That You Can Easily Remember33
Image credit: xmodulo34

Greg Ercolano has collected quite a few ideas for hostnames35 to save you one giant headache. Greg’s list includes lakes, parks, streets, airports, planets, Greek as well as Roman gods, literature and even movie characters. We have to admit: this mnemonic technique of remembering hostnames is one of a kind! (vf)

365. Reviving Hand Lettering

Hand lettering has become a rare sight in our digital times. A real shame, as its unique elaborate yet impromptu look can give your project the finishing touch. If you’re looking for some hand lettering inspiration or are eager to learn it yourself, we recommend In A Brush37, a pretty collection of hand-lettered pieces. This showcase features lettering in its rawest form, without any edits. A special highlight are the animated gifs that illustrate how strokes come to life — incredibly inspirational!

Reviving Hand Lettering38

If you want to take on the pen yourself, Sean McCabe’s article “So You Want To Learn Hand Lettering?39” is a great place to start. It explores techniques, methods and styles you should get to know first in order to develop your own hand lettering process. What more need be said? Grab your pens and practice, practice, practice! (cm)

406. Group Layer Renaming Photoshop Script By Captain Awesome

Got some OCD issues when it comes to organizing your Photoshop layers? Look no further, Captain Awesome41 is here! Kamil Khadeyev has come up with a script that will help you with group layer renaming — a script that can append, prepend or replace layer names with entered text.

Group Layer Renaming Photoshop Script By Captain Awesome42

All you need to do is download and install the script. After that, you’ll need to select target layers, run the script, enter the new text and choose a renaming method. Et voilà! It should do wonders to your workflow. (sh)

437. A GitHub-Like Autocomplete Library

If you have a set of common phrases or keywords that you keep using for your internal communication, wouldn’t it be nice to have an autocomplete library that would suggest those keywords as you type your comment into a textarea field? This might be helpful especially if those keywords are quite lengthy or error-prone.

A GitHub-Like Autocomplete Library44

Harold Luo’s At.js45 is an auto-complete library that “feels” very much like the one implemented on GitHub or Facebook. As you type, you can prefix keywords with a semicolon or @-symbol and select the keyword in an appearing drop-down below. You can also define more listeners for different characters with different behavior and data. The library requires jQuery 1.7.0+ and Caret.js and is available on GitHub46. (vf)

478. Cocktails For Programmers

I’m not sure how many of us were really aware of what an important day September the 13th was. That day was, yes, a Friday this year, but it was also “Programmers’ Day”. And believe it or not, this day has been a professional holiday in Russia for the past 4 years. How did it all start, you ask? Well, Ilya Zykin wanted to celebrate this day in a very special way, i.e. with Cocktails for Programmers48.

Cocktails For Programmers49

“The more the merrier,” seems to be the principle. The Mason Jar50 offers home-crafted, open-source cocktails and accoutrements for everyone to try all year round, and everyone is invited to contribute. New recipies are added and sorted by the level of “poison”. Fact is, you’re now fully prepared for next year’s Happy Programmers’ Day! (kv)

519. Tasty Free Icons

Everybody loves well-designed icons. And even if they aren’t quite appropriate for your current project, having a couple of sets in the bookmarks for future reference is always a good idea. Still a graphic design student in Brazil, Guilherme Zamarioli, has made one of his icon design projects available for free download: Fruit Icons52. The set contains 11 icons, in colour or plain.

Tasty Free Icons53

Not interested in fruit? What about weather icons? Korean designer Heeyeun Jeong’s Weather PSD Icons54 depict — how appropriate — a great variety of mainly bad weather situations. Of course some of the 85 icons are also show the good weather still lying ahead. Even if autumn won’t loosen his tight grip for a while, online you can get some autonomy back. (kv)

5510. Come on, Mario! Let’s Go Save The Princess!

We’re in the year 1981. We’re also a small Japanese video game company that goes by the name of “Nintendo”. We’ve just tried to get a foothold in the American market by launching an arcade game, but things don’t look very promising. We’re actually close to financial collapse. We need a solution. We need a game that appeals to the Americans, and we need it now!

Come on, Mario! Let's Go Save The Princess!56

We assign our youngest designer Shigeru Miyamotoy to help us out, and before we knew it, Shigeru invents Donkey Kong57 — an arcade game that not only saves Nintendo, but also brings Jumpman to life. Jumpman is a little carpenter whose mission is to save a princess from a gorilla. He later becomes a plumber and is given the name “Mario”. This little plumber becomes so famous that he even gets his own star on Hollywood’s Walk of Fame!

If you love our little hero, then you’ll love exploring all of his eras in The Museum Of Mario58. An iconic experience built by the HTML5 Hub59. (ea)

6011. Smashing Workshops In Berlin And London

Alright, so you know it already. Smashing Workshops, with high-profile coaches and a strong focus on hands-on, practical takeaways. London and Berlin, no exaggerated pricing and a full day of valuable learning. Ready? Action!61

Smashing Workshops In Berlin And London62

The upcoming Smashing workshops are:

Do you still need to convince your boss? Drop an email to Vitaly at vitaly[@]smashingconf.com71 and he’ll personally get in touch and sort it out. We look forward to seeing you at one of our workshops soon! (vf)

The authors in this newsletter are: Esther Arends (ea), Shavaughn Haack (sh), Cosima Mielke (cm), 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.smashingconf.com
  3. 3 http://www.smashingconf.com
  4. 4 http://www.smashingconf.com
  5. 5 http://smashingconf.com/locations
  6. 6 http://smashingconf.com/registration
  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 #a11
  18. 18 #
  19. 19 http://tympanus.net/codrops/2013/10/15/animated-checkboxes-and-radio-buttons-with-svg
  20. 20 http://tympanus.net/codrops/2013/10/15/animated-checkboxes-and-radio-buttons-with-svg
  21. 21 http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
  22. 22 http://caniuse.com/#search=svg
  23. 23 #
  24. 24 http://www.jloyd.net/
  25. 25 http://www.telegraph.co.uk/culture/tvandradio/10378413/Breaking-Bad-Anthony-Hopkins-writes-fan-letter-to-Bryan-Cranston-and-cast.html
  26. 26 http://www.brandingbad.com/
  27. 27 http://www.brandingbad.com/
  28. 28 https://twitter.com/jeremyloyd
  29. 29 #
  30. 30 http://www.theguardian.com/science/2013/oct/05/daily-rituals-creative-minds-mason-currey
  31. 31 http://www.theguardian.com/science/2013/oct/05/daily-rituals-creative-minds-mason-currey
  32. 32 #
  33. 33 http://seriss.com/people/erco/unixtools/hostnames.html
  34. 34 http://www.flickr.com/photos/xmodulo/9225456205/sizes/m/in/photostream/
  35. 35 http://seriss.com/people/erco/unixtools/hostnames.html
  36. 36 #
  37. 37 http://inabrush.com/
  38. 38 http://inabrush.com/
  39. 39 http://seanwes.com/learn/
  40. 40 #
  41. 41 http://blog.kam88.com/en/group-layer-renaming-script.html
  42. 42 http://blog.kam88.com/en/group-layer-renaming-script.html
  43. 43 #
  44. 44 http://ichord.github.io/At.js/
  45. 45 http://ichord.github.io/At.js/
  46. 46 https://github.com/ichord/At.js
  47. 47 #
  48. 48 https://github.com/the-teacher/cocktails_for_programmers/blob/master/cocktails_for_programers.md
  49. 49
  50. 50 http://www.the-mason-jar.com/
  51. 51 #
  52. 52 http://thenounproject.com/guiez/#
  53. 53 http://www.behance.net/gallery/Fruit-Icons/11211109
  54. 54 http://www.behance.net/gallery/Weather-icons/11089443
  55. 55 #
  56. 56 http://mario.ign.com/
  57. 57 http://mario.ign.com/arcade-era/donkey-kong
  58. 58 http://mario.ign.com/
  59. 59 http://html5hub.com/#i.1gcymlaytcev8u
  60. 60 #
  61. 61 https://shop.smashingmagazine.com/workshops/
  62. 62 https://shop.smashingmagazine.com/workshops/
  63. 63 https://shop.smashingmagazine.com/smashing-workshop-visual-design-essentials.html
  64. 64 https://shop.smashingmagazine.com/smashing-workshop-responsive-design-london.html
  65. 65 https://shop.smashingmagazine.com/smashing-workshop-the-front-end-warrior-workshop-london.html
  66. 66 https://shop.smashingmagazine.com/smashing-workshop-adaptive-interfaces-london.html
  67. 67 https://shop.smashingmagazine.com/smashing-workshop-stephen-hay-responsive-design-workflow.html
  68. 68 https://shop.smashingmagazine.com/smashing-workshop-hands-on-prototyping-for-designers.html
  69. 69 https://shop.smashingmagazine.com/smashing-workshop-nodejs-knowledge-smash-and-grab-berlin.html
  70. 70 https://shop.smashingmagazine.com/smashing-workshop-shipping-your-product-berlin.html
  71. 71 mailto:vitaly[@]smashingconf.com

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

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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