Open Source Resources for Web Application Developers

I would like to share 25 Most Useful Blogs for Web Design and Development. Almost all of them are daily updated, and cover a wide range of topics including inspiration, design trends, tutorials, interviews, website showcase, programming techniques and resources. Add them all to your RSS reader and receive these useful information every day.

Subscribe to all of them by importing this OPML file (Right-click and Save as)

GoMediaZine is a group of guys and girls who are passionate about art and graphic design. The blog filled with lots of helpful tutorials and advice about business and design. (RSS)

WebDesignerWall serves as Nick La’s public blog where he posts his design ideas, tutorials, and talk about modern web design trends. (RSS)

Veerle Pieters is a graphic/web designer living in Belgium. Veerle’s Blog is an online source for topics ranging from XHTML/CSS to graphic design tips. (RSS)

Fubiz site is focused on the subjects of the graphic world. You can get some really inspiring and creative pictures from Fubiz. (RSS)

AdGoodness showcase only the best advertising and design around the globe. This site is there to start a conversation, to inspire, to enjoy great work, or to just talk about what your views are. (RSS) (more…)

• 208 Comments

Google Ventures seeks to discover and grow great companies, they believe in the power of entrepreneurs to do amazing things. Google Ventures is broadly interested in startups in industries including consumer Internet, software, hardware, clean-tech, bio-tech, health care and others.

They invest anywhere from seed funding to tens of millions of dollars and embrace the challenge of helping young companies grow from the garage to global relevance. They’re looking for entrepreneurs who are tackling problems in creative and innovative ways. Are you one of them?

Source: http://www.google.com/ventures/

• 1 Comment

WebKreation has showed us how to create a Sliding Login Panel using Mootools. Recently, he has improved both the design and functionalities of the script and released a Nice and Clean Sliding Login Panel in jQuery this time. The panel overlaps content instead of pushing the content down. Although the script is really simple with the basic jQuery “SlideUp” and “SlideDown” effect, the design of the panel looks really neat and pretty. You may find it useful on some of your projects.

Requirements: IE6, IE7, Firefox, Safari, Opera and Chrome
Demo: http://web-kreation.com/demos/Sliding_login_panel_jquery/
License: License Free

• 6 Comments

Marco has created a Polaroid Photo Viewer with CSS3 and jQuery by combining the CSS3 Box Shadow and Rotate properties. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s randomly rotated to the left or the right.

Sadly, CSS3 and HTML5 aren’t the standards yet. Not all modern browsers will be able to show off the full effect. It only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. If you are interested in creating a Polaroid Gallery, you can also look at the Drag and Drop Polaroid Photo Gallery in Flash?

Requirements: Safari and Google Chrome
Demo: http://demo.marcofolio.net/polaroid_photo_viewer/
License: License Free

• 3 Comments

There are many fantastic javascript/AJAX solutions out there to view a larger version of an image by displaying it as a in-page pop-up or lightbox pop-up. It is rare to visit a website with a photo gallery that does not already utilize one of these solutions.

So why not make it a standard? Why not let the browsers take care of the heavy lifting rather than us web developers via javascript? Drew Wilson proposed adding a fullsize attribute to the <IMG> tag. By which you can references a larger (or fullsize) version of the SRC image. Browsers could then include native support to display the fullsize image in a pop-up. You can vote for Fullsize and add your name to the list of those who support this Fullsize idea.

Even though Fullsize is not currently in the next HTML spec yet, you can still get Fullsize jQuery plugin now. Since there is no fullsize attribute for the <IMG> tag yet, he is using the longdesc attribute instead. longdesc is a completely valid image attribute and is meant to contain a URL to a description of the image. The Fullsize jQuery plug-in is super easy to use, and provides a kick start to standardizing the way image pop-ups look and work.

Requirements: Safari, Firefox, Chrome, Opera, IE 8, IE 7, and IE 6
Demo: http://www.addfullsize.com/
License: MIT, GPL License

• 10 Comments

Wikirank shows you what people are reading on Wikipedia. It’s based on the actual usage data from the Wikipedia servers, which the Wikimedia foundation makes available as a public service. They take that data, process it, and give it back to you in a format that’s easy to use and share. Wikirank reveals emerging trends, and lets you embed relevant charts in blog posts and on social media sites.

From a technical perspective, the charts on Wikirank are based on logs from Wikipedia’s HTTP Squid proxy servers. That means every single page load is recorded, whether initiated by a human with a browser or a Web spider crawling through. Therefore, the numbers for a topic on a particular day can’t be considered absolute impressions the way, say, an ad server might count them.

The data of Wikirank indicates relative increases or decreases, so the shape of the charts is more important than the specific number of views. Comparisons are even more interesting, as relative interest in multiple topics can be ranked.

Requirements: -
Demo: http://wikirank.com
License: GFDL License

• 1 Comment

GoView made screen recordings easy. You can start recording your computer’s screen and audio with just two clicks. Snipping out unwanted segments is as simple as using a pair of scissors. You can also insert title slides to add polish and act as section dividers. After all, your recording is instantly ready to be viewed an share online. It’s quick. It’s easy. And it’s free.

Requirements: Firefox 2.0+, Internet Explorer 6.0, 7.0
Demo: http://goview.com/
License: License Free

• 6 Comments

OmniGrid is an advanced DataGrid based on Mootools, developed by Marko Šantić from Omnisdata Ltd. It is inspired by two similar components: FlexGrid jQuery and phatfusion:sortableTable and partly use their source code. It’s developed because of lack of powerful DataGrid for Mootools 1.2 library. OmniGrid is licensed under a Creative Commons Attribution 3.0 Unported License.

Requirements: Mootools Framework
Demo: http://www.omnisdata.com/omnigrid/
License: Creative Commons 3.0 License

• 7 Comments

TinEye is a reverse image search engine. You can submit an image to TinEye to find out where it came from, how it is being used, if modified versions of the image exist, or to find higher resolution versions. TinEye is the first image search engine on the web to use image identification technology rather than keywords, metadata or watermarks.

When you submit an image to be searched, TinEye creates a unique and compact digital signature or ‘fingerprint’ for it, then compares this fingerprint to every other image in their index to retrieve matches. TinEye can even find a partial fingerprint match.

TinEye does not typically find similar images; it finds exact matches including those that have been cropped, edited or resized. I have found TinEye very useful, you can easily find out who has stolen your images from your website or portfolio. You can see how powerful TinEye is by checking out their search examples.

Source: http://tineye.com/

• 10 Comments

Cufón is similar to Typeface.js which aims to become a worthy alternative to sIFR, and despite its merits still remains painfully tricky to set up and use. Cufón consists of two individual parts as well – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.

It works on every major browser on the market. There is near-zero configuration needed for standard use cases. And it is fast, even for sufficiently large amounts of text.

Requirements: Canvas and VML
Demo: http://cameronmoll.com/archives/2009/03/cufon_font_embedding/
License: License Free

• 9 Comments