DevRes - Development Resources

Sure there are a few standard icons that you can use for your waiting dialogues in your apps, but here a list of new and old ones… just for a bit of variety:

CSSLoad.net (css)
http://cssload.net/

Canvas Loader (javascript)
http://heartcode.robertpataki.com/canvasloader/

Chimply (animated gif)
http://www.chimply.com/Generator

LoadingGif.com (animated gif)
http://loadinggif.com/

Neteye activity Indicator (javascript)
http://neteye.github.com/activity-indicator.html

spin.js (javascript)
http://fgnass.github.com/spin.js/

Preloaders.net (animated gif and/or javascript and css sprites)
http://preloaders.net/

Okay, you’ll really have to look into it yourself in order to fully understand the boundless functionality of this framework. The crux of it being that you can write all of your code, client, server and data access layer all into a single module, and the opa framework will do the rest.

It’s Non-blocking, supports type-checking (see also TypeScript), includes jQuery, supports NodeJS/MongoDB/CouchDB on the server with Database Automation objects, supports MVC design patterns, and is basically awesome.

It’s going to be a commitment to start using it, but if it’s right for you it could well be worth the time getting to know it.

http://opalang.org/

Write simultaneously the frontend and backend code, in the same language, within the same module. Even better: the Opa Slicer automates the calls between client and server. No more manually written AJAX calls or value serialization!

And when auto is not enough, add hints to the code to enforce client or server-side, privacy, synchronous or asynchronous.

I posted a while back about the joys of CoffeeScript, but now there’s an official Microsoft Script enhancing language that is designed to be scalable and robust enough for enterprise application development…

Enter TypeScript.

TypeScript is a language for application-scale JavaScript development.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.

With TypeScript, you can use existing JavaScript code, incorporate popular JavaScript libraries, and be called from other JavaScript code.

TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment.

Visual Studio 2012 Developers can install the TypeScript editor plugin to get rich TypeScript tooling. It integrates into SublimeText as well (my favourite).

Best of all, it’s Open Source.

Hakim El Hattab is a Swedish developer who has put together an amazing lab of all of his experiments in JavaScript visual effects.

Check it out NOW!!

http://hakim.se/experiments

Firstly an introduction to a cool on-line JavaScript editor - I know, not another one, you’re thinking, but this is a little different. Createjs.org has created a new interface to various third party editors that allows you to make ANY on-line content editable, and integrate it into your own back end CMS.

Check it out: http://createjs.org/

Secondly, here’s an awesome suite of JavaScript tools that for some reason I only just discovered. CreateJS.com.

The suite includes the following:

• EaslJS - Graphics library for working with the HTML5 canvas
• TweenJS - Transition and animation library for HTML5 and JavaScript properties
• SoundJS- Abstracted cross-browser HTML5 audio library
• PreloadJS - Manage and coordinate loading of assets and resources. Uses XHR2 to provide real-time progress information
• Zoë - Export flash animations to EaslJS sprite sheets for use in JavaScript animations

http://createjs.com/

Now this is cool… you’ve always wanted to add your company name to the comments in your source-code in a BIG way… well now you can.

Check out this ASCII art generator that will convert your text into beautiful ASCII art using one of 300+ fonts…

Here’s an example page that renders all (304 at present) currently supported fonts in one big sample page so you can compare them all at once.

http://patorjk.com/software/taag/#p=testall&f=3D%20Diagonal&t=DevRes

A really simple example:

 /$$$$$$$                       /$$$$$$$                     
| $$__  $$                     | $$__  $$                    
| $$  \ $$  /$$$$$$  /$$    /$$| $$  \ $$  /$$$$$$   /$$$$$$$
| $$  | $$ /$$__  $$|  $$  /$$/| $$$$$$$/ /$$__  $$ /$$_____/
| $$  | $$| $$$$$$$$ \  $$/$$/ | $$__  $$| $$$$$$$$|  $$$$$$ 
| $$  | $$| $$_____/  \  $$$/  | $$  \ $$| $$_____/ \____  $$
| $$$$$$$/|  $$$$$$$   \  $/   | $$  | $$|  $$$$$$$ /$$$$$$$/
|_______/  \_______/    \_/    |__/  |__/ \_______/|_______/ 
                                                             

In short words jCryption is a JavaScript encryption plug-in, which encrypts the POST/GET-Data that will be sent when you submit a form.

jCryption2 supports full client/server encrypted communication so you can encrypt any conversation with your server not just form data. The server side includes a PHP module that handles decryption/encryption back to the client.

Give it a go: http://www.jcryption.org/

I found a wonderful new framework today.

