Best of February 2007

Advertisement

Every month we take a look a round and select some of the most interesting web-development-related web-sites. 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 February 2007. Links checked: May/26 2008.

References, Tutorials

  • IMified – Instant Productivity1
    integrates modern Web 2.0-applicaion in an Instant Messenger of your choice and gives you an instant access to web-services. This Desktop-Tool supports BaseCamp, Google Calendar, Blogger, Livejournal, WordPress, Livejournal, Movabletype, Backpack and other services. You can integrate IMified in AIM, MSN and Google Talk/Jabber.Best of February 20062
  • MiniAjax.com3
    MiniAjax is a showroom of nice looking simple downloadable DHTML and AJAX scripts
  • My Hourly Rate Calculator4
    This free tool will help you calculate what you should be charging for your services
  • Upcoming Events in 20075
    The Digital Web Events Calendar lists workshops, conferences, and other gatherings of interest to web professionals—designers, developers, information architects, and others
  • Job Pile – Aggregating the Best Job Boards on the Web6
    Aggregating the Best Job Boards on the Web. You’ll find more in our Article IT/Tech Job Boards7
  • Multi-Column Layouts Climb Out of the Box8
    Create an elastic multi-column layout of equal height.
  • Tutorials on Microformats9
    Tutorials on Microformats: hCard, hCalendar, hReview and hAtom
  • Flash embed test suite10
    The Flash embed test suite assesses the browser support for various markup-based embedding methods. It includes information on parameters including support for different Flash publish settings, streaming, and scriptability.
  • SimpleLog 2.0.211
    A simple and free A Ruby on Rails weblog application that helps you focus on writing above all else. SimpleLog has all the features you want in a weblogging applicaton wrapped in an efficiently designed interface that eliminates clutter.
  • Creating a 3D effect with image editing software (GIMP or Photoshop)12Here’s how to make a neat effect to make it look like the subject of a photo is popping out of the background. This can be done with GIMP (GNU Image Manipulation Program) or Photoshop.
  • Papervision3D13
    Open source flash 3d engine.
  • Mozilla Firefox Cheat Sheet14
    Keyboard and Mouse shortcuts and other reference information
  • Web Directions North | February 6 – 10, 2007 – WDN07 Resources15
    “Web Directions North was a week of enlightenment, inspiration, networking, and snowboarding. Over the coming weeks we’ll be making podcasts of various sessions available, so make sure to check back for the start of those. We’ve also put together resource pages of speaker’s notes and slides — more to come soon! You’ll find all of these in the WDN07 resources section of the site.”
  • Logo Design Trends 200716
    11 trends that will define logo design in 2007: Talk Boxes, Cluds, Reflections, Rectangle, 3d Puffies, Hot Dogs, Transmission beam, People, Transparency, Outlines, Punctuation
  • Fireform17
    A simple yet configurable form filler. Includes support for multiple profiles and custom field names.
  • Internet marketing videos from Tubetorial18
    Free step-by-step video tutorials in a quick and easy serial format. Here’s what you’ll learn with tubetorial: Web development and technology tips, Internet marketing strategies and techniques, Legal issues for Internet content producers and marketers.
  • Web Browser CSS Support19
    Detailed information about CSS support in recent versions of Microsoft Internet Explorer, Mozilla/Firefox/Netscape, and Opera.”

Tools, Web-Services

  • Quick Highlighter20
    A simple to use code syntax highlighter that makes creating code sample and pages a breeze.
  • Weebly – Website Creation Made Easy21
    A free website creation tool that uses a drag and drop interface
  • DOMTool22
    To use DOMTool simply paste an HTML snippet into the input field, press “Create DOM Statements” and voila, there you have the DOM sequence to create that content.
  • Introducing GridMaker23
    GridMaker is a small script for Photoshop which allows speedy development of simple grids.
  • WriteMaps24
    WriteMaps is a free web-based tool that allows you to create, edit, and share sitemaps online.
  • frevvo – web form builder25
    frevvo Live Forms™ Designer leverages Ajax technologies to create rich, dynamic forms without writing a single line of code.
  • bubbl.us26
    a simple powerful mind mapping application: Share and work together with your friends. Brainstorm without touching the mouse. Display your ideas online or through email. Print your work.
  • WordPress Feed Styler27
    Feed Styler is a WordPress plugin for WordPress users who are comfortable with CSS and would like to be able to style their feeds. Feed Styler enables you to keep your existing class and ID style declarations in your content, but allows a different style to be applied to the feed of that same content.

