Best of December 2006

Advertisement

Every month we take a look at new tutorials, tips, articles and techniques presented in Web-Development-related blogs and magazines and collect them for you. Below an overview of the best tools and articles, which have become popular or were published in December 2006. Links checked: June/23. 2008

Colors, Palettes, Textures etc.

  • Color Theory for Developers1
    A brief overview of important aspects of color theory and its use in web-development. Apparently, HSB [Hue / Saturation / Brightness] model provides a much more realistic way of controlling color.
  • Colour with Contrast
    Want to make sure your site is readable by the widest possible audience without being “boring” and “ugly” but aren’t sure how? A selection of tools are now available to help you choose colours or check the colours you’ve been given to provide adequate contrast.
  • Where can I find textures and background images?2
    Web offers many useful resources one should always keep in mind searching for textures. Below you’ll find a hand-picked selection of some useful resources related to textures and background images. We tried to pick the best ones which offer quality and professional content without annoying advertisement.

Icons, WordPress Themes

Design-Galleries, Showcases, Inspiration

References, Tutorials, Tips

Tools, Web-Services

  • Firebug22
    Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. This screencast23 shows, how you can debug JavaScript code efficiently.
  • WYMeditor24
    WYMeditor is a free web-based WYSIWYM XHTML editor. WYMeditor has been created to generate perfectly structured XHTML strict code, to conform to the W3C XHTML specifications and to facilitate further processing by modern applications.
  • Chacha25
    Cacha is a new guide-based search engine, powered by human intelligence. A place to find exactly what you’re looking for without sifting through millions of results. Chacha offers Intelligent search results from people who are knowledgeable about the very thing you are looking for.
  • Iloggo26
    Creates grid-maps of logos of your favourite web-services.
  • Rounded Cornr27
    Generates HTML/CSS-Code for rounded corners. Alternatively you can also use Google28 to create rounded corners. A round-up of techniques which generate rounded corners on the fly can be found here29.Screenshot
  • Letterpop.com30
    Helps to develop creative newsletter designs with few clicks.

CSS-Techniques, (X)HTML, PHP

  • Intricate Fluid Layouts in Three Easy Steps31
    YUI Grids CSS32 offers many new options for web-developers. One of them is fluid multi-column cross-browser layouts, which make it possible to create quite complex33 Layouts. You can make your work with YUI more efficient using YUI CSS Grid Builder34.
  • Bye-bye to boring page footers35
    Footers don’t have to be boring. Simon Collison describes one possibility to make footers visually appealing.
  • Overlapping tabbed navigation in CSS36
    A tutorial showing how overlapping tabbed navigation is possible in CSS and can be cross-browser compatible, accessible and javascript free..
  • Easy Cross Browser Transparency
    If you’ve ever found yourself in the position of needing to place a semi-transparent image or layer on a web page, you’ve probably ended up reading various arcane methods involving 24-bit PNG graphics and proprietary IE AlphaImageLoader expressions. Luckily, there is an easier way; albeit at the expense of valid CSS.
  • Making Compact Forms More Accessible37
    Tightly designed forms can look great on paper, but they often ignore accessibility issues altogether. Mike Brittain presents his solution.
    Screenshot
  • Switchy McLayout: An Adaptive Layout Technique38
    Marc van den Dobbelsteen delivers a new technique, which we’ve been waiting for so long. Liquid Switchy McLayout adapts its appearance (not only the size of pages, but also the content!) depending on the screen resolution, in which it is viewed. Example39.
  • Sifr 3 Beta Released40
    Compared to sIFR 2 the new version is radically different. Backwards compatibility has been broken, but that’s okay since deployment is now ridiculously easy. There’s great control over how the text is rendered inside the Flash movie: you can easily use bold and italics together, or use different colors. There’s support for leading, kerning and opacity, filters, blend modes and anti-aliasing.

CSS Tools and Services

  • Automatic merging and versioning of CSS/JS files with PHP
    41“Most sites include a number of CSS and JavaScript files. Whilst developing it’s usually easier to manage them as separate files but on a live site it makes sense to merge files to reduce the number of HTTP requests the browser has to make. I hate maintaining this stuff manually so I’ve written a PHP script42 which takes care of merging files on the fly whilst also versioning the merged file automatically as the various component files change”.
  • CSS Advisor Beta43
    New service, provided by Adobe, which is supposed to help developers to find solutions to CSS and browser compatibility issues, share solutions and workarounds you’ve discovered with the community, comment on and improve existing solutions.

