Smashing Newsletter: Issue #43
This newsletter issue was sent out to 68,674 newsletter subscribers on September 27th 2011.
Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming newsletter issue. The newsletter is sent out on every second Tuesday, and contains unique tips and tricks for Web designers and developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1 as well, of course.
Many things have changed here behind the scenes at Smashing Magazine over the last few months. We’ve started working with our outstanding new authors Lea Verou, Addy Osmani, Des Traynor, Laura Klein, Tom Waterhouse, Evan Galperin and Dan Rose. We’ve launched the new Coding, UX Design and WordPress sections which will be updated more frequently and will contain more topic-specific quality articles for your convenience. We’ve also released a new digital product, the Creative Set For eBook Design2 ($12.95), including a top notch InDesign template, icon set as well as an eBook.
Smashing Magazine’s redesign by Elliot Jay Stocks is progressing nicely and we’re about to start on another new big project as well! In fact, this is probably the most exciting time in Smashing’s young history by far, and we are very happy to explore this journey with you! Feel free to provide us with constructive feedback via Twitter3 or via our contact form4. We’d love to hear what you think! And thank you — for reading, following and helping us grow and only get better. It means the world to us!
— Vitaly Friedman, editor-in-chief of Smashing Magazine
Table of Contents
01. The Web Developer’s Wonderland5
02. Kerning.js: Take Control of Your Web Typography6
03. HTML5 Mobile Compatibility Table7
05. Free Map Icons Collection9
06. Explore New Tunes With Great Lyrics10
07. Navigate Streets as They Appeared in the Past11
08. Small Is Good: Showcase of Tiny and Beautiful Stuff12
We love to create wonderful things for the Web. But as in any other profession, Web development comes with truly enjoyable, creative tasks and some mundane, boring ones. Probably the most frustrating task is having to reload the browser page during development or debugging every time you make a change to the page. It doesn’t have to be this way.
LiveReload14 — a “Web developer’s wonderland,” as the authors describe it — is a desktop app that monitors changes in your file system. As soon as you save a file, the file is preprocessed as needed, and the browser is refreshed. Also, every time you change a CSS file or image, the browser is updated instantly without you having to reload the page, which might save you some time that you could invest in more meaningful tasks. The tool supports CoffeeScript, SASS/SCSS, LESS, Stylus, HAML and Jade, and it ships with all of them included. A great useful time-saver for every Web developer’s toolbox. LiveReload is currently available only for Mac. (ld)
Although CSS offers Web designers a plethora of features to shape and control the presentation of content on the Web, designers with a keen eye for typography often miss out on some of the features found in more advanced tools such as InDesign. While such features aren’t available in CSS per se, some tools are available to help you make your typography look just a bit better.
The advancements in modern Web technology are truly remarkable. With support for HTML5 growing in modern browsers, a lot of new APIs are falling into our hands, especially ones for mobile Web development: Web workers, Web sockets, Geolocation, Touch events, Local storage, to name a few. But because the technology is so new, keeping track of which mobile browsers support these features is quite difficult.
Mobile HTML521 offers a useful reference table that illustrates which HTML5 features are supported by which mobile browsers — specifically, iOS Safari, Android, BlackBerry, IE, Opera, Firefox, webOS and Symbian. The author promises to update the table with new tests, features and information on support for these features across the mobile browser landscape. Still, testing on your own is always necessary: as the author suggests, always use feature detection, and do not program conditionals for individual platforms or versions. And the best news: the support for HTML5 in mobile devices is remarkably good! (ld)
Nicolas Mollet’s project Map Icons Collection25 is a set of more than 700 free icons to use as place marks for your points of interest (POI) on maps. You can use them on Google Maps with the “My Places” and “My Maps” feature or automate the process with the Google Maps API. These icons could come in handy to display geographical data for various purposes: to highlight locations for clients and colleagues or just to point out to random visitors the places you like most.
The icons are available in seven styles and are grouped into 14 main categories, including stores, events, sports, industry, tourism, health and education, restaurants and hotels, and transportation. You can also customize the background color of the icons. New icons are added regularly, and you can submit your own requests for the growing collection. All icons are released under Creative Commons 3.0 BY-SA and were created by Nicolas and other contributors. (vf)
We are grateful for change from time to time. And music is no exception, especially when we find music to match our mood. Whether you’re feeling positive or energetic or are up for something calm, or perhaps even dark, Musicovery27 has just the right mix for you. Roll over the mood pad, and define the mood you want for your music.
If you like what you’re listening to, tell the app to play more of it. Have you discovered an intriguing new song? Then head over to Lyricful29 to see exactly what the song is about. Search the huge pool by lyric, song title, album or artist to find what you’re looking for. Learn about the artist, listen to other songs and discuss their meaning. There is a lot to be discovered, and it’s time to broaden your musical horizon! (sp)
Have you ever thought what you could do with those photos from your grandparents that are sitting in the attic? Before time and dust do them in, you could pick out pictures of buildings, parks and monuments and assign geographical locations to them on the map. Curious to see what your neighborhood looked like a hundred years ago? Check out WhatWasThere30, a resource that allows users to navigate familiar streets as they appeared in the past.
Just enter the name of your city, state or country, and the pins will show you locations for which old photos are available. Click on the photo and see other details, such as the year the picture was taken and the address or name of the building. You can even connect it to Google Street View to get a realistic view of what this location looked like in the past. (tt)
Almost everyone collects something that they have a fondness for: postcards, coins, key holders, stamps. Even without consciously thinking about it, we start collecting whatever we find beautiful, interesting or special. In most cases, these objects are a reflection of our personality. If you feel part of the “collecting community,” then you will certainly like LessThan100g32, a blog dedicated to tiny and beautiful stuff.
Specially developed to showcase objects that weigh less than 100 grams, this website presents a unique selection of bottle caps, vintage erasers, old stamps, buttons and even little paper animals. Every issue comes with a brief history of the collection, including the owners’ names, curious facts and conversation starters (such as “Is bigger really better?”). A wonderful small resource that makes us think about the elegance of the simplest things that surround us every day. (tt)
The authors in this newsletter are: Stephan Poppe (sp), Talita Telma (tt), Luca Degasperi (ld), Vitaly Friedman (vf).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://shop.smashingmagazine.com/creative-set-for-eBook-design.html
- 3 http://www.twitter.com/smashingmag
- 4 http://www.smashingmagazine.com/contact/
- 5 #a1
- 6 #a2
- 7 #a3
- 8 #a4
- 9 #a5
- 10 #a6
- 11 #a7
- 12 #a8
- 13 http://livereload.com/
- 14 http://livereload.com/
- 15 http://endtwist.github.com/kerning.js/
- 16 http://endtwist.github.com/kerning.js/
- 17 http://letteringjs.com/
- 18 http://code.google.com/p/hyphenator/
- 19 http://blog.fontdeck.com/post/9037028497/hyphens
- 20 http://mobilehtml5.org/
- 21 http://mobilehtml5.org/
- 22 http://www.aerotwist.com/a3/
- 23 http://www.aerotwist.com/a3/
- 24 https://github.com/drojdjou/J3D
- 25 http://mapicons.nicolasmollet.com/
- 26 http://mapicons.nicolasmollet.com/
- 27 http://musicovery.com/
- 28 http://musicovery.com/
- 29 http://lyricful.com/
- 30 http://whatwasthere.com/default.aspx
- 31 http://whatwasthere.com/default.aspx
- 32 http://lessthan100g.com/issue-1/
- 33 http://lessthan100g.com/issue-1/