How to easily create the CSS and image for a CSS Sprite

CSS Sprite is a technique to reduce the number of requests the browser makes to the server by combining 'many' images into a single image. CSS is then used to display a portion of this large image to the user in place of the single image.

This is all well and good but for most people sticking together lots of images and working out the display co-ordinates won't be a whole lot of fun. Enter CSS Sprite Generator.
- http://spritegen.website-performance.org/

With this web site you upload a zip file containing all your images, it gives back a single image along with the requisite CSS to display. Resulting in a faster loading web site with minimal effort.

There are a few other sites that have the same functionality
- http://csssprites.com/
- http://cssspritegenerator.net/
- http://www.spritecow.com/

Determine a browser CSS3 capability and degrade gracefully using Modernizr

Support of HTML5 and CSS3 is improving all the time with the regular release of new browser versions. However this does make it difficult to keep up to date with what is supported by what.

The following two web sites provide similar functionality to help you determine what is fully or partially supported in what browser.

- http://html5please.com/
- http://caniuse.com/

Modernizr is described in wikipedia as

"Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation Web Technologies"

From the Modernizr download page you can now select only the tests you are interested in, reducing the footprint of the Modernizr file.

I chose just the CSS3 opacity test which generated a 14kb custom Modernizr file to download - "modernizr.custom.80211.js"

The following CSS3 sets rounded corners and opacity on all img tags.

img {
opacity: 0.5;
border-radius: 5px;
}

The following JavaScript will use Modernizr to determine if the browser supports the CSS3 opacity tag, if not it will download JQuery and use JQuery opacity function.

Modernizr.load({
test: Modernizr.opacity,
nope: ['/Scripts/jquery-1.8.3.min.js'],
complete: function () {
if (!Modernizr.opacity) {
$("img").css("opacity", "0.3");
}
}
});


The following is a screenshot of the network tab in IE Developer tools using IE9 standards, we can see modernizr being downloaded and an image with rounded corners and opacity set.




The following is a screenshot of the network tab in IE Developer tools using IE8 standards, we can see JQuery being downloaded, the image still has opacity set but the corners are no longer round.

IE Proxy Settings shortcut

To set up a shortcut on the desktop to IE Connections Tab,

• On the desktop, right click and select "New Shortcut" 
• In "Type the location...." enter the following "C:\Windows\System32\control.exe Inetcpl.cpl,Connections,4" 
• Give it a name. 

And thats it.

70-583- Designing and Developing Windows Azure Applications.

Yesterday I passed this exam - Exam 70-583 Designing and Developing Windows Azure Applications. More details here.

Visual Studio Remote Debugging - Reminder Checklist

Steps to implement remote debugging.

1. You need to run msvsmon.exe on the remote pc
   1. Share this folder C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\Remote Debugger
   2. Go to remote and navigate to shared folder
   3. copy Remote Debugger folder onto remote pc
   4. run the relevant 32 or 64 bit version of msvsmon.exe
   5. Not sure on the permissions required for this but I know it works if you are an Administrator on this machine.
2. Double click msvsmon.exe on remote pc
   1. Go to Tools > Permissions and add the user that is logged onto the dev machine.
   2. Go to Tools > Options and copy the string that is in server name box - eg "DomainName\username@machinename"
3. Start the web app to be debugged on the remote machine
4. In Visual Studio on local machine - Debug > Attach to process
   1. Leave Transport as Default and in the Qualifier paste the server name copied in Step 2.2 above and click Refresh
   2. Select w3wp.exe to attach to
5. Start debugging.

Internal names of columns in SharePoint list

To find internal name of a column in a list you can use Visual Studio 2010 or SharePoint Manager 2010 (spm.codeplex.com) To get to Server Explorer CTRL W L and Select sharepoint connections and you can navigate down to the list in question. When running SharePoint Manager 2010 run as administrator and again you can navigate down to the list in question and determine the InternalName property of the column.

Exam 70-667: TS: Microsoft SharePoint 2010, Configuring

Today I passed the first half of the MCITP qualification, Exam 70-667: TS: Microsoft SharePoint 2010, Configuring

More details here.

Update 17 June 2011, I've now passed the other half of the MCITP qualification, Exam-70-668 PRO: Microsoft SharePoint 2010, Administrator.

I'm now MCITP SharePoint Administrator 2010.

More details here.

I'm now MCPD Microsoft SharePoint 2010

Today I passed this exam - Exam 70-573 -Microsoft SharePoint 2010, Application Development. More details here.

Together with the 70-576 exam I passed last month, I'm now MCPD Microsoft SharePoint 2010.

Exam 70-576 - Designing and Developing Microsoft SharePoint 2010 Applications

Today I passed this exam - Exam 70-576 - Designing and Developing Microsoft SharePoint 2010 Applications. More details here.

SharePoint 2010 upgrade

Some Useful stsadm/PowerShell

Pre upgrade audit

1. stsadm -o enumcontentdbs –url http://server01
2. stsadm -o enumallwebs
3. stsadm -o enumallwebs –includewebparts
4. stsadm -o enumsolutions
5. stsadm -o preupgradecheck
6. Test-SPContentDatabase -Name dbname -WebApplication http://server01

other

• stsadm -o setsitelock -url http://server01 -lock none
• stsadm -o addcontentdb -url -databasename
  make sure you spell databasename correctly

Some Useful links

Technet/Microsoft links

• Test-SPContentDatabase
• Attach databases and upgrade to SharePoint Server 2010
• Checklist for database attach upgrade (SharePoint Server 2010)
• Upgrade process overview (SharePoint Server 2010)
• Attach databases and upgrade to SharePoint Foundation 2010
• Upgrading to Microsoft SharePoint Server 2010 - Manual

Tools

• WssRemoveFeatureFromSite
• Upgrading to 2010: Feature and WebPart Inventory Reports

Blog posts

• SharePoint 2010 Upgrade: Test-SPContentDatabase - Key to Successful Upgrade
• SharePoint 2010 PreUpgradeCheck - Web Part Whack-a-Mole
• SharePoint 2010 Upgrade Simplified - Q & A
• SharePoint 2010 Upgrade: Test-SPContentDatabase - Key to Successful Upgrade
• Extracting dll’s out of the GAC
• Upgrading your Content Database to SharePoint 2010 – Database Attach method
• Checking for broken links in SharePoint
• Fix Pre-Upgrade Check errors
• List of all Windows SharePoint Services and SharePoint Server Pre-Upgrade Checker knowledge base articles