So I want to become a front-end guru. I’ve been a .NET guy for the last 6 years or so. I used to be proud of that. Then I moved out to San Francisco.
Telling people you’re a .NET developer out here is like telling them you’re a Flash, COBOL, or punch card developer. You get those, “oh, well, you’re useless” stares.
Fortunately, learning a new programming language is not like learning a new spoken language. Once you get a hold of a few new concepts, syntaxes, patterns, and processes, you’re well on your way to building just about anything.
Here’s a short list of stuff I’ve learned to get started with my front-end gurudom:
- There are just six basic types: numbers, strings, booleans, objects, functions, and undefined.
- Arrays are objects, but with a special “length” property and a number of useful methods.
- You can append an item to an array by simply assigning it to the end of the array, i.e. you don’t have to declare the size of the array.
- Functions can be called without passing the parameters it expects, or with more than it expects.
- Functions can be anonymous.
- Functions can be nested inside other functions, which helps structure logic and block scope variables.
- Functions can be passed as parameters to other functions.
- Any function can be used as an object class if called with “new”.
- The manner in which you call an object determines what “this” refers to inside that object. With dot or bracket-notation, it’s the current object, without, it’s the global object.
- You can add a property or method to all instances of an object with “prototype” during runtime.
- A closure is the combination of a function and the scope object in which it was created. Allows you to create an object that stores the value that was passed to it when the object was created.
- Singletons are objects that can only be one instance. Useful as a namespace provider which isolate implementation code from the global namespace so as to provide a single point of access for functions.
The && and || operators use short-circuit logic (not boolean), which means whether they will execute their second operand is dependent on the first.
The double-equals operator performs type coercion if you give it different types:
To avoid type coercion, use the triple-equals operator:
More efficient for loop:
This is a much larger topic, one that I’m still studying. In my next post on my experiences with Ember.js, I’ll dive a little more deeply into the MVC design pattern.
Perhaps the most irritating part of front-end development is the runtime environment: your browser. Since all the debugging happens there, you’re constantly switching between your IDE and your browser, then monkeying around in the development tools (Inspector in Chrome, Firebug in Firefox, or Developer Tools in IE).
I’m becoming more proficient with this process. The inspector in Chrome has what you need: watch lists, breakpoints, callstack, etc. So it’s just a matter of swallowing the extra clicks/keystrokes required to constantly jump around.
I discovered my new favorite IDE, Sublime Text 2. Thanks Rob Dodson for the tip. It has as number of cool features, among them a package manager, smart syntax highlighting and autocompletion, split views, and a mini-map (shows you where you are in the entire document… super useful).
Packages for Git and SFTP make it easy enough to move my projects to and from the cloud.
But it’s a start. Start early, start often.
Or as Mr. S. N. Goenka likes to say, “staaaart agaaaiin.”