The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

When you think of web typography, CSS instantly comes to mind. And that’s great, because CSS is the primary option when dealing with the style/visual layer of your website.

However, when you hit a roadblock with CSS, take it up a level by using JavaScript (JS).

Open source JavaScript libraries can help you craft responsive web designs (a technique that optimizes webpage layouts for mobile devices), implement fun text effects and more. In this post, we will primarily focus on JavaScript libraries that use modern web typography techniques to underscore and promote current web design best practices.

1. Kerning.js

Kerning.js is an open source JavaScript library that promises web designers complete control of web typography. According to the developer of the project, Joshua Gross, the library is admittedly a “work in progress.” However, by extending CSS, it doesn’t need JS programming outside of referencing the library in your HTML. Simply use Kerning.js’s custom CSS properties such as -letter-kern and -word-color.

With this excellent JavaScript library, you can achieve a variety of type techniques normally associated with print design and desktop publishing, such as perfect kerning and conditional fallback fonts for your @font-face rules.

See live demo.

Click here to view this gallery.

Series Supported by Rackspace


The Web Development Series is supported by Rackspace, the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

Image courtesy of iStockphoto, Punkle

More About: design, dev, features, javascript, typography, web development series

For more Dev & Design coverage:

Not very long ago when we were planning the launch of our humble magazine BuildMobile, which you are reading right now, the content strategy included coverage of the nebulous WebOS mobile operating system. Come launch time, there wasn’t enough traction to include it in our platform categories, but we were hopeful for the future. WebOS in 60 Seconds WebOS is a mobile operating system based on the Linux Kernal Initially developed by Palm and first released in January 2009 Acquired by Hewlett-Packard in April 2010 for US$1.2b WebOS uses a “card” UI with a left-to-right flick for app swithcing, flick up for “off” The WebOS broswer, called simply “Web” is based on the WebKit layout engine WebOS “Synergy” feature integrates information from many cloud services into a single list Devices include the Pre , the Pixi and the Veer phones, then the HP TouchPad HP announced in March 2011 that WebOS would run within Windows by the end of 2011 On 18th August 2011 HP announced it would discontinue operations for WebOS devices Potentially even more HP TouchPads will be made and sold at a loss Web Standards based Native Apps A feature that was full of promise, and partly responsible for the underdog adoration WebOS attracted from developers worldwide, is that web technologies like HTML, CSS and Javascript are first class tools for developing native apps for the platform, with full access to hardware APIs like the camera.

BuildMobile: The Future of WebOS

Welcome to episode nine. Today’s podcast is from Myles Eftos, one of the authors of the Sitepoint book, Build Mobile Websites and Apps for Smart Devices , and the Learnable course, Build Mobile: Develop websites and apps for smart devices . In this episode, Myles talks about designing for mobile platforms.

View original post here:
DesignFestival: Design Festival Podcast #9: Design for Mobile Apps and Websites

As browsers and server-side platforms advance, and libraries new and old grow and mature, JavaScript evolves as well. Staying at the top of your game is important. As a JavaScript developer, you’ll need to keep up with the latest news and learn new skills.

We’ve put together a list of seven of our favorite JavaScript resources to help save you time and energy along the way. Whether you’re a beginner or a seasoned pro, we think you’ll find the sites below both informative and beneficial. If you know of other great resources, feel free to share them in the comments.

1. Mozilla Developer Network

The MDN has become the de facto resource for JavaScript documentation, and is an excellent resource for beginners and seasoned developers alike. Here you’ll find the official and complete JavaScript reference, as well as useful guides, tutorials and articles covering everything from the basics of how JavaScript works to its best practices and design patterns. The MDN also has a thorough DOM reference, which we highly recommend checking out as well.


JQAPI is an alternative to the official API documentation. If you’re a client-side JavaScript developer, chances are you probably have used, or at some point will use, jQuery in at least one of your projects. Whether your use is occasional or daily, you’ll want to keep up with the latest development and new features in JavaScript’s most popular library. Each new release improves security and performance via a slick, responsive and intuitive interface for quick browsing and searching of jQuery documentation. The UI here really is top-notch, and as a bonus, there’s an offline version available for download.