CSS-based Techniques, (X)HTML, PHP

  • Mini tabbed pages28
    A method of compressing short pieces of information into six mini tabbed pages.
  • Vertical Bar Graphs using CSS and PHP29
    Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.
  • Suckerfish HoverLightbox Redux30
    An effective way of presenting an image gallery using mostly CSS and a bit of JavaScript.
  • Flexible fixed layouts31
    In this month’s tutorial, we’re going to show you one method for creating a layout that works well at both of the most popular screen sizes, despite the design being a fixed width. It results in a flexible design that’s suitable for many applications, including corporate sites, portfolios and blogs.
  • Variables in your CSS via PHP
    Create ‘color constants’ in your CSS, and more interesting, create randomly generated paths for the backgrounds of DIV’s.
  • CSS Speech Bubbles32
    Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict.Tested in all major browsers.Best of February 200633
  • Even More Rounded Corners With CSS34
    another article detailing a method of doing rounded corners with CSS. In this case, single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you (or your designer) could want.
  • Simple Round CSS Links ( Wii Buttons )35
    Now you can style both < a /> and < button /> in this super easy and light-weight solution.
  • Tableless forms36
    Learn by example how to create a tableless css form

CSS Tools and Services

Ajax, Javascript

  • FrogJS Javascript Gallery38
    FrogJS is a simple, unobtrusive javascript gallery.
  • Ajaxload39
    Ajax loading gif generator
  • Plotr40
    Plotr is a javascript framework which enables you to render charts in most modern browsers. It’s based on the PlotKit Framework (renderer for Mochikit) and it depends on the Prototype Javascript Framework.Best of February 200641
  • Dynamic Right Click Context Menu42
    RightContext is a supercharged right click context menu.
  • jQuery 1.1.2 API Browser43
    The jQuery API browser provides an intuitive interface to quickly find information on jQuery’s methods and properties

Web-Typography

Articles and Posts

  • How to use OpenID46
    OpenID lets you log in to different sites without having to create a new username and password for each one. This screencast demonstrates OpenID in action.
  • Five Principles to Design By47
    Fundamentals of how to design for usage by others, not just yourself.
  • Flash Embedding Cage Match48
    In this article, I will look into the complexities and subtleties of embedding Flash content and examine the most popular embedding methods to see how good they really are – by Bobby van der Sluis
  • Ruby on Rails for the Rest of Us49
    “You’re a designer, information architect, or project manager, or you may develop with PHP, but don’t claim to be a code warrior. Clients have been asking about Ruby on Rails, or your colleagues are using it. You’d like some clarity on what it is and when to use it—without wading through articles thick with jargon and alphabet soup. If you’re looking to move ahead, painlessly, in your understanding of this programming framework, then Justin Williams’ “Ruby on Rails for the Rest of Us” is just the ticket.”
  • 15 CSS Properties You Probably Never Use (but perhaps should)50
    After writing 5 HTML Elements You Probably Never Use (but perhaps should), I thought creating something similar for CSS was in order. These are all CSS level 2 properties but some of them don’t work in all browsers, so make sure and test things out before putting them into use.
  • position:relative and overflow in Internet Explorer51
    I’ve been working on this layout that had a relatively positioned element inside a container with overflow. Everything looked good until I switched to IE7 and noticed that my positioned element remained fixed…
  • X/HTML 5 Versus XHTML 252
    The competition to become the next markup language for the Web is heating up. This article takes a look at what’s cool and what’s uncool about the competing technologies.
  • Evaluation of WYSIWYG editors (2007)53
    It has been almost a year since I tested accessibility features in some of the more popular WYSIWYG editors commonly found in open source content management systems (see Evaluation of WYSIWYG editors). During this time, most of these editors have been further developed. Let’s have a look at how they fare a year on.Best of February 200654
  • Practical Use for Those Rarely Used HTML Tags55
    beschreibt, in welchen Situationen und wie man die Tags ABBR, ACRONYM, ADDRESS, BLOCKQUOTE, CITE, DFN, DL/DT/DD und Q verwendet.
  • 8 Web Design Tactics to Help You When You Are Stuck56
    Web design can be incredibly frustrating. You’d think that with the infinite possibilities of what-goes-where it’d be pretty easy to land a design that works, yet somehow we’ve all been stuck before: working hour after hour on a design that refuses to look right. Throwing away pixels like they’re going out of style. These 8 tactics are what I use to get out of that sticky spot.
  • How to Protect CSS Mods for ANY WordPress Theme57
    Starting today, you can futureproof your CSS changes by implementing a custom stylesheet that simply overrides the styles defined in the theme’s original stylesheet. Here’s what you need to do.
  • The Web’s Best Interface Design58
    the amount of new web applications, features, and companies sprouting up is just astounding, and while some like to characterize “Web 2.0″ design as involving lots of cliche diagonal lines and shadows it still takes a lot of skill to execute an attractive user interface. I’ve been checking out new sites and web applications for many months now and I’ve put together my list of the best interface design examples I’ve found..
  • Making a Good Favicon59
    How to make a good favicon by Jonathan Snook
  • HowTo: Make Pretty Pie Charts60
    tutorial on making nice pie charts in Adobe Illustrator.
  • CSS techniques I use all the time61
    I’m always learning new things with CSS. It’s interesting because I’ve thought of myself as a CSS expert for a while now (I’ll challenge anyone to a competition, seriously) but I still keep learning and improving. I’ve come across some techniques lately that are extremely valuable and worth sharing. Have a look:
  • Web Misunderstandards62
    “As I referenced in my last article, the benefits and characteristics of Web standards are not being effectively communicated to many who need to hear and learn about them. The result is that some understandably leap to inaccurate conclusions while gross mischaracterizations are allowed to fester among members of the design and development community” – by Andy Rutledge.
  • Icon Design: Sizing63
    One of the more deceptively time-consuming things you’ll do when creating an icon is producing out size variations. If you require a single icon in more than one size, the time you spend designing the first size is only about two thirds of the work you’ll end up doing; the other third lies in tweaking it for different dimensions – by Dave Shea

