Design Inspiration Roundup

10 UI Design Patterns You Should Be Paying Attention To:
In short, design patterns are solutions to recurring problems. By extension, UI design patterns are solutions to common user interface problems. This article goes over 10 interesting UI design patterns that you can use in your own projects. In fact, you may already be using them now without knowing it.

Pattern Tap:
Pattern Tap is here to satisfy and encourage the inspiration needs of my interface design peers and peeps. We aspire to be the one stop pattern shop for your next inspiration need.

40+ Helpful Resources On User Interface Design Patterns:
In this article, we share with you the best of the best, cream of the crop sites, galleries, online publications, and libraries devoted to sharing information and exploring concepts pertaining to User Interface design patterns.

Flickr Design Patterns:
A great collection of design patterns on Flickr that are organized by category.

UI Pattern Factory:
UI Pattern Factory is a mix of user interface design pattern library and UI gallery. It is a place to find user interface best practices, get design inspiration, and share design solutions with others

Open Source Design Pattern Library:
The Open Source Design Pattern Library is a place where individuals and organizations can share, collaborate, and discuss design patterns.

Yahoo! Design Pattern Library:
Welcome to the Yahoo! Design Pattern Library. We're thrilled to be sharing patterns and code with the web design and development community, we hope it's useful, and we look forward to your feedback.

User Interface Design Patterns:
Recurring solutions to solve common problems.

15 jQuery Plugins To Create An User Friendly Tooltip:
Tooltip is a good way to show extra information when user hovers the cursor over an element. The “hover box” will appear when the mouse hover in, and disappear when the mouse hover out. If the tooltip is being used appropriately, it can improve our site’s user friendly level, and also save us a lot of spaces. Today, we are going to see 15 jQuery plugins to create an user friendly tooltip.

25+ jQuery Plugins that enhance and beautify HTML form elements:
...collected over 25 jQuery plugins that enhance and beautify html form elements. Some of them add more capabilities that able to increase usability and user friendliness to a website.

20 Excellent JavaScript Navigation Techniques and Examples:
In this article you’ll discover some terrific and unique JavaScript-powered navigation techniques and examples.

Flip Book engine

Entirely customizable. Supports Zoom, print and download options. Can be configured either using HTML code, or via an external XML file.

I tend to not like effects like this on a website but can see where some website may benefit from it.

Link:
http://page-flip.com/

Easily create a Favicon from any image

Want to display your own logo on the browser address bar and browser tabs? Simply select a picture, logo or other graphic (of any size / resolution) for the "Image to Use" and click "Generate FavIcon.ico"

A favicon is that small icon that appears in the address bar of a browser for the website your visiting.

Link:
http://www.html-kit.com/favicon/

Easily add Custom Google search to your website

Add the Custom Search element, and let visitors search your site and other sites you choose using the power of Google Custom Search. If you like, earn revenue from your site with AdSense for Search.

Try it out:
http://veign.com/help/custom-google-search.php


Link:
http://www.google.com/webelements/customsearch/

Create mockups fast and efficiently with Balsamiq

Using Balsamiq Mockups feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

With 75 pre-built controls to choose from....

Link:
http://www.balsamiq.com/products/mockups

Veign releases two new online tools

Keeping in with the spirit of Veign, I have released two new free tools. This adds to Veign's collection of 18+ free online tools and applications.

Site Check: Site Check saves you time by compiling a list of websites, with your URL pre-filled in, to check your website in. No need to fill in your website multiple times. This makes manually checking your website a much easier process.

Domain Age Check: Return the age of domain.

As always, if you have any idea for a tool feel free to contact Veign.

Page Speed release by Google

Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.

Page Speed performs several tests on a site's web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Webmasters who run Page Speed on their pages get a set of scores for each page, as well as helpful suggestions on how to improve its performance.

Sounds like the ySlow addin released by Yahoo.

Link:
http://code.google.com/speed/page-speed/

Determine why a web page loads slowly with YSlow

YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites.

Link:
https://addons.mozilla.org/en-US/firefox/addon/5369

Get a detailed website check from Veign

Veign is now providing a service where we do a complete website check / analysis. From identifying website problems before your visitors do to search engine optimization guideline checks to ensure your site is ready for the major search engines, our report will give you the knowledge to fix those pesky problems that are often difficult to track down.

Link:
http://www.veign.com/website-check.php

Easily add ratings to your website

