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-Techniques

• CSS Pricing Matrix
  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: Tablecloth.

  

• CSS Diagnostic Styling
  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 Variables
  Geoffrey Grosenbach describes how you can integrate CSS variables in CSS coding — with Ruby on Rails and HAML Plugin.

  

• CSS Sitemap Styler: Style your Sitemaps with CSS and Javascript
  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 SiteMap.

  

• Forward-thinking CSS float-clearing
  Brian Dillard provide a bulletproof method for clearing floats with pure CSS, without additional (X)HTML-Markup.
• Styling File Inputs with CSS and the DOM
  File inputs (<input type=”file” />) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.

  

• CSS Only DOM Tabs
  There are several variations of “dom tabs” out there, and they work pretty well. However you can accomplish the same effect using just CSS, saving you the javascript download and dependency.
• Honeypot Captcha
  Instead of modern CAPTCHA-solutions 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 Expander
  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 Collection
  The requirement is to make the ad in this content column align to the bottom of the secondary ad on the right, regardless of font size (Example). Christian Heilmann delivers two solutions - a CSS-based and a JavaScript-based method.

  

References, Tutorials

• Microsoft Silverlight 1.0
  Microsoft Silverlight is a runtime for browser-based applications, providing a subset of the animation, vector graphics, and video playback capabilities of Windows Presentation Foundation. Dynamic actions can be implemented with JavaScript; to display Silverlight-content browsers require a Silverlight-plugin, similar to Flash-plugin. Silverlight aims to compete with Adobe Flash and the presentation components of Ajax. Content created with Silverlight is more searchable and indexable than that created with Flash as it is not compiled, but represented as text.

  

• 
  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 Tutorials
  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 Tutorials.

  

  

• 40 Great Open Source Graphic Programs
  An overview of 40 free applications you can use as alternatives for professional image editing software.
• StyleIgnite
  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 forms or tables, Styleignite offers an overview of CSS Layouts, navigation menus, text styles, site elements, forms, graphics and further scripts.
• CSS selectors: basic browser support
  These charts compare basic support for the various selectors, pseudo-classes and pseudo-elements defined in the CSS Selectors module.

  

  Ultimate .htaccess file sample
  An ultimate .htaccess-skeleton you can use to prevent hotlinking, require SSL-authentication or protect your data with a password.

Desktop-Tools

• Windows Live Writer
  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 plugins can extend the functionality of the tool.

  

• AutoHotkey
  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: Texter.
• Flickr Foldr Monitr
  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 Toolbox
  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.

  

Plugins, Extensions

• Firefox-Extension Book Text Mark
  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 Development
  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 Package and add few lines of code to your PHP application.

Web Tools

• CodePress - Real Time Syntax Highlighting Editor written in JavaScript
  CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it’s being typed in the browser. You can also use auto completion, shortcuts and multiple windows for coding online. The source code of the tool (JavaScript) can be downloaded, installed and modified without any restrictions.
• oSkope Visual Search
  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
  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 resizing
  We’ve reported about in our previous best-of-issue, Best Of August. 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.
• Yuuguu
  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
  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.

  

• flauntR
  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 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.
• CSS Menu Generator
  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 Generator
  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 Checker
  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 Selectors, a Firefox-extension by Sitepoint.com.

Ajax, Javascript

• Control Suite
  Control Suite is a collection of six high quality widgets and controls for Web 2.0 applications built using the Prototype JavaScript framework. Each script is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers. Including tabs, rating and progress bar.
• FancyUpload
  Swf meets Ajax. An upload widget that allows queued multiple-file upload including progress bars.
• DOMAssistant 2.0
  The JavaScript-libary DOMAssistant is, compared to other libraries, a simple and minimalistic solution for DOM-Scripting, e.g. for manipulation of nodes in the DOM-tree, adding events, classes etc.
• Ext JS - JavaScript Library
  An extensive JavaScript-Framework with numerous modules and components such as tables, trees, windows, layouts, forms, and tabs. All of them look as if they’ve been used in standard desktop-applications.

  

• Curl.js 1.0
  curl.js 1.0 allows you to add an page curl effect (inc. backside mask) to images on your sites. It uses unobtrusive javascript to keep your code clean.
• Accordion v2.0
  A lightweight accordion that is built with Scriptaculous, has vertical, horizontal and nested styles and works properly in every browser.
• jQuery UI: Widgets, Components, and Interactions
  jQuery UI is a set of widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. The core of the library revolves around different mouse interactions, namely drag and dropping, sorting, selecting, and resizing.
• New unobtrusive dynamic flickr badge
  A compact Flickr-Badge for presentation of Flickr-images with a navigation option.

  

• Usability enhancements with JavaScript
  An overview of JavaScript-Snippets which can enhance the usability of a web site. Among them: Link highlighting (links to .pdf or .zip-files), CSS for the icons, Highlighting heading anchors and Transforming quotes.
• Grid Layout
  The Grid Layout Javascript enables web-developers to stick to a Grid Layout quickly and simply by including the Grid Layouts Javascript file and simple XHTML code.
• Open external links in new window
  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.

Web-Typography

• 15 Excellent Examples of Web Typography
  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 Headlines.

  

Articles and Publications

• Firebug Tutorial - Logging, Profiling and CommandLine
  Firebug is probably the first choice when it comes to debugging JavaScript-based applications. This article gives a deep insight into the features of Firebug and shows how one can use the Console in web projects.
• 
  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 application
  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 Guidelines
  Jakob Nielsen presents 13 guidelines for design of tab-based navigation menus.
• Tips for Keeping Forms Accessible
  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 Redesign
  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 Curtain
  “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’ Law
  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 time
  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)
  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 Examples
  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_rewrite module, 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 Sheet for printing out, learning and looking up.
• Take the Leap: First Steps in Freelancing [Find Clients]
  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 Website
  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 Images
  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

• Showcase Point
  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 Database
  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 Available
  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 Theme, Revolution Theme and Grid Focus.

  

• 
  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 designs
  Interesting approaches to design of business cards.

  

  

• welovewp.com | Showcasing Wordpress Powered Sites
  A showcase of weblogs which run on Wordpress.
• Most Sliced | Design slicers reviewed
  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 & reviews, is all the information you need to select the best slicing service for your needs. We’ve already presented some of them.

Icons, Fonts, Templates

• Ajax Digest // Non-notorious CSS templates for websites
  15 free CSS-templates designed by professional design agencies - available for free download.

  

• Sizcons - Random Jabber
  A free icon-set with 46 Icons in 12×12 and 16×16 formats.

  

• The Holy Mail
  Recently newsletter design is becoming more and more important. There is a showcase of newsletter-designs and professional solutions for testing newsletter-designs 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 Shirt
  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)
  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 & Steve Jobs
  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.0
  Dilbert Comic Strip about Web 2.0. Funny!

  

• Knit Night Cupcakes
  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 .

  

This entry was posted on Thursday, October 11th, 2007 at 8:39 am and is filed under Internet, Windows, Linux, Apple, Interesting. You can follow any responses to this entry through the feed. Responses are currently closed, but you can trackback from your own site.