Nick La was trying to style CSS3 border-radius to image element and he realized that Firefox doesn’t display border-radius on images. Then he figured a way to work around it – wrap a span tag around with the original image as a background-image.
And also, Darcy Clarke has written a piece of jQuery code which does the magic tag wrapping automatically. You can view the tutorial on CSS3 Rounded Image With jQuery.
Source: CSS3 Rounded Image with jQuery
Beautiful Photo Stack Gallery with jQuery and CSS3 tells us how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.
We will use jQuery and CSS3 properties for the rotated image effect. We will also use the webkit-box-reflect property in order to mirror the boxes in the album view – check out the demo in Google Chrome or Apple Safari to see this wonderful effect.
Requirements: PHP Framework, jQuery Framework
Demo: http://tympanus.net/Tutorials/PhotoStack/
License: License Free
Alex Marandon has written a comprehensive guide about How to build a web widget (using jQuery). It covers only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily.
The interesting points will be: ensure the widget’s code doesn’t accidentally mess up with the rest of the page, dynamically load external CSS and JavaScript files, bypass browsers’ single-origin policy using JSONP.
Source: http://alexmarandon.com/articles/web_widget_jquery/
Hummingbird lets you see how visitors are interacting with your website in real time. And by “real time” they don’t mean it refreshes every 5 minutes – WebSockets enable Hummingbird to update 20 times per second. Hummingbird is built on top of Node.js, a new javascript web toolkit that can handle large amounts of traffic and many concurrent users.
However, please note that Hummingbird is pre-alpha software. While it shouldn’t screw up your production environment, it’s definitely not yet production ready. In fact, they are still in the process of extracting it from the original app. So check it out, but don’t expect it to fulfill your greatest desires yet.
Requirements: node.js v0.1.96, mongodb
Demo: http://mnutt.github.com/hummingbird/
License: MIT License
Mac-like Icon Dock (v2) is a “Mac OS X” style icon dock, built entirely in XHTML/CSS and with smooth animation using jQuery/JavaScript. As from the demo, and unlike many other icon docks, the navigation works with no JavaScript. This is very important as the website should still be accessible with JavaScript disabled.
Each icon can have a scalable image and a title. As the image is dynamically resized, it is up to the browser to smoothly render the icon. You can also have a look at jqDock or other Fish Eye Menus.
Requirements: All Browsers except IE6
Demo: http://www.aplweb.co.uk/jQuery/Mac_Dock_v2/
License: License Free
At the scale that Facebook operates, a lot of traditional approaches to serving web content break down or simply aren’t practical. The challenge for Facebook’s engineers has been to keep the site up and running smoothly in spite of handling close to half a billion active users.
Pingdom has published an article: Exploring the software behind Facebook, the world’s largest site, which takes a look at some of the software and techniques they use to accomplish that.
Source: http://royal.pingdom.com/2010/06/18/the-software-behind-facebook/
Slippy is a HTML Presentation library written with jQuery, it takes a html file in and plays it in any browser. It is optimal for programming-related talks since it includes a syntax highlighter and is very easy to use since it’s just standard html markup with a few classes to enable specific functions.
If you are making a talk about Javascript, Slippy can even execute your code samples live and displays alert() boxes nicely instead of using the ugly browser dialog, which -I tried it today- works quite well to prove your point interactively.
Requirements: jQuery Framework
Demo: http://slides.seld.be/?file=2010-05-30+Example.html
License: GPL License
Free Wireframe Toolbar Icons is made for interface (gui) desginer. These icons can be used for wireframes and software mockups creation, websites and software applications toolbars and menus including iPhone and iPod apps. You’ll find a set of 8 cursors and 236 icons in black and white color versions. The icons include pagination arrows, ratings and voting controls, social interaction symbols file system and text editor actions.
The entire set totals 244 original icons optimized for 16×16 pixel size and available in 16×16, 32×32 and 48×48 pixel sizes. Royalty Free package includes vector icons in EPS and flash SWF formats for which you have full control to resize without loss of fidelity, color, and effects as you please.
Requirements: –
Demo: http://www.gentleface.com/free_icon_set.html
License: Creative Commons License
Millions of entrepreneurs struggle to communicate their ideas on a web product they’re working on. Fast, easy, specific, contextual visual feedback is crucial to creating killer products. Bounce opens up an ability to give visual feedback to everyone. And best of all, it’s free and there is no signup required.
You can make some notes for every screenshot you made on Bounce. Simply click anywhere on your screenshot, and type in what you want to say. You can also change the size and location of your note to highlight exactly what you want. You can share the screenshot easily, at the same time, they can make their own notes, save them, and bounce them!
Requirements: –
Demo: http://www.bounceapp.com/
License: License Free
Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores.
You can easily shift theme coloring, add style, and use our pre-included icons to deliver a phenomenal visual experience. Animate between views using one of our many predefined animations, with loads of configuration options.
Requirements: –
Demo: http://www.sencha.com/
License: GPL 3.0 + FLOSS License
