akai akai

#Lessons From A JavaScript Code Review

I was recently asked to review some code for a new JavaScript application and thought I might share some of the feedback I provided as it includes a mention of JavaScript fundamentals that are always useful to bear in mind. Code reviews are possibly the single biggest thing you can do to improve the overall quality of your solutions and if you're not actively taking advantage of them, you're possibly missing out on bugs you haven't noticed being found or suggestions for improvements that could make your code better.

##Challenges & Solutions

Code reviews go hand-in-hand with maintaining strong coding standards. That said, standards don't usually prevent logical errors or misunderstandings about the quirks of a programming language. Even the most experienced developers can make these kinds of mistakes and code reviews can greatly assist with catching them.

Often the most challenging part of code reviews is actually finding an experienced developer you trust to complete

Book outline

Overview

what this book is not: focus on supporting older phones, WAP and older standards
Focus on the future: the shift towards HTML5. making the case, showing the data, etc

Thinking differently

big differences on mobile: screen orientation, screen sizes, geolocation, accelerometer, usage, battery, hover states are awkward, etc.

Mobile First? More common: Mobile Last

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

What makes a bad JavaScript application?

We've all seen some horrible JavaScript. Name the top five things you see that lead to horrible JavaScript applications. Feel free to elaborate on each of your points.

I'll start, in no particular order:

Poor organization in the file system
Poor abstraction
Seemingly endless indentation in nested callbacks / if / else if / etc.

	app.get('/help', function(req, res){
	res.send('some help');
	});

	app.get('/search/:query/p:page', function(req, res){
	var query = req.params.query
	, page = req.params.page;
	res.send('search "' + query + '", page ' + (page \|\| 1));
	});

	@mixin border-radius($radius, $prefixes: -moz -webkit -o) {
	@each $prefix in $prefixes {
	#{$prefix}-border-radius:$radius;
	}

	border-radius:$radius;
	}

	#id {
	@include border-radius(5px, -moz -webkit);

	/*

	A (very) WIP collection of optimized/recommended jQuery plugin patterns
	from @addyosmani, @cowboy, @ajpiano and others.

	Disclaimer:
	-----------------------
	Whilst the end-goal of this gist is to provide a list of recommended patterns, this
	is still very much a work-in-progress. I am not advocating the use of anything here
	until we've had sufficient time to tweak and weed out what the most useful patterns

 <!doctype html>
 <!--
 WARNING!
 You probably shouldn't use this technique since images never show up
 if the script isn't loaded for one reason or another. Some reasons:
 - The content is viewed using a RSS reader
 - The content is viewed with a read-it-later service
 - The user has a flaky connection (hotel wifi, Dutch train, etc)
  -->

	/*!
	* jQuery Tiny Pub/Sub for jQuery 1.7 - v0.1 - 27/10/2011
	* Based on @cowboy Ben Alman's REALLY tiny pub/sub.
	* 1.7 specific updates by @addyosmani.
	* Copyright maintained by @cowboy.
	* Dual licensed under the MIT and GPL licenses.
	*/

	(function($){

	class EzekielTemplin
	def initialize
	@birthdate = Date.parse('1983-06-29')
	@birthplace = "Saegertown, PA"
	@gender = "male"
	end

	def age
	Date.today.year - @birthdate.year
	end