Archive for the ‘Frameworks’ Category

File Under: CSS, Frameworks, Mobile, Visual Design
Jan
26
2012

Twitter Adds Responsive Design Tools to Bootstrap 2.0

By

Twitter is gearing up for the release of Bootstrap 2.0, the second major version of its popular open source front-end toolkit for web developers.

Bootstrap 2.0 will arrive Jan. 31, but if you’d like to take it for a spin today you can help test the pre-release build. Just head on over to GitHub and checkout the branch, 2.0-wip.

Bootstrap is designed to help you get your website up and running as fast as possible. Somewhere between a CSS framework and a “theme,” Bootstrap offers an HTML, CSS and JavaScript base for your designs, including built-in forms, buttons, tables, grids and navigation elements. Among Bootstrap’s more impressive tricks is the grid layout tool, which is based on the 960 grid system, with support for advanced features like nested and offset columns.

Bootstrap 2.0 will solve one of the bigger complaints about Bootstrap 1.0 — it was not responsive. To embrace a more responsive approach for mobile devices, Bootstrap is moving to a flexible 12-column grid system. The 2.0 release also includes some updated progress bars and customizable gallery thumbnails, but perhaps the best news is that, at just 10kb (gzipped), Bootstrap 2.0 remains an impressively lightweight framework.

While Bootstrap offers good browser support, with all the modern options covered you should be aware that it won’t work with Internet Explorer 6. To see some real world examples of what you can do with Bootstrap, head on over to the unofficial showcase, Built with Bootstrap on Tumblr.

Photo by Mike Love/flickr/CC.

Tags: ,
File Under: Frameworks, Location, Programming
Mar
1
2011

Who Swears the Most? How Foursquare Used Hadoop to Find Out

By

We told you who swears the most in their code, but what about in the real world? Foursquare, the location check-in service, has used its rather large dataset to graph the “rudest” places in the English-speaking world — Manchester, U.K. takes top honors.

While the results should be taken with a grain of salt — after all the swearing is limited to Foursquare users and there’s no hint of what constitutes a swear word — the methods Foursquare used to get the data make a great intro to the world of Apache Hadoop and Apache Hive.

Hadoop is an open-source MapReduce framework — a way of processing huge datasets stored in large server clusters (or grids). While MapReduce frameworks were originally introduced by Google (which has very large datasets to work with) they’ve since grown beyond Google and their usefulness isn’t limited to large companies with massive databases.

In fact, with Amazon’s Elastic MapReduce just about anyone can easily and cheaply run their own Hadoop framework and process vast amounts of data just like Google does.

Because word search processing is generally considered the canonical example of what makes a MapReduce framework useful, Foursquare’s blog post offers a good overview of how you can use MapReduce to mine through anything from large text documents to user-contributed data like the check-in snippets Foursquare is processing.

Foursquare’s server setup is specific to them, but there’s one key element that’s worth bearing in mind — store your Hadoop data well away from your production system. MapReduce doesn’t work at the speed of the web and you don’t want it dragging your site down.

In Foursquare’s case that means using Amazon’s Elastic MapReduce plus a simple Ruby on Rails server. The result is, as Foursquare Engineer Matthew Rathbone puts it, “a powerful (and cheap) data analysis tool.”

If you’re new to MapReduce and functional programming in general, read through the Foursquare post for an overview on how MapReduce is useful and then check out the Hadoop site, as well as this overview video from Cloudera.

See Also:

File Under: Frameworks, JavaScript
Oct
18
2010

New JQuery Release Adds JSLint Support

By

The popular jQuery JavaScript library has released an update to its current 1.4 release. The latest version, jQuery 1.4.3, is relatively minor update, but includes some speed improvements and several welcome new features including support for JSLint, HTML 5 data- attributes and a major rewrite of the css() module.

If you’d like to update to the latest release and test your code against jQuery 1.4.3, you can download it here (or here, minified). As always you can also load the code directly from Google’s CDN.

Perhaps the most important part of this release is the JSLint support. While Douglas Crockford’s JSLint tool — which is designed to find a multitude of JavaScript problems in your code — proudly proclaims it will “hurt your feelings” (and it will), it’s also a great way to debug your code.

