Javascript, The Good, The Bad & The Ugly. The Speaking At CEDG

Hey All,

        I will be speaking at the Columbia Enterprise Developers Guild (mouthful I know) the second Wednesday of March (That is March 14, 2012) on a topic that is near and dear to many devs hearts (Its been touted the worlds most misunderstood programming language after all). My presentation is called Javascript, The Good, The Bad, The Ugly. Like it or not javascript is here to stay and ubiquitous across web space. If you are a web developer no matter the stack (.NET, LAMP, ROR,ColdFusion (Ugh), etc.... ) chances are you have had as least some interaction with javascript. If you want to get to know effective javascript feel free to stop by whatever your  background or OS preferences.

Javascript setTimeout and setInterval or How I learned to love to sleep in javascript

This is a bit of a self reminder for dealing with "sleep" or "wait" related actions in javascript. Reason for it was because I had an whiteboard interview question that required me to use some type of "sleep" or "Wait" functionality in javascript and I almost never actually needed to use either.

These functions are baked in javascript tools

setInterval (fn,num);
setTimeout(fn,num);

About setInterval

Calls passed function(fn) repeatedly at the interval given in milliseconds.(num)

Note* Calls passed function(fn) after a bare minimum number of milliseconds. Although
it can be longer depends on the number of events waiting on the async queue of the browser.

About setTimeout

Returns the id of the thread fired to be used as a reference for clear Interval(id)

How setInterval and setTimeout are the same

• Both function take two parameters
• the first being a function and the second being an int

How setInterval and setTimeout are different

The number is the minimum number of milliseconds to wait before the passed function is run in the case of setTimeout but, with setInterval the function will run repeatedly with no regard for the previous run. In other words setInterval is non blocking and each call back exists independently of page state.

See how-javascript-timers-work for deeper insight with John Resig.

Brace for style. Why brace style matters in javascript.

In most c like languages bracket "{" location is a matter of personal tastes.

Like so many other thing.. its a different story for javascript.
http://en.wikipedia.org/wiki/Indent_style
After rereading some bits about coding style from Douglas Crockford's Javascript: The Good Parts.

I came across a blurb that could potentially cause some pain in developers wanting to use a different style of bracing such as the following...

var test=function(){
    if (1 === 2)
        alert("I never fire");
        alert("I always fire");
};

In this case the second alert box will fire regardless of the conditional statement outcome.This is due to "slightly off" javascript parsing behavior. What the interpreter actually will run is the following ...

var test=function(){
    if (1 === 2){
        alert("I never fire");
    }
    alert("I always fire");
};

Your best bet is to use braces. For the most part 1TBS or K&R style seem to be the most common I've seen. In particular 1TBS is used in the jQuery library.

var test = function(){
    if(1!==2){
        alert("I will fire");
        alert("I will also fire");
    }
}

As with much of programming you really want to try things for yourself instead of taking them at face value.
So try it yourself in the fiddle down here.

Greasemonkey for Noobs

Whipped up a quick login script a bit back that automates the field population for websites.

Get Greasemonkey for firefox and or Greasemonkey for IE


To start with I am going to assume you know javascript. If not tinkering with grease monkey might be a nice platform from which you can leap from after learning the fundamentals. (Start Here)


Before you do anything add your username password and ssn to the script add your username and password to script.

   1:  var currUserId =”your username”;

   2:  var currPassword =”your password”;

Internet Explorer directions using GM

1. Install GM4IE (greasemonkey for IE ) from gm4ie.com
2. Drop script in C:\Program Files (x86)\GM4IE\scripts\
3. Set domains to website.com(your website)
4. Turn on gm4ie
5. Let it fly

FireFox

1. In FF Tools->Go to Add New User Script
2. Name the script “auto_login.user”
3. Select Okay
4. When prompted for a location add the js script attached
5. Ensure script is enabled for your webpage by first going to the webpage and insuring the enabled button is selected and the “auto_login.user” script is enabled with the greasemonkey button on the right hand corner of your browser next to the Search bar

Note for FF: If the script is not recognized go to the gmscript folder located in
C:\Users\[user]\AppData\Roaming\Mozilla\Firefox\Profiles\6gtm7ovx.default\gm_scripts\auto_login
and insure the js file in that folder matches the js file attached


Note for IE: Apparently gm4ie is no longer available but as an alternative Trixie can be used.


One more thing. Here is a list of grease monkey add-ins available for other browsers. 

Where Do I go from here 

 

Check out these resources

• Grease monkey script repository located at http://userscripts.org/

• Grease monkey wiki http://wiki.greasespot.net/Main_Page

• Grease monkey Blog http://www.greasespot.net/  

Resources for Online Learning

