How to simulate any browser by editing the user agent string in Safari

I recently modified one of my websites to display different content depending on which device is used to access it. For conventional web browsers, a traditional homepage is displayed, while for mobile devices the user can choose between downloading a mobile app or proceeding to the website. The question was how to test this without borrowing several different types of mobile devices and installing several web browsers. Safari provides a convenient way. Here's the procedure, using Safari 5.1.1 on Windows...

If the "Develop" menu isn't already enabled, click the "Tools" icon at the top right and select "Preferences..." from the resulting menu. On the "Advanced" tab, ensure that "Show Develop menu in menu bar" is selected.

Now use the "Develop" menu -- either by selecting the icon just to the left of the tools icon, or by pressing the Alt key to display the menu bar across the top of the window. On the "Develop" menu, click "User Agent".

You'll be presented with a list of several user agent strings to choose from, simulating popular browsers. Better still, you can click "Other..." and type in any user agent string you wish.

Safari uses the specified user agent string for the current page. The setting appears to persist for any page viewed in the current tab, but doesn't apply in new tabs, new windows, or after your close the browser.

Thanks to my colleague Nidhi Bhargava for researching this tip.

Notes from a WordPress newbie

So my day job involves a lot of .NET and SQL, and I've worked with dozens of programming languages and software packages during my career, but I've never done anything with WordPress. Thanks to a volunteer project for the Youth Orchestra of Essex County, that's about to change. I've been asked to maintain some content on their website, which uses WordPress.

One problem I noticed was with the menu at the top of the site. It worked fine in Chrome, but in Internet Explorer 9, when I hovered the mouse over a menu tab, and the submenu was displayed, a small vertical gap appeared between menu and submenu. When passing the mouse over this gap to try to select a submenu item, the submenu disappeared. Very annoying!

I posted this problem to the WordPress forum, and got a response within hours. (Thanks, vtxyzzy!) The response said:
Try adding this to the end of style.css:
ul.children { top: 24px !important }

So I had to figure out how do to that, having never used WordPress before. Here's what I did...

• Log in to the admin page for yoec.org, yoec.org/wp-admin.
• There's a menu of links on the left. One of them is Appearance. I clicked that. and it expanded.
• This displayed a menu of links related to Themes. One link was Editor. I clicked that.
• This displayed a text editor pane in the middle of the screen, and a list of files on the right.
• I scrolled through the list of files, found a category labeled Styles, and under that, a file labeled Stylesheet (style.css).
• I clicked that filename, and the file was displayed in the text editor pane.
• I scrolled through the (rather long) text of style.css until I reached the bottom.
• I appended the recommended line, ul.children { top: 24px !important }.
• I saved my changes by clicking the Update File button at the bottom of the page.
• I viewed the website in IE9, and the problem was gone!

I will probably have more to say about WordPress, from a total noob perspective, in a future post.

TFS command-line interface - unlocking files locked by other developers

One of the developers who works for me went to work on a project in Visual Studio, which is under source control in Team Foundation Server. He discovered that some files were locked for editing by another user, so he couldn't complete his task. The other user was an intern who no longer worked for us, and couldn't be reached to correct the problem. I used TFS's command-line utility, tf.exe, to unlock the files.

First I determined which files were locked, and by whom. I did this using Visual Studio 2010 on the laptop I use for software development. (My installation of Visual Studio includes Visual Studio 2010 Team Explorer.) From the Team tab, I opened the Source Control window. Looking in the Pending Change column and the User column, I could see which files were locked for edit, and by which users.

Then I used Remote Desktop to connect to the server on which TFS is hosted.

I opened a Visual Studio command prompt. On my server, this is accomplished by selecting Start | All Programs | Microsoft Visual Studio 2010 | Visual Studio Tools | Visual Studio Command Prompt (2010).

At the command prompt, I used a command similar to the one below to unlock each file.

tf undo "$/LocalUp/LocalupMenus/CMSBackEnd/bin/CMS.BackEnd.ClassLibrary.dll" /WORKSPACE:INTERN2-PC;mbakiev /server:http://10.2.66.30:8080/tfs/defaultcollection

There are three pieces of information you need to construct such a command.

First, in red, is the name -- as TFS understands it -- of the file to unlock. You can get this by right-clicking the file in Source Control Explorer and selecting Properties. On the General tab, look for the Server Name.

Second, in blue, is the name of the workspace of the user who has locked the file. Get this by right-clicking the file and selecting the Status tab. There you can see the name of the user's workspaceFor example, one of my developers' workspaces is named INTERN2-PC;mbakiev.

Third, in green, is the name -- as TFS understands it -- of the server. To determine this, I clicked the top node of the source tree in the Team Explorer window. Note this has to be in the small Team Explorer pane, not the big Source Control Explorer pane. Then the Properties window will display various information, including the "Url". That's the value -- http://10.2.66.30:8080/tfs/defaultcollection in my case -- you need to supply as the server name.

Not simple, but it worked!

A tip of the hat to this helpful article.