Wednesday, April 28, 2010

Tips using Firebug Lite and Full Screen with jsFiddle

jsFiddle

I’ve been using jsFiddle more and more to test and share JavaScript and jQuery code.

Although I love that jsFiddle shows the HTML, JavaScript, CSS, and Results window all at the same time, I also would love to somehow see the output of the console window in the User Interface. Depending on the browser someone views my jsFiddle projects, the console may or may not be defined. I really don’t like alert statements and sometimes it is just easier to console.log() than it is to write out messages to the DOM.

Firebug Lite

So, I’ve been finding myself adding Firebug Lite as a resource to jsFiddle and letting Firebug be part of the rendered output.

If you’ve tried this, then you may have noticed that Firebug auto-opens once jsFiddle is rendered. Seeing that the Rendered section isn’t very big this could be a big problem.

jsFiddleFireBugBig

Thankfully, there are several options you can provide to Firebug Lite to customize it’s behavior.

I find myself setting the following three options on a regular basis.

<script type="text/javascript">
    firebug.env.height = 200; //Set the initial height of the Firebug window
    firebug.env.debug= false; //Set Firebug to be initially launched or minimized
    firebug.env.detectFirebug = true; //If browser has Firebug, don’t interfere with it
</script>

 

jsFiddleFireBugMinimized

I also like to use JsBin quite a bit and honestly switch between it and jsFiddle quite often depending on what I am doing.

Full Screen Option

One of the features that I really like in JsBin is that you can launch the session to Full Screen and not inside the editor. This is helpful if you want to interact with the DOM with your browser’s debugging tools, minimize any side-effects the editor might be creating, etc…

As it turns out, jsFiddle has this same feature, but you have to know how to get to it. You can just add “/show” to the end of your jsFiddle URL to show it without the editor. To swap back to the edit view you can simply remove the “/show” from the URL.

Full Screen / Editor Toggle Button

Now that we know we can swap back and forth between Full Screen and Edit mode, what I miss is the nice little JsBin link in the upper-right hand corner of the page allowing you to easily swap between the two environments.

JsBin

As it turns out, I’ve recreated this in jsFiddle by adding the following code to my JavaScript window…

$("<a />", {
    id : "show",
    text : window.location.pathname.indexOf("show/light") > 0 ?
    "View Full Screen" : "Edit using jsFiddle",
    href : window.location.pathname.indexOf("show/light") > 0 ?
        window.location.pathname.replace(/light\/$/gi, "") :
        window.location.pathname.replace(/show\/$/gi, ""),
    target : "_blank"
}).appendTo('body');  

…and here is the supporting CSS that I put in the CSS window of the jsFiddle Editor.

#show {
    position: fixed;
    top: 0px;
    right: 0px;
    padding: 5px;
    background-color: #3D6F9A;
    color: #ffffff;
    border-bottom: 1px solid rgb(153, 153, 153);    
    border-left-width: 1px solid rgb(153, 153, 153);
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;     
    border-right-width: 0px;
    border-top-width: 0px;
    text-decoration: none;
    color:#FFFFFF;
    font-size:11px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:0 1px 0 #0C131C;
    font-family:"Lucida Grande","Lucida Sans","Lucida Sans Unicode","Luxi Sans",Tahoma,sans-serif;
    display: block;
}

The following screenshot is what the result window looks like inside the jsFiddle Editor

jsFiddleFullScreen

The following screenshot is what the window looks like in jsFiddle Full Screen mode

 jsFiddleFullScreen2

You can view, run, and edit the above code snippets using my jsFiddle

cooltext439925164

Tuesday, April 27, 2010

Stepping Down from The Official jQuery Podcast

ps.nrdkgcvf.170x170-75 In case you haven’t heard from the end of the Rey Bomb #2 Episode of The Official jQuery Podcast, I announced that after 21 episodes I am stepping down as my role of co-host.

Around the time I first joined the podcast I also started to become involved with some intense writing projects (as will become apparent in the near future), although I can’t say much about it right now :)

As a result, I haven’t had much margin in my life. I’ve been running on empty for quite some time and other more important things in my life have gotten the shaft! Unfortunately, one of those was my family and I intend to change that.

I don’t plan to fall off the face of the earth. I plan to refocus on blogging and tweeting. I would like to do some more speaking, but probably not for the rest of the year as baby #3 is coming in August.

I am honored to have been asked to join The Official jQuery Podcast and during my involvement I got to meet many great people that I hadn’t previously known. I am glad to have formed these relationships, and look forward to further investing in them.

I hope the future of The Official jQuery Podcast is bright and I encourage you to either start or continue to listen.