5 interesting tidbits I read today – Feb. 9, 2010

Comments (0)Category: Tidbits, Web Design

book review: Crush It – added to my to be read list.
bring Your Websites Alive: From Boring To Exciting! – great tips and excellent examples.
20 classy free sans-serif fonts – some good looking fonts.
5 Ways to Add a Bit of Extra Detail to Your Web Design – great tips.
3 golden rules of site redesign – change the look, not the feel; avoid losing search engine rankings; back up the old site and use a development environment.

Tags: , ,

Dreamweaver CS3 and Daylight Savings Bug

Comments (1)Category: Bugs, Tools, Web Design

I’ve been having these strange Dreamweaver issues lately at work. Opening and clicking in any section of a php or asp document was immediately followed by a Dreamweaver crash. It was really puzzling to me and after running defrag and a virus scan I even considered to re-install this darn Dreamweaver.

This morning though it happened on my home PC, and it was clear that I need to either dump DW or find a solution. So 15mins of googling revealed a Dreamweaver Daylight Savings Bug. Who would have known? Apparently, this bug has been live since last year.

This bug manifests itself in all its glory when clock goes back one hour, which causes a corruption of a WinFileCache-AD76BB20.dat file. So to fix this you simply need to delete the WinFileCache-AD76BB20.dat file. Indeed – no more crashes.

Dreamweaver 8 or Dreamweaver CS4 are not affected by this bug.

Everything about Firebug – 21 22 Great Resources

Comments (12)Category: Tools, Web Design

“What is Firebug?” you may ask. Firebug is an excellent Firefox browser extension that is great for troubleshooting, editing, monitoring, and debugging. It is free and open source. It is one of my favorite web development tools.

Here is a list of useful Firebug resources and tutorials:

  1. Get Firebug
  2. Firebug Documentation
  3. Overview of Firebug – a very good and detailed overview written by Michael Sync.
  4. Better JavaScript debugging in 15 mins by Digital Media Minute.
  5. Firebug Tips and Tricks by seifi.org
  6. 10 Things you didn’t know about Firebug by Eric Wendelin
  7. How to debug PHP with Firebug by Mathias Bank
  8. A Firebug Tutorial by evotech.net
  9. Web Development with Firebug by Joe Hewitt (video).
  10. Intro to debugging AJAX Applications with Firebug (video)
  11. Introduction to CSS editing using Firebug (video)
  12. Debugging with Firebug by Joe Hewitt
  13. Using Commandline API in Firebug by Michael Sync
  14. Script Tab: JavaScript Tutorial by Michael Sync
  15. Net, CSS, and DOM Tabs by Michael Sync (at the bottom of this article you will find an index of all the article that Michael has written about Firebug).
  16. About Firebug by Aptana
  17. Firebug Working Group
  18. Firebug Development Blog
  19. Firebug Discussion group
  20. A place to report Firebug bugs
  21. Firebug Internals
  22. How to Speedup Firefox if you have Firebug

What are your favorite firefox extensions?

Comments (10)Category: Tools, Web Design

Below is a list my favorite firefox extensions that simplify my life on a daily basis.

  1. Tab Counter by Morac – very useful tool that displays a number of currently open tabs. I normally try to limit my number of open tabs to a certain number, so that the browser doesn’t crash.

    firefox-top.png

  2. Measure It by Kevin Freitas – irreplaceable extension that helps to measure dimensions of images, distance between certain elements on a web page, etc.

    firefox-bottom.png

  3. Link Checker by Kevin Freitas – very useful tool that checks links validity on a web page.

    firefox-checklinks.png

  4. Image Zoom by Jason Adams

    firefox-imagezoom1.png

  5. IE View by Paul Roub – compare how website looks in FF and IE with two mouse clicks.

    firefox-viewie.png

  6. ColorZilla by Alex Sirota – also an irreplaceable extension that truly saves me a lot of time.

    firefox-bottom.png

  7. Firebug by Joe Hewitt – enables you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

    firefox-firebug.png

  8. URL Link by Neil Bird – allows you to select a non-URL link (for example: www.google.com) in a web-page and open it in a browser window.

    firefox-url.png

  9. Dummy Lipsum by Sogame – generates dummy lipsum text.

    firefox-dummylipsum.png

  10. CSS Validator by Michael Langley – validates a page using the W3C CSS Validator.

    firefox-valcss.png

  11. Page Validator by Michael Langley – validates a page using the W3C Markup Validation Service.

    firefox-valpage.png

  12. Save as Image by Rowan Lewis – allows you to save a page as an image.

    firefox-saveimage.png

  13. Web Developer by Chris Pederick

    firefox-webdev.png

  14. Update Notifier by Todd Long – notifies you when updates are available for your extensions and themes. This is a must have for those who have lots of extensions installed.

    firefox-top.png

  15. Time Tracker by Juan Casares – keeps track of how much time you spend browsing.

    firefox-bottom2.png

  16. View Source Chart by Jennifer Madden

    firefox-viewsrx.png

  17. CSS Viewer by Nicolas Huon – a very simple yet very useful css property viewer.

    firefox-cssviewer.png

  18. HTML Validator by Marc Gueury

    firefox-bottom2.png

  19. Restart Firefox by Jed Brown

    firefox-top.png

  20. Firefox Accessibility by Jon Gunderson at Illinois Center for Information Accessibility

    firefox-accessibility.png

  21. Firecal by Shivdep

    firefox-firecal.png

What are your favorite extensions that you would like to share?

Joomla, TincyMCE and formatting of the pre tag.

Comments (2)Category: Tools, Web Design

I have been trying to find a solution for the pre tag formatting problem for a couple of days, and finally I have one. Hurray!!! Here is a quick rundown…

While I’ve been working on customizing Joomla CMS, I’ve ran into formatting problem with the pre tags and that was driving me batty. All of my areas contained within the pre tags were formatted without whitespaces and everything was bunched together. For example,

body {
font-size:62.5%;
margin:0;
padding:0;
}

was displayed as:

body {
font-size:62.5%;
margin:0;
padding:0;
}

In attempt to solve this problem, I have searched and searched and searched all types of resources (google, tinyMCE forums, etc.), and I found nothing, nada, zilch. There were several other people who have experienced the same problem in the past, and hopefully, this post will help some of them in the future.

First of all, I’ve noted and applied several suggestions on the tinyMCE forum (“ensure that pre tag is included in the extended_valid_elements array in the tinymce.js and tinymc_src.js files” was one of them), but that didn’t fix the formatting issue in my case. So then I turned to my stylesheets and have discovered a declaration that went like this:

pre { white-space:normal; }

And the light when ON. I then have changed it to this:

pre { white-space: pre; }

And that has solved my pre tag formatting problem. Mmm, I feel content.

Note to self – check the most obvious first. (But then again, how do I know what the most obvious is?!?)