bridget makes icons. (![[info]](https://www.insanejournal.com/img/userinfo.gif){kind=small} tellthenight) wrote in ![[info]](https://www.insanejournal.com/img/community.gif){kind=small} rp_tutorials,@ 2012-04-11 15:02:00 |
 |
|||
|
|
|
|
|
|
|
| Entry tags: | html, resources: general, tools: firefox add-ons, tools: general, tools: html |
Firefox Aurora
I just discovered this in my web design II class, and after playing with it some, I have to post about it. This may not help everyone, but it can be a great asset for those of us who design or tweak layouts, or just play with any of those design or coding languages.
ONE WORD OF CAUTION: This is a pre-beta release, so it's not perfect and there will be bugs. If this bothers you, I would strongly recommend waiting.
Firefox Aurora is a recently-released pre-beta build of Firefox. It may not be interesting for general users, but for those of us who RP and play around with web design/development, this is a pretty awesome tool. Supposedly, Aurora is going to incorporate HTML5, which is beyond cool. It also has some awesome new features, like a 3D view of problem areas in your website/layout. Like so:
And the best part of all of this? Although it has a different name, when you go to open Aurora, it's just like opening Firefox. Actually, it is opening Firefox. Just a slightly different build. All of your add-ons, bookmarks, history, user styles, and anything else you can think of transfers across. The only difference is increased developer functionality. (I'd provide a few more screenshots, but it literally looks exactly the same as the latest stable Firefox release version.)
This is great! you may be thinking. But how do I get it? You click the link above, download the file, and install it. (You'll need to close Firefox so there aren't complications when you launch Aurora for the first time.) Aurora does launch as a separate programme, but as I said above, it does bring in everything from your previous version of Firefox.
Okay, I've got it downloaded now. HOW DID YOU DO THAT 3D THING? Now that is a pretty cool feature. My favourite, in fact. That feature basically replaces Firebug, which is something I use all. the. time. Before you can do it, though, you have to do some ninja-ing. Open a new tab and navigate to “about:config”. BE VERY CAREFUL WITH WHAT YOU DO ON THIS PAGE. Unless you know what you're doing, only change this one thing. Find “webgl.force-enabled” and double-click. It should become TRUE under BOOLEAN. This is what it will look like:
Done with that? Awesome. Now, basically, what you do is go to the page you want to do this on and right click. There is an option to “Inspect Element (Q)”. Click that. Now, it'll grey out most of the screen and bring up a bar at the bottom of your page. Like so:
See that white circle around the “3D View” button? Hit that 3D view button. It. Gets. Awesome. You can spin it around, and if you've got a laptop with a touchpad like I do, you can use the touch gestures to zoom in or out. Here's another example of something not the IJ home page. As a note, if you select HTML on the far left or style next to 3D view, it will pull up your source code just like Firebug! This is a really cool visual representation of how your page is structured. (See how the image is lifted up from the light grey area, which is in turn lifted up from the wood-grain background? That's because the wood grain background is a container div, the grey background is a content div, and the image is a new component.)
PRETTY COOL, RIGHT? When our professor showed us, I was about two seconds away from squealing in excitement. I've been geeking out pretty much since then.
Anyway, this was so cool I had to share. I hope somebody else finds it useful! (If this isn't appropriate here, I'll be more than happy to take it down. <3 I may also have overtagged, so please correct me if I did!)
EDIT: My server is performing maintenance, so the pictures got temporarily moved to Photobucket. They were resized by Photobucket, so when they go back to my server, the full-size images will be big again, I promise. Sorry to anyone else who couldn't see them because of the server issue! ):
ONE WORD OF CAUTION: This is a pre-beta release, so it's not perfect and there will be bugs. If this bothers you, I would strongly recommend waiting.
Firefox Aurora is a recently-released pre-beta build of Firefox. It may not be interesting for general users, but for those of us who RP and play around with web design/development, this is a pretty awesome tool. Supposedly, Aurora is going to incorporate HTML5, which is beyond cool. It also has some awesome new features, like a 3D view of problem areas in your website/layout. Like so:
And the best part of all of this? Although it has a different name, when you go to open Aurora, it's just like opening Firefox. Actually, it is opening Firefox. Just a slightly different build. All of your add-ons, bookmarks, history, user styles, and anything else you can think of transfers across. The only difference is increased developer functionality. (I'd provide a few more screenshots, but it literally looks exactly the same as the latest stable Firefox release version.)
This is great! you may be thinking. But how do I get it? You click the link above, download the file, and install it. (You'll need to close Firefox so there aren't complications when you launch Aurora for the first time.) Aurora does launch as a separate programme, but as I said above, it does bring in everything from your previous version of Firefox.
Okay, I've got it downloaded now. HOW DID YOU DO THAT 3D THING? Now that is a pretty cool feature. My favourite, in fact. That feature basically replaces Firebug, which is something I use all. the. time. Before you can do it, though, you have to do some ninja-ing. Open a new tab and navigate to “about:config”. BE VERY CAREFUL WITH WHAT YOU DO ON THIS PAGE. Unless you know what you're doing, only change this one thing. Find “webgl.force-enabled” and double-click. It should become TRUE under BOOLEAN. This is what it will look like:
Done with that? Awesome. Now, basically, what you do is go to the page you want to do this on and right click. There is an option to “Inspect Element (Q)”. Click that. Now, it'll grey out most of the screen and bring up a bar at the bottom of your page. Like so:
See that white circle around the “3D View” button? Hit that 3D view button. It. Gets. Awesome. You can spin it around, and if you've got a laptop with a touchpad like I do, you can use the touch gestures to zoom in or out. Here's another example of something not the IJ home page. As a note, if you select HTML on the far left or style next to 3D view, it will pull up your source code just like Firebug! This is a really cool visual representation of how your page is structured. (See how the image is lifted up from the light grey area, which is in turn lifted up from the wood-grain background? That's because the wood grain background is a container div, the grey background is a content div, and the image is a new component.)
PRETTY COOL, RIGHT? When our professor showed us, I was about two seconds away from squealing in excitement. I've been geeking out pretty much since then.
Anyway, this was so cool I had to share. I hope somebody else finds it useful! (If this isn't appropriate here, I'll be more than happy to take it down. <3 I may also have overtagged, so please correct me if I did!)
EDIT: My server is performing maintenance, so the pictures got temporarily moved to Photobucket. They were resized by Photobucket, so when they go back to my server, the full-size images will be big again, I promise. Sorry to anyone else who couldn't see them because of the server issue! ):