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.
jQTouch is a jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.
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
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.
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 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 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
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 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.
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
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.
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 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 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 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 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
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 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 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.
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.
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.
Perfect list. Thanks for sharing and the effort.
This is simply amazing, Every designer should get alook at this, Would improve productivity greatly.
Great work, Keep it up.
Excellent list! Thanks a ton for all of the resources and keep up the great work! :)
AMAZING! Great work. SO many useful things there. Thanks tons.
Agree! Thank you…
Now that’s a really good list of useful and undiscovered stuff! Thanks :)
Really useful list of resources – thanks.
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.
Woww! Thanks so much for the great list!
Terrific resources – Thanks!
So glad I stumbled onto this…great resources….
A great list. Thanks.
Awesome list. lots of helpful stuff, thanks for making it
you site got good info but i can’t find email a frind link, if it’s there it willbe usefuljust my feedback
This is awesome. That’s for putting it up!
really really useful, many thanks for putting it all together :)
really useful, thanks everso for putting it all together
A great list of resources! And thank you for including tutorialzine’s shopping cart!
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!
Some usefull stuff there, thanks!
Pretty crazy the amount of “fresh” blog posts we have these days…
This post is made from 100% pure awesomesauce!! Keep on keepin’ on!
Very cool. Thanks a lot.
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!
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! :)
Very useful, thanks
the 960 Grid is very useful!
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).
complete information for web developers..thank you
A CSS sprite generator! I wish I’d heard about that sooner; doing sprites by hand is time consuming.
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.
A very good article.
keep it up noupe!!!!!!!!!!
Awesome links, I liked the “Horinaja” scroll, I will use that in my next project.
Great list. Thanks for sharing!
Please add the most useful tool for optimizing PNG’s and other images:
It works much better than ImageOptim and is web-accessible.
Loved the article, especially the xCSS framework, jsHub and BEN! Keep it up!
Great post with an awesome list!
Magnus Lundin – Sweden
Great bolg very useful information….Thanks..:)