Posts in category development - page 5

Safari 3.1 includes developer tools

Safari 3.1 has just been released and besides the partial CSS3 (fonts) and partial HTML5 (media tags, off-line storage) support there are some new developer tools included.

Safari has had a hidden Debug menu for some time and WebKit featured developer tools but with 3.1 Apple have unleashed them to the masses.

Head into Preferences > Advanced and choose Show Develop menu in menu bar to get this new Develop menu.

It includes:

  • Open Page With (Internet Explorer, Firefox 2/3, Camino, Mobile Safari etc.)
  • User Agent switching
  • Show Web Inspector (inspect element)
  • Show Error Console (including HTML errors)
  • Show Network Timeline (like Firebug’s network view)
  • Show Snippet Editor
  • Disable Caches/Images/Styles
  • Disable JavaScript/Runaway JavaScript Timer/Site-specific hacks

Here’s the Network Timeline in action on OS X:

Screen-shot of Safari 3.1's Network Timeline on Mac OS X

There are some odd drawing issues within the snippet editor and inspecting from the inspector on Windows but with this, Firebug and Internet Explorer 8’s Developer Tools we’re spoiled for choice!

[)amien

And no, it doesn’t pass the rather abstract Acid3 test

Testing web sites with the iPhone SDK

Apple’s iPhone SDK is now available in beta format for free download (running your apps on a real iPhone is a one-time $99 charge).

The 2.1GB download contains the full Xcode 3.1 environment for Mac app development but also an extra 22MB of iPhone-specific SDK goodness including an iPhone simulator named Aspen Simulator (perhaps the code-name for iPhone). Whilst most of the iPhone’s apps are absent you can still access settings, photos, Safari and contacts.

Besides the cool idea of creating real iPhone apps you can also use Mobile Safari to test your sites on an iPhone – very cool! Here’s DamienG.com in the simulator when twisted round 90′.

DamienG.com rendered on the iPhone

[)amien

Humane theme for TextMate and Xcode

My Humane theme for Visual Studio is getting a fair bit of traffic today courtesy of Scott Hanselman. Given I have been messing with Mac development lately I thought it was worth porting to TextMate and Xcode 3.

Panic Sans coding font

My Envy Code R programming font isn’t great on the Mac yet so I have configured these to use the excellent but overlooked Panic Sans in 12 point which unlike Monaco is available in bold, italic and bold italic variants. (I love my comments to be italics)

To install this font you must:

  1. Download Panic Software’s Coda application
  2. Navigate to the Coda application and choose Show Package Contents
  3. Navigate to the Contents/Resources folder
  4. Double click on the Panic Sans.dfont and press Install Font
  5. Panic Sans is now available to other applications too

TextMate

Screenshot of the Humane Theme and Panic Sans 12 point inside TextMate

Download Humane theme for TextMate (5 KB)

Launching the downloaded .tmTheme file will cause it to copy to ~/Library/Application Support/TextMate/Themes

Select Humane from the Preferences > Fonts & Colors pane in the drop-down list box

Xcode 3

Screenshot of the Humane Theme and Panic Sans 12 point inside Xcode 3

Download Humane theme for Xcode (4 KB)

  1. Copy to ~/Library/Application Support/Xcode/Color Themes
  2. Select Humane from the Preferences > Fonts & Colors pane in the drop-down list box

Porting themes

Until somebody comes up with an IDE-independent theme format or cool converter we’ll have to do it by hand. The easiest way I have found is:

  1. Install Hex Color Picker on the Mac to allow entering hex into the standard color picker
  2. Open the Visual Studio theme .vssettings file in a text editor
  3. Open up the Fonts & Colors preferences pane up in your Mac IDE
  4. Go through each one and choose the nearest match in the .vssettings
  5. Transcribe each color by reading the VS color pairs backward, e.g. 00631409 becomes #091463

[)amien

Preview of Envy Code R programming font

Envy Code R has been updated since this post.

My last post got me thinking – if I’m so happy with Envy Code B bar it’s ability to scale or take advantage of ClearType then there is only one real option. I reached for the pixelated TrueType conversion of Envy Code B and five hours later had a rough version of my first ever vector font – Envy Code R.

It’s unlikely I’ll be able to work on this before I get back from Japan so it will have to wait but here’s a sneak preview of it stacking up against Envy Code B and the current cool kid on the block Consolas.

Preview of Envy Code R

The new font will try and be as much like Envy Code B at point size 10 whilst taking advantage of ClearType and hinting where possible. There is still a lot of work to do on the unusual symbols, foreign characters and increasing the curve emphasis whilst not destroying the scaled letter-form versions.

Here’s a preview inside Visual Studio 2005:

Preview of Envy Code R font at point size 10 inside Visual Studio 2005

I promise that’s all the font posts for a little while…

[)amien