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.

Editorial

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
04. 3-D WebGL Engines Written in JavaScript8
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

1. The Web Developer’s Wonderland

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.

The Web Developer’s Wonderland13

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)

2. Kerning.js: Take Control of Your Web Typography

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.

Kerning.js15

Kerning.js16 is a JavaScript library that enables you to set pixel-perfect kerning, size adjustment, transformations, colored words, font conditionals, pairings and repeats and helps you to avoid FOUCs (flashes of unstyled content) along the way. Alternatively, you can use the Lettering.js17 jQuery plug-in for complete down-to-the-letter control of your typography, as well as Hyphenator.js18, which implements client-side hyphenation of HTML documents. (Notice that hyphenation is now available in Firefox and Safari19.) Time to experiment with type! (vf)

3. HTML5 Mobile Compatibility Table

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.

HTML5 Mobile Compatibility20

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)

4. 3-D WebGL Engines Written in JavaScript

With the introduction of WebGL, we now have the ability to produce sophisticated 3-D renderings that can be displayed and interacted with via the Web browser. However, these 3-D models are usually quite difficult to create, and a lot of code usually has to be written. And building your own 3-D rendering engine in JavaScript must be a nightmare, right?

3D WebGL Engines Written in JavaScript 22

Well, kind of. The A323 library is a small JavaScript 3-D engine with features built on top of WebGL. The source code for the engine is provided on GitHub. The interesting thing is that the author of the library, Paul Lewis, is documenting and explaining the process of creating the library via screencasts on his website. So far, only two videos are available: the first provides a basic overview of the library, and the second discusses how to create 3-D vectors with the library. If, you are looking for a more powerful JavaScript 3-D engine, you might want to check out J3D24 by Bartek Drozdz. So, if you’re up for the challenge, what would you build with the library? (ld)

5. Free Map Icons Collection

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.

Free Map Icons26

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)

6. Explore New Tunes With Great Lyrics

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.

New Tunes With Great Lyrics28

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)

7. Navigate Streets as They Appeared in the Past

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.

Navigate streets as they appeared in the past31

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)

8. Small Is Good: Showcase of Tiny and Beautiful Stuff

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.

Smaller is Better: Showcase of Tiny and Beautiful Stuff33

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).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 https://shop.smashingmagazine.com/creative-set-for-eBook-design.html
  3. 3 http://www.twitter.com/smashingmag
  4. 4 http://www.smashingmagazine.com/contact/
  5. 5 #a1
  6. 6 #a2
  7. 7 #a3
  8. 8 #a4
  9. 9 #a5
  10. 10 #a6
  11. 11 #a7
  12. 12 #a8
  13. 13 http://livereload.com/
  14. 14 http://livereload.com/
  15. 15 http://endtwist.github.com/kerning.js/
  16. 16 http://endtwist.github.com/kerning.js/
  17. 17 http://letteringjs.com/
  18. 18 http://code.google.com/p/hyphenator/
  19. 19 http://blog.fontdeck.com/post/9037028497/hyphens
  20. 20 http://mobilehtml5.org/
  21. 21 http://mobilehtml5.org/
  22. 22 http://www.aerotwist.com/a3/
  23. 23 http://www.aerotwist.com/a3/
  24. 24 https://github.com/drojdjou/J3D
  25. 25 http://mapicons.nicolasmollet.com/
  26. 26 http://mapicons.nicolasmollet.com/
  27. 27 http://musicovery.com/
  28. 28 http://musicovery.com/
  29. 29 http://lyricful.com/
  30. 30 http://whatwasthere.com/default.aspx
  31. 31 http://whatwasthere.com/default.aspx
  32. 32 http://lessthan100g.com/issue-1/
  33. 33 http://lessthan100g.com/issue-1/

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. 1

    Love this collection!!

  2. 2

    Hey guys, I just wanted to say thanks. I’m usually going through my email and unsubscribing from anything that gets annoying, but I just followed a link here to see if there was a way to increase the amount of newsletters I receive from you.

    I have marked my calendar for every second Tuesday in anticipation of this newsletter. Thank you for such quality content.

  3. 3

    You guys/gals are simply AMAZING!

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