• Home
  • About Mitch
  • Speaking
  • Articles
  • Contact
  • Home
  • About Mitch
  • Speaking
  • Articles
  • Contact

Digital Strategist

WordPress Developer

Content Creator

Unapologetic Punk

Mitch Canter

  • X
  • Bluesky
  • GitHub
  • Twitch
  • YouTube
  • LinkedIn
Technology

Tools Tuesday – The Web Developer Toolbar

CMDR Mitchcraft

Reading time: 2 minutes

Designers and Developers have lots of things they use on a regular basis in order to get work done.  Software, Hardware, Apps; there are multitudes that I end up opening on a daily basis in order to efficiently plan out, execute, and update the sites that I create.  So, every Tuesday, I’ll be diving into some of the tools I use in the process of creating a site design.

Most people immediately start out with Photoshop, Dreamweaver, etc. But I wanted to go into something a little less known (but not by any means less important).  When I work on WordPress themes, it’s hard to get the CSS styling just right because all of the content is dynamically generated.  Sure, using dummy text helps, but you still want to get the styling JUST right, and it’s a hassle to upload and reupload CSS stylesheets for a simple change.

Enter Firefox and the Web Development Toolbar.

This toolbar is absolutely invaluable to me in the course of development.  It puts an entire arsenal of web development tools at my fingertips to give me absolute control over what i’m doing.

Some highlights:

  • Disabling Cache so you don’t have to clear it everytime you want to refresh a page
  • Disabling stylesheets to see what your site looks like to people who have older browsers
  • Allowing you to switch on the fly between the main stylesheet and Print/Mobile styles to see what they look like
  • LIVE (!) Stylesheet Editing – the feature I use the most.
  • Outline mode that shows div containers, table cells, and what tags are called on what elements
  • Built in validators for CSS, (X)HTML, and other standards
  • too many other tools to list in bullet form

The main tools I use are the outline and the live CSS editing.  I can copy/paste the stylesheet edits I make right into WordPress and save the changes – takes about 20% of the time that it takes to fire up my FTP program and load in the new files.

If you use Flock instead of Firefox, don’t worry (so do I) – the toolbar works great.  If you use Internet Explorer… why? (no, I’m joking – there’s a development toolbar for it too – but it’s not nearly as user friendly).

Do you use the toolbar?  Any features that I may have overlooked that make it even more useful than I mentioned?  Let me know!

CSS Edit, Firefox, Mozilla, Tools, Tuesday, Web Dev Toolbar
  • 50 Days to a Better WordPress Blog–Day 3: Sharing is Caring

    50 Days to a Better WordPress Blog–Day 3: Sharing is Caring

    Reading time: 3 minutes

    There’s no better feeling than putting the last period on your post. We want to share it on Twitter or Facebook, but is there such a thing as “too much”?

    WordPress
  • The Toolbox: 4 WordPress Plugins I Can’t Live Without

    The Toolbox: 4 WordPress Plugins I Can’t Live Without

    Reading time: 2 minutes

    Whenever I speak at conferences, attend meetups, or even just causally mention WordPress in conversation, there’s one question that comes up in nearly every conversation I have: What WordPress plugins do you recommend? That list is constantly in flux – a new plugin will be developed that replaces an old one, or an old one…

    WordPress