- October 10th, 2007
- 39 Comments
Every month we take a look around and select some of the most interesting web-development-related web-sites. We read articles, check out tools, analyze the advantages of new resources. Below you’ll find useful references, tutorials, services, tools, techniques and articles we’ve found over the last 30 days – an overview of web-sites you shouldn’t have missed in September 2007.
All images can be clicked and lead to the sites from which the screenshots have been taken. We’ve missed something? Let us know in the comments!
CSS Pricing Matrix1
A CSS-based matrix in which clicking on a highlights the associated cell in the top row and left column giving an indication of relationships among the provided information. Similar solution: Tablecloth2.
CSS Diagnostic Styling4
Eric Meyer presents a diagnostic CSS-file; its primary goal is to have a set of rules that can be applied during the development phase of a new layout. These rules’ aim is to visually highlight problems in the markup.
Dynamic CSS With Variables5
Geoffrey Grosenbach describes how you can integrate CSS variables in CSS coding — with Ruby on Rails and HAML Plugin6.
Sitemaps can be very useful to some user trying to find his way around. But, what happens if you have huge sitemap and you don’t want to overload your page yet still keep things accessible and “indexable”? Maybe CSSG Sitemap Styler could help. Another solution: CSS SiteMap9.
Forward-thinking CSS float-clearing11
Brian Dillard provide a bulletproof method for clearing floats with pure CSS, without additional (X)HTML-Markup.
Styling File Inputs with CSS and the DOM12
CSS Only DOM Tabs14
Instead of modern CAPTCHA-solutions16 supposed to prevent comment- and e-mail-span, you can use a slightly different approach. You can create a honeypot form field that should be left blank and then use CSS to hide it from human users, but not bots. When the form is submitted, you check to make sure the value of that form field is blank.
CSS List Expander17
So, we have an unordered list that can go on in depth as much as we want. The script analyzes the list tree and applies toggle functions for expanding/collapsing child objects.
Fixing Tricky Layouts with the YUI Dom Collection19
Microsoft Silverlight 1.024
Google has extended Google Docs with the functionality of creating presentations online. Whether imported from existing files or created using the new slide editor, presentation are listed alongside documents and spreadsheets in the Google Docs document list. They can be edited, shared, and published using the familiar Google Docs interface, with several collaborators working on a slide deck simultaneously, in real time.
Adobe Photoshop Tutorials27
A growing collection of Adobe Photoshop Tutorials, presented as step-by-step-tutorials. The site has 17 categories, among them Text Effects, Photo Manipulations, Web Layouts and Logos. Besides: 60 Advanced Adobe Photoshop Tutorials28.
40 Great Open Source Graphic Programs31
An overview of 40 free applications you can use as alternatives for professional image editing software.
The project offers a platform where web-developers can upload their CSS-Snippets, rate them and share them with other developers. While other projects collected single elements such as forms33 or tables34, Styleignite offers an overview of CSS Layouts, navigation menus, text styles, site elements, forms, graphics and further scripts.
CSS selectors: basic browser support35
These charts compare basic support for the various selectors, pseudo-classes and pseudo-elements defined in the CSS Selectors module.
Windows Live Writer38
Microsoft released a free desktop application that simplifies the process of publishing content to your weblog. Whether you are using WordPress, Moveable Type or even blog hosters, you can prepare, preview and publish your content with Windows Live Writer without using your weblog-engine. Features: WYSIWIG-Editor, powerful editing features and offline editing. Beta, for Windows XP with Service Pack 2 or Windows Vista. Various plugins39 can extend the functionality of the tool.
AutoHotkey is a free, open-source desktop-tool for Windows which can automate almost your tasks by sending keystrokes and mouse clicks. You can write a mouse or keyboard macro by hand or use the macro recorder. You can also expand abbreviations as you type them. For example, typing “btw” can automatically produce “by the way”. Alternative: Texter42.
Flickr Foldr Monitr43
Foldr Monitr is a free tool that runs in the background and watches a selected folder (and optionally subfolders) waiting for you to add photos to it. When photos appear in the folder, Foldr Monitr automatically uploads them to your Flickr account for you. Time-saver.
Free CSS Toolbox45
Free CSS Toolbox is a freeware desktop-application for web developers who work with CSS code on Windows. Free CSS Toolbox includes a number of tools for fast-tracking and enhancing the development of style sheet code, such as an advanced CSS Formatter, CSS Validator, CSS Syntax Checker and automatic code completion.
Firefox-Extension Book Text Mark47
If bookmarks aren’t enough, Book Text Mark can help. You can use this extension to set mark lines within long pages and navigate to marked pages and to the marked lines. Unfortunately only one bookmark per page is possible.
FirePHP – Firefox Extension for PHP Development48
FirePHP is a Firefox-extension which is supposed to help developers analyze, debug and optimize their PHP source code. The tool allows you to take a deeper look at all the work your PHP code does to generate that page you are currently looking at. To use the tool you have to install the PHP PEAR Package49 and add few lines of code to your PHP application.
oSkope Visual Search50
oSkope is a visual search engine you can use to search for images on Flickr, products on eBay and Amazon as well as videos on YouTube. The search is more intuitive; the results are displayed as thumbnails; the details are displayed once an item is hovered. Also various views are possible; e.g. you can select whether you’d like to sort products by price or its popularity.
CoScripter is a system for recording, automating, and sharing processes performed in a web browser such as printing photos online, requesting a vacation hold for postal mail, or checking bank account information. Instructions for processes are recorded and stored in easy-to-read text here on the CoScripter web site, so anyone can make use of them. The site currently includes over 860 scripts. CoScripter requires a free IBM ID.
rsizr – intelligent image resizing53
We’ve reported about Content Aware Image Resizing54 in our previous best-of-issue, Best Of August55. Now you can test the new intelligent technique for scaling images by yourself. rsizr, a web-based image editing tool, offers, among other features, the intelligent image rescaling.
This tool expands the “standard” functionality of Instant Online Messengers like ICQ or MSN with a further components. Users can not only communicate and exchange data, but also edit the same documents simultaneously. You can remotely control another computer (if you’ve been given permission). You can also remotely control a Mac from a PC and vice versa. Free, for Mac and Windows.
Only2Clicks is a “different” bookmarks-collector. The web-service uses Instead of text links snapshots of bookmarked pages; these snapshots can be moved with drag’n’drop similarly to Netvibes or Pageflakes. You can place the bookmarks on your personalized start page or in your categories.
A free web-based image editing tool with thousands of one click effects, photo frames, filters, overlays and digital scrapbooking styles.
If you are subscribed to dozens of RSS-Feeds an information overkill is definitely just a matter of time. This tool evaluates how interesting every single article of your RSS feeds is for you, ranks it and presents you an overview of the articles which you probably would like. FeedHub permanently studies your preferences and updates their internal presentation depending on your reading- and clicking-behavior.
CSS Tools and Services
CSS Sprite Generator61
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.
CSS Menu Generator62
The tool generates standards-based navigation menus based upon 11 horizontal and 6 vertical templates.
This script prepares html-pages for the best HTML e-mail delivery results. CSS styles are converted to inline style attributes, relative paths are converted to absolute paths, CSS properties are checked against e-mail client capabilities, a plain text version is created.
CSS Layout Generator65
Generates CSS-Layouts online. You can define a number of properties for your header, footer, sidebar and content column. You can also make sure your columns have the same height (Faux Columns).
CSS Redundancy Checker66
You can use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant. Alternative: Dust-Me Selectors67, a Firefox-extension by Sitepoint.com.
Swf meets Ajax. An upload widget that allows queued multiple-file upload including progress bars.
A lightweight accordion that is built with Scriptaculous75, has vertical, horizontal and nested styles and works properly in every browser.
jQuery UI: Widgets, Components, and Interactions76
New unobtrusive dynamic flickr badge77
A compact Flickr-Badge for presentation of Flickr-images with a navigation option.
Open external links in new window81
Concerned about people leaving your site when navigating to offsite links? This script lets you either automatically have all offsite links open in a new window, or let the user decide, via a checkbox.
15 Excellent Examples of Web Typography82
Elegant typography creates an optimal foundation for comprehensible content. This article presents 15 excellent examples of web-typography, used to present headlines or/and body copy. You can find even more examples in the gallery Typography For Headlines83.
Articles and Publications
Firebug Tutorial – Logging, Profiling and CommandLine85
7 Rules for Communicating Clearly and Concisely in Email87
People don’t have time for long emails, and they don’t have time to try to find out exactly what you want. You have to tell them, in as short an email as possible. 7 guidelines for effective communication via e-mail: among them — use the minimum amount of sentences, state what you want right away, write about only one thing, use “If … then” statements.
How to price your web application88
In the world of free, pricing isn’t given much attention. But if you’re looking for a real, sustainable business, it’s unavoidable. Paul Farnell’s gone through it all with his app Litmus and breaks it down for you here.
Tabs, Used Right: The 13 Usability Guidelines90
Jakob Nielsen presents 13 guidelines for design of tab-based navigation menus.
Tips for Keeping Forms Accessible91
This article’s main objective will be to offer some tips for keeping your forms accessible, and in some cases, making them even more accessible than they are by default.
Thinking in the Right Terms: 7 Components for a Successful Web Site Redesign92
A redesign can both bring advantages and result in new problems. To make sound, bulletproof and future-oriented decision you might want to consider seven essential long-term components; they can help you to reach a successful redesign project. Among them: make sure you have a vision, spend time with your users, reduce risk by working in little bits, understand the internal processes.
Get Out from Behind the Curtain93
“When used at critical points in the design process, these sessions build strong, respectful relationships. Since clients directly experience the design work, you don’t need to sell clients on an idea—they were with you the whole time.”
Visualizing Fitts’ Law94
Back in school, I remember that it wasn’t until I started taking classes in physics that calculus made any kind of real sense to me. I just need diagrams to function. In that spirit, I thought it would be nice to go over Fitts’s Law, a staple in the HCI diet, with a few visuals to explain both the concept and why it’s ideas are a bit more complicated than most would have you believe.
Getting a startup right the second time96
The road to success is hard. We all know this, but still hope for the quick success of a Twitter instead of the starting and stopping of a flickr (started as a game). ImThere is a startup that started and stopped, and David Gorman documents their eventual success.
User Experience Metrics and the Net Promoter Score (NPS)97
The Net Promoters Score (NPS for short) is a really simple, yet quite powerful metric for measuring customer satisfaction. To calculate your Net Promoters Score, you ask your customers “how likely they would be to recommend you to a friend”, and get them to grade their answers on a scale of zero to ten.
Learn Apache mod_rewrite: 13 Real-world Examples98
Apache’s low-cost, powerful set of features make it the server of choice for organizations around the world. One of its most valuable treasures is the
mod_rewritemodule, the purpose of which is to rewrite a visitor’s request URI in the manner specified by a set of rules. Besides: Mod_Rewrite Cheat Sheet99 for printing out, learning and looking up.
Take the Leap: First Steps in Freelancing [Find Clients]100
You’ve decided to become a freelancer. How should you start to achieve optimal results? What problems do you have to be prepared for? An excerpt from Brendon Sinclair’s “The Web Design Business Kit 2.0″, in which the author shows how to start, build, and expand your own freelance or small web business.
Using Psychology to Create a Killer Sticky Website102
I set out recently to understand what makes some web apps irresistibly sticky and why others can’t seem to gain traction. It didn’t take me long to get totally obsessed with understanding this stuff because the deeper I got, the most interesting it all became.
Colors, Color Palettes
100 (Legal) Sources for Free Stock Images103
Where to find license-free images for your designs or blog posts? 100 sources where you can find free stock images: and don’t worry — they’re all legal.
Design-Galleries, Showcases, Inspiration
A showcase of… design showcases. Dozens of CSS-, Flash- and inspiration-galleries are divided in categories, reviewed and can be sorted by their PageRank.
Vector Logo Database105
670 professional vector logotypes, in 20 categories and high resolution — for free download. To download the source files for the images you have to register on the web-site which is full of disturbing advertisement.
The Best WordPress Magazine Themes Available107
An overview of elegant WordPress-Themes which can be used as prototypes for online-magazines. Most themes offer brilliant typography and thought-out site structure. The overview includes The Morning After Theme108, Revolution Theme109 and Grid Focus110.
Collection: Design Patterns112
Brian Christiansen collects design elements which are typical for modern web sites and application — on a regular basis. Among other elements one can find 404-errors, alerts, blog editors, calendar views, comment form design, tag clouds, tagging interfaces, pagination, tab design patterns, upload interface and much more.
Cool business card designs113
Interesting approaches to design of business cards.
Most Sliced | Design slicers reviewed116
Most Sliced is a directory of slicing services with details on pricing, turnaround time, and additional services they may offer. This information along with user submitted ratings and reviews, is all the information you need to select the best slicing service for your needs. We’ve already presented some of them117.
Icons, Fonts, Templates
Ajax Digest // Non-notorious CSS templates for websites118
15 free CSS-templates designed by professional design agencies – available for free download.
Sizcons – Random Jabber120
A free icon-set with 46 Icons in 12×12 and 16×16 formats.
The Holy Mail122
Recently newsletter design is becoming more and more important. There is a showcase of newsletter-designs123 and professional solutions for testing newsletter-designs124 on cross-browser-compatibility. This article present a bulletproof template for HTML-E-Mails, which are displayed identically among popular mail-clients and services such as Gmail, Outlook 2007, Yahoo Mail, Hotmail, Thunderbird, iPhone etc.
The Last Click
ThinkGeek :: Wi-Fi Detector Shirt125
This shirt for geeks shines once it detects Wi-Fi-signals around the person wearing the shirt. The glowing bars on the front of the shirt dynamically change as the surrounding Wi-Fi signal strength changes. It can be useful if you don’t want to crack open your laptop just to see if there is any Wi-Fi access. The shirt runs for hours off three AAA Batteries which are unfortunately not included. However, you have detailed washing instructions instead.
John Maeda: Simplicity patterns (video)127
Minimalism and Simplicity have become a trend. In this TED-Talk John Maeda, the author of the book “The Laws of Simplicity”, speaks about “Simplicity” in our everyday life.
Presentation Zen: Learning from Bill Gates and Steve Jobs128
In their Talks Bill Gates and Steve Jobs behave themselves quite differently. They both try to communicate their ideas effectively, and even use the same tools, however the way these tools are used defines the impression Gates and Jobs make. This article analyzes this difference and describes what Bill Gates can learn from Steve Jobs.
Dilbert Comic Strip – Web 2.0130
Dilbert Comic Strip about Web 2.0. Funny!
Knit Night Cupcakes132
Lolo enjoys backing. Particularly cupcakes with a creme that looks like knit pullover. What does it have to do with web development? Absolutely nothing, however these cakes are absolutely stunning to look at133.
- 1 http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html
- 2 http://cssglobe.com/lab/tablecloth/
- 3 http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html
- 4 http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/
- 5 http://nubyonrails.com/articles/dynamic-css
- 6 http://haml.hamptoncatlin.com/
- 7 http://nubyonrails.com/articles/dynamic-css
- 8 http://cssglobe.com/post.asp?id=903
- 9 http://betech.virginia.edu/index.php/2007/10/03/css-sitemap/
- 10 http://betech.virginia.edu/index.php/2007/10/03/css-sitemap/
- 11 http://blogs.pathf.com/agileajax/2007/09/developers-note.html
- 12 http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
- 13 http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
- 14 http://www.3point7designs.com/blog/2007/09/12/css-tabs-css-only-dom-tabs/
- 15 http://haacked.com/archive/2007/09/11/honeypot-captcha.aspx
- 16 http://haacked.com/archive/2006/09/26/Lightweight_Invisible_CAPTCHA_Validator_Control.aspx
- 17 http://cssglobe.com/post.asp?id=940
- 18 http://cssglobe.com/post.asp?id=940
- 19 http://yuiblog.com/blog/2007/09/04/yui-region/
- 20 http://yuiblog.com/assets/shifthappens/fixingalignment-problem.html
- 21 http://yuiblog.com/assets/shifthappens/fixingalignment-css.html
- 22 http://yuiblog.com/assets/shifthappens/fixingalignment-js.html
- 23 http://yuiblog.com/blog/2007/09/04/yui-region/
- 24 http://silverlight.net/Default.aspx
- 25 http://silverlight.net/Default.aspx
- 26 http://googleblog.blogspot.com/2007/09/our-feature-presentation.html
- 27 http://www.avivadirectory.com/photoshop/
- 28 http://www.dennisplucinik.com/blog/2007/08/28/60-advanced-adobe-photoshop-tutorials/
- 29 http://www.avivadirectory.com/photoshop/
- 30 http://www.dennisplucinik.com/blog/2007/08/28/60-advanced-adobe-photoshop-tutorials/
- 31 http://openit.biteus.org/40-great-open-source-graphic-programs/
- 32 http://www.styleignite.com/
- 33 http://www.formassembly.com
- 34 http://icant.co.uk/csstablegallery/
- 35 http://dev.l-c-n.com/CSS3-selectors/browser-support.php
- 36 http://dev.l-c-n.com/CSS3-selectors/browser-support.php
- 37 http://www.askapache.com/htaccess/ultimate-htaccess-file-sample.html
- 38 http://get.live.com/en-us/betas/writer_betas
- 39 http://gallery.live.com/results.aspx?bt=9&pl=8
- 40 http://get.live.com/en-us/betas/writer_betas
- 41 http://de.autohotkey.com/
- 42 http://lifehacker.com/software/top/lifehacker-code-texter-windows-238306.php
- 43 http://www.rebeleos.com/FoldrMonitr/
- 44 http://www.rebeleos.com/FoldrMonitr/
- 45 http://www.blumentals.net/csstool/
- 46 http://www.blumentals.net/csstool/
- 47 https://addons.mozilla.org/en-US/firefox/addon/4945
- 48 http://www.firephp.org/
- 49 http://www.firephp.org/
- 50 http://www.oskope.com/
- 51 http://www.oskope.com/
- 52 http://services.alphaworks.ibm.com/coscripter/browse/about
- 53 http://rsizr.com/
- 54 http://www.youtube.com/watch?v=qadw0BRKeMk&eurl=http%3A%2F%2Fajaxian%2Ecom%2Farchives%2Fnew%2Dtechnology%2Ddynamic%2Dresizing%2Dof%2Dimages
- 55 http://www.smashingmagazine.com/2007/09/18/best-of-august-2007/
- 56 http://www.yuuguu.com/index.php
- 57 http://www.only2clicks.com
- 58 http://www.only2clicks.com
- 59 http://www.flauntr.com/
- 60 http://www.feedhub.com/
- 61 http://spritegen.website-performance.org/
- 62 http://www.cssmenumaker.com/
- 63 http://www.cssmenumaker.com/
- 64 http://code.dunae.ca/premailer.web/
- 65 http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
- 66 http://services.immike.net/css-checker/
- 67 http://www.sitepoint.com/dustmeselectors/
- 68 http://livepipe.net/projects/control_suite/
- 69 http://digitarald.de/playground/uplooad.html
- 70 http://www.robertnyman.com/2007/09/20/releasing-domassistant-20-chainability-ajax-module-domready-xpath-and-more/
- 71 http://extjs.com/
- 72 http://extjs.com/
- 73 http://www.netzgesta.de/curl/
- 74 http://www.stickmanlabs.com/accordion/
- 75 http://script.aculo.us/
- 76 http://ui.jquery.com/
- 77 http://www.wait-till-i.com/index.php?p=484
- 78 http://www.wait-till-i.com/index.php?p=484
- 80 http://gridlayouts.com/
- 81 http://www.dynamicdrive.com/dynamicindex8/newwindow2.htm
- 82 http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
- 83 http://www.smileycat.com/design_elements/typography_for_headlines/
- 84 http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
- 85 http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i/
- 86 https://addons.mozilla.org/de/firefox/addon/1843
- 87 http://webworkerdaily.com/2007/10/05/7-rules-for-communicating-clearly-and-concisely-in-email/
- 88 http://www.thinkvitamin.com/features/webapps/how-to-price-your-web-application
- 89 http://www.thinkvitamin.com/features/webapps/how-to-price-your-web-application
- 90 http://www.useit.com/alertbox/tabs.html
- 91 http://green-beast.com/blog/?p=206
- 92 http://www.uie.com/articles/components_for_redesign/
- 93 http://www.alistapart.com/articles/getoutfrombehindthecurtain
- 94 http://particletree.com/features/visualizing-fittss-law/
- 95 http://particletree.com/features/visualizing-fittss-law/
- 96 http://www.thinkvitamin.com/features/design/getting-a-startup-right-the-second-time
- 97 http://www.andybudd.com/archives/2007/09/user_experience/
- 98 http://www.sitepoint.com/article/apache-mod_rewrite-examples
- 99 http://www.ilovejackdaniels.com/cheat-sheets/mod_rewrite-cheat-sheet/
- 100 http://www.sitepoint.com/article/first-steps-freelancing-2
- 101 http://www.sitepoint.com/article/first-steps-freelancing-2
- 102 http://lauraalter.com/index.php
- 103 http://www.virtualhosting.com/blog/2007/100-legal-sources-for-free-stock-images/
- 104 http://www.showcasepoint.com/
- 105 http://www.allfreelogo.com/
- 106 http://www.allfreelogo.com/
- 107 http://themeplayground.com/the-best-wordpress-magazine-themes-available
- 108 http://themasterplan.in/themes/the-morning-after/
- 109 http://www.revolutiontheme.com/
- 110 http://5thirtyone.com/grid-focus
- 111 http://themeplayground.com/the-best-wordpress-magazine-themes-available
- 112 http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/
- 113 http://creativebits.org/cool_business_card_designs
- 114 http://creativebits.org/cool_business_card_designs
- 115 http://creativebits.org/cool_business_card_designs
- 116 http://www.mostsliced.com/
- 117 http://www.smashingmagazine.com/2007/08/23/xhtmlcss-coding-services/
- 118 http://www.ajaxpath.com/css-templates/
- 119 http://www.ajaxpath.com/css-templates/
- 120 http://www.randomjabber.com/static/sizcons/
- 121 http://www.randomjabber.com/static/sizcons/
- 122 http://commadot.com/?p=624
- 123 http://www.campaignmonitor.com/gallery/
- 124 http://litmusapp.com/
- 125 http://www.thinkgeek.com/tshirts/generic/991e/
- 126 http://www.thinkgeek.com/tshirts/generic/991e/
- 127 http://www.ted.com/index.php/talks/view/id/172/
- 128 http://www.presentationzen.com/presentationzen/2007/09/steve-bill-redu.html
- 129 http://www.presentationzen.com/presentationzen/2007/09/steve-bill-redu.html
- 130 http://www.dilbert.com/comics/dilbert/archive/dilbert-20070909.html
- 131 http://www.dilbert.com/comics/dilbert/archive/dilbert-20070909.html
- 132 http://veganyumyum.com/2007/06/knit-night-cupcakes
- 133 http://www.flickr.com/groups/veganyumyum/
- 134 http://veganyumyum.com/2007/06/knit-night-cupcakes