According to a blog post announcing jQuery 1.4.3, the jQuery team will be using JSLint to prevent regressions in future releases. Of course, it also means that you can use JSLint in your own jQuery-based scripts without having to wade through jQuery errors.

One thing we should note though is that the jQuery team has made a few minor changes to JSLint to suit the “particular development style” of jQuery code. Most of the changes are minor, and you can read the full details in the jQuery style guide.

Here’s a video of jQuery creator John Resig showing off the power of the library, including an overview the latest enhancements (and those still to come) at the Future of Web Apps conference earlier this month in London. The video comes courtesy of the conference’s producers at Carsonified. Check out their Future of Web Design conference in New York next month.

John Resig – The Future Of JavaScript & jQuery 2010 from legacye on Vimeo.

See Also:

Tags: ,
File Under: Frameworks, Programming
Aug
30
2010

Ruby on Rails Steams Ahead With 3.0 Release

By

It’s been two years in the making, but Ruby on Rails 3.0 is finally here. You can grab the third generation of the popular web framework from the official website, or update via the command line with: gem install rails --version 3.0.0

Rails 3 is a major overhaul for the framework and merges the Rails and Merb frameworks to create a single lightweight code base for web applications written in Ruby.

The goal for this release was to make Ruby on Rails faster and more modular. Developers can now mix and match libraries, swapping out their favorites for Rails’ default choices.

If you’d like to know what’s new, what’s changed and why you might want to upgrade to Rails 3.0, head over to the Ruby on Rails screencast page, which has videos covering the biggest changes in the new release, as well as a number of smaller, but very useful new features.

See Also:

Tags: , ,
File Under: Frameworks, HTML5, Templates
Aug
17
2010

HTML5 Reset Speeds Up Site Development With Handy Boilerplate Code

By

If you’ve been building websites for a while, chances are you have some boilerplate code you use to jump-start a new site — perhaps some CSS resets, a basic HTML structure, and so on. You tweak and refine your boilerplate as standards evolve.

One of the best ways to improve your basic code is to see how other people do the same thing. We recently stumbled across HTML5 Reset, a set of templates and code that makes a great starting point for a sites that will be using HTML5 and CSS 3.

HTML5 Reset draws on many well-known sources like Eric Meyer’s reset stylesheet, the Modernizr script for HTML5 across browsers, Dean Edwards’ IE7.js. (Separately, there’s also the excellent HTML5 Boilerplate, which has similar HTML5 and CSS 3 features, but of course a slightly different way of implementing them.)

As the HTML5 Reset authors note, the code is by no means an “end-all and beat-all” set of templates. In fact, the code may not work for your project at all, but even you don’t end up using it as-is, you may be able to glean some good ideas from it.

For example, because I use Sass for developing stylesheets, raw CSS isn’t all that useful for my projects. However, HTML5 Reset has a very nifty class for clearing floats without extra markup, so I ended up incorporating that element into my own Sass-based boilerplate code. Take what’s useful and leave the rest.

There are a couple versions of HTML5 Reset — the “Kitchen Sink” version that includes nearly everything and has copious comments and a “Bare Bones” version that’s stripped down to just the basics. I recommend checking out the former unless you’ve decided to commit to HTML5 Reset. It’s always easier to start off by removing things you don’t need than trying to figure out what you need to add.

If you’re curious, head over to the HTML5 Reset site to learn more. HTML5 Reset is available under the BSD license. If you see bugs or have suggestions on how to improve HTML5 Reset, be sure to let the authors know.

See Also:

Tags: , , , ,
File Under: Frameworks, Multimedia
Aug
11
2010

Meet Treesaver, a New HTML Magazine App

By

A startup called Treesaver has developed a slick presentation framework for digital magazines that runs in the browser. It has many of the features you’d expect from a clean, reader-friendly content wrapper (like Instapaper or Readability) but it couples that functionality with a way-cool user interface.

Pages can be navigated by swiping from side-to-side, and you get helpful ghost images on either side of the page you’re reading, which aid in signposting. Also, the pages within the web app dynamically resize for different screens — and it even resizes on the fly as you make the browser smaller and larger. It’s all HTML, JavaScript and CSS.

