free web resources for designers and web developers

<canvas> is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). It can for instance be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas> implementations which we will see later in this tutorial.

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome. Gecko 1.8-based browsers, such as Firefox 1.5, also support this element. The <canvas> element is part of the WhatWG Web applications 1.0 specification also known as HTML 5.

I list some some place to find comprehensive tutorials samples on html5 canvas.

1. https://developer.mozilla.org/en/Canvas_tutorial. In this tutorial you will find topics on

• Basic usage
• Drawing shapes
• Using images
• Applying styles and colors
• Transformations
• Compositing
• Basic animations

Read the rest of this entry »

1. CodeMirror Syntax Highlighting Editor

CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a parser has been written for the language you are editing (see below for a list of supported languages), the code will be coloured, and the editor will help you with indentation.

2. Edit Area Syntax Highlighting Editor

Here is EditArea, a free javascript editor for source code. (That is no way a WYSIWYG editor).
This editor is designed to edit souce code files in a textarea. The main goal is to allow text formatting, search and replace and real-time syntax highlight (for not too heavy text).

3. CodePress web-based source code editor

CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it’s being typed in the browser.

Features

You can try some features with the demo below.

• Real-time syntax highlighting » just write some code
• Code snippets » on PHP example type “if” and press [tab]
• Auto completion » simple type ” or ( or ‘ or [ or { on any example below (except Plain Text)
• Shortcuts » on PHP example press [ctrl][shift][space]. It’s shortcut to  
• Multiple windows » you can add multiple CodePress windows to the same page

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

If you would, for whatever reason, have a large webform all fields shoud be semantically divided into fieldsets. Each fieldset would clearly describe each group of fields. Although many examples on the web today look different, this is how it should be.

With FormToWizard jQuery plugins, each group of fields represent a sub task of a larger task – filling the entire web form. Thus, each sub task can become a step with a description, input fields and navigation that is common for wizard forms – back and next.The entire process can be done in several simple steps.

Sweetter is an opensource modular microblogging system. Its goal is to provide a customizable communication system for communities, departments or enterprises. Sweetter is opensource software: you can use it, study it, modify it and distribute it under the Affero GPL license terms.

These are some JavaScript applications Ben Joffe made for competitions or out of general interest, some of them use the Canvas element from HTML5, none of them use JavaScript libraries.