3. JS Fiddle

JS Fiddle is a JavaScript pastebin on steroids. Create, share, execute and test your JavaScript right in the browser. This is a great tool for collaborative debugging or for sharing code snippets. It’s also a fun way to perform quick experiments and test out new ideas. Simply combine your JavaScript, HTML and CSS, then click the “Run” button to see the results. You can also validate your JavaScript code against JSLint and save your Fiddle for use later, or share with others. JS Fiddle provides a number of useful features, like the ability to load up common frameworks automatically (to test your jQuery or MooTools code, for example) and as-you-type syntax highlighting, just like you’d get by writing code in your favorite IDE.

4. Eloquent JavaScript

This free ebook is an introduction to programming and the JavaScript language, written by developer and tech writer Marjin Haverbeke. The book reads much like a tutorial, and introduces a number of concepts and real-world applications in a clean, concise style. Interactive examples are also available, which means you can read about various techniques. You’ll also get a chance to see them in action, and tinker with the code yourself. We found a lot of positive reviews for this book, so if you’re new to JavaScript, this is definitely a book worth checking out.

5. Douglas Crockford’s JavaScript Videos

An undisputed expert in JavaScript, Douglas Crockford is Yahoo’s JavaScript architect and is one of the individuals instrumental in the planning, development and future growth of the language. The videos and transcripts on the YUI blog derive from a series of talks given by Mr. Crockford about the history of JavaScript, its future and its use today. Though the series is now about a year and a half old, we still think you’ll find the videos informative. We certainly recommend watching them for a better understanding of the language, where it’s been, how it works and where it’s going.

6. How To Node

Not all JavaScript development takes place in the browser. NodeJS is one of the web’s most popular server-side JavaScript frameworks. Whether you’re a seasoned Node developer or someone who’s looking to add server-side JavaScript to his repertoire, How To Node offers a great collection of articles on NodeJS development. This community-driven site offers an excellent repository of Node tutorials that’s proven itself useful on a number of occasions. No Node developer toolkit would be complete without it.

7. DailyJS

We’ve looked at some great tools and reference material, covered tutorials from our favorite libraries and frameworks and touched on both client and server-side JavaScript development. However, we’re always searching for something new. DailyJS is a popular JavaScript-focused blog that brings you the latest and greatest JavaScript news, offers tips and techniques, and reviews libraries, plug-ins and services for JavaScript developers. If you’re just itching for your daily dose of JavaScript goodness, DailyJS has you covered.

More About: design, dev, features, javascript, List, Lists, web design, Web Development

For more Dev & Design coverage:


Chrome 12 was released last week. You didn’t notice? Few people did. I hadn’t intended writing this article but a few people on Twitter convinced me otherwise (thanks @Mahen23). To start, let’s take a look at the usual list of improvements:

  • hardware-accelerated 3D CSS
  • the ability to analyze and delete Flash cookies within Chrome
  • a new safe browsing feature which protects against malicious file downloads
  • improved synchronization of browser settings
  • better screen reader support
  • new PDF save and print buttons
  • launch installed apps from the Omni-bar
  • 14 security holes plugged.

Chrome 12 also marks the end of an era: Gears has gone. Google Gears was launched in 2007 but development was abandoned a year later. The plug-in provided local data storage, JavaScript threading, desktop integration and geo-location but these have been superseded by standard HTML5 technologies.

Built-in JavaScript De-obfuscation

Merging and minifying JavaScript files has several benefits:

  1. Files, sizes and download times are reduced.
  2. Code processing speed can be improved.
  3. It hides your cutting-edge scripts from prying eyes.

Unfortunately, a minified script is impossible to debug. The code is an indecipherable mess contained on few lines which cannot have breakpoints set. Here’s an example from Google Analytics:

Chrome script debugger

Nasty. However, a quick right-click option will de-obfuscate the script into lovely readable source code:

Chrome script de-obfuscation