Here’s the demo video for Nomad Editions, the first of Treesaver’s launch partners using the company’s framework to make a public announcement (Treesaver is still pre-launch right now):

Nomad also got some love from The New York Times Wednesday.

With digital magazines all the rage, everyone’s racing to get their traditional paper-and-ink publications onto the iPad. There are two routes — the native app, which requires the use of Apple’s tools and adherence to its rules, or the web app, which lets you do just about whatever you want as long as it works in a browser.

If you build a native app, you get some impressive performance with the swipey-swipey stuff, and you control both the ad revenue and your kerning pairs. But you’re also locked into a specific device’s platform, distribution is a pain, and you’re disconnected from the internet unless you bother to build it in.

The webby route has its own advantages, of course. Filipe Fortes, one of the founders of Treesaver, has posted an excellent list of all the ways the web wins — a wider audience, a wider range of compatible devices, easy access to social networking tools, real hyperlinks, search indexing, content embedding.

Treesaver will be entering beta testing in a few weeks, and the code will be released under an open-source license soon after that.

See Also:

Tags: , , ,
File Under: Frameworks, Mobile
Jun
18
2010

New Frameworks Give Mobile-Web Apps a Boost

By

Sencha Touch, the new mobile-website framework, shows off its multidevice mojo.


Apple’s campaign to make native mobile apps seem sexier than the temperamental world of the mobile browser has been very successful. Tens of thousands of developers have been lured to the company’s App Store as a result.

However, the rapid rise of a number of impressive client-side JavaScript frameworks make it possible to build cross-platform, fast and lightweight mobile applications that run in the browser and, in some cases, equal the functionality of native apps.

Since these frameworks deliver content through the browser, there are no bizarre App Store approval processes or installer packages to contend with, and you really can “write once, run anywhere.” Any mobile operating system with a modern browser is game — iOS, Android, WebOS, it doesn’t matter.

Sure, for most games and animation-heavy apps, native is still the way to go. But for all other kinds of content, even complex stuff like maps and videos, the mobile web may be the better choice.

The latest entry into the mobile-framework field is Sencha Touch, brought to you by the same people that created Ext JS, jQTouch and Raphael, all of which have been combined under the name Sencha.

Sencha Touch, released this week, bills itself as “the first HTML5 framework for mobile devices,” which isn’t quite true. Several other mobile frameworks make use of HTML5 APIs like offline storage, or companion APIs like geolocation. But Sencha is nevertheless well worth a look if you’re thinking of building a cross-platform mobile app.

Sencha offers built-in support for the geolocation API and the offline storage API, and takes advantage of CSS 3 for smaller, image-less design elements. Because all the major mobile platforms — iOS, Android and WebOS — use similar WebKit-based browsers, there’s little to worry about when it comes to support for cutting edge features like HTML5 and CSS 3. Even when Firefox arrives on mobiles, you should expect support to be on par.

Sencha has some demos available if you’d like to see what’s possible. The GeoCongress demo makes use of the geolocation API to find out where you are and then show a list of your senators and representative. There’s also a very slick Solitaire demo that shows how to preserve an app’s state using the HTML5 local storage API.

The Sencha Touch code is available under a GPLv3 license. If you’d like to experiment with the code, head over to the new Sencha Touch site and grab a copy.

If Sencha Touch doesn’t cover all your bases, there are several other frameworks out there that do similar things. Although not specifically geared to mobile-web apps, SproutCore can be used to create lightning-fast mobile-web apps.

SproutCore generated quite a bit of interest a few years ago, when Apple incorporated it into the company’s MobileMe tools like iWork.com. It’s also the framework behind Kiva’s Loan Browser tool.

If you’re used to jQuery-style JavaScript, SproutCore will look a bit strange at first. Like server-side frameworks such as Rails and Django, SproutCore is based on the model-view-controller (“MVC”) paradigm. As with other frameworks in this category, SproutCore cuts down on latency by moving business logic to the client, but in keeping the MVC pattern of server-side frameworks, SproutCore should make developers feel right at home.

On the downside, SproutCore does not degrade at all. If anyone shows up to your mobile site with JavaScript disabled, they’ll see a blank page. SproutCore also lacks support for WAI-ARIA, which means it doesn’t offer much in the way of accessibility tools.

