Look around just about every consumer facing site you visit these days has a third party script reference. Just about everyone uses Google Analytics and if you are like a former client of mine you have it and 2 other traffic analysis service scripts injected in each page. If it is not an analytics script it is an ad serving script or possible a twitter stream. They are common and they are the source of a lot of web performance problems and can ultimately cost you business or if it is a line of business application productivity.
First they are a common source of single point of failures or SPOF if the script is either unavailable or has a bug in it. Remember you have no control over the provider's content and therefor have no control over the SLA and code quality. Walmart had to eliminate many 3rd party content vendors on their site for these very reasons.
But there is more to the story as to why these scripts can be bad news. They often use document.Write to inject markup in your page. Of course they are not the only offenders, many developers do this to their own sites.
Probably the primary reason why JavaScript references should be moved to the bottom of the page is due to the way document.write works. When the browser hits a script block it stops everything till the script is load and executed. It does this because it has to assume document.write is used in the script.
When document.write is called the DOM is manipulated in a way that forces the browser to completely reload the markup and re-render it. This usually causes a noticeable flash during a page load. Even if you do not see the flash the page you are loading takes longer than it should without the document.write in play.
Because of this you should avoid using document.write in your scripts and you should avoid 3rd party scripts that force you to place script references to them where you want their markup to be rendered.
So how should you handle dynamically adding markup to your page? Well instead of using a script that performs a document.write you should use a more conventional strategy. Back in January I showed you how to use a document fragment to inject markup. This technique is extremely useful in this scenario.
First when you have a 3rd party script you do not want to have a dependency on a 3rd party library, remember it is not your site and you need to be as thin as possible. So relying on jQuery is not really an option, even with its slick DOM manipulation methods.
Instead of requiring an inline script reference require an element target. In my example I am going to use a DIV that contains an H1 tag just for good measure. I am going to use a CSS class as the selector hook, but you could just as easily use an ID. Personally I like CSS classes because that gives me a few more options.
<div class="ajax-target">
<h1>Dynamic Content</h1>
</div>
I am going to steal the createFragment method from my January post. The createFragment is a helper method that can be reused to insert elements or a string of markup in the DOM. What it does is create a document fragment containing the desired markup and returns that fragment. The fragment can then be used in a variety of ways, for the purposes of this demonstration it will be appended as a child element of the target element.
function createFragment(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
Next I get a node reference to the target wrapper element. Notice I do not use jQuery to select the element, but rather the native querySelector method. This is much faster than the jQuery selector and of course will work without jQuery being loaded.
var target = document.querySelector(".ajax-target");
If you have multiple targets you will want to use querySelectorAll (remember classes give me more options over an explicit Id). Just remember querySelectorAll returns a nodeList you need to loop through where the querySelector returns the first matching element.
The next step is to insert the new document fragement in the target wrapper. The element.appendChild method is used, which accepts a document fragment and inserts it within the element (our wrapper). It will be inserted as the last child element, which in this example will be after the H1 element.
To keep the example relatively simple I am passing in a markup string. This could just as easily be markup returned in an AJAX call or directly loaded HTML. The point being it is a string that will be turned into a fragment to insert.
target.appendChild(createFragment("<p>Hello world!!! I am very dynamic!</p>"));
The result is a solution that will dynamically inject markup in the page at the desired location. It eliminates the need to put a script reference in the markup, which is a bad practice because it stops the browser from rendering the page. It also eliminates the dependency on any third party library that may or may not be loaded.
In the end the page will load faster, not have a flash or blink during load and the script will not have a dependency on a library that may or may not be loaded. I created a jsFiddle so you can see the code in action, http://jsfiddle.net/docluv/vczpT/.
Smartphones are awesome. They are the modern Swiss Army Knife because they do so much. One of the most important features in my opinion is taking photos. My Nokia Lumia has one of the best cameras available in a Smartphone and I like to use it all the time. In particular I like to send photos to my parents.
My dad is a pretty good photographer and now that he has found out how to use his Lumia to take photos he wants to send them to me via SMS. However sometimes it just does not work for him. OK most of the time. Since I am not in Texas till next month I thought I would take some time to walk through the process I use to send photos via SMS on my Windows Phone.
First I start a new SMS message.
Next I either type the message or just attach the photo. To attach a file to an SMS message press the paper clip icon at the bottom of the screen.
This opens the attach screen, which lists several file sources to attach to the message.
For a photo I chose 'picture'. This opens the photo albums view. From there I select the album I want.
Once I have the album I select the photo. Typically this is the Camera Roll view. Here I just touch the photo I want to send.
Next I am taken back to the SMS message and the photo is visible in the message. When I am done with my message I hit the send icon and off it goes!
I hope this helps my dad and others that may be struggling with the ability to send a photo via SMS.
I know the majority of developers reading my Blogs are typically ASP.NET, enterprise developers. This means they develop on a Windows machine using Visual Studio most of the time. However in the broad market most modern web developers work on a MAC or worse a LINUX box! But the reality is no matter how many iPads Apple sells Internet Explorer owns the largest or just about the largest market share depending on your data source. Either way as a web developer you must test your applications and sites in Internet Explorer.
The Microsoft Internet Explorer team has made this much easier for developers running other operation systems with free virtual machine images to test Internet Explorer
Did I say Free and Microsoft in the same sentence? Yes, yes I did. In fact despite the main stream attitude Microsoft gives away quite a bit of free stuff, especially to developers. For example WebMatrix and there is even a free copy of Visual Studio available. So there is an established history for Microsoft doing many things to help its developer ecosystem that it probably does not get the credit it deserves.
A few months ago the Internet Explorer team began offering free virtual machines so developers could test all sorts of Internet Explorer versions. There are even Internet Explorer 6 VMs. If you visit http://modern.ie and select the 'Test across browsers' link in the main navigation you will find all sorts of options. Below the BrowserStack section you will find a section to download a virtual machine.
From this section choose your client operating system and virtualization software to see the variety of VMs available to you. Like I said there are numerous Virtual Machines available.
Some advice to developers new to Internet Explorer and most likely you are, be honest. There is a pretty good set of developer tools built in. Hit the F12 key to see them displayed. If this does not work for you then select the tools menu item and you should see the menu option to launch the tools. They have progressively gotten better from IE 7 through IE 10. I expect a major overhaul in IE 11 so it can keep up with Chrome and Firebug.
Rey Bango has more details on actually getting the VMs up and running on your machine.
The goal is to help developers in non-Windows eco-systems test their web sites and applications in Internet Explorer. I also say it is to reach out to these developers so they can see for themselves that today's Internet Explorer is nothing like yesterday's Internet Explorer.
WebMatrix is probably my favorite web development IDE because it is so simple and easy to use. Sure I use Visual Studio 2012 everyday and it has probably the best web development features available on the market. I also really dig Sublime. WebMatrix is a very close second when it comes to tooling and features out of the box for me. WebMatrix is just focused on web development, which is where I live.
A new version is currently available (http://www.microsoft.com/web/webmatrix/). A few weeks ago I posted a quick guide to publishing a web site to Azure web sites. Today I want to walk you through some of the built in features that make using Git source control extremely easy.
First, up to this point I have not been much of a Git user, just when I absolutely had to use it. The main reason is I generally do not use command line tools and haven't since I was in college back in the early 90s. If you can't build a usable user interface you pretty much are not ready for general consumption in my opinion. Since there really are not good Git client applications I have been more a Mercurial or TFS guy the past few years or so.
So with that said I may be changing to Git now since WebMatrix supports the most common Git features now.
To get starting using the WebMatrix built in source control you will want to open the Source Control ribbon. If the web site's folder does not currently have any source control configured you will see two buttons, one for Git initialization and another for TFS. Obviously you would want to click the Git button to set the web site up with Git. This will take care of all the local repository setup etc.
Once the site is Git ready the Source Control ribbon will display the action buttons you need to use Git. The ribbon is broken into 3 sections; local, remote and tools.
Go Local
Once WebMatrix has configured the site for Git you can start committing code to your local repository. In the Local button group there are three buttons; Status, Commit and Branch. Status lets you see what files have changed or not been committed to the repository. The Commit button lets you select files to commit to the local repository.If you are not familiar with distributed source control, you have a local repository and make frequent commitments to your local repository. When you are ready you then push all the changes in a batch to a remote repository that others can be connected.
With that said to make commitments to the local repository you tap the Commit button. This displays a dialog that list all the uncommitted files that have changed or not been committed since the last commit. You can select and unselect files to be committed. There is also a field for you to have to provide a commit description. The description is a required field, which is a no brainer because you should always comment commits so you know what you did.
Next in the Local buttons is the Branch button. This button lets you create a branch, who would have guessed that? Branching is an important concept in source management because it lets you create new development tracks for new versions, testing ideas, bug fixes, etc. If you have been doing proper source control for any period of time you hae no doubt had up to dozens of parallel branches open at once.
Creating a branch is super easy. However I have not figured out how to merge a branch into another branch yet. I guess they could not add everything, so back to the command line or Tortoise Git for that.
What About The Remotes?
Local repositories are great, but distributed source control is all about 'cloud' based repositories. WebMatrix makes this easy as well. With Git and other distributed source control systems you push and pull source code to and from remote repositories. The Remote button group has buttons for Pull, Push and Remotes. Before you can push and pull you need to configure a remote server, so you should hit the Remote button to display the remotes configuration dialog.
You simply need to enter a remote name and a remote repository URL. You can get that URL from your source host, like GitHub or BitBucket. Don't forget TFS supports Git now!
Once at least one remote repository is setup you can push and pull code to and from the remote repository by clicking the appropriate button. No messy command line needed!
To push your commits to the remote repository just tap the Push button and off they go. If you have more than one remote location defined then you will be promoted to choose the location or you can select it by pressing the down arrow on the Push button. I wish there were more to write about but that is just how simple it is. The with psame holds true with pulling code, the only difference is your local repository is updated to the latest from the remote repository.
Tools
Finally there are two more buttons, one for settings and one to launch the dreaded Git PowerShell command line. Settings lets you configure you local file locations and merge tool. Of course the Shell button launches the Git PowerShell command line that normal Git junkies will feel right at home using. You will need to make sure you have your local machine's execution policy setup to use the PowerShell command line.
I am really excited about the built in WebMatrix Git support. This is going to make using Git a high priority for me now!
WebMatrix is one of my favorite development tools because it really allows me to focus on what I love to do most, build modern web clients. It is a free Web IDE available from Microsoft and today they released version 3 for general availability.
There are several new features added to the latest bits. Today I want to walk you through how to directly publish to Azure Web Sites.
If you are not familiar with Azure Web Sites there are many articles available explaining them in more detail. Basically they serve the same role a classic shared web site has in traditional web hosting, except they are hosted n the cloud. You can find out more about pricing, http://www.windowsazure.com/en-us/pricing/details/web-sites/, but for a test domain it is free, a custom domain will cost you around $15 a month and a dedicated site ~$75 a month.
You could always manually publish your web site to your Azure Web Site or thanks to WebMatrix, do it the easy way. I am going to walk you through a very simple process, where I publish the bakery web site example.
When you first open the latest WebMatrix you will be prompted for your Azure credentials. If you do not have an Azure account you can skip this step, but let's face it if you are reading this post you most likely have an account already LOL.
If you skip this prompt you can always sign in later using the login at the top-right corner of the application or during the publish process.
Once you have your web site and are ready to publish it just hit the Publish button located on the main ribbon bar. It is located on the Home ribbon. This will start the site publishing wizard.
If you are familiar with the WebMatrix publishing wizard you will notice two new options for the Azure Web Sites. The first lets you create a new web site, the second lets you choose an existing web site you have already provisioned.
If you want to use an existing site you will next see a list of sites to choose and continue down the main path.
If you want a new web site the publishing wizard provisions the site and tells you what the unique domain is. This will be some long domain combination with several levels of sub-domains. You can more or less ignore this domain before its over.
The next step will check compatibility concerns for your web site with the Azure Web Site. In this step it will let you know what needs to be 'setup' in your web site to make the site work. I would also assume it will let you know if there are any real issues, but I have not run across any of these at this point.
In the next step you will be prompted to provide a custom domain. This is where you can decide something, less 'Guid', to access your web site.
Next it will evaluate your web site to determine what files need to be publish. Similar to a source code check in you can decide what files get published and don't. If you notice in my example it will also take care of the database file.
Next you will see a publishing notice at the bottom of the WebMatrix window.
Once the publishing process is complete the notification message will change to let you know. There is a link included so you can open your newly published site in the browser to test it out.
As you can see publishing from WebMatrix to Azure Web Sites is very friction free. I hope you find it a useful feature. And in case you are wondering I already snagged the 'bakery' sub-domain, http://bakery.azurewebsites.net!
What the heck was I thinking? Why did I do it? What did I learn? How did I do it? These are all things I have asked myself and others have asked me over the past year. It sounds like an odd labor to undertake and such an odd number.
But yes I did 17,000 tweets in exactly 1 year and learned some things in the process.
So What's The Back Story?
There I was sitting in the main hall at the Venetian enjoying some rather odd music from two guys up on stage waiting for a MIX07 Keynote. The main screens were rotating short quotes from people referring to MIX and other things related to MIX. I think the first one that really caught my eye was from Jeff Atwood. It said something like Flickr could save a bajillion bytes if they changed their logo from a JPG to a PNG. That's useful I thought, and pondered how he got that up on the screen.
I soon learned the MIX folks had written a screen saver to randomly post tweets around the conference. Tweet? What the heck was that? As soon as I found out what Twitter was I signed up. I said something prolific, what was it? Oh Yeah:
"Listening to bravarian music waiting on keynote and more bandwidth1"
Seriously that was my first recorded tweet?
That was around 10:24 AM PST (I was Las Vegas) April 30 2007, 6 years ago today. This time last year something funny happened. I got an e-mail or something in my twitter stream, I honestly do not remember, that said it was my twitter anniversary. That got me curious so I opened up the twitter web site so I could check out my profile. I noticed something, I had just done my 17,000th tweet! I thought how odd that is was almost exactly when I joined twitter 5 years ago. 17,000 tweets in 5 years, wow that is a lot I thought.
Then crazy Chris kicked in and wanted to know how many tweets a day would it take to tweet 17,000 times by this time next year (that would be now, when I am posting this blog). Turns out it is approximately 46.575 tweets a day, or as my mind rounds it 'not too many to be annoying'.
So the adventure began.
Before that day I had already started sharing news articles that I thought others would be interesting from Flipboard. I also liked to share developer blog posts I thought were useful. I did a quick review and noticed those already amounted to around 20 a day. I needed a way to double that volume, so why not tweet them twice a day? That meant I could do around 7 'normal' tweets a day.
My first effort to schedule tweets was hit or miss. I used the internal TweetDeck scheduler, sometimes it worked, often it did not work. So I looked for a new solution. That is when I found HootSuite.com. I created a free account and have used that ever sense. For the record I have never upgraded the account, just the free account.
Using Flipboard as a source of new content was pretty nice, but eventually the quality volume seemed to start slipping. So I started finding other resources to curate news. Hacker News and a few other resources have helped. I also expanded the phrases I monitor with Google alerts, which is a great service to keep up with niche topics.
I also started relying heavily on Google Reader, which of course we all know where that is heading in a month or so. I will start looking for an alternative in the next few weeks.
Adding Structure
A few weeks into this adventure I knew I needed some structure to the tweets. Normally I get up between 5 and 6 AM and read the geek news as well as listen/watch to Tech News Today. If you review my tweets early in the morning you will typically notice a 'burst' of news articles early in the day. Flipboard made that exercise pretty easy with the built in sharing functionality.
Using HootSuite I would then take about 5-10 minutes to schedule those articles to tweet again in the afternoon and night. Usually starting around 12:45, 2 articles an hour till around 5, all times are Eastern Standard BTW.
The morning is dedicated to developer blog posts, usually relating to web and mobile development. Those will kick in between 8:30-9:00 most mornings. Again 2 an hour, sometimes I will sneak in three an hour.
I try to find another news article of interest and lead the noon hour with that one. In the 5 o'clock hour I reschedule the blog posts to run till they run out. Then tack on any remaining news articles till I run out.
Normally I do not schedule blog articles during the week. I actually set those up on Sunday and Saturday afternoons. I spread them out over the week, leaving a slot or two each day for something 'cool' I might find during the week. It was rare I would actually do any scheduling during the 'work day'. Mostly I watch various key terms in my twitter client and open articles and blogs to read later. Normally that is after work. I will save many of the blog articles to my Evernote account so I know what to schedule over the weekend.
Blog posts get scheduled 3 times overall. Twice the day they are first shared, then again over the weekend. I schedule weekend tweets mostly in the morning, so it seems like a slow burst. My research showed most of you have real lives and tend to do stuff with your family in the afternoon and evenings on the weekend. So reading technical stuff is not a primary activity. Tweets from Monday and Tuesday are scheduled on Saturday. Thursday and Friday are Sunday. Wednesday tweets are split between Saturday and Sunday. This helped make it easier to meet my 46.575 tweet a day target.
Hash Tagging
One of my core goals was to expand my reach. I knew I needed to reach folks that were not following me. I wanted to get retweeted and ultimately more followers. I already followed several web related search terms in my Twitter client(s), such as html5, css3, jQuery, etc. I know others do as well. So I tried to make sure I included relevant hashtags with just about every tweet in the past year. I think it worked as I have picked up followers and see folks retweeting and favoriting my tweets that are not following me. It also helps organize the resources.
What About Organic Tweeting?
Yeah I still do that. I like to take a few minutes every hour or so to see what is going on in the twitterverse. If I see folks asking me questions I will answer them. I might also slide into a conversation I find interesting. But mostly I am looking at twitter as a news and blog article feed.
So What is Up With the Wolfpack and Rangers Stuff?
I went to NC State, played football and earned a BS and MS. I bleed Red & White and I get excited watching the games. I will tweet out my reactions to the games, baseball, basketball and football. Its nice to interact with non-developers, you should try it. And FWIW, the Wolfpack baseball team is currently ranked 5th.
As for the Texas Rangers. I grew up in the DFW area and well my dad is the home plate usher. And the team is really good and I have always enjoyed watching, listening to and attending baseball games. Yeah I am going to tweet about them too!
Life is fun guys and it is not all about development!
What Have I Learned?
Well technology news gets boring after a while. The more I focused on the news in the tech sectors I care about the more I have noticed how they can sensationalize things. How they are very biased toward Apple and Google products in particular. They write about Microsoft products, but they do so with a sneer and presumptive 'this is going to fail' attitude. They do not do that with Apple for sure.
Developer related blog content is extremely broad. There are thousands of great technical writers out there. It is hard to find all of it to be honest. It’s also hard to find specific content because most developers seem to have no clue about search engine optimization. I highly recommend at least using the keyword tools in Google and Bing to get a better idea what folks are searching for so you can tailor your blog titles accordingly.
Speaking of blog posts. When I post a new blog I schedule it to tweet out at least 4 times the day it is published and once the next morning and twice over the weekend. Self promotion never hurts, ask Scott Hanselman!
Where Do I go From Here?
I am not going to do 17,000 tweets over the next year! I will continue to schedule blog posts. I love reading them and curating them for my own interests. Sharing them is sort of an accountability activity. The blogs have added value to my knowledge and knowing I 'must' share a certain amount has forced me to find things I would not normally have read. That is a good thing.
I have found the technology news to be much less interesting in recent months. I will cut back the news articles quite a bit.
Overall I think the new structure to my tweet schedule will be more like a blog post every hour or so during the day with some news articles sprinkled in as seems appropriate.
This has turned out to be a lot of fun for me. It caused me to read more than I normally would have and learned some things I would not have learned. I think it has also helped me get several hundred new twitter followers. I should be right around 3000 as this post goes live. I don't know what I had a year ago, but I think I am up around 800 or so over the past year.
As I have gone around speaking over the past year I have had many of you say how much you enjoy my twitter stream. That means a lot to me. I want to be helpful and knowing that is very encouraging.
Of course if you are on Twitter you should follow me! @ChrisLove
Back in February I released deeptissuejs, a HTML5, JavaScript touch gesture library. In January I release panoramajs a HTML5, JavaScript library to implement the basic Windows Phone panorama control experience. This month I am excited to release another new HTML5 modern web application library, toolbarjs.
Toolbarjs is a JavaScript library to add the Windows Phone appBar functionality to modern HTML5 web applications. It is composed of a framework agnostic JavaScript library, example CSS and markup to help developers get started.
Adding toolbarjs to a web application is very simple. First I recommend you grab the source code from GitHub. There is a minimized version already included in the project's js folder. If you want to develop against the debug version (unminimzed) version feel free, it is located in the debug folder. In the css folder there is a toolbar.css file. It contains a reference set of CSS classes to style the toolbar in the Metro IU feel. There are three example pages to demonstrate how to use the toolbarjs library. They all contain a base HTML snippet to apply the library.
There are a simple set of instructions also included in the source code, readme.md. You can read those before reviewing the example pages.
Implementing the toolbarjs library is extremely simple. Make sure you have a target element with a pair of child elements to hold the menu items.
<footer class="toolbar">
<nav class="toolbar-top-menu"></nav>
<nav class="toolbar-sub-menu"></nav>
</footer>
Creating the toolbar requires nothing more than passing the target node to the library and the menu items for the top and sub menus. If you want to simply pass the toolbar element's selector you can do that and the library will take care of the node selection for you.
var tb = toolbar(".toolbar",
{
menuItems: {
topMenu: [],
subMenu: []
}
});
Each menu item is a JavaScript object with the following structure:
{
title: "Sports", //text displayed below the icon or in the sub menu, its what the user will read.
iconClass: "sports-icon", //used to apply CSS background image and hook for callback
callback: function (e) {
console.log("Sports");
} //gets executed when the item is selected
}
The 'title' is the caption displayed below the menu item's icon or the text rendered in the sub menu. The iconClass is the CSS class containing the styling for the actual icon. The library assumes you are using a background image, typically with a CSS sprite or data URI.
The callback method is a function that is executed when the user either clicks or touches the menu item. The demos will echo a message to the console, but in practice these choices would trigger an action like opening a new view. If you do not change the items in the toolbar you will want to call the expandToolbar passing true to collapse the toolbar.
While developing the library I found too many situations where collapsing when the toolbar when a menu item was selected just did not work. So I made the decision to make this a manual trigger. If the menu items are changed the menu will force a collapse. This is common when a user navigates between views. The following shows how to change the menu items.
tb.setToolbarMenu(menuItems);
Like all my libraries there are many custom settings that can be adjusted when creating a new instance. Toolbarjs is no different. The following is the default settings object.
settings: {
minHeight: 35,
minWidth: 42,
expandWidth: 200,
mainSelector: ".toolbar",
topMenuSelector: ".toolbar-top-menu",
subMenuSelector: ".toolbar-sub-menu",
expandTargetSelector: ".expand-toolbar",
topMenuItemSelector: ".toolbar-item",
menuItems: {
topMenu: [],
subMenu: []
},
toolbarItemTemplate: "<div class='toolbar-item'><div class='toolbar-item-icon {{iconClass}}'></div><figcaption>{{title}}</figcaption></div>",
subMenuItemTemplate: "<div class='toolbar-sub-menu-nav-item {{iconClass}}'>{{title}}</div>",
topLevelItems: [],
secondLevelItems: [],
expandSpeed: 1000, //ms
that: undefined,
easing: "ease-in-out"
}
These values can be overwritten when the library is created. You could also change any property during run-time by referencing the settings object like this: tb.settings.minWidth = 45;. To customize a setting when the object is created just add it to the second parameter with the menu items. In this example the default expand speed is changed from 1 second to 700 milliseconds.
var tb = toolbar(document.querySelector(".toolbar"),
{
menuItems: {
topMenu: [...],
subMenu: [...]
},
expandSpeed: 700
});
At this time I am aware the library is not working 100% correctly in the default Android WebKit browser. I am working on this and hope to post and update soon. There are also several other features I want to support. So look for updates over the coming weeks.
Like the previous libraries I am using toolbarjs on my own projects. I created it out of personal demand and am glad I can share it with you. I hope you enjoy using it. Please provide feedback and report any issues or bugs you find. I can't promise I will fix them immediately but will get to them as I have time. Unlike toolbarjs I remembered to add the license to the library this time. I think I added MIT, but basically assume you can use the code, but I offer no warranties at all.
It was 5 maybe 6 years ago when I first started learning jQuery. One of the first things I did was order the jQuery In Action book. If you have read that book you should remember one of the first examples given, zebra striping a table. To me this example sold me on the idea of jQuery even if I did not actually understand how jQuery worked at the time. With one line of code I could now alternate background colors in a table.
In case you have not seen this example let's examine how it works. I am going to start in the legacy PJ (pre-jQuery) way of doing things. Back in the PJ era web sites would generate all the markup on the server and send the results to the browser. Zebra striping a table meant you would create some logic like the following (I am going to use Razor here because honestly I have forgotten how to do Web Forms):
<table>
@{
for(int i = 0; i < 10; i++){
if(i % 2){
<tr class="even-row"><td>{stuff goes here}</td></tr>
}else{
<tr class="odd-row"><td>{stuff goes here}</td></tr>
}
}
}
</table>
When doing zebra striping in this classic way you need to manage adding classes to each row to control the alternating style. While there is nothing wrong with this technique, especially back in those days, it places the client-side concerns on the server. This is a very fragile way of doing things, especially in light of the way modern browsers work.
Now let's look at how zebra striping works when using jQuery. I am going to reuse the markup for both the jQuery and my CSS only example. Since I am a big college sports fan I thought I would list the most up to date ACC members, because let's face it conference memberships change almost daily. This should give me 14 rows that can have alternating background colors.
<table>
<tr>
<td>Boston College</td>
<td>Eagles</td>
</tr>
<tr>
<td>Clemson</td>
<td>Tigers</td>
</tr>
<!-- Truncated for the blog, see the jsFiddle for Full Demo -->
<tr>
<td>Wake Forest</td>
<td> Demon Deacons</td>
</tr>
</table>
I created a jsFiddle so you can play with the example code yourself. Now instead of managing the alternating styling on the server you can apply a CSS rule to the matching table rows. Because jQuery introduced advanced selectors you can obtain a list of odd numbered rows (7 in this example) and dynamically set the background color to a light gray.
$("tr:odd").css("background-color", "#eee");
This is fantastic! Now I no longer need to worry about this on the server and can hand it over the someone that focuses more on the client-side of things. It is also extremely helpful in the context of an AJAX application because my table content has a much higher likely hood of changing without a full page refresh. When I happens I can simply reapply the styling to the new set of table rows.
Last week I posted an article about why it is time to move past jQuery reliance. One point I was trying to make was how jQuery had done a great job of pushing the browsers to offer native functionality that jQuery provides. One of those native features is advanced selectors.
Now instead of using some JavaScript magic to select every other table row you can create a CSS rule based on a selector.
tr:nth-child(odd)
{
background-color:#eee;
}
This is even better than the jQuery trick because now I need no JavaScript and I do not need to run special selector calculations to retrieve the targeted table rows. Now the styling is automagically applied by the browser. This means that as I dynamically change the content in the table the browser will automatically apply the desired styles without having to manage that process in the JavaScript. This means less fuss, less margin for error and easier application maintenance.
So what about old browsers that do not support the cool new CSS selectors? Well there is always using polyfils. But more and more my desire is to just let them have the bland, degraded experience. Its expensive to write all the extra code to make this have the exact same experience as someone with a modern browser. The overall effect is just not going to be as nice, etc. And I think I will wrap this up before I start a whole new topic!
So be excited you can now make a table zebra striped with no concern on the server or the need to JavaScript! Check out the jsFiddle I created so you can see it in action.
A few weeks ago I got to sit down and chat with the DotNetRocks guys about a variety of topics. The initial premise for the interview was to talk about the Surface and why I love it so much. I think we got into some great tangents right from the start! We talked about some of the recent JavaScript libraries I have been releasing, Single Page Application development, Enterprise Mobility and of course how the new Surface and how the post-PC era plays into the enterprise world.
I had a great time talking with the guys, just wish we had not run out of time! So take some time to listen and let me know what you think!
I owe so much to John Resig and the jQuery team for creating such a wonderful framework. I have staked most of my recent career on jQuery the way I staked my career on ASP.NET back in 2001. I have built many applications using jQuery over the past five or so years. Thanks to jQuery I now know how to build rich, fast, scalable client heavy single page web applications. Without jQuery I am not sure I, nor thousands of other developers would really want to develop AJAX applications. The web has pushed its limit largely due to the power and ease jQuery made building modern web applications.
The way browsers work today has changed in many ways thanks to jQuery. Just a few years ago DOM parsing was rather complicated, jQuery made that easy. DOM manipulation was not straight forward, thanks to jQuery developers can manipulate with little effort. Today 96%+ browsers in use today support document.querySelectorAll, which accepts a CSS selector and returns a list of matching nodes.
In many ways thanks to jQuery, jQuery itself is no longer needed. There I said it.
The ubiquitous adoption of mobile platforms is another major factor leading me to the point where I feel comfortable saying jQuery is no longer needed. I am on a mission to purge jQuery out of my primary web architecture. Instead I have spent some time, and not that much to be honest, learning how to build rich HTMl5/AJAX applications directly against the native browser API.
As the jQuery team marches toward a 2.0 release it intends on purging the many hacks jQuery uses to provide obsolete browser support. Basically they will no longer support IE 8- and many old versions of FireFox, Chrome and Safari. My guess is they will still have a lot of scars in place to support the many WebKit instances proliferated and never updated by the Android ecosystem. While the 2.0 release promises to be smaller and faster its really not something I feel I can wait on any longer. To be honest when I first heard about jQuery Mobile I anticipated a mobile optimized version of jQuery, not another heavy UI framework, that was over two years ago.
You can call it Vanillajs or maybe going native, but it is rather simple to do. first you need to make the assumption of a browser baseline. For me it is at least IE8, however that is quickly moving to IE 9 as most should upgrade to at least IE9, even stodgy old enterprises. I will write about them in another post. The mass adoption of mobile means we have a broad set of new devices that have replaced old devices running old, outdated browsers. This means a quorum of a potential audience is running a browser capable of supporting a Vanillajs web application.
If nothing else you will experience a must faster web applications. Back in November I showed how using the browser's native DOM selectors was orders of magnitude faster than using jQuery's Sizzle engine. This is just the first and easiest step a developer can take. Once you start down this path you will quickly realize how simple it is to replicate many of the functions and utilities included in jQuery using the native JavaScript APIs.
So lets look at some quick examples of how to migrate from a jQuery based application to a native AJAX application.
DOM Selection
The simplest 'catch all' native selector methods are document.querySelector and document.querySelectorAll. The different between the two is the first one returns a single node, the second a nodeList or array of nodes. For the record a node is a JavaScript object representing a DOM element. The querySelector methods are simple because they accept a CSS selector, just like jQuery does, and returns any target element(s) matching the selector. These methods are all a part of the Selectors API, http://www.w3.org/TR/selectors-api/.
The following example would return the first H1 enclosed in a header element.
var mainTitle = document.querySelector("header > h1");
The next example selects any IMG tags within a paragraph with the CSS 'emphasis' class applied:
var emphasisImgs = document.querySelectorAll("p.emphasis img");
The original native element selector method is document.getElementById. This method will return the node object for the element with a specified id. If not element exist it returns null. This is by far the fastest selector, but it is also limited because there must be an element with the id of course.
var mainView = document.getElementById("mainView");
Other element selector methods include document.getElementsByName and document.getElementsByTagName. Support for these methods is limited to the newest browsers, so be careful when trying to use them for a little while longer. Both return a nodeList of elements matching either by the name attribute or element type.
A nice thing about these selection methods is they are all supported by the element or node object as well. This means you could select a parent element containing a series of child elements and select matching elements within the main parent. This would be similar to the jQuery constructor using the parent selector, $(".childElements", "#parentId").
Changing An Elements Style
In jQuery you can change any style property by calling the $.css method, passing the property name and a value. It does a lot of cleanup for you, etc. Its actually where the beauty of jQuery shines through. But if you really think about it, directly setting a style property is not that hard. The following example shows how to set the marginRight property:
mainView.style.marginRight = mWidth + "%";
So where is the benefit? I mean the $.css method wraps things up nicely for developers. If you look at the actual jQuery source for the $.css method it is over 500 lines of code. That means it does a lot of things and takes time. Setting the properties directly is much faster.
You can read more about the DOM style object's properties, http://www.w3schools.com/jsref/dom_obj_style.asp. If you want to get an object containing an element's used style values you can call the getComputedStyles method, https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle.
DOM Manipulation
After DOM selection, manipulation is probably the next more important feature jQuery offers. But that too can easily be done without jQuery. Like the jQuery css method, the manipulation module us over 600 lines of JavaScript. There are actually a whole range of DOM manipulation methods built natively in the document and node objects, https://developer.mozilla.org/en-US/docs/DOM/element#Methods. You can insert elements before and after target elements, select child nodes, etc.
https://developer.mozilla.org/en-US/docs/DOM/Node.firstChild
Here is an example method from my panoramaJS library. It ultimately gets the first panel and moved it to the last position in the list. Ultimately this how the carousel is continuous in either direction. I chose this method as an example because it show how you can manipulate a node's style and move elements around all in one quick coding motion. The getFirstPanel method actually loops through the childNodes to get the first panel at this time. I am working on a cleaner solution. The reason I did that at the time is the firstChild will return a #text node if there are characters before the actual first child element, admittedly one of the quirks of the native API.
moveLeftCallback: function (parentNode) {
parentNode = parentNode || this.panelbody;
var childNodes = parentNode.childNodes;
parentNode.style[this.support.transition] = this.fastTransition;
parentNode.appendChild(this.getFirstPanel(childNodes));
parentNode.style[this.support.transform] = "";
this.moving = false;
this.executeMove();
}
I realize riding without the jQuery training wheels is not for everyone, yet. But jQuery is something every web developer should start trying to live without. Start with using the native DOM selectors and go from there. Going 100% VanillaJS is not something even the best developers will do efficiently right out of the gate, I personally have a long way to go. jQuery does a lot to mask some of the nuances and bug artifacts from old browser versions, especially WebKit and obsoleted Internet Explorer. But the beauty of jQuery is how it helped force and even provide some awesome guidance for browser manufacturers add native functionality that we as developers need to make modern web applications.
But sadly as features and functionality have been added to jQuery so has the weight. Despite the news about gigabit Ethernet and powerful CPUs, the market has gone mobile. This means a proliferation of AMD and lower powered Intel CPUs connected using expensive 3/4G connections. Bandwidth and performance matter. With the average web site size reaching sizes that would not fit on a 3.5 inch floppy, http://httparchive.org/trends.php, an effort must be made by developers to remove things that just are not needed.
According to HTTP Archive the average site contains over 220kb and 20 files of JavaScript. My personal research routinely reveals sites using in excess of 500kb to perform minimal activities. Even the minimized jQuery is 91kb today. I admit there are many places where jQuery still fills a need to either make things a little easier or provide functionality that is just not available natively, that will always be the case. But over the past few months I have found these scenarios to be less and less. Instead I can find the native functionality and if needed I see how jQuery, https://github.com/jquery/jquery, or someone on Stackoverflow solved the problem. Ultimately I gain two things, a richer understanding of the browser platform and much leaner and faster code.
I encourage you to give it a shot. Write your next application, library or just code for fun without jQuery. See what you can do. When you get done write the code using jQuery then compare the results. Look for file sizes and performance. You can check the performance on a site like http://jsPerf.com. When I have time I like to review popular tests myself to see what others have found, http://jsperf.com/popular.
Still think you need a one library serves all JavaScript framework? Think again there are hundreds of great micro framework available that provide a particular need. Often these libraries can serve an application better because they provide only the functionality the application needs, not thousands of lines of unused JavaScript and unnecessary hacks. Visit http://microjs.com/ and search for the functionality you need.
I don't hate jQuery, I love it. But sometimes there just comes a time to do things yourself and leave the comfort of your home. Try it I think you will be glad you did.
BitCoin seems to be latest rage with wild value fluctuations. The past few days have seen a very wild roller coaster for the online currency. Most of the world's BitCoins are exchanged at MtGox.com, which has had some issues either with a denial of service attack or the ability to scale. Either way the site has at times been unresponsive. This has lead to a panic, causing the value of a BitCoin to drop wildly.
I have heard and read they were adding around 20,000 users a day this week with around 60,000 daily users. While those numbers may seem large to many, they are still rather small. Mt. Gox announced they were going to add more servers to solve the problem, which is a standard answer most IT operations give when they are having performance issues.
I have a lot of experience with web performance, scaling, etc under my belt and I know that most single web servers should be able to handle that traffic volume with ease. I have managed more traffic than that on a Dual Pentium 500 Mhz machine back in the day running ASP.NET WebForms. Its not just Mt. Gox, I see the same response over and over, especially in the enterprise. When I evaluate an application I find many ways to fix the issue with some simple configuration or coding changes. Sometimes it does take a complete rewrite to overcome just poor architecture and development.
First I want to point out the things Mt. Gox does right. They have a favicon, a common oversight for many web sites. They compressed their content, an easy web server configuration. They combine and minimize their JavaScripts and CSS, which I almost never see, so kudos for this. They keep the HTTP requests to a minimum, mainly due to the resource combination. Maybe a bit too many images, 23, for my liking. Some could be combined in an image sprite, but at 212 KB I will give them a break. Most sites would have downloaded over a MB just in images.
So what do they do wrong?
The biggest thing they could do is set a far future expires header. Currently they allow nothing to be cached by the browsers. This means each page request, basically anytime a user navigates to a new page in the site, they will redownload the scripts, styles and images. As I did a quick navigation around the site I see no 304 HTTP status codes. This is bad because they need to reserve this content over and over again to the same client. This consumes unnecessary bandwidth and taxes the server.
Since just about everything on their home page is static the site would load almost instantaneously after the first visit, as would just about every subsequent page. I do not have a Mt. Gox account and I own no bitcoins so I did not go into the actual trading experience. Looking at the source code they do use Web Sockets, so that tells me there is much static content that could be better served with a future expires header.
Next, they do not use a CDN. In the past this was something only the big dogs could afford. Today that is simply not true. Even I have a poor man's CDN for this blog. I setup an Amazon S3 domain a few years ago to serve my images. Today both Amazon and Azure have cheap CDN cloud services. Just doing some quick estimates for Mt. Gox I could see them spending around $5-10 a month on the Azure CDN to host their scripts, CSS and images.
This would also give them some additional benefits. It would remove that content from the main server, offloading that demand to a more scalable solution. But it would allow the static resources to be downloaded using an additional domain, meaning there are additional HTTP threads the browser will open, in this case adding speed to the site load.
Also they can be hosted on a cookieless domain. Cookies add weight to each and every resource being downloaded. This slows down the speed at which a resource can be downloaded. Since images, scripts and CSS files don't typically care if the user is being tracked it is unnecessary to host these resources on a domain needed cookies.
On to the JavaScript. While it is combined and minimized it is super large. I don't have the time to go through their code, but just a quick glance I have a feeling they are using jQuery UI without needing it. I see it referenced, but my quick passing through the site I saw nothing that warranted it. jQuery UI is very large and bulky.
Just a quick download of the latest full version of jQuery UI shows the minimized file 226 KB before compression. I used the full library because my experience tells me most developers will use it over a custom build out of fear. The site has 494 KB of uncompressed JavaScript (remember they do gzip the files, making the transfer size smaller). This tells me they have jQuery and a full set of jQuery UI included, which would probably account for about 75% of their JavaScript. My advice is determine if either are really needed, especially jQuery UI and trim the fat.
Finally they need to place their JavaScripts below their content. They have all their JavaScript files loaded in the documents HEAD. I know there are some out there that claim it does not matter anymore, that is pure hogwash. In a world where users expect a site to load and be available in less than a second everything matters. If you look at the mtgox.com site load you notice a blank screen, followed a few seconds later by an instantenous rendering of the page. This is because the large JavaScript has finally loaded and been evaluated.
These are suggestions based on my many years of web development and performance tuning experience. These are all front-end observations, but that is where about 80% of a web site's performance and scaling issues reside. I did not got into, nor do I have access to Mt Gox's PHP driven back end. My hope is they are using a good NoSQL option for speed as well. They are using Web Sockets, which is a very good sign they are on their way to a great modern web application.
The changes I have highlighted are easy enough to configure and setup. They could all be done within a few hours. Applying these simple adjustments to their web site could save the company thousands of dollars each month and improve the site's performance. And we all know fast sites make a lot more money!
Much has been said and 'debated' in recent years about the viability of HTML5. It should be obvious where I stand if you read my Blog or talk to me in person. HTML5, CSS3 and JavaScript are certainly ready and have been for a while. The big problem, as I see it, is the lack of developers with a forward vision. Too many websites are still written for yesterday's web. A web where developers and designers created pages for fixed widths, mouse clicks, vertical scrolling and desktops.
The cheese has moved so to speak with mobile and touch. Screen sizes vary radically, but they have in the past. The difference is in the past we worried about 800x600 or 1024x786 or more recent a few higher resolutions. It was easy to create sites with fixed width, 960 being the most recent standard. Today however we have screen sizes from 380x420 all the way up to mega displays covering hundreds of diagonal inches with super high pixel densities. Web applications need to be full screen, use all the space available.
Mobility is also a game changer. Responsive web design is all the rage lately. But even it sacrifices context specific interfaces. Application consumers use our web applications in all sorts of situations. They can be driving down the Interstate just as easy as they could be snuggled up in bed drifting off to sleep. Do they really want to know about the feel good story on our home page or do they really just want the score for their favorite school's game? It's a guessing game. Telemetry helps, but for most there is simply not enough valid data to make an educated decision.
Touch is a very big difference to the way we design modern web applications. Fingers are not precision pointing devices. They also introduce gestures. Users can now swipe, pinch and rotate across the screen. This is why I wrote deeptissuejs last month. I needed a library to abstract these touch events.
No longer can we use small touch points with no space between. We can also make data more actionable, giving it a more intimate connection that in the past. You can no longer rely on hover to generate feedback. You need to consider other touch interactions to drive those experiences. Similarly there is no right-click, again find a new gesture to trigger that context menu.
The web unfairly gets mud thrown on it by the press, which matriculates to many developers. Its not that HTML5 is not ready, it is more about developers not being ready. Take Facebook for example. In my opinion it is the poster-child of how not to architect a modern web application. Its not even a good example of building yesterday's web sites to be honest. It makes repeated calls to retrieve copious amounts of data, where JSON and some JavaScript templates do a much better job.
But it is bigger than that. Developers and designers still put the web into yesterday standards, not modern, mobile, touch first. Then of course there is performance, maybe the most overlooked feature. Recently a survey found the largest e-commerce sites are actually getting slower. Users expect a site to be responsive within 3 seconds, but the average e-commerce site us surpassing 7 seconds. This is costing them business and lots of it.
Web sites need to be changed to web applications. Developers and designers need to adopt a three pronged approach; mobile, touch and performance first. I call this user first development and it needs to become the predominant approach for both consumer and enterprise applications.
As developers we tend to architect for our needs not our customer's. We build code to make the 'application life cycle easier', sacrificing the user's experience. We bloat the application's JavaScript so we can code it as we would C#. We don't take advantage of CSS animations, transformations or modern input types and attributes. These choices all lead to a degraded user experience.
The choice you need to make is are you going to continue to build for a medium that is fading away every day or are you going to create for the growing space that is what tomorrow's landscape looks like? I know I am ahead of the game, but I shouldn't be. I realized the tide was shifting a few years ago, around the time the iPad was introduced. I have already spent over two years learning and making mistakes. I want to help you avoid wasting time on those mistakes. Instead learn from my experiences and others like me. There are many great resources, blogs, books and videos. Attend a local user group or meet up. Get your boss to invest time and money in sending you to a conference for modern web like Breaking Development.
The consumer application space gets most of the press, but the enterprise market is larger and in need of even more updating. Attitudes, architectures and applications are all outdated, misinformed and degrading from entropy. Real application life cycles include capacity to adjust and be agile as the end user changes their lifestyle. It starts with the individual developer having courage to try something new. Learn a new technique every week. Be confident and know the answer is there, somewhere.
Yesterday's web is dying, don't die with it. Make the effort to build truly modern web applications, not yesterday's web sites.
Guided user input is almost always a good idea when architecting a data entry experience. You want to help the user avoid potential mistakes. With on screen, mobile keyboards you want to reduce the keystrokes required to enter data and at the same time make sure the data entered is at least valid if not absolutely correct.
Ever since Google first introduced a little search phrase suggestion to their home page several years back the notion of an auto-complete has become popular. There are many tutorials around the Internet about how you can implement this simple piece of AJAX magic.
HTML5 adds support for many useful form/data entry enhancements. One that does not get much attention is the DATALIST element. This element acts as a placeholder for a native browser auto-suggest feature. Where most AJAX auto-suggest plugins and libraries inject or leverage an absolutely position element containing the list of potential values, the DATALIST handles this natively.
<input id="email" type="email" multiple name="cc" list="contacts" />
<datalist id="contacts"></datalist>
You can associate any INPUT field to a DATALIST element. I have also found it possible to associate multiple INPUTs to a single DATALIST. The association is made by setting the INPUT's list attribute to the id of the target DATALIST. This of course means you need to provide a unique id for each DATALIST.
You can pre-populate the DATALIST if you want. The DATALIST should contain a list of OPTIONS, similar to the DROPDOWN list element. Each OPTION's value will be used to display in the list. When the user selects an item from the auto-suggest list the value is placed in the active INPUT field.
<datalist id="contacts">
<option value="hedral@damowmow.com">
</option><option value="pillar@example.com">
</option><option value="astrophy@cute.example">
</option><option value="astronomy@science.example.org">
</option></datalist>
The DATALIST does not need to be pre-populated to work. You can dynamically add items at run-time. This means you can wire an existing AJAX solution to use the DATALIST. In this example I bind a list of e-mails to the DATALIST when focus is set to the targeted INPUT.
var emails = [{
"address": "hedral@damowmow.com"
}, {
"address": "pillar@example.com"
}, {
"address": "astrophy@cute.example"
}, {
"address": "astronomy@science.example.org"
}, {
"address": "clove@extremewebworks.com"
}],
email = document.getElementById("email"),
emaildl = document.getElementById("contacts");
email.addEventListener("focus", setDL);
function setDL(e) {
var i = 0, emlist = "";
for(i = 0; i < emails.length; i++){
emlist += "<option value='" + emails[i].address + "'>";
}
emaildl.innerHTML = emlist;
}
The new DATALIST element is a very helpful tool to guide users to the correct value. Because it is native to the browser it includes common auto-suggest functionality for pesky data entry tasks. You should always make an effort to make data entry easy and the DATALIST element is a great tool to make a frustrating form much easier to use, increasing productivity, sales conversions and overall user satisfaction.
One of the topics discussed recently on Windows Weekly was Barnes and Noble's financial issues. During the discussion Mary Jo Foley mentioned the idea of Microsoft buying the retail chain. She mentioned it would give them, a sizable retail presence. Yesterday Geekwire had a short article and poll talking about whether Microsoft should pull the trigger.
The GeekWire article quotes The Motley Fool's Rick Munarriz saying it will never happen. He talks about how Microsoft would not want the big box store image and says they could not even fill them if they wanted. He questions why they would even want to get into the book business when printed books are a dying breed. All very good points and why Barnes and Nobel is failing.
Think back about a year ago when Microsoft decided to invest $300 million in a joint venture to form a new company, NewCorp, with Barnes and Noble. From what I can tell that entire deal has something to do with the Nook and textbooks. So far nothing has publically materialized from that deal short of a lot of speculation. So Microsoft already has a $300 million stake in a company currently valued at a billion. Now I don't know if that investment would count towards the billion or not, but they are bed fellows.
So Friday night I drove past a local Barnes and Noble and brought up the topic with my wife. I mentioned how Mary Jo brought the topic up on Windows Weekly and asked her what she thought. I had already started forming my opinion, but I let her think about it. She liked it and started spouting some reasons, which were fairly inline with mine.
I have been saying for years if Borders and Barnes and Noble should realize they are more of a glorified coffee shop and offer free WiFi. In other words they could serve as a super Starbucks where folks like me could hang out all day, drink beverages and a light lunch while we worked away with our headphones. They could offer some in store books, magazines and a few other things that might interest geeky types like me.
In the process of buying my Surface I spent some time in several Microsoft Stores around the country. They were all great experiences, with a very consistent feel. The product presentation is great and so are the products they offer.
Now let me step aside for a moment and throw in Best Buy, another failing mass retailer. They happen to sell Windows computers and accessories and are doing it badly. The difference between Best Buy and a Microsoft Store could not be any farther apart. The Microsoft Stores have their products displayed nicely. The staff knows the products inside and out and they are excited to tell everyone about them. The Best Buy staff acts more like you are bothering them when you ask a question and rarely know anything about the products they offer. Top the Best Buy experience off with a crappy product display and you get the picture. The Surface RTs are usually face down with a big giant security orb glued to the back so you cannot even open the kickstand.
Microsoft needs to have a great retail presence and the sparse coverage they have now only leaves them relying on retailers like Best Buy to screw up their brand image. Now that Microsoft has also invested in Dell they will most likely have even more hardware and peripheral offerings soon. They need a solid retail experience and they need them everywhere.
Barnes and Noble has nearly 700 stores already in place with products no one wants, printed books). It is solid retail space, placed in good locations. This would solve many problems Microsoft has in the retail space. They also have a pretty darn good distribution network in place. Something Microsoft probably needs help with after the release of the Surface Pro last month.
So what would Microsoft do with the large stores?
Well get rid of the books, maybe keep a token Barnes and Noble sub-store on par with what you see in the airport terminal. Basically place the footprint of an existing Microsoft Store in the space of course. This includes the retail showroom and the presentation/training area in the back. They could expand the Xbox area with several stations setup with the latest games ready to experience.
As I walked around my local Barnes and Noble I realized they have various sections for the types of books, a music area, a children's area, the coffee shop and an abundance of empty unused space. This got me thinking about how Microsoft could leverage some of these concepts.
Instead of a Music and DVD area, replace that with Xbox music and video promotions and demonstrations. Setup a sample home theater and let customers select music and videos to watch.
Instead of a cookbook section have a few Surface's loaded with cooking apps and web sites. This would show off the great MetroUI applications as well as Internet Explorer. And naturally show off the cookbooks in the 'new' Microsoft Nook eBook service.
The kids section could stay the same, but with more tablets and large touch screens. All of course featuring great kids games, videos and learning applications.
Finally, a casual work area with coffee shop. Yeah, a place someone like me could hang out all day if they wanted, drinking smoothies and sandwiches. Offer free WiFi and plenty of power outlets and you have a great place the millions of non-Yahoo work from how crowd can work away from home. And let's face it we buy gadgets.
Also think about purposing this as an after school destination. A place where kids can do homework, study together, things I used to do at a library back in my TRS-80 days. Exposing new generations to the Surface RT, Windows Phones and the Microsoft Culture could prove very valuable going forward.
Of course there are some other layers to this. I mean Microsoft is competing with Amazon (and who isn't these days) in the cloud space, why not in books too? Sure Microsoft is not known as a book seller, but they do sell books, from Microsoft Press. Now of course they have the Nook and can use it in parallel with Xbox services.
Anyway, think about it. I like the idea and hope to see the headlines soon. But reality is they probably wont do this and I will just be quietly disappointed thinking what if? I mean what if they had bought Yahoo several years back? But a Microsoft store as a destination would be fantastic idea, especially if they were in your neighborhood.
Valentine's morning I gave myself a gift I had been wanting for quite some time, a 128GB Surface Pro. Acquiring my Surface may have been the most cumbersome task I have ever done to purchase a product, and I got a dozen Furby's when they were first released. I think many others understand based on the overwhelming demand. After more than a week with my Surface Pro being my primary machine I am very happy, but as with any technology there are things that I wish would be corrected.
First let me send some love to the staff at the Christiana Delaware Microsoft Store for being so nice and helpful. In fact let me say the experiences I have had at various Microsoft Stores (Times Square, Atlanta Perimeter Mall, Orange County CA, Columbus Circle and Bellevue Center) over the past year have been great. The Christina staff really went out of their way to make me feel welcomed and took great care of me. Even said I could come back and work there if I needed too in the future. So my hats off to Mike, Z and the rest of the staff.
Now for my Surface Pro experience. Like any machine the first day or three is setup time. So the first day I spent mostly installing software like Visual Studio, WebMatrix, GitHub, Tortoise Source Control and various other productivity tools. I was extremely pleased with the time to install Visual Studio, maybe 10 minutes and Office around 20. This says a lot about the device performance.
Other standard things like transitions, animations etc are all snappy. I was already a Metro fan, which I have stated on numerous occasions, so the start screen and modern apps are already part of my lifestyle.
I mostly develop, so I spend most of my time in the desktop. Adding touch to that experience is interesting. I am glad the Surface Pro comes with a pen pointing device because it serves well when dealing with legacy applications and web pages. I do wish there were more applications that took advantage of the pen though. For example I like to write in Evernote and I would love to 'draw' annotations on my notes.
Some of the common snarks I have read in the technology press are about the weight and noise. Neither of these have been a problem for me. I know it weighs more than my iPad, but it does a heck of a lot more then my Flipboard reader :). As for the fan noise I have not heard it once, even with my ear next to the device trying to hear it. If one of the complainers wants to hear CPU fan noise I have a Dell XPS Studio that rivals a Drowning Pool concert (they are I saw them last night FYI).
Another complaint you often hear is battery life. The complaint is they need to actually plug in to make it through and entire day. Again, it not just a tablet, it is PC generation next. My Dell XPS gets about 2.5 hours on a good day with the brightness almost completely dim. Last week I was in Bellevue and Redmond for the MVP Summit, which meant I had two cross country flights. Going out I changed flights in Chicago Midway and Phoenix on the way back. Each time the Surface Pro lasted the entire duration of the long legs. I had a full charge from Chicago to Seattle and about 90% from Phoenix to Philadelphia. Each leg the 10% warning popped up just before they told me to shut it off anyway. Granted I would not have made it on a 6 hour trip, but still pretty darn good in my opinion. And for the record I write code, or write about writing code every second I can when I am flying. I even played several rounds of pinball on the flight back.
The last major complaint is disk space. How spoiled we have become, and I feel what everyone is saying. A few years ago I envisioned 2TB drives as standard for ultrabooks in the near future. Today not so much. First how much data do you really keep locally? I can see guys doing SharePoint or BizTalk development, you need big fat virtual machines, but are they more than 64GB in size?
I bought a 64GB MicroSSD to use as my 'data' drive. This means it contains my files, not my applications. I still have not removed the recovery partition and have installed quite a bit of software so far and have over 50GB free on the C drive and almost all of my MicroSSD. A total of 110GB is free combining both drives. I have 28GB of Skydrive and about 20 GB scattered amongst several other cloud drive services and only use about half of it. Some I have replicated on my C drive. My point here is you probably do not need the space you think you need. If you do there are some great cloud storage solutions available. Heck the new ChromeOS Pixel comes with 1TB of GDrive storage and 32GB locally, think about how things are changing.
Now what do I not like? The TypeCover.. It is the only thing I have considered replacing. It can't keep up with my typing most of the time. I also need to have it on a perfectly flat surface to work within reasonable expectations. The tracpad is just unusable, and I downloaded the TracPad app and turned off gestures, it still sucks. I use my Arc Mouse now. I considered getting the wedge keyboard last week and may still do that. I am giving it a full month before I pull the trigger.
I know as a general consumer the charms and media keys maybe more desirable at the top, but for me as a developer the Function keys are used all the time. I find myself having to remember to also add the Fn key to my keystrokes all day long. This is very annoying.
I was afraid the screen size would be the worst thing, but that has not been an issue either. My Dell XPS is a 17" screen, so this is a drastic change. But honestly the only thing I miss is an extra column in MetroTwit, so it is an acceptable tradeoff.
I love the portability and flexibility the Surface Pro affords me. I can quickly pack it up and go, like when I realized they were boarding my flight in Phoenix without an audible announcement! Fliping the TypeCover behind the device to achieve the tablet experience is great. Shedding over 6 pounds from my backpack is awesome, although I kept thinking I forgot something on my trip last week.
As for missing my 17", 3 year old Dell XPS, not one bit. The only reason I have taken it out is to use some software I have not installed on the Surface yet. I have not written one line of code on the XPS since Valentine's morning, including the last a decent chunk of deeptissuejs. In fact the Surface helped flesh out some issues before the initial release of my gesture library. So if you are on the fence about the Surface Pro I encourage you to give it a chance and even pick one up. It truly is a baseline for the PC experience's future.