Why I Use Mac OS X for Web Development

Comparing and contrasting the way that operating systems handle certain tasks can be touchy for some people. As such, I think I’d better make this point right from the get-go: I don’t want this to be a flamewar. I use Mac OS X, Windows, and various flavors of Linux and have likes and dislikes about all of them. I am not saying that Mac OS X is superior to Windows and Linux operating systems in every way, nor am I saying that every web developer should always develop on Mac OS X. I am simply offering some points for web developers to consider when deciding which operating system to do web development on.

Mac OS X Has Better Compatibility with Popular Web Development Tools Than Windows

Git can be awkward to use on Windows. For example, the last I checked, if a repository uses symlinks, a workaround must be put in place to get that repository to play nicely with Windows, as described in this Stack Overflow question. Also, at the company I work for, we use Vagrant and rely on NFS synced folders because, without them, our virtual machine’s performance is pretty awful. Here is a quote from Vagrant’s NFS documentation:

Windows users: NFS folders do not work on Windows hosts. Vagrant will ignore your request for NFS synced folders on Windows.

These are just two of the issues I have with using Windows for web development and both are not issues on Mac OS X.

Mac OS X Allows Testing Browsers in a More Common Environment Than Linux

It is a well-known fact that for most websites, the majority of the visitors using desktop computers or laptops are running Windows or Mac OS X. So unless you know that a significant number of people in your target audience are using Linux, it doesn’t make much sense to do most of your testing in Linux. Some web developers may say that Firefox or Chrome renders pretty much the same regardless of the operating system. However, there can actually be significant differences. For example, consider this HTML:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Cross-Platform Test</title>
		<link href="//cdn.jsdelivr.net/normalize/2.1.2/normalize.css" rel="stylesheet">
		<style>
			div {
				width: 300px;
				border: 1px solid #000;
				font-family: Georgia;
				font-size: 16px;
				line-height: 24px;
			}
		</style>
	</head>
	<body>
		<div>
			When using Chrome 28.0.1500.95 and Firefox 23.0 on Windows
			7, Mac OS X 10.7.5, and Ubuntu 12.04.1, the number of lines
			this text takes up remains the same for both Mac and
			Windows (9 lines), but varies for Ubuntu (Firefox is 10 and
			Chrome is 8). Depending on what you are doing, this can
			cause noticeable design issues.
		</div>
	</body>
</html>

As stated within the above HTML, the way that the text in the above HTML gets rendered on Linux is significantly different than the way it gets rendered on Windows or Mac OS X. Here are some screen shots:

Chrome 28.0.1500.95 on Windows 7 Firefox 23.0 on Windows 7

Chrome 28.0.1500.95 on Mac OS X 10.7.5 Firefox 23.0 on Mac OS X 10.7.5

Chrome 28.0.1500.95 on Ubuntu 12.04.1 Firefox 23.0 on Ubuntu 12.04.1

So if you’re going to do your web development on Linux, you should probably not be too trusting in the way the browsers render your code. It would be safer to do all of your testing in a Windows virtual machine. There are free and legitimate virtual machines meant for testing websites in Internet Explorer available at modern.IE. You can use those same virtual machines for testing in Firefox and Chrome, of course.

With Mac OS X, you should still test your websites in Internet Explorer using a virtual machine, but I don’t think testing in the Windows versions of Firefox and Chrome needs to be done nearly as often as it does in Linux since those browsers render very similarly on both Mac OS X and Windows.

While I’m on the topic of testing browsers in virtual machines, I should note that based on what I’ve read in Apple’s software license agreement for Mac OS X 10.8.2, I believe that running Mac OS X in a virtual machine is only permitted if the host operating system is Mac OS X.

Mac OS X Has a High Level of Accuracy in Simulating iOS Devices, Unlike Windows and Linux

Xcode, which provides access to iOS Simulator, is available as a free download for Mac OS X. iOS Simulator provides a far more accurate iOS experience than any browser extension or web app I’ve seen. For more details, see my iPhone Website Testing: Windows Browsers vs. iOS Simulator┬ápost. I believe in this age of mobile devices ever rising in popularity, it’s important to test your websites on iOS devices, among other mobile devices. This may not be the case for every website you develop, but I would guess that it’s the case more often than not.

Go Daddy’s Database Creation Form: Horrible Password UX

