Best of September 2007

Advertisement

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 Pricing Matrix

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

    Dynamic CSS

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

    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.

    Custom File Input

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

    List Expander

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

    Fixing Alignment

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.

    Silverlight

  • Google Presentations
    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.

    Adobe Photoshop Tutorials

    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.

    Selectors in CSS

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

    Windows Live

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

    Foldr Monitr

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

    Free CSS Toolbox

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.

    oSkope

  • 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 Content Aware Image Resizing 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.

    Only2Clicks

  • flauntR
    A free web-based image editing tool with thousands of one click effects, photo frames, filters, overlays and digital scrapbooking styles.
  • FeedHub
    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.

    Menus

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

    ext

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

    Flickrbadge

  • 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

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.
  • 7 Rules for Communicating Clearly and Concisely in Email
    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.

    How to price your web application

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

    Fitts

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

  • 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

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.

    All Free Logo

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

    Revolution Theme

  • Collection: Design Patterns
    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.

    Business Cards

    Business Cards

  • 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 and 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

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.

    Wi-Fi-Shirt

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

    Presentation Zen

  • Dilbert Comic Strip – Web 2.0
    Dilbert Comic Strip about Web 2.0. Funny!

    Dilbert

  • 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 are absolutely stunning to look at.

    Knit Night Cupcakes

↑ Back to top

The Smashing Team loves high-quality content and cares about little details. Through our online articles, books and eBooks and Smashing Conferences, we are committed to stimulating creativity and strengthening the Web design community’s creative forces.

  1. 1

    Nice!
    i love all your post.

    0
  2. 2

    Wow great list, thanks smashing mag!

    ~ Razvan
    design creme

    0
  3. 3

    Always a pleasure to browse through your posts – fun, informative, worthwhile :)

    0
  4. 4

    WoWowowow. The best of September, but i must spend my freetime until December to check all the contents!!! great!!!!

    0
  5. 5

    ALWAYS helpful.

    This site has easily become my most checked site on my list!

    Keep it up!

    0
  6. 6

    Ah, there goes the rest of this week, and to think I was hoping to do some work on my VoIP stuff :(

    Once again, top class!

    Thanks

    0
  7. 7

    Great overview

    0
  8. 8

    Amarjeet Singh Rai

    October 10, 2007 5:31 am

    One of the best posts ever!

    0
  9. 9

    Another ‘smashing’ post!

    0
  10. 10

    test09 from Morocco
    i love this site so much ..
    it’s very useful

    thanks :)

    0
  11. 11

    Nice list! I will add my bookmarks this page…
    My favorite Free Css Toolbox, I search like this application and I found here.

    Thanks Smashin’M!

    0
  12. 12

    This one is maybe #1 in my book. Awesome resources

    0
  13. 13

    Heyyy!

    Another awesome list guys. Really saves me time looking for these gems.

    Keep the good work up!
    - Marcin

    0
  14. 14

    Thanks a lot for adding my Firebug tutorial in the best links of September 2007.. I used to read your magazine since you posted about CSS float trick.. I like your magazine because all posts that you post here are valuable and very useful for us.

    0
  15. 15

    Great round up. Love those business cards – b/c design is an art these days :)

    0
  16. 16

    Thanks for smashing the smashing articles!!!! you guys are great!!! keep the great posts coming!!!!

    0
  17. 17

    Thanks for smashing with smashing articles!!!!

    0
  18. 18

    Awesome, I love the “Best Of” series! Always a highlight!

    0
  19. 19

    great links, as the heading says .. its the best ;D

    0
  20. 20

    great as usual …..

    i like Smashing magazine …

    Best Regards.

    0
  21. 21

    Absolutely amazing! Big thanks for sharing this and of course past articles, too!!!

    0
  22. 22

    Thanks for the roundup.
    Some cool CSS tricks.

    0
  23. 23

    Well I was having a horrible day, then I came to Smashing to receive another “Best Of” installment. Awesome!

    0
  24. 24

    Great list!! There goes my productivity at work today as I read all these posts!

    0
  25. 25

    Great recap as always guys! Now, I got to clear my day to check out all of these links.

    0
  26. 26

    I wonder why oSkope can’t handle words/phrases.

    0
  27. 27

    Tablecloth from cssglobe.com missing here !!!

    0
  28. 28

    css menu nmaker is a rip-off of http://www.13styles.com.

    0
  29. 29

    Once again, a fabulous list! Thank you.

    0
  30. 30

    thanks lads for collecting all these. well done!

    0
  31. 31

    I love reading your content! Great list, not once but for many times already!

    0
  32. 32

    Great lists.. as usual.. keep up the good work.. Thankx!!

    0
  33. 33

    This is an AMAZING list… one important correction though… I collected those Design Patterns, not Brian Christiansen. ;)

    Proper credit would be appreciated! Thanks!

    0
  34. 34

    Mama Mia, this much greatness to explore, so little time.

    0
  35. 35

    Thanks for the roundup.
    Some cool CSS tricks.

    0
  36. 36

    sdfsdafsdaf

    0
  37. 37

    [url=http://www.chiflat-iron.com]chi turbo[/url]

    July 27, 2010 5:45 am

    wow..its a great fun here….which i have done today through pdf format.Your blog is very much useful and rocking dear. you have provided detailed knowledge and information about today’s latest technologies, online communications and other businesses.

    0
  38. 38

    thanks for sharing…..

    0
  39. 39

    Delightful blog post you have here. I hadn’t studied such.

    0

↑ Back to top