Stop using Firefox.

No seriously, stop that ish. Increasingly, Google’s browser, Chrome, has gotten much, much, much better than our default go-to tool for web development. However, the tooling on Chrome has been pretty weak up until now, leaving us married to some odd combination of plugins, extensions and user scripts.

That’s slowly changing, and now there’s some solid extensions on the Chrome side to help you get your job done.

So, in no particular order, the extensions:

Pendule

This is the Web Developer Toolbar for Firefox. In Chrome. Awesome.

Eye Dropper

  • Gives you a color palette in your browser window, which is handy
  • Lets you grab a current color from the page, and automagically copy it to your pasteboard.

Chrome Sniffer

This one’s interesting… this will add an icon to your URL bar indicating any particular JS libraries, CMSes, or whatnot that a given page is using.

Resolution Test

It’s a resolution switcher. Yaay! Not like we haven’t seen these before in various other browsers, but having it next to your URL bar may actually mean that you’ll use it.

RSS Subscription Extension

I have no sodding clue why this isn’t installed by default. It’s an RSS button, just like Firefox has had since version 1.5.

Install it, configure it to use Google Reader, and then forget about it until the next time you have to install Chrome.

XML Tree

Chrome doesn’t parse XML trees off the bat, opting instead to display them as plaintext, sans linebreaks.

This fixes that.

Google Tasks

Okay, maybe not a dev tool quite yet, however once Google opens an API to the service, this will become a very, very useful way to share tasks, to-do lists, etc.. Until then, it’s useful to keep your personal list of tasks close at hand.

Kindle CSS formatting

I’ve got a shiny new Kindle, and like any complete and utter geek, I’ve spent most of my time since getting it seeing what it can do.

Since this is the Kindle 2 (and not the DX), the only native formats it supports are .MOBI and . AZW, but thankfully you can convert most document types by sending the document as an attachment to your kindle email address (usually, <name>_<numbers>@kindle.com), which sends it via their cellular network to your kindle.

This formatting process usually mangles the document structure, and since I’m a web geek, HTML/CSS may be an easier format to convert to/from. Sadly, there’s little documentation on what CSS does or doesn’t work on the Kindle, so in hopes of getting some of this written down, I’ve run a few test cases against the beast.

So, bottom line? What works:

  • Text indent (all paragraphs start out with a 4em text-indent)
  • Color * (greyscale only; colors are ignored)
  • Margin * (need to specify each direction individually, and left/right don’t work)
  • Text-Align
  • Text-Decoration * (overline doesn’t work)
  • <tt> (used to indicate monospaced fonts)
  • <em>
  • <b>
  • <i>
  • <strong>

What doesn’t work?

  • Padding of any sort
  • Text-Transform
  • Letter-Spacing
  • Word-Spacing
  • White-Space
  • <pre>

So far, that covers most of the text rules. Haven’t looked too far into positioning CSS yet, but the outlook doesn’t look too hot.

And because this sort of thing wouldn’t be complete without examples, here’s the HTML file used and the screenshots from the Kindle itself:

<html>
    <head>
        <title>Kindle Test Page«/title»
        <meta type="author" content="Paul 'Tester' Sweeney">
        <meta type="copyright" content="8-bitDesign">
        <meta type="description" content"This is a test page to test various CSS styles on the Kindle">
    </head>
    <body>
        <p style="margin:0 auto; width:100px;">margin:0 auto; width:300px;</p>
        <p style="text-indent:5em;">text-indent:5em;</p>
        <p style="border-bottom:1px dotted black;">border-bottom:1px dotted black;</p>
        <p style="background:black; color:white;">background:black; color:white;</p>
        <p style="color:#666;">color:#666</p>
        <p style="color:#333;">color:#333</p>
        <p style="color:#ccc;">color:#ccc</p>
        <p style="margin:5em;">margin:5em;</p>
        <p style="padding:5em;">padding:5em;</p>
        <p style="line-height:3em;">line-height:3em;</p>
        <p style="letter-spacing:1em;">letter-spacing:1em;</p>
        <p style="font-weight:bold;">font-weight:bold;</p>
        <p style="font-style:italic;">font-style:italic;</p>
        <p style="text-align:right;">text-align:right;</p>
        <p style="text-align:justify;">text-align:justify;</p>
        <p style="text-align:center;">text-align:center;</p>
        <p style="text-align:left;">text-align:left;</p>
        <p style="text-decoration:underline;">text-decoration:underline;</p>
        <p style="text-decoration:overline;">text-decoration:overline;</p>
        <p style="text-decoration:line-through;">text-decoration:line-through;</p>
        <p style="text-transformation:uppercase;">text-transformation:uppercase;</p>
        <p style="text-transformation:capitalize;">text-transformation:capitalize;</p>
        <p style="text-transformation:lowercase;">text-transformation:lowercase;</p>
        <p style="white-space:pre">white-space:pre;    this is a test         also:       test</p>
        <p style="white-space:nowrap">white-space:nowrap;    this is a test         also:     test; somereallyreallyreallyreallyreally
        <p style="word-spacing:3em;">word-spacing:3em;    this is a test         also:        test; some really really really really r
    </body>