SproutCore is written in Ruby. You can grab a copy from the SproutCore site, or install it as Ruby “gem.”

Another possibility is iWebKit, which offers many of the same features you’ll find in other frameworks, but puts more emphasis on Apple’s mobile devices. Unfortunately, while most iWebKit apps will work just fine in Android, the built-in UI elements are clearly iPhone-specific.

Like the others iWebKit is customizable. You can always dive into the CSS files and tweak things to your liking (though doing so may call in to question the benefit of using a framework in the first place).

Another framework worth noting is Apple’s own PastryKit. Although PastryKit’s UI isn’t cross-platform, it does have some nice tools for iPhone-specific web apps. Keep in mind, though, that PastryKit is not officially documented. Daring Fireball has a nice video overview, and developer David Calhoun has dug a bit deeper into how PastryKit works.

Before you rush off to develop a mobile-web app, it’s worth pointing out that there are definitely some significant advantages to native apps — whether its on iOS or Android. Native apps have access to lower-level system tools (in the iPhone’s case, that means stuff like the accelerometer, gyroscope and more). If your apps need those tools, then by all means, use native code.

If you’re not writing an app that makes heavy use of platform tools, the web is a viable option. And, thanks to frameworks like Sencha Touch, SproutCore and iWebKit, building a cross-platform mobile-web app doesn’t have to be a Herculean task.

See Also:

Tags: , , , , ,
File Under: Frameworks, JavaScript, Visual Design
Mar
26
2010

Beautiful Websites: Former Apple Designer’s Amazing Photo Gallery

By

matasblog

Slick photo gallery plug-ins for JQuery, Dojo and other JavaScript libraries mean that the days of the boring thumbnail grids are well behind us. But the same ease-of-use means that slick slideshows are everywhere — it’s hard to stand out.

Unless you’re Mike Matas. The former Apple designer and co-founder of Delicious Monster recently unveiled a new photo blog that has perhaps the slickest, yet simplest, gallery script we’ve ever seen.

Perhaps more impressive than the clever slide navigation and the blurred background photos, what’s really amazing about the site is how simple the interface is — Matas manages to pack in everything from embedded maps to comments without overwhelming the photos.

The only caveat is that the site requires a modern web browser with support for emerging standards. Internet Explorer users; nothing to see here. Also note that performance lags a bit in Firefox 3.6 compared to WebKit browsers like Safari and Chrome.

We’d hate to see a million ripoffs of this design, but if you want to do something similar, the site’s developers, Chi Wai Lau and Nefaur Khandker, say that it was built using the MooTools JavaScript framework.

Check out our three-part MooTools tutorial on Webmonkey if you want to learn more about using the free UI framework.

One very nice touch we like on the site is that scrolling changes the URL so there’s no back-button breakage. Unfortunately, if you turn off JavaScript entirely you notice that the site doesn’t function at all, which is worth remembering should you consider doing something similar.

See Also:

Tags: , ,
File Under: Frameworks
Feb
15
2010

Ruby on Rails for Beginners

By

If you’re like me, you’re reading this on your bright-red custom-built laptop in a soothing rosemary-scented bubble bath, and you’re wondering, “Why do I want another interpreted programming language? I can find my way around Perl and PHP and maybe a little Python. And Unix shell scripting. I feel fine. Why do people keep talking about Ruby?”

Continue Reading “Ruby on Rails for Beginners” »
Tags: ,
File Under: Frameworks
Feb
15
2010

Get Started with Web Frameworks

By

If you’ve built a few websites from scratch, chances are you’ve noticed that you have to solve some of the same problems over and over again. Doing so is tiresome and violates one of the core tenants of good programming — Don’t Repeat Yourself (DRY).

Luckily for you other people long ago noticed that web developers face similar problems when building a new site. Sure, there are always edge cases which will vary from site to site, but for the most part there are four general tasks we developers have to handle — Create, Read, Update and Delete, otherwise known as CRUD.

To help you out, a number of web application frameworks have emerged over the years. You might have heard of some of the more famous frameworks — Ruby on Rails, CakePHP and Django.


Continue Reading “Get Started with Web Frameworks” »

Tags: ,
« OLDER POSTS