Ajax, Javascript

  • Cody Lindley: Javascript44
    Collection of articles about Javascript – from Stripe Dance45 (Adding Stripes To Tables and Lists) to jTip – A jQuery Tool Tip46.
  • The Really Simple History (RSH)47
    The Really Simple History (RSH) framework makes it easy for AJAX applications to incorporate bookmarking and back and button support. By default, AJAX systems are not bookmarkable, nor can they recover from the user pressing the browser’s back and forward buttons. The RSH library makes it possible to handle both cases.
  • Tasty Text Trimmer
    48In most cases, when designing a user interface it’s best to make a decision about how data is best displayed and stick with it. Failing to make a decision ultimately leads to too many user options, which in turn can be taxing on the poor old user. Under some circumstances, however, it’s good to give the user freedom in customising their workspace. Sliding a slider left of right dynamically changes the length of each article shown. It’s that kind of awesomey magic stuff that’s enough to keep you from sleeping. Let’s build one.
  • Accessible JavaScript: Beyond the Mouse49
    The combination of Accessibility and JavaScript is possible. James Edwards explains, how it works.Screenshot

Web-Typography

  • 15 tips to choose a good text type50
    Juan Pablo De Gregorio describes 15 typographic aspects you should keep in mind choosing typofaces for your web-sites.
  • Compose to a Vertical Rhythm51
    “The basic unit of vertical space is line height. Establishing a suitable line height that can be applied to all text on the page, be it heading, body copy or sidenote, is the key to a solid dependable vertical rhythm, which will engage and guide the reader down the page. To see this in action, I’ve created an example52 with headings, footnotes and sidenotes.”
  • The 100% Easy-2-Read Standard53
    5 rules for better legibility and reading experience.

Articles and Blog Posts:

The last click:

  • Who thinks that Captcha is an ultimate solution against spam, should think again72. New techniques make it possible to circumvent the Captcha mechanism. In this context one should take bulletproof solutions73 into consideration.

