Web Appers

Advertise here via BSA

Smashing Magazine has just released fantastic St. Valentine’s icon set, which is available in transparent PNGs as well as Photoshop PSDs (128×128 px) and are perfect for any projects you have coming up for St. Valentine’s Day.

Valentine’s icon set is completely free to use for commercial or personal applications without any restrictions.

Requirements: -
Demo: http://www.smashingmagazine.com/2012/02/02/freebie-valentines…
License: License Free

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

psd.js is a Photoshop (PSD) file parser written in Coffeescript/Javascript for both browsers and NodeJS implementations. Given a PSD file, it can parse out information such as image size and color modes, image resources, layer info, image contents, etc.

This implementation is more or less a direct port of pypsd with some help from psdparse. However, this is still a work in progress and is not finished yet. We do not recommend using in production anywhere.

Requirements: -
Demo: http://meltingice.github.com/psd.js/
License: License Free

This article made possible by the rack card printing company with quick turnaround times, Next Day Flyers.

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Bootstrap 2.0 has just released with a lot of new features, rewritten documentation, and use cases to test with the addition of media queries.

They have also added some new components like progress bars, customizable gallery thumbnails and split buttons. Another great new feature are the new glyph icons, that you can use to style your buttons and menus.

Now there are total 12 custom jQuery Plugins for you to enhance Bootstrap. It includes, Modals, Tooltips, Dropdowns, Scrollspy, Carousel and more. All in all a huge update with many exciting features.

Requirements: -
Demo: http://twitter.github.com/bootstrap/
License: Apache License v2.0

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup. It was created using a combination of HTML5/CSS, jQuery and PHP, with some help from the PHP Simple HTML DOM Parser and Uploadify jQuery Plugin.

Requirements: -
Demo: http://bearcss.com/
License: License Free

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

HTML5 Please helps you look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are. So that, you can decide if and how to put each of these features to use.

The recommendations represent the collective knowledge of developers who have been deep in the HTML5 trenches. If you think the recommendation is incorrect, you can edit the recommendation for each feature and send a pull request as well.

Requirements: HTML5 Browser Support
Demo: http://html5please.us/
License: License Free

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Resumable.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes.

Resumable.js allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause and resume uploads without loosing state. Currently, it is limited to Firefox 4+ and Chrome 11+.

Requirements: HTML5 and JavaScript Framework
Demo: https://github.com/23/resumable.js
License: MIT License

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Poshy Tip jQuery Plugin is a tooltip plugin that allows easily creating stylish tooltips. With Poshy Tip you can position the tips relative to the mouse cursor or to the target element and align them in every possible way horizontally and vertically.

Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. By using this callback, you can easily update asynchronously the content of the tooltip after it has been displayed.

Requirements: jQuery Framework
Demo: http://vadikom.com/demos/poshytip/
License: MIT, GPL License

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Jeditable is an in-place editor plugin for jQuery. With few lines of JavaScript code it allows you to click and edit the content of different html elements. User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. New text is sent to webserver and saved. Form becomes normal text again.

You can also get full control of Ajax request. Just submit to function instead of URL. Parameters passed are same as with callback. Jeditable is licensed under the MIT License.

Requirements: jQuery Framework
Demo: http://www.appelsiini.net/projects/jeditable
License: MIT License

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Font.js is a Powerful Font Toolkit for JavaScript. It gives you font loading events using a technique perfected in Mozilla’s pdf.js project, metrics information, and a better version of the canvas element’s measureText method with additional information such as height, bounding box, and leading.

Font.js works by downloading the font data with an AJAX request, parsing out some metadata to determine that it is indeed a valid font file and to pull out the metrics information. Then it inserts an @font-face rule into the page.

Requirements: JavaScript Framework
Demo: http://badassjs.com/post/16355968400/font-js-a-powerful-font…
License: MIT License

Today’s article is brought to you by the fast booklet printing company, Next Day Flyers.

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Rickshaw is a simple framework for drawing charts of time series data on a web page, built on top of Mike Bostock’s delightful D3 library. These charts can be powered by static historical data sets, or living data that continuously updates in real time.

Rickshaw was a JavaScript toolkit for creating interactive time series graphs for Shutterstock. Rickshaw makes every effort to provide help for common problems without obscuring anything underneath it.

Requirements: JavaScriptFramework
Demo: http://shutterstock.github.com/rickshaw/
License: See License

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Whilst we see, read and hear a lot about the new semantic elements in HTML5 we arguably hear far less about the application programming interfaces (APIs) that make up a large part of the specification itself.

In some cases the APIs have been around and implemented for a while, but they’ve never been documented; something which HTML5 has set out to change.

.Net Magazine has published an article: The developer’s guide to the HTML5 APIs, which we’re not going to look at code but instead we’ll focus on describing the APIs, their purpose and progress. So that you will be in the right direction to find out more.

Source: http://www.netmagazine.com/features/developer-s-guide-html5-apis

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Many of us start every HTML project with the same set of HTML and CSS files. We’ve been using these files for a long time. Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it’s time for our best practices to catch up.