You can easily add a rating system to your website with JS-Kit. This is a great way to get immediate feedback on your website products, listings or posts from your visitors. Also, if you haven't heard Google will be displaying Rich Snippets which may include ratings. So, get your ratings now and possibly enhance your listings in a Google Search Result snippet.

From JS-Kit:

The best content on most web sites and blogs gets buried as new content is added. JS-Kit's Ratings service solves this problem by uncovering and displaying your top content. It lets your visitors rate your merchandise items, services, pictures, blog entries, or any other objects on your site.

The service can be used in two modes, either as a 5-star rating widget or a thumb-up/-down widget and is incredibly easy to install on any static or dynamic web page.

Link:
http://js-kit.com/ratings/

CSS Sprites

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them:
Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one.

CSS Sprites: Image Slicing’s Kiss of Death:
Specifically, we’re going to replace old-school image slicing and dicing (and the necessary JavaScript) with a CSS solution. And because of the way CSS works, we’re going to take it further: by building a grid of images and devising a way to get each individual cell out of the grid, we can store all buttons/navigation items/whatever we wish in a single master image file, along with the associated “before” and “after” link states.

CSS Sprite Generator:
This tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.

25 Magento Templates

Magento is a popular open source e-commerce software platform that has a modular architecture and is extremely flexible. It comes with a number of online shop maintenance capabilities. It is also simple to configure and easy to customize. And despite the fact that it was launched just last year, it has been gaining more and more popularity among Web designers and e-business owners.

Very good collection.

Link
http://www.smashingmagazine.com/...

Convert Audio and Video from a website

FFmpeg is a complete, cross-platform solution to record, convert and stream audio and video. It includes libavcodec - the leading audio/video codec library.

This is how websites setup tools for performing audio and video conversions. Want to have users upload video that is then converted to a Flash video? FFmpeg can handle it.

Link:
http://ffmpeg.mplayerhq.hu/index.html

Microsoft Sync Framework

Introducing the Microsoft Sync Framework – a comprehensive synchronization platform enabling collaboration and offline for applications, services and devices with support for any data type, any data store, any transfer protocol, and network topology.

Link:
http://msdn.microsoft.com/en-us/sync/default.aspx

Create great looking word clouds with Wordle

Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. The images you create with Wordle are yours to use however you like. You can print them out, or save them to the Wordle gallery to share with your friends.

Link:
http://www.wordle.net/

Easily add Flash charts to your website with Open Flash Chart

Open Flash Chart is a dead simple way to add featrure rich Flash charts to your website, with your data through one of many technologies (like PHP).

Open Flash Chart offers:

• Tooltips
• Re-size the charts
• Save the chart as an image
• Highlight or emphasize one (or many) points
• Can be used with technologies like PHP, Perl, Python, Ruby, .NET, Google Web Toolkit and JAVA
  

Link:
http://teethgrinder.co.uk/open-flash-chart-2

Create random number sets at Research Randomizer

Research Randomizer is designed for researchers and students who want a quick way to generate random numbers or assign participants to experimental conditions. Research Randomizer can be used in a wide variety of situations, including psychology experiments, medical trials, and survey research. The program uses a JavaScript random number generator to produce customized sets of random numbers.

Link:
http://www.randomizer.org/

Create a form that stores data in a Google Spreadsheet

A tutorial video on how to use forms in Google Spreadsheets to create simple surveys and quizzes.

Get IE8 now and make my life more difficult

Yup, that's right, IE8 is available today and that means I have to support another browser when developing websites. I just wish IE6's market share would drop enough so I could drop it from my list of supported browsers.

Specify your canonical at the site level

Carpe diem on any duplicate content worries: we now support a format that allows you to publicly specify your preferred version of a URL. If your site has identical or vastly similar content that's accessible through multiple URLs, this format provides you with more control over the URL returned in search results. It also helps to make sure that properties such as link popularity are consolidated to your preferred version.

This is great. Google is giving web developers much more control over sites that they push out. No longer do you have to go into Webmaster Tools to fix canonical issues with your website.

Actually, this method gives you much more control. In summary, you can have duplicate content on your website and specify, through a special tag, which is the page that Google should be indexing. This means you can easily filter out Print version of pages or pages with additional query parameters.

Link:
http://googlewebmastercentral.blogspot.com...

Count lines of code in a project with CLOC

cloc counts blank lines, comment lines, and physical lines of source code in many programming languages. It is written entirely in Perl with no dependencies outside the standard distribution of Perl v5.6 and higher (code from some external modules is embedded within cloc) and so is quite portable.