Built-in de-obfuscation is incredibly useful, although there are a couple of hitches:

  1. JavaScript minifiers often replace long function and variable names with shorter alternatives, e.g. MyLongFunctionName() becomes A(). De-obfuscation can never bring back the original names although you should be able to recognize patterns within your own code.
  2. Setting breakpoints on de-obfuscated code is more limited. Functions run in response to an event or timer can be analyzed. However, it’s not possible to break at code run when the page is loaded since the script has not been de-obfuscated at that point. Let’s hope the Chrome team address the issue in a future version.

For me, this is the most exciting development in Chrome. It may tempt you away from Firebug or Dragonfly when testing live code.

Have you discovered any great new features in Chrome 12?

LinkedIn has announced that it’s opening its developer platform, including its faster JavaScript APIs and customizable plugins, to all developers.

LinkedIn first released its original developer platform in 2009, complete with a set of APIs for letting third-party applications integrate aspects of LinkedIn in their apps. Still, its platform lacked certain features like OAuth 2.0 and advanced Javascript API support, something the company has been testing for the past few months.

The new LinkedIn Developer Platform and website make these APIs available to anyone who wants to use them. LinkedIn also opens its new platform for plug-ins, including the “Sign in with LinkedIn” button and the LinkedIn Share buttons you see on Mashable’s business and marketing stories. There are also plug-ins for member profiles, company profiles and a Recommend button that lets users recommend your products through their LinkedIn network.

The developer platform has also been overhauled with improvements under the hood. It includes a new Javascript framework that “loads significantly faster,” as well as support for SSL and improved support for OAuth. The website has also been simplified to make it easier to get started with LinkedIn’s APIs and plugins.

More About: api, developer, developers, javascript, linkedin, LinkedIn Developer PLatform, LinkedIn Platform, OAuth 2.0

For more Dev & Design coverage:

The Future Web Series is supported by Elsevier‘s SciVerse Application Marketplace and Developer Network. The SciVerse applications platform enables developers to build apps based on trusted scientific content. Learn more.

HTML5 is no longer just a buzz word. It — along with JavaScript and CSS3 — is quickly helping reshape perceptions of what a web browser and web standards can achieve.

With browsers implementing more HTML5 features across platforms and devices, developers are starting to integrate many of the new features and frameworks into their web apps, websites and web designs.

Although HTML5 is its own standard, the power of HTML5 is really only best realized with the use of CSS 3 and JavaScript. JavaScript, in particular, has quickly emerged as one of the best ways to help render great looking effects, animations and content in a self-contained, platform-agnostic way.

Graphics libraries like WebGL can extend JavaScript, allowing for the creation of interactive 3D graphics within the browser all while utilizing the plugin-free nature of the HTML canvas element.

WebGL Brain Surface and Tractography Viewer

Using JavaScript, jQuery and WebGL, developers at Children’s Hospital Boston created the Brain Surface and Tractography Viewer.

This is a web front-end tool that lets researchers explore data from an MRI scan within the web browser and in real time.

The implications of this type of technology for aiding in medical research are stunning. The fact that this all takes place in the web browser means that a researcher or doctor could explore MRI results from another part of the hospital — or another part of the globe.

Google Body Browser

Google released its Body Browser as a showcase for the WebGL support now included in Chrome. It’s a great proof of concept and is also useful as a learning tool.

In December, I described the project as “three-dimensional, multi-layered browser version of those Visible Man/Woman model kits. Or a virtualized version of Slim Goodbody, if you will.”

The Google Body Browser is a great example of just how fast technology is moving in web browsers. In December, only beta builds of Google Chrome and WebKit nightlies supported WebGL. Today, every shipping version of Chrome supports the technology and Firefox 4 — which is nearing release — also works with WebGL out of the box. Safari users still need to use a WebKit nightly, but we expect to see final support rolled out soon.


MathBoard is a featured case study on Google’s HTML5 Rocks page and for good reason — it adroitly highlights how robust web apps can be built using HTML5, even if they start life on other platforms.

MathBoard is a popular education app for the iPad that helps students learn and practice their integers.

We’ve discussed how mobile developers are using HTML5 in their app development process, but this is actually the inverse. N2N-Apps aimed to do a high-fidelity port of the app for the web browser in HTML5. Using HTML5, SnowUI and jQuery, the goal was met.