</html>

Kindle test - Page 1Kindle test - Page 2

Seriously?

So, I log in to play Fallout 3, being the wonderful little Alpha Geek that I am, and I hear that there’s some cool new expansion pack that I can download and play.

Awesome! I pop open the Games for Windows: Live account thingy, and… well, shit. I need to update it first.

So, I apply the update, which automatically quits the game for me (sans warning), and leaves no indication that it’s installed correctly.

After five minutes of reading blogs, I get impatient, load the game up again, and go back the the Games for Windows: Live… thingy. Great, now I can log in! Okay, so I go futz around for a bit, check out their really slick interface, and even IM some friends who are playing XBox games. All in all, very cool.

But I can’t find the interface to actually grab this expansion pack.

Back to the game, I see there’s a new item on the main menu, obtusely named “Downloads”. Okay, so I click that and up comes another menu with another obtusely named item, “NEW CONTENT AVAILABLE”.

…Sounds like what I’m looking for, I guess. I click on that item, and I get a Games for Windows: LIVE dialogue box, telling me that I’ll need to open another program to download this content. Fair enough, I click “Okay” and my game is minimized… and I get another dialogue box, telling me I need to apply a hotfix for WinXP.

Now, this computer is fully patched, according to Windows Update, so this is a bit odd. Additionally, this means I need to shut down my game, apply a system update, reboot my system, restart my game, navigate through the game’s menu to open another program, to view a page, to buy the fucking content.

Seriously? That’s just so… Microsofty.

Why can’t I just download this through Steam, which doesn’t require diddling with the core OS to function? Or, you know, just have the game point me to a damned webpage where I can fork over my cash all-bloody-ready.

UPDATE:
So I restart, I get the Games for Windows:LIVE program up and running, and I navigate to the Fallout 3 DLC section, and click “Buy”. Now, this is 800 Microsoft Points, and on my LIVE account, I have 240 points. This is really, really, really cool that points are shared on the account; I can add points on my XBox and they show up in Games for Windows: LIVE, and vice versa.

Being so very close to the end now, I click “Buy” and… well, I need to add points to my LIVE account, and apparently I can’t do this through the Games for Windows: LIVE program. The program tells me this, I hit “Okay”, and up pops… IE7.

I go to Add/Remove Programs, check the “Set Program Access & Defaults” tab to check what my system’s web browser is, because there’s no fucking way my default browser is IE7. Yes, it’s Chrome. Why IE7, a browser I never use, is popping up, is fucking beyond me.

So, looking at IE7, I need to log in again (can’t pass a security certificate back and forth?), add points, close the browser, go back to Games for Windows:LIVE, and close the “When you’re done buying points, click ‘Okay’” dialogue.

This is dumb.

Bethesda, seriously, cut your contract and just put this content on Steam for the love of all that’s good and holy.

Moving on

So, on the off-chance that you read this blog, but don’t talk to me on the regular, here’s a quick update on the life of Paul: I’ve accepted a position with the rockin’ guys over at Gorilla Nation as their new Front End Web Developer.

They’re a very cool, and I really appreciate the chance to sink my teeth into more of the Front-End web work these days. Also, they’re in Los Angeles.

The next big bit of news is that I’ll be moving in with my LadyFriend™, the lovely miss Becky, by the end of the year, to parts unknown in the west side of LA.

So, if you happen to know a web developer looking for work, there’s a definite opening over at On the Edge, and if you happen to know any cool apartment complexes in west LA, give me a yell!

User stylesheets are Awesome(TM)

So, I’m at the coffee shop last night, reading the dead-brilliant “The Difference Engine” (quick bit of algebra for you: William Gibson + Steampunk == Awesome), and decided to look up about a half dozen things in Wikipedia because my knowledge of 19th century Analytical Engines isn’t quite up to par.

