Ajax Animated Icon Generators
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:
Chimply (animated gif)
LoadingGif.com (animated gif)
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.
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.
More Script with TypeScript
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…
Any browser. Any host. Any OS. Open Source.
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.
Check it out NOW!!
Check it out: http://createjs.org/
The suite includes the following:
- EaslJS - Graphics library for working with the HTML5 canvas
- SoundJS- Abstracted cross-browser HTML5 audio library
- PreloadJS - Manage and coordinate loading of assets and resources. Uses XHR2 to provide real-time progress information
Text ASCII Art generator
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.
A really simple example:
/$$$$$$$ /$$$$$$$ | $$__ $$ | $$__ $$ | $$ \ $$ /$$$$$$ /$$ /$$| $$ \ $$ /$$$$$$ /$$$$$$$ | $$ | $$ /$$__ $$| $$ /$$/| $$$$$$$/ /$$__ $$ /$$_____/ | $$ | $$| $$$$$$$$ \ $$/$$/ | $$__ $$| $$$$$$$$| $$$$$$ | $$ | $$| $$_____/ \ $$$/ | $$ \ $$| $$_____/ \____ $$ | $$$$$$$/| $$$$$$$ \ $/ | $$ | $$| $$$$$$$ /$$$$$$$/ |_______/ \_______/ \_/ |__/ |__/ \_______/|_______/
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/
Flatiron for node.js - a web development framework
I found a wonderful new framework today.
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:
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.
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.
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…
A simple library for handling keyboard shortcuts.
Handsontable is a minimalistic approach to Excel-like table editor in HTML & jQuery.
FormFactor helps you customize your web app for different form factors, e.g. Phone, Tablet, Internet TV etc.
Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.
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”.
Simple HTML5 client-side JSON storage engine. Perfect for WebKit mobile development.
localStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood.
This is a simple library that emulates
memcache functions using HTML5
Date/Time formatting and manipulation
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.
String Format: https://bitbucket.org/davidchambers/string-format
Cookie Monster: https://github.com/jgallen23/cookie-monster
Some more CSS tips, tricks and libraries
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.
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
With a diagnostic stylesheet, you can quickly see where your markup might have some trouble.
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
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.
Dealing with CSS Vendor Prefixes
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:
-prefix-free - use only unprefixed css properties. The library adds the current browser’s prefix when it’s needed.
*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:
CSS-Prefixer - A Server-Side prefix fixer and CSS minifier command-line tool written in Python.
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.
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.
Know of any more useful resources for managing CSS?
Mobile development with HTML5
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:
IBM: Create offline web applications on mobile devices with HTML5:
MSDN: Using HTML5 to create mobile experiences:
Frameworks and resources
jQuery Mobile - Touch-Optimized Web Framework for Smartphones & Tablets:
jQTouch - A Zepto/jQuery plugin for mobile web development on the iPhone,
Android, iPod Touch, and other forward-thinking devices.
Skeleton - A Beautiful Boilerplate for Responsive, Mobile-Friendly Development:
PhoneGap - the only open source mobile framework that supports 7 platforms:
FitVid.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
Developer Cheat Sheets
Web Development Cheat Sheets
HTML cheat sheet:
CSS cheat sheet:
PHP cheat sheet:
Ruby on Rails cheat sheet:
MySQL cheat sheet:
Regular Expressions cheat sheet:
Search Engine Optimisation (SEO) cheat sheet:
jQuery cheat sheet:
jQueryUI Icon Reference cheat sheet:
MooTools cheat sheet:
Prototype cheat sheet:
Scriptaculous cheat sheet:
extJs cheat sheet:
YUI cheat sheet:
Wordpress Help Sheet
Tilt: Visualize your web page in 3D
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.
Backbone’s only hard dependency is Underscore.js.
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.