First draft of a list of free educational resources
I generally try to stay away from blog entries that are just lists of links without any explained relevance or further explanation. However my intent for this would be more of a comprehensive list of places to got to learn stuff (legally) and possible critique for the ones that people have had experience with, to include possible payoff (IE This course really taught me the ins and outs of pointers and it even got me my first job.)

• p2pu.org

  I'd look at school of webcraft.They have a bit of gamification going on here with badges and a self-paced task centered requirement fulfillment system.

• Microsoft .toolbox

  Similar to p2pu (probably heavily inspired by) . A bit more structured an approach with videos, quizzes and exercises. Lots of Expression Studio, Silverlight and Web Development specific stuff.

• Khan Academy

  Not a lot of programming specific stuff but lots of awesome math stuff and general ed related course videos to follow. In the practice area they also have a pretty cool tree of math that shows your progress, complete with achievement badges and energy points and stats (think xp for rpg people).

• Code Academy

  Among the newer offering, An interactive, go at your own pace, series of course with some gamification mechanics.(Achievements,points, etc.... )

• Stanford Engineering Everywhere

  Get the Stanford Engineering experience without paying the Stanford College tuition prices.

• MIT Open Course Ware Site

  Same as the above Stanford resources. Notably this hosts one of the classics.(Of which I've only gone through the first couple bits of the course) Structure and Interpretation of Computer Programs

Update 1/23/2012

• teamtreehouse.com
• http://www.yousrc.com/
• http://kidsruby.com/about
• www.skillpunch.com/

Additional (Meta)Resources for finding resources

Opencourseware rankings
The Worlds 50 Best Open Course Ware Collections
Stackexchange Great set of resources for answering questions for just about anything.

Got A Resource I missed?

By All means share one in the comments along with your experience relative to it and I'll be glad to add it.

Exuberant Ctags and notpad++(or your preferred text editor) perfect together.

Working in a large code base? 
Want to know the usage of a variable or a function, its location, its definition and a list of the locations of created instances? 
Want it done quickly?


Exuberant Ctags and notpad++ (or your preferred text editor ) perfect together.

end of ad....

Much of the web work I've been doing at my day job I haven't really needed all the weight of a heavier IDE like Visual Studio 2010. Consequently, I've been using Notepad++ (and because I'm posturing to eventually jump on the emacs and/or vim train and wanted to use some of the unix environments tools )

Programmers from the days of old used the original ctags to mitigate the daunting task of maintaining large c code base of some pretty epic software predating the super powered (and at times super bloated) IDEs. It was written by the guy who wrote Rogue, curses, and contributed to the book The Art of Unix Programming, Ken Arnold. Now sporting over 40 (so thats 40 +1 really lol) supported languages.

I know I'm late to the party but, better late than never. In particular I have found ctags to be amazingly useful when dealing with php, vbscript, classic asp and javascript. Languages that, by their very procedural nature, can cause a lot of spaghetti code, headaches and confusion. Maintainers of these types of projects I highly recommend it.

Exuberant Ctags Quick start (Windows)

The following directions are for the simplest of ctags configuration. You can most certainly dive more deeply into ctags to gain a grasp of all its raw power. (Mwwwaa!) But this certainly does the job if your wanting simple indexing.

1. Download the executable from http://ctags.sourceforge.net/.
2. Add it to global path
3. Open up the command line
4. Navigate to the folder root and run
   C:\sourcecodefolder\ctags.exe -R *
   When executing that line ctags will search all code in the current directory and recursively search all sub directories for supported files and add them to its index (tag) file. From there you can use ctags to directly search the code or you could go the way of whatever text editor you are using. (See the links at the bottom for more resources)
   

Useful Links for Exuberant Ctags

• The holy scripture of Unix and Unix based environments. The Man Page!
• The original ctags wiki
• Exuberant Ctags main page.
• Using Exuberant Ctags with Notepad ++
• Mac OS X Install with Macports or Homebrew*
• Mac OS X Fink Install
• Mac OS X manually 

Note* For Mac Devs, If you dont have Macports, Homebrew, Fink or  some package management solution, I would highly recommend one. 

Open Source Projects

A couple of things I dusted off over the weekend.

A WP7 Html TextBlock

This HtmlTextBlock offers a similar level of functionality as to that of its silverlight counterpart which is pretty close to the android equivalent. Its still a bit buggy at times when dealing with more complex tags like the html dtd tag but does the job.... WP7 Html Text Block. The design is largely based on this guy's, and rewriting the web browser related classes using html agility. One day I'll post the details but, blah... Not right now. lol

Monodroid Android Action Bar
Monodroid conversion of Android Action Bar originally written by johannilsson
Its a work in progress at the moment. There is good bit left to go on it.


Commad Line Port Scanner
A C# port scanner I wrote when I was first learning how to program.