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’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

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.

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.

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 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.

“RescueTime is a software tool that allows businesses and individuals to understand exactly how they spend their time and attention– and helps them spend it more effectively.”

Well that doesn’t really give you the good stuff. I signed up for an account, downloaded their Data Collector, set some configurations on their website and that was it, maybe 30 minutes. At the end of the day this thing told me what I was doing all day. The sites I visited, how long I was in Visual Studio, Photoshop, Tortoise SVN…everything. I always thought I spent too much time with email, this proved I’m an email junkie. It even had a pop up that asked what I was doing when I didn’t have any activity on my computer every 5 minutes or so. It pop’s up and you click a button to say you were in a meeting, on the phone, whatever…include your notes and keep working. Talk about time saver.

If you really need to track things at a project or task level you can go on the website and update the records for specific projects. It even has a filter that will auto assign time to a project based on the file you are working on. This thing is awesome.

On top of that, they provide you with a decent dashboard and good reports. For you competitive types, they even tell you how you compare to other users of the system. They will also email you a weekly report if you want them too.

Lastly, if you are a business owner or manager that wants to track the productivity of your staff, you can require this. Have everyone sign up for an account and install data collector (it works on PC and Mac). Then everyone can set up a common set of categorization and productivity levels for activities based on their job. This would allow you to compare productivity across your organization or team.

Now my needs may not be yours. I only need something to give me an overview of how I spend my time so I can be conscious of spending it more wisely. If you need a tool to track time for billing purposes, this may not be your tool.

Hey, I probably spent too much time writing this and I don’t want to mess up my efficiency summary…I‘m in the top 9% of users right now :).  So, I will leave the rest for you to go check out for yourself – http://www.rescuetime.com.

Microsoft tried

I love the fact that this is built around Google’s core competency, search. I have 200 television channels and I hate flipping through the on screen guide. With Google TV finding something interesting is as easy as your basic Google search.

The biggest thing this platform has going for it, it’s open. It doesn’t look like you will be tied down or limited on content providers. You will have a full browser, no doubt Chrome based, right on your TV. Plus Google will probably let its vibrant development community have at it developing some great apps for the platform.

If the price is right Google may be set to take over the world. If this takes off, Google will be able to track your internet and television activities. Do you think advertisers will pay a pretty penny to take advantage? Duh. Do I want Google to know so much about me. Well you may not, but I am not a paranoid privacy freak (yet). My hope is that they don’t try to learn more than necessary and they pay me back with great prices for letting them peak into my info and media habits.

“If the web is so smart and our TVs are so fun to watch, why do we have to choose?”

I have been waiting for this one. A reason to watch TV again. I don’t know how I will get anything done.

I know I talk mostly about web development and business, but this is huge for me. I am not the greatest video editor, but I love the process and this software rocks (for lack of better term). If you don’t believe me, check the spec’s. If you don’t know what the specs mean, check the list of movies edited by this software (now you see what I mean). I’ll spare you a detailed review because I am not really qualified to write it, but I had to say something.

This is probably overkill for home movies and too complex for someone just beginning with movie editing. Yet, if you are really interested in video editing at any level of expertise, you have to have this if only to play with.

One of the goals of Open Source is to get your user community involved in making the software better. So, if you download Lightworks and use it, make sure you give feedback. If you are a developer, this is an opportunity to get in on a world class project or maybe benefit from the plug-in market. I’m sure this will be a great opportunity.

Well, there it is. I’m going to go sit by my email box and patiently wait for my invitation so I can start on my blockbuster.

EditShare Website – http://www.editshare.com/

The Open Source Announcement – http://www.editshare.com/index.php?option=com_content&task=view&id=164&Itemid=160

Lightworks Product Page – http://www.editshare.com/index.php?option=com_content&task=view&id=155&Itemid=203