Steve Albers

  Home  |   Contact  |   Syndication    |   Login
  19 Posts | 0 Stories | 12 Comments | 0 Trackbacks

News

Twitter












Tag Cloud


Archives

Post Categories

Monday, January 13, 2014 #

Performance Web Sites
http://httparchive.org/

http://stevesouders.com/

http://www.webperformancetoday.com/

http://calendar.perfplanet.com/2013/

Can I Use web site (Navigation timing API example)
http://caniuse.com/#feat=nav-timing

Articles
Bing and Google Agree: Slow Pages Lose Users
http://radar.oreilly.com/2009/06/bing-and-google-agree-slow-pag.html

For Impatient Web Users, an Eye Blink Is Just Too Long to Wait
http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html

Akamai State of the Internet Report (Q2 2013)
http://www.akamai.com/stateoftheinternet/

Breaking Development: Optimizing the Critical Rendering Path  (Latency times)
http://www.lukew.com/ff/entry.asp?1756

FCC Measuring Broadband America 2013 Report
http://www.fcc.gov/encyclopedia/measuring-broadband-america-measuring-fixed-broadband

Web Fonts Performance: Making Pretty, Fast
http://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/

Deep Dive into the murky waters of script loading
http://www.html5rocks.com/en/tutorials/speed/script-loading/

Efficiently Rendering CSS
http://css-tricks.com/efficiently-rendering-css/

High Performance Snippits
http://chimera.labs.oreilly.com/books/1234000001653/ch01.html

Minimize browser reflow
https://developers.google.com/speed/articles/reflow

The average web page has grown 151% in just three years
http://www.webperformancetoday.com/2013/11/26/web-page-growth-151-percent/

Tools
WebPageTest
http://www.webpagetest.org/

http://adaptive-images.com/  (Image scaling service)

YSlow
http://developer.yahoo.com/yslow/

PageSpeed
https://developers.google.com/speed/pagespeed/

http://modern.ie/

Visual Studio Extensions

Image Optimizer
http://visualstudiogallery.msdn.microsoft.com/a56eddd3-d79b-48ac-8c8f-2db06ade77c3

Web Essentials
2012  http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6
2013  http://visualstudiogallery.msdn.microsoft.com/56633663-6799-41d7-9df7-0f2a504ca361

Books & Conferences
High Performance Web Sites
http://shop.oreilly.com/product/9780596529307.do
Even Faster Web Sites
http://shop.oreilly.com/product/9780596522315.do

Web Performance Daybook Volume 2
http://shop.oreilly.com/product/0636920025955.do
High Performance Browser Networking
http://shop.oreilly.com/product/0636920028048.do
Velocity Conference
http://velocityconf.com/
http://www.youtube.com/results?search_query=O%27Reilly+velocity


Wednesday, September 11, 2013 #

My daughter is sitting on the couch, doing research for an upcoming high school project on her smartphone.

It seems like an uncomfortable way to read that much to me.  "You can use the laptop if you want." I suggest.  The laptop, after all, has a couple of large monitors attached, a higher speed Internet connection, and 8 core CPU, loads of RAM, a mouse & keyboard.

"This is fine."

"I can bring the laptop in if you want it."

"No thanks."

"Do you want to ChromeCast to the TV?"

"No thanks this is fine."

...

I have preconceived notions about computing and the convenience of various interfaces from my background, but these experiences are not shared with the young generation growing up with access to smartphones and tablets. How many children that use a phone as their primary computing device today will choose to buy a conventional desktop in the future?  Even a laptop?

Saturday, September 7, 2013 #

I recently picked up a new Nexus 7 to help round out my limited set of mobile devices for testing.  Part of the benefit is the ability to remote-debug Chrome on Android from my Windows desktop Chrome install – nice for verifying behavior & checking things like performance timing.

It DOES work, but there were a few less-than-intuitive steps to go through.  Some of these might sound like a joke (tap 7 times?  Set your device to show as a camera?) but the following are the steps and links that got me connected.

**Note that I accepted an upgrade to Android 4.3 before running the following steps.  You should be running the most recent version of Chrome as well (I am currently running v29.0.1). 

1.  Enable USB debugging on the tablet.  On the Nexus, select Settings –> About Phone –> then tap the”Build Number” area 7 times.  (I’m not making this up)  This provides access to developer options on the tablet.