HTML5 Reset is a simple set of best practices to get web projects off on the right foot. It includes A style sheet designed to strip initial files from browsers, Analytics and jQuery snippets in place, Meta tags ready for population, Empty mobile and print style sheets, IE-specific classes for simple CSS-targeting, iPhone/iPad/iTouch icon snippets and lots of other keen stuff.

Requirements: -
Demo: http://html5reset.org/
License: BSD License

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Minimit Gallery is a highly customizable Jquery plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states.

Using Minimit Gallery you have more time to focus on the ideation and the dynamics of your interface, all the logic functionality instead is managed by the plugin. It’s designed for advanced Javascript/Jquery programmers because you need to code all the animations and the css of the gallery. It has been tested on IE7+, Firefox, Safari and Chrome.

Requirements: jQuery Framework
Demo: http://www.minimit.com/mg/mg-demo.html
License: MIT License

This post presented by the leading color flyer printing company, Next Day Flyers.

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

jQuery Collapse is a plugin that delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different’t scenarios.

The plugin will gracefully degrade if cookie support is not available. It has been fully tested in IE6+, Firefox3+, Chrome5+, Safari4+, Opera 10+. jQuery-Collapse is designed to be flexible and modular. Options include custom callbacks to satisfy every customization need.

Requirements: jQuery Framework
Demo: http://webcloud.se/code/jQuery-Collapse/
License: MIT, BSD, GPL License

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games (e.g. Cut the Rope) and websites.

It let’s you monitor download status by providing progress and completed events and it lets you prioritize the order in which items are downloaded. You can even tag groups of files and then prioritize downloads or register for events by tag.

Requirements: Javascript Framework
Demo: http://thinkpixellab.com/pxloader/
License: MIT License

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

jquery.mentionsInput is a small, but awesome UI component that allows you to “@mention” someone in a text message, just like you are used to on Facebook or Twitter. This project is written by Kenneth Auchenberg, and started as an internal project at Podio, but has then been open sourced to give it a life in the community.

jquery.mentionsInput has been tested in Firefox 6+, Chrome 15+, and Internet Explorer 8+. jquery.mentionsInput is written as a jQuery extension, so it naturally requires jQuery. In addition to jQuery, it also depends on underscore.js, which is used to simplify stuff a bit. The component is also using the new HTML5 “input” event.

Requirements: jQuery Framework
Demo: http://podio.github.com/jquery-mentions-input/
License: MIT License

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Cut the Rope is an immediate favorite for anyone who plays it. It’s as fun as it is adorable. They have just made this great game available to an even bigger audience by offering it on the web using the power of HTML5.

To do this, Microsoft’s Internet Explorer team partnered with ZeptoLab and the specialists at Pixel Lab to bring Cut the Rope to life in a browser. The end result is an authentic translation of the game for the web, showcasing some of the best that HTML5 has to offer: canvas-rendered graphics, browser-based audio and video, CSS3 styling and the personality of WOFF fonts.

You can play the HTML5 version of Cut the Rope at: www.cuttherope.ie.

Source: http://www.cuttherope.ie/dev/

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Pokki is an application platform for creating desktop applications using HTML5, CSS3 and JavaScript. Pokki uses Chromium internally, meaning layout and rendering is powered by WebKit and JavaScript is powered by V8 – giving you the latest and greatest of HTML5.

Beyond the standard HTML5 features you are accustomed to, Pokki gives you a set special JavaScript APIs and events, a window for your application called a popup, and an invisible background window for notifications.

Pokki also takes care of all the “desktop” stuff you don’t want to think about, like memory management and installers, so you can focus purely on application development. Would you like to have Gmail on your desktop with instant notifications for new mail, quick account switching and a beautiful interface? Or stay notified and quickly access everything you love about Facebook, without having to open a browser? Pokki brings awesome apps to your desktop too!

Source: http://www.pokki.com/

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

Color Thief is a script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen. This script could be useful for sites that sort and search by color.

With Color Thief you can also build a UI that adapts to the colors of an image. For example, you could add color accents to the UI by changing the font or border color depending on what image is currently being displayed in your portfolio.

A recent example of a color adapting UI is seen on Google Chrome’s new home tab. The dominant color of the favicon is used as the bottom border color on the screenshot.

Requirements: JavaScript and Canvas
Demo: http://lokeshdhakar.com/projects/color-thief/
License: Creative Commons 2.5 License

Professional Web Icons for Your Websites and Applications

Advertise here via BSA

There has been some discussion in the past about how/when to use tables in web development. Though, the conclusion is the same: when you’re dealing with tabular data, tables are absolutely required.

Designing a table is a challenge. It’s (mostly) about how easy is your table to read. Red Team Design has written a nice tutorial on how to to create Practical CSS3 Tables with Rounded Corners. Also, jQuery will be used to create fallbacks for older browsers.

Requirements: jQuery Framework and CSS3
Demo: http://www.red-team-design.com/wp-content/uploads/2011/10/practical…
License: License Free

Professional Web Icons for Your Websites and Applications