Mobile Magic

Yesterday I discovered a migic little for making mobile-friendly sites, its the viewport meta tag. It goes something like this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

It tells the browser to set the page width to the same size as the targets screen (I am pretty sure it gets mostly ignored on desktop browsers)
This allows you to create variable width pages that will look right on almost any size of screen. Though there are still a few more tricks to perform to make everything look right all of the time. Head on over to HTML5 Rocks for more info.

Installing windows phone 7 SDK on windows XP.

Microsoft has decided that all of their new products will only install on vista or Windows 7. They do this even if there is absolutely NO REASON for this restriction. Examples are their folder syncing tool, IE 10 and other tools and applications. The newest tool I have found not offered for XP is the phone7 SDK and development IDE (based on Visual Studios 10) Visual studios 10 works just fine on XP and is supported, but not the SDK for the phone? Why, Microsoft? WHY? Don't you want people making apps for your new offering? Don't you want some market share?

But there is a kicker... the SDK and IDE are completely compatible with XP. There is no reason to exclude XP other then to force upgrade to windows 7. Here is how to install it. It's as easy as changing two values in a text file Smile

http://www.redfrogfish.com/483/how-to-install-windows-phone-7-developer-tools-on-windows-xp/

Syntax-highlighted Markdown Blocks using Prettify in Wordpress

Nick and I have been playing with WordPress on the test site lately. I wanted to implement a Stack Overflow style Markdown input with syntax highlighting. This can be quickly accomplished by activating MarkItUp!, PHP Markdown, Prettify for WordPress, and (optionally) ThemeKit.

With this, you can create code blocks in the standard Markdown way: indenting with four spaces:

This is [Markdown](http://michelf.com/projects/php-markdown/).

    // And this is code
    int i = 0;

End of `code` region.

This works well, but doesn't add syntax highlighting to code blocks. Instead, you have to enter HTML code into your Markdown, manually specifying class="prettyprint". In my mind, this defeats the elegance and simplicity of Markdown.

This is [Markdown](http://michelf.com/projects/php-markdown/).

<pre class="prettyprint">
<code>
  // And this is code
  int i = 0;
</code>
</pre>

End of `code` region.

Ick. Fortunately, the fix is very simple: edit wp-content/plugins/markdown.php to automatically add the "prettyprint" CSS class to preformatted code blocks. If you're in a hurry, download my edited copy. Otherwise, open the file a text editor and find line 1105:

$codeblock = "<pre><code>$codeblock\n</code></pre>";

Add class="prettyprint" to it:

$codeblock = "<pre class=\"prettyprint\"><code>$codeblock\n</code></pre>";

Save it and reload your pages. All code blocks should now automatically have syntax highlighting.


Download markdown.php

Google Chrome's about:flags page has gone missing (update: it's back!)

After recently upgrading to Chrome 14.0.835.159 beta, I noticed that the "experimental new tab page" was no longer working. Though disappointing, there was a very prominent warning that these features could change or disappear. That's not the problem, per se.

What is a problem is that about:flags, the page where you enable this and other experimental features, is mysteriously missing. It's just gone. The browser returns a generic "page not found" message:

This webpage is not available

The webpage at chrome://flags/ might be temporarily down or it may have moved permanently to a new web address.

Error 300 (net::ERR_INVALID_URL): Unknown error.

This issue is easily replicated in both Windows and OS X.

about:flags missing (Windows 7)
about:flags missing, OS X 10.6.8

I asked this question on superuser this morning to no avail. After a little more searching, I came across Chrome's Release History page on Wikipedia. The final entry indicates that this was done intentionally.

Major versionRelease dateWebKit versionV8 engine versionOperating system supportSignificant changes
15.0.8742011-09-09535.23.6.0Windows Mac LinuxFaster print preview. Removed chrome://flags experiments: Experimental new tab page on by default. Switched to FFmpeg native VP8 decoder.

The Google Chrome Releases blog indicates that they are "investigating some stability issues." There is also now a Chrome help forum thread about this.

This doesn't appear to be a particularly popular move, but these options are still available for those running dev releases. Hopefully this gets merged back in to the beta channel soon. We people running beta software like this sort of geekery Smile


Update: version 14.0.835.162 beta fixed this issues by re-enabling the about:flags pages. All experimental features should be functional again.

Update to Fuel Mileage Tracking Web-App

Create new entry

A few months ago, I whipped up a few PHP pages which saved gas mileage statistics to a Google Spreadsheet and called it a web app. Now I have totally gutted the UI and replaced it with a jQuery Mobile front end. The result is a much more phone-friendly interface, great for using at the pump. It is now live at gas.randomland.net.

I have and placed the project on github. A copy will remain on the Randomland SVN for the time being. And, as with the original code, I'm releasing it under the Apache 2.0 license. Clone and fork at will!

View fill-up history

Also as before, the code connects to your Google Docs account. To get started, open the master spreadsheet on a desktop computer and click File->Make a Copy. Give it a name ending with (rlgaslog) (subject to change!) (mobilemiles). Then go to gas.randomland.net and authorize access to your Google Docs from your mobile device.

The rest should be pretty much self explanatory. There are really only three options: list available docs, list existing entries, and add a new entry.

There are still a number of performance and usability issues I plan to address. If you have any suggestions or bug reports, blurt them out in the comments section of this post or on github. Enjoy!

P.S. In case you're wondering, the stats in the screenshots are real, from my 16-year-old daily-driver Toyota Camry Smile

Syndicate content