10 HTML5, CSS3 Tricks That Web Geeks Will Love

The web is a huge playground nowadays and the competition is huge. These tricks could give your website an edge.

HTML5 and CSS3 are the two foremost tools for web geeks nowadays. In case you had a doubt about the same then here's how. These 10 web tricks will show you exactly how powerful these two languages can be. Take a look, you might find something useful for your own websites.

1. Pure CSS3 AT-AT: The animation here has been created without any coding. No programming languages have been used for this. It doesn’t do anything special, but you can use such a trick to make your website more attractive.

2. Keylight: This is a nifty trick. What happens here is you click on the background to create small dots and based on the placement of the dot, a tone is played. Multiple dots make a full track. Further, once you’re done, you can share your track. How? Just copy the URL and send it to whoever you want to share it with. Your track is saved in the URL only.

3. CSS3 Man: This is another animation that doesn’t use Flash or any other similar platform.

4. Sinuious: This one is a simple game that can be addictive for kids. You have to avoid hitting the red dots, while picking up power-ups on the way. The more you can avoid, better will be your score.

5. Cubescape: This is all about cubes. Click on the screen to place the cubes wherever you want them. You can choose different colours for the cubes, move them and edit them. When you’re finished, you can watch an animation of what you just did.

6. Darkroom: This is actually one of the more useful tricks in this list. While the others are for fun, Darkroom actually works as a photo editor and comes with a number of editing tools along with an easy interface. You can edit brightness, contrast, exposure, tin/temperature, saturation, colour blindness simulation, red-eye and other aspects of your picture. You can do this to images that are saved on your hard drive.

7. Apple Gallery Demo: From the makers of the iPhone, this is a photo browser that lets you rotate images across the page, through 3D space etc.

8. The Wildnerness Downtown: You have probably already heard of this experiment. This one asks you for your hometown and then creates a video using three things: Google Maps, CSS3 and HTML5.

9. Water Type: This is another nifty trick. It asks you to type in a message and it appears as if it’s being created out of water.

10. Destructive Video: You see a video in this one, but when you click on the video it blows up. Interestingly, the video is still playing. Stop for a few seconds and the video will automatically reintegrate.

Author : Shivam Kotwalia, CodeKill

15 Important JavaScript Tools For HTML5 Generation

Are you fascinated by jQuery? Well, there are plenty of other Java Script libraries worth checking out offering new features.

JQuery is an awesome JavaScript as it is easy to use. But there are plenty of other JavaScript libraries worth checking out. Some work like jQuery, simplifying basic chores of manipulating the DOM, offering their own advantages. Some have new features for animation, data visualization, or other niches.

Here are 15 JavaScript libraries that are worth adding to your toolset.

• YUI (Yahoo User Inferface): It was the first big, cross-browser toolsets released as open source, and remains one of the biggest and most fertile. Yahoo started its 3rd version in 2009, and both versions 2 and 3 continue to get better. The collection of charts, widgets, and other tools has more variety than almost any other JavaScript library.

• Mashi: One of the stated goals of HTML5, is to replace the Flash plug-in, the gold standard for making sprites and letters dance across the screen. This change is slowly coming as the gaming and presentation industries start to duplicate some of the sophisticated tools available. Mashi is an impressive example of how the sprites can be set in motion offering more than several dozen standard easing functions for moving sprites along a timeline.

• MooTools: Like jQuery and YUI, MooTools offers nice, browser-independent shorthand for manipulating arrays, divs, spans. Its custom library construction tool lets you select the functions you want. Check some boxes and get an entirely optimized version of MooTools with the functions you need and none of the bloat you don't.

• pp3Dico: The list of game engines for the browser is long and growing as the JavaScript canvas object is better established and relatively consistent. The results don't look as nice as Flash but the gap will reduce. If you like board games, you'll like the three-dimensional, orthographic views of game boards from pp3Diso. It takes just a few lines of code to set them up.

• VideoForEverybody: This is like sticking a video tag into your HTML. The behavior of many supposedly standard-compliant browsers is different enough if you try to support them all. A number of good HTML5 libraries let you write standard HTML5 video tags that will be replaced with Flash or QuickTime if the browser isn't ready to handle your video. This tool offers one of the better libraries, filled with features that operate in the background to smooth delivery on older browsers like IE8.

• Raphaël: There are many terabytes of data just waiting for people to come along. The first generation of HTML5 libraries was more focused on building forms and generating tables. Now a number of libraries are zeroing in on building charts and drawing graphs on the 'canvas' object. You'll find plenty of great options for basic line graphs, bar graphs, and combinations. This is a small JavaScript library that should simplify your work with vector graphics on the Web.

• JSCharts: Among the libraries aimed at chart building JSCharts allows you to create charts in different templates like bar charts, pie charts, or simple line graphs.

• Flot: This produces graphical plots of arbitrary datasets on-the-fly client-side, and it includes interactive features like zooming and mouse tracking.

• Protovis: Some libraries go further for data visualization. The collection of demos for Protovis and D3, a name in shorthand for Data Driven Documents show how sophisticated constructions like Voronoi diagrams and network graphs can illustrate more than the up and down of some value.

• Simile Widgets: These offer a different collection of views for data visualization and are more focused on maps and timelines. Each of these data visualization projects illustrate how you can come up with good ways of turning data into pictures that can help you absorb large volumes of information quickly and efficiently.

• Tile5: Most use the big mapping libraries for standard jobs like showing street addresses. But if you want to change the rendering or fiddle with layers in ways the big libraries don't allow, this can pull the mapping tiles from such sources as GeoCommons, and lay them out. Thus, you can shove them around just like the maps from Google, Mapquest, or Yahoo. But you can do more. The animation operation can change any of the parameters of the display. This is usually used for panning across the map and landing in one spot.

• jQuery Mobile: As mobile browsers begin to dominate the Web, it is important to package the information in a form that's easier to browse on smartphones and tablets. However, it is not easy when the fingers are fat and the eyes can't focus on small fonts. jQuery Mobile, Jo, and Sencha Touch offer touch-friendly menus that dig down into data structures and present the information for the small screen.

• HTML5SQL: You would never want to store a lot of data, so local databases were invented. Taking advantage of them is getting easier as new libraries simplify the details of interacting with the API. HTML5SQL will feed relatively simple SQL statements to the database, allowing you to create tables, fill them with data, and then query them. You'll spend more time crafting your SQL than your JavaScript.

• TaffyDB: If you don't want to think in SQL while writing JavaScript,TaffyDB accomplishes much of the same tabular querying with JSON, and the queries and the updates can be chained together.

• Firebug: One of the biggest challenges for JavaScript programmers is to build larger applications as that means more of debugging. While you can get by with embedding alert statements in smaller pages, larger ones require more structure for the debugging information. Firebug, an extension for Firefox, offers an elaborate debugging platform, including conditional breakpoints and the ability to edit the state. The JavaScript can write directly to the console object with three levels of severity.


Shivam Kotwalia, CodeKill