Arcade Fire, “The Wilderness Downtown”

Before they won a Grammy, Arcade Fire won our hearts with their innovative and awe-inspiring music video created using HTML5.

This Google Chrome Experiment, directed by Chris Milk, takes listeners into the video. As I noted last summer,

“In addition to timed-playback, synchronized effects and custom windows sizes for the video and animated content, this video also features custom rendered maps directly from the Google Maps API. Using SVG, the drawing application, for the postcard aspect of the video adds an interactive and personal touch.”

More than six months later, this still rocks our world.

Lost World’s Fairs

When Microsoft released the first IE 9 beta, the company contracted Friends of Mighty to create this stunning web page that showcases the power of WOFF and web fonts.

Using JavaScript goodies like Lettering.js and built using HTML5 Boilerplate, this is not just a beautiful web design, it’s a look at what is possible with HTML5.

HTML5 isn’t just about 3D effects or creating web apps — it is also offers great advancements to how content — including text — is displayed and how users can interact with that text.

Series Supported by Elsevier

The Future Web Series is supported by Elsevier‘s SciVerse Application Marketplace and Developer Network. In 2010, prominent science publisher Elsevier launched SciVerse to provide developers with access to ample research data so they can build apps on top of trusted scientific content. SciVerse also sponsors “Apps for Science,” a $35,000 developer challenge to accelerate science. Learn more.

More Dev and Design Resources from Mashable:

8 Powerful & Inexpensive Desktop Design Apps
Why Everyone Is Talking About Node
HOW TO: Turn Your Foursquare Data Into an Infographic
8 Essential Developer Apps for Multiple Platforms
8 Essential Web Typography Resources

More About: Future Web Series, HTML5, javascript, web design, Web Development

For more Dev & Design coverage:

Now here’s a tool we’d like to see applied to more languages. A handful of developers have just launched a site devoted to explaining the more intricate, difficult and quirky aspects of JavaScript.

Dubbed the JavaScript Garden, this project isn’t aimed at teaching JS noobs the ropes; rather, it’s supposed to refine the understanding of the language for current JavaScript programmers. Its creators, a handful of JavaScript experts, dole out well-organized advice on how devs can “avoid common mistakes, subtle bugs, as well as performance issues and bad practices.”

[Note: If you’re just starting out in JavaScript, the creators of the JavaScript Garden recommend Mozilla’s guide on the subject.]

As many a commenter noted in threads from our recent post on the JavaScript-based Node.js, JavaScript isn’t “easy” by any means. Although it’s used quite widely outside the hardcore hacker communities (particularly by those on the design side of the web), it still has its own unique frustrations and complexities, even for experienced devs.

For example, within the JavaScript Garden, you can find detailed information on the for in loop or a detailed explanation of how this works.

The JavaScript Garden comes from Zynga JavaScript dev Ivo Wetzel and student/front-end developer Yi Jiang with contributions from Spotify dev Andreas Blixt and IBM engineer Caio Romão.

From what we can see, the Garden is still a work in progress. What other topics would you like to see explored in this resource?

Image based on a photo from iStockphoto user TommL

More About: code, developers, github, javascript, javascript garden

For more Dev & Design coverage:

The Mobile App Trends Series is sponsored by Sourcebits, a leading product developer for mobile platforms. Sourcebits offers design and development services for iOS, Android, Mobile and Web platforms. Follow Sourcebits on Twitter for recent news and updates.

As the mobile application space continues to explode, developers are increasingly using HTML5, JavaScript and CSS3 to aid in the creation of web apps and native mobile apps. This process is especially useful when dealing with cross-platform development or when working with content that already exists in some form on the web.

We’re going to take a look at how some of the best HTML5-centric, cross-platform mobile frameworks are being used to help developers deliver native app experiences on a variety of devices.


Given the hype and buzz surrounding HTML5, it would be easy to believe that it is a technology that will do your laundry, mow the lawn and make you dinner. In truth, HTML5 isn’t the second coming, and it isn’t an officially ratified standard — yet. The spec continues to edge closer to completion, however, and when combined with JavaScript and CSS3, HTML5 can do some really incredible things.

