Menu Search
Jump to the content X

Best of September 2007


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 Link

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

    Dynamic CSS7
  • CSS Sitemap Styler: Style your Sitemaps with CSS and Javascript8
    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.

    CSS SiteMap10
  • 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
    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 Input13
  • CSS Only DOM Tabs14
    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 Captcha15
    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.

    List Expander18
  • Fixing Tricky Layouts with the YUI Dom Collection19
    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 (Example20). Christian Heilmann delivers two solutions – a CSS-based21 and a JavaScript-based22 method.

    Fixing Alignment23

References, Tutorials Link

  • Microsoft Silverlight 1.024
    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 Presentations26
    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.

    Adobe Photoshop Tutorials29
    Adobe Photoshop Tutorials30
  • 40 Great Open Source Graphic Programs31
    An overview of 40 free applications you can use as alternatives for professional image editing software.
  • StyleIgnite32
    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.

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

Desktop-Tools Link

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

    Windows Live40
  • AutoHotkey41
    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.

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

    Free CSS Toolbox46

Plugins, Extensions Link

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

Web Tools Link

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

  • CoScripter52
    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.
  • Yuuguu56
    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.
  • Only2Clicks57
    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.

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

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

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

Ajax, Javascript Link

  • Control Suite68
    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.
  • FancyUpload69
    Swf meets Ajax. An upload widget that allows queued multiple-file upload including progress bars.
  • DOMAssistant 2.070
    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 Library71
    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.073
    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.074
    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
    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 badge77
    A compact Flickr-Badge for presentation of Flickr-images with a navigation option.

  • Usability enhancements with JavaScript79
    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 Layout80
    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 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.

Web-Typography Link

Articles and Publications Link

  • Firebug Tutorial – Logging, Profiling and CommandLine85
    Firebug86 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 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.

    How to price your web application89
  • 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_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 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.
  • Flipbook101
  • 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 Link

Design-Galleries, Showcases, Inspiration Link

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

    All Free Logo106
  • 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.

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

    Business Cards114
    Business Cards115
  • 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 Link

The Last Click Link

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

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

    Knit Night Cupcakes134

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
  121. 121
  122. 122
  123. 123
  124. 124
  125. 125
  126. 126
  127. 127
  128. 128
  129. 129
  130. 130
  131. 131
  132. 132
  133. 133
  134. 134

↑ Back to top Tweet itShare on Facebook

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

  1. 1

    i love all your post.

  2. 2

    Wow great list, thanks smashing mag!

    ~ Razvan
    design creme

  3. 3

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

  4. 4

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

  5. 5

    ALWAYS helpful.

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

    Keep it up!

  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!


  7. 7

    Great overview

  8. 8

    Amarjeet Singh Rai

    October 10, 2007 5:31 am

    One of the best posts ever!

  9. 9

    Another ‘smashing’ post!

  10. 10

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

    thanks :)

  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!

  12. 12

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

  13. 13


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

    Keep the good work up!
    – Marcin

  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.

  15. 15

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

  16. 16

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

  17. 17

    Thanks for smashing with smashing articles!!!!

  18. 18

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

  19. 19

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

  20. 20

    great as usual …..

    i like Smashing magazine …

    Best Regards.

  21. 21

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

  22. 22

    Thanks for the roundup.
    Some cool CSS tricks.

  23. 23

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

  24. 24

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

  25. 25

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

  26. 26

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

  27. 27

    Tablecloth from missing here !!!

  28. 28

    css menu nmaker is a rip-off of

  29. 29

    Once again, a fabulous list! Thank you.

  30. 30

    thanks lads for collecting all these. well done!


↑ Back to top