Ryan Fitzer

Hyphen, CamelCase, or Underscore

My choice of word combination patterns depends on the language. I initially tried to use a one-size-fits-all approach, but as my projects became more complex with multiple languages, it got really annoying when the pattern did not match the language. The old standby argument of “readability” quickly loses its validity when you’re dealing with code. For instance, PHP can contain javascript, html and css and uses underscores for functions. Depending on your text editor syntax hi-lighting, a javascript function (camelCase) could use the same coloring as a PHP function (underscore). Since you can’t depend on color alone, using each language’s pattern enables you to immediately know the difference.

There will always be edge cases (PHP uses CamelCase for classes), but I find that sticking with each language’s word combination patterns make for the least friction possible.

With that said, here are my current choices:

PHP
Variable: underscore
Function: underscore
Class: CamelCase

Javascript
Variable: camelCase
Function: camelCase
Constructor: CamelCase

CSS
Class: hyphen
ID: hyphen

HTML
Custom Attributes: hyphen

With html, the data- prefix is one defense, even though attributes like tabindex differ. Also, an underscore is technically meant to augment a letter or word, while a hyphen is used to separate words or syllables.

Regular Expression engines use the same characterizations.

For example, using the text:

some-word some_word

with the regex matching pattern:

\b\w+\b

the resulting array of matches is:

[0] => some
[1] => word
[2] => some_word

This may seem like I’m over-thinking things, but like I said, I want the least amount of friction when I work.

Some Links I Want to Check Out

In need of a blog dusting, here are some links I’d like to check out.

From AddyOsmani.com

• Essential JavaScript And jQuery Design Patterns – A Free New Book
  

  Hey guys. Today I’m happy to announce the release of a free book I’ve written called ‘Essential JavaScript & jQuery Design Patterns For Beginners’. Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal.

• JavaScript 101 – A Free 10 Hour Audio Course
  

  Hey guys. Today I’m happy to announce the release of a free 10 hour downloadable JavaScript audio course for beginners called JavaScript 101. This is a course you can listen to at your own pace and covers many core JavaScript fundamentals ranging from the basics to syntax, objects, ajax and it also includes an hour of training on jQuery.

From Rebecca Murphey

• jQuery Fundamentals
  

  The purpose of this book is to provide an overview of the jQuery JavaScript library; when you’re done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study.

From Andy Clarke

• Working on MobiCart

  Andy shares his files and technique on using Dropbox as a client-friendly versioning system. The code contains his use of HTML5 and CSS3. Seeing this in an actual client project from a veteran like Clarke is a great opportunity to learn real-world use-cases for the new and upcoming specs/modules.

Dot vs. Square Bracket Notation in Javascript

I have been looking for an explanation on this for a while. This article summed it right up, Javascript Square Bracket Notation

Javascript also offers an alternative property accessor notation using square brackets in a way that is similar to the way in which the indexed members of an Array are accessed, except that a string is used between the square brackets. This alternative notation is extremely powerful and useful but gets very little coverage in most books on javascript and that seems to leave novice javascript programmers unaware that they even have this option.

Using square bracket notation you can change this:

document.body;

into this:

document['body'];

More importantly though, you can use variables as function names:

var genericString = 'Hello, my name is Ryan.';

var stringMethod = 'split';

genericString[stringMethod](' ');

// returns the array ["Hello,", "my", "name", "is", "Ryan."]