William Malone has written a great tutorial: Create a Drawing App with HTML5 Canvas and JavaScript, that will take you step by step through the development of a simple web drawing application using HTML5 canvas and JavaScript.
The aim of the article is to explore the process of creating a simple app. You will be able to learn how to draw dynamically on HTML5 canvas, the future possiblities of HTML5 canvas, and the current browser compatibility of HTML5 canvas along the way. You can also download the HTML5 Canvas Drawing App in .zip format.
Source: Create a Drawing App with HTML5 Canvas and JavaScript
Social media integration has become an important part of modern web design. Web Icon Set has just released a set of free social media stamp collection to brand your work. All of them are highly recognizable by people.
Social Media Stamp Collection contains 100 most favorite social services and applications. It includes PNG and PSD source file, so that you can change the color easily. You are allowed to use these icons in any type of project. And please don’t forget to share them with your awesome friends.
Requirements: –
Demo: http://www.webiconset.com/social-media-stamp-collection/
License: License Free
jwerty is a JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalises the poor std api into something easy to use and clear. All jwerty events will require a jwertyCode in some way. jwertyCodes can be passed as strings, or arrays, strings being the easiest way to express a combo.
jwerty is a small library, weighing in at around 1.5kb bytes minified and gzipped (~3kb minified). jwerty has no dependencies, but is compatible with jQuery, Zepto or Ender if you include those packages alongside it.
Requirements: Javascript enabled
Demo: http://keithcirkel.co.uk/jwerty/
License: MIT License
PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript.
PhoneGap is an open source implementation of open standards. That means developers and companies can use PhoneGap for mobile applications that are free, commercial, open source, or any combination of these. The PhoneGap project will always remain free and open source under an MIT license.
Requirements: –
Demo: http://www.phonegap.com/
License: MIT License
SimpleModal is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content.
SimpleModal is not a lightbox although the possibility to hide parts of its layout may partially make it similar. It is written in Mootools. It is available free for download, and released under MIT License.
Requirements: Mootools framework
Demo: http://simplemodal.plasm.it/
License: MIT License
Seth Nickerson has designed a set of amazing patterns, called Pattern Kit. There are six variations he made from the base tile, but you can also roll your own. Those patterns are free to use for whatever you want. I think they will be really useful for some pretty classy web designs.
Requirements: –
Demo: http://dribbble.com/shots/183766-Pattern-Kit-One-Ribbon-Dancer-
License: License Free
Layer Styles is a HTML5 app for creating CSS3 in a intuitive way. It works just like Adobe Photoshop but in your browser. And it create CSS for you automatically. You can use the Colorpicker to pick any color of the element your working on. Drag and Drop images onto the page to use them as a background or to pick their colors. Color Swatches, Gradients and Styles are locally stored.
Requirements: –
Demo: http://layerstyles.org/
License: License Free
Speaker Deck is the best way to share presentations online. Simply upload your slides as a PDF, and they will turn them into a beautiful online experience. You can view them on SpeakerDeck.com, or share them on any website with an embed code.
They also automatically scale your slides to the embedding website’s layout for you. No more broken formatting, plugin dependencies, or ugly embed frames. You can sign up now for free, and make your presentations better with Speaker Deck.
Requirements: –
Demo: http://speakerdeck.com/
License: License Free
Do you like the new Timeline Facebook? Now you can have it as a theme on your wordpress. Timeline WordPress Theme was designed by JuliusDesign inspired by Timeline Facebook. The theme was developed in about 10 hours only, but it looks more than amazing.
Among the most interesting features integrated into the theme, you can find the top right of the timeline by months of publishing articles. You can also enter 4 items to be placed in the upper right header always present on every page. The theme looks almost identical to Timeline Facebook, and available download for free.
Requirements: WordPress
Demo: http://www.timeline-wp.com/
License: GPL License
Cube is an open-source system for visualizing time series data, built on MongoDB, Node and D3. If you send Cube timestamped events (with optional structured data), you can easily build realtime visualizations of aggregate metrics for internal dashboards. For example, you might use Cube to monitor traffic to your website, counting the number of requests in 5-minute intervals.
Cube supports filters for aggregating a subset of events: you might filter requests for a specific path, host, or user-agent. Or perhaps plot the count of slow requests (>500ms) over time. You can also evaluate arithmetic expressions, even combining multiple event types, say to compare requests to signups for conversion tracking.
Requirements: Javascript Framework
Demo: http://square.github.com/cube/
License: Apache License
