Smashing Newsletter: Issue #99
As the year comes to an end, you can’t help but look back, review where you’ve been, explore where you are, and determine where you are going next. For us, 2013 has been quite a year, with intense challenges, creative sparks, calm and busy moments, ambitious goals and plenty of animated GIFs2, among other things. Yet, when you look back, probably the most important memories are the ones that you can be proud of.
In our case, it’s 169 authors who published 269 articles this year, 34 newsletter issues, the SmashingConf 2013, the growth of our lovely Smashing Library and — most importantly — the monolithic Smashing Book 44. They matter. A lot. Because they are the reason why we keep going, and why we keep loving our craft so much.
So what are the projects that you are proud of this year? What are the things you wish you’d done differently? What are the things that you’d love to focus on next year? Why don’t you write them down? Print them out. Hang them on the wall. Make them your rules. And stick to them no matter what happens.
But it’s not all about work, of course. We wish each of you, dear readers, happy holidays, and calm and happy moments with your family and friends. Let the email application sit aside for a while, and make sure to savor these moments, to make sure that they’ll put a smile on your face even years after they have passed. Merry Christmas and a Happy New Year 2014, everyone. Let it be the best year in your life.
— Vitaly (@smashingmag)
Table of Contents
01. Part Time Jobs For Superheroes5
02. Spinning Loading Bars with CSS and SVG6
03. Grab A Christmas Cookie And Do Some Reading7
04. Turn Off Autocorrect!8
05. Icons On Four Wheels9
06. Reinventing Footnotes On The Web10
07. Web Font Specimen: Study Font Rendering Issues11
08. Convert CSV/Excel Into HTML/JSON12
09. To See Or Not To See With Ifvisible.js13
10. The Four Icon Challenge14
11. Finding Something Special — Finding The Noramoji15
12. Why A Coffee Shop Can Boost Your Creativity16
13. Photoshop Scripts and Tricks17
14. Let’s Fix It: In-House Smashing Workshops18
191. Part Time Jobs For Superheroes
Ever wondered what superheroes get up to on their downtime? I mean, they’ve got to pay the bills somehow, right? Chow Hon Lam shares his take on it with his superhero illustrations on Flickr depicting our favorite heroes in their day-to-day lives20.
Seriously, Spiderman’s web shooting ability can totally be used to string tennis rackets, and Iceman definitely has the power to help everyone out on a hot summer’s day by producing ice cubes. And at some point, the Flash has to rush in for a pizza! I think it’s quite plausible. What do you think? Do you also have some superpowers worth sharing in an illustration? (sh)
222. Spinning Loading Bars with CSS and SVG
Nobody likes waiting while they are actually waiting, so there is a good reason why we indicate that something is happening in the background when our users are in the middle of a process. In fact, when it comes to time-intensive tasks in our Web apps, loading spinners are a common element that provide visual feedback.
However, we don’t really need bitmap graphics to indicate progress in our Web apps. We could use a Data URI-encoded SVG spinner24 (with a PNG fallback) or, if you feel comfortable with empty
divs, you could also use CSS Spinners25. Voilà! A scalable, lightweight solution. And if you want more options, check The State of Spinners 201326 to see the pros and cons of various solutions. (vf)
273. Grab A Christmas Cookie And Do Some Reading
Only one more week until Christmas. To take some of the rush out of the season, and bring back a bit of the thrill of anticipation we used to feel when we were kids, what about a couple of advent calendars for the holidays? They offer some valuable insights and are definitely free of any seasonal kitsch. Instead, each calendar features an interesting article each day to make the wait until Christmas more pleasant.
With new ideas, techniques, code snippets, and much more 24 ways29 has set its sights on providing you with your daily dose of Web design and development during the holiday season. If you consider yourself a performance geek, you’ll probably love the Performance Calendar30, and for the UX people among you UXmas31 reveals a delightful little treat each day. Even the Mozilla Developer Network has its own holiday calendar32 filled with resources and demos.
There are so many things to check out that you’ll have plenty of reading material even over the holidays. But honestly, is there a better time to catch up on some extensive reading? (cm)
334. Turn Off Autocorrect!
Particularly if you find yourself switching between languages a lot, having Autocorrect hunt down your spelling errors can be quite annoying. In cases when the feature is counter-productive, it might be a good idea to deactivate it entirely. In general, turning Autocorrect off isn’t difficult, but it isn’t always straightforward either.
In Skype, you’ll find the feature hidden under “Correct Spelling Automatically”36; in Chrome, under “Check Spelling While Typing; and it’s a bit more involved in Android phones37 and on iOS devices38. A quite simple way to avoid misunderstandings – if you are confident about your typing skills, that is. A headache saved. (vf)
395. Icons On Four Wheels
“If there’s something strange in your neighborhood, who ya gonna call? Ghostbusters!” You probably knew right from the beginning what we were getting at. Things like these stay in our heads, even after what seems like ages. Now, do you also remember what the Ghostbusters’ car looked like? No? Well, then let us jog your memory a bit.
Designer and illustrator David Wildish created some really beautiful posters of iconic cars41. The Ghostbusters car is one of them, just like Batman’s Batmobile, the artificially intelligent K.I.T.T., racing Herbie, and, how could we forget, Mr Bean’s little green Mini, of course. This small but sweet collection of twelve unforgotten cars is a wonderful memory lane for all movie afocionados, car lovers, and anyone who’s up for some eye candy. (cm)
426. Reinventing Footnotes On The Web
Footnotes are one of those forgotten and overlooked typographic treatments that are having a hard time on the Web. While sidenotes, pull quotes and endnotes are widely adopted, having footnotes is often considered to be redundant and useless. After all, you can link directly to an external page via a link, so why use footnotes at all? Well, long passages of text or secondary information about the link might work well as a footnote, for example.
But as it usually is with footnotes, you click on a tiny number, jump to the bottom of the page, find the footnote and click on a link to go back to where you were on the page. We can do better than this. BigFoot44 is a comprehensive jQuery plugin that turns footnotes into clickable buttons and displays a popover when readers click on it. The library is released under the MIT license. A better experience for footnotes, but only if you already need jQuery in your project. (vf)
457. Web Font Specimen: Study Font Rendering Issues
Choosing a typeface is, of course, not simply a question of style. Since rendering can differ significantly between systems, browsers and font formats, seeing a typeface in action in the browser is essential to decide whether to use it for a project or not. A handy, free tool to preview typefaces in the browser is Web Font Specimen.
Created by Tim Brown, Web Font Specimen47 offers an easy way to prepare your own specimen in three steps: you download a default specimen as a ZIP file; add the typeface you want to test; and you will get a preview in your browser — complete with adjustable text samples, a showcase of glyphs, body size comparison, grayscale, and different font sizes. From there on you can proceed with some cross-browser testing. Of course the HTML specimen is easy to modify and it’s licensed under Creative Commons, so nothing is in your way to give it some editing love and implement it as a tool in your company’s workflow. (cm)
488. Convert CSV/Excel Into HTML/JSON
So, your client has delivered a complex multicolumn spreadsheet which should be displayed on their brand new website. Of course, coding a spreadsheet from scratch would be quite an undertaking, yet exporting the document into HTML usually won’t produce tidy and clean results. What about handy tools to automate this task for you?
You can use Tableizer50 to paste your cells from Excel or any other spreadsheet and generate HTML, or CSV converters51 to convert CSV files, choose an items separator and generate an HTML table, XML, or perhaps even a JSON object. Ah, and in case you need to make those complex tables responsive: no worries, we’ve got your back — Responsive Data Tables Round-Up52 should provide you with more options than you probably need. (vf)
539. To See Or Not To See With Ifvisible.js
Imagine your users have to finish a task on your website. Perhaps they have to upload an uncompressed PDF file as the last step before completing the process. How likely are they to abandon the tab for a while? And how high is the chance of the website being forgotten? Well, what about reminding the users while they are gone?
Ifvisible.js55 is a lightweight cross-browser script by Serkan Yerşen that checks whether users are actually interacting with the page or not by detecting if the mouse cursor is moving within the page or not. You can handle tab switch and window minimize states and also handle activity states (
active) and then react to it appropriately. Perhaps changing the favicon of the page56 on the fly?
A nice little tool that can help you react to the different user states on your page, and perhaps make sure that that last “Submit” button will be clicked after all. (sh)
5710. The Four Icon Challenge
If somebody asks you to quickly summarize a movie or a book, how much time would it take you to get the message across? A couple of sentences? Or a couple of minutes after all? Smart ideas often emerge within difficult constraints, and the more challenging these constraints are, the more surprising are the results.
So if you are a visual designer, what about trying to tell a story with four icons? That’s what Kyle Tezak has set out to do with The Four Icon Challenge59. On his blog, Kyle tries to tell stories boiled down to just four visual elements. Only a few examples are provided, but what about trying to find your way around your own constraint? Can you draw the story of a song in one frame? Can you visualize a TV series plot with one animated GIF60? Perhaps the next time somebody asks you for a summary, you could have a link to send them to! (vf)
6111. Finding Something Special — Finding The Noramoji
Writing for the Smashing Newsletter, I’ve come across all kinds of different projects. The one I’m sharing now is especially sweet and heart-rending. It’s the story of a font named Noramoji — a font you won’t find in books or online type foundries. Noramoji was not easy to find at all. Until a young man went looking for it — in the streets of his city in Japan.
The man walked across his town; he was looking for a treasure. It didn’t have to be new and neat. Instead, he was looking for the used and familiar — an asset with a personal story, made by the locals. He found what his heart was searching for when he looked at the old, handmade signs on the storefronts in his town. Over time, he found, analyzed and reproduced a number of very unique typefaces, all with their own individual signature, the Noramoji, now available for free download. Also check a video about Noramoji Project63 and how it came to be. Moving, inspiring and useful. (ea)
6412. Why A Coffee Shop Can Boost Your Creativity
The quieter, the better for concentration? Maybe not, unless you are doing your taxes. For more creative tasks, a little bit of noise might benefit you much more than dead silence. According to researchers65, a moderate level of noise enhances creativity. But why is that? What is the underlying mechanism? Looking closer, researchers came up with some interesting findings. Put simply, it doesn’t always help us if things run too smoothly.
In order to be creative, we need some kind of difficulty — we need a distraction. Background noise like chatter and the swooshing sounds of an espresso machine can act as such a distraction. Interestingly, this background noise induces a “processing difficulty” which puts us on a higher level of abstract thinking. We are less likely to fixate, and thus be more creative. If you need some background noise at your workplace, check out the background music of Coffitivity68, Noisli69 or Rainy Cafe70. (ea)
7113. Photoshop Scripts and Tricks
Alright, the search is over! If you work with Photoshop a lot, Photoshoplr72 will be quite a goldmine for you. This growing resource contains free and commercial Photoshop plugins, scripts and extensions under one roof: from a paper texture panel to image masking plugins and iOS OCD app icon actions.
Not good enough? Be sure to check Photoshop Secrets74 as well, a growing repository of useful articles and techniques for visual designers. Great resources that will make a designer’s life so much easier as they are literally a one-stop-shop. Worth bookmarking! (sh)
7514. Let’s Fix It: In-House Smashing Workshops
We love fixing existing problems. Is your company struggling with legacy systems or a suboptimal front-end workflow? Well, perhaps we can help. We’d be more than happy to organize in-house workshops in your company, tailored specifically to your needs.
We are flexible about the topics and the format of the workshops, but what we really want is to actually help you solve your problems. What about responsive design, advanced front-end techniques, performance optimization, UX, conversion rate optimization, sketching and wireframing or debugging?
If you’d like to have an in-house workshop, just get in touch with Vitaly78 and briefly describe what problems you’d like to solve. We’ll run a workshop to effectively address your issues. Don’t worry about the cost either — we’ll find a fair price for sure. Yes, it’s that easy! (vf)
The authors in this newsletter are: Shavaughn Haack (sh), Cosima Mielke (cm), Esther Arends (ea), 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/the-smashing-book-mystery-have-you-figured-it-out-yet/
- 3 http://provide.smashingmagazine.com/merry-christmas-2013.gif
- 4 http://www.smashingmagazine.com/smashing-book-4-new-perspectives/
- 5 #a1
- 6 #a2
- 7 #a3
- 8 #a4
- 9 #a5
- 10 #a6
- 11 #a7
- 12 #a8
- 13 #a9
- 14 #a10
- 15 #a11
- 16 #a12
- 17 #a13
- 18 #a14
- 19 #
- 20 http://www.flickr.com/photos/65414366@N00/tags/superheroes/
- 21 http://www.flickr.com/photos/65414366@N00/tags/superheroes/
- 22 #
- 23 http://tobiasahlin.com/spinkit/
- 24 https://github.com/rendro/SVG-Spinner
- 25 http://tobiasahlin.com/spinkit/
- 27 #
- 28 http://www.24ways.org/
- 29 http://www.24ways.org/
- 30 http://calendar.perfplanet.com/2013/
- 31 http://uxmas.com/
- 32 http://thewebrocks.com/mdncalendar2013/
- 33 #
- 34 http://community.skype.com/t5/Mac/Turn-off-autocorrect/td-p/1681050
- 35 http://www.todaysiphone.com/2013/06/looking-back-at-my-ios-7-wish-list-did-i-get-what-i-wanted/
- 36 http://community.skype.com/t5/Mac/Turn-off-autocorrect/td-p/1681050
- 37 http://www.wikihow.com/Turn-Off-Auto-Correct-on-a-Droid-Smartphone
- 38 https://www.youtube.com/watch?v=G4SZw4acyMA
- 39 #
- 40 http://davidwildish.co.uk/tagged/Illustration
- 41 http://davidwildish.co.uk/tagged/Illustration
- 42 #
- 43 http://cmsauve.com/labs/bigfoot/
- 44 http://cmsauve.com/labs/bigfoot/
- 45 #
- 46 http://webfontspecimen.com/
- 47 http://webfontspecimen.com/
- 48 #
- 49 http://www.textfixer.com/html/csv-convert-table.php
- 50 http://tableizer.journalistopia.com/
- 51 http://www.convertcsv.com/csv-to-html.htm
- 52 http://css-tricks.com/responsive-data-table-roundup/
- 53 #
- 54 http://serkanyersen.github.io/ifvisible.js/
- 55 http://serkanyersen.github.io/ifvisible.js/
- 56 http://lab.ejci.net/favico.js/
- 57 #
- 58 http://kyletezak.com/project/the-four-icon-challenge/
- 59 http://kyletezak.com/project/the-four-icon-challenge/
- 60 http://bisouslescopains.tumblr.com/
- 61 #
- 62 http://noramoji.jp/
- 63 http://noramoji.jp/about
- 64 #
- 65 http://www.jstor.org/stable/full/10.1086/665048
- 66 http://www.jstor.org/stable/full/10.1086/665048
- 67 http://www.flickr.com/photos/digitalcolony/2674724459/
- 68 “http://coffitivity.com/“
- 69 http://www.noisli.com/
- 70 “http://rainycafe.com/“
- 71 #
- 72 http://madebyvadim.tumblr.com/
- 73 http://madebyvadim.tumblr.com/
- 74 http://photoshopsecrets.tumblr.com/
- 75 #
- 76 https://shop.smashingmagazine.com/workshops/
- 77 https://twitter.com/sortenke/status/376690657689366529