2.  Go back one level to Settings, then select “{ } Developer options” and check the “USB Debugging” option.

3.  Connect the Nexus to your desktop via USB.

4.  In Chrome (still on the tablet) select Settings—>Developer tools (under the “Advanced” section) and check the “Enable USB Web Debugging”.

5.  Back in Windows 8 install the Google USB driver.  I downloaded the driver from http://developer.android.com/sdk/win-usb.html.  To install run Computer Management, then under Computer Management—> System Tools –> Device Manager, find the Android Device (which originally appeared as Nexus), right click and select “Update Driver Software…”.  In the “Update Driver Software” window I selected “Browse my computer for driver software” and selected the location with the unzipped Google USB driver.

6.  Change Nexus to present itself as a camera (yes camera).  On the tablet choose Settings—>Storage, then choose the menu option at the top of the page (three vertical dots)—>USB computer connection.  On the “USB computer connection” page check the “Camera (PTP)” option.

7.  Install the ADB (Android Debug Bridge) component on desktop Chrome.  This is not possible from Windows 8/Chrome Web Store today (I received the message “This application is not supported on this computer.  Installation has been disabled”) but you can download the component with instructions from https://github.com/GoogleChrome/ADBPlugin/#readme.  When I clicked this component I received the warning “Apps, extensions, and user scripts cannot be added from this website” I got around this by downloading the file using IE, opening the chrome://extensions tab in Chrome, then dragging the .CRX file onto the Chrome page.  When the file appears over the Chrome tab the page pops an overlay with a “Drop to Install” tab.  Drop the file, and follow the steps to install the extension.

