Today was another day of learning. As part of a redesign, I had to convert a JavaScript object to an array used in the jQueryUI autocomplete plug-in. I have a service that returns a JSON object containing a list of category ID and Names that match a search for terms entered into an auto complete text box. I need to convert this to an array of arrays containing the category’s ID, Name, and the term highlighted in the Name. If you have a problem like this, here’s one way to solve it.

Before I jumped into the chaotic world of loops and recursive algorithms, I decided to see if there was something new and simple. Just so happens jQuery 1.6 has a revamped $.map function that can provide exactly what I need. Last time I used map it only worked on arrays, but now it can take a JavaScript object…sweet.

It’s so simple it should be a crime. You just feed it your object and a callback function and it returns the result of the callback function in an array. So as it iterates through each item in your object, it runs the anonymous function against the item and packages the results into an array. When it’s done it returns the array to you. No loops, no iterators, 3 lines of code and done son. Did I say I love jQuery.

Here’s what I have:

Alert: this is not production ready code nor does it provide a best practice guidance or implementation.

$.map(categories, function(item) {
var highlight = item.Title.replace(/(+request.term+)/,'i'),'<span class=\"autofound\">$1</span>');
return { id: item.Id, highlight: highlight, name: item.Title };
}

First I pass the map function a collection of categories and supply the anonymous function callback function(item){…}. To set the highlighted term we are using RegEx to find the requested term in the current category item in the map iteration. request.term is the term that the user typed into auto complete, as they type the map function is called and will return the categories that match the request.term in an array with the id, name, and a highlight comprised of the category Title with the requet.term bolded in the category’s Title.  To widen the RegEx matche, we are also ignoring case (‘i’). Once the term is found we replace it with itself, but bolded.  For example: if term is Hello and item’s category is “Hello World”, this returns “Hello World” as the highlight. Note: you can add another argument to the anonymous function as an iterator index (e.g. function(item, i) with i providing the index in the iteration, actually the index or key of the current item (you can check the references below for more info on this).

You may ask why I don’t write a loop or use jQuery .each(). There is most likely a better way, there always is. Why do it this way? The real answer is because .map() is new (upgraded) and cool and I wanted to learn how to use it with objects. The correct answer should be that it performs better or solves some other issue that the other options don’t. I can’t say that with certainty. I do remember reading posts about comparisons and I know the quick logic in my head decided just to use .map() in this situation (which isn’t a production use, but a proof of concept spike), but it’s been a few days since I did my research and I don’t remember pros and cons, nor do I have time to look again. So, I will leave that research to you and Google. Try http://tinyurl.com/6fdxa8a for a start.

Some of the references that I can remember using included:

• http://api.jquery.com/jQuery.map/ – official jQuery.map() API doc
• http://www.learningjquery.com/2011/05/jquery-map-in-16 – actually has a deep look into .map() and .each()
• http://www.javascriptkit.com/javatutors/re3.shtml – not related to .map(), but a quick glance to get my RegEx ignore case property
• http://www.michelsalib.com/2010/08/extended-customization-of-jquery-ui-autocomplete/ – actually came across this after my spike. I guess I duplicated someone else’s solution. Either I saw this before or I can feel better about the approach because someone else came to the same conclusion. Either way he has a good post on it.

In this new post about some of my daily issues I’m going to finally get around to understanding Visual Studio find and replace with regular expressions. I have always used find and replace to update simple string matches, but now I want to up the ante and find and replace with regular expression matching. Regular expressions are awesome and I use them in my code, but never had the time or need to explore their use in Visual Studio find and replace. I hope it isn’t too different from normal regex.

First things first, let’s get grounded with a good references: MSDN – http://msdn.microsoft.com/en-us/library/2k3te2cs%28VS.100%29.aspx. Doesn’t look too difficult, just have to watch my typing very carefully.

Here’s what I want to do:

Find Application[“AnyValue”].ToString()

Replace with Config.Get<string>(“AnyValue”)

Here’s what I got:

Find Application\[{:q}\]\.ToString\(\)

Replace with Config.Get<string>(\1)

A little explanation:

\ – this is an escape character that lets us find characters that are used in regular expression notation (e.g. [ ] ( ) { } )

:q – match string that is enclosed in single or double quotes

{} – this tags values that we want to show up in the replace string. So, {:q} in find can be used as \1 in replace. Or, get the quoted value and put it where the \1 place holder is.

Click “Replace All,” run automated build and tests, and done son! Moved 200+ lines of code from using an archaic HttpApplicationState based global configuration to a custom abstract multi-tenant configuration. Research and implementation – 15 minutes, lesson learned – priceless.

I am using an old school ASP.net DataGrid with inline editing. When I click on a row’s edit link the row values turn into HTML textboxes and other controls for inline editing. The Id of the controls are scoped by the Id of parent container (e.g. the DataGrid), your normal ASP.net unique naming convention. I need to attach a JavaScript event handler function to a textbox’s onclick event. This function will open an image file browser in a new window (popup). The image file browser let’s me upload select an image from an image library. Once selected, I click a button and it triggers a function to pass data to the caller (generally passing the image URL to a textbox/WYSIWYG editor). The basic mechanics of the button’s onclick handler is to call a function that uses window.opener to send the data back to the original window. My mission today is cross window communication where I have the image file browser’s button onlick handler pass the selected image URL to the textbox that was clicked in the DataGrid. Additionally, I have to shorten the URL to a virtual URL because the image file browser sends an absolute URL.

First thing first, how do we attach an event handler to a dynamically created textbox that is added to the DOM after everything is hooked up. Let’s ask Google. [Time Lapse…about 5 minutes in the future] OK, I’m back and I found a nice answer that references the all powerful jQuery library, which I’m already using so this was great. The jQuery ‘live’ function can attach events to DOM elements that are added after the page is all loaded. I knew this, used it a few times before, but it just didn’t occur to me to use it, duh (these brain farts are common in caffeine induced states).

$(<selector>).live("click", function() {
    // cool code here
});

Google Search: “attach javascript event to dynamic element”

Answer URL: http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements

OK, that is working nicely, thank God for Google. Note to self: jQuery live can attach a function to dynamically created controls (write it 50 times on the blackboard).

Now I have to open my image file browser. We add a CssClass attribute (class name ‘visual’) to the ItemStyle of the column we want to use to open the image file browser. We will use a simple window.open function for this (actually I will use a popup and center function that I get a lot of reuse out of).

$(function () {
    $(".visual").live("click", function () {
        PopUp('imagegallery.aspx?no-ck=1&type=file', 'gallery', 300, 400, 1);
    });
});

Thinking ahead I don’t readily see how to return the image URL to a dynamically created textbox. Normally, I would use window.opener and statically target a known element. Put another way, I usually know what element to target and I can write code that speaks to it directly (hardcode the control Id). In this instance, my element is dynamically generated, so I don’t know who to talk to. Another problem is my image browser uses some heavy JavaScript, but no jQuery so I’m not sure if it will play nice with jQuery. Well, it can’t hurt to try and find out, but I think I can get my textbox selected in the parent (opener) where I can use jQuery no problem. We will experiment with breaking the image file browser later.

Let’s add a selector that will find the textbox. Wait, how do I select it? This is what a text box Id looks like, ctl00$MainBody$dg$ctl02$ctl07 (classic ASP.net WTF). If I edit the row below it I get this, ctl00$MainBody$dg$ctl03$ctl07 for the text box Id. So, I have the DataGrid Id, ctl00$MainBody$dg, and the row/column, $ctl02$ctl07. The variable is the row. Alrighty then, we can do this. Let’s build a jQuery selector that can find this row column. Dang, I am embarrassed to say that I don’t know how to do this off the top of my head. No problem that a quick search of the jQuery docs can’t fix. Since there will only be one row selected at a time, hence one control at $ctl<number>$ctll07, we will take a chance with an Attribute Ends With Selector and target the column, $ctl07.

$([id$=$ctl07])

Yes, I hear all the problems you are rattling off. I know if something changes in the container or DataGrid naming, if I change the column order, or whatever else, that it will mess this up, but I’m betting that it won’t happen anytime soon. In the real world, when something is stable, and this DataGrid’s page has been for years, it’s safe to cut corners. Plus, if it does change it is an easy fix and we can harden the implementation when and if the situation calls for it. So, let’s add this to a function that our image file browser window.opener function can call and see if we get our URL back. My code in the image file browser is:

window.opener.UpdateUrl(fileUrl);

And on the DataGrid page

function UpdateUrl(url) {
    $("[id$='$ctl07']").val(url);
}

After some soul searching, calming exercises and clever Firebug JavaScript debugging, I discovered that my sleepy eyes where reading “name” and interpreting “id”. So, here is the updated JavaScript with the attribute updated to the actual, not imaginary, value. (Note: I moved selector result to a variable to aide debugging)

function UpdateUrl(url) {
    var textBox = $("input[name$='ctl07']");
    textBox.val(url);
}

Yeah! That worked. We can open the image file browser by clicking a text box in the DataGrid and the image browser is passing the URL back to the text box.

Now we have to get the virtual path, with no leading slash. I want to get the part of the path that does not include the domain name (e.g. from http://www.mydomain.com/mydirectory/myfile.htm to read only mydirectory/myfile.htm) Since we need speed, this has taken too long, no need in reinventing the wheel. Let’s try borrowing a function from, http://blog.programmingsolution.net/javascript/url-parsing-using-javascript-get-domain-name-port-number-and-virtual-directory-path/.

function GetVirtualDirectory(url) {
    var urlParts = url.split('/');
    urlParts[urlParts.length - 1] = '';
    var virtualPath = urlParts.join('/');
    return virtualPath;
}

I know my mother told me to read code before I use it, this is not what I need. If you didn’t notice, the code snip above chops off the end of the URL, the very part I want. Well, I’m tired and I need to be done with this so I present this ugly ball of goo:

function GetVirtualPath(url) {
    var urlParts = url.split('/');
    urlParts[0] = '';
    urlParts[1] = '';
    urlParts[2] = '';
    var virtualPath = urlParts.join('/');
    virtualPath = virtualPath.substring(3, virtualPath.length);
    return virtualPath;
}

Same logic just removing the first 3 indexes from urlParts to remove http://www.mydomain.com. Yes this will be refactored to use replace or something a little more sanitary. I just code the first and simplest thing that came to mind.

Well that’s it for now. I have been getting requests for this for a while and it took me about 2 hours to plan, research, code, debug, test, and blog. From my ASP.net DataGrid I am able to click on a textbox to open a custom image file browser, select an image, and insert the value of the virtual path for the image in a text box in the DataGrid. By the way, this little ditty is for an XML based editor that allows users to add and remove images for a JavaScript image scroller.

I have ventured into the wonderful world of enterprise PHP development at work. This is a big change from ASP.net and a lot of work to get up to speed. I thought I’d share my adventure in setting up debugging for a tool in my dev environment, NotePad++. An added plus after running through this exercise was that debugging was also working in Netbeans.

If you already have xdebug installed and configured on your server, you can probably skip to step 7. If you installed an IDE that uses Zend, like Aptana, that already has an xdebug pluggin, you may already have xdebug installed and configured on your server. If you are unsure you can search you php.ini file for zend_extension and see if you have settings similar to step 4.

1.       Get a copy of your phpInfo(). Create a new php page and enter:

<?php

phpinfo();

?>
View the page in the browser and copy everything on this page so you can paste in next step.

2.       Go to http://www.xdebug.org/find-binary.php

3.       Paste the text you copied from step 1.

4.       Click the button and follow the directions to install xdebugg. Add the following config key ([xdebug]) and settings to your php.ini file (mine is here, C:/www/xampp/php/php.ini, but yours may be somewhere else), updating the path to match your machine (create tmp/xdebug/ folder if you don’t have one):

[xdebug]

zend_extension=”C:/www/xampp/php/ext/php_xdebug.dll”

xdebug.profiler_output_dir = “C:/www/xampp/tmp/xdebug”

xdebug.remote_log=”C:/www/xampp/tmp/xdebug/xdebug_remot.log”

xdebug.profiler_output_name = “cachegrind.out.%p”

xdebug.profiler_enable = 0

xdebug.profiler_append=0

xdebug.extended_info=1

xdebug.remote_enable=1

xdebug.remote_handler=dbgp

xdebug.remote_mode=req

xdebug.remote_host=127.0.0.1

xdebug.remote_port=9000

xdebug.idekey=xdebug

xdebug.show_exception_trace=0

xdebug.show_local_vars=9

xdebug.show_mem_delta=0

xdebug.trace_format=0

5.       Restart PHP.

6.       Download the DBGP plugin: http://sourceforge.net/projects/npp-plugins/files/DBGP%20Plugin/

7.       Unzip and move dbgpPlugin.dll to your Notepad++ plugins folder (C:\Program Files\Notepad++\plugins).

8.       Restart Notepad++ and you should see DBGP in your plugins menu.

9.       In you menu click Plugins > DBGP > Config… and check “Bypass all mapping (local window setup). If you need remote debugging you can configure that, but I didn’t do that yet so I won’t act like I did.

10.   From here you can add your break points by clicking on a line and hitting the red circle in the debug window. To start debugging just add “?XDEBUG_SESSION_START=name” with name being anything you like. Now the Notepadd++ debug window should have activated and you can step through the code. If not, something is wrong and you may have to Google better or more recent instructions.

If you use Firefox, there is a xdebug Firefox Extension, https://addons.mozilla.org/en-US/firefox/tag/xdebug. When my debugger is started I don’t have to use the query string to start debugging in the browser, just open the page and it starts. I haven’t tested these, but there are other browser helpers too:

• Chrome: https://chrome.google.com/extensions/detail/eadndfjplgieldjbigjakmdgkmoaaaoc.
• Safari: https://github.com/benmatselby/xdebug-toggler
• Opera: https://addons.opera.com/addons/extensions/details/xdebug-launcher/?display=en

The configuration in step 5 will also works with debugging in NetBeans if you use that IDE. I didn’t test with anything else.

More info:

Xdebug Docs: http://www.xdebug.org/docs/

DBGP Support Forum: http://sourceforge.net/projects/npp-plugins/forums/forum/709026

Problem:

Missing ASP.net embedded resource on remote server, but not on local dev server.

Background:

We embed a JavaScript file as a resource in a DLL. This JavaScript file is exposed by webresource.axd.

Issue:

We found that the problem was related to a mismatch in the build date of the DLL and the time on the server. The build date is in the future compared to the server system date.

Error Details:

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values.
Parameter name: utcDate

Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[ArgumentOutOfRangeException: Specified argument was out of the range of valid values.
Parameter name: utcDate]
System.Web.HttpCachePolicy.UtcSetLastModified(DateTime utcDate) +3261043
System.Web.HttpCachePolicy.SetLastModified(DateTime date) +47
System.Web.Handlers.ScriptResourceHandler.PrepareResponseCache
(HttpResponse response, Assembly assembly) +194
System.Web.Handlers.ScriptResourceHandler.ProcessRequest(HttpContext context) +1154
System.Web.Handlers.ScriptResourceHandler.System.Web.IHttpHandler
.ProcessRequest(HttpContext context) +4
System.Web.CallHandlerExecutionStep.System.Web.HttpApplication
.IExecutionStep.Execute() +154
System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean&
completedSynchronously) +64

Resolution:

Update the server date to a date before the build date or change your build date to a date after the server date.

I remember when I first started getting into website performance optimization, the more I dug into it, the less I seemed to know. I remember hearing of browser repaint and not knowing what reflow is, and not realizing how important either of them really are in performance optimization. I definitely didn’t have many strategies in my toolbox to address issues with reflow. So, after reading a quick overview of reflow on Google Code, I decided to get up to speed on the subject.

I’m not going to go into a deep explanation, because the links below provide more than enough info to get you well versed on reflow. Basically, reflow is how a browser calculates the positioning or layout of elements. This may not be the best definition. So here is video of the process for those of you who are more visual.

As you can see there is a lot going on to get your elements positioned on the page. Minimizing reflow is very important in improving the performance of your web page.

Here are some common rules you can follow to reduce the effects of reflow. I found that these rules were common across a few of the resources I checked on reflow.

1. Minimize the depth of your DOM tree.
2. Minimize CSS rules, remove unused CSS rules, just allow rules to cascade (don’t repeat font-size: 1em if this is already defined in a parent selector).
3. Animate elements in a fixed or absolute position. (recalculating the position of an animation is bad)
4. Simplify CSS selectors as much as possible and reduce use of descendant selectors.
5. Avoid or minimize inline styles and define as much as possible in external CSS.
6. Avoid tables for layout and if you have to use them use fixed width.

Now I need to go start testing the effectiveness of some of these optimizations on sites I manage. I hope it helps you speed things up.

Resources:

• http://www.mozilla.org/newlayout/doc/reflow.html
• http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow
• http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
• http://code.google.com/speed/articles/reflow.html
• http://redivide.com/blog/gecko-reflow-awesome-visualization-of-web-page-layout/
• https://wiki.mozilla.org/Gecko:Table_reflow_optimization
• https://wiki.mozilla.org/Gecko:Reflow_Refactoring

Well I know that JavaScript blocks anything else from downloading on the page. My strategy to lessen this effect has been to move JavaScript to the bottom of the page. After reading 12 Steps to Faster Web Pages with Visual Round Trip Analyzer, I have to question this strategy. It describes a technique for using JavaScript to write the external script tags.

function AsyncLoad()
{
    var l = arguments.length;

    for (var i=0;i<l;i++)
    {
        document.write("<script src='" + arguments[i] + "'></" + "script>");
    }
}

AsyncLoad("file1.js", "file2.js", "file3.js");

The article states that although moving external scripts to the bottom reduces their blocking effect, it doesn’t take advantage of the bandwidth available to get everything downloaded as soon as possible. So, loading files with a document.write allows them to be loaded outside of the JavaScript engine, hence no blocking by JavaScript. How is this so?

Well let’s take a trip deep into geek land and check into how browsers actually interact with external scripts. Reading through this Mozilla bug report (https://bugzilla.mozilla.org/show_bug.cgi?id=364315) and a few other sites, when the browser encounters a script tag that references an external script it will download the script. It will not allow parallel downloading of other assets until the script is done downloading and parsing. Don’t take this as gospel, because I haven’t looked at browser source code or anything. I am just interpreting what I have read from multiple sources. This bug report also suggest that the browser vendors are already attacking the blocking behavior so the technique I am describing here won’t be needed in newer browsers.

So, although async JavaScript loading doesn’t address the problem of HTTP requests, but it prevents those pesky JavaScript blockers from causing a traffic jam, allows other elements to download in parallel, and efficiently uses bandwidth.

Well I’m off to do some testing. If you haven’t played around with Visual Round Trip Analyzer, I will be blogging about it soon (if I have the time).

I hope you found this useful.

I have a team member experimenting with base64 encoding of images to reduce HTTP requests (that’s a mouthful). I’m not going to try to explain what this involves, but it isn’t as complex as it first sounds. You can get more info on base64 encoding on this blog post by James McCaffrey. One of the side effects of this technique is it increases file size. So, the question is, what’s better for the performance of your web pages, a few large files or many small ones? Since HTTP requests are costly and bandwidth is plentiful, I’ll take a few large files for $500 Alex.

Did you know it’s faster to download a few large files than it is to download multiple small files of the same cumulative size as the large files? How is that so? It’s because of our nemesis Round Trip Time or RTT for short. RTT is the measure of the time it takes for a TCP packages to be sent to a server in a client request and sent back to the client in a server response. If you look at Yahoo’s Best Practices for Speeding Up Your Website, many of the rules address reducing RTT.

The main problem with RTT is that there is a delay caused by network latency. The latency is compounded when a DNS lookup has to be performed. When every you can reduce DNS lookups you reduce RTT delay. So, requesting one file instead of many is a great strategy. Whether you base64 encode images into your CSS file, combine images to sprites, use caching to prevent unchanged assets from being requested, reduce the number of domain names requested, or you combine your JavaScript files to one file, anything you do to reduce RTT will improve the performance of your web pages.

There are still a lot of people out there that believe the way to improve performance is to first improve issues on the back end, optimize servers and server side code. Don’t be fooled, about 80% of the time used to download a page is affected client side in the browser. You can look at this easy to understand research from Yahoo’s UI team. Next time you look at a waterfall performance report, remember that if the little bar that represents the initial request and response from your server is small in comparison to the rest of the assets downloaded, forget about throwing servers and backend code optimization at your performance problem. Look at client side optimization and maybe even base64 encoding.

In website performance the client is probably not right. Fix the client and your site will not suffer from the effects of RTT delay.

We are working on a performance project at work. One of the marketing guys wrote a blog post for our customers that talked about improving website performance. There is a lot of talk about performance going on at the company. One of the drivers of this talk is the desire to satisfy visitors with a fast responsive website. Another reason to jump on the performance bandwagon is Google’s commitment to a faster internet and backing up the philosophy with a change to the page rank algorithm to add page speed as a factor in where your site sits in search results. Lastly, we just want to be competitive. Beating the performance of the competition is just another notch on the belt and another battle won in the fight for market share. So, to keep visitors happy, maintain top 10 in the Google SERP (search engine result page), and to stay competitive, our site has to be fast.

If you call yourself a professional web developer and haven’t heard of YSlow, I’d have to put your title to the test. Well the author of YSlow, Steve Souder, is my web performance hero. He has done many talks, wrote books, blogged, and basically evangelized the importance of frontend or client side performance. I just watched a video of Steve at a Google Tech Talk where he reviewed the guidance you get from YSlow. YSlow is a tool that helps you identify areas to improve the performance of your website. In fact, Steve wrote a book, High Performance Websites, that provides details of the guidance given by this tool. The guidance started with 14 rules on Yahoo, but has since been expounded upon by his new book, Even Faster Websites. The original 14 rules are:

1. Make fewer HTTP requests
2. Use a CDN
3. Add an expires header
4. GZip components
5. Put stylesheets at the top
6. Put scripts at the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. Configure ETags
14. Make AJAX cacheable

Steve has since moved from Yahoo to Google and it would be expected that Google now has a performance guidance tool too, Page Speed. Not sure if Steve had anything to do with this, but it makes sense if he did. Along with guidance for improving performance Page Speed also has a tool to measure website performance. Both tools are available as a Firebug and Chrome plugin.

Here are some other tools and you can check my other posts for more:

• gtmetrix.com – GTmetrix uses Google Page Speed and Yahoo! YSlow to grade your site’s performance and provides actionable recommendations to fix these issues. This tool also allows you to compare you site against other pages (maybe your competitors).
• www.webpagetest.org – Pagetest allows you to provide the URL of a webpage to be tested. The test will be conducted from the geographic location you specify and you will be provided a waterfall of your page load performance as well as a comparison against an optimization checklist. One cool thing about this tool is the video that it produces of your web page load. You can actually produce a video comparing your page to other pages.
• websiteoptimization.com – Enter a URL below to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time.

So, if you develop or manage a website, make sure you jump on the performance bandwagon, get familiar with the tools that can help you improve performance, and checkout some of the people defining website performance optimization. Improving performance can take a little time, but it is probably one of the cheapest and effective improvements you can make to your website.

I have been building websites for over 10 years now. It’s usually the same drill each time. Use a graphics editing program to design the site and cut and optimize the images. Use an HTML editor to script the site. View, test, and debug in a browser. Normally, I go back and forth between these apps until I achieve the desired results in the browser. Well it looks like all of this will all be done inside the browser soon. Being able to design and edit in the platform I’m targeting is huge to me. So, I am very excited by all of the innovation in this space.

I have been following online, in browser, graphic editing programs for a while. Aviary provides Phoenix, one of my favorites. I haven’t had a chance to work with most of them, but here are a few on my list to review:

• pixlr.com
• picnik.com
• splashup.com

There are more, free and paid, but for the most part these are photo editors and not specifically suited to web design. The point is, if this is where photo editing is headed, a tool robust enough for website design is sure to follow. Splashup.com feels an awful like Photoshop, my favorite web design tool which is a traditional photo editor. None the less, these tools can be used to create web graphics or even a full website design.

So, we can create our website graphics in browser what about image optimization. If you want to use graphics on your site they have to be optimized to make your pages load faster. I use to use Photoshop exclusively to optimize my images, but have already moved this part of my process in the browser. My favorite tool hands down is Smush.it, a part of Yahoo’s YSlow Firebug plugin. Even when I optimize images in Photoshop I will run them through Smush.it to make sure I squeezed out every ounce of performance goodness. There are others and like the graphic editors I haven’t used most of them:

• dynamicdrive
• imageoptimizer.net
• GIFBot

Well we have created our graphics in the browser, optimized images in the browser, what about scripting the web pages. HTML editing in the browser has been common since Rich text WYSIWYG editors came in vogue. Also, developer tools like Firebug have allowed us to make small changes to HTML and CSS and see the results of the edits right in the browser, but you can’t save the edits and you have to transpose the edits to your HTML editor to save the updated page. What I have been missing is a tool that would allow me to build a page from scratch and save the results all inside a browser interface. Well, now there’s Builder Pro and Snap Pages both vying for my web design affection. I haven’t had a chance to actually use either of these tools. They have just peeked my interest and prompted me to write this post.

Both of these tools have great videos providing an intro into the capabilities of the tools, but Snap Pages may be more suited to consumer use than professional web design, but the jury is still out on that. Either way, Snap Pages looks great and produces some stunning sites, but I haven’t checkout out the source code it produces yet.

Builder Pro is more in line with what my idea of an in browser editor would be. When I watched the video of this tool redesigning twitter.com’s home page, my jaw dropped. Having used Firebug to do similar things on my sites, seeing a tool dedicated to making this easy just floored me. If you knew me, you would know that I don’t get excited about many things on the internet, but this one has me excited. I can’t wait to try it. If this works like I hope it will, it will save me time and make my sites better at the same time.

BuildorPro in action from James Law on Vimeo.

If I can edit in the browser and instantly see the results of my edits in Firefox, IE, Chrome, Opera, Safari or my mobile phone, that is a major improvement in my process. Can you imagine getting a call to make an emergency edit to a web page, pulling out your smart phone, make the edit in the browser, test, and publish? All from your phone. Work on any computer or device with a compatible browser and internet connection. I don’t have to buy multiple high price licenses for each software package I use for all of the computers I may want to design on. The browser has the ability to free use of our dependence on the old ball and chain OS. No more installation, no more incompatibility issues, no more worrying about getting a new computer ready to design websites. Granted we inherit new and unexplored problems with browser based software, but the vision of the freedom to be gained makes it look like the grass is greener on the other side.

I can definitely see myself designing a static website totally in the browser. Now only if graphic design, image optimization, HTML editing can all be integrated into one tool. Then on top of that throw in some server side and database development, project management, time tracking and invoicing, audio/video editing, and strategy development and that would be a tool that would allow me to throw away all of these expensive programs. Well that won’t happen anytime soon, but its good to see that it may be a reality in my lifetime.