Open Source Resources for Web Application Developers

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly.

WebDesignerWall has written a tutorial: CSS3 Image Styles, which showed us how much more we can do with the background-image CSS trick. He has also showed us how to use box-shadow, border-radius and transition to create various image styles.

Demo: http://webdesignerwall.com/demo/css3-image-styles/

• 0 Comments

Dragging and dropping files from your desktop to a browser is one of the ultimate goals for web application integration. Article: How to Use HTML5 File Drag & Drop, is the first in a four-part series of posts which describes how to:enable file dragging and dropping onto a web page element, analyze dropped files in JavaScript, load and parse files on the client.

And then it showed us how to asynchronously upload files to the server using XMLHttpRequest2, show a graphical progress bar while the upload occurs, and also use progressive enhancement to ensure your file upload form works in any browser.

Requirements: Javascript Framework
Demo: http://www.sitepoint.com/html5-file-drag-and-drop/
License: License Free

• 0 Comments

PayPal is the most popular platform for receiving online payments today. The ease of opening a PayPal account and receiving payments compared to opening a merchant account with a traditional payment gateway is probably the number one reason for its popularity, with a close second being the comprehensive API that PayPal provides for its payment services.

SmashingMagazine has published a really useful article: Getting Started With The PayPal API for building E-Commerce sites or Web Applications. In the article, they will break down some of the techniques and approaches to working with the PayPal API, in order to make integration and troubleshooting simpler and easier.

Source: Getting Started With The PayPal API

• 0 Comments

BundleHunt has just begun its two weeklong software bundle sale with more great apps for Mac OS X and an awesome set of Design goodies. Featuring 11 popular Mac OS X applications and great quality design resources normally valued at over $450 for just $49.99 at a 89% discount.

There’re some great apps here that almost anyone should find tempting including: LaunchBar, ColorSchemer Studio 2, WriteRoom, Seamless Studio, Divvy, SmashingMagazine 4 new e-books, Tumult Hype, ThemeTrust 3 WordPress themes, Xslimmer, Geomicons Iconset and TN3 Gallery.

In all, there are 11 applications and products, all for an amazing price – $49.99. You can also join their new affiliate system in order to have a chance to win $500 in cash too.

Source: BundleHunt 5

• 1 Comment

Addy Osmani has written a really nice article to discuss an effective set of Patterns For Large-Scale JavaScript Application Architecture. Large-scale JavaScript apps are non-trivial applications requiring significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser.

If working on a significantly large JavaScript application, remember to dedicate sufficient time to planning the underlying architecture that makes the most sense. It’s often more complex than you may initially imagine. Take a look at this great article, I am sure you will learnt a lot too.

Source: Patterns For Large-Scale JavaScript Application Architecture

• 0 Comments

Web browsers are probably the most widely used software. HTML5Rocks will explain How Browsers Work: Behind the Scenes of Modern Web Browsers. We will see what happens when you type google.com in the address bar until you see the Google page on the browser screen.

As a web developer, learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices. While this is a rather lengthy document, we recommend you spend some time digging in; we guarantee you’ll be glad you did.

Source: How Browsers Work: Behind the Scenes of Modern Web Browsers

• 0 Comments

HTML5 and CSS3 brings loads of new features and functionality to the modern web. The Expressive Web is a project with the goal of creating both a resource and showcase that highlights some of the most creative and expressive features being added to the web today.

In addition to highlighting and providing information on twelve new HTML5 and CSS3 features, the site itself makes extensive use of new features such as CSS3 transitions, CSS3 transforms, web storage and more to provide a visually compelling resource for learning more about HTML5 and CSS3.

Requirements: HTML5 and CSS3 Browser Support
Demo: http://beta.theexpressiveweb.com/
License: License Free

• 0 Comments

The jQuery documentation is great, very complete, nicely written and with a lot of examples and demos. However, it is difficult to find the right documentation for what we search for. Try to search for the .is() function for example. Over 100 matches before the actual function we are looking for. And it is a fixed layout.

jQAPI is an Alternative jQuery Documentation, which is very fast and slick. The navigation becomes much more easier. And the style is clean and comfortable to use. In my opinion, it should be the best alternative jQuery documentation out there.

Source: http://jqapi.com/

• 2 Comments

We always wanted to know the comparison of numbers among the most popular Javascript frameworks and web applications developed by those frameworks. Here is an infographic of Javascript Frameworks and jQuery. It includes jQuery, Mootools, Prototype, YUI, Dojo, Extjs and etc.

From the infographic, you can get an idea of how many installations of those frameworks have been measured over the last month. It is also interesting to know that Version 1.3.2 is the most popular version of jQuery at the moment.

Click to enlarge.

(more…)

• 9 Comments

Do you like GitHub’s Tree Slider? The new HTML5 History API (which really has nothing to do with HTML – it’s a JavaScript API) allows us to manage the URL changes while CSS3 transitions handle the sliding. Permalinks are always maintained, your back button works as expected, and it’s much faster than waiting for a full page load.

Take a look at The Tree Slider by GitHub, to see how to implement that. Basically they intercept your click, call pushState() to change the browser’s URL, load in data with Ajax, then slide over to it.

Source: https://github.com/blog/760-the-tree-slider

• 0 Comments