Fortunately, I had my nifty N800 with me. Unfortunately, Wikipedia’s layout sucks for a cramped device like the N800. Compounding that wonderfully cramped feeling, Kiwi, a Wikipedia client for the iPhone was released today, making it dead easy to surf your favourite bastion of Power Rangers cannon, or Argentinean Government Holidays.

Rather than shell out the cash for an iPhone, I figured I could probably make my Wiki-ing a fair bit easier, which is how I stumbled across User Stylesheets. Sure, I’ve heard about these forever, and supposedly GreaseMonkey has made support for them trivially easy, but I’ve never really dipped my toes into using CSS to edit other people’s websites.

So, over lunch, I sat down, and quickly cobbled together this stylesheet, which strips out the Wikipedia header, footer, and sidebar, and then re-jiggers the text. The net result is a much easier page to read on tiny devices like the N800:

Photo courtesy of my not-iPhone

Photo courtesy of my not-iPhone

And here it is mocked up in Firefox, because my phone takes miserable photos:

In Firefox, not on a tiny computer

In Firefox, not on a tiny computer

For anyone who has an N800 and wants to try this out, you just need to load your user specific CSS into

/home/user/.mozilla/microb/chrome/userContent.css

and use Mozilla’s at-rule for domain selectors, so you don’t end up breaking the internet.

Google Chrome?

Becky made the mistake of asking for my opinion on the new Google Chrome, and how it’s going to affect my day to day life.

This is a mistake: I’m a web dev, and we tend to have very strong opinions about our browsers. Anyways, here are my thoughts on what Google’s doing here.

To start with, Chrome is different from most browsers in two ways:

  1. It isolates each tab. Effectively, instead of opening 4 tabs in Firefox, you’re opening 4 browser instances in Chrome. The difference here is that if one tab explodes, the rest of the browser stays stable.
  2. It has a shit-hot Javascript optimisation/compilation engine (V8), meaning Javascript goes way faster.

So, the big thing here is that they’re going to an OS model for browsing. Most modern OSes have protected memory, meaning that if Word crashes, the whole OS stays stable. OS8 on the Mac side and Win95/98/ME lacked this, meaning that any application crashing would hose your whole OS and force you to restart.

Nowadays this seems silly, but back in the 90’s, most of us were restarting our systems on a daily basis out of habit, presuming the OS didn’t pre-empt us. Understandably this is a modern OS feature and something sorely lacking from our current crop of browsers; if YouTube crashes or slows to a crawl, you may lose an email you’re composing in gMail or Google Docs.

Also, they’re including a “Task Manager”, so you can see which tabs are acting up, using a tonne of memory, or otherwise being pricks. Currently if a site is slowing your browser to a crawl, there’s no way to tell which one’s responsible, leaving you scratching your head when you get yet another “A script on this page is acting up” type message pops up. This is another OS standard OS feature, which gives users the ability to force quit, or otherwise kill any offending tasks.

So as for how this changes my life? It doesn’t. Sadly IE6 is still the lowest common denominator, so we can’t do anything new that would exclude that. And hell, apart from the two points above, it’s the same rendering engine as Safari, so there’s not the greatest shift in how pages render.

Once this browser makes its way into the mainstream, however, we’ll get good feedback about how fast/sluggish our pages are, and be able to optimise them. At the moment, traditional browsers lump all resource allocation together, so I can see that Firefox is bogging down, but not which tab in Firefox is bogging down.

Oh, and Javascript based Apps like Google Reader, Gmail, Google Docs, Google Calendar, and Google Spreadsheet will be much faster and desktop-like.

And that’s the big point of this. Instead of downloading Word, you can use Google Docs, and with all the optimisations here, using Google Docs on Google Chrome is almost as fast as Word. Hell, look at all the OS features here. Any ideas spring to mind?

Google can’t unseat Microsoft in the OS space, but they’re building an application platform that doesn’t care about the underlying OS. Apple, Linux, Windows… Google’s trying to make those distinctions irrelevant for 90% of the programs out there.

Combine some of the cool things going on in the plugin space, like the ubiquitous Flash or the up-and-coming InstantAction.com plugins which enable advanced interaction outside of a specific OS, and soon we’ll be able to party like it’s 1999. That’s right, after decades of hype, the era of the Thin Client is fast approaching… again.

Carmel

So, Becky’s TV show is about to go into production, so with the 4th of July up, we decided to take a trip out to Carmel-by-the-sea. Yes, that’s the town’s real name, and Google has made a habit of correcting me when I shorten it to “Carmel, CA”.

If you’re not in “the know”, Carmel is this gorgeous (and very shi-shi) little seaside village, just outside of Monterey, which is itself right across the bay from Santa Cruz. So, now that you’ve got that little bit of mental geography tucked away, the trip.

