Jun 30, 2012

Avatars.io is a hassle-free hosted user avatar service for your apps and sites. It lets you get avatars from social tools like Facebook, Twitter & Instagram. It is also completely compatible with Gravatar. Additionally you can let your users upload their own avatars. Avatars.io supports 3 sizes for avatars.

Singool.js is a lightweight framework built on top of Backbone.js that helps you develop single-page web applications. It has a structure similar to popular server-side MVC frameworks, and supports plugins and themes.

Photon is a JavaScript library that adds simple lighting effects to DOM elements in 3D space. Using Photon, you can set light sources for a scene and see how the objects behave according to those light sources.

Notify! is a jQuery Notification Plugin which adds simple notifications bars that you can use on your website and application to assist users while they fill in forms, navigate through pages or interact with interface.

Notify can be easily plugged into any website or web application and offer a lot of customization - color, style, message, behavior etc. and perfectly blends in with existing design, color scheme and layout.

These notification bars can be implemented in various fashions:

Sticky bar - will remain visible even user scroll the page.

Floated bar - will float with scrollbar with a nice floating animation.

TinyNav.js is a tiny jQuery plugin (304 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item.

This isn't the first plugin to do this and it doesn't provide a lot of options, but it might be the smallest (file size).

Jun 28, 2012

Limonade is a PHP micro framework for rapid web development and prototyping. It’s inspired by frameworks like Sinatra or Camping in Ruby, or Orbit in Lua. It aims to be simple, lightweight and extremly flexible.

Limonade provides functions that complete the PHP basic set, while keeping consistency with native functions and sitting up on them. Limonade is easy to learn and provides everything that you can expect from a modern framework (MVC, REST, etc)

jsDelivr is a free CDN for JavaScript and jQuery plugins. You can host your files there for free, while being guaranteed a speedy website since your files are served from 13 edge locations. It differs from other services like cdnjs.com, which itself is an excellent service that offers hosting only and exclusively for JavaScript libraries. jsDelivr on the other hand offers hosting for all JavaScript and jQuery plugins out there.

dhtmlxSuite is a JavaScript library that provides a complete set of Ajax- powered UI components. Use dhtmlxSuite to build enterprise-level web apps with clean interface, fast performance, and rich user experience.

dhtmlxSuite delivers a rich collection of JavaScript UI components including powerful grid, treeview, calendar, windows, charts, and more. With the DHTMLX library, you can build great Ajax-based web apps fast.

Jun 27, 2012

StackJS is a JavaScript Object Oriented Programming Framework. StackJS includes automatic setter and getter generator, inheritance, exception/event handling and full stack trace along with object delegations from ObjectiveC.

Gumby is a 960 Grid Responsive CSS Framework. The Grid lets you lay out pages quickly and easily in a natural, logical way. The Gumby Framework’s grid system can be customized and molded to fit your every need — it's easily adapted to any screen size or application. The possibilities are endless; the results are extraordinary.

Inside of the framework, we’ve packaged up tons of styles and common interface elements to help you quickly put together functional prototypes. Toss together some quick layouts using the included forms, buttons, tabs, and pure CSS dropdowns — then customize away!

The Grids built into Gumby Framework let you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites — create a rock-solid experience on all kinds of devices with the exact same markup. From iPods to IMAX, build great experiences that fit any screen.

Grumby also has support for all of the new HTML5 elements, structure, and syntax, along with CSS3.

Repo.js is a light-weight jQuery Plugin that lets you easily embed a Github repo onto your site. As a plugin or library author this is a great way to showcase the contents of a repo on a project page.

Repo.js uses the jQuery Vangogh plugin for styling of file contents. Vangogh, subsequently, utilizes Highlight.js, written by Ivan Sagalaev for syntax highlighting. Embedding a repo is as simple as writing this one line of code:

Jun 26, 2012

Not Just a Grid is a flexible and modular CSS framework that is designed to assist in the rapid prototyping and development of websites. It has been designed for the future with larger screen sizes and the use of CSS3 for progressive enhancement and richer user experiences.

Not Just a Grid includes separate stylesheets covering multi-column layouts, typography, forms, tables and user experience enhancement. Also included is a range of common images that are used for both visual styling and user interface enhancement. These images can easily be changed to suit your needs.

CSS GUI Icons are created using pseudo-elements, CSS and semantic HTML. This is not a “production ready” CSS icon set, hence the experimental tag. However, you can use it for some fairly informal project.

TextBelt is an outgoing SMS API that uses carrier-specific gateways to deliver your text messages for free, and without ads. This is nice for a low-cost texting app or testing without running down your Twilio balance.

Notes And Limitations

IP addresses are limited to 75 texts per day. Phone numbers are limited to 3 texts every 3 minutes. However, you can request increased limits.

AjaxML was designed to decrease development time of Ajax requests, as it was measured to reduce development time upto 60% from time consumed using normal jQuery Ajax.

It takes care of forms submitting with Ajax as hyperlinks. Uploading should be easy and without using many third-party libraries - AjaxML does the job as well.

AjaxML is a set of functions that allow you to declare Ajax behaviour in your web pages with as little coding as possible. In fact, if you have no special needs beyond basic XHR use, you need no code at all.
The idea is simple. A set of attributes added to your web page elements specify what you need to be done. The javascript code is automatically injected once you include "ajaxml.js" in the page.

One of the problems of ajax requests is bookmarking feaure loss, and broswer history support is another headache. Using AjaxML, you can just mention what is the hash value for your link,
and that's it.

AjaxML can be seen as a small addition to HTML. Although currently reported as invalid in strict XHTML, no exceptions will be raised.

The first implementation uses (and thus requires) jQuery for cross-browser compatibility. Support for other libraries is being considered.

The first implementation handles HTML data. It does not automatically handle JSON, XML, or XSL transformations on returned data. These are being developed and tested and will be released shortly.

Special handling for Ajax-enabled widgets is also being developed. The first widgets to be supported will be jQuery UI components. More will be coming shortly.

Write Maths, See Maths is a jQuery plugin for editable areas which gives an instant MathJax preview of the TeX you're writing just above the cursor. To use it, just call $(selector).writemaths() when the page loads.

You can optionally pass in an object with some options:

cleanMaths: a function which does something to the LaTeX before displaying it.

callback: a function which is called when the preview is displayed.

iFrame: set this to true if you're applying writemaths to something like TinyMCE, which lives inside an iframe.

jQuery AttC is a jQuery plugin that converts a standard HTML table to a Google Visualizations Chart and displays it on the page. It is unobtrusive and accessible. jQuery AttC currently converts a table to one of these Google charts:

Bootstrap CDN is a free content distribution network for Twitter's Bootstrap assets. Using this CDN, you can load the CSS, JavaScript and images from these external servers, without it costing you a cent on bandwidth. Additionally, the Bootstrap assets are hosted on On NetDNA's Tier-1 Content Delivery Network, you you get a top-notch CDN service.

Jun 22, 2012

Pines Notify is a JavaScript notification plugin. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use.

Features

Cross-Browser - Pines Notify works in all major browsers and provides a consistent interface. It is tested thoroughly for consistency.

Unobtrusive - Pines Notify can provide non-blocking notices. This allows the user to click elements behind the notice without even having to dismiss it.

Themeable - Pines Notify uses either Bootstrap or jQuery UI for styling, which means it is fully and easily themeable. Try out some of the readymade themes using the selector in the top right corner of this page.

Completely Open - Pines Notify is distributed under the GPL, LGPL, and MPL. This triple copyleft licensing model avoids incompatibility with other open source licenses.

Gladius is a 3D game engine, written entirely in JavaScript, and designed to run in the browser. The engine consists of a core set of functionality that is common to all games and simulations like the game loop, messaging, tasks and timers.

Common components like the spatial transform are also provided by the core. More specialized funcionality, like graphics or physics, is encapsulated into engine extensions that are designed to run on top of the core. A common set of extensions is maintained as part of this project, and support for third-party extensions is a strong design objective.

Jun 21, 2012

Jaggery is a framework to write webapps and HTTP-focused web services for all aspects of the application: front-end, communication, Server-side logic and persistence in pure Javascript. One of the intents of this framework is to reduce the gap between writing web apps and web services. Importantly, Jaggery is open-source and released under Apache 2.0

As a pure Javascript server-side scripting engine, Jaggery combines all the strengths of Javascript with flexibility and freedom at both the development and deployment stages. Most JavaScript webapp development mechanisms restrict developers to a framework-specific structure or patterns, which demand an additional learning curve. By contrast, with Jaggery, any developers who are versed in Javascript have everything they need to get going.

jQuery "Placeholder" Attribute Polyfill is a basic jQuery plugin that reads the "placeholder" attribute (HTML5) and renders the placeholder text as an overlay (if not natively supported). Unlike most other plugins, this works by adding a properly-positioned <span> on top of the input element rather than setting its value. This keeps form serialization and validation from breaking.

Jun 20, 2012

JustaPage is an Open Source HTML template for creating single page websites. Every so often we just need to bang out a quickie one page site. It's a client who doesn't have a large amount of content, or an uncle who wants a site for his Mahjong team. JustaPage is what you can use to turn around the project in a couple of hours.

JustaPage has an "intro" area above the navigation and three sections that can be reached through the jQuery navigation. The template is mobile-friendly and mostly cross-browser compatible, and you get everything you need in the download. Shove your usual image gallery or some text or some social media links inside the appropriate sections and you're ready to rock.

Features

Semantic HTML/CSS Template - The code is written as expected and commented out. It uses Eric Meyer's CSS Reset because he's smarter than me.

Nifty JS Navigation - If there's no nav your uncle will be mad. The navigation scrolls the page and looks kinda cool. jQuery 1.7.2 is included.

Mobile-Friendly Version - Because you want the site to look nice on smartphones. Media query in the <head> pulls in a seperate CSS file for devices between 320px–480px.

Envelope.js is a simple, event driven jQuery plugin for in app messaging designed to work with or without popular UI frameworks. You can use Envelope.js along with popular UI frameworks like Twitter Bootstrap
and jQuery UI to generate events such as 'sucess', 'error', etc.

One issue with using callbacks to show user alerts is that they are not very reuseable. Using an evented approach allows you to decouple the action of showing a message to your users with the function or callback that generates it.

Have you ever written code that looks like the one below? If so, you quickly find out that you are writing a lot of display code in your callbacks, that its hard to reuse this code, and its hard to maintain this code.

Not only is this hard to maintain, but is difficult to reuse. Using envelope, your callbacks become much more elegant. Envelope allows you create messages that listen for events and display a message when that event is triggered. Envelope decouples this by making the above code look like:

To skip all this nonsense and see it in action Here's a fiddle for you to play with:

Envelope.js still has some more features to be implemented, see the todo list on its Github page. It's released under the MIT License, you can contribute too.

Holder.js is a JavaScript library which renders image placeholders entirely on the client side. It uses the <canvas> and the data URI scheme to render placeholders entirely in browser. It works both online and offline, and offers a chainable API to style and create placeholders with ease.

How to use it

Include holder.js in your HTML. Holder will process all images with a specific src attribute, like this:

The above will render as a placeholder 200 pixels wide and 300 pixels tall.

To avoid console 404 errors, you can use data-src instead of src.

Holder also includes support for themes, to help placeholders blend in with your layout. There are 3 default themes: gray, industrial, and social. You can use them like this:

RefineSlide is a simple, 3D transform/CSS transition-enabled jQuery plugin for displaying responsive, image-based content (with shiny animations). CSS transitions are used wherever possible, which currently makes for varied performance across browsers and platforms. At the moment it's probably best to check it out in Safari, and will become much smoother elsewhere as other browsers move towards offloading CSS transitions to the GPU.

NVD3.js is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.

Pondasee is a front-end starter kit combined with the power of SCSS & Compass, made to help front-end or developer to accelerate their work-flow in making web application. Pondasee is made with Compass and the SCSS language. Nested rules, variables, mixins, selector inheritance in SCSS/Sass makes coding CSS faster, more efficient and your stylesheets easier to organize and maintain.

Pondasee also comes with some important mixins which will help you to finished your works faster. Cross-browser compatibility is not an issue as Pondasee runs in any kind of modern browser.

Pondasee is NOT a CSS framework, it is only a front-end starter kit combined with the power of SCSS & Compass to build a theme. If you want to use this project as your starting point, you need to know basic knowledge of Compass and Sass.

For those off who who are unaware, Jekyll is a simple, blog aware, static site generator. It takes a template directory (representing the raw form of a website), runs it through Textile or Markdown and Liquid converters, and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub.

Now, if you want your blog to have an RSS or Atom Feed for your readers to subscribe to, you don't need to manually build your feed every time. You can just use the templates provided below and Jekyll will automatically run through it and generate the appropriate feed for your blog. You have got two feed format options, RSS 2.0 and Atom 1.0. Both feed templates pass the W3 Feed Validation successfully.

Code For RSS 2.0 Jekyll-Based Github Blog Feed Template

Code For Atom 1.0 Jekyll-Based Github Blog Feed Template

Enable Feed Auto-Discovery

You can also enable feeds to be auto-discovered by feed readers, by linking to your feed in your blog <head> section using this piece of code:

Jun 16, 2012

Note From The Editor: Functionn is a blog about latest, breaking web resources for web developers and designers alike. If you'd like to receive resources like this one, please take a moment to go through our archives, be it for mobile web development, or any other categories and if you like what you see, you can support this blog by subscribing via one of our options: RSS, Twitter, Google+, Facebook or Email.

Mobello is high performance JavaScript framework for HTML5 mobile apps. You can build native-like HTML5 apps for smartphones and tablets with Mobello. Mobello is scalable and robust framework suited for fast and rich user interface.

Features Overview

Easy-To-Use - Mobello is a framework that aims to ease development of mobile web apps.

View Source Bookmarklet is a bookmarklet which allows you to view the source code of web pages on your mobile, without leaving the page. When you hit the bookmarklet, it inserts an IFrame as the first element of the document and loads it with source of the document you're currently viewing.

Jun 15, 2012

doT.js was created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and Node.js. It shows great performance for both Node.js and browsers.
During my quest I found 2 template engines that caught my attention and inspired doT.

The first one was jQote2, a jQuery plugin, it was the first engine to break the speeds by using string concatenation and avoiding 'with' statements. The second one was underscore.js which had a nicely designed extension friendly templating function.

Mosho is a sensational browser-based presentation framework. It has been inspired by impress.js, but has it's own twist. Mosho features 3D transitions between slides using CSS3 3D transform property. Mosho comes with a neat API and a plugin architecture which can be used to extend the presentation framework to your taste.

You can use arrows and spacebar keys to start transitions from slide to slide with hash links being followed appropriately. Mosho also has a non-linear linking feature where you can 'stray' to another slide via a link then resume your slide timeline after you have visited the side-slide.

jQuery Annotator is a web annotation system. Loaded into a webpage, it provides the user with tools to annotate text (and other elements) in the page. The Annotator project also has a simple but powerful plugin architecture. While the core annotator code does the bare minimum, it is easily extended with plugins that perform such tasks as:

serialization: the Store plugin saves all your annotations to a REST API backend (see Storage wiki page for more and a link to a reference implementation)

authentication and authorization: the Auth and Permissions plugins allow you to decouple the storage of your annotations from the website on which the annotation happens. In practice, this means that users could edit pages across the web, with all their annotations being saved to one server.

prettification: the Markdown plugin renders all annotation text as Markdown

Dummy is a toolkit designed to make the development, testing and presentation of web prototypes less time consuming and more realistic. It does so by helping you populate your work with content and by randomizing key aspects of it's layout, in a way, simulating connectivity to a live database, and making it possible to visualize, test and present something much closer to the outcome of a finished project.

Whether you're slapping together a quick proof of concept, or fine tuning a complex RESS implementation, Dummy frees you up to focus on building great stuff — instead of pasting in static Lorem Ipsum, hunting down respectable placeholder images, or continuously adding and removing blocks of code in order to test different design outcomes.

Ratio.js is a JavaScript library which provides a fraction/rational/ratio object for JavaScript. By keeping values in a rational form, you can maintain precision and can avoid common floating point operation errors in JavaScript.

jQuery Picture is a tiny (2KB) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. However, as a stop-gap solution now, this might appeal to you.

csCSSc is a client-side CSS (de) compressor which can compress CSS-code to save bandwidth by removing unnecessary white-space characters from CSS code and also decompress/pretty print CSS-code for readability and maintainability of the CSS-code. The typed or pasted CSS-code should be valid CSS Level 1 and/or 2 code.

Features

Currently the script performs the following actions on valid CSS-code:

Optionally, remove all comments: All CSS comment-instructions can be removed, eg. everything between `/*' and `*/'.

Remove unnecessary white-space: All unnecessary white-space characters are removed. Additionaly, one may choose to remove all newline characters as well, resulting in a single-line file.

Remove unnecessary value-types: When a value of a property equals `0' (zero), the compressor will remove type-declarations from the value, like `px' and `em'.

Timeout-dialog.js is a jQuery plugin that displays a timeout popover which disappears after a certain period of time. The timeout dialog, for example, can be used whenever you want to display to the user that the logged in session is about to expire. It creates a light box with a countdown and options to stay signed in or sign out.