28 Apr 2010
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.
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.
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.
As it turns out, I’ve recreated this in jsFiddle by adding the following code to my JavaScript window…
$("", {
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
The following screenshot is what the window looks like in jsFiddle Full Screen mode
You can view, run, and edit the above code snippets using my jsFiddle
Read More »
27 Apr 2010
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.
Read More »
18 Mar 2010
This year I was chosen by the community to speak at Mix10 as one of the Open Call sessions. I was honored to be selected and thoroughly enjoyed attending Mix10 and building relationships.
My session was entitled 6 Things Every jQuery Developer Should Know
This seminar provides an overview of several in-depth concepts that developers need to learn to bring their jQuery development to the next level. We review six things that you should know, such as: "What Is This?", "Am I Referencing the jQuery Object or a DOM Element?", "Understanding Selectors", "Combine and Minify Your Scripts", "Different Ways of Storing Data", and "The Dos and Don'ts of Events". Along the way, we share several helpful websites and tools to make your job as a jQuery developer easier.
For each of the 6 points I started with beginning material and then progressed to intermediate then advanced concepts. When I moved to the next point the content would go back to beginner and then progress to advanced. In this way, I hoped to reach a wider audience with things tips they could take away from the session.
The video from my talk is now available from the Mix10 website. You can watch the video and also download my web-based presentation along with the code I showed.
- Video (hosted on Mix10)
- Web-based Presentation
- Includes Slides with embedded mini-demos
- Best viewed in Firefox
- I'll try to resolve the cross-browser issues
- If you are interested in helping resolve these issues, I’d appreciate it
- Chrome is close to working, but IE is not ;)
- Demos
- Download all the above slides & demos (not the video)
Unfortunately, the main demo that I wanted to show didn’t work during the presentation. The demo worked the night before & it works now. My guess is that the Picasa Web API was temporarily down during my talk, which is unfortunate. I guess I should have expected something to go wrong. Anyway, overall I think it went well. I had several questions at the end and people stayed after to ask questions as well.
During the presentation I listed several resources that I recommended. I pulled those out and provided them below for quick access them. Some of them I demonstrated during the talk and others I just referred to as good resources you may want to check out.
3h. Knowing Selectors
- Useful Selector Playgrounds and Tools
6. Combine & Minify Scripts
If you were able to attend my session at Mix10 or watch the above video recording, I would appreciate if you could take a moment to rate my talk on speakerrate.com. Thank you again for voting my session into Mix10.
Note: Someone asked me what Visual Studio theme I was using to show the code near the end of the session. As it turns out, I was using JetBrains WebStorm IDE. Jeffrey Way did a great mini-screencast review of the new IDE on Nettuts.
Read More »
03 Feb 2010
Although I’ve switched to Google Chrome as my primary web browser, I still switch over Firefox every once in a while for one reason or another.
With the recent release of Firefox 3.6 you might find some of your favorite add-ons no longer in working because they haven’t yet been updated to support the new version number.
You can easily get around this limitation by installing the Nightly Tester Tools Firefox Add-on which allows you to override the maximum version the add-ons say they can support.
Keep in mind, even though you are forcing your add-ons to run with your current browser version it doesn’t mean they will work, but usually I find that they do work just fine.
I’m a sucker for running the latest and greatest build of Firefox so the Nightly Tester Tools Firefox Add-on is a must for me.
I tend to use the Portable Versions of Firefox so they are sandboxed in their own little folders. That way I can also have several versions on my box for testing.
As a total side-note, but related point I also like these following Portable Applications that you can find from the same site…
Read More »
29 Jan 2010
Today Phil Haack posted a mini math challenge on twitter…
This seemed like a good opportunity to launch js.Fiddle and hack out some code…
The answer... is 2520 ;)
Read More »
