What I Learned about Firebug

firebug

Tonight I attended a meetup with the Austin WordPress group on how to use Firebug presented by Nick Batik. I have used Firebug for ages, but no one ever taught me how to use it, so I’ve just fumbled around and pretty much stuck to finding out what CSS elements did what. Here’s what I learned tonight!

  1. When inspecting an element you can click on a color code and then use your arrow keys to change the color incrementally. Click up to go lighter or down to go darker – on the entire value or just a color 0pair (R G or B)Change Color in Firebug
  2. Can click up and down arrows in all of the elements (like above) and it will change the value up or down. This is a good way to find the right margin or padding.
  3. Same thing if the field is blank just use the arrows to see what options you have. I tested this with ‘text-align’ and it told me values like justify, right, and left.
  4. If a field doesn’t have a style you can right click in the style area of firebug and choose to add an element style (will effect only this element – so if it’s the 2nd H1 it will only effect the 2nd H1) – it will add it in line which isn’t the best way to do css, but gives you the code you need to create a style tag with the next tip
    • You can right click on the tag in the html editor, copy the css path to get what you need for the style sheet
  5. To make a rule for all fields of a type you can choose to ‘add rule’ which will add a rule for all fields of the same type – like all H1s
    Add CSS Rule
  6. I never clicked the ‘Layout’ tab! Did you know you could see the ‘box model’? Do you know what the ‘box model’ is? I didn’t! See the image included here. Basically it shows you the size of the element, the padding, the border and the margin – and you can click the numbers here to edit them.
    Firebug Layout
  7. The computed tab will show you how the style is being defined and where it’s being defined – what file and line number it’s being set on.
    Computed Tab in Firebug
  8. The Cookies tab will show you all the cookies on the page so you can easily edit or remove them.
    Firebug Cookies
  9. Someone asked why firebug over the built in inspector? Our speaker said that originally it was because it was the only option – and then it was because other developers kept adding on more features to firebug that aren’t in the inspector
    • for example there is fireftp – so you make changes in firebug, click send and it sends it directly up to your site.
    • And YSlow which suggests ways to speed up your site.
    • More add ons for Firebug

A lot more was covered, but these are the quick and easy tips and tricks I can share with you!

WordPress Plugins

Wordpress

In preparation for a workshop I’m doing with Polly Farrington at Internet Librarian I’ve been creating a bibliography of WordPress plugins. Here’s what I have so far:

Check out the updated list on Zotero and feel free to add your own must have plugins to the comments here.

Usability and User Testing

Wordpress

Most of you know that I teach WordPress classes for libraries. One of the things that I always have trouble with is teaching plugins. There are so many different plugins out there and they all work differently. Some you install and that’s it, some you install and have to set up, some have their own control panel and others put their menus under Settings or Tools. It’s hard to explain to newbies why things aren’t standardized in any way and that’s why this post at Smashing Magazine caught my attention.

The average website has over five plugins installed (according to PressTrends) and often a theme options panel. For a great experience to continue throughout the website as people actually experience it, we need to establish strong standards for the rest of the community to follow.

I am calling all WordPress plugin developers and themers. You don’t need to guess what your users might want or how they will experience your product. Just watch them. We know it: if we focus on usability, stability and then value, we can make products that users will line up for.

To the core WordPress team and the community at large: Let’s get together and create WordPress human interface guidelines for those who contribute by providing plugins and themes for the world to use. Apple gave us a rock and upon it built a foundation that few can deny. Google finally got around to it with Ice Cream Sandwich, and I expect to see drastic improvement in the wild west that is the Android application landscape. Help us help WordPress.

This doesn’t go just for WordPress though – this goes for our own library websites and our OPACs. How many of you do user tests? Tests where you actually watch the patrons/users try and find things on your website or in your catalog? I’m guessing not many. Most of us think it’s too costly or maybe takes too much time, but if you just reached out to your patrons you might find that you’re wrong. The cost might be some chocolate or a small gift card and as for the time it will be well spent.

For some pointers, read the entire post over at Smashing Magazine and do some research on how others go about usability testing, I can tell you from personal experience that you’ll be surprised how helpful it will be!

Learn to Code by Watching

TheCodePlayer

