We are doing lightning talks at this month’s dallas.rb meeting. I decided to give the group some choice of what I would present.

I will do a short one on “Why Firefox Makes Me Look Good” or “Better Web App Development using Firefox and a Buttload of Extensions”

I can also do one “JQuery: I Don’t Know Much, But I Know I Love You ”

And since neither of those are Ruby related, I will throw another one out there: “Tighter Abs: XML Situps Made Easy With Ruby”

I’ll let everyone decide which ones you want to hear more about.

Update

I only did the JQuery presentation and here are the slides (although they were much more interesting in person).

photo by longhorndave

What Extensions I Am Using Right Now

• Web Developer Toolbar – Just about everything you could want to do HTML and CSS, plus I can edit AND save the CSS changes I was playing around with.
• Firebug – So much goodness. Especially debugging JavaScript and looking over AJAX requests and responses.
• View Source Chart – Makes looking at HTML source bearable.
• ColorZilla – a color picker for pulling colors off of web pages.
• HTMLValidator – because it is too easy to miss a closing tag somewhere that messes everything up.
• DummyLipsum – when you need some filler content.
• SeleniumIDE – great little utility for helping to write Selenium tests for functional testing.

photo by meshmar2

Not to mention

• Adblock – no more ads.
• Adblock Filterset.G – no more ads just got easier.
• GTDInbox – for when I think that I am Getting Things Done
• Foxmarks – because I have too many computers and too many bookmarks.

Got a favorite? I’d like to hear about it.

Reset removes all of the default styling from the browser. Even with out add a stylesheet to you website, the browser (Internet Explorer, Firefox, Opera, Safari) has already add some default styles. This is why headers are bigger and bolder than text in a paragraph. But, amazingly enough, the default styles vary from browser to browser. Reset CSS is great because it removes all of the default styling and let me, the developer/designer, go and set the style that I want. I can be sure that some default style won’t creep in and ruin a good design.

Where Reset removes all of the default styling, the Fonts CSS sets a level playing field and uniform approach to font sizing. With the various ways to size fonts (px, pt, em, %), it shouldn’t be any suprise that once again the various web browser handle these differently. The Fonts CSS gives you a uniform way of setting the base size of the document and adjusting all other font sizes as a percentage of the base size. It turns out that, while requiring a little bit of math, this is super easy and keeps things looking good.

While I start every project with the Reset and Fonts CSS, it is the Grids CSS that really is the time saver. Now that using tables for layouts is so 1990’s, coming up with cross-browser compatable grid layouts can be a challenge. When you combine it with the decisions of fixed-width or fluid layouts, sidebar positioning on the left or the right, semantic markup, and search engine optimization, grid layouts can make you scream and run. The Grids CSS gives you three tools in one: fixed-width or fluid layouts, sidebar size and positioning, and grids. I won’t get into all the details, but you can play with the Yahoo! Grid Builder or check out some of my latest projects to see it in action.

To top it all off, there is one combined file that is compressed and includes all three CSS components. All you have to do is add a link tag pointing to the latest version and you are off and running. Now you can focus on more important things, like making your application functional.

Check back soon for my latest thoughts and ideas. Welcome to the Station, this train is about the leave.