jPanelMenu is a jQuery plugin that creates panel menus like those of iPhone apps.

The thorough plugin features animations, keyboard shortcuts, and even easing effects along with a powerful API.

Even though it’s bloated with features, jPanelMenu does seem to be easily implementable so its options, callbacks and the ever-mighty API are more than welcome.

Duri.me is a little and straightforward app that converts images to Base64 files to reduce the amount of requests to the server.

The images can be embedded into HTML as strings of characters (the Base 64 is an encoding used to prevent data loss).

Duri.me allows for a straightforward way of implementing images directly into HTML, thereby reducing page load times.

Roadcrew.js is a library that adds page switching capability to single-page web applications.

Roadcrew can be paired with something like Apache Cordova to increase performance by removing the need to reload the page.

Roadcrew has some nifty features, such as ‘intercepting pages’ — when a page is loaded, another one appears while it loads, and so on.

Social Auth is a social authentication solution based on social networks.

Social Auth offers a convenient way for users to log in with social networks. Once the user has logged in, you can then store the information in a database.

This solution can be developed on several apps and supports Twitter, Facebook and Google Plus.

Garlic.js is a library that preserves form values locally with localStorage.

The data stored locally is destroyed upon submitting the form. Browser support is admittedly scarce, but then again, the world has to move on.

Garlic seems like the perfect plugin to implement in a forum/comment system — we’ve all had a time when we’ve spilled our hearts out refuting a non-believer and the text becomes lost once we accidentally hit backspace out of the input context…

Responsive Img is a jQuery plugin for adding responsive image capability to your designs.

Responsive Img uses jQuery + a PHP file to resize images on the fly. There’s no need for extra HTML or CSS markup as the plugin is called upon images you want to be resizable.

Alternatively, you can update the markup a bit to decrease page load times.

ByPeople, a design website yet to be released to the public, is giving away a huge pack of design goodies.

The free stuff includes all things design: CV templates; divisors; textures; social icons; sliders; patterns; etc.

Your email is requested, and they’ll probably send an email upon the website’s opening. It should be worth it, however.

Long Press is a jQuery plugin for easily adding ‘alternate key’ functionality to web inputs.

The idea is the same like in iOS or Android, but with some nifty features that make it viable for the desktop.

When the user holds a key for a longer amount of time, the above menu appears that can be controlled with arrow keys, the mousewheel or the mouse.

This adds much-needed special character functionality to inputs, which is very welcome for international projects.

Heyoffline.js is a JavaScript library for warning your users when their connection is interrupted.

It’s an MIT-licensed solution for notifying your users in case they go offline, so as to prevent them from losing something.

Again, you can implement such a solution anywhere from forums to guestbooks and collaborative interfaces. Heyoffline is a stand-alone library.

Batch is an icon set for web & UI design full of good stuff you can use in any project.

They’re available as PhotoShop shapes, so you can resize them without losses.

These generic icons fit for anything from user interfaces to witty designs and, in the end, you may even do some artwork with them — they’re free!

Presentz is a JS library for syncing videos with slides.

As of now, the plugin supports Vimeo, YouTube and custom videos, as well as Slideshare, Speakerdeck and RVL.io for presentations.

While available as a library, you can use Presentz online as well — just log in at the library’s homepage.

Since all your app.net data is stored as JSON, it would then be feasible to extract the post IDs from that using some sort of selector engine.

We can then use the post IDs to build a list of crawlable links to be used by Google.

Luckily, we have JSON Select, for stripping out the other data we don’t need. In our case we are only going to be targeting a JSON value called thread_id. Here’s an example of JSON Select in action:

He used that fiddle as a base for this program.

The (now very old) app.net JSON file can be downloaded here.

For this to work, he had to prepend:

var jsonData =

To the JSON file provided to me by app.net, and rename it to data.js

Run my ADN post links generator

Here are the app.net Post Links:

HubSearch is an open source web app for conducting a search for GitHub repositories.

If you have a library/plugin idea but you aren’t sure if it hasn’t been done before, HubSearch can help aid as a research tool.

The tool also excels if you want to look up some statistics or find a library. HubSearch runs on Node, and uses HTML for user views.

The only thing missing now is an aggregator that streams services like GitHub, Google Code, and others into a single service…

• Website: http://projects.jga.me/hubsearch

oriDomi is a DOM library for making objects fold like paper; it supports jQuery and Ender, too.

Weighing less than 15kb, oriDomi manages to pull a staggering set of features out of its sleeve — iOS support, image/GIF/and webfont folding, as well as support for two different libraries.

However, oriDomi only works on browsers where 3D CSS transforms are supported.

• Website: http://oridomi.com/

Chirp.js is a standalone library for displaying tweets on your website.

Chirp uses the Twitter API, obviously, to collect tweets. The library allows using templates and employs client-side caching for less server bandwidth.

Weighing only 4.3kb minified, Chirp stands among the most easy and most lightweight Twitter plugins out there.

• Website: http://lab.rog.ie/chirp/

Avgrund is a modal UI library for making dialogues with a neat “depth” effect.

Avgrund, Swedish for ‘abyss’, isn’t really meant for practical use, but rather for toying around with CSS transforms and filters.

Whatever the reasoning behind this plugin, it works really well and offers a fresh way of creating modal dialogues. 

• Website: http://lab.hakim.se/avgrund/

BigScreen is a minuscule plugin for using the JS FullScreen API.

The plugin has a few important fallbacks, like the one for video tags if the browser has a different API for full-screen video.

BigScreen is light, easy to use, and works on most modern browsers–what’s not to love?

• Website: http://brad.is/coding/BigScreen/

The folks at CreativeJS have posted a wonderful tutorial showcasing the development of a failure-resilient file uploader.

The tutorial has only a single part as of now, but it sheds light on chunked uploading and pausing/resuming uploads.

Only JavaScript and HTML are used for achieving this. Stay tuned for the next chapters of this enlightening tutorial.

• Website: http://creativejs.com/tutorials/advanced-uploading-techniques-part-1/

Cerebral.js is an application framework built upon the shoulders of Require.js, Backbone, jQuery and the likes.

I’m a bit dubious about the usage of ‘framework’ when referring to Cerebral, but ‘library’ doesn’t do it justice here.

At any rate, Cerebral is a library for creating apps. It provides a modular structure and the necessary tools for building publish/subscribe style applications. As DailyJS notes, Cerebral’s structure ‘encourages building loosely coupled applications’.

• Website: http://gorillatron.github.com/cerebral/

enquire.js is a standalone library for handling CSS media queries.

enquire makes a designer’s job easier by providing a responsive, mobile-first design framework. If support for older browsers is important for the success of your design, enquire.js assists older browsers with media queries.

By pairing this with Modernizr and a PolyFill, you’ve got a powerful library for controlling media queries here.

• Website: http://wickynilliams.github.com/enquire.js/

jsPDF is a JavaScript library for generating PDF on the client-side.

While alternatives like html2pdf exist on the server side for eons upon eons, jsPDF is one of the few PDF-generation libraries that works on the client side.

Besides the obvious use of running a PDF-generator app, the plugin is great for, e.g., creating invoices and formatting books without putting extra workload on the server.

• Website: http://jspdf.com/

TideSDK, a software development kit formerly known as Titanium, is a framework for building desktop apps with web programming languages.

Although the new docs consist mainly of Titanium tutorials, TideSDK boasts new features that should interest anyone who’s fed up with learning a dozen languages for porting their apps:

• Website: http://www.tidesdk.org/

Vanilla JS is a JavaScript framework that will reshape the way you look at code.

Vanilla.js weighs a whopping 0 bytes (or 25 gzipped), meaning you can choose not to implement it at all, as every browser has it pre-installed.

It is, of course, a joke, a joke on jQuery and other popular frameworks which sometimes aren’t the right tools to code with — but most often, I reckon, they are.

• Website: http://vanilla-js.com/

F0rward is an open-source e-commerce platform still in the private beta.

Although still in the beta, Forward seems very promising for developers who are used to wasting time making countless additions to the existing e-commerce systems.

Forward emphasizes flexibility and customization — including customization in the admin panel — and all in all looks like a very promising project; the open beta will start in January 2013, so be prepared.

• Website: http://getfwd.com/

Foggy is a jQuery plugin that blurs out page elements.

You can set the opacity and the blur radius for the background page. The plugin uses the -webkit-filer:blur attribute for creating the blur, but falls back to manual mode for unsupported browsers.

Foggy is obviously a great plugin for ‘see more when you log-in/subscribe’ pages, especially if combined with a plugin that disables text select.

• Website: http://nbartlomiej.github.com/foggy/

Strapdown.js is a script that makes making Markdown documents a cinch.

Strapdown uses Twitter Bootstrap for styling, so it also has a number of themes you can use.

The script is used just by making pages with the snippet above.

It’s SEO-friendly, works on most browsers, and operates upon the tools many developers use daily — what’s not to love?

• Website: http://strapdownjs.com/

Bower is a package manager for web developers.

Bower is a super-low-level tool for managing your dependencies. However, it’s convenient: typing ‘bower install jquery’ will download jQuery to a specified path, etc.

Bower runs on Node and isn’t restricted to loading JavaScript packages — it also allows easily installing assets such as images and CSS.

While similar tools already exist, Bower remains a more accessible, first come, first serve-based tool that in theory should save you a lot of time.

• Website: http://twitter.github.com/bower/

Tampon is an easy-to-use tweet scheduler app good for corporate and mogul twitter accounts.

While tweet scheduling takes away from the spontaneous nature of Twitter, some people just can’t afford to waste their time on it.

At any rate, Tampon runs on Backbone.js and MongoDB.

Tweets can be re-ordered with drag&drop functionality, or posted instantly.

• Website: http://tamponapp.com/

Meny is a space efficient, three dimensional menu that uses CSS 3D transforms.

It works best on browsers with 3D transforms, but fallback to 2D is available, too.

What’s more, Meny comes with support for touch events on mobile devices, which makes it a perfect companion for iOS/Android-related websites.

• Website: http://lab.hakim.se/meny/

Tres is a mobile web framework for developing JavaScript apps.

Tres features an array of classes for working with touch gestures. It provides space for working with the different resolutions mobile devices tend to come with.

It works with Sass stylesheets and offers convenient ways of implementing mobile-compatible forms, lists and so on.

• Website: http://tres.io/

DocPad is a quick & efficient build module for creating websites and web apps.

DocPad’s main strength is its ease of use, compact structure and the availability of features whilst not bogging you down with them.

The builder has a file-based structure and allows users to choose between numerous website structures, such as the HTML5 Boilerplate, Bootstrap, Hogan, etc.

Seriously, if my grandparents ever wanted to create a website, I’d direct them to DocPad. Splendid docs, easy building, DocPad has it all.

• Website: https://github.com/bevry/docpad

XLSX.js is a JS library for writing and reading XLSX spreadsheets.

XLSX is a format that basically operates by placing a number of XML files into a ZIP file, so this library uses JSZip for reading and writing *.XLSX files.

