How to Cheat HTML5 with JavaScript

The growing popularity of HTML5 has created a boom in development of JavaScript libraries that can integrate or be used instead of HTML5. These libraries are easy to implement and can instantly provide a whole new level of power and control over an existing HTML5 application.

We put together a list of 10 awesome, light JavaScript tools to help you get your next application off and running. JavaScript libraries have become an essential part of a web developer’s toolkit, they enable developers focus on writing code that nine out of 10 times will work just fine – and that’s a brilliant thing.

Internet has all the info you need, you just need to refer the corresponding resource. When you run into something you don’t understand, you can head to the Mozilla MDN for explanations. If you’re looking for examples of new possibilities that HTML5 provides, then jump to html5demos.com, there are loads of great and simple examples to gain experience from.

Today we would like to introduce you the most popular JavaScript tools. These online and browser based tools will be very helpful when working with JavaScript code. Don’t miss the chance to use one of these items in your workflow.

YUI (Yahoo User Interface)

The Yahoo User Interface Library was one of the first libraries and cross-browser toolsets released as an open source, still it remains one of the biggest and the most effective. The collection of tools includes a vast variety of any possible charts, widgets and other great goodies. Yahoo devoted more attention to visual issues than the others. Features that drive Flickr and Yahoo Mail can be found here and they are waiting for your implementations.

***


Mashi

HTML5 stated the goal to replace Flash plug-ins that are a great tool for making something dance on your webpage. This goal is really hard to achieve because the game industry and presentation industry duplicates some sophisticated tools available in the Flash universe. Here comes out Mashi the tool that will make your sprites move. Mashi offers more than several dozens of standard functions for improving the overall look of your website.

***

MooTools

MooTools is a lightweight, object-oriented, JavaScript framework. It is released under the free, open-source MIT License. MooTools are used on more than 5% of all websites, and it is known to be one of the most popular JavaScript libraries. Like jQuery and YUI, MooTools offers nice, browser-independent shorthand for manipulating arrays, divs, spans, and whatsoever.

***

pp3Dico

Browser game fans will find pp3Diso a whole lot of entertainment. Still it is not as pleasing for an eye as Flash but soon this gap will be closed. With pp3Diso you can set up a three-dimensional, orthographic game with just a few lines of code.

***

VideoForEverybody

1
2
3
4
5
6
7
8
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 --><video width="640" height="360" controls="controls"><source src="__VIDEO__.MP4" type="video/mp4" /><source src="__VIDEO__.OGV" type="video/ogg" />
        <!-- MP4 must be first for iPad! -->
	<!-- Safari / iOS video    -->
	<!-- Firefox / Opera / Chrome10 -->
	<!-- fallback to Flash: -->
	</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->

Download Video: Closed Format: “MP4″ Open Format: “Ogg”

Video for Everybody is an HTML code that embeds a video into a website using the HTML5 tag “video”, falling back to Flash automatically without the use of JavaScript or browser-sniffing. VFE is for developers who either want something really simple they can quickly use on their blog or websites. VFE does not use JavaScript that is why it does not work on Android versions prior to 2.3 (Gingerbread).

***

Simile Widgets

Simple Widgets provides a whole bunch of data visualization tools that are mostly focused on maps and timelines. Each of these options provides a good method for data visualization which is a good way of absorbing large volumes of information quickly and efficiently.

***

Tile5

Most of us use big mapping libraries to show street addresses. With Tile5 you can pull the mapping tiles from sources as GeoCommons, so that the user can use them just like the maps from Google, MapQuest, or Yahoo.

***

jQuery Mobile

Nowadays mobile browsers gradually conquer the web, that is why it becomes more and more important to present information in appropriate way for smartphones and tablets. Though in some cases it’s not that easy especially when fingers are thick or eyes can’t focus on tiny fonts. jQuery Mobile, Jo, and Sencha Touch libraries offer touch-friendly menus that transform information into a convenient manner for small screens.

***

HTML5SQL

1
2
3
4
5
6
7
8
9
10
11
12
13
$.get('Setup-Tables.SQL',function(sqlStatements){
    html5sql.process(
        //This is the text data from the SQL file you retrieved
        sqlStatements,
        function(){
            // After all statements are processed this function
            //   will be called.
        },
        function(error){
            // Handle any errors here
        }
    );
});

html5sql is a JavaScript module that eases the work with HTML5 Web Databases. The primary function is to provide a structure for processing SQL statements within a single transaction. This simplifies the interaction with the database. There are also many other smaller features to make things easier, more natural and more convenient for programmers. html5sql provides the capability to sequentially process SQL in many different forms:

  • As a single SQL statement string;
  • As an array of SQL statement strings;
  • As an array of SQL statement objects (if you want to inject data into the SQL or get a callback after each SQL statement is processed);
  • As a string containing multiple SQL statements, each of which ends in a semicolon;
  • From a completely separate file containing SQL statements.

***

Firebug

Large application building always causes more debugging. While you can get by with embedding alert statements into smaller pages, larger ones require more sophisticated structure for debugging. Here comes Firebug, a great extension for the Firefox browser. It offers an elaborate debugging platform that includes lots of functions together with the ability to edit the state. The JavaScript can write directly to the console object with three levels of severity.

***

Blackbird

Blackbird is a stand-alone library that pops-up a separate console window that is looking quite elegant. Four levels of bugs can be set and user can either turn messages on or off. A profiler is ready to time the routines on the local browser.

***

Feel free to comment this blog post and let us know if you have used these (or similar) tools in your workflow and you can also share other tools you find useful. Please share your insights and experience.

Comments are closed.