Footnotes

  1. 1 http://www.devsource.com/article2/0,1759,2069735,00.asp?kc=DSRSS04029TX1K0000651
  2. 2 http://www.smashingmagazine.com/2007/01/02/where-can-i-find-textures-and-background-images/
  3. 3 http://www.factorycity.net/projects/microformats-icons/
  4. 4 http://www.bartelme.at/journal/archive/microformats_icons/#When:09:22:00Z
  5. 5 http://www.brandspankingnew.net/archive/2006/12/hohoho.html
  6. 6 http://www.devlounge.net/extras/iceburgg
  7. 7 http://www.cssliquid.com/
  8. 8 http://www.logotypes.ru/default_e.asp
  9. 9 http://www.brandsoftheworld.com/
  10. 10 http://www.flickr.com/photos/splat/sets/981332/
  11. 11 http://smashingmagazine.com/2006/12/19/50-beautiful-css-based-web-designs-in-2006
  12. 12 http://wisdump.com/design/top-7-freshest-designs-of-2006/
  13. 13 http://www.fontwerk.com/340/top-ten-foundry-websites-2006/
  14. 14 http://psychology.wichita.edu/optimalweb/
  15. 15 http://www.useit.com/alertbox/9605.html
  16. 16 http://www.cre8d-design.com/blog/2007/01/01/useful-resources-for-creating-a-wordpress-theme/
  17. 17 http://obscuretags.com/
  18. 18 http://veerle.duoh.com/blog/comments/creating_a_page_curl_in_photoshop/
  19. 19 http://www.andreibilan.blogspot.com/2006/09/bling-bling-your-logo.html
  20. 20 http://www.metacafe.com/watch/317062/correct_way_to_convert_any_photo_to_grayscale/
  21. 21 http://www.nicora.net/index.cfm?method=article&blogID=C88F54CC-D998-BFC0-D995-3823E52FA483
  22. 22 http://getfirebug.com
  23. 23 http://www.digitalmediaminute.com/screencast/firebug-js/
  24. 24 http://www.wymeditor.org/en/
  25. 25 http://www.chacha.com
  26. 26 http://www.iloggo.pl/displayWelcomeScreen
  27. 27 http://www.roundedcornr.com/
  28. 28 http://xach.livejournal.com/95656.html
  29. 29 http://www.smileycat.com/miaow/archives/000044.html
  30. 30 http://letterpop.com
  31. 31 http://24ways.org/2006/intricate-fluid-layouts
  32. 32 http://developer.yahoo.com/yui/grids/
  33. 33 http://24ways.org/examples/intricate-fluid-layouts/complex-layout-example.html
  34. 34 http://blog.davglass.com/files/yui/grids/
  35. 35 http://www.thinkvitamin.com/features/css/bye-bye-to-boring-page-footers
  36. 36 http://www.shapeshed.com/journal/overlapping_tabbed_navigation_in_css/
  37. 37 http://www.alistapart.com/articles/makingcompactformsmoreaccessible
  38. 38 http://www.alistapart.com/articles/switchymclayout
  39. 39 http://www.alistapart.com/d/switchymclayout/transition_layout_news.html
  40. 40 http://novemberborn.net/sifr3/beta1
  41. 41 http://www.ejeliot.com/blog/72
  42. 42 http://www.ejeliot.com/samples/combine/combine.phps
  43. 43 http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=1
  44. 44 http://codylindley.com/Archive_ss/?c=Javascript
  45. 45 http://codylindley.com/Javascript/202/stripe-dance
  46. 46 http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip
  47. 47 http://codinginparadise.org/projects/dhtml_history/
  48. 48 http://24ways.org/2006/tasty-text-trimmer
  49. 49 http://www.sitepoint.com/article/accessible-javascript
  50. 50 http://typies.blogspot.com/2006/11/15-tips-to-choose-good-text-type.html
  51. 51 http://24ways.org/2006/compose-to-a-vertical-rhythm
  52. 52 http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html
  53. 53 http://www.informationarchitects.jp/100E2R/
  54. 54 http://www.campaignmonitor.com/blog/archives/2005/11/html_email_desi.html
  55. 55 http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
  56. 56 http://www.3point7designs.com/blog/2006/12/26/semantic-tags-you-may-have-forgotten
  57. 57 http://www.askapache.com/2006/htaccess/htaccesselite-ultimate-htaccess-article.html
  58. 58 http://www.aplus.co.yu/web-dev/insert-html-page-into-another-html-page/
  59. 59 http://fadtastic.net/2006/12/11/the-demise-of-flash-8-main-reasons/
  60. 60 http://24ways.org/2006/the-mobile-web-simplified
  61. 61 http://www.snook.ca/archives/javascript/anatomy_of_a_drag_and_drop/
  62. 62 http://www.downloadsquad.com/2006/12/11/why-digg-is-destined-for-failure/
  63. 63 http://www.456bereastreet.com/archive/200612/97_of_websites_still_inaccessible/
  64. 64 http://www.nomensa.com/resources/research/united-nations-global-audit-of-accessibility.html
  65. 65 http://news.bbc.co.uk/1/hi/technology/6210068.stm
  66. 66 http://www.2dot0-film.co.uk/Web2/P6/p6.html
  67. 67 http://www.thinkvitamin.com/features/design/communicating-web-20-through-design
  68. 68 http://www.downloadsquad.com/2006/12/01/seven-rules-for-web-2-0-startups/
  69. 69 http://www.modernlifeisrubbish.co.uk/article/10-reasons-why-top-10-lists-are-so-popular
  70. 70 http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html
  71. 71 http://www.tutorialized.com/tutorial/How-To-Write-Effective-Tutorials/12606
  72. 72 http://sam.zoy.org/pwntcha/
  73. 73 http://www.smashingmagazine.com/2006/12/14/preventing-spam-bulletproof-solution/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    howdy – i dont like this word “awesome”;
    but what can i write: this post is awesome !
    thanks for this.

    0
  2. 2

    Really great list. I opened lots of tabs on this one. Thanks.

    0
  3. 3

    Veerle Duoh Pieters

    0
  4. 4

    I’ve bookmarked lots of pages from smag, but now I guess it is time I subscribe to rss :) Can’t miss this stuff…

    Good job guys, and thanks.

    0
  5. 5

    hello friends, I want source code which allow me to read the pages on my website but not allow anyone to save it on their hard-disk in any manner (i.e. 1)By using ‘save web page as’option in file menu or 2)using ctrl+s or 3)using right click)
    I find the solution for right click but, I am struggling with 1st option . So can u please help me

    0

↑ Back to top