Open Source Resources for Web Application Developers

Laker is a compendium of files, styles and tips for designing digital publications in HTML5. This development guide shall help you solving some of the common problems when designing and building a digital publication with HTML5. It provides you with all information about files, scripts, styles etc. used in Laker.

Laker uses a customized version of the “Baker ebook framework” for producing an iOS app. It basically reads a bunch of HTML files and displays them one after another. Designing pages and adding interactivity is all done in HTML5. That makes it more accessible and cheap to develop, because you do not need any proprietary software.

Requirements: -
Demo: http://www.lakercompendium.com/
License: License Free

• 1 Comment

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

WhatFont Tool can easily get font information about the text you are hovering on. There is a Bookmarklet and Chrome Extension available for download. I am sure it will make web designer’s life much easier.

Requirements: -
Demo: http://chengyinliu.com/whatfont.html
License: License Free

• 1 Comment

With the increasing demand for unique mid-screen devices, it is becoming an even more arduous task to keep all of the device resolutions and screen sizes straight. So Punchcut has packaged up their Toolset For Managing Screen Resolutions, that help them stay current and they are offering it for download.

It contains a collection of Photoshop CS5 marquee-tool presets for common screen resolutions. These cover both fixed-screen resolution sizes and ratios for less common resolutions that fall within standard ratios. It also contains a collection of layered Photoshop CS5 PSDs each providing common devices for comping and design presentations.

Requirements: -
Demo: http://punchcut.com/perspectives/expanding-universe-toolset…
License: License Free

• 0 Comments

Box-shadow is a pretty powerful property in modern browsers. With just six little values, you can make some really neat stuff. How much neat stuff, you ask? The result is 39 Ridiculous Things To Do With CSS3 Box Shadows that, due to whatever issues, can only be viewed in Chrome 11 or better.

You can navigate with the arrow keys, and he has moved the CSS for each object into the object HTML, which should make it easier to look at particular effects.

Requirements: Chrome Browser
Demo: http://www.viget.com/uploads/file/boxshadows/
License: License Free

• 0 Comments

Speakker is a crossbrowser Audio solution featuring HTML5. It comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors and two different button sets for light and dark themes. Easy to set up. Just a few lines of Javascript and a quantum CSS.

You can also check out HTML5 Music Portfolio Template with jQuery. The idea is to create an artist portfolio with a discography line up and HTML5 audio player jPlayer. The artist albums are shown using the jCarousel plugin and the user can add song samples to the play list and reorder the songs by dragging them.

Requirements: jQuery Framework
Demo: http://www.speakker.com/demo/
License: GPL License
Demo: http://tympanus.net/Development/MusicPortfolioTemplate/
License: License Free

• 1 Comment

Having been inspired to get ‘Hardboiled’, Tom Kenny has started playing around with a few cool techniques and exploring how to make the content accessible in less capable browsers while giving the best possible experiences to the ones that support the latest advancements in CSS.

He has Create a CSS3 Image Gallery with a 3D Lightbox Animation by taking Benjamin’s CSS lightbox gallery and built upon by adding a few hover effects for the gallery grid itself and a 3D rotation for the lightbox content, all with the use of CSS.

Requirements: jQuery Framework
Demo: http://inspectelement.com/demos/css3/3dgallery/
License: License Free

• 1 Comment

Three.js is a lightweight Javascript 3D Engine with a very low level of complexity – in other words, for dummies. The engine can render to the typical 2D , the new WebGL 3D , and . With 20 lines of code, you can easily create a camera, then create a scene, add a cube on it, create a renderer and add its viewport in the document.body element.

Requirements: -
Demo: https://github.com/mrdoob/three.js/
License: License Free

• 2 Comments

Nick La has written a detail tutorial on how to create an Animated Scroll to Top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It checks if the scrollbar top position is greater than certain value, then fade in the scroll to top button. Upon the link is clicked, it scrolls the page to the top.

Note the back to top button is linking to anchor #top which is the ID of the <body> tag. Technically speaking you don’t need to assign any anchor link because jQuery can scroll the page to any position. However, it is nice to include it because it provides a fallback if Javascript is not supported.

Requirements: jQuery Framework
Demo: http://webdesignerwall.com/tutorials/animated-scroll-to-top
License: License Free

• 0 Comments

When working with events in Javascript, it is often easy to loose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. If things go wrong, it can be difficult to trace down.

It is due to this Allan Jardine has put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.

Requirements: -
Demo: http://www.sprymedia.co.uk/article/Visual+Event
License: License Free

• 2 Comments

diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements.

diagonalFade is great for inventory or anything with a large amount of items ordered in a grid. diagonalFade has been tested in all modern browser’s with jQuery 1.3.2. All you have to do is import it, specify the container to which the group of items resides.

Requirements: jQuery Framework
Demo: http://jonobr1.github.com/diagonalFade/
License: License Free

• 3 Comments