Works great for comparing two projects. Recently I went through a code refactor on a project and I needed to give some information back to the client. CLOC made it simple to give a report as to the before and after counts. The before was approx 240K lines of code and the after was about 81K with zero changes to functionality.

Link:
http://cloc.sourceforge.net/

jQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

Link:
http://www.mind-projects.it/projects/jqzoom/

Symfony PHP framework

It provides an architecture, components and tools for developers to build complex web applications faster. Choosing symfony allows you to release your applications earlier, host and scale them without problem, and maintain them over time with no surprise.

Symfony is based on experience. It does not reinvent the wheel: it uses most of the best practices of web development and integrates some great third-party libraries.

Link:
http://www.symfony-project.org/

Top 25 Most Dangerous Programming Errors

The 2009 CWE/SANS Top 25 Most Dangerous Programming Errors is a list of the most significant programming errors that can lead to serious software vulnerabilities. They occur frequently, are often easy to find, and easy to exploit. They are dangerous because they will frequently allow attackers to completely take over the software, steal data, or prevent the software from working at all.

Link:
http://cwe.mitre.org/top25/

Help a cause and get some great web development information

SitePoint is having a sale on their PDFs for website design and development that will let you choose 5 titles for the price of 1 ($29.95) with 100% of the proceeds going to a relief fund for the Australian fires. The reason is SitePoint is headquartered in Melbourne and they want to do what they can to help out.

Here are the titles you can choose from:

• The Principles of Beautiful Web Design
• The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques
• Everything You Know About CSS Is Wrong!
• The Art & Science of CSS
• The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition
• The Ultimate CSS Reference
• Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition
• The Ultimate HTML Reference
• HTML Utopia: Designing Without Tables Using CSS, 2nd Edition
• Build Your Own Standards Compliant Website Using Dreamweaver 8
• Simply JavaScript
• The Art & Science Of JavaScript
• Build Your Own AJAX Web Applications
• DHTML Utopia: Modern Web Design Using JavaScript & DOM
• The Flash Anthology: Cool Effects & Practical ActionScript
• Simply SQL
• Simply Rails 2
• The PHP Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition
• Build Your Own Database Driven Website Using PHP & MySQL, 3rd ed.
• No Nonsense XML Web Development With PHP
• Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition
• The ASP.NET 2.0 Anthology: 101 Essential Tips, Tricks & Hacks
• Run Your Own Web Server Using Linux & Apache
• The Principles Of Project Management
• The Principles Of Successful Freelancing
• Deliver First Class Web Sites: 101 Essential Checklists

Link:
http://5for1.aws.sitepoint.com/

Convert VB to C# or C# to VB

I really don't have much need for this anymore as most of my time is spent developing in PHP but figured someone out there may need it or find it useful.

If you use it leave a comment on how well it worked for you.

Link:
http://converter.telerik.com/

50 Extremely Useful PHP Tools

This post presents 50 useful PHP tools that can significantly improve your programming workflow. Among other things, you’ll find a plethora of libraries and classes that aid in debugging, testing, profiling and code-authoring in PHP.

Link:
http://www.smashingmagazine.com/...

Looking to clone a popular website?

Then check out the large collection of PHP clones of popular websites. This is a great collection of some of the best clones around mixed in with some of the worst so make sure you read up before installing and going live.

Link:
http://www.scriptcopy.com/

Joomla Developer’s Toolbox

Joomla is a popular free and open-source content management system (CMS) that can be used to power all kinds of websites. After we published developer’s toolboxes for a variety of other CMS’, many readers requested a collection of resources for Joomla users and developers, so here it is. Joomla grew out of the Mambo CMS and has since built a large and loyal group of users, much like the other popular open-source options. What this means for users and developers is that there is a wealth of information and resources available, and in this post we’ll take a look at many of the best.

Link:
http://www.smashingmagazine.com/...

Free Computer Science Classes from Stanford

For the first time in its history, Stanford is offering some of its most popular engineering classes free of charge to students and educators around the world. Stanford Engineering Everywhere (SEE) expands the Stanford experience to students and educators online. A computer and an Internet connection are all you need. View lecture videos, access reading lists and other course handouts, take quizzes and tests, and communicate with other SEE students, all at your convenience.