Colors, Textures, Patterns

  • Color Tools64
    A list of 40 color tools available online.
  • ColorJack: Sphere65
    Just select the kind of palette you’re looking for, then start moving the cursor around until you find a scheme you like.

Design-Galleries, Showcases, Inspiration

Free Icons, Fonts

  • Freebies | BittBox69
    Homemade vector freebies, design tips, tutorials and bitts
  • Freefont: 5 More Freefonts70
    Every week we take a close look around, visit dozens of typography-related sites, check out the latest updates and choose the best free fonts, which have been released or appeared over the last few weeks. And all the fonts we find are getting published immediately, here on Smashing Magazine.Best of February 200671

The last Click

  • Web 2.0 … The Machine is Us/ing Us72
    One video tells sometimes more than dozens of words. This short movie about the evolution of the Internet describes the most important changes the Web undergoes now and advantages of Web 2.0. This video was viewed by more than 1.6 Mio users on YouTube.

Footnotes

  1. 1 http://www.imified.com/
  2. 2 http://www.imified.com
  3. 3 http://www.miniajax.com/
  4. 4 http://www.freelancetipster.com/hourlyrate/
  5. 5 http://www.digital-web.com/events/
  6. 6 http://artypapers.com/jobpile/
  7. 7 http://www.smashingmagazine.com/2007/03/08/ittech-job-boards/
  8. 8 http://www.alistapart.com/articles/multicolumnlayouts
  9. 9 http://www.xfront.com/microformats/
  10. 10 http://www.swffix.org/testsuite/
  11. 11 http://simplelog.net/
  12. 12 http://www.instructables.com/id/E6G7L91G9AEXCFGBTI
  13. 13 http://blog.papervision3d.org/tag/demos/
  14. 14 http://lesliefranke.com/files/reference/firefoxcheatsheet.html
  15. 15 http://north.webdirections.org/
  16. 16 http://www.logoorange.com/logo-design.php
  17. 17 https://addons.mozilla.org/firefox/3193/
  18. 18 http://www.tubetorial.com/
  19. 19 http://www.webdevout.net/browser-support-css
  20. 20 http://quickhighlighter.com/
  21. 21 http://www.weebly.com/
  22. 22 http://muffinresearch.co.uk/archives/2006/11/28/domtool/
  23. 23 http://www.andrewingram.net/articles/introducing_gridmaker/
  24. 24 http://www.writemaps.com/
  25. 25 http://www.frevvo.com/frevvo/web/home
  26. 26 http://bubbl.us
  27. 27 http://www.devlounge.net/extras/feed-styler
  28. 28 http://www.cssplay.co.uk/menus/mini_tabbed_pages.html
  29. 29 http://www.terrill.ca/design/vertical_bar_graphs/
  30. 30 http://mondaybynoon.com/2007/02/19/suckerfish-hoverlightbox-redux/
  31. 31 http://www.netmag.co.uk/zine/home/flexible-fixed-layouts
  32. 32 http://www.willmayo.com/2007/02/10/css-speech-bubbles/
  33. 33 http://www.willmayo.com/2007/02/10/css-speech-bubbles/
  34. 34 http://www.schillmania.com/content/projects/even-more-rounded-corners/
  35. 35 http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php
  36. 36 http://www.roscripts.com/Tableless_forms-112.html
  37. 37 http://www.attacklab.net/showdown-gui.html
  38. 38 http://www.puidokas.com/portfolio/frogjs/
  39. 39 http://www.ajaxload.info/
  40. 40 http://www.solutoire.com/plotr
  41. 41 http://www.solutoire.com/plotr
  42. 42 http://ajaxian.com/archives/dynamic-right-click-context-menu
  43. 43 http://jquery.bassistance.de/api-browser/
  44. 44 http://www.swfir.com/
  45. 45 http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  46. 46 http://simonwillison.net/2006/openid-screencast/
  47. 47 http://bokardo.com/archives/five-principles-to-design-by/
  48. 48 http://www.alistapart.com/articles/flashembedcagematch
  49. 49 http://www.digital-web.com/articles/ruby_on_rails_for_the_rest_of_us/
  50. 50 http://www.seomoz.org/blog/css-properties-you-probably-never-use
  51. 51 http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
  52. 52 http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
  53. 53 http://www.standards-schmandards.com/2007/wysiwyg-editor-test-2/
  54. 54 http://www.standards-schmandards.com/2007/wysiwyg-editor-test-2/
  55. 55 http://willcode4beer.com/design.jsp?set=littleUsedHtml
  56. 56 http://www.seomoz.org/blog/web-design-tactics
  57. 57 http://www.pearsonified.com/2007/02/how_to_protect_css_mods_for_any_wordpress_theme.php
  58. 58 http://businesslogs.com/design_and_usability/the_webs_best_interface_design.php
  59. 59 http://snook.ca/archives/design/making_a_good_favicon/
  60. 60 http://www.modernlifeisrubbish.co.uk/article/howto-make-pretty-pie-charts
  61. 61 http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
  62. 62 http://www.andyrutledge.com/web-misunderstandards.php
  63. 63 http://mezzoblue.com/archives/2007/02/21/icon_design/
  64. 64 http://www.answers.com/topic/color-tool
  65. 65 http://www.colorjack.com/sphere/
  66. 66 http://netdiver.net/newsarchive/boty/boty06.php
  67. 67 http://www.logosauce.com/
  68. 68 http://zeniltuo.com/
  69. 69 http://www.bittbox.com/category/freebies/
  70. 70 http://www.smashingmagazine.com/2007/02/24/five-more-freefonts-chucara-preface-colaborate/
  71. 71 http://www.smashingmagazine.com/2007/02/24/five-more-freefonts-chucara-preface-colaborate/
  72. 72 http://youtube.com/watch?v=6gmP4nk0EOE