While researching JavaScript templating libraries, I came across Plates(which is actually the latest incarnation of the Weld.js library). Anyhoo, it turns out Plates is actually part of a much larger JavaScript web-development framework (mostly for node.js) called Flatiron (for node.js). (http://flatironjs.org/).

Although individual components of the framework can be used separately (some with or without node.js), the framework as a whole is an awesome little platform to help leverage the latest web technologies to give your project a real edge.

From the website:

flatiron is an adaptable framework for building modern web applications. It was built from the ground up for use with JavaScript and Node.js.

Philosophy

No one agrees on frameworks. It’s difficult to get consensus on how much or how little a framework should do. Flatiron’s approach is to package simple to use yet full featured components and let developers subtract or add what they want.

Motivation

Build a collection of decoupled, unobtrusive tools that can operate as well in unison as they do independently. Promote code organization and sustainability by clearly separating development concerns.

Every now and then I come across some tiny little JavaScript libraries that fulfill some specific function I need. Normally they’re pretty tiny, a few Kb or so. Micro-Libraries.

There’s an AWESOME reference that I’be posted about previously, microjs.com. It’s pretty darn complete too. However I’ve found the following to be particularly useful…

General

MouseTrap: http://craig.is/killing/mice
A simple library for handling keyboard shortcuts.

Handsontable: http://warpech.github.com/jquery-handsontable/
Handsontable is a minimalistic approach to Excel-like table editor in HTML & jQuery.

FormFactor: https://github.com/PaulKinlan/formfactor
FormFactor helps you customize your web app for different form factors, e.g. Phone, Tablet, Internet TV etc.

Swype: http://swipejs.com/
Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.

Notificon: https://github.com/makeable/Notificon
Notificon is a javascript class for generating favicon notifications and alerts.

Include.js: http://capmousse.github.com/include.js/
A tiny, fast on-demand JavaScript loader.

Math Methods: https://bitbucket.org/davidchambers/mathmethods.js
A tiny script which makes methods of the “Math” object available to numbers by adding properties to “Number.prototype”.

Client-side caching

Lawnchair: http://brian.io/lawnchair/
Simple HTML5 client-side JSON storage engine. Perfect for WebKit mobile development.

Store.js: https://github.com/marcuswestin/store.js
localStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood.

LSCache: https://github.com/pamelafox/lscache
This is a simple library that emulates memcache functions using HTML5 localStorage.

Date/Time formatting and manipulation

Moment.js: http://momentjs.com/
For parsing and processing dates, including friendly strings like “2 days ago”

Timeago (jQuery plugin): http://timeago.yarp.com/
Similar to Moment.js, this jQuery plugin handles friendly date formatting strings.

AnHourAgo: https://bitbucket.org/davidchambers/an.hour.ago
A small utility which enables wonderfully expressive date and time manipulation in JavaScript.

String Formatting

Slang: https://github.com/devongovett/slang
A collection of utility functions for working with strings in JavaScript in the browser.

String Format: https://bitbucket.org/davidchambers/string-format
JavaScript string formatting inspired by Python’s “str.format()”.

Cookie manipulation

Cookie Monster: https://github.com/jgallen23/cookie-monster

Cookie.js: https://github.com/js-coder/cookie.js

In addition to the last post about dealing with Vendor Prefixes, I’ve put together a list of additional resources that you should find useful.

CSS Reset

http://www.cssreset.com/

The CSS Reset webiste has several CSS Reset templates from different authors including Eric Meyer, the HTML5 Doctor and Yahoo amongst others. It also outlines the pro’s and con’s of each, and attempts to help identify the best case in which to use each of them.

“The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you’re interested. Reset styles quite often appear in CSS frameworks, and the original “meyerweb reset” found its way into Blueprint, among others” - Eric Meyer

Diagnostic CSS

http://meyerweb.com/eric/tools/css/diagnostics/

With a diagnostic stylesheet, you can quickly see where your markup might have some trouble.

CSS Generator

CSS3 Please - http://css3please.com/

CSS3, Please! The Cross-Browser CSS3 Rule Generator
You can edit any applicable values in this css file and preview the results live in your browser. All of the corresponding vendor-prefix values will automatically be handled for you, and you can copy the resulting css and paste it into your own stylesheet.

Web Color Scheme Generators

Adobe Kuler: http://kuler.adobe.com/
Color Scheme Designer: http://colorschemedesigner.com/

For those of you with less than a lifetime of experience with graphic design, a colour scheme generator can be a life saver when creating a colour palette that looks reasonable fro your site.

Create a colour palette and transfer the scheme into your CSS.

Something that has bothered me for a while now is developing bleeding-edge style-sheets that use vendor-prefixes.

Webkit is generally the leading platform for experimental features in css, and most other browsers try to implement the features that are worthy or likely of becoming part of the standard.

The problem is, until they are standard, or at least get out of the experimental stage (i.e. loose the prefix) you have to code 3+ of each feature to ensure you cover all browsers.

e.g.: box-shadow: 1px 1px 3px rgba(0,0,0,.8) quickly becomes…
    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);

