Fresh Web Development Goodies Bag

Over the last decade web designers managed to come up with a plethora of useful techniques and design solutions that make today's web development process much more straightforward and simple. Some techniques were simply applied to the Web, while others were developed from scratch, helping developers to use off-the-shelf-solutions to problems quicker and in a more elegant way. However, finding little slick tricks to fix your site takes a tremendous amount of time, and that's not counting the time to implement them. We have put together a list of resources for developers and designers, to save you time so you can have enough time to have some fun too.

Here we present 45 very useful development tools such as grids, image solutions, typography, iPhone tools, HTML 5 helpers, testing resources, WordPress tools and helpers, CSS code tools and other further useful tools, time savers and resources. Enjoy this web development goodies bag!

Also consider our previous articles:

Fresh Web Development Goodies Bag with 30 useful development tools to inspire you and make your life easier.

Typeface and Terminology

eXtreme Type Terminology
eXtreme Type Terminology is a five-part article that covers most anything you might have wanted to know about the evolution of type terminology.

CSS Web-Typography Matrix and code generator
CSS Web Typography Matrix and code generator is a matrix for calculation of font sizes and line spacing in em and px. It's a very handy tool to utilize!

Differential Presentation of 40 Onscreen Typefaces
This article presents results from a study investigating the personality of typefaces. 40 typefaces (from serif, sans serif, display, and handwriting classes) were rated, using semantic differential scales. Responses are shown by typeface class and individual typeface using scaled scores. These results are helpful to practitioners when deciding which typeface to use for online text.

iPhone tools

jQTouch
jQTouch is a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.

iphonedebug
iPhonedebug is the iPhone Debug Console meant to give greater visibility and interactivity on your iPhone/iPod Touch while doing development. This was created after the frustration of having to go through the "include console.log statement then reload" method of debugging. It is similar to Firebug's fantastic console and debugger.

iUI: iPhone User Interface Framework
iUI: Framework for Safari development on iPhone iUI is a framework consisting of a JavaScript library, CSS, and images for developing iPhone webapps. It makes WebApps look and feel like iPhone native Apps.

Pipho -PHP iPhone Optimized Image Gallery
Pipho reads photos from any directory, creates resized thumbnail and slide images, and combines it with the Jaipho javascript. It also supports text files as descriptions for both gallery and slides. Pipho requires PHP5 and is written in the Zend Framework, but does not requires any Zend class. All PHP classes are stored in library folder.

iPhone 3G Stencil
iPhone 3G Stencil includes the standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons. All components are on a transparent background and should re-size nicely.

Grids

GridFox - The Grid Layout Firefox Extension
GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.

Layout grids for Axure and Pencil
These layout grids are designed for use with Axure RP Pro 5 and the Pencil extension for Firefox. For Axure, this resource will help you layout prototype web pages using the 960-grid system, having grids for 2, 3, 4, 5, 6, 8, 12 and 16-column layouts as well as a thirds (and a reverse-thirds) grid. The Pencil grids are for 12 and 16-column layouts.

960 Gridder
960 Gridder is an excellent tool for any web developer/ designer that wants to easily align, match and/or lay out websites. Essentially, it is a bookmarklet that can be used to put an overlay on a given website.

Grid System Generator
This tool generates grid systems on the fly: supported are the frameworks 960.gs, Golden Grid, 1kb grid and a plain simple grid system. You can select the width of the layout, a number of columns as well as horizontal margins.

Blueprint Cheatsheet (PDF)
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing. This cheat sheet refers to the recently released version 0.8 of the Blueprint CSS framework.

Easy Image Solutions

ImageOptim
ImageOptim is a front-end (GUI) for set of tools for optimization of PNG/JPEG images and GIF animations. Optimization makes files smaller by finding optimal compression parameters and by removing unnecessary information, like file comments, EXIF tags and color profiles. It's excellent for publishing images on the web and also useful for making Mac and iPhone applications smaller.

Content Aware Image Resizing
This technique resizes images depending on the current browser window size, making the content more adaptive for various screen resolutions. It is implemented with JavaScript: Drag the right border of the top image or use left (and right) arrow keys. Then use the form to change settings. This demo requires Firefox 3.5 at least.

CSS Sprite Generator
CSS Sprite Generator allows you to choose and upload the image files you want to use in your CSS Sprite and click "Create CSS Sprite." The application will join all your image files into a single file and will generate the corresponding CSS and HTML code along with the rollover effect if any chosen.

Horinaja
Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. When the mouse is outside of the slide-show area, it scrolls. When hovering over the slide-show, the scrolling pauses. It can automatically create slide indices (pagination), if required. To manually scroll, either click on the slide index links (pagination) or use your mouse wheel.

SpriteMe
Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There's a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button.

HTML 5 Helpers

Google Chrome Frame
GoogleChrome Frame is an early-stage open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer. With Google Chrome Frame, you can: Start using open web technologies - like the HTML 5 canvas tag - right away, even technologies that aren't yet supported in Internet Explorer 6, 7, or 8. Take advantage of JavaScript performance improvements to make your apps faster and more responsive.

Modernizr
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Testing Resources

The myth of the page fold: evidence from user testing
As web professionals, we all know that the concept of the page fold being an impenetrable barrier for users is a myth. Over the last 6 years and over 800 user testing sessions later, only 3 occasions did the page fold act as a barrier to users getting to the content they want. This article breaks down the page fold myth and give some tips to ensure content below the fold gets seen.

Browsera
Browsera offers automated browser compatibility testing. It can automatically detects cross-browser layout problems and scripting errors on your website. Discover layout problems, test pages behind login, test dynamic pages, locate JavaScript errors, test your entire site.