This is particularly true for mobile devices. A de facto requirement for any modern mobile operating system is the inclusion of a modern HTML5-compliant web browser. The leading modern mobile platforms — iOS and Android — both use WebKit as their bases. Likewise, BlackBerry and HP/Palm are also using WebKit and Microsoft is going to release a mobile version of Internet Explorer 9 for Windows Phone 7.

What this means is that out of the box, modern smartphones and tablets support the bells and whistles that make HTML5 so special. It also means that developers can feel free to use those technologies when creating their applications and not have to worry that the device itself won’t support a particular function.

It also means that developers that choose to create HTML5 web apps for the desktop — like for the Google Chrome Web Store — can often use the same code when crafting an app for the iPad or for other tablets.

Earlier this month, leading iOS developer ScrollMotion released its first simultaneous e-book for the iPad and Chrome Web Store.

Because ScrollMotion has built its underlying app platform in HTML5, porting the content to a non-iOS device, like the Chrome browser, required very little work.


Choosing what mobile platforms to support continues to be a vexing problem for developers both big and small. Supporting one platform can be difficult enough, but now developers not only have multiple operating systems to consider, but multiple device types as well. iPhone and iPad apps can be packaged together, but both require separate experiences and views.

Likewise, Android developers that want to target the upcoming wave of Honeycomb tablets will need to create variations of their apps for the different device types. Add in the BlackBerry PlayBook, HP’s TouchPad and the future devices from Nokia and Microsoft, and it’s not difficult for even a large development team to become overwhelmed.

Fortunately, this problem has created a microcosm of cross-platform mobile development tools. We’ve covered a number of these platforms and frameworks in the past, but we want to highlight a few that specifically target HTML5 and JavaScript.

Appcelerator Titanium

Appcelerator’s Titanium platform was designed from the offset to help web developers create mobile and tablet applications with ease. Over the last year, the platform has seen tremendous growth, and new features and devices are added at a fast pace.

Appcelerator recently acquired Aptana, which should ensure that the tools for building its apps continue to improve and evolve over time.

Some of the apps that have been built with Appcelerator include GetGlue for iPhone, iPad and Android and ScoutMob’s excellent iPhone app.


PhoneGap is an HTML5 app platform that lets developers build native apps using HTML5, CSS3 and JavaScript. What really sets PhoneGap apart is that it lets developers create a full-functioning mobile web app but place that app in a native wrapper, so that it can use native device APIs and get submitted to the App Store or Android Market.

In essence, it enables mobile developers to cre
ate an app just as if they were targeting the mobile browser but with the benefit of being able to get into the App Store.

PhoneGap Build is a new service (still in beta) that lets developers quickly and easily create app-store ready versions of their apps for various platforms. It does all the work of compiling the code for various platforms and gives the developer a final build suitable for submission to the app market of their choice.

Ars Technica used PhoneGap to build its iPad app. This is a great example of using web standards to deliver an app that presents existing content in a customized view and experience. Clint Ecker’s post about how the app was built is worth a read.


Rhodes is a Ruby-based framework designed to help developers create native apps for a wide range of devices and platforms. The reason we included Rhodes in this roundup — despite being a Ruby tool — is that it uses HTML, CSS and JavaScript in its views. That means that HTML can be used for the interface aspect of the app — even if Ruby is what is powering the work on the backend.

Unify Project

The Unify Project is a set of tools designed to make it easier for developers to create smartphone apps using HTML5, CSS3 and JavaScript. Sponsored by Deutsche Telekom, Unify is published under a dual open source license (MIT and Apache version 2.0) and it uses PhoneGap, Adobe Air, Sass and the quooxdoo JavaScript framework.

Additional Tools

Using various mobile web frameworks alongside an HTML5 platform is a common approach to mobile app development.

Developer Pete Freitag recently gave a presentation on building mobile apps using jQuery Mobile and PhoneGap. Freitag made the slides available on his website and the presentation offers a nice overview of how to use two emerging web frameworks together.

Feitag’s tracking and reimbursement app Mileage Pad was built using PhoneGap and jQuery Mobile.