↑ Back to topShare on Twitter

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.

Advertising
  1. 1

    salut;
    all my thumbs up ! please further would list for the coming months …

    0
  2. 2

    Seriously, all the articles you post could be summed into one simple line:

    Crème de la Crème.

    Well done.

    0
  3. 3

    really great, thank you. too bad i don’t have the time to go through all of these :-(

    0
  4. 4

    Really cool, thanks!

    0
  5. 5

    Thumbs up from me too!

    0
  6. 6

    You guys, make a really useful work for us. Keep it like this. Smashing Magazine is now an absolute reference for me.

    0
  7. 7

    Here’s my 5 cents: for code search you should take a look to http://www.crossengine.com , click on topics and there you have quick access to code search tools such as Krugle, Coders, Codase and more.

    0
  8. 8

    Being a graphic/web designer i found these sites very helpful. Thank you, I will feature your website next week on my side project/website :)

    http://www.theworldsmostvisitedwebsite.com

    0
  9. 9

    Thank you alot for this wonderful list..

    ill have a look next month also :D

    0
  10. 10

    Wow wow there are a lot of list on February… Almost that very usable… and have many many information.

    Thanks for that list

    0
  11. 11

    Yeah, that’s great. Wonderful sites :)

    0
  12. 12

    Nice list of helpful links, thanks!

    0
  13. 13

    Antony Mayfield

    March 9, 2007 9:59 pm

    Brilliant sites – thanks.

    0
  14. 14

    wow these list are overwhelming at times. thanks

    0
  15. 15

    Great list! :)

    0
  16. 16

    I love everything about this site!!

    0
  17. 17

    Awesome List !!

    0
  18. 18

    these are some good inspirations … one day after seeing and learning, i will make a site like this also.

    0

↑ Back to top