A very poor decision was made by somebody at Go Daddy. That decision caused me hours of frustration and delayed the launching of a client’s website. Behold, the 14 characters that caused such grief:

maxlength="14"

When creating PHP websites, I, like many web developers, develop locally first. Once the client is happy with the website, I get things ready for production by uploading the code, creating a database, and importing the data. My troubles occurred with creating a database, specifically with the database password. Here are Go Daddy’s password criteria:

  1. be 8-14 characters long
  2. start with a letter
  3. include a lower case letter
  4. include an upper case letter
  5. include a number
  6. include a special character (!,@,#,%)
  7. not include these characters (^,\,$,`, )

Go Daddy has client-side password validation so that you can see which criteria your password meets and which it doesn’t. Now, given the popularity of phpMyAdmin and the fact that it generates 16-character passwords, I’d be willing to bet that there are a lot of MySQL database passwords out there that are 16 characters long. I also think it’s fair to assume that a significant number of web developers have their development database and production database share the same name, username, and password just to keep things simple. It’s not like it’s the root user, so why not?

Given these things, it’s only logical that it would be common for people to paste their database password into the password field on Go Daddy’s “Add a MySQL Database” form. And that’s a problem. Why? Because that password field has its maxlength attribute set to “14″. This means that if you paste anything more than 14 characters into it, whatever you pasted will be truncated without warning. So pretty much the only way you’ll notice that it got truncated is if you have a password significantly longer than 14 characters. Then, of course, you won’t be able to access your newly created database but, of course, Go Daddy’s tech support will be able to access it just fine. So I have some questions for Go Daddy:

Why limit the password length to such a small number? And if you’re going to do that, why not have that number be 16 since that’s the length of the passwords generated by phpMyAdmin? Next, why put the password’s maximum length in the HTML? The rest of the password criteria are checked client-side, so why not the maximum length as well? This way, if somebody pastes a password longer than the maximum length, “be 8-14 characters long” would get an “X” next to it and the person would realize that the password is too long.

Of course, the chances of Go Daddy reading this are slim to none. Even if they did read it, I highly doubt they would do anything about it. But maybe this blog post will help somebody else facing the dreaded “#1045 – Access denied for user ‘foo’@’172.16.254.1′ (using password: YES)” message.

Lastly, I want to say that the only reason I was using Go Daddy is this particular client was already a Go Daddy customer. Otherwise, I most definitely would have went elsewhere.

iPhone Website Testing: Windows Browsers vs. iOS Simulator

I believe that in most cases, it’s important to test your website’s design on an iPhone and an iPad. This is easy to do if you own both of these devices or if you own a Mac (since Macs can use the free iOS Simulator, which can be downloaded through Xcode). But what if you do your web development on Windows and don’t own one or both of these devices or a Mac? People often suggest using Chrome or Safari because they both use the WebKit rendering engine, which is what Mobile Safari uses. It’s just a matter of overriding the browser’s user agent string and resizing the viewport. But is this method just as reliable as using the iOS Simulator? I did some tests to find out.

The Test Environment

I ran iOS Simulator 5.1 (272.21) on Mac OS 10.7.4 and I ran Chrome 20.0.1132.57 and Safari 5.1.7 (7534.57.2) on Windows 7. All three browsers used the following user agent string:

Mozilla/5.0 (iPhone Simulator; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3

The Results

Conclusion

Although Chrome and Safari on Windows can produce results quite similar to iOS Simulator, I don’t believe they should be considered as reliable as iOS Simulator. Of course, none of the three should be considered a true replacement for the actual iOS devices, but I’ve compared all three to my iPod Touch and iOS Simulator definitely does a great job. So should you shell out your hard-earned cash for one or more expensive Apple devices? That’s up to you. Just be aware of the potential risks in putting too much trust in Chrome or Safari on Windows. Lastly, if you have the means, I encourage you to do your own tests before making a decision.

How to Properly Pause a PowerShell Script

When I first learned about PowerShell, I immediately wanted to convert my batch files into PowerShell scripts and then enhance them with additional features. When I started that process, I quickly learned that PowerShell didn’t have anything equivalent to cmd.exe’s “Pause” command. I looked for a solution online and found the Microsoft TechNet article Windows PowerShell Tip: Press Any Key to Continue. This is the solution recommended by the article:

Write-Host "Press any key to continue ..."

$x = $host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")

However, the above solution has two things wrong with it:

  • It doesn’t work from within Windows PowerShell ISE
  • Unlike cmd.exe’s “Pause” command, pressing keys like Ctrl and Alt causes the script to continue

To fix these two issues, I decided to write my own “Pause” function:

Function Pause ($Message = "Press any key to continue . . . ") {
	If ($psISE) {
		# The "ReadKey" functionality is not supported in Windows PowerShell ISE.

		$Shell = New-Object -ComObject "WScript.Shell"
		$Button = $Shell.Popup("Click OK to continue.", 0, "Script Paused", 0)

		Return
	}

	Write-Host -NoNewline $Message

	$Ignore =
		16,  # Shift (left or right)
		17,  # Ctrl (left or right)
		18,  # Alt (left or right)
		20,  # Caps lock
		91,  # Windows key (left)
		92,  # Windows key (right)
		93,  # Menu key
		144, # Num lock
		145, # Scroll lock
		166, # Back
		167, # Forward
		168, # Refresh
		169, # Stop
		170, # Search
		171, # Favorites
		172, # Start/Home
		173, # Mute
		174, # Volume Down
		175, # Volume Up
		176, # Next Track
		177, # Previous Track
		178, # Stop Media
		179, # Play
		180, # Mail
		181, # Select Media
		182, # Application 1
		183  # Application 2

	While ($KeyInfo.VirtualKeyCode -Eq $Null -Or $Ignore -Contains $KeyInfo.VirtualKeyCode) {
		$KeyInfo = $Host.UI.RawUI.ReadKey("NoEcho, IncludeKeyDown")
	}

	Write-Host
}

Here’s the minified version:

Function Pause($M="Press any key to continue . . . "){If($psISE){$S=New-Object -ComObject "WScript.Shell";$B=$S.Popup("Click OK to continue.",0,"Script Paused",0);Return};Write-Host -NoNewline $M;$I=16,17,18,20,91,92,93,144,145,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183;While($K.VirtualKeyCode -Eq $Null -Or $I -Contains $K.VirtualKeyCode){$K=$Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")};Write-Host}

Install PowerShell 2.0 on Windows XP Using a Batch File

I wrote a batch file (for use with Windows XP only) that installs PowerShell 2.0. Here are the three things you need to know about it:

  1. The batch file installs PowerShell 2.0 only if it is not already installed
  2. If service pack 3 for Windows is not installed, the batch file exits
  3. If .NET Framework 2.0 (at least service pack 1) is not installed, the batch file automatically installs the x86 version of .NET Framework 2.0 service pack 1

Here are the two files used by the batch file:

  1. Microsoft .NET Framework 2.0 Service Pack 1 (x86)
  2. Update for Windows XP (KB968930): includes Windows PowerShell 2.0 and Windows Remote Management (WinRM) 2.0

Here is the code for the batch file:

@ECHO OFF

REM Make sure this batch file is being run with Windows XP
VER | FINDSTR /L "5.1." > NUL
IF %ERRORLEVEL% NEQ 0 ECHO It appears that you're not using Windows XP, so this batch file will exit now.&GOTO EOF

REM See if PowerShell is installed
FOR /F "tokens=3" %%A IN ('REG QUERY "HKLM\SOFTWARE\Microsoft\PowerShell\1" /v Install ^| FIND "Install"') DO SET PowerShellInstalled=%%A
CLS

IF NOT "%PowerShellInstalled%"=="0x1" ECHO PowerShell doesn't appear to be installed.&GOTO CheckPrerequisites

REM PowerShell is installed, so now see which version it is
FOR /F "tokens=3" %%A IN ('REG QUERY "HKLM\SOFTWARE\Microsoft\PowerShell\1\PowerShellEngine" /v PowerShellVersion ^| FIND "PowerShellVersion"') DO SET PowerShellVersion=%%A
CLS

IF "%PowerShellVersion%"=="" (
 ECHO PowerShell appears to be installed, but the version number was unable to be
 ECHO determined.
 GOTO CheckPrerequisites
)

ECHO PowerShell %PowerShellVersion% appears to be installed.
IF %PowerShellVersion%==2.0 GOTO EOF

:CheckPrerequisites
ECHO.
ECHO Version 2 will now be installed.
ECHO.

REM Make sure service pack 3 for Windows is installed
REG QUERY "HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion" /v CSDVersion | FIND "Service Pack 3" > NUL
IF %ERRORLEVEL% EQU 0 GOTO CheckNETFramework2SP
CLS

ECHO It appears that you're using Windows XP, but without service pack 3. Please
ECHO install service pack 3 and then run this batch file again.
ECHO.
GOTO EOF

:CheckNETFramework2SP
REM Service pack 3 for Windows is installed, so now make sure .NET Framework 2.0 (at least SP1) is installed
FOR /F "tokens=3" %%A IN ('REG QUERY "HKLM\SOFTWARE\Microsoft\NET Framework Setup\NDP\v2.0.50727" /v SP ^| FIND "SP"') DO SET NETFramework2SP=%%A
CLS

IF NOT "%NETFramework2SP%"=="" IF NOT "%NETFramework2SP%"=="0x0" GOTO InstallPowerShell2

ECHO Installing .NET Framework 2.0 SP1...
START "" /WAIT NetFx20SP1_x86.exe /q /norestart
ECHO.

:InstallPowerShell2
ECHO Installing PowerShell 2.0...
START "" /WAIT WindowsXP-KB968930-x86-ENG.exe /quiet /passive /norestart

:EOF

An Easy Way to Run PowerShell Scripts

According to the Microsoft TechNet article Running Windows PowerShell Scripts, these are the three ways to run a PowerShell script:

  1. From within PowerShell
  2. From a shortcut
  3. From the “Run” dialogue box

It turns out that, as of PowerShell 2.0, there is another way, which is to simply right-click the PowerShell script and choose “Run with PowerShell”. But what if you have several PowerShell scripts that you want to run in succession and not simultaneously? I ran into this problem, so I came up with a solution that involves a simple batch file. With this batch file, all you have to do to run one or more PowerShell scripts is drag it onto the batch file’s icon and let go. Here is the code for the batch file:

@ECHO OFF
CLS
IF NOT EXIST "%windir%\System32\WindowsPowerShell\v1.0\powershell.exe" GOTO NoPowerShell

IF NOT "%~1"=="" GOTO Start

ECHO Drag a PowerShell script (or multiple PowerShell scripts) onto this batch
ECHO file's icon and let go to run it.
ECHO.
PAUSE
GOTO EOF

:Start
REM Make sure the "%~1" parameter is a valid path
IF "%~1"=="" GOTO EOF
IF NOT EXIST "%~1" GOTO ShiftParameters

ECHO This batch file will now launch the following file using PowerShell:
ECHO.
ECHO %~1
ECHO.
ECHO *** BEGIN ***
"%windir%\System32\WindowsPowerShell\v1.0\powershell.exe" ^&\"%~1\"

REM If an error occurs, pause the batch file so that the user can review the error message
IF %ERRORLEVEL% EQU 1 PAUSE

ECHO *** END ***
ECHO.

:ShiftParameters
SHIFT
GOTO Start

:NoPowerShell
ECHO PowerShell wasn't found at the following location:
ECHO.
ECHO "%windir%\System32\WindowsPowerShell\v1.0\powershell.exe"
ECHO.
ECHO Please install PowerShell and try again.
ECHO.
PAUSE

:EOF

Create Your Own Twitter Kiosk

I recently found myself in need of a way to view a Twitter timeline while having the following two requirements met:

  • New tweets must show up automatically
  • The font size must be able to be set high enough to see from across the room, preferably for only the first three tweets (as opposed to all of the tweets)

I scoured the Internet for a Twitter client that met these two requirements and was quite surprised to find that all of the major Twitter clients (TweetDeck, Seesmic, twhirl, etc.) lacked the ability to set the font size to a very high setting. I could just use the official Twitter website and use my browser’s zoom control to increase the font size, but the thing about the official Twitter website is that it doesn’t show new tweets automatically; it only notifies you of new tweets.

Seeing that I couldn’t find a Twitter client or webpage that met my requirements, I decided to create my own webpage. Since the time I made that decision, I’ve created a PHP/JavaScript version and a JavaScript only version. I call it “Read Only Twitter” because it’s meant strictly for viewing a Twitter timeline; not for tweeting.

I highly doubt I’m the only person in the world in need of a Twitter client or webpage that meets the two requirements listed above. That being the case, I decided to release my project to the world.

You can view a live demo (using the public Twitter timeline) and download the script here.