Other web frameworks that can be used alongside PhoneGap or Rhodes include Sencha Touch and SproutCore.

Or Just Make an HTML5 App

Of course, an increasingly viable option for mobile developers is to just use HTML5 to create a mobile web app.

As HTML5 gets better and browser support of HTML5 improves, the differences between running an HTML5 app in a native wrapper, a la PhoneGap, and accessing an HTML5 web app from an app shortcut on your home screen is going to continue to disappear.

Lots of companies — including Facebook — are looking at HTML5 as the future platform for their apps that target next generation devices.

Earlier this month, 37signals decided to forego building a platform-specific mobile app for its Basecamp product and instead created Basecamp Mobile. This decision initially drew some criticism, with members of the developer community questioning the company’s decision to just use HTML5.

With the recent Readability kerfuffle, it’s possible that more developers will start considering a mobile web approach for their applications. Readability’s Rich Ziade and Dan Benjamin discuss the issue in length, including what it means for mobile developers, on “The Daily Edition.”

The Future is Bright

Whether it’s through a framework, via an application wrapper or as the basis for a mobile web app, HTML5 is going to continue to be an important driving force for mobile application development.

In fact, as the technology evolves, we wouldn’t be surprised to see more HTML5 elements popping up in native desktop applications as well.

Are you using HTML5 when building mobile apps? Let us know.

Series Supported by Sourcebits

The Mobile App Trends Series is sponsored by Sourcebits, a leading developer of applications and games for all major mobile platforms. Sourcebits has engineered over 200 apps to date, with plenty more to come. Sourcebits offers design and development services for iPhone, Android and more. Please feel free to get in touch with us to find out how we can help your app stand apart in a crowded marketplace. Follow Sourcebits on Twitter and Facebook for recent news and updates.

More Dev & Design Resources from Mashable:

7 Hot Trends in Mobile App Design
How the WordPress SEO Plugin Can Help Your Blog [INTERVIEW]
5 Website Features You Can Easily Offload to Reduce Costs
This Is Why You Always Pay Your Web Designer
Learning Ruby: Expert Advice for Advanced Developers

Image courtesy of iStockphoto, a_Taiga

More About: appcelerator, css3, HTML5, javascript, jquery mobile, Mobile App Trends Series, phonegap, rhodes, sencha touch

For more Dev & Design coverage:

If you live in New York City, you most likely have a love/hate relationship with the subway (one that tends to wander toward “hate” more often than not).

Well, Brooklynite, musician and Google Creative Labs employee Alexander Chen has created a little HTML5/Javascript art project that is sure to put a smile on your face next time you’re crammed into a crazy person’s armpit whilst enjoying the eclectic symphony of children crying on your morning commute.

Conductor, Chen’s recently released project, is an interactive subway map that pulls data from the MTA’s public API to illustrate the motions of the New York City transit system.

Colored lines representing each train move across the screen in accordance with the real cars, and every time they intersect, they produce a “twang!” — like a stringed instrument. You can also “play” the map by tugging on a line with your mouse.

“As a viola player, it was interesting territory to try to replicate that feeling of tugging at a string,” says Chen, who lives off of the G line (known as the “Ghost Train” to locals) in the Greenpoint neighborhood of Brooklyn.

“Once I had that code down, my wife and I were talking about what other things could work, and a subway map came to mind. My friend has a Vignelli map on his wall, and it’s really beautiful.”

“I’ve also always liked the idea of inanimate objects generating music, coming alive,” he adds. “With all of the emphasis on realtime and location-aware technology, I thought it would be interesting to create a website that begins in realtime, but time slowly unravels.”

According to Chen, the map is not wholly accurate — so, New Yorkers, we don’t suggest using it to get to work on time or anything. The train launch time in the lower left is apparently on par with reality, but the map is mostly an exercise in creativity.

“For example, the 8 train and K train, which exist on Vignelli’s map, don’t exist anymore,” Chen says. “So in my world, I run them from 12 a.m. to 2 a.m., like ghost trains.”

You mean like the G?

More About: art, HTML5, javascript, mtv, subway

For more Dev & Design coverage: