SubtlePatterns Bookmarklet - Preview Patterns From SubtlePatterns Directly On A Website

SubtlePatterns Bookmarklet is a bookmarklet which allows you to preview hundredths of patterns from the popular patterns website SubtlePatterns directly on any website you are working upon.

When you click on the bookmarklet on your design, it loads up a little box which allows you to select sequentially which pattern you want to apply to the website and the it previews it immediately upon selection.

It has easy navigational arrows for you to swiftly go through all the patterns available. This bookmarklet is a must have for any website designer who uses SubtlePatterns.

Requirements: None
Website: http://bradjasper.com/subtle-patterns-bookmarklet/
License: Free

Roots - A Toolbox For Building Simple, Beautiful, And Efficient Products For The Web

Roots is a toolbox for building simple, beautiful, and efficient products for the web. Roots is a toolkit built on best practices for advanced front-end web development.

It has a very large number of features, which I’ll attempt to list below. Roots comes in the form of a static site build tool by default, but also includes templates and plugins for express.js and rails. Plugins for RailwayJS and Sinatra are also in the works.

Features

• Extremely simple installation.
• Clean and minimal default project template.
• Jade, Stylus, and CoffeeScript default stack.
• Super fast live reload implementation.
• Compile errors displayed as a flash message, doesn’t break workflow.
• Layouts and partials fully supported.
• CoffeeScript and markdown can be written directly in views.
• Extremely robust, modular, and powerful CSS helper library built in.
• Global variables and functions (view helpers).
• Clean and intuitive app settings file.
• Single command deploy to Heroku.
• Intelligently minifies HTML, CSS, and JavaScript on deploy.
• Efficient client-side js management through bower and Require.js.
• Easy to extend with a simple and well-documented plugin interface.

Requirements: None
Demo: http://roots.cx/
License: MIT License

Plusstrap - A Sleek, Intuitive, And Powerful Front-End Framework For Faster And Easier Web Development

Plusstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development.  Forked from Twitter Bootstrap, built by @xbreaker, Plusstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

Plusstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Plusstrap your own.

Requirements: None
Demo: http://xbreaker.github.com/plusstrap/
License: Apache License v2.0

RailwayJS - An MVC Framework To Create Node.js Web Apps Faster With More Energy

RailwayJS is the Node.js MVC framework based on Express.js, fully Express.js compatible.  It allows you to build web applications in a similar manner as in Ruby On Rails.  The main objective of the framework - web development without pain.

Features

• Full MVC+H stack
• Resource-based routing
• JugglingDB ORM
• Multi-locale support
• Coffee-script support (howto)
• Generators for model, controller, scaffold
• Testing: nodeunit, cucumis, code coverage reporting
• Debugging: railway console
• Extensions

Requirements: Node.js
Demo: http://railwayjs.com/
License: MIT License

Zebra - A JavaScript Library With A Rich Set Of UI Components Implemented Using OOP

Zebra is a new OOP, Rich WEB UI programming philosophy that makes stress to modular software engineering as an opposition to HTML DOM/CSS manipulation with scattered everywhere JavaScript code. Zebra can rely on almost empty HTML as a container for JS code.

Zebra core introduces and implements easy and very clear OOP concept. Inheritance, interfaces, method overloading and overriding, constructors, inner classes, packaging and other OOP features can be found there. Following OOP stimulates implementing well designed, supportable, extendible and pretty code.

Zebra Rich WEB UI is powerful engine that allows developers to implement any imaginable user interface components. Zebra UI core employs new HTML5 Canvas element where any custom content can be rendered. Having full control over UI components rendering you can get rid of typical annoying WEB UI “puzzling” and heavy CSS/DOM manipulations.

Features

• Easy JS OOP - Simple and light weight Zebra JavaScript code supplies easy for understanding, eyes candy OOP concept
• Rich Web UI - Over 30 various fully customizable UI components. Flexible layouts, controllable look and feel, XML UI form description .
• Result In 5 Minutes - Developing Zebra application is revolving around writing well structured code with almost zero DOM/HTML dependencies.

Requirements: None
Demo: http://www.lw-zone.org/zebra/test/live-demo.html
License: GPL or MIT License

Avatars.io - A Hassle-Free Hosted User Avatar Service

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.


Requirements: None
Demo: http://avatars.io/
License: Free

Jaggery - A JavaScript Framework To Write Web Applications & HTTP-Focused Web Services

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.


Requirements: None
Demo: http://jaggeryjs.org/samples.jag
License: Apache License v2.0

Mobello - An HTML5 Framework For Building Native-Like Mobile Apps

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. 
• Native-Like UI - Mobello gives you a native experience on the web.
• Clean Architecture - With MVC architecture and clean component model, you can keep your code sensible and organized.
• Integrated Development Environment - You can use Mobello Studio to develop, design and test HTML5 web apps, which give you ultimate productivity.

Mobello.js - Core Runtime

Runtime manages the lifecycle of web apps and provides abstraction layers for user interaction and animation, advanced effects.

• Device agnostic event system (touch events)
• Provides advanced amimation
• Runtime system for multi-tasking
• Provides Controllers for general UX patterns

UI Components

Mobello includes a complete set of user interface components for building rich mobile web apps.

• 20+ beautifully designed components
• Supports wide range of device form-factor
• Optimized for touch UI
• Highly extendable and customizable components

Mobello Studio

• Design web apps with HTML5 and CSS3
• Leverage the latest web technologies and specifications.
• You don’t have to concern vendor prefixes like -webkit or -moz.

Visual Design Editor

Studio helps you add or remove components easily and accurately, with features such as drag and drop.  You can preview while editing, with standard compliant css rendering engine.

Real-time Synchronized Editing

You can edit contents in real time in either the source view or the design view, and those changes are reflected in the other view on the fly.

JavaScript Debugging

• Set up breakpoints in source code
• Step into/over/out
• Inspect variables
• Consolve view

Device Emulator

• Emulate device form factor (iOS and android)
• Rotate / Zoom / Multi-touch gesture

Powerful Layout Editing

• Alignment/snap-to-line helps you arrange UI components.
• Visual editor support a range of layouts: absolute layout/flow layout/flexbox layout.

Eclipse plug-in architecture

• Eclipse is industry-standard IDE platform and open source. You can build native apps along with plugins which Appspresso or PhoneGap provides.

Requirements: None
Demo: http://mobello.github.com/emulator/emulator.html
License: LGPL

View Source Bookmarklet - View Source Of Pages On Your Mobile, Without Leaving The Page

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.


Requirements: None
Demo: http://weisjohn.github.com/wid...source_bookmarklet/
License: Free

Yahoo Gear.js - A Scriptable Build System Using Simple Tasks That Act Like A Sequence Of Piped Commands

Gear.js is a scriptable build system using simple tasks that act like a sequence of piped commands.

Using  Gear.js, you can easily chain tasks like this:


You can also execute tasks using array style, shown below:


Additionally, you can perform parallel task execution:

Features

• Runs in Node and the browser.
• Basic building blocks that can be combined to perform complex builds.
• Tasks are simply defined and keep system internals to a minimum.
• Asynchronous execution.
• Extensible task loading via NPM, file, or directory.
• Advanced flow control for complex task execution.

Requirements: None
Demo: http://yahoo.github.com/gear/
License: BSD License

Iconic - A Free Icon Set Consisting Of 171 Icons In PNG/SVG/SWC/OFT/TTF/EOT/Omnigraffle Stencil Formats

Iconic is an open source icon set consisting of 171 icons in raster, vector and font formats.  Iconic aims to be the most forward-thinking icon set around based on its support of forward facing display/deployment methods. Icons should not just be clear and attractive, they should be easy and flexible to work with.

Iconic is intended to be a simple yet unique in form. Alternatives for several marks have been added for greater choice in style.

Iconic comes in PNG, SVG, SWC, OFT/TTF/EOT and Omnigraffle stencil formats as well as the tools used to generate them.

High legibility over a large scale range is a big priority for Iconic. Nearly all the icons will work from 8 pixels to infinity (and beyond).

Iconic comes with JSX and Python scripts to allow you to build your own PNG, SVG and font files however you would like.

Requirements: None
Demo: http://somerandomdude.com/work/iconic/
License: CC Attribution 3.0 License

Frag - A Fluid, Responsive, Friendly, Simple Grid System For CSS Written In LESS

Frag is a fluid, responsive, friendly, simple grid system for CSS written in LESS.  Frag supports Simple Equal Columns, Unequal Columns (Responsivity Disabled), Columns with Uneven heights, Nested Grids, Hidden Columns and more.

Browser Support

Frag has been tested so far in Firefox 12, Chrome, Safari 5.1, Internet Explorer 6–9, Mobile Safari (iPhone and iPad).


Requirements: None
Demo: http://frag.rowanmanning.co.uk/
License: MIT License or GPLv2

xip.io - A Magic Domain Name That Provides Wildcard DNS For Any IP Address

xip.io is a magic domain name that provides wildcard DNS for any IP address. Say your LAN IP address is  10.0.0.1.  Using xip.io,

10.0.0.1.xip.io   resolves to   10.0.0.1

www.10.0.0.1.xip.io   resolves to   10.0.0.1

mysite.10.0.0.1.xip.io   resolves to   10.0.0.1

foo.bar.10.0.0.1.xip.io   resolves to   10.0.0.1

...and so on. You can use these domains to access virtual hosts on your development web server from devices on your local network, like iPads, iPhones, and other computers. No configuration required!
 

How Does It Work?

xip.io runs a custom DNS server on the public Internet.When your computer looks up a xip.io domain, the xip.io DNS server extracts the IP address from the domain and sends it back in the response.

Requirements: None
Demo: http://xip.io/
License: Free

Cerny.js - A Library To Ease Development Of JavaScript Projects In Large Development Teams

Cerny.js is a JavaScript library aiming to ease development of JavaScript projects in large development teams. It tries to accomplish this goal by providing solutions for

• Method call interception,
• Type checking for arguments and return values on function calls,
• Dependency management,
• Logging,
• Validation of an object against a schema,
• Programming by contract,
• Dictionaries,
• Pretty printing JSON in text or HTML,
• Easy configuration, and
• Good documentation.

Requirements: None
Demo: http://www.cerny-online.com/cerny.js/demos
License: BSD License

crapLoader.js - Loads (Almost) Any Third-Party Script With document.write Asynchronously

crapLoader.js is a JavaScript library to load ads, widgets or any JavaScript code with document.write in it. The recommended solution is to use iframes for third-party content, but this is not always possible. Normally document.write prevents you from loading a script asynchronously, but this library hijacks document.write and delegates the content loaded from each script into the correct position.

Features

• Load (almost) any third-party script asynchronously
• Does not block rendering of your page
• Your visitors see your content earlier
• DOMContentLoaded (a.k.a. $(doc).ready ) and window.onload triggered earlier
• Load the banners in parallel! Except in IE ;(
• Banners loads faster (at least in theory)
• Handles recursive scripts
• Inline and external javascript
• Inline and external vbscript
• Buffer document.write, flush on script load event
• Handles document.getElementById from the buffer
• Tested (manually) in IE 6-10, latest Firefox, Chrome, Safari, Opera

Disadvantages

• You never know for sure that all ads will load correctly
• Ads might circumvent by getting a clean doc.write from an iframe
• Possible to stop, but won't
• Using this script might violate the terms of your ad provider
• You can't use document.write in your own scripts, but why would you?!?
• document.getElementById will be a tad slower until all scripts loaded with crapLoader are finished loading

Requirements: None
Demo: https://github.com/gregersrygg/crapLoader
License: MIT License

Tea-Fueled Does - A Loosely-Based MVC PHP 5.3 Framework That Aims To Be Awesome

Tea-Fueled Does is a loosely-based MVC PHP 5.3 framework that aims to be awesome. It was born out of the disappointment of other frameworks out there.

What TFD Is?

• Fast: TFD is designed to be fast, both in development time as well as page load time. It includes some useful classes that save you time when writing queries, etc.
• Free: TFD is licensed under the Unlicense, which means you can use it for whatever, non-profit, open-source, commercial, whatever. You can pull classes from it to use in your own framework, site, etc.
• Clean: We hate nothing more then messy code that breaks when you try to change it. We have done our best trying to make our code and documentation clean and understandable.
• Extendible: A framework's goal is to give you a base to write your application on. If you need to extend it to fit your needs, you should be able to without much pain or frustration. We have done our best to make TFD easily extendible.
• In a few words, TFD is a loosely-based MVC framework that allows you to get your code out there. It's clean and extendible so you can modify it easily to fit your project. It's fast so you can run web applications with it. And most importantly, it's free. You don't have to worry about the licensing or any legal stuff, just start coding.

What TFD Is Not!

• A CMS: TFD is not a CMS. It is a framework, a codebase, something for you to build a CMS upon if you wish.
• One Size Fits All: Different projects require different tools and languages. While TFD is extendible, it may not be right for your project.
• Perfect: Bugs happen. It's a part of software. And while we've done our best to make sure TFD is bug-free, we aren't perfect. If you spot a bug, submit an issue or a pull request and we will do our best to fix the issue.
• A Magic Tool: While TFD is awesome, it is by no means magical. It can't take broken, crappy code and make it run amazingly. It is a framework, a codebase, something for you to take your code and build upon it. If your code doesn't work, TFD won't work.

Requirements: None
Demo: http://tea-fueled-does.github.com/
License: Unlicense

Laravel - A Clean And Classy Framework For PHP Web Development

Laravel is a clean and classy framework for PHP web development. Freeing you from spaghetti code, Laravel helps you create wonderful applications using simple, expressive syntax.  A class API just doesn't cut it. Laravel has great documentation to help you get up to speed as quickly as possible.

Laravel is for all PHP programmers, even beginners. In fact, Laravel's documentation makes Laravel a great choice for both beginning and advanced PHP programmers.

Features

• Simple routing using Closures or controllers.
• Views and templating.
• Driver based session and cache handling.
• Database abstraction with query builder.
• Authentication.
• Migrations.
• PHPUnit Integration.
• A lot more.

Requirements: None
Demo: http://laravel.com/docs
License: MIT License

IcoMoon - A Free Icon Set Of 300 Superb Icons, Also Available As Web Font

IcoMoon is a free icon set of 300 superb icons, also available as Web Font.  Use the @font‑face method to have your icons in vector and in any size or color. You may basically add any CSS effect you wish.  IcoMoon is fully accessible and compatible with screen readers.

IcoMoon is supported in IE (6+), iOS Devices, Android, Chrome, Firefox, Opera, Safari.  Come with a complete documentation and a developer-friendly license.

Requirements: None
Demo: http://keyamoon.com/icomoon/#toPreview
License: CC Attribution 3.0 License

Disordered List - Controlled Randomness With jQuery

Disordered List - Controlled Randomness With jQuery is a technique for creating a randomly generated messy list.  The best part of it is that it can easily be adapted to randomize just about anything.

Requirements: jQuery
Demo: http://scottsiemens.com/list/
License: Free

CookieCuttr - A Tailorable jQuery Plugin To Deal With The EU Cookie Law

CookieCuttr is a tailorable jQuery plugin to deal with the EU cookie law.  CookieCuttr is something than can be used easily and be added to all websites with a really quick and configurable implementation.  CookieCuttr interprets the law as follows:

• The website is only going to store cookies that are seen as essential to the functionality of the website. e.g. a shopping cart requires cookies for login, remembering cart items - they’re okay.
• The website is not going to store any other cookies unless the website visitor accepts - sadly this means analytics will not be enabled.

Requirements: jQuery
Demo: http://cookiecuttr.com/#demos
License: GPL