The library converts base64 strings into XLSX files. The developers explain that their choice for this way of doing things is that base64 opens up more possibilities, but without a doubt it will create headaches for any interested developers.

• Website: http://blog.innovatejs.com/?page_id=7

Fokus is a plugin that emphasizes the selected text by making the rest of it semi-transparent.

Also available as a Chrome extension, Fokus aims to increase productivity and emphasizes focus on the text on the client side.

It’s great for text-based websites that don’t have many tables which interfere with selecting content.

The good news is that Fokus doesn’t work on input fields, so it won’t interfere with any input activities, like writing articles such as this.

• Website: http://lab.hakim.se/fokus/

TypeScript is a language built on top of JavaScript, offering several new features — debugging included.

Supporting several development environments, such as Node and Visual Studio 2012, TypeScript offers a rich array of features like debugging, scalability and a clean editing.

TypeScript introduces explicit OOP patterns to JavaScript. Those include interfaces, constructors and classes.

• Website: http://www.typescriptlang.org/

pXY.js is a library for analyzing canvas elements.

The developer states that pXY.js is useful for (rather obscure) actions like document feature extraction and OCR segmentation.

The documentation is well-detailed with examples. If not useful right away, pXY at least serves as an introduction to algorithm visualization.

• Website: http://o-0.me/pXY/

It uses tablature and regular expressions to make room for simpler, faster touch implementations.

Available for Android and iOS, Proton++ is a very useful tool for developers that want to implement complex touch gestures with a simpler rule set.

While we wait for the concept to spread — and, thus, possibly get a port to JS — the introduction video does well to clear up any questions about the nature of this framework.

• Website: http://vis.berkeley.edu/papers/protonPlusPlus/

Using a plethora of libraries (well, actually, four) like tabletop.js and raphael.js for visualization, as well as mustache.js for creating data templates, Sheetsee actually works like a small CMS that updates data every time you update the spreadsheets.

Sheetsee.js looks like a very powerful (and convenient) tool for data visualization, as the data updates in real-time and Google’s Docs are very compatible with any data-fetching solutions.

• Website: https://github.com/jllord/sheetsee.js

The plugin features four ready-made color options and of course customization, which is done through editing a PSD.

prettyCheckable aims to provide a larger area for touchscreen users, as well as offers a better look & size (arguably) than the default checkboxes and radio buttons.

The icons come in four formats — CSH, PSD, retina and PNG — as well as three pixel sizes.

These generic icons are perfect for any web/mobile app, and as you can resize them freely, the Crisp icons are also great to use in a logo or anywhere else where you’d need to surpass the usual icon size.

The library falls back to title updates if the pie icons aren’t supported. Piecon is tested to work on Chrome 15+, Opera 11+ and FireFox 9+.

This is a great way to replace a loader; however, I think developers  wouldn’t want their tab to become lost among others while their game/app is loading.

justGage creates animated gauges which can supplement your website or app.

The graphics are pure SVG, so they work in many browsers. Although the developers emphasize responsive design, my recent version of Chrome doesn’t update the gauges responsively.

However, the plugin does provide a way of customizing the gauges, but that’s done with JS.

CSScomb re-parses the code and arranges it the way you want it. Commented expressions are parsed, too.

What’s more, CSScomb leaves the initial code structure and arrangement totally intact, abiding to the way you structured your CSS before.

The tool is also available as a plugin for numerous desktop editors, including Notepad++, Sublime Text 2, Textmate, and others.

HubInfo is a jQuery plugin for showing information about GitHub repos.

The plugin is pretty simple in its functions, as it only displays info about a repository + links.

There’s also an example that shows how to include Twitter sharing, too.

HubInfo is pretty useful if you want to showcase all your GitHub repos in one page or if you run a website such as Webification.

HTML5 Sortable is a plugin that uses drag&drop for creating sortable lists.

]]> http://edanhewitt.com/webdev/sortable-lists-with-dragdrop-html5-sortable/feed/ 0 http://edanhewitt.com/webdev/roundabout-plugin/ http://edanhewitt.com/webdev/roundabout-plugin/#comments Tue, 24 Jul 2012 00:45:09 +0000 admin http://edanhewitt.com/blog/?p=530 Roundabout is a jQuery plugin that converts unordered lists into nice-looking turntables.

Roundabout features a handy API for managing the turntables. Addons that enhance Roundabout’s turntables are also available.

As seen in the picture, the plugin works with images as well.

As well as for showcasing shop items or recent articles, Roundabout can be used for fun animations and as a form element. 

Sidetap is an implementation of the popular side menu navigation like that of Facebook and Sparrow.

The framework is device-agnostic, and features a simple structure to make design decisions easier (and customization not achievable).

You’ll like the easy syntax and the small size. Although many things are missing from Sidetap, the development roadmap is optimistic, especially the bit about leaving the side navigation open on tablets like the iPad.

The table of contents features subsections, and updates while the user is scrolling through the page.

The plugin works upon jQuery’s UI, and, what’s more, supports themes, as well as the back/forward buttons on the browser if you opt to include history.js.

Hallo.js uses the jQuery UI and HTML5′s ContentEditable functionality to edit web content.

It can be used to edit Markdown content as well.

The plugin operates with sub-plugins, which are very easy to code, and is altogether peachy and dandy, except for the fact that it cannot format links as of now.

The plugin helps creating uniform buttons for use in websites. Sharrre supports all major browsers and IE6.

Besides providing a comprehensive, all-in-one tool for creating share buttons, the plugin is highly customizable and easy to implement.

Usually the process of creating the ToS is time-consuming, but the website provides an easy-to-use vanilla template you can later modify with your attorney if you have one.

Termsfeed makes the process quicker and takes about a minute to generate the stuff that few people bother to read anyway.

The library uses jQuery. Both HTML elements and images are supported for the background. Options and events are there as well, but there’s not much customization to do for a plugin like this.

The plugin has seven options, which are actually more than enough for giving simple notifications.

Three self-explanatory notification types — error, success, and default — along with the easy styling make the plugin straightforward, easy to use, and effective.

stickyMojo supports Chrome, IE8+, and FireFox. Graceful degradation is supported for older versions of IE.

It features a number of stylish icons for use in your web projects.

iconmonstr features more than 600 icons for use in your projects. Although they aren’t downloadable in a bundle, there’s a search engine for easier icon finding. The icons are available in .PNG and .SVG file formats.

It is released as a tutorial, explaining the whys and hows of making such a plugin.

Although FrameWarp is basically a LightBox plugin, it still has interesting features like a JavaScript fallback and a cache system for subsequent loads.

FrameWarp is a neater way of loading separate pages than a LightBox.

Unitools is a suite of tools for working with Unicode in the browser. This is a collection of tools gathered from different sources on the net, and put onto one page for quick reference. The tools are a reaction to the increasing problem of resources disappearing from the net only never to be seen again.

Unitools is also an evolution of an old site, Unicode Tools, released in late 2011. The only difference is, all the tools are on one page, and this means less link-hopping, and an overall better experience for the user. It also makes the project easier to maintain, as new tools arrive all the time.

One of the greatest things about jQuery is the ever-expanding user-base. In the past it was common for libraries to have a small following, with only a handful of plugins and widgets made by advocates of the library. Now it seems everyone has their own jQuery plugin. You only have to look on Github to see many programmers have thrown their two-cents into the jQuery community. It seems you have the dabblers who make small plugins to test their skill, and (usually) end-up creating something truly awesome, and the aficionados who only do jQuery stuff (and only very rarely throw out good code, though some do).

Over the past three or so years I have been assimilating and trying to make sense of the sheer volume of these plugins, and over the course of my constant checking of del.icio.us, and various other javascript related sites, I came up with a jQuery project of my own. I couldn’t help it, I had to respond to this phenomenon. You see, I collect jQuery plugins that I find interesting, and if time permits, use them extensively in my projects. It turns out, I only like good jQuery plugins, that is, plugins which bring something new to the table, or offer a unique way of interacting with a website that hasn’t been done before.

Sadly, some plugin authors don’t get the exposure they deserve for their work, as usually references to a particular plugin are drowned by the noise of the dreaded ‘link list’ / ’roundup’ type post. Hands up how many people discovered a plugin they really liked by wading through a huge list on some blog? (Puts hands up). If the web-as-app needs better discover-ability techniques, then surely we must get rid of bloated content farms serving up the ‘coolest jQuery plugins of 2011′ type posts, and actually create something a bit more human and above all, of high quality.

This is a ‘handpicked’ repository of jQuery scripts, so don’t be offended when you see a script you don’t like. If you’re annoyed certain plugins didn’t make the list, create your own repo! I’ve even made the entire site’s source code available so you can do just that.

The Handpicked jQuery Plugins Repository

The plugin sports a rather attractive default design, along with callbacks and GET/SET method support.

Data is passed to ddSlick as JSON, and keyboard support is coming “soon”.

ddSlick is indeed a slick alternative to default drop down select boxes.

Redactor is actually quite a monumental plugin with numerous options and extensive docs.

Among the most notable features, Redactor holds the following:

• File Uploading;
• Autosave;
• Keyboard shortcuts;
• An extensive API;

It’s clear that Redactor is a juggernaut of a plugin, and can easily be an all-round choice if an app needs a WYSIWYG editor.

It simplifies making Google-Maps powered, customized maps.

gmaps.js can be used to apply polyfills, routes, overlays, etc. to Google Maps, and is a useful library for website development from small company websites to transport and delivery companies where maps play an important role in customer interaction.

See the examples page for a better idea of what to look for in this library.

Happy.js makes the validation process remarkably simple: for fields that have to be filled, simply set required: true; similarly, provide a test argument for email fields, etc.

The argumentation behind this plugin is, as the developer puts it, “It’s hard to be happy when you’re bloated.”

Percentage Loader uses HTML5 canvas to create a graphically engaging experience in just about 10 kilobytes minified.

As vectors not images are used, percentage loaders can be created at any size preferred.

The icons are shipped in .PNG; the lack of PSD files is slightly disappointing, but they’re beautiful all the same.

As for the motivation behind these generic-use icons, the developer states: “[...] obviously, it was the leest I could do. =)”

hoganjs A Twitter developed Node Templating Engine Hogan.js

Hogan.js is wrapped around Mustache, and provides a nice interface for the prior.

The library is minuscule at only 2.5 kilobytes. Its functionality is fully based upon Mustache, yet the results are without a doubt quicker.

finchjs Simple And Powerful JavaScript Routing Finch.js

Finch’s strong side is its straight-to-the-point use of routes, as parent routes are aptly loaded before the child routes, and are as well multi-leveled (grand-parent routes).

Routes can be cached, too. This eliminates some of the most often encountered problems with other routing systems.

bgstretcher Background Image Adding And Stretching bgStretcher

You can add either a single image or a set of images; the latter effectively turns bgStretcher into a rather large slideshow.

bgStretcher’s options include preloading, pagination, proportional re-sizing, etc.

Overall, the plugin is a nice and greatly configurable solution. However, for multi-platform projects, a way of compressing images or using different versions of them would be more than welcome–performance can become a very real issue if bgStretcher isn’t used carefully.

colllor Advanced Color Picking For Advanced Combinations Colllor

You can supply either the hex color, or type up its name in plain English.

Creating consistent color schemes is very easy with Colllor, as well as finding alternative colors for added design variety.

This must-bookmark web app can very well become an irreplaceable tool in any web designer’s arsenal.

dragndrop An Easy To Use Photo Gallery PhotoShow

PhotoShow’s admin interface is intuitive and allows administrators to sort, manage and delete images with just the mouse.

The web gallery doesn’t require a database to run, as the files are sorted exclusively through the file system.

A proxy system allows managing user permissions on a ‘mechanical’ level, meaning the photos can really stay private, that is, if they aren’t stored in a public directory.

Overall, PhotoShow is a powerful web gallery which could definitely be a top choice for the prolific artist’s portfolio.

resizer An Useful Bookmarklet For Responsive Design Tests Resizer

It’s very easy to use and features standard screen sizes like 320×480 (mobile), 460×640 (small tablet), tabled (768×1024), and others.

Resizer is also available as a Chrome plugin and is without a doubt the bookmarklet if you’re designing responsive pages.

sequencejs jQuery Slider Gallery With Infinite Style Sequence.js

Among notable features of Sequence.js are support of multiple instances, non-JS fallbacks, responsiveness and touch support.

The documentation is well-written and includes sound advice on how to go about creating a customized gallery with Sequence.js.

Overall, Sequence.js is a better gallery than most in terms of customizability and features: for example, in the picture you can see icons used as representatives of slides. Awesome!

jobberBase, however, doesn’t provide oDesks’s useful desktop interface, but is useful for many either way.

Features that ship with this script include RSS feeds, javascript widgets, location management, and more.

With some updates, you can easily turn jobberBase into a quite powerful job board.

Brewer compiles your LESS or Stylus stylesheets, CoffeeScript files, and bundles all your code to a single file, and, optionally, compresses it.

The author states that more useful features will come in the near future, including automatic dependency updates, as well as template management.

smoothpagescrolling Smooth Scrolling With jQuery Page Scroller

By default the plugin provides you with four navigation types, all of which are useful in some circumstances.

For example, ‘next & prev’ navigation is quite handy for mobile phones, and so on.

PageScroller ships with several useful options and easing functions. The code and the wrapper are both dead simple; this is an excelling plugin, at least from a brief glimpse.

Fugue icons is a huge collection of 3,320 icons in PNG format sized at 16×16 pixels.

When used with the jQuery cookie plugin, it even remembers the state of the content that is expanded or collapsed between page loads.

An invaluable example of how to correctly display hidden content unobtrusively is also provided.

Data can be loaded from static text or via ajax and the position of the card can be automatically adjusted depending on the edges of the view port.

It also has built in options to display Facebook information or tweets from twitter.

320 and up can be used standalone or by using it with the HTML5 boilerplate, in which case some files need to be replaced within the boilerplate package.

It includes:

• five media query increments: 480, 600, 768, 992 & 1382 pixels
• a vertical grid based on Less Framework 4
• either a single style sheet with multiple media queries or multiple linked style sheets
• combined HTML5 boilerplate and mobile boilerplate components
• typography preset styles
• imgsizer.js to improve IE’s rendering of resizeable images
• selectivizr.js - bootstrap CSS3 selector support
• jquery-extra-selectors.js to boost Selectivizr



]]> http://edanhewitt.com/webdev/320-and-up-html5-boilerplate-extension/feed/ 0 http://edanhewitt.com/webdev/modern-pictograms-free-open-type-font/ http://edanhewitt.com/webdev/modern-pictograms-free-open-type-font/#comments Tue, 10 Apr 2012 15:09:35 +0000 admin http://edanhewitt.com/blog/?p=410 Modern Pictograms is a free open type front that contains common images used in web interfaces.



It can be used by designers or to create wire frames and is also compatible with @font-face.

]]> http://edanhewitt.com/webdev/modern-pictograms-free-open-type-font/feed/ 0 http://edanhewitt.com/webdev/noty/ http://edanhewitt.com/webdev/noty/#comments Tue, 10 Apr 2012 15:06:54 +0000 admin http://edanhewitt.com/blog/?p=406 Noty is a jQuery plugin that makes it easy to create alert, success, error and confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue.



The notifications can be positioned at the top, bottom, centre, top left or top right.

There are lots of other options in the API to customise the text, animation, speed, buttons and much more.

It also has various callbacks for the buttons, opening closing the notifications and queue control.

]]> http://edanhewitt.com/webdev/noty/feed/ 0 http://edanhewitt.com/webdev/infinite-drag/ http://edanhewitt.com/webdev/infinite-drag/#comments Tue, 10 Apr 2012 15:05:38 +0000 admin http://edanhewitt.com/blog/?p=403 Infinite Drag is a jQuery plugin that creates an infinite scrolling space within a view port by adding tiles as the view port is dragged.



As new tiles are created, a function is executed where code can be run to generate new content within the tile.

]]> http://edanhewitt.com/webdev/infinite-drag/feed/ 0 http://edanhewitt.com/webdev/lion-bars/ http://edanhewitt.com/webdev/lion-bars/#comments Tue, 10 Apr 2012 15:02:55 +0000 admin http://edanhewitt.com/blog/?p=400 Lion Bars is a simple jQuery plugin to create OSX style scroll bars.



It is cross browser compatible and lightweight (8kb minified).

It has options to auto hide and methods to load content when the end of scroll has been reached (to create endless scroll capability).

]]> http://edanhewitt.com/webdev/lion-bars/feed/ 0 http://edanhewitt.com/webdev/glisse/ http://edanhewitt.com/webdev/glisse/#comments Tue, 10 Apr 2012 15:00:40 +0000 admin http://edanhewitt.com/blog/?p=397 Glisse is a jQuery photo gallery plugin that uses seven different CSS3 animations using keyframes.



It features keyboard navigation and works with the apple touch devices with android support coming soon.

It is responsive and scales to fit the viewport. Currently it only supports CSS3 and will not work with legacy browsers but the developer has plans to also add JavaScript animation support in the future.

The plugin can be customised with options to change the speed and type of animation.

]]> http://edanhewitt.com/webdev/glisse/feed/ 0 http://edanhewitt.com/webdev/web-symbols-typeface/ http://edanhewitt.com/webdev/web-symbols-typeface/#comments Tue, 10 Apr 2012 14:44:53 +0000 admin http://edanhewitt.com/blog/?p=394 Web Symbols Typeface is a vector html-compliant typeface that includes icons and symbols that are commonly used in web interfaces.



It is compatible with @font-face and can be used in your sites with the following snippet:

@font-face{
font-family: 'WebSymbolsRegular';
src: url('/fonts/websymbols-regular-webfont.eot');
src: url('/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/websymbols-regular-webfont.woff') format('woff'),
url('/fonts/websymbols-regular-webfont.ttf') format('truetype'),
url('/fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}

]]> http://edanhewitt.com/webdev/web-symbols-typeface/feed/ 0 http://edanhewitt.com/webdev/facebook-twitter-style-mentions-input-jquery-plugin/ http://edanhewitt.com/webdev/facebook-twitter-style-mentions-input-jquery-plugin/#comments Tue, 10 Apr 2012 14:42:44 +0000 admin http://edanhewitt.com/blog/?p=391 Mentions Input is an auto-complete form input jQuery plugin that recreates the @mention used in Twitter and Facebook.



Unlike a traditional auto-complete widget, it is triggered with a character such as @ – but this can be changed in the configuration options.

The data store can be local or it can be retrieved remotely with AJAX. An image such as an avatar can also be returned and displayed in the drop-down results.

The plugin has a number of options and callbacks which makes it an extremely useful UI component.

It wont work in legacy browsers such as IE6 & IE7 without a poly-fill as it requires the HTML 5 input event but this is also included.

]]> http://edanhewitt.com/webdev/facebook-twitter-style-mentions-input-jquery-plugin/feed/ 0 http://edanhewitt.com/webdev/topup-jquery-ui-lightbox/ http://edanhewitt.com/webdev/topup-jquery-ui-lightbox/#comments Tue, 10 Apr 2012 14:41:18 +0000 admin http://edanhewitt.com/blog/?p=388 Topup is a cross browser compatible jQuery and jQuery UI lightbox gallery plugin that features a draggable and resizable modal window.



The modal window is capable of displaying images, flash, HTML content and movies with a smooth transition effect.

The API has extensive documentation and examples.

]]> http://edanhewitt.com/webdev/topup-jquery-ui-lightbox/feed/ 0 http://edanhewitt.com/webdev/jquery-backstretch/ http://edanhewitt.com/webdev/jquery-backstretch/#comments Tue, 10 Apr 2012 14:39:41 +0000 admin http://edanhewitt.com/blog/?p=385 Backstretch is a lightweight (1.2kb minified) jQuery plugin that will stretch an image to fit the size of the page and will automatically resize it if the window size is changed.



It can also display images as a slideshow or change the image on a click event.

It currently has options to configure the fade in speed and the axis on which to center to image.

]]> http://edanhewitt.com/webdev/jquery-backstretch/feed/ 0 http://edanhewitt.com/webdev/jquery-credit-card-validator/ http://edanhewitt.com/webdev/jquery-credit-card-validator/#comments Tue, 10 Apr 2012 14:36:21 +0000 admin http://edanhewitt.com/blog/?p=382 jQuery Credit Card Validator is a plugin to validate card numbers by card type, number length and luhn checksum.



It works by testing these three parameters and returning them as an object on each key-press event.

The following card types are supported:

American Express
Diners Club Carte Blanche
Diners Club International
Diners Club United States & Canada
Discover Card
JCB
Laser
Maestro
MasterCard
Visa
Visa Electron

]]> http://edanhewitt.com/webdev/jquery-credit-card-validator/feed/ 0 http://edanhewitt.com/webdev/table-sorter-jquery-plugin/ http://edanhewitt.com/webdev/table-sorter-jquery-plugin/#comments Tue, 10 Apr 2012 14:34:17 +0000 admin http://edanhewitt.com/blog/?p=379 Table Sorter is a jQuery plugin for client side sorting of data within a table.



One of the benefits of table sorter is that it supports many types of data and automatically detects them. This is something that some of the more popular table sorting plugins do not handle well without extensions.

It also works well in legacy browsers supporting IE6 and Firefox 2.

One of the negatives of this table sorting plugin is that it’s features are limited and it currently does not support paging out of the box.

The options are well documented and has several working examples.

]]> http://edanhewitt.com/webdev/table-sorter-jquery-plugin/feed/ 0 http://edanhewitt.com/webdev/bootbox-botstrap-replacement-for-javascript-alerts/ http://edanhewitt.com/webdev/bootbox-botstrap-replacement-for-javascript-alerts/#comments Tue, 10 Apr 2012 14:28:06 +0000 admin http://edanhewitt.com/blog/?p=376 Bootbox. Documentation is provided on usage and a new version has been released which is coincidentally based on Bootstrap 2 and contains changes & additions to the API.



]]> http://edanhewitt.com/webdev/bootbox-botstrap-replacement-for-javascript-alerts/feed/ 0 http://edanhewitt.com/webdev/wookmark/ http://edanhewitt.com/webdev/wookmark/#comments Tue, 10 Apr 2012 14:25:51 +0000 admin http://edanhewitt.com/blog/?p=373 Wookmark is a jQuery plugin that helps you to create a responsive grid layout based on the width of the container or window.



The plugin can be customised by specifying the width of the column and the spacing in between.

The number of columns will automatically update as the browser is resized and the height of the columns will remain approximately equal.

]]> http://edanhewitt.com/webdev/wookmark/feed/ 0 http://edanhewitt.com/webdev/date-picker-extension-for-bootstrap/ http://edanhewitt.com/webdev/date-picker-extension-for-bootstrap/#comments Tue, 10 Apr 2012 14:24:29 +0000 admin http://edanhewitt.com/blog/?p=370

Date Picker is another jQuery powered Bootstrap extension that requires no explanation.

It features options to customise the date format & start day of the week and has show, hide & ChangeDate events.

]]> http://edanhewitt.com/webdev/date-picker-extension-for-bootstrap/feed/ 0 http://edanhewitt.com/webdev/pow-js/ http://edanhewitt.com/webdev/pow-js/#comments Tue, 10 Apr 2012 14:22:04 +0000 admin http://edanhewitt.com/blog/?p=367 Pow.js is a jQuery plugin that uses CSS and Canvas to generate a sunburst background image.



The website also has a form where you can modify the fields to generate an image on the fly.

]]> http://edanhewitt.com/webdev/pow-js/feed/ 0 http://edanhewitt.com/webdev/html5-book-guide/ http://edanhewitt.com/webdev/html5-book-guide/#comments Sat, 07 Apr 2012 18:08:15 +0000 admin http://edanhewitt.com/blog/?p=364

HTML5 isn’t finished but a lot of books about it are. Books written about HTML5 in 2010 may feel a little out of touch since the state of HTML5 is still under development. This is why my HTML5 Book Guide is only covering 2011 and 2012 HTML5 books. Learn about the best HTML5 books.

HTML5 Books for Beginners


Introducing HTML5
This book is written by two of the more entertaining characters in the HTML5osphere, Bruce Lawson and Remy Sharp. It gives you a brief overview of why HTML5 exists and then dives into showing you how to start implementing the HTML5 language. This is the second edition which will be released October, 20th, 2011.

The Complete Idiot’s Guide
to HTML5 and CSS
According to the title, if your an idiot and need a HTML5 guide, this is the book for you. This is not a book that is solely about HTML5. It is however a pleasant surprise for people who just starting to learn about the web in the year 2011. The book starts with a section on web hosting and finishes up teaching you how to make your web pages load faster. It even features a 16-page color insert and a “Speak Like a Geek” glossary.

HTML5 24-Hour TrainerWho doesn’t want to finish learning something in 24 hours? This book has a nice angle and is terrific for HTML beginners.

Head First HTML5 Programming: Building Web Apps with JavaScript
If I had an intermediate HTML5 book category for my guide, this book would fit right in. Building web apps with JavaScript isn’t child’s play but the way the material is presented in this book could work for some HTML5 beginners. It gets released in October so the HTML5 covered should be fresh.

HTML5 Step by Step
This step by step HTML5 guide is from Microsoft. Yes, Microsoft has an HTML5 book. They should as we just found out recently that are putting Flash out to pasture by closing the door on plugins with their release of Metro Internet Explorer In Windows 8. All the book’s practice files are ready to download and there is a fully searchable online edition of the book.

HTML5: Visual QuickStart Guide
This HTML5 book doesn’t come out until December but it might be worth the wait. It will have a pleasant visual format and step-by-step, task-based instructions for learning HTML5 fast. You’ll create and use images, links, styles, lists, tables, frames, and forms. You’ll also add video, audio, and other multimedia to your site. New elements and form input types in HTML5 will be covered.

HTML5 Multimedia: Develop and DesignMultimedia is a major reason why HTML5 is catching on like wildfire. This HTML5 book promises to be an approachable guide to building native HTML5 multimedia into a website. Get detailed information about HTML5 video and HTML5 audio including how to use the HTML5 Media JavaScript API to create custom controls.

HTML5: The Missing Manual
Wouldn’t it be nice if everything had a manual? This book covers the basics of HTML5. Learn how to add audio and video without plugins, build playback pages that work in every browser and draw with Canvas. You will also learn how to build web apps with rich desktop features and let your users work with your app offline. This would be a handy book to have if you are just getting started with HTML5.

HTML5 For Dummies
Are you a HTML5 dummy? Do you want other people to know? Then this book is for you! This is a HTML5 quick reference guide that does a good job of covering the basics.

HTML5 Crash Course
The highlight of this HTML5 book is that it is written in 20 self-contained lectures. It begins with a thorough introduction to HTML, before moving onto HTML5. The book is great for people who need to learn HTML5 fast. In addition to the paperback and Kindle editions, you can get the HTML5 Crash Course app for the iPhone and iPad. There is also an online video course that goes along with the book on Udemy.

HTML5 & CSS3 For The Real World
This HTML5 book is from SitePoint. It shows you how to create dynamic websites using HTML5 and CSS. Learn about HTML5 video and find out how to build intelligent web forms.

Basics of Web Design: HTML5 and CSS3
You may be required to purchase this book if you are taking a beginning web design or web development course. The price is higher than most if not all the other HTML5 books listed in my guide. The book is a sound teaching tool. There is even a website to go along with the book that has a page for each chapter with hyperlinks for websites listed in the book, information on emerging trends, additional examples, corrections, and review games. HTML5 teachers can pick up instructor materials from the publisher’s website.

Teach Yourself Visually HTML5
This is a nice book for aspiring web designers who are visual learners. The full-color screen shots, two-page lessons, and tips section should make HTML5 easier to learn.

HTML5 Digital Classroom
What is the easiest way for you to learn something? The best method for me is by watching videos with coded examples. If video combined with book learning works for you, this should be the product you get. HTML5 Digital Classroom is a complete training package with a full-color book and instructional DVD that teaches you the basics of HTML5. There are 15 lessons in full color, supported by video tutorials and lesson files on the DVD which makes it easy to learn at your own pace. I love rewinding!

Quick & Easy HTML5 and CSS3
Don’t you wish everything was quick and easy? This book promises a fast, example-oriented introduction to the new HTML and CSS features. This HTML5 book will be released in February, 2012.

HTML5 Developer’s CookbookI love cookbooks! It is the one type of book that really makes sense to own as hardcover rather than paperback. This is an HTML5 cookbook. It covers semantics, browser handling, CSS3, animation, web forms, HTML drawing, video and audio, geolocation, client-side storage, Web Sockets, the Web Workers API, and file and device APIs.

HTML5: Your visual blueprint for designing rich Web pages and applications
This HTML5 book is for visual learners. It includes hundreds of screen shots in order to illustrate each task step-by-step. It also has a companion website that contains all the code needed to learn the HTML5 in the book.

HTML5 Books for Advanced Web Developers and Designers


HTML5 Canvas
The Canvas element is one of the most attractive things about HTML5. This book teaches you how to build interactive multimedia applications using this element to draw, render text, manipulate images, and create animation.

HTML5 for Masterminds

This HTML5 book goes over the 400 page mark. In it you will learn how to structure your documents with HTML5, style them with CSS3, and work with Javascript APIs. Get new techniques for building wonderful websites and web apps. This book takes the cake when it comes to content.

Foundation HTML5 Canvas: For Games and Entertainment
This book shows you how to have fun with HTML5. Chapter 8 teaches you how to create a space bowling game and in chapter 9 you will learn how to make an asteroid avoidance game.

HTML5 Games – Creating Fun with HTML5, CSS3 and WebGL
This book guides you through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL, and WebSockets. Learn about the different aspects of the game your creating like user input, sound, multiplayer functionality, and 2D and 3D graphics. It doesn’t get released until early 2012.

Core HTML5: Volume 1: Canvas
This is another HTML5 book that gets released in early 2012. Learn how to draw and paint, apply shadows, patterns, and gradients, manipulate images, create smooth animations, implement video games, develop custom controls, process video in real time, and use off-screen buffers. The book also comes with a companion website which gives you access to book’s source code, videos about HTML5 Canvas, and live demonstrations from the book. The website is currently under construction but I would expect it to be fully functional upon the books release.

Learn HTML5 and JavaScript for iOS
There are a lot of HTML5 books being released in the next several months. This book is probably the one I am most excited about. It will help you build, fine-tune, and publish your app for iPhone, iPad, or iPod touch. Get tips for iOS usability as well as performance.

HTML5 Mobile Websites
This book has the potential to be very handy for developer and designer. Learn how to apply frameworks like Sencha Touch, JQTouch, jQuery Mobile, and iUI to rapidly build your mobile websites. The HTML5 book provides color illustrations of its detailed techniques and also has a companion website where you practice what you learned.

HTML5 Solutions: Essential Techniques for HTML5 Developers
This book is geared towards web developers and designers. It provides you with HTML5 solutions. Every solution includes sample code that can be applied to many projects.

Learning HTML5 Game Programming
Learn how to build online games with Canvas, SVG, and WebGL. If you are serious about HTML5 game development, a good book could come in handy.

Making Isometric Social Real-Time Games with HTML5, CSS3, and JavascriptIf you are serious about game design this book could be for you. Learn how to build games using isometric map making, sprite animations, networking, social network integration, and high performance rendering.

The Definitive Guide to HTML5
This gets released in November so it will be the definitive guide for at least several months. HTML5 is not suppose to be completed anytime soon so it is difficult to put the HTML5 and the word definitive in the same sentence. Learn how to use all of the core features of HTML5, make the most of the APIs that surround HTML5, such as geolocation, WebStorage, and drag and drop, and how to leverage the media capabilities of Canvas, SVG, HTML5 audio, and HTML5 video.

HTML5 Mastery: Semantics, Standards, and Styling
This book comes out in October and will introduce the new markup elements of HTML5 including the rare elements. It will show you where and how to use them. You will also learn how to create fabulous forms using the new HTML5 elements and client-side validation. The book also explores the power of associated APIs.

HTML5 Multimedia Developers Guide
This HTML5 book doesn’t come out until April, 2012 but I want this blog post to remain fresh so I decided to include it. Learn how to develop desktop and mobile web applications, deliver streaming video and animation with HTML5, and create iPhone and iPad apps.

Beginning Web Applications
Apps are the future of the web. So you better get started! This HTML5 book will show you how to make use of more client-side data with application caching and WebStorage. It will also teach you how to talk to a server application asynchronously with WebSockets.

HTML5 Games Development by Example
Don’t you just love examples! This HTML5 book shows you how to create 6 fun games using the latest HTML5, Canvas, CSS, and JavaScript techniques. It covers puzzle games, action games, multiplayer games, and Box 2D physics.

]]> http://edanhewitt.com/webdev/html5-book-guide/feed/ 0 http://edanhewitt.com/webdev/freebies/ http://edanhewitt.com/webdev/freebies/#comments Sat, 07 Apr 2012 17:35:25 +0000 admin http://edanhewitt.com/blog/?p=352 Download some really neat resources you can use in your projects:

GUI ICONS ⬇

SOCIAL MEDIA ICONS ⬇

80 x 15 BUTTONS ⬇

]]> http://edanhewitt.com/webdev/freebies/feed/ 0 http://edanhewitt.com/webdev/html5-logo-parodies/ http://edanhewitt.com/webdev/html5-logo-parodies/#comments Sat, 07 Apr 2012 17:27:17 +0000 admin http://edanhewitt.com/blog/?p=340 ]]> http://edanhewitt.com/webdev/html5-logo-parodies/feed/ 1 http://edanhewitt.com/webdev/browser-wars/ http://edanhewitt.com/webdev/browser-wars/#comments Sat, 07 Apr 2012 17:25:27 +0000 admin http://edanhewitt.com/blog/?p=337
]]> http://edanhewitt.com/webdev/browser-wars/feed/ 0 http://edanhewitt.com/webdev/site-buttons/ http://edanhewitt.com/webdev/site-buttons/#comments Sat, 07 Apr 2012 17:24:50 +0000 admin http://edanhewitt.com/blog/?p=327





]]> http://edanhewitt.com/webdev/site-buttons/feed/ 0 http://edanhewitt.com/webdev/html5-fist/ http://edanhewitt.com/webdev/html5-fist/#comments Sat, 07 Apr 2012 17:22:38 +0000 admin http://edanhewitt.com/blog/?p=324
]]> http://edanhewitt.com/webdev/html5-fist/feed/ 0 http://edanhewitt.com/webdev/html6-logo/ http://edanhewitt.com/webdev/html6-logo/#comments Sat, 07 Apr 2012 17:21:57 +0000 admin http://edanhewitt.com/blog/?p=321
]]> http://edanhewitt.com/webdev/html6-logo/feed/ 0 http://edanhewitt.com/webdev/some-web-development-freebies-drupal-logo/ http://edanhewitt.com/webdev/some-web-development-freebies-drupal-logo/#comments Sat, 07 Apr 2012 17:21:15 +0000 admin http://edanhewitt.com/blog/?p=318
]]> http://edanhewitt.com/webdev/some-web-development-freebies-drupal-logo/feed/ 0 http://edanhewitt.com/webdev/html5-powered-web-apps/ http://edanhewitt.com/webdev/html5-powered-web-apps/#comments Sat, 07 Apr 2012 00:01:24 +0000 admin http://edanhewitt.com/blog/?p=315 Sounds pretty cool, but what HTML5 can do actually? Well, this post is going to satisfy your curiosity about the power of HTML5 by showing you a series of practical HTML5-powered web applications such as drawing application, chart creating application and time management application. So there’s no technical document anymore, let your eyes witness the true potential of HTML5!

DeviantART muro

Muro is HTML5-based sketching app that works in all modern browsers, and you can dive in and start drawing on a blank canvas, all without Flash or any other plugin. There are several brushes available to everyone, but to access more advanced features, you’ll need a DeviantArt account.



HootSuite

HTML5-based social media dashboard with some great features: geo-location tweet searching, choice between new and old style retweets, connection to Google Analytics, drag and drop editing, custom interface and much more. Perfect online tool for professional brand management.



X-Worlds

Something cool and interesting for kids of all sizes. You can submit a drawing of your character and watch it transform into an awesome illustration. Be the next X-world superhero!



Aviary’s Image Editor

HTML5-powered photo editor which is easy to use and surprisingly powerful. Beyond its use of HTML5 (as opposed to Flash, Silverlight or other RIA frameworks), what sets this app apart is that it’s designed to be portable so developers can directly integrate it into their sites or apps.



CSSWarp

CSSWarp is online tool that allows you to attach any text to a curved path or a circle, then create warped text with pure CSS and HTML.



Flickr Browser

Flickr Browser is an unique HTML5 app for browsing Flickr photos with cool approach.



CSS3.0 Maker

A great app for developers. It makes use of sliders and even a live preview area to generate cross-browser markup.



Coolendar

A HTML5-based calendar web app. Simple and clean interface and useful features for effective time management.



Twimbow

Twimbow is a colorful, HTML5 and CSS3 based Twitter client with a focus on filtering. The interface looks similar to TweetDeck and Seesmic, but its main distinction lies in its colourful interface. You can assign different colours to different users and groups, and also change the colour of tweets by adding a color tag!



Sketchpad

Sketchpad by Mugtug is a Pixelmator-like application that has desktop-like tools, colour selection, patterns, swatches and much more.



CloudCanvas

Cloud Canvas is a free HTML-5 based cloud image editor. This is a fully featured online image editor that allows you to create and save digital media. All content saved will be in PNG and XML format and stored in Google Documents.



Lislis Painter

Another interesting web app based on HTML5. Basic tools, layers and other features make this app an useful sketching tool online.



Scribd

This version of Scribd is a Flash and HTML5-based web app that provides in-browser access to all sorts of documents and e-books uploaded by users.



Google Body Browser

Google Body Browser is a cool web app powered with WebGL for study use. WebGL is a cross-platform low-level 3D graphics API that is designed to bring plugin-free 3D to the web. It uses the HTML5 Canvas element and does not require Flash, Java or other graphical plugins to run.



LucidChart

LucidChart is a great online tool for creating charts and diagrams. It works very fast and smooth, a perfect tool for team collaboration online.



Diagramo

Diagramo is an interactive online application, which allows you to make diagrams and flowcharts from within a web browser. It also allows you to create, edit and share diagrams, organizational charts, network diagrams and graphs. The diagrams can be saved for a lifetime.



Ultimate CSS Gradient Generator

Colorzilla has designed this very easy to use CSS3 gradient generator. It uses sliders and color pickers just like Photoshop and is highly recommended.



Citicles

Citicles is an experimental HTML5 visualizator that aggregates basic information about a city and displays it in a simple circle design. Each circle encloses the city’s population, temperature, time, elevation, latitude and longitude.



Tiny Fluid Grid

This grid generator with great design lets you generate a grid framework using simple options and even includes a preview page for you to make sure your grid looks perfect.



]]> http://edanhewitt.com/webdev/html5-powered-web-apps/feed/ 1 http://edanhewitt.com/webdev/dzslides/ http://edanhewitt.com/webdev/dzslides/#comments Fri, 06 Apr 2012 21:27:54 +0000 admin http://edanhewitt.com/blog/?p=312 DZSlides is a HTML template to build slides in HTML5 and CSS3.
‘template.html’ is the only file you need.
Shells are extensions. You don’t need them for a basic usage.

The project contains two shells to handle your slides :

* ‘shells/embedder.html’ to embed a presentation in a web page
* ‘shells/onstage.html’ to show your slides with a control panel

For a complete presentation, see:  http://paulrouget.com/dzslides

]]> http://edanhewitt.com/webdev/dzslides/feed/ 0 http://edanhewitt.com/webdev/dropkick-js/ http://edanhewitt.com/webdev/dropkick-js/#comments Fri, 06 Apr 2012 21:26:54 +0000 admin http://edanhewitt.com/blog/?p=310 Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick  removes the tedium and lets you focus on making s@#t look good.

Requirements:

DropKick requires the latest version of jQuery, available at jQuery.com. Other than jQuery, you should include scrollability.js if you want to enable scrolling on iOS devices (you do).

How it works:

DropKick works by transforming your existing, boring <select> lists into beautiful, customizable HTML dropdowns. The name attribute is the only one that is required. You should also set a tabindex attribute to enable navigation via tabbing.
When an option is selected in a DropKick menu, the corresponding <select> value is updated. This means that your forms and AJAX requests should work the same without having to make any changes. However, if you previously had
an onchange event bound to your <select> list, you will have to instead use a DropKick change event. Please see examples.html for usage

Features:

• Keyboard Navigation:
  Keyboard navigation in DropKick is very similar to native <select> navigation.
  While highlighted, pressing enter, up, or down on your keyboard will open the dropdown.
  While opened, pressing up or down will navigate through the options, and pressing enter will select the currently highlighted option.
• Themeing:
  DropKick was made to be easily theme-able and supports dynamic theme changing.
• Custom Callbacks

Compatibility:

DropKick was tested on Opera 10+, Google Chrome 10+, FireFox 5+, Safari 5+, and Internet Explorer 7 – 8. IE6 is not supported and will simply continue using your plain dropdowns instead.

Known Issues:

• Opened DropKick menus on Internet Explorer 7 will be covered by other DropKick containers if they are vertically stacked and too close together.

Found a bug? Please let me know.

How to use:

Please see examples.html or the DropKick homepage for usage

What next:

Got an idea for improving DropKick? Or maybe a bug fix? Please feel free to fork a copy and submit a pull request!

Created by:

Jamie Lottering, default theme designed by Addison Kowalski

]]> http://edanhewitt.com/webdev/dropkick-js/feed/ 0 http://edanhewitt.com/webdev/cutter-js/ http://edanhewitt.com/webdev/cutter-js/#comments Fri, 06 Apr 2012 21:25:21 +0000 admin http://edanhewitt.com/blog/?p=307 Cutter.js is a standalone JavaScript plugin for truncating text (view more…).



Cutter.js optionally generates a ‘view full content’ link, and is an immensely useful plugin for any news website, as it allows for more flexibility when designing and doesn’t limit your articles in terms of word count.

The plugin is lightweight (1.5kb gzipped) and the markup is extremely easy.

]]> http://edanhewitt.com/webdev/cutter-js/feed/ 0 http://edanhewitt.com/webdev/swipejs/ http://edanhewitt.com/webdev/swipejs/#comments Fri, 06 Apr 2012 21:24:21 +0000 admin http://edanhewitt.com/blog/?p=304 Swipe is a library-agnostic JavaScript tool for bringing touch movement to your apps and websites.



The library offers native 1:1 scrolling, as well as resistant bounds which, much like on the iPhone, signal the user if the end of the scrollbar has been reached.

A key feature of Swipe is scroll prevention, a feature which detects if the user is trying to slide content vertically or horizontall

]]> http://edanhewitt.com/webdev/swipejs/feed/ 0 http://edanhewitt.com/webdev/chyrp/ http://edanhewitt.com/webdev/chyrp/#comments Fri, 06 Apr 2012 21:22:51 +0000 admin http://edanhewitt.com/blog/?p=301 Chyrp is a lightweight, PHP-powered blogging engine that’s easy to extend and maintain.



Chyrp comes with a beautiful default template, and actually has quite a lot of themes for a relatively unknown CMS.

Notable features include: import old posts from WordPress/Tumblr; as well as user management features that really make Chyrp stand out among other smaller CMSes.

The blogging engine is well-documented and seems simple enough to use to at least give it a try.

]]> http://edanhewitt.com/webdev/chyrp/feed/ 0 http://edanhewitt.com/webdev/chico-ui/ http://edanhewitt.com/webdev/chico-ui/#comments Fri, 06 Apr 2012 21:22:07 +0000 admin http://edanhewitt.com/blog/?p=298 Chico UI is a set of open source user interface components made with jQuery.



Chico features a number of useful widgets — like auto complete, calendar, carousel, and more –, as well as Mesh, a CSS ‘framework’ that holds a number of basic CSS templates.

The idea seems great, and the project is well-documented. The only thing that’s missing is an example ‘to-do’ app, as, I imagine, applications is what you would write with Chico.

]]> http://edanhewitt.com/webdev/chico-ui/feed/ 0 http://edanhewitt.com/webdev/css-terminal/ http://edanhewitt.com/webdev/css-terminal/#comments Fri, 06 Apr 2012 21:20:04 +0000 admin http://edanhewitt.com/blog/?p=295 ___ ___ ___ / __/ __/ __| | (__\__ \__ \ \___|___/___/ T E R M I N A L

Description

CSS Terminal is a bookmarklet that allows you to inject CSS rules directly
into a live web page. It’s handy for rapid CSS development, prototyping
and debugging.

Homepage

You can read about it, see it in action and install it at the
project home page.

About

The CSS Terminal bookmarklet was written by Ben Barber while working at
i2rd / Vipa Solutions. The code was generously donated to the
community under the MIT license.

The terminal source is written in CoffeeScript and resulting
JavaScript is minified using Google’s Closure Compiler.
Docco is used to generate the documentation from the CoffeeScript
source.

The source code and project page are hosted on GitHub.

]]> http://edanhewitt.com/webdev/css-terminal/feed/ 0 http://edanhewitt.com/webdev/color-thief/ http://edanhewitt.com/webdev/color-thief/#comments Fri, 06 Apr 2012 21:19:16 +0000 admin http://edanhewitt.com/blog/?p=293 A script for grabbing the dominant color or a representative color palette from an image. Uses javascript and canvas.

See a Demo

Usage

Get Dominant Color

js
getDominantColor(sourceImage)
returns {r: num, g: num, b: num}

Uses the median cut algorithm provided by quantize.js to cluster similar
colors and return the base color from the largest cluster.

Create Palette

“`js
createPalette(sourceImage, colorCount)

“`
returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]

Use the median cut algorithm provided by quantize.js to cluster similar
colors.

BUGGY: Function does not always return the requested amount of colors. It can be +/- 2.

License

Licensed under the Creative Commons Attribution 2.5 License

]]> http://edanhewitt.com/webdev/color-thief/feed/ 0 http://edanhewitt.com/webdev/chosen/ http://edanhewitt.com/webdev/chosen/#comments Fri, 06 Apr 2012 21:18:32 +0000 admin http://edanhewitt.com/blog/?p=291 Chosen is a library for making long, unwieldy select boxes more user friendly.
• jQuery support: 1.4+
• Prototype support: 1.7+

For documentation, usage, and examples, see:

http://harvesthq.github.com/chosen

Contributing to Chosen

Contributions and pull requests are very welcome. Please follow these guidelines when submitting new code.

1. Make all changes in Coffeescript files, not JavaScript files.
2. For feature changes, update both jQuery and Prototype versions
3. Use ‘cake build’ to generate Chosen’s JavaScript file and minified version.
4. Don’t touch the VERSION file
5. Submit a Pull Request using GitHub.

Using CoffeeScript & Cake

First, make sure you have the proper CoffeeScript / Cake set-up in place.

1. Install Coffeescript: the CoffeeScript documentation provides easy-to-follow instructions.
2. Install UglifyJS: npm -g install uglify-js
3. Verify that your $NODE_PATH is properly configured using echo $NODE_PATH

Once you’re configured, building the JavasScript from the command line is easy:

cake build                # build Chosen from source
cake watch                # watch coffee/ for changes and build Chosen

If you’re interested, you can find the recipes in Cakefile.

Chosen Credits

• Built by Harvest. Want to work on projects like this? We’re hiring!
• Concept and development by Patrick Filler
• Design and CSS by Matthew Lettini

Notable Forks

• Chosen for MooTools, by Jules Janssen
• Chosen Drupal 7 Module, by Pol Dell’Aiera, Arshad Chummun, Bart Feenstra, Kálmán Hosszu, etc.
]]> http://edanhewitt.com/webdev/chosen/feed/ 0 http://edanhewitt.com/webdev/beautiful-web-type/ http://edanhewitt.com/webdev/beautiful-web-type/#comments Fri, 06 Apr 2012 21:17:03 +0000 admin http://edanhewitt.com/blog/?p=289 There are currently 500+ typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Here are examples of these typefaces in action.

Featured typefaces

• Open Sans
• Gentium Book Basic
• Vollkorn
• Lato
• Gravitas One
• Old Standard TT
• Abril Fatface
• PT Sans
• PT Sans Narrow
• PT Serif

View the samples: http://hellohappy.org/beautiful-web-type

]]> http://edanhewitt.com/webdev/beautiful-web-type/feed/ 0 http://edanhewitt.com/webdev/jquery-textarea-eeditor/ http://edanhewitt.com/webdev/jquery-textarea-eeditor/#comments Fri, 06 Apr 2012 21:16:18 +0000 admin http://edanhewitt.com/blog/?p=286 griffin.editor is a no-frills jQuery textarea editor with an easy setup and Markdown support.



The editor supports the jQuery UI, automatically enhancing the look of, e.g., the ‘add link’ dialog if jQuery’s UI components are included.

Another great feature is the preview pane and configurable access keys.

Best of all, griffin doesn’t clog you down with these features, and you can turn them on and off as you please if you want to sa

]]> http://edanhewitt.com/webdev/jquery-textarea-eeditor/feed/ 0 http://edanhewitt.com/webdev/soundjs/ http://edanhewitt.com/webdev/soundjs/#comments Fri, 06 Apr 2012 21:10:50 +0000 admin http://edanhewitt.com/blog/?p=283 SoundJS is a JavaScript library for working with HTML5 audio.

Its key features include channel management, batch loading, and master volume control.



If you’ve tinkered around with HTML5′s audio, you know how much of a pain in the ass is dealing with different ways that browsers react to the same code.

The most important component of SoundJS is, thus, the API, which provides something of a one-size-fits-all cross-browser interface for working with sounds.

SoundJS is intended to be a part of a larger whole — CreateJS — which is yet to be released.

]]> http://edanhewitt.com/webdev/soundjs/feed/ 0 http://edanhewitt.com/webdev/tweenjs/ http://edanhewitt.com/webdev/tweenjs/#comments Fri, 06 Apr 2012 21:10:04 +0000 admin http://edanhewitt.com/blog/?p=280 TweenJS is a library for tweening and animation in HTML5 and JavaScript.



TweenJS offers a chainable API for sequencing animations, and as well provides some CSS support.

Although basically taking another Flash feature to JavaScript, TweenJS is a very welcome library indeed, as it’s very simple to use — yet the results are amazing.

TweenJS is also a part of the upcoming CreateJS HTML5 designing suite.

]]> http://edanhewitt.com/webdev/tweenjs/feed/ 0 http://edanhewitt.com/webdev/noui-slider/ http://edanhewitt.com/webdev/noui-slider/#comments Fri, 06 Apr 2012 21:08:38 +0000 admin http://edanhewitt.com/blog/?p=277 noUiSLider is a jQuery plugin for turning an HTML object into a nice range slider.



The plugin is well-built, featuring a callback for every possible thing the user can do with the slider.

Of course, you can build a more powerful slider with jQuery’s UI library, but this alternative weighs only 6 kb, and is thus a better fit if you simply need a slider.

The slider is stylable via CSS, and, of course, allows reading values from the slider.

]]> http://edanhewitt.com/webdev/noui-slider/feed/ 1 http://edanhewitt.com/webdev/3d-accordion-effect/ http://edanhewitt.com/webdev/3d-accordion-effect/#comments Fri, 06 Apr 2012 21:05:40 +0000 admin http://edanhewitt.com/blog/?p=273


3D Accordion Effect – UX Lab 006

I posted the following experiment as a way of demonstrating just how far the line has blurred between web based animation and OS based animation. I saw Dribbble shots (one and two) by Indian designer Pranav Pramod and was inspired to replicate the effect in CSS3.



Unfortunately nothing is ever as easy as it seems. If it was, someone else would have already posted a similar effect. The problem is that when animating something with a 3D transform with a forced perspective, there is no way to measure or mirror the actual height represented in the browser using CSS. If you animate the parent element from 0px in height to 30px, it’s a straightforward linear animation. The 3D transform, on the other hand, changes on a non-linear scale because of the perspective.

There are two solutions, neither of which are desirable.

The first involves JavaScript, which frankly I had tried to avoid. In this example, the animation is triggered by the addition of a CSS class via JavaScript – but could just as easily be bound to an :active:target CSS event. The only way to get the actual browser rendered height of the element is to get it via JavaScript with the obj.clientHeight getter. While discussion pointed to wrapping the object in a parent element and not needing JavaScript at all, this does not work in all browsers.

Instead the JavaScript method involves binding a function with requestAnimationFrame which sets the parent objects height to mirror the calculated height of the transformed object. Accurate, but if we wanted to perform calculations many times per second, why did we bother animating with CSS at all?

The other method, considerably less accurate and very fiddly, is to match the easing or timing of the two animations. It may be possible to create a custom timing function using cubic-bezier which matches the rate of easing of a 30px tall object, rotating from -90deg to 0deg, with a perspective of 400 units. But why would you? That’s shit house.

Maybe in this instance a flat out Canvas animation would have been much more sensible. You’re still performing a function every ‘x’ milliseconds, but at least the canvas itself may be hardware accelerated. Until CSS animation matures, we will most likely have to abuse the JavaScript add-ons such as the one described earlier. Or even better yet, sever the ties with HTML and CSS and – get this right – use graphical languages for what they’re intended.

Ninja Edit: Also, you can’t yet animate background gradients so the whole 3D effect on the depth of the flaps is kind of impossible for now.

Sad-face Edit: The second I posted this, someone posted pretty much the exact same thing to Hacker News in a much more polished way. Check out Paperfold CSS.

]]> http://edanhewitt.com/webdev/3d-accordion-effect/feed/ 0 http://edanhewitt.com/webdev/antiscroll/ http://edanhewitt.com/webdev/antiscroll/#comments Fri, 06 Apr 2012 21:02:47 +0000 admin http://edanhewitt.com/blog/?p=270

Cross-browser native OSX Lion scrollbars

Antiscroll fixes a fundamental problem JavaScript UI developers commonly face:
how do I customize scrollbars so that they get out of the way (for example, for
different form widgets), but retain their native scrolling properties (like OS
widge scrolling velocity, or OS specific inertia)?

Antiscroll addresses this issue by providing a cross-browser implementation of
the scrollbars popularized by OS X Lion that retains native properties.

Features

