Click and Drag Press and Hold

I really loved today's xkcd, "Click and Drag", but couldn't bring myself to spend that much time on my tiny trackpad, well, clicking and dragging. Never one to demur to the challenge of allowing myself future laziness, I wrote the following code to let me move around the incredible illustrated world with my keyboard. Faking mouse events FTW!

Just copy and paste the code into your browser's JavaScript console to play!

Here's the below code as a bookmarklet: Press and Hold

// get the map element
var el = $('.map')[0];

// amount in pixels we want to move each keypress/hold
var move = 200;

function fakeMouseEvent(type, x, y) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent(type, true, true, window,
                       0, 0, 0, x, y, false, false, false, false, 0, null);
    el.dispatchEvent(evt);
}

$(window).keydown(function(e) {
    var key = e.which;
    if (key >= 37 && key <= 40) {
        e.preventDefault();
        var left=0, top=0;
        if (key == 37) { left += move; }
        if (key == 38) { top += move; }
        if (key == 39) { left -= move; }
        if (key == 40) { top -= move; }
        fakeMouseEvent('mousedown', 0, 0);
        setTimeout(function() {
            fakeMouseEvent('mousemove', left, top);
            setTimeout(function() {
                fakeMouseEvent('mouseup', left, top);
            }, 0);
        }, 0);
    }
});
    

posted 2012-09-19 #

Stupid Ideas

Sometimes you need to dig into a really stupid idea to see what's in there.

posted 2012-09-14 #

How I develop Firefox OS apps on Desktop

I've been working on the Marketplace for Mozilla's upcoming Firefox OS mobile phone platform, which involves testing how web applications look and feel in the context of the OS. I can simulate the size of the phone in my browser using Firefox's amazing Responsive Mode, but testing whether installing apps works and how the marketplace feels in-context involved putting my local development repository into Gaia, the phone's UI. I've been asked how to accomplish this feat numerous times, and it's easy enough to do that I thought I'd share it here!

Running Gaia on B2G

Firefox OS has two components- the underlying platform layer (called Boot To Gecko), and the user interface (called Gaia). I did the following to get these working together on my machine:

Start by downloading a Desktop build of B2G. Mozilla generates these nightly in the same way we generate builds of Firefox. They're located on our FTP server:

• Mac
• Windows
• Linux

Check out a copy of Gaia:

git clone https://github.com/mozilla-b2g/gaia.git

cd into your gaia repo.

make profile

This will generate a profile directory in your gaia repo.

Start B2G using the generated profile as your profile. The B2G binary looks a lot like a Firefox binary; that's no coincidence! You can use the command line to specify a startup profile just as you would Firefox.

b2g --profile <path to gaia profile>

On my machine, the command looks like this:

/Applications/B2G.app/Contents/MacOS/b2g --profile /Users/potch/gaia/profile

If things are configured properly, B2G should start up using Gaia! This is all well and good, but I want to check out the app I'm working on in Gaia — Not too tricky!

Running your app on Gaia

If I'm building a packaged app, I just need to symlink or copy the directory of my app to the apps directory of Gaia. If I'm building a hosted app, It's only a little trickier to add your app in. To add your apps, create a directory in the `external-apps` folder containing 2 files:

• origin: this should contain the origin of your app (eg: http://localhost if you're developing locally)
• manifest.webapp This is exactly what it sounds like- it's the manifest of your webapp.

Once you've put your app in gaia, re-run make profile to re-generate the profile, and re-launch B2G. Your app should now appear on the homescreen! If your app is packaged, you'll need to re-build your profile to see changes you make to your app. If your app is hosted, you'll only need to re-build if you change your origin or manifest.

Happy Hacking!

posted 2012-08-24 #

One More Time, With Feeling

I'm Back!

Maybe.

Probably.

Honestly, "back" implies that I ever really took a crack at this blogging thing with any seriousness at all before, which is dubious. But I am going to, yet again, try to make a serious effort at writing here regularly.

The ol' ball and chain's been pretty busted the past few days. Why? As with anyone who wants to get back into the habit of writing, you must first re-build your blogging system from the ground-up. Obviously. This time, of course, will be different. Armed with my current favorite crop of technologies (which I will detail below), I'm writing a set of tools let me build static pages (or, in my far-too-literal to HTML5 system, <article>s) in my preferred authoring environment: my beloved code editor.

(I start nerding out right about here.)

I've been writing HTML long enough that it's caused permanent brain damage. I think of all documents in terms of markup, and deconstruct magazines to figure out how I'd float that sidebar just so. Naturally, then, I'm authoring posts directly in HTML. If I'd like a post to look a little different from the others, I have the ability to apply custom CSS and JavaScript. Anything too far afield, I can generate a one-off page that doesn't have to fit into the normal post template.

To aid me in this process, I've called in support from some technologies I've fallen in love with in the line of duty working on my current project at Mozilla:

• Python: While I'd love to do this whole project in node.js, The package and file-interaction capabilities are just better in Python right now. I may migrate later, but getting up to speed quickly was my initial goal, and Python's got my back.
• Jinja: We replace Django's templating engine in our projects at Mozilla with Jinja. The "block" pattern and template inheritance change the way you build markup template to more closely match the object oriented way you (hopefully) program. Fantastic stuff.
• PyQuery: jQuery-style DOM manipulation in Python. Yes please.
• LESS: Once you try LESS or Sass, you'll wonder how you ever wrote or maintained CSS before.

I've got the code to the point where I decided to write this post, including a local server that watches files for changes. I'll be adding features and such (and writing about them here!), but this is my "Hello World".

Hello, World!

There's plenty more where that came from!

I hope.

posted 2012-02-20 #

He

is actually the CEO of Firefox Mozilla.

(see the original)

posted on 2011-04-01 #

Dumbo.

posted on 2010-10-10 #

Cheap Eats- Tomato Sauce!

When I'm not embarking on various food adventures with my culinary partners in crime, I'm a fairly frugal at-home cook. One of my favorite things to make is my own tomato sauce. It's easy to make a bunch at once, it's turbo-versatile, and it freezes well.

My recipe for tomato sauce:

• 1 large (28oz) can of crushed or whole tomatoes in juice/puree
• 1 carrot carrot, diced
• 1 stalk of celery, diced
• 1 medium onion, chopped
• garlic (as much or as little as you fancy), chopped finely
• spices (parsley oregano, basil) to taste
• olive oil

In a large dutch oven or saucepan, heat up about a quarter cup of olive oil (eyeballed, like most of the things in this recipe). Cook the celery and carrot together with a pinch of salt over medium-low heat for about 5 minutes. Then add the onion, and cook for another 5-10 minutes, or until everything is soft, and the onions are translucent. Push the vegetation to the edges of the pan, and add a little more oil to the center. In that, cook the garlic for another few minutes, until it's just starting to take color. Then add the tomatoes and spices, stir, and bring everything up to a simmer. Cover the pan, and simmer for at least 45 minutes- but it will only get better from there.

What to do with it?

• Poach eggs in about a cup of sauce in a small saucepan. Serve with crusty bread or toast.
• Use it as the base for a quick chili- Take a can of black or kidney beans, 1/4 to 1/2 cup sauce, lots of cumin and chili powder, some hot sauce, and bring it all to a simmer. Then, I crush (or stick-blend) some of the beans to thicken slightly, and cook for another 15 minutes.
• Spanish Rice- prepare rice, substituting half the liquid with sauce. Add diced peppers and cumin. Cook normally, being sure to stir often.

What else can you do with it?

Put it on pasta, dummy!

posted 2010-04-17 #