Announcing Firebomb

published:

2011.07.06

topics:

apps

mobile

tools

My project Firebomb is a Firefox plugin, a browser bookmarklet, and an iOS App. Firebomb lets you pretend to blow stuff up with 8-bit explosions. I'm sure you are probably familiar with Firebug, the ubiquitous debugging plugin for Firefox.

"If you can't fix a bug with Firebug, blow it up with Firebomb!"

Firebomb started out as a tongue-in-cheek parody of Firebug that I originally did for the 10K Apart Contest in 2010. Quality stress relief! Firebomb has since evolved from the original gag and developed a life of its own.

Get Firebomb for Firefox and Other Browsers

My Firebomb plugin for Firefox 4 and 5 was developed with the new Mozilla Add-on SDK that hit its 1.0 release in June 2011. Originally called JetPack, the Add-on SDK allowed me to build out a true plugin for Firefox using a smart JavaScript API. This was a really quick and fairly painless process. I definitely recommend the SDK for web developers looking to do a Firefox plugin. I also made Firebomb Lite as a browser bookmarklet so you could have the joy of firebombing Internet Explorer... I know you want to!

Firebomb for Firefox and the Firebomb Lite bookmarklet are both free and available for download today! Use them whenever you need more firepower than Firebug alone!

Buy Firebomb AR for iOS - Blow Stuff Up in Augmented Reality

Write a Comment…

CSS3 Demo: 3D Interactive Galaxy

published:

2010.07.28

topics:

css

javascript

mobile

video

Galaxy Box is a CSS3 demo where you can interact with a procedurally generated 3D galaxy. In order to create the effect, I used 3D CSS properties available in Safari 5 and on the iPhone and iPad. Check out this video of the demo in action and then interact with the 3D CSS3 Galaxy demo yourself.

Each star is a div with border-radius applied to make it round and a white or light blue box-shadow to add glow.Since the stars are actually flat 2D objects, normally when you rotate them this would become very apparent and destroy the illusion. The trick is that when the galaxy is being rotated each individual star is being rotated in the exact opposite direction so that it is always facing the viewer.

Take a look at my rotate function:

function rotate()
{
    volumeEl.style.WebkitTransform = 'rotateX(' + rotX + 'deg)'
        + ' rotateY(' + -rotY + 'deg)'
        + ' scale3d(' + scale + ', ' + scale + ', ' + scale + ')';

    i = starSpans.length;

    while (i--)
    {
        starSpans[i].style.WebkitTransform = 'rotateY(' + rotY + 'deg)'
            + ' rotateX(' + -rotX + 'deg)';
    }
}

The stars are placed procedurally by JavaScript, and I also used JavaScript to add interaction to the demo. You can rotate or spin the galaxy with some momentum on the desktop. On iOS you can also rotate and spin the galaxy with your fingers, or pinch to zoom. Try the demo now in Safari!

6 Comments…

Fun with CSS Transforms in Firefox and Webkit

updated:

2009.02.17

published:

2009.02.17

topics:

css

javascript

mobile

WebKit based browsers like Safari have had CSS Transforms for quite awhile now, allowing developers to skew, translate, rotate, and scale HTML elements or the entire page with CSS alone. The Firefox 3.1 betas also now have CSS transformations. These CSS properties can also be animated with JavaScript, although finding documentation for how to do it in Firefox 3.1 was a bit of a hassle. Let me show you how it is done.

Update: CSS Transforms are now available in Safari, Chrome, Firefox 3.5+, IE9+, and Opera. Check out my patch that enables setting and animating CSS Transforms with jQuery.

Continue Reading Post and 19 Comments…