Connect With WRD
feed via e-mail
feed via e-mail

JavaScript, with the rise of Ajax, is definitely a must-know-well for every web designer/developer.

Besides form controls, alerts & similar simple JavaScript usage, you can almost do anything with the help of JavaScript (& Canvas). Some samples are:

  • Drag’n drops
  • Animations
  • CSS manipulations, Ajax & more.

JavaScript Games
And there are JavaScript libraries which make them easier like jQuery, MooTools, Prototype, etc.

For any developer looking for advanced JS techniques, games are a real treasure.

You can easily see examples of animations, interactivity, smart solutions for browser related math functions & so.. And they are definitely a source of inspiration as you sometimes face with a feature that you never thought could be existed.

Also, this is the last month of a busy year & every web designer/developer deserves some fun : ).

So, here are 25 amazing (sometimes not the game itself but how beautifully it’s done) JavaScript games that you’ll love.


Bunny Hunt

Hunting JavaScript Game

A classic hunting game with an easy to play interface.

Make sure you check the source of the website to see how simply it is built with the power of XHTML, CSS & JavaScript.

JavaScript Library: none.


Ajax Game Travians

A character game (like Sims) where you’re a villager.

It is a multiplayer game & totally Ajaxed. You can move your character, communicate with other user & more.

JavaScript Library: xajax.

Digg Attack

Digg JavaScript Game

This is certainly a Web 2.0 game. It is a JavaScript / Canvas 2D Shooter using live data via the Digg API to spawn enemies.

All the images are rendered with Canvas in real-time.

JavaScript Library: none.

Read the rest of this entry »

Styled Menus is a website presenting various free CSS menus.

Menus provided are cross-browser compatible & W3C validated.

Free CSS Navigation

There are currently 20 menus & new ones added regularly.

It is a handy resource to directly use them or to get inspired.

Pixastic is an open source JavaScript image processing library.

It uses HTML5 Canvas element that enables accessing to raw pixel data.

JavaScript Image Effects Library

Supported effects are:

  • desaturation/greyscale
  • invert
  • flipping
  • brightness/contrast adjustment
  • hue/saturation
  • emboss
  • blur & more

There is an image editor built with it & the library is well-documented.

MephoBox is a website displaying quality website interfaces with a well-categorized presentation.

Some of the categories are:

  • 404 errors
  • Sick calendars
  • Top headers
  • Site comments
  • Navigation menus & more

Website Design Inspiration

MephoBox is free to use but anyone can register & add new designs to the collection.

It is definitely a nice & growing inspiration resource for any web designer.

SmartMarkUP is a flexible & lightweight JavaScript library that turns any textarea into a markup editor.

It can be configured to edit HTML, CSS, XML, Wiki syntax & BBCode.

JavaScript Markup Editor

The library is unobtrusive & degrades gracefully if JavaScript is disabled.

SmartMarkUP has a simple and powerful API. Styles can be changed, new markups can be implemented, extra buttons and submenus can be created & more.

It also supports keyboard shortcuts for easier usage & has add-on support like color picker, search-replace, special character picker (and new ones can be created).

Simple Controls Gallery is a slideshow script built with jQuery.

When the slideshow is hovered, a menu with controls fades in. Using the menu, slideshow can be paused/played and browsed with prev-next menus.

jQuery Slideshow

It displays the images from an array that is mentioned in the JavaScript.

This jQuery slideshow can be set to autoplay the images when first opened & can store the last visited image in a cookie to remember the last image viewed.

Christmas (& New Year) is getting closer & many websites will be creating themes for their designs/logos, designing special newsletters, banners & also, lots of materials will be printed.

So, designers are possibly in need of quality Christmas themed design objects.

This is a giant design pack which includes:

  • Photoshop Christmas brushes
  • Free Christmas vectors
  • Christmas-related Photoshop & Illustrator tutorials

Here they are:


Christmas Vector Images


Gift Packs (EPS)

Vector Gift Packs

Vector Santa Claus, Christmas Tree & More

Vector Santa Claus

Christmas Frames (EPS & PDF)

Vector Christmas Frames

Free Cards For Christmas (AI & EPS)

Free Christmas Cards

Read the rest of this entry »

Stacked bar graphs are very helpful when presenting a comparison of data.

This is a stacked bar graph built with CSS (& based on Pure CSS Data Chart).

CSS Stacked Bar Graphs

It uses "definition lists" in the HTML for presenting the data & "unordered lists" for the labels on axes.

Source files can be downloaded from the author’s website & a demo can be found here.

Appcelerator Titanium (now known as TideSDK) is an open source platform that enables you to create rich desktop applications with web technologies like HTML, CSS, Javascript as well as Flash and Silverlight.

Appcelerator SDK is used to create applications or any third-party Ajax library / framework can be used too.

Tip: To make it clear, it is very similar to Adobe AIR but open source.

Appcelerator Titanium

Titanium also comes with a simple command-line interface (CLI) for creating projects and packaging them into an executable.

The platform has a built-in database, direct file system access, desktop notifications & more.

Titanium apps. currently work in Microsoft Windows and Mac OSX.  Linux support is in the roadmap.

DD_belatedPNG is a fresh IE6 PNG fix script with features where other solutions are missing.

It doesn’t use MSIE AlphaImageLoader filter so, it succesfully renders background-repeat and background-position.

IE6 PNG Fix Script

The script also fixes the IE6 grey background problem.

How to use it?

Very simple.

  • Insert the .js file to your code
  • Create another script node
  • Define the class the fix will be applied to, like:
    • DD_belatedPNG.fix('.png_bg');

That’s it.

P.S. It is adviced to use the script only for IE6 with conditional comments.

Uptime Robot