Nov 24 2009

Fresh Web Development Goodies Bag

Advertisement

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.

eXtreme 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!

CSS Web-Typography Matrix and code generator

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.

Differential Presentation of 40 Onscreen Typefaces

iPhone tools

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

jQTouch

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.

iphonedebug

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.

iUI: iPhone User Interface Framework

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.

Pipho -PHP iPhone Optimized Image Gallery

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.

iPhone 3G Stencil

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.

GridFox - The Grid Layout Firefox Extension

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.

Layout grids for Axure and Pencil

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.

960 Gridder

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.

Grid System Generator

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.

Blueprint

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.

ImageOptim

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.

Content Aware Image Resizing

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.

CSS Sprite Generator

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.

Horinaja

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.

SpriteMe

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.

Google Chrome Frame

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.

Modernizr

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.

The myth of the page fold: evidence from user testing

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.

Browsera

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.

ABtests

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.

Browserscope

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.

Effective A/B Testing

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.

WordPress Debug Theme

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.

Web Design WordPress Template Tag Reference Guide

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.

List of all WordPress hooks

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.

Launching Freebie Images WordPress Plugin

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.

CSS-JS-Booster

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.

xCSS

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.

DBG

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.

CSS Browser Selector

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.

Detecting unused CSS selectors

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.

Textmate: Re-Usable Command Basics

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.

Quick Tip: Dynamically add an icon for external links

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.

XRAY

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.

An AJAX Based Shopping Cart with PHP, CSS & jQuery

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.

jsHub

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.

Kotatsu - a simple html table generator

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.

iWebSkel

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.

Beautiful Email Newsletters

About the Author

Comments and Discussions
  • Eugenio Grigolon, 24 November 2009

    Perfect list. Thanks for sharing and the effort.

  • Matt Bleasby, 24 November 2009

    This is simply amazing, Every designer should get alook at this, Would improve productivity greatly.

    Great work, Keep it up.

  • Evan Lovely, 24 November 2009

    AMAZING! Great work. SO many useful things there. Thanks tons.

    • andrewbenardski, 25 November 2009

      Agree! Thank you…

  • h1brd, 24 November 2009

    Now that’s a really good list of useful and undiscovered stuff! Thanks :)

  • Mike Chanter, 24 November 2009

    Really useful list of resources – thanks.

  • Julie, 24 November 2009

    Woww! Thanks so much for the great list!

  • Keenan Payne, 24 November 2009

    Excellent list! Thanks a ton for all of the resources and keep up the great work! :)

  • Bobby, 24 November 2009

    Terrific resources – Thanks!

  • passang, 24 November 2009

    A great list. Thanks.

  • Menno, 25 November 2009

    Awesome list. lots of helpful stuff, thanks for making it

  • Franz, 25 November 2009

    ntis thankcs

  • roger, 25 November 2009

    you site got good info but i can’t find email a frind link, if it’s there it willbe usefuljust my feedback

  • Camkbridge Computer Repair, 25 November 2009

    really really useful, many thanks for putting it all together :)

  • Cambridge Computer Repair, 25 November 2009

    really useful, thanks everso for putting it all together

  • Christian Gehrke, 25 November 2009

    All I can say is Wow! I have been a web developer for over 10 years and I am seeing tools here that I have not seen before.

    Not only have a bookmarked this post but I also just sent this link to every developer I know.

    Thanks for sharing.

  • Martin, 25 November 2009

    A great list of resources! And thank you for including tutorialzine’s shopping cart!

  • mo. from Phlow-Magazine.com, 25 November 2009

    It’s amazing how you find and extract all those helpful tools for us. Delicious content, too much to check out properly but I found some excellent new tools. Thank you for your work!

  • Jorgen, 25 November 2009

    Some usefull stuff there, thanks!

  • designfollow, 25 November 2009

    very useful

    thank you

  • kevin, 25 November 2009

    Pretty crazy the amount of “fresh” blog posts we have these days…

  • Bentforkz, 25 November 2009

    This post is made from 100% pure awesomesauce!! Keep on keepin’ on!

  • jb89149, 25 November 2009

    Very cool. Thanks a lot.

  • Roy Ho, 25 November 2009

    So glad I stumbled onto this…great resources….

  • pthesis, 25 November 2009

    This is awesome. That’s for putting it up!

  • Custom Arts, 25 November 2009

    Awesome!! :) I’m new in webdesign and its so great to see what you could do. Most of the tools are more than a help for me!

    Big thanks for that guys! :)

  • Farid, 25 November 2009

    Very useful, thanks

  • Ingrid, 25 November 2009

    This list is incredible. I look at lots of blogs and usually they all re-hash what’s been said before but this is a truly useful, great resource. So many exciting new goodies to play with. Thank so much!

  • Daniel, 25 November 2009

    Great post, thanks!

    Browsera looks interesting.

    I used to check all my sites using browsershots.org, it’s great too! – No sign up needed and you can test your sites on all common browsers (and some I never heard of!) and on different OS (Linux, Windows, Mac OS, BSD).

  • denbagus, 25 November 2009

    complete information for web developers..thank you

  • Jannis Gerlinger, 26 November 2009

    the 960 Grid is very useful!

  • Jordan Koschei, 26 November 2009

    A CSS sprite generator! I wish I’d heard about that sooner; doing sprites by hand is time consuming.

  • mark, 27 November 2009

    Page Fold article is great. I am having this problem with a client who believes every page should fit on the screen with impossible content requirements.

  • Chandan, 29 November 2009

    A very good article.
    keep it up noupe!!!!!!!!!!

  • Anton Ranestam, 29 November 2009

    Awesome links, I liked the “Horinaja” scroll, I will use that in my next project.

  • Laura Stafford, 01 December 2009

    Great list. Thanks for sharing!

  • nail13, 10 December 2009

    Please add the most useful tool for optimizing PNG’s and other images:
    http://www.gracepointafterfive.com/punypng/
    It works much better than ImageOptim and is web-accessible.
    Thank you!

  • Designerfoo, 18 December 2009

    Loved the article, especially the xCSS framework, jsHub and BEN! Keep it up!

  • Social Media, 25 December 2009

    Great post with an awesome list!

    Best,
    Magnus Lundin – Sweden

  • baltech, 12 January 2011

    Great bolg very useful information….Thanks..:)

search form
 
image description image description