8. With the ADB component installed you should see a very light grey Android icon in the extension area to the right of your address bar in Chrome.  Click the icon and choose the “Start ADB” menu item.  The Android icon should change from grey to green and show a number for connected devices (if any). Click the icon again, the select the “View Devices” option (which brings up the chrome://inspect tab).

9.  At this point your Nexus/Android device may present a window that reads “Allow USB Debugging?" with the computer RSA key fingerprint.  You can select OK to allow debugging, and you should see an area on the “chrome:inspect” tab for your device/page!  Note you have to have a Chrome page open on the device for it to appear on this page on desktop Chrome.  Choose the page you are interested in & select the inspect link to start debugging.

Links that got me there:

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

http://blogs.msdn.com/b/hanuk/archive/2013/05/24/enabling-usb-debugging-for-nexus-7-on-windows-8.aspx

http://developer.android.com/sdk/win-usb.html

https://support.google.com/chrome_webstore/answer/2664769?p=crx_warning&rd=1


Saturday, May 5, 2012 #

If you haven’t had a chance yet, take a few minutes to look at the Valve New Employee Handbook at http://www.valvesoftware.com/company/Valve_Handbook_LowRes.pdf 

Valve is best known for their Half-Life, Team Fortress, Left 4 Dead and Portal games, along with the Steam gaming platform. They put out a great product, and the Handbook shines a light into the process of developing great commercial software.  Some of the main points:

  • There are no management positions.

That’s why Valve is flat. It’s our shorthand way of saying that we don’t have any management, and nobody “reports to” anybody else. We do have a founder/president, but even he isn’t your manager. This company is yours to steer—toward opportunities and away from risks. You have the power to green-light projects. You have the power to ship products.

  • As a company with no managers, employees are expected to find the best ways that they can contribute to the company.

We've heard that other companies have people allocate a percentage of their time to self-directed projects. At Valve, that percentage is 100.  Since Valve is flat, people don’t join projects because they’re told to. Instead, you’ll decide what to work on after asking yourself the right questions

  • Mistakes are expected as part of the creative, competitive process.

Screwing up is a great way to find out that your assumptions were wrong or that your model of the world was a little bit off. As long as you update your model and move forward with a better picture, you’re doing it right.

  • Employees are the seen as important long term corporate asset

If you’re looking around wondering why people aren’t in “crunch mode,” the answer’s pretty simple. The thing we work hardest at is hiring good people, so we want them to stick around and have a good balance between work and family and the rest of the important stuff in life.

In summary – hire great employees, then expect and empower them to make the company great.  Scrum has self-organizing teams; but Valve has created a self-organizing company and turned a nice profit doing it. 


Tuesday, May 1, 2012 #

Whether you believe the StatCounter hype from last month or not, everyone can agree that Internet Explorer market share is down from previous years.  Chrome usage is creeping up, and changes in the market (such as tablet proliferation) are likely to continue the IE downward trend for the near future.

 

As a Visual Studio developer I see an equally disturbing trend for Microsoft – the loss of browser mindshare within the Microsoft developer community.  My statistics are limited and subjective, but evidence suggests Chrome is staking out a major position on the MS developer desktop.  For instance this blog (which is admittedly more focused on HTML than .NET recently) has a 10.5% Internet Explorer market share!

 

MarketShare

 

While IE may be down, I think there are things Microsoft can do to reverse their IE market share slide:

 

1.  Make Friends

Apple.  Google.  Mozilla.  Which of these pose an existential threat to Microsoft? 

Microsoft should partner with Mozilla on basic web standards support and rendering technology. The loss of Mozilla would leave IE as the only major non-WebKit browser.  By working with Mozilla Microsoft could position themselves as champions of an open web, save money by sharing development resources for non-competitive features, and help avoid a WebKit duopoly that works directly against their bottom line.

Look at the Google-WebKit relationship as a potential model for coopetition with Firefox.

 

2. IE6 was just a warning

Include the full range of HTML/CSS/JavaScript standards in Internet Explorer, and make it available for customers without requiring a new OS or computer. 

You know how hard it was to get customers to stop using IE6?  IE 7 only required a simple download.  For many customers the move to IE9 or IE10 means a new operating system, which in the Microsoft world often means a new computer.  The potential ill will for Microsoft caused by this segmentation of the IE space is unprecedented.  MS should kill this debacle before it materializes.

Also include support for standards-based tech like WebGL. If Chrome, Safari, and Firefox can run WebGL on a Microsoft operating system, Internet Explorer should too. 

 

3.  Go Faster and Slower

Reestablish a technical leadership position that makes developers want to develop for Internet Explorer.  This will involve a move to implement web standards faster, requiring more frequent IE releases.  Chrome and Firefox have shown that consumers and developers appreciate new features as long as they are easy/automatic upgrades to the browser.

But it is equally important for Microsoft to provide corporate customers a stable platform with established release timelines & patches.  Avoid the Firefox debacle from last year.  Don’t hit companies with the one thing they hate most- surprises. Stick with the MS patching schedule, and look at the Firefox Extended Release plan as a model for major releases– it balances the differences between corporate & consumer expectations.

 

4.  Keep doing things right.

Microsoft gets their fair share of flack for Internet Explorer, but the company has provided a tremendous amount of value to web customers and developers .  Internet Explorer 4 helped set us on the path to the modern web standard.  MS & IE were early XML supporters.  They have recently open sourced much of their web-based technology stack as well.  Microsoft has also worked hard to provide developer tools that take advantage of open web standards.  Recent WinRt/Silverlight issues aside, Microsoft also has a record of open communication with their development community, and the best evangelist/outreach program you will find.  So change to adapt, but don’t lose the things that have made Microsoft a formidable competitor in the browser & developer space.


Tuesday, March 27, 2012 #

HTML5 supports a standard, native <video> tag which is already well supported in browsers and has great backwards-compatibility options. 

Before you spend too much time on the HTML5 video element, you should spend some time getting comfortable with video codecs and debate going on regarding video codec support between the different browsers.  Dive Into HTML5 has a great introduction to the topic, and these Information Week and Register articles can help catch you up on the current state of video as part of the future open web standard.

This example shows how the video tag takes advantage of a standard HTML behavior to provide compatibility to older browsers and new browsers that require different video file types:

  • A browser will ignore tags it does not recognize.  So older browsers will bypass the <video> and <source> tags.  If the browser can support a Flash plugin (in the <object> tag) it will pull the youtube video.  If that isn’t supported, it falls through to the “downloadMovie” div that shows a message, static image and a download link.
  • For new browsers, the system will fall through inner <source> tags until it finds a value it supports.  This means it will stop at the mp4 for IE 9 and Chrome browsers, webm for new Firefox browsers and ogv for Firefox 3.6.  For more information on these codecs search on “ogv”, “webm” and “h.264” on www.caniuse.com
<video id="animalVideo" width=600 height=600 controls>
	<source src="/video/MVI3.mp4"  />
	<source src="/video/MVI5.webm"   />
	<source src="/video/MVI4.ogv"   />
	<object width="600" height="600" type="application/x-shockwave-flash"
		data="http://www.youtube.com/v/OUcvO4MiWek">
		<param name="movie" value="http://www.youtube.com/v/OUcvO4MiWek />
	<div id="downloadMovie"><img src="/video/Manatees.jpg" alt="Manatees"/>
	<br>
	<a href="/video/MVI3.mp4" alt="Download video">Download the video as \MP4</a>
	</div>
	</object>
</video>

Sunday, March 25, 2012 #

The ASP.NET MVC template drops a copy of Modernizr 1.7 in your project automatically, and if you check for NuGet updates the library is brought up to the current version - 2.5.3.

The NuGet package is a a great way to introduce developers to Modernizr and makes checks for updates easy.  But when adding Modernizr to your projects consider two alternatives:

Alternative One – Content Delivery Network:

Microsoft CDN currently hosts two Modernizr versions – 1.7 and 2.0.6.  By using a CDN copy you increase the chance that your customers will already have a browser-cached version of the library. 

There are some negatives to this approach though.  MS is not hosting the newest version of the library (2.5.3), and despite the fact that Microsoft has a highly reliable CDN the potential for outage will always be higher when your site relies on multiple web sites. 

You can help resolve this last issue by using the pattern that HTML5Boilerplate employs to load jQuery: start by loading the CDN version, but use a local copy if the CDN load failed:

<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script>
<script>window.Modernizr || document.write('<script src="Scripts/modernizr-1.7.js"><\/script>')</script>

Alternative Two:

The recommended approach, particularly for production sites, is to use the Modernizr Download Page (http://www.modernizr.com/download/).  This page lets you create a custom Modernizr JS file that only includes those tests that you require for your site.  It also lets you add YepNope calls for dynamic loading of JavaScript libraries – an option that isn’t available in your default NuGet MVC package.  You get all of this and a smaller file that reduces load and JS prep time.

There are potential caching benefits with the CDN route, but the Modernizr team has gone out of their way to endorse the customized download option (http://www.modernizr.com/news/modernizr-and-cdns).

For instance if you create a custom download of Modernizr including the first 5 HTML checks with HTML5shiv and the “add CSS” function the file is 4144 characters.  By comparison the default Modernizr 2.5.3 NuGet file is 49,397 characters.

 

ModernizrDownload


Tuesday, March 20, 2012 #

This is the fourth entry in a series of descriptions & demos from the “Using HTML5 Today” user group presentation.


For practical purposes, the original XHTML standard is a historical footnote, although XHTML transitional will probably live on forever in the default web page templates of old web page editors.

The original XHTML spec was released in 2000, on the heels of the HTML 4.01 spec.  The plan was to move web development away from HTML to the more formal, rigorous approach that XHTML offered, but it was built on a principle that conflicts with the history and culture of the Internet: XHTML introduced the idea of Draconian Error Handling, which essentially means that invalid XML markup on a page will cause a page to stop rendering.

There is a transitional mode offered in the original XHTML spec, but the goal was to move to required Draconian handling.  You can see the result by changing the doc type for a document to “application/xhtml+xml” - for my class example we change this setting in the web.config file:

<staticContent>
<remove fileExtension=".html" />
<mimeMap fileExtension=".html" mimeType="application/xhtml+xml" />
</staticContent>

With the new strict syntax a simple error, in this case a duplicate </td> tag, can cause a critical page error:

xhtmlError

While XHTML became very popular in the ensuing decade, the Strict form of XHTML never achieved widespread use.

Draconian Error Handling was one of the factors that led in time to the creation of the WHATWG, or Web Hypertext Application Technology Group.  WHATWG contributed to the eventually disbanding of the XHTML 2.0 working group and the W3C’s move to embrace the HTML5 standard.

For developers who long for XML markup the W3C HTML5 standard includes an XHTML5 syntax.


For the longer, more definitive look at what happened to XHTML and how HTML5 came to be check out the Dive Into HTML mirror site or Bruce Lawson’s “HTML5: Who, What, When Why” talk.


Shims help when adding semantic tags to older IE browsers, but there is a huge range of other new HTML5 features that having varying support on browsers. Polyfills are the tool to work with many of these new features.

Polyfills are JavaScript code and/or browser plug-ins that can provide older or less featured browsers with API support for recent browser advances.  The best polyfills will detect the whether the current browser has native support for a given feature, and only adds the functionality if necessary.  The Douglas Crockford JSON2.js library is an example of this approach: if the browser already supports the JSON object, nothing changes.  If JSON is not available, the library adds a JSON property in the global object.

This approach provides some big benefits:

  • It lets you add great new HTML5 features to your web sites sooner.
  • It lets the developer focus on writing to the up-and-coming standard rather than proprietary APIs.
  • Where most one-off legacy code fixes tends to break down over time, well done polyfills will stop executing over time (as customer browsers natively support the feature) meaning polyfill code may not need to be tested against new browsers since they will execute the native methods instead.

Your should also remember that Polyfills represent an entirely separate code path (and sometimes plug-in) that requires testing for support.  Also Polyfills tend to run on older browsers, which often have slower JavaScript performance.  As a result you might find that performance on older browsers is not comparable.

When looking for Polyfills you can start by checking the Modernizr GitHub wiki or the HTML5 Please site.

For an example of a polyfill consider a page that writes a few geometric shapes on a <canvas>

<script src="jquery-1.7.1.min.js"><script>
<script>
       $(document).ready(function () {
           drawCanvas();
       });

       function drawCanvas() {
          var context = $("canvas")[0].getContext('2d');

	  //background
          context.fillStyle = "#8B0000";
          context.fillRect(5, 5, 300, 100);

          // emptybox
          context.strokeStyle = "#B0C4DE";
          context.lineWidth = 4;
          context.strokeRect(20, 15, 80, 80);

	  // circle
          context.arc(160, 55, 40, 0, Math.PI * 2, false);
          context.fillStyle = "#4B0082";
          context.fill();
</script>

 

The result is a simple static canvas with a box & a circle:

canvas

 

…to enable this functionality on a pre-canvas browser we can find a polyfill.  A check on html5please.com references  FlashCanvas.  Pull down the zip and extract the files (flashcanvas.js, flash10canvas.swf, etc) to a directory on your site.  Then based on the documentation you need to add a single line to your original HTML file:

<!--[if lt IE 9]><script src="flashcanvas.js"></script><![endif]—>

…and you have canvas functionality!  The IE conditional comments ensure that the library is only loaded in browsers where it is useful, improving page load & processing time.

Like all Polyfills, you should test to verify the functionality matches your expectations across browsers you need to support.  For instance the Flash Canvas home page advertises 70% support of HTML5 Canvas spec tests.



Saturday, March 17, 2012 #

The default NuGet template for MVC3 pushes down jQuery 1.5.1.  You can upgrade to a new version (1.7.1 is current when this was written) to avoid a problem with the creation of “unknown” HTML5 tags in IE6-8:

Take this sample HTML page using HTML5Shiv to provide support for new HTML5 tags in IE6 – IE8.  The page has a number of <article> tags that are backwards compatible in Internet Explorer 6-8 thanks to the HTML5Shiv.

PageStart

After the article elements there is a jQuery 1.5.1 script tag, and a ready() event handler that appends a footer element with a copyright to each of the article tags. 

image

This appears correctly in IE9, but in older IE browsers the unknown tag problem reappears for the dynamic <footer> elements, even though we have the HTML5Shiv at the top of the page.  The copyright text sits outside of the two separate footer tags.

1.5.1.Dom

To solve the issue upgrade your jQuery files to an up-to-date version.  For instance in Visual Studio 2010:

  • In the Solution Explorer right click on References and choose Manage NuGet Packages.
  • In the Manage NuGet Packages window select the jQuery item on the middle of the page and click the “Upgrade” button.
  • You may need to upgrade your script src references to point at the new version.

Using the updated jQuery library the incorrect tags should disappear and styles should work properly:

1.7.1.Dom

 

You can find more information about the issue on the jQuery Bug Tracker site.