Carmel, is absolutely beautiful, and if you’re not careful, you could easily mistake it for any town in Italy or France, with cute little restaurants, galleries, and coffee shops. The town itself is tiny, and you can walk tho whole thing is a few hours. We stayed well-fed on pizza and pastries, downed in coffee, and did a wee bit of shopping (I picked up one of these things, and I absolutely love it), and when we got bored, we stopped by Monterey, to check out the aquarium there. 

Good times all around, and you can check out the photos on Flickr!


Becky's Socks

Photos!

Well, it only took me a month or so, but now I’ve gotten my photos all sorted out, and you can see them here: Japan Photos!

So, since everyone’s been asking, here’s the photo of the capsule hotel, specifically Reynolds demonstrating how tall these things are. So, you have approximately 10 of these capsules in a row, with two rows stacked on each wall and sumbarine-style ladders between them.

All in all, not horrible digs. You do have a lounge upstairs to relax, watch TV, or drink a beer in (there is a limited bar/diner as well). A spiffy Japanese-style public bath and a dorm-style shared bathroom are available for you to clean up in. You don’t spend all your time in the coffin as some people think and it’s just a crash-pad, not a proper hotel, so you book your pod nightly and gotta take all your just with you on the way out at 9AM prompt.

So yeah, enjoy the photos, and feel free to leave all sorts of scandalous comments.

Nagano

Well, we’re back from Japan, the jetlag is fading, and the separation anxiety is setting in. Welcome home.

I still catch myself missing snippets of the country here and there, when driving past clubs and bars, or even something as daft as noticing the blank posterless sections of the wall in our apartment. The space is jarring, and quite possible the first thing you notice upon returning if not the last thing you forget.

Anyways, while it’s still in my mind, let me jot down a few of our experiences in Nagano.

The city itself is no more than a train station, two malls, and a main drag. Past that, the city peters out into suburbs which stretch off in to farms, and then out to the villiages, like Toyota, where we stayed. 

Reynolds’ place is about 30 minutes from Nagano proper, outside of Nakano, a small town in the region. Specifically, he lives in Toyota-mura, which consists of apple farms, and about a dozen houses. This, of course, was in stark contrast to Tokyo and Kyoto, and only after the first few cautious glances and the odd stare from passers-by, did we realise that four Americans (*) walking down the street in Toyota probably isn’t a common occurance. 

Despite the initial… confusion, just about everyone we ran into in Toyota was very welcoming. On our first full day there, we hiked up into the nearby hills, looking for fresh snow, left over from the weekend, and ended up stopping to chat with the local traffic guard, one of the nearby farmers, and the odd student of our dear Reynolds. It never ceases to surprise me to see how much of our communication with each other people goes unsaid. We were able to bolster our meagre Japanese skills with pantomiming, bad translation, snippets of English, facial expressions, and laughter at times.

Speaking of the hills, quite possibly, the most beautiful moment in our trip through Japan had to be that first night in Nagano. After days of non-stop hiking through Tokyo and Kyoto, Reynolds suggested we end our first night in Nagano at one of their famous hot springs. So, at 9, we all pile in the car, shivering and freezing (only 2° centigrade!) and drive up to the nearby town, Iiyama. We drove until we reached the hot spring, sitting on a mountain overlooking Nagano.

So, we hop through the pre-onsen ritual (strip down for a quick, public shower) and stepped outside. Into the snow and the cold with only a 36 square inch towel to protect all dangly bits from sight and the elements.

And then we stepped into the spring: It was 42º centigrade in the cold end! So, here we are, sitting naked, in the hottest natural jacuzzi I’ve ever seen, outside, at night, overlooking the entirety of Nagano, while pinpricks of snow are melting against my face. Looking up, all you could see was the velvet black night, behind the roiling steam from the onsen, and the falling snow.

I can think of few moments in my life that have been that peaceful. The thought of an American-raised, Scottish son stewing in a Japanese hot spring on the other side of the world just seemed so daft right then and there. This world seems so full of surprises at times.

Things work now!

Okay, so as it’s been pointed out, comments on this blog don’t work.

…or do they?

That’s right folks, now that I’m stateside again, I’ve been able to hammer out the odd CSS issues which were causing the comments to not work. Meaning, that new they do work!

So, that’s right, mum, now you can tell me what the cats are doing in a whole new public forum!

It’s like high-school all over again.

Oh, and this post was brought to you by the letter “em”. A beer to the first man to understand this cryptic joke.