When people ask me how to learn to code, I always say that we’re all different. A lot of my friends and colleagues learned using books like those from O’Reilly, but I need to learn with a helper. I like to be in a class where I can talk to someone and watch someone else write the code the first time around. Well, an article on Lifehacker has made me very happy! In it, Lifehacker talks about a tool that lets you learn to code by watching others!

One of the best ways to learn to program, besides tinkering with scripts yourself, is to take a look at others’ code examples. TheCodePlayer has a great take on that, with video walkthroughs of cool stuff being created from scratch.

The videos show the code being written on the left side of the page and the changes happening on the right. You can also change the code yourself and see how that affects the scripts.

Thank you Lifehacker! I will be keeping an eye on TheCodePlayer which is still in Alpha to see if it adds some languages that I’d like to learn soon!

WordPress Favicon

Wordpress

One of the things I wish was easier in many WordPress themes was adding a favicon. The favicon is the little icon that appears in the address bar of most websites to the left of the URL.

A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon, is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage.

Does your library website have one that’s custom to you? If not, and you use WordPress, you might like this tutorial from WPMU.org on adding a favicon to your WordPress site.

A favicon can be added to a website by several methods – by adding code to your theme files or by using a plugin. Many times, you must create the favicon off-site and then upload it to your hosting account for it to be used.

What’s that theme?

themesniffer

Have you ever visited a website and wondered what theme was being used? I have! And now there is a way using Chrome to sniff out the WordPress theme being used by a site you’re looking at.

Chrome Theme Sniffer is a add-on for Chrome that will detect the theme or template being used on current site for several major open source CMS’s, including Drupal, Joomla and WordPress. All you have to do is click the Theme Sniffer button at the top of your browser to get the information instantly

See it in action here on my site – or any other of your favorite WordPress powered sites.

Found via WPMU.org.

WordPress bookshelf plugin

Bookshelf

Are you using WordPress for your library website? This tutorial from Smashing Magazine walks you through creating a bookshelf plugin for your WordPress site. From the tutorial’s conclusion:

Having done this tutorial, you should be able to create a nice shelving plugin for your books. The plugin might serve your needs if you need an online book archive or library. The options aren’t limited to books either; you could create a similar system for CDs, DVDs and records, and you could tweak it to show videos. The possibilities are endless.

Tech Employers Searching GitHub

GitHub

This article from CNET is pretty cool (well cool to this open source advocate at least):

Forget LinkedIn: Companies turn to GitHub to find tech talent

Because engineers and designers can post their work for all to see, more and more companies are realizing they can see what people can actually do, not just say they can do.

If you don’t know, GitHub is one of many sites out there where open source code is shared and worked on. The article goes on:

[Zach] Holman also said that internally, GitHub is seeing more and more signs that outside companies are using the service as an initial indicator of whether a potential hire is good or not. “Whether or not somebody has contributed to open source is a good indicator of whether they’re a good engineer,” he said.

So, if you’re looking for a job in computer programming, maybe it’s time to stop developing behind closed doors and get out there in the open!

Read the entire article.

Embed Slidehare Presentations in HTML5

slideshare_logo

I am not a fan of Flash, but I see it as a necessary evil to share things like my tutorial videos and presentations on my various different sites. However it looks like that might not be the case for much longer. Slideshare has announced that they now have HTML5 embed code for presentations.

As part of our transition to HTML5, we are pleased to let you know that embedded presentations are now Flash-free. We have also made several other improvements to our embed code:

  • Embedded presentations can be viewed on iOS devices
  • New features in embedded presentations will be updated dynamically
  • The embed code is shorter and simpler
  • The embed has new Twitter and Facebook share buttons (we find that presentations with share buttons get shared 30% more)

Ironically, the button to copy the embed code is still flash … but that little bit of info aside, here’s my first attempt at using the new embed code:

Educate future female programmers

Girls who Code

I’m lucky enough to work in an open source community that has many strong women, but not all programming projects are that way and I like the idea of supporting a movement that helps mold the next generation of Girls Who Code. For the about page:

Girls Who Code is a new organization working to educate, inspire and equip 13- to 17-year-old girls with the skills and resources to pursue opportunities in technology and engineering.

Check out their website and join the movement to educate more women how to participate in computer programming.