Online IDEs (work in a browser)
So as previously mentioned I have a cr48, is it awesome? absolutely, do I use it? not so much. Why don't I use it very much? It is a slightly complicated story. You see I had an HP mini 311 for my netbook, and what I have found out is that the 311 was not a netbook. Sadly it turns out I did many things with the 311 that I can no longer do with an actual netbook. To make it worse, it turns out that the things I do on a netbook are the same things I do on my phone (Samsung Galaxy S - Epic).
So what does that have to do with Online IDEs? Everything. I have to code, I don't know why, but I have this compulsive obsession with coding. It doesn't even matter what, it can be php, java, html, js, actionscript, whatever, as long as it can be thrown together and I can get it to compile, I have inner peace.
So back to the cr48, just because it can't code out of the box doesn't mean you can't code on it. I stumbled onto a few IDEs today that are online and can do some simple compiling. While it's true that they most cannot actual compile and render code for your playback use on the cr48, but they can save projects, upload via ftp, and even open in different IDEs.
CodeRun IDE - This is a great little browser-based IDE. Sign up is free and it will store your projects online for you. It does have a simple debugging tool, and even comes with some code-stubs to get your started (c#, php, and some js libs). Overal the look and feel is good and it fits the screen rather well. My only complaint is the that password on your account is seriously weak-sauce. I mean no special characters? For-the-love-of-whatever-gimped-db-the-backend-is-using why!? But do not let that stop you from trying it out.
Kodingen - This is an interesting little web-mash. You can grab a free account, set it to connect to your own FTP, and even get Shell access to your files. It is in beta so don't expect too much out of the box, that being said, this is a very nice offering. The site is clean and offers editing in multiple other online IDEs (Bespin, Codemirror, Ymacs), it also has a great control panel that lets you see your projects and manage your options. I have not signed up on this one yet, but it looks like a great bet to start getting your code together for when you are on the go, or borrowing someone else's cr48.
Eclipse Orion - This had been announced in 2008, and it is gaining momentum. You can download the source now if you want, but keep in mind that the project is still in the incubator. Check out this post for a little Q&A, and check this post from the "Life at Eclipse" Blog for some screenshots and little more information about the Orion Project.
IBM alphaWorks - I won't lie, I just barely found this so I have not tried it out. However since I use more than my fair share of IBM products are work, I am sure that if you try your hardest for a month and a half, open a PMR, and then fix it yourself using undocumented methods that void your service contract, this will work for you. This looks a bit like the Orion project, only with some added http/jetty translation. Also this may be a firefox only kind of browser IDE, so Chrome users get ready to drop a pass on this one.
PHPanywhere - I have not signed up with this one yet either, but I've heard a little buzz about it. This is another great little editor with syntax highlights, FTP access, project management, and some collaboration features. It is still in beta so expect new features coming and a possible shift in workflow.
shiftEDIT - Another one in the running, support for editing and publishing PHP, Ruby, Python, Perl, Java, HTML, CSS, and JS. Supports FTP and SFTP and has a syntax highlighter. Another bonus is revision history and code snippets. It has a familiar flash/flex style interface which is very clean and has right-click support and plenty of context menus. You will need to set up your domain/FTP account to do the live testing, but overal a very nice and simple IDE.
Hopefully this gets you coding and not thinking that netbooks are just for surfing the internet 
.
Print This Post
Notepad++ the New IDE
So, as Phil mentioned I did move across the country, and for no reason other than to get out of surviving another Idaho/Utah winter...and a pretty amazing job opportunity. Which is what brings me to the dev blog today.
Since I got here I'd been using Aptana as my IDE, and generally speaking I love the Aptana/Eclipse IDE's mostly because of the tools that they have that make writing code so easy. However I've become a little frustrated with Aptana as of late because it seems to chew and chew and chew on the memory. And I noticed that at least once a day I was killing it and restarting it just to get some measurable performance back.
Anyhow one fine day about a week ago I was trying to view an .sql file in notepad++ (which I've always kept around as a quick editor) and noticed that the escaping of quotes was not quite rendering in the editor. I mentioned this to the author of said file and he mentioned I should try the "bespin" theme in n++ which I promptly did and thoroughly enjoyed. This lead me to investigate the plug-ins that notepad++ has, like I said I've always used notepad++ to some extent, I've just never paid much attention to the many plug-ins available to it (and there are many).
To make a long story short I've effectively replaced my Aptana IDE with Notepad++ and it's various useful plug-ins. At the onset I knew there were a few things notepad++ would have to have in order to make the switch and not hate it, they are as follows:
1. an Explorer view - I hate doing File->open and browsing, an explorer view is much more efficient
2. an Outline view - I've become addicted to the ability of Eclipse based IDE's to click on a method name in the outline and go directly to that method.
3. Debugger - this one is a big one, in my opinion debuggers cut troubleshooting time down by more than 50%
Nice to haves:
1. ctrl + click - It's always nice to be able to jump directly to a declaration with this simple combination
2. intellisense/auto-complete
3. SVN - I currently don't use SVN but it's nice know there's a plugin available.
In my quest I promptly found that I already had the Explorer plug-in installed (and it's simply called Explorer). And while the look and feel of the view is a little different than Eclipse, it gets the job done and I have no qualms with it.
I was also able to find an Outline plug-in called "Function List". It's a little rugged in appearance but nonetheless gets the job done and the best part is it's not attached to the main view and therefore not making viewing the code a pain.
I thought there would be no way a debugger plug-in would be as effective as the Xdebug setup for Aptana/Eclipse. I was wrong. DBGp is everything I hoped I would find in a debugger (and it uses xdebug, how awesome is that?), like the others it lacks some in the aesthetic department but it is simple to set up, easy to navigate and it works. I did have a little trouble getting it working at first but then I found this Tutorial and I was off and running.
As for the "nice to haves" since Notepad++ 5.0 you can turn on auto-complete from the settings->preferences->Backup/Auto-Completion menu, simply check "Enable auto-completion" and if you'd like check "Function parameters hint on input" to enable hints to the parameters a method expects.
I haven't found a great ctrl+click plug-in but I'm hoping one will come soon. There have been some attempts but they pale in comparison to what Eclipse has done.
As mentioned SVN is available (I believe there is more than one plug-in for it) but I haven't tried it. Another one that get's honorable mention is "Falling Bricks" it's just like Tetris, and handy on days you've got nothing else to do for staying awake while your code is compiling.
Once the plug-ins were installed I decided to give my new N++ IDE a spin for a full day. I have to admit I felt a bit naked at first, but it's been almost a week now and I've gotten to where I enjoy the draft.
Just for comparison I fired up all of my new plug-ins at one time and checked the memory consumption of notepad++, a mere 35M compared to the 235M Aptana gobbles up immediately after startup (and without being in Debug mode). I'll probably keep Aptana around for a while (at least until a satisfactory ctrl+click comes along for notepad++) but I've been using notepad++ for a few days now and haven't missed the bulkiness of Aptana one bit.
EDIT (2011.02.15): I'd like to point out that when I wrote this post I was at work on two (2) 17" monitors (no not even widescreen, but who wants 17" widescreen anymore?). However a few days ago I set this up on my home PC with a single 20" widescreen monitor (and much much better resolution options) and Oh my Giddy Aunt! I couldn't believe how Eclipse® like it looks, I almost wept.
EDIT (2011.11.03): I recently revisited the plugins department and I have some more goodness.
#1 while Explorer is handy I find Light Explorer much more to my liking. it uses one window instead of two and seems to be much quicker at launch.
#2 Xbrackets Light - automatically closes a bracket pair when the opening bracket is typed. I had been missing this more than I knew.
#3 Window Manager / File Switcher - both accomplish the same goal, which is to provide a quick way to switch between open files, but File Switcher uses an always detached frame, whereas Window Managers frame can either be detached or attached to the main npp frame. Window Manager allows you to turn off the tab bar which also could be useful. So pick your poison, or do what I do and use both until you can commit to one.
Print This Post
Check Scroll Bar Position
I few weeks ago I was tasked with making one of those annoying "you must read the entire page before you continue" things (which as you know really just means you only need to scroll to the bottom of the page before continuing). It was something that I thought would be pretty easy to find on the web considering how often I run into it in use. However I was wrong, so here is what I was able to come up with.
$("#selector").scroll(function() { var elem = $(this); var position = elem[0].scrollHeight - elem.scrollTop(); if(position == $(elem).outerHeight()) $(":button:contains('submit')").removeAttr("disable"); else $(":button:contains('submit')").attr("disable","disable"); }); |
A few things to note:
the "elem[0]" that defines "var position" is significant for some reason, I tried it without the "[0]" and it broke, I'm not 100% sure why so if anyone wants to weigh in, that would be great. Secondly, it is good to keep in mind that the "disable" attr is not supported on IE7 and lower so in order to fix band-aid this I simply made the button look disabled by doing something like.
if(position == $(elem).outerHeight()) $(":button:contains('submit')").css("cursor","pointer"); else $(":button:contains('submit')").css("cursor","text"); |
Ultimately this only fakes people out if they pay attention to their cursor, which is probably less than 50% of the time. so really the best way to do this i found is as follows:
$("#selector").scroll(function() { var elem = $(this); if(checkScrollTop(elem)) $(":button:contains('submit')").css("cursor","pointer"); else $(":button:contains('submit')").css("cursor","text"); }); |
Then I Have a function called checkScrollTop() which takes an argument.
function checkScrollTop(elem) { var position = elem[0].scrollHeight - elem.scrollTop(); if(position == $(elem).outerHeight()) { return true; } return false; } |
And last but definatley not least, a click event on the button so we can catch those trying to cheat w/ IE7 and (gulp) below.
$(":button:contains('submit')").click(function() { var elem = $("#selector"); if(checkScrollTop(elem)) $('#step1_disable').hide(); else alert("Please read the entire policy before clicking \"submit\""); }); |
to break it down, the $("#selector").scroll function simply decorates the button, while the click event on the button determines if the user can continue, if not it pops an alert up telling them what they must do. both events use the checkScrollTop(elem) function which measures the position of the scroll-bar.
Happy Annoying people 
Print This Post
Using jQuery to Make a Smart Search
Recently I've been forced to develop a relationship with jQuery (something I had no interest in while I was working with team awesome). I have to admit it has been quite pleasant and my tolerance has grown into a very strong liking of the library (so I'm a little slow). This proved very useful when I was asked to make a search field do more than just search for an ID. I decided NOT to fowl up our nice sleek looking header with a clunky drop down box, instead I turned to jQuery to make the search bar intuitive...observe.
$("#searchForm").submit(function() { //the regular expressions in this function are not meant for validation as much as determining which value to search by. var submitted_appid = $(".search input[name=AppID]").val(); if(/^[\d]+$/.test(submitted_appid) == true) { //do nothing since the input is already properly named } else if(/^[\d-]+$/.test(submitted_appid) == true) { //change name of input to SSN $(".search input[name=AppID]").attr("name","SSN"); } else if(/^[A-Za-z]+$/.test(submitted_appid) == true) { //change name of input to LastName $(".search input[name=AppID]").attr("name","LastName"); } else { //no match, alert the rep and return false alert("invalid search value:\nfor SSN please use numbers and at least one dash '-'\n for LastName use only letters\n for AppID use only numbers") return false; } //there was a match add an action and submit the form. $(this).attr("action",'search.php'); $(this).submit(); }); |
The HTML
<div class="search">
<form id="searchForm" name="searchForm" method="post" action="">
<input type="text" name="AppID" value="Search..." />
</form>
</div> |
Then your search app would do something like the following
if(isset($_POST['AppID']) { //enter sql code here } else if(isset($_POST['SSN']) { //enter sql code here } else if(isset($_POST['LastName']) { //enter sql code here } |
Basically the jQuery decides what to search on based on the characters in the input field, if the wrong mix of characters is present then we fire off an alert message notifying the irresponsible party and correcting their ignorant ways.
Print This Post
jQuery Random Color Changer
So I had a lot of time on my hands today, and we were trying to figure out a good color palette for one of our customer service portals. Since I'm not in the least bit a designer we decided to wait for one of the Graphic Designers to take a stab at it, only problem with that is they were out to lunch. So someone gave me the idea to play around with the colors and make them change from time to time. I wasn't feeling particularly ambitious so I scoured the internet for a good jquery solution to randomly select colors and change background colors based on those that were randomly generated.
below is what I came up with:
/* -- jQuery Colourific */ /* -- v 1.0 - January 2008 */ /* -- by ben watts (http://www.benwatts.ca/sandbox/jquery-colourific/) */ //$(document).ready $(function(){ setupColourific(); }); // setupColourific function setupColourific(){ var elements = new Array(); elements[0] = $("td.Upload"); // the element that's changing elements[1] = $("td.Notes"); elements[2] = $("td.LoanTitle"); elements[3] = $("td.hdr"); elements[4] = $("body#body"); for(i = 0; i < elements.length; i++){ changeColour(elements[i]); } window.setInterval( function(){changeColour(elements[0]);}, 1000); window.setInterval( function(){changeColour(elements[1]);}, 1500); window.setInterval( function(){changeColour(elements[2]);}, 2000); window.setInterval( function(){changeColour(elements[3]);}, 2500); window.setInterval( function(){changeColour(elements[4]);}, 3000); } // changeColour function changeColour(e){ // random values between 0 and 255, these are the 3 colour values var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); // puts the hex value inside this element (e is a jquery object) //e.text(getHex(r,g,b)); // change the text colour of this element e.css("background-color", getHex(r,g,b)).fadeIn(); } // intToHex() function intToHex(n){ n = n.toString(16); // eg: #0099ff. without this check, it would output #099ff if( n.length < 2) n = "0"+n; return n; } // getHex() // shorter code for outputing the whole hex value function getHex(r, g, b){ return '#'+intToHex(r)+intToHex(g)+intToHex(b); } |
Obviously you'll need to change the selectors to something relevant for your purposes. It's probably not something you want to use on a regular basis but would make a great april fools day joke, or if you feel like a ceasure go ahead and mess with the time interval.
I can't take full credit for this script, the original can be found at This site
Print This Post
jQuery vs. Prototype
Got a sample article from NFJS that looked at the two libraries. Thought everyone might enjoy having a look at it. I thought it was pretty good if a little long winded. DETAILS only FTW!
Ajax Library Smackdown: Prototype vs jQuery by Nathaniel Schutta
Print This Post
LinkPost for August 2009
Wow, another month has come and gone, and summer is nearing the end. Schools have started back up and it's time to buckle down and start working on things you've learned over the summer (not to mention all the gratuitous homework you may start accumulating). To help you out with either some stress relief, or with a project you've been assigned, we have plenty of links to sort through.
This months highlights include the usual sampling of fonts, some image links (tons of photoshop goodness this round), a new image compression resource (better compression than smush.it), jQuery tutorials/plug ins, and some mac widgets to help you get things done on your mac.
Let's get started...
Print This Post
Summer 2009 LinkPost Extravaganza!
Whoa, what happened? I'll tell you what happened, I blinked and it was August! But fear not! I have kept the links that I was going to post and have compiled them into what I like to call the Summer 2009 LinkPost Extravaganza! Cheesy? Yes, a little absurd? Absolutely, but hey at least you're getting the links right?
This Post features plenty of images (icons, textures, etc.), a large selection of jQuery goodness, some php, fonts, and plenty of tools, resources, and tutorials. I even threw in a few links for our growing mac-user community (yeah, you can't see it, but I'm patting myself on the back).
Enough drivel, time to give the peoples what they want, the links!
Print This Post
Introducing jTrace v1.0
I've been working on a tool for javascript developers. It all started after searching the web for some form of tracing tool I could use when writing javascript so I could see why a certain function wasn't firing. I only found a handful of solutions (and none that I was very impressed by). So I finally ended up coding one myself.
So I give you, jTrace - javascript tracing for the peoples (say that last part like strong-bad to get the full effect).
I coded jTrace with jQuery 1.3.2 (as an include... not so much a plugin, although that's what I usually call it), and then I created a 'bloated' version that has jQuery included inside of it (for all you mooTools and prototypers out there... I got your back ). For those who use the bloated version, yeah I coded the jQuery portion to use 'jQuery(...' instead of '$(...' for the selectors so it shouldn't break your exisiting code.
To get an in-depth approach on jTrace and how to use it, head over the 'usage' page on the jTrace site.
Have questions, comments, or props? Leave them here in the comments, thanks!
Print This Post
Pop-ups, the interweb, and you
The problem*: You have a page with a pop-up, and when you click a link on it, it needs to change the page that spawned it.
I searched everywhere and every result listing let me down. Site after site was bitter disappointment, I searched for 'pop-up close child window redirect parent', then 'pop up change parent', and 'pop up child link change parent window'. I did find some useful code like the 'onunload' event (we'll cover that another time ). I finally stumbled onto the solution by mashing up a few different solutions that were posted for javascript events and the mysterious 'window' method built into the base js library*².
The solution (#1): This solution is for those who want to keep the pop-up open, or just want parent only manipulation (yeah, you can always manipulate the child (pop-up), but solution 2 is soooo much easier for that).
First, let's build a method to handle pop-ups.
function popWindow(url, myWidth, myHeight, myScrollbars, myTop, myLeft, myMenubar, myResize) { window.name = "main"; /* setting this is the key to letting you manipulate the parent window */ window.open(url, "","width="+myWidth+",height="+myHeight+",scrollbars="+myScrollbars+",top="+myTop+",left="+myLeft+",menubar="+myMenubar+",resizable="+myResize+",bgcolor=#ffffff"); } |
Note that we used "window.name" and set it to "main". This allows me to reference the parent window from any child windows (pop-ups). Now that we've done that, in our pop-up window we just need to make the link have a target of "main". Like so:
<a href="http://fakedoman.com/newpage.html" target="main">Change the parent window!</a> |
Now this comes together on your parent page, you click a link that uses the popWindow function that creates the pop-up that can now reference the parent by the name "main".
The solution (#2): This is the show, the heat, the expletive, the new hotness, and the fresh burnination. Ok, fine, it's old code that's been around forever that everyone on the internet forgot about (or at least didn't blog, write, post, etc).
In your pop up window, build a method like this in your script section (or included js file).
function openParent(webAddress){ opener.location.href=webAddress; window.close(); }; |
Wow... 2 lines (4 if you count the open and closer of the function), simple, easy. Why has no one told anyone else about this*³ ? Now the only thing left is to call that function in an "onclick" event in your a-tag.
<a href="javascript:void(null);" onclick="javascript:openParent('http://fakedomain.com/newpage.html');"/> |
Yes, I pointed the href to "javascript:void(null);", the onclick event will overwrite the original href call anyway, so this is how you build the link to keep the code valid to W3c standards.
And that, my friends, is how you code a pop-up window that will change the parent window with a link from the pop-up window.
* Yes I heard all of you grumblers in the back saying 'change the target in the a-tag to "_top" and that'll solve your problem. And you know what? yeah, in 1998 that would have worked. However these days our pop-ups are javascript based, and not so frames/iframe-y.
*² This statement could very well be false... in fact it's made up, I'm not sure if it's built in, I really can't back that up, yeah, total b.s. and yet the code works in IE6, IE7, IE8, Opera 9.63, Safari 3, Firefox 2, Firefox 3, and Chrome... so that kinda seems "built-in", or at least understood and interpreted correctly by most browsers.
*³ It could be that pop-ups in legitimate sites really aren't all that common, and generally the people who use them on their sites are spammers/malware/spyware vendors and should be dragged out in the street and beaten while having their selling slogans chanted and shouted at them (isn't that a pleasant picture you just painted in your head? your welcome).
Print This Post