• Supports mousewheels, trackpads, other input devices natively.
• Total size is 1kb minified and gzipped.
• Doesn’t magically autowrap your elements with divs (manual wrapping is necessary,
  please see index.html demo)
• Fade in/out controlled with CSS3 animations.
• Shows scrollbars upon hovering.
• Scrollbars are draggable.
• Size of container can be dynamically adjusted and scrollbars will adapt.
• Supports IE7+, Firefox 3+, Chrome, Safari

Demo

Please click here to see it in
action.

What does it look like?

Firefox 8 overflow: scroll and antiscroll on OS X




IE 9 overflow: scroll and antiscroll



How does it work?

The idea behind Antiscroll is to leverage real scrollbars, but hide them from the
view. The implementation consists of 3 steps.

1. Measure scrollbars width

In order to measure scrollbars width we use the following technique:

1. Insert a div with a fixed width and measure the inner width
2. Force overflow: scroll
3. Measure the inner width. The difference is the scrollbar width

The caveat of this technique is precisely OSX Lion. Since the scrollbars
float on top of the content, their width is always zero but they still
overlay your content. To address this issue we add an aditional step which
consists of declaring ::-webkit-scrollbar and ::scrollbar CSS
pseudo-properties that set the width of the scrollbars to zero for modern
browsers.

2. Adjust the width of the inner element

The parent element receives overflow: hidden and the desired width and height
for the widget.

The inner .antiscroll-inner element receives the same width and height, but
the script augments this two values with the size of the scrollbars,
effectively hiding them.



The inner element is always overflow: scroll.

3. Listen on the scroll event

We attach the scroll event to the scrollable element, and we create our
scrollbars as absolutely positioned divs. We update our scrollbars based on the
detected scrollLeft and scrollTop of the element.

Credits

This technique was inspired by Facebook’s chat sidebar/ticker, which also reproduces
Lion’s scrollbars, but relying on setting the width of the inner container to an
arbitrarily large width, therefore allowing scrolling of a single axis
(vertical).

Scrollbar size detection based on the work of Jonathan
Sharp.

Dependencies

• jQuery
• jquery-mousewheel: optional,
  only needed if you want to block further scrolling when you reach the boundaries
  of scrollable element.

TODO

• Automatically leverage Joe Hewitt’s
  scrollability as a replacement
  technique if a touch-enabled browser is detected.
• IE6 support
]]> http://edanhewitt.com/webdev/antiscroll/feed/ 0 http://edanhewitt.com/webdev/addclear/ http://edanhewitt.com/webdev/addclear/#comments Fri, 06 Apr 2012 21:01:24 +0000 admin http://edanhewitt.com/blog/?p=268 Add Clear

Author: Stephen Korecky

Website: http://stephenkorecky.com

Plugin Website: http://github.com/skorecky/Add-Clear

Contributers: scoman81

About

Version 1.1

Add Clear is a jQuery plugin that adds a input clearing button on any input you apply it to. It clears the value, and returns focus to that field.

How to use

• Load jQuery into your project
• Load Add Clear plugin into your project
• Setup which elements you would like to apply this plugin to.

Usage

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("input").addClear();
  });

  // Example onClear option usage
  $("input").addClear({
    onClear: function(){
      alert("call back!");
    }
  });
</script>

Available Options

Option	Default	Type
closeImage	clear.png	string
top	0	number
right	4	number
returnFocus	true	boolean
showOnLoad	false	boolean
onClear	null	function

Using Options

$("input").addClear({closeImage : "/image/path/close.png",top : -2, right : 6});

]]> http://edanhewitt.com/webdev/addclear/feed/ 0 http://edanhewitt.com/webdev/blur-js/ http://edanhewitt.com/webdev/blur-js/#comments Fri, 06 Apr 2012 20:59:31 +0000 admin http://edanhewitt.com/blog/?p=264 blur.js is a jQuery plugin that produces “pseud-transparent blurred” elements over other elements.



Blur requires canvas support, and there’s, sadly, no fallback as of now.

However, blur.js is a flexible and powerful plugin either way: along with specifying a blur radius and making the element draggable, blur.js can change the overlay color–which is quite the feature for any designer.

]]> http://edanhewitt.com/webdev/blur-js/feed/ 0 http://edanhewitt.com/webdev/backstretch/ http://edanhewitt.com/webdev/backstretch/#comments Fri, 06 Apr 2012 20:58:33 +0000 admin http://edanhewitt.com/blog/?p=261 Backstretch is a jQuery plugin for adding a dynamically-resized background image to any page.



The plugin can also be used for creating a slider.

The images are fetched after the page is loaded, so the visitors won’t have to wait for the image downloads to complete.

Backstretch resizes the images automatically — so mobile browsers are also supported.

]]> http://edanhewitt.com/webdev/backstretch/feed/ 0 http://edanhewitt.com/webdev/camera-plugin/ http://edanhewitt.com/webdev/camera-plugin/#comments Fri, 06 Apr 2012 20:57:05 +0000 admin http://edanhewitt.com/blog/?p=257 Camera is a jQuery slideshow that features a number of useful options, is customizable, and has a powerful API.



Camera features about 30 options, such as pagination, pause on hover, auto advance, callbacks, and so on.

The API is quite simple and allows changing the data types used in the slides; the API is also used for manipulating the transitions.

As Camera is so rich with features that it seems that it’d be bloated in terms of size. However, the minified version weighs about 38kb — which is quite alright for a thorough library like this.

]]> http://edanhewitt.com/webdev/camera-plugin/feed/ 0 http://edanhewitt.com/webdev/sharenice/ http://edanhewitt.com/webdev/sharenice/#comments Fri, 06 Apr 2012 20:55:58 +0000 admin http://edanhewitt.com/blog/?p=254 shareNice is a project/sharing widget without an intrusive nature.



This sharing widget is different from others in the way that it doesn’t give away any extra information to third party services, and features a transparent sharing interface, ensuring that every user sees what exactly he’s sharing — or not.

shareNice supports sharing with facebook.com, digg.com, by email, delicious.com, twitter.com, and other social portals.

]]> http://edanhewitt.com/webdev/sharenice/feed/ 0 http://edanhewitt.com/webdev/jquery-painter/ http://edanhewitt.com/webdev/jquery-painter/#comments Fri, 06 Apr 2012 20:54:36 +0000 admin http://edanhewitt.com/blog/?p=251 wPaint is a jQuery plugin for creating a basic painting interface.



The plugin can take an image file for the background of the canvas element. wPaint also comes with ‘save’ and ‘load’ functions, and a color picker.

Even if the plugin itself isn’t as interesting, you can learn a lot from the source code.

Websanova, the developers of wPaint, have quite a host of other useful jQuery plugins available at their homepage – do check them out!

]]> http://edanhewitt.com/webdev/jquery-painter/feed/ 0 http://edanhewitt.com/webdev/html5-slides/ http://edanhewitt.com/webdev/html5-slides/#comments Fri, 06 Apr 2012 20:43:30 +0000 admin http://edanhewitt.com/blog/?p=248 Slides is a simple and effective presentation framework written in JavaScript.

It uses curl.js for transitions and requirejs for loading slides and other dependencies.



The one and only question is — why use this framework instead of PowerPoint or Keynote?

The developer says that he made this framework because he “Got fed up with using Powerpoint and Keynote to make and give presentations.”

However, there are also some practical reasons for choosing this framework:

• Easy slide linking with a working “back” button; 
• Linking between slides easily; 
• Mobile support; 
• Worldwide availability of your presentations.
  ]]> http://edanhewitt.com/webdev/html5-slides/feed/ 0 http://edanhewitt.com/webdev/jquery-file-upload/ http://edanhewitt.com/webdev/jquery-file-upload/#comments Fri, 06 Apr 2012 20:42:26 +0000 admin http://edanhewitt.com/blog/?p=245 jQuery File Upload is a comprehensive file upload kit that works in most server-side environments.

  

  The most notable features include:

  • Multiple file upload;
  • Drag & Drop support;
  • Cross-site file uploads;
  • Resumable and cancelable uploads.

  The library was built purely with jQuery and Twitter’s Bootstrap.

  Overall, jQuery File Upload provides a surprisingly comprehensive file uploading interface, suitable for most backends and applications.

  ]]> http://edanhewitt.com/webdev/jquery-file-upload/feed/ 0 http://edanhewitt.com/webdev/dot-dot-dot-js/ http://edanhewitt.com/webdev/dot-dot-dot-js/#comments Fri, 06 Apr 2012 20:38:25 +0000 admin http://edanhewitt.com/blog/?p=242 jQuery.dotdotdot is a library for beautifying ugly multiple-line content.

  

  The plugin simply truncates the excess text; basically, it’s like using overflow:hidden, but with extra features.

  Different layouts are also supported, and, among the few options, dotdotdot features events and monitoring the content for changes (sweet).

  dotdotdot is a nice plugin with a slick markup, and almost every comprehensive website needs such functionality at one stage or another.

  ]]> http://edanhewitt.com/webdev/dot-dot-dot-js/feed/ 0 http://edanhewitt.com/webdev/css-fx/ http://edanhewitt.com/webdev/css-fx/#comments Fri, 06 Apr 2012 20:37:18 +0000 admin http://edanhewitt.com/blog/?p=239 cssFx.js is a CSS3 property polyfill that inserts vendor-specific functionality into older browsers.

  For those out of it, a polyfill is, according to Paul Irish, “A shim that mimics a future API providing fallback functionality to older browsers.”

  

  cssFx.js brings much needed functionality to older browsers:

  • Box shadows;
  • Border radius;
  • Flexible box;
  • Gradients;
  • etc.

  This is a surprisingly comprehensive library that’s certainly not the worst tool for a designer who has encountered browser-compatibility issues (that means every designer out there).

  ]]> http://edanhewitt.com/webdev/css-fx/feed/ 0 http://edanhewitt.com/webdev/mailcheck-js/ http://edanhewitt.com/webdev/mailcheck-js/#comments Fri, 06 Apr 2012 20:35:44 +0000 admin http://edanhewitt.com/blog/?p=236 mailcheck.js is a nice and compact jQuery library for spell-checking email domain names in input elements.

  

  mailcheck.js supports a virtually unlimited amount of domain names — they are passed to the plugin in an array–, and this makes the library especially useful for local projects.

  The markup is rather simple, and the plugin adds much-needed extra security to sign-up forms.

  ]]> http://edanhewitt.com/webdev/mailcheck-js/feed/ 0 http://edanhewitt.com/webdev/hammer-js/ http://edanhewitt.com/webdev/hammer-js/#comments Fri, 06 Apr 2012 20:32:57 +0000 admin http://edanhewitt.com/blog/?p=231 Hammer.js is a JavaScript library for multi-touch gestures.

  

  Hammer.js is lightweight (just 2kb) and easy to implement in most projects.

  It only serves for multi-touch gestures, and supports the following gestures:

  • Tap;
  • Double Tap;
  • Hold;
  • Drag;
  • Transform.

  Overall, Hammer.js is a focused library that makes itself even more useful by doing only a number of tasks, but doing them well.

  ]]> http://edanhewitt.com/webdev/hammer-js/feed/ 0 http://edanhewitt.com/webdev/skrivr/ http://edanhewitt.com/webdev/skrivr/#comments Fri, 06 Apr 2012 20:31:56 +0000 admin http://edanhewitt.com/blog/?p=228 Skrivr is a publishing platform that publishes posts via DropBox.

  

  What you’ll like about Skrivr:

  • An efficient&responsive theme engine;
  • Clean URLs;
  • Custom domains;
  • Unlimited site traffic.

  What you won’t like:

  • Invite only as of now;
  • Confusing start-up;
  • Limited customization options.

  Skrivr is, as I famously predicted, just the very beginning of DropBox-based apps, and we can expect many more in the future.

  ]]> http://edanhewitt.com/webdev/skrivr/feed/ 0 http://edanhewitt.com/webdev/sigma-js/ http://edanhewitt.com/webdev/sigma-js/#comments Fri, 06 Apr 2012 20:30:06 +0000 admin http://edanhewitt.com/blog/?p=225 Sigma.js is a lightweight JavaScript library for drawing highly functional graphs on HTML5′s canvas.

  

  The library can import some specific graph formats, like those produced by Gephi, and features a number of useful functions:

  • jQuery-like event management system;
  • A public API;
  • Methods for complete customization;
  • Chainable methods;
  • etc.

  Sigma is a rather interesting library, and, it seems, has already gathered quite a following (for a new project, that is) with 147 watchers on GitHub.

  ]]> http://edanhewitt.com/webdev/sigma-js/feed/ 0 http://edanhewitt.com/webdev/formalize/ http://edanhewitt.com/webdev/formalize/#comments Fri, 06 Apr 2012 20:29:01 +0000 admin http://edanhewitt.com/blog/?p=222 Formalize is a neat set of libraries for making forms consistent over different web browsers.

  

  Formalize is compatible with a number of popular libraries, and requires either Dojo, jQuery, MooTools, Prototype, or YUI to operate.

  Forms can be a pain in the ass processor, and Formalize offers a great solution that gives you control over the appearance of forms in different browsers.

  ]]> http://edanhewitt.com/webdev/formalize/feed/ 0 http://edanhewitt.com/webdev/scroll-path/ http://edanhewitt.com/webdev/scroll-path/#comments Fri, 06 Apr 2012 20:27:58 +0000 admin http://edanhewitt.com/blog/?p=219 Scroll Path is a plugin for creating scroll paths with a simpler markup than you’d expect.

  

  The paths are marked on a canvas element, and the plugin supports rotation on some browsers.

  Once the plugin is initialized, you can point to specific points in the path, and ease or animate to them.

  Scroll Path is a very interesting plugin if you don’t mind taking the time to draw the actual scrolling paths.

  ]]> http://edanhewitt.com/webdev/scroll-path/feed/ 0 http://edanhewitt.com/webdev/filtrify/ http://edanhewitt.com/webdev/filtrify/#comments Fri, 06 Apr 2012 20:26:41 +0000 admin http://edanhewitt.com/blog/?p=216 Filtrify is a plugin for advanced tag filtering.

  It is advanced in the way that it supports filtering tags within tags (this demo shows what I mean).

  

  Filtrify uses the new HTML5′s “data” attribute for storing the metadata, and passes it through (neat) JavaScript for advanced tag filtering.

  It then produces a search menu where all of the available tags are stored.

  The library seems quite exquisite in terms of functionality, and is a must-have when building websites for social use.

  ]]> http://edanhewitt.com/webdev/filtrify/feed/ 0 http://edanhewitt.com/webdev/jigsoar/ http://edanhewitt.com/webdev/jigsoar/#comments Fri, 06 Apr 2012 20:24:33 +0000 admin http://edanhewitt.com/blog/?p=213 Jigsoar icons is a set of 60 vector icons that are perfect for the web.

  

  The set consists of ‘general’ icons that are suitable for many occasions.

  The icons come in PNG: 16px, 24px, 48px, and 64px. They’re available as Adobe Illustrator vector files.

  These icons are registered under the CC license, and require attribution, but merely as a comment in the CSS file.

  ]]> http://edanhewitt.com/webdev/jigsoar/feed/ 0 http://edanhewitt.com/webdev/canvas-fireworks/ http://edanhewitt.com/webdev/canvas-fireworks/#comments Fri, 06 Apr 2012 20:22:51 +0000 admin http://edanhewitt.com/blog/?p=209 Canvas Fireworks is a remarkable HTML5 experiment from Jack Rugile.
  

  The idea is to produce fireworks that abide to certain qualities defined by the user.

  

  Although the source of the fireworks-engine isn’t annotated, it’s at least well written in terms of structure.

  Overall, this is a very pretty — and, it seems, efficient, — HTML5 demo, and the source is likely to contain canvas answers you’ve sought for ages.

  • Website: http://jackrugile.com/lab/fireworks-v1/
    ]]> http://edanhewitt.com/webdev/canvas-fireworks/feed/ 0 http://edanhewitt.com/webdev/timeline-js/ http://edanhewitt.com/webdev/timeline-js/#comments Fri, 06 Apr 2012 20:21:47 +0000 admin http://edanhewitt.com/blog/?p=206 Timeline is a jQuery library for creating functional timelines with ease.

    

    Perhaps the most likable thing about Timeline is its support of Google spreadsheets as data sources, as well as JSON.

    The markup is quite easy, and even if you don’t know a thing about JSON, it’s quite easy to create beautiful presentations with it.

    Among other features, Timeline also allows pulling content from Twitter, YouTube, Vimeo, etc., with ease.

    There are some pitfalls, as of now, the two main being a lack of iPhone and IE8 compatibility.

    • Website: http://timeline.verite.co/
    • Demo: http://timeline.verite.co/#examples
      ]]> http://edanhewitt.com/webdev/timeline-js/feed/ 0 http://edanhewitt.com/webdev/tooltips/ http://edanhewitt.com/webdev/tooltips/#comments Fri, 06 Apr 2012 20:19:18 +0000 admin http://edanhewitt.com/blog/?p=202 iPicture is a new fancy jQuery plugin for adding tooltips to set locations on your images.

      

      iPicture sports a configuration wizard which allows you to drag’n’drop tooltips on the fly, then take the source code and use it on your website.

      The tooltips can be modified with CSS, and you can basically do anything you want with them: animate them, change their appearance, and change their behavior upon user interaction.

      In fact, we’d encourage you to change some things up, as the default tooltips seem quite lacking in taste, visually.

      ]]> http://edanhewitt.com/webdev/tooltips/feed/ 0 http://edanhewitt.com/webdev/ingrid-css3-layout-framework/ http://edanhewitt.com/webdev/ingrid-css3-layout-framework/#comments Fri, 06 Apr 2012 20:12:03 +0000 admin http://edanhewitt.com/blog/?p=199 Ingrid is a fluid and lightweight CSS layout system.

      

      Ingrid’s main task is, as the developer puts it, “to reduce the use of classes on individual units.”

      That’s not everything that Ingrid does, though, as the library also provides some features for responsive designs.

      It’s rather easy to implement, and, with its hierarchical approach to CSS thinking, makes for an easy-to-use CSS mini framework.

      ]]> http://edanhewitt.com/webdev/ingrid-css3-layout-framework/feed/ 0 http://edanhewitt.com/webdev/can-js/ http://edanhewitt.com/webdev/can-js/#comments Fri, 06 Apr 2012 20:07:54 +0000 admin http://edanhewitt.com/blog/?p=195 CanJS is a JavaScript framework for creating rich web applications with ease.

      

      CanJS provides the following features:

      • Inheritable constructor functions;
      • Key-value binding;
      • Back button and bookmarking support;
      • etc.

      CanJS works together with several different libraries — jQuery, mooTools, YUI, and others, — and has a different version for each parent library. The framework also ships with several plugins, such as those for validation and data adjustment.

      ]]> http://edanhewitt.com/webdev/can-js/feed/ 0 http://edanhewitt.com/webdev/191/ http://edanhewitt.com/webdev/191/#comments Fri, 06 Apr 2012 20:04:28 +0000 admin http://edanhewitt.com/blog/?p=191 CSScience have made a fresh post with a responsive slider that doesn’t use JavaScript for operating.

      

      In its core, the slider is just like any other JavaScript slider: it floats all of the content areas (articles) next to each other, and then hides the overflow.

      Unlike other such experiments, this slider uses radio buttons instead of :target and anchor links, meaning that the back button works properly.

      ]]> http://edanhewitt.com/webdev/191/feed/ 0 http://edanhewitt.com/webdev/rhino-slider/ http://edanhewitt.com/webdev/rhino-slider/#comments Fri, 06 Apr 2012 20:02:23 +0000 admin http://edanhewitt.com/blog/?p=188 Rhinoslider is a flexible jQuery slider — but if you believe the developers, it’s “the most flexible jQuery slider”.

      

      Rhinoslider does seem to leave many choices to the user, and, although the fact is not good only by itself, it’s a welcome change for larger projects where customization is not only necessary but inevitable.

      Rhinoslider is also well-build in terms of usability and transition effects, and also provides thorough event handling.

      The developers have realized that code-based customization can scare away some potential users, and have created a superb generator that writes the code for you.

      ]]> http://edanhewitt.com/webdev/rhino-slider/feed/ 0 http://edanhewitt.com/webdev/kineticjs/ http://edanhewitt.com/webdev/kineticjs/#comments Fri, 06 Apr 2012 19:58:26 +0000 admin http://edanhewitt.com/blog/?p=185

      KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. You can draw your own shapes or images using the existing canvas API, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

      ]]> http://edanhewitt.com/webdev/kineticjs/feed/ 0 http://edanhewitt.com/webdev/nokia-maps-alien/ http://edanhewitt.com/webdev/nokia-maps-alien/#comments Fri, 06 Apr 2012 19:55:51 +0000 admin http://edanhewitt.com/blog/?p=181

      Rumour has it there’s a bit of an easter egg lurking in Nokia Maps. The kind that reveals an alien spaceship to fly around the map. A pretty fun one if you ask us! Type “we come in peace” in the search field and you can try flying around your neighbourhood, or anywhere else on earth, in a spaceship.

      It started out as a fun internal project and just landed on the live site yesterday. Built using GameJS and Box2D, a small canvas is placed on top of the map to give you a spaceship to fly around. I’m pretty sure the aliens are the friendly kind, they observe a strict 40mph speed limit while exploring the maps.

      Go give it a try! Find your favourite destination on Nokia Maps and enter “we come in peace”. Or if you’re feeling lazy, skip directly to the aliens. The ship also turns up if you search for “explore area 51″. I’m sure you can guess where that one takes you

      You can summon the alien ship with just about any modern browser (Firefox, Chrome, Safari, IE9+, Opera). There’s no sign of the extraterrestrials on the mobile version yet, but who knows where they might turn up later!

      ]]> http://edanhewitt.com/webdev/nokia-maps-alien/feed/ 0