Live site development with Firebug

March 1, 2010 in Firefox, developer tools by Lafinboy | No comments

Live editing of website code and styles is a breeze with the Firebug plugin for Firefox.

Right click any element on the page that you wish to inspect/edit and select the Inspect Element option. The Firebug panel opens with the HTML displayed, and the element you selected highlighted. In the right panel are the CSS styles attached to that element. From here we can make changes to the current styles, or add new styles.

I do this constantly when working on sites as it gives me realtime feedback and visualisation of the changes I make. Once the styles are working correctly and everything is looking the way you want it to it's time to copy all those changes back into the actual stylesheet. But can you remember all the changes you made, and to what elements? This is where the pro tip comes into play.

To the right of each of the style declarations is a hyperlink to the relevant CSS file and the line number the declaration is on in that file. Click this link to display the full CSS file in the Firebug CSS panel. Click the Edit button in the panel to view the plain text content of the CSS file, including the changes you've just made. You can now select all, copy and paste into the actual stylesheet. That's it!! Save the stylesheet and transfer it to the server to see all the changes applied to the live site.

The innocent age of comic books

March 4, 2009 in thought-after by Lafinboy | 2 comments

How the times have changed. Things that seemed so innocent once now have rampant sexual overtones. Just take a look at a few examples from the seemingly harmless comic books of yesteryear.

Archie doesn't know how kinky his girlfriend is

Archie doesn't know how kinky his girlfriend is

It's not heavy rain, just a golden shower really

It's not heavy rain, just a golden shower really

The man of steel isn't enough for Lois.

The man of steel isn't enough for Lois.

Peter Parkers' aunt has a "Something about Spidey" moment

Peter Parkers' aunt has a "Something about Spidey" moment

So that's how he gets the spidey goo in

So that's how he gets the spidey goo in

And finally…

Captain America doesn't need to be ordered to wank

Captain America doesn't need to be ordered to wank

I'm sure there are many, many more examples of past innocence seeming corrupted by present standards. Let me know where they are and I'll make a running series.

Tags:

Firefox web developer plugins

January 5, 2009 in Firefox, developer tools by Lafinboy | 1 comment

Returning to work after the Christmas holidays I was confronted with a brand new, clean install version of Firefox 3.0. Very strange, because I already had said browser/version installed, along with all bookmarks, cookies, plugins and history.

But every cloud has a silver lining. A chance to rid myself of no longer needed cruft, and cut back to the bare essentials. So here is my list of plugins, in no particular order, that make Firefox such a cool tool for any web developer.

  • NoScript – makes the web a safer place to browse. Selectively allow scripts and browser plugins to run on individual sites, block the stuff you don't want, never be click-jacked!
  • Foxmarks – synchronise bookmarks between all of your computers. Home, work, mobile – all in sync, all the time.
  • Firebug – live editing, debugging and monitoring of CSS, HTML and JavaScript as you browse. Plus network monitoring, JavaScript profiling, DOM exploration. Is there anything this magical tool cannot do?
  • Web Developer Toolbar -information and page control at your fingertips. Turn stuff on, turn stuff off, view hidden stuff, measure it, highlight it, analyse it. Beautiful!
  • Colorzilla – the latest version of this add-on adds the ability to create colour palletes from any page, on top of it's already outstanding eyedropper and colour picker. Lots of other features make this an essential tool for working with colour.
  • LiveHTTP Headers -View headers and responses as you browse the web. Essential for debugging cookie, server and HTTP transaction information.
  • Operator – View and interact with microformat and other semantic data on a web page. Extract contact, location, event, taxanomic details into various applications for storage and/or immediate use.

So there we have it, seven plugins that make light of many web development tasks. No doubt there are others that do the same type of job, but these are the best of breed as far as I'm concerned.

Do you use something different, or have a must have recommendation? Comments are open, feel free to let everyone know what you think.

Tags: ,

Will apathy let the filter in?

December 28, 2008 in thought-after by Lafinboy | No comments

There has been much written about the pro's and con's of the proposed Australian Internet Filter. As a technologist and father I am strongly opposed to it's introduction. As a member of the Australian public I am appalled at the steps that the Government, and in particular, Senator Conroy, have taken to get it introduced.

I have written directly to the Senator, as well as my local MP, requesting answers to several key points that have not been addressed in any public announcements. I have discussed the implications of the introduction of the filter with relatives, friends, and colleagues, and asked them to do as I have, and voice their objections. I will be asking them again, because the more effort we put into stopping it's introduction now, the less chance it has of being implemented.

Nathanael Boehm articulates exactly why we must make the effort now in his blog post "Why we must fight the filter NOW". I advise that you read his post, and if you need more information about the implications of the introduction of the filter visit the No Clean Feed website.

Tags:

SEO friendly web content management system launched

September 30, 2008 in thought-after by Lafinboy | No comments

After months of fine tuning, and a rebranding, Amplify are pleased to announce the public launch of their search engine optimisation content management system, Boost Optimiser.

Built from the ground up to enable designers and content editors to rapidly build and manage search engine optimised websites, Boost Optimiser fills a gap in many CMSs available today.

Tight integration with Google Analytics and Website Optimizer Tool allows quick development of whole sites, mini-sites and landing pages tailored to rank well with the major search engines.

Online demos of the CMS are available at the Boost Optimiser website, and applications from resellers are welcome. Check it out at www.boostoptimiser.com.au.

« Older entries