ABtests
ABtests is setup to let you test your websites/applications and share that knowledge with others, making everyone smarter in the process. Here are some things you can do at ABtests: View and learn from other people's test results;Upload your own test results and share with colleagues or clients; Follow ABtests on Twitter to get a firehose of A/B and multi-variate testing related information.

Browserscope
Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers. Gathering test results from users "in the wild" is the most important and useful feature of Browserscope - and you can participate! Try it and find out how your browser compares.

Effective A/B Testing
Say you've created a new design which you feel is more effective but you'd like to know for sure. A/B testing is a simple idea. Create two versions of something and put people through the different versions. Track what they do afterwards and figure out which version causes more people to do what you want. Go with the better version. This slideshow will be both very informative as to why and how to effectively A/B test. Even the S5 used for the slideshow is available for free download.

WordPress Tools & Helpers

WordPress Debug Theme
Sometimes you need to see what's wrong with a WordPress install, and you need to see it fast. This shows you the important URL's, editor, and memory settings, etc. On subpages it will show you something else: the page type, all the query vars that are set and the SQL query for that page. When just doing a print_r or var_dump of $wp_query is hard to read, but this theme tries to be a bit smarter about that. This theme also works in the preview, so that might be enough in a lot of cases.

Web Design Wordpress Template Tag Reference Guide
Do you need a WordPress Reference Guide? This content was reformatted for quick reference from the Template Tag section of the WordPress.org Codex, a relative encyclopedia to WordPress theming, and great reference for your WordPress questions.

List of all WordPress hooks
This is precisely what it claims to be, a list of all WordPress hooks. That's right, currently a list of 989 WordPress hooks. You can click a column name to sort, view a specific hook's version history and file locations, or find out the deprecated hooks so you do not use them.

Launching Freebie Images WordPress Plugin
Spice up your blog with professional, high quality, free stock photos and images. With an amazingly simple Drag and Drop interface, blogging has never been this easy. The Freebie Images Plugin gives you a micro format search interface inside your WordPress Admin where you can search for and add images to your blog post – free of charge. The images are perfectly sized for blogs – between 300px and 400px width.

CSS and Code Tools

CSS-JS-Booster
CSS-JS-Booster is a PHP-script that tries to automate as many performance optimizing steps related to CSS and JS embedding as possible. This is an easy to use PHP-Library that combines, optimizes, dataURI-fies, re-splits, compresses and caches your CSS and JS for quicker loading times.

xCSS
xCSS bases on CSS and empowers a straightforward and object-oriented workflow when developing complex style cascades. Using xCSS means a dramatic cut down to your development time by: having a intuitive overview of the overall CSS structure, using variables, re-using existing style cascades and many other handy features. But most frameworks are bulky and inflexible, aren't they? Not xCSS! It's lightweight and seamlessly integrates into any existing workflow. Aside from that, the CSS overhead is getting reduced while your (X)HTML attributes remain semantic.

DBG
DBG is a a full-featured PHP debugger, an interactive tool that helps you debug PHP scripts. It works on a production and/or development web server and allows you to debug your scripts locally or remotely, from an IDE or console.

CSS Browser Selector
CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

Detecting unused CSS selectors
Many selectors and classes come and go while developing and testing. After a while, you will easily see style files that become untouchable: you don't know which classes or selectors are being used or not. The same uncertainty creeps in when you maintain someone else's site. There are several solutions out there about detecting unused classes and selectors, but here you can find the most popular.

Textmate: Re-Usable Command Basics
With Textmate, there are a whole host of available commands and bundles, but what if you need to extend existing ones or create your own? This covers some of the basics like using filter through command, re-using commands, adding simple UI elements which will help you get started.

Further Useful Tools, Time Savers & Resources

Quick Tip: Dynamically add an icon for external links
A common feature on Web 2.0 sites and wikis is the "external link" icon: external link. This is a great candidate for using progressive enhancement. By using just a little jQuery, you can easily add the images. So, that's it. Short and sweet, a quick tip, how-to and code to help you accomplish it fast.

XRAY
XRAY is the easiest way to look beneath the skin. XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

An AJAX Based Shopping Cart with PHP, CSS & jQuery
In this tutorial, you will learn to create a functional AJAX driven shopping cart. You are free to download the code and modify it any way you wish. You can build upon it and even turn it into a full-fledged online shop.

jsHub
jsHub simplifies connecting software services to websites. Websites typically connect to many different software services - web analytics, audience measurement, optimization, and many more. Each connection is made with a small piece of code called a ‘tag’. Some sites have 10 or more tags on a page, and each one adds to the time it takes for the page to load. Each tag needs similar information to be written into the page, but in a slightly different format, and this can cause awkward inconsistencies. jsHub is a suite of tools and a set of standards, that help you to make better websites. Tagging doesn't have to be painful.

Kotatsu - a simple HTML table generator
When you need to create a table, here is a tool to help create a table and row in column classes quickly. It's called Kotatsu.

iWebSkel
iWebSkel is the ultimate ready to use kit for website design. It features only the latest version essential components to start developing quickly using XHTML, CSS, and Javascript.

Patterns for the Color Blind
About 8% of the male population has some sort of color blindness. The color blind have the inability to clearly distinguish different colors of the spectrum, they tend to see colors in a limited range of hues. Because of this, the color blind have trouble with a lot of websites. The patterns and examples on this site help you create websites the color blind can use without problems.

Ident Engine.
Without much conscious thought, most of us have built identities across the web. We've filled in profiles, uploaded photos, videos, reviews and bookmarks. The Ident Engine uses semantic web API’s to bring together these web footprints.

Beautiful Email Newsletters
Here you will find page after page of aesthetically pleasing newsletters.