Every serious web designer should have as main concern that your page shall be seen exactly the same way on all main browsers and follow strictly the w3c’s xhtml rules. But…Why?

An xhtml valid code is rendered a bit faster than a unclosed, unested, unmatched tag. This forces the browser a guess working job, try rendering the page correcly. In a mobile device with limited processing power, it becomes a bottleneck or even corrupt all layout that intended to be seen. Unfortunatelly only a low figure percentage of sites follow that rules.

I could’n leaving unmentioned the IE as a little hell for web designers due it’s several rendering css bugs, problems with java script, ajax that do not follow w3c recommendations, lack of support for css rounded corners, svg that not implemented yet and god knows what else… In my projects I have two works, first I do a page that works on firefox, chrome and safari after that, as a second job, I have a hard time tweaking the css rules and rewrite javascript. All extra wasted time and effort just to get the page be presented (almost) the same way on IE.

In the other (good) side we have a neat combination: Firefox + developing aid plugins. With them, now things that most developers were afraid of, like debugging Java Script and ajax calls now became a much easier and pleasant job thanks a jobsaver plugin called Firebug. It is probably the best thing happened on client-side web developing in years. Now I can write a thousand-line javascript code with much more confidence and knowing that future improvements won’t be a torture. It’s not an overstatement saying that I wouldn’t leave as much processing in the client side in my projects if this tool didn’t exist. Probably I’d leave all processing, fields cheking, business rules and rendering on server’s side with performance and response-time costs for the whole application. Not to mention the real time css editing with instant graphic feedback, loading time benchmark for each http call and several other improvements. My favorite plugin list in order of relevance are: Firebug, Html Validator, Xdebug Helper, YSlow, MeasureIt, FireSizer, UrlParams. Other general use plugins are: FireGestures, NoScript, VideoDownloader, QuickRestart, Show MyIP, Regular Expressions Tester, ServerSpy.

One of the most annoing thing in a WYSIWYG editor, is that the page never is rendered de same way on a real browser like is shown on a preview window. Besides, the generated code is fat, with several redundant style rules and identation not respected. I just use them for an aid to create complex tables or when I forget the sintax of this or that tag. After, the html generated is paste in a text-editor where I have the precise control over css rules and can change, for instance, a id label in html and css in just one command, instead of navigating on menus and sub-menus on a visual application. Is a matter of personal taste. With a text editor, you know what you doing.

The major drawback on editing in a text editor is losing the preview feature. Would be great if it could be like “Matrix movie” where you looking at the code, should see “blondes and brunettes”. Well, I only see the code! For that reason a preview feature is a highly desired feature, but how to join the “best of both worlds”? I needed a solution where I change something in the code and instantly that be presented on all oppened browsers at once.

After some researching, the response for that problem was a desktop automation tool called AutoHotKey. With a little effort of programming a simple script, you can, with 2-key press do that trick. In the code below the key combination is [Win] + [\] with can easly be replaced for any other arrangement or even triggered by a single key.

How to use: Just paste the code below in a text file, rename it for .ahk extension and drag and drop it on an Autohotkey shortcut. Open the same html file on notepad++ and one or more browsers. Just change something, type [Win] + [\] and see what happens.

Tips: The strings MozillaUIWindowClass, etc were got from the active window with Window Spy application bundled inside Autohotkey. OutputDebug messages can be viewed with DebugView.

  ;###############################################################################
  ; Save all unsaved documents, refresh all opened browsers and return to Notepad++
  ; This code can be freely modified and redistributed
  ; Marcelo Gennari - Version 090808
  ;###############################################################################
  #\::
   ;conf vars
   varTextEditor = Notepad++
   varBrowsers = MozillaUIWindowClass,Chrome_XPFrame,IEFrame,OpWindow,{1C03B488-D53B-4a81-97F8-754559640193}
   ;Firefox             Chrome         IE      Opera    Safari

   ;Salve all
   varTextEditorClass = ahk_class %varTextEditor%
   If WinActive(varTextEditorClass)
   {
    Send ^+s ;Ctrl + Shift + S = Save all
   } else {
    MsgBox, 0, Ops!, You must be on %varTextEditor% to get this script running, 5
   }
   ;Refresh all opened browsers
   Loop, parse, varBrowsers, `,
   {
    varClasseBrowser = ahk_class %A_LoopField%
    if WinExist(varClasseBrowser) {
     OutputDebug, Refresh browser %A_LoopField%
     WinActivate, %varClasseBrowser%
     Send {F5}
    } else {
     OutputDebug, The browser %A_LoopField% is not running
    }
   }
   ;Return to Notepad++
   WinActivate, %varTextEditorClass%
  return