Even worse, background: linear-gradient(top, #EEE, #BBB) becomes:
    background: -moz-linear-gradient(top, #EEE, #BBB);
    background: -o-linear-gradient(top, #EEE, #BBB);
    background: -webkit-linear-gradient(top, #EEE, #BBB);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #BBB));
    filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=#EEE, EndColorStr=#BBB)”;
    background: linear-gradient(top, #EEE, #BBB);

Additionally, you will eventually face the problem that once the feature does graduate, you have to go back and update all your css to remove the vendor specific prefixes and replace it all with the new standard.

Enter CSS Frameworks and Prefix Libraries (finally). There are lots of them, so here’s a quick breakdown:

CSS JavaScript Libraries

-prefix-free - use only unprefixed css properties. The library adds the current browser’s prefix when it’s needed.
http://leaverou.github.com/prefixfree/

*NOTE: Target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile.

Prefixr - online CSS prefix tool:
http://prefixr.com/

CSS-Prefixer - A Server-Side prefix fixer and CSS minifier command-line tool written in Python.
http://cssprefixer.appspot.com/

CSS Frameworks

LESS extends CSS with dynamic behavior such as variables, mix-ins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
http://lesscss.org/

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a style-sheet for printing.
http://www.blueprintcss.org/

Know of any more useful resources for managing CSS?

Take a look at these three articles on mobile development with HTML5, then checkout some of the frameworks and plugins below for a plethora of resources!

Blogs and examples

How I built the Hacker News mobile web app:
http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app

IBM: Create offline web applications on mobile devices with HTML5:
http://www.ibm.com/developerworks/web/library/wa-offlineweb/

MSDN: Using HTML5 to create mobile experiences:
http://msdn.microsoft.com/en-us/magazine/hh975346.aspx

Frameworks and resources

jQuery Mobile - Touch-Optimized Web Framework for Smartphones & Tablets:
http://jquerymobile.com/

jQTouch - A Zepto/jQuery plugin for mobile web development on the iPhone,
Android, iPod Touch, and other forward-thinking devices.
http://www.jqtouch.com/

KendoUI - Build HTML5/JavaScript mobile apps that automatically transform to the native look-and-feel of iOS, Android and BlackBerry:
http://www.kendoui.com/

Skeleton - A Beautiful Boilerplate for Responsive, Mobile-Friendly Development:
http://getskeleton.com/

PhoneGap - the only open source mobile framework that supports 7 platforms:
http://phonegap.com/

Titanium SDK - Create rich native iOS, Android, hybrid, and mobile web apps from a single JavaScript-based SDK:
http://www.appcelerator.com/platform/titanium-sdk

FitVid.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
http://fitvidsjs.com/

Web Development Cheat Sheets

HTML cheat sheet:
http://floele.flyspray.org/htmlcheatsheet.pdf

CSS cheat sheet:
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

PHP cheat sheet:
http://www.addedbytes.com/cheat-sheets/php-cheat-sheet/

Ruby on Rails cheat sheet:
http://www.addedbytes.com/cheat-sheets/ruby-on-rails-cheat-sheet/

MySQL cheat sheet:
http://www.addedbytes.com/cheat-sheets/mysql-cheat-sheet/

Regular Expressions cheat sheet:
http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/

Search Engine Optimisation (SEO) cheat sheet:
http://www.seomoz.org/blog/the-web-developers-seo-cheat-sheet

JavaScript & JavaScript Framework Cheat Sheets

JavaScript cheat sheet:
http://www.addedbytes.com/cheat-sheets/javascript-cheat-sheet/

jQuery cheat sheet:
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/

jQueryUI Icon Reference cheat sheet:
http://www.petefreitag.com/cheatsheets/jqueryui-icons/

MooTools cheat sheet:
http://mediavrog.net/blog/2008/06/11/mootools/mootools-12-cheat-sheet/

Prototype cheat sheet:
http://thinkweb2.com/projects/prototype/prototype-1602-cheat-sheet/

Scriptaculous cheat sheet:
http://www.slash7.com/articles/2006/04/22/scriptaculous-cheat-sheet-1

extJs cheat sheet:
http://huseyint.com/projeler/extjs-cheat-sheets/

YUI cheat sheet:
http://developer.yahoo.com/yui/#cheatsheets

Also…

Wordpress Help Sheet
http://www.quicklycode.com/wp-content/files/wordpress_helpsheet.jpg

Tilt is a fun new Firefox extension focused on creating a 3D visualization of a webpage.

Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering itself.

Unlike other developer tools or inspectors, Tilt allows for instant analysis of the relationship between various parts of a webpage in a graphical way, but also making it easy for someone to see obscured or out-of-page elements. Moreover, besides the 3D stacks, various information is available on request, regarding each node’s type, id, class, or other attributes if available, providing a way to inspect (and edit) the inner HTML and other properties.

http://hacks.mozilla.org/2011/07/tilt-visualize-your-web-page-in-3d/

I’ve recently discovered quite a plethora of add-on libraries for JavaScript that are compatible with several other libraries (such as jQuery). Here are a couple of neat little additions to your ever-growing library of JavaScript tools and helpers.

Underscore

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux.

Underscore provides 60-odd functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so modern browsers will use the native implementations of forEach, map, reduce, filter, every, some and indexOf.

Backbone

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface

Backbone’s only hard dependency is Underscore.js.

For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include json2.js, and either jQuery ( > 1.4.2) or Zepto.

Knockout

knockout.js helps you simplify dynamic JavaScript UIs using the Model-View-ViewModel (MVVM) pattern.

By encapsulating data and behavior into a view model, you get a clean, extensible foundation on which to build sophisticated UIs without getting lost in a tangle of event handlers and manual DOM updates.