So here we are, my blog has been revamped. Its been a long time coming, and there are some things I’d like to point out… but not now. Its time for bed.
Share This
Please, only geeks here (believe me on this one):
Here is the entry point to the puzzle.. http://hoodwinkd.hobix.com/
If you need some help figuring it out let me know :)
I can’t figure out if _why the lucky stiff is a madman, genius, artist, or all three simultaneously
Share This
After some #IEroot inspiration at positioniseverything.net and some help from here, I’ve come up with yet another approach to paritioning CSS rules based on the browser. Using this technique you can get rid of the * html hack and the need for a separate IE 7 CSS file.
I liked how positioniseverything suggested using conditional comments to make different IDed wrapper divs (eg <div id=ie6>..page..</div>) but I didn’t like all those extra divs around. So why not just put the id on the body?
With this technique, there will be no extra elements in the dom since I’ve placed the conditional comments so that there always will only be one body element. Some may argue that all those extra comments are ugly, but hey it validates and does not incur any extra semantics or accessibility headaches of extra elements.
Here is what I came up with:
1 <html>
2 <head>
3 <title>IE conditional comments test</title>
4 <style type=“text/css“ media=“screen“>
5 #ie7 p { color: red; }
6 #ie6 p { color: green; }
7 #ieOther p { color: blue; }
8 #nonIE p { color: black; }
9 </style>
10 </head>
11
12
13
14
15
16
17
18
19 <body id=“nonIE“>
20
21 <div>
22 Testing which version of IE (or non-IE) you have.
23 </div>
24
25 <div>
26 <script type=“text/javascript“ charset=“utf-8“>
27 var body = document.body;
28 document.write( ‘body.id = ‘ + body.id );
29 </script>
30 </div>
31
32 <p>
33 Colored text. Red = IE 7, Green = IE 6,
34 Blue < IE6, Black = not IE
35 </p>
36
37 </body>
38 </html>
Try it out here
Share This
You have used firebug. I’ve been an avid firebug user the minute I first heard about it — starting with the initial appeal of CSS inspection, then integrated error reporting, and then getting hooked on the interactive javascript console. Firebug .3 was a big step up from the built in DOM inspector, but still it had its problems with generated content, a quirky debugger, and the inability to see inherited styles.
Then firebug 1.0 came along obliterating these problems and brought a ton (no a metric *#$! ton) of great new functionality. Its sad enough that I’m extolling a piece of software publicly… its even sadder that I was jumping up and down (literally) in my apartment when I first tried out firebug 1.0 beta. Yeesh…
But I do have a good excuse. I do a lot of web development, I practically live and breathe it (though I have not been doing it much on the side lately). If a tool came along that made you twice as productive for your job/hobby, you’d be happy too — right?! And it is not just about productivity, its also about joy of use. I used to dread debugging nasty CSS issues. It sometimes took hours to figure out that that 3px gap was caused by a measly missing space between two selectors. Now I feel like I’m in control and am confident that bug will be easy to find (and fix)! So please, before you label me as too big of a dork remember that you’d be pretty happy too to find something that made your life so much easier :).
So for the doubtful, what can firebug do?
- Click to inspect any part of the page to see its styles (and all the styles that have been inherited and/or overwritten), box model, dom properties, or html source
- Dynamic editing of the page. HTML, CSS, and javascript. Just click to edit a field. The page will update to your changes in real time. As a bonus the edit fields have auto-complete (just like every other place you can type)
- Solid javascript debugging with really quick and easy watch expressions. I knew that I should have been debugging instead of logging messages for a long time, but now I can finally use a debugger that isn’t painful (sorry Venkman… and firebug .3).
- Profiling!!
- Graphic visualization of all the http requests made on a page, including everything you need to know for page optimization!!!
- Easily navigate between contexts since nearly everything in firebug is a link. Want to look into the properties of a javascript object? Click it. Want to see the http headers of a request? Click it. Want to inspect an element in the source view? Click it. This UI paradigm easily leads to feature discovery since you’ll always try to click on something to find out more about it — and you will quickly realize that it just feels right.
- And many things are easily discoverable without a click. Just hover over any image string and a popup will appear. Same with variables while debugging and with hex colors (no more memorizing hex codes)!
And after watching a video of Joe Hewitt demoing his creation, I still learned more features:
- When editing a numeric field such as padding just press up or down with the arrow keys to change the padding amount, slick!
- Extremely simple conditional breakpoints. I used to think that you couldn’t do that in firebug, but all you have to do is right click a breakpoint and type in an arbitrary javascript expression.
- Automatic bookmarklet “scrunching” when copying from the multi-line console
- Keyboard shortcuts.. I can’t live without ctrl-shift-t and ctrl-shift-r in eclipse, and now I know I can do ctrl-shift-space in firebug. Oh and I finally found out that I can get rid of the Wed Developer Extension’s shift-ctrl-c shortcut so I can use it for firebug :)
If you still are not satiated, watch this screen cast.
Go and try it, and if you love it please donate to the guy. He deserves it.
I’m very surprised Joe hasn’t been picked up by one of the big web companies yet… He single-handedly has saved them potentially millions of dollars in man-hours. Maybe he has just turned them all down :)
Share This
Whew, Lotusphere is pretty big, bigger than I expected. Seeing 6000+ people in one room makes you realize that 6000 is a lot of people. I’m having a great time here so far and we are getting pretty good feedback from customers.
… wait, let me step back a second. I have been working on Activities for Lotus the past year and a half. That started with Activities Explorer, then moved on to having an Activities web interface, and now we’re in Lotus Connections (formerly Ventura). It has been very exciting to work on Social Software, I can finally tell my friends that I’m hip and work on cool social networking software (instead of just some longer description about enterprise collaboration).
After a few small snafus on our part, it seems like Lotusphere attendees are starting to log in and try out our free test of Lotus Connections. Hopefully the word will spread and will get more exposure — we’re really hoping to get feedback that we can work into our product!
Some related links:
Share This
I guess its time to get back into blogging, and being down in Orlando for Lotusphere is a great time to do so. I arrived in Sunday and did the typical staff busy work. I had a pretty normal day except for the 48oz steak at dinner last night :). Time to listen to the Opening General Session speech - I think there are going to be some pretty cool announcements!
Who knew that Neil Armstrong was a funny guy?
Share This