SEE programming includes one of Stanford’s most popular sequences: the three-course Introduction to Computer Science taken by the majority of Stanford’s undergraduates and seven more advanced courses in artificial intelligence and electrical engineering.

Also, if you didn't know MIT opened up over 1800 of their courses through a program called OpenCourseWare

Link:
http://see.stanford.edu/

Open source programming languages for kids

The past couple of years have seen an explosion of open source programming languages and utilities that are geared toward children. Many of these efforts are based around the idea that, since the days of BASIC, programming environments have become far too complex for untrained minds to wrap themselves around. Some toolkits aim to create entirely new ways of envisioning and creating projects that appeal to younger minds, such as games and animations, while others aim to recreate the "basic"-ness of BASIC in a modern language and environment.

Link:
http://www.linux.com/feature/155203

Extract video and audio from FLV files

Extracts video and audio from FLV files without decompressing or recompressing. The video is saved as AVI (H.263/FLV1 and VP6/VP6F) or raw elementary stream (H.264/AVC). The audio is saved as MP3, AAC (with ADTS headers), or WAV (PCM).

Link:
http://moitah.net/#FLVExtract

emEditor releases version 8

EmEditor Text Editor is a lightweight, yet extendable, easy-to-use text editor for Windows. EmEditor is very customizable, and it supports Unicode and powerful macros. EmEditor now supports very large files - up to 248 GB or 2.1 billion lines! EmEditor is certified for Windows Vista! The x64 Edition is also available! The portable version is also available for USB drive setup!

In this version (8.0) there are many new features including a Large File Controller, Vertical Selection Editing, Binary Editing, Optimized Search and Replace, improved Projects Plug-in, and many more!

emEditor has got to be one of the best text editors I have come across. So much so that it is my main application for writing web development code (HTML, CSS and PHP).

Link:
http://www.emeditor.com/

10 Advanced PHP Tips To Improve Your Programming

This tutorial is aimed at people who are just past the beginning stages of learning PHP and are ready to roll up their sleeves and get their hands dirty with the language. Listed below are 10 excellent techniques that PHP developers should learn and use every time they program. These tips will speed up proficiency and make the code much more responsive, cleaner and more optimized for performance.

Link:
http://www.smashingmagazine.com/...

JavaScript error reporting service with DamnIt

DamnIT is a free service that emails you when a user encounters a JavaScript error in your webpages. DamnIT makes it simple for beta testers to provide useful feedback by prompting them after an error occurs and combining their response with error message, file, line number, and back-trace information. You'll receive detailed automated error information instead of vague bug descriptions.

Link:
https://damnit.jupiterit.com/

7 ways to track your web traffic for free

Awstats
Awstats is a log file analyzer type of web statitics reporting tool. This means the data displayed will be the most accurate and complete than some of the other methods listed. Awstats can provide all the expected information (page views, visitors, hits) plus it can give you bandwidth used, and filesizes of downloads.


CrazyEgg
One of the first to offer Heat Maps which shows where your user are clicking on your website. This alone makes Crazy Egg worth checking out.


FuseStats
Another website offering Heat Maps, which is a color overlay so you can see where your users click, on top of the standard web stat information. They offer a free account, which is why I added it to the list, which can be used for very low traffic websites.


Google Analytics
This, in my opinion, is the gold standard for client side web tracking (not a server log analyzer). Google Analytics provides some of the most powerful tool for tracking your visitors, analyzing your websites traffic flow, checking on goals for your visitors and general overall information provided. Plus they are constantly pushing out new features and I'm sure real-time tracking isn't far behind.


HiStats
Another great option which provides a very user friendly interface (and quite appealing) and provides a hit counter which can be added to your website so your visitors can see how many visits you get. Oh, did I mention they provide real time tracking? Very nice option.


StatCounter
A very popular web stats choice where a small piece of code is embedded in your web pages that handles all the tracking for your visitors. Not as reliable as Awstats but easy to setup, not tied to a server (so you maintain your history) and you can access your stats at anytime from any computer.


The Hit Counter
Looking for a simple, simple to install (2 steps) hit counter for your website? Then The Hit Counter what you need. They have made the creation of a custom hit counter as simple as it can be.

Roundup of JavaScript Techniques

50 Excellent AJAX Tutorials
This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. You’ll find tutorials on working with forms, building shopping carts, creating chat features, working with log-ins and usernames and much more.

Link:
http://www.smashingmagazine.com/...


The Top 40 Free Ajax & Javascript Code for Web Designers