Assorted Development Tomfoolery | Tom McFarlin

Configuring Apache for WordPress, Permalinks, and no more 404’s

Tom — Wed, 15 Jul 2009 05:00:11 +0000

XAMPP’s a good solution for getting a development environment running a local machine. I’ve rarely had to modify any of the default configuration options, but I did experience one hiccup while recently working with WordPress and permalinks that resulted in the site consisting of nothing but 404’s.

All I was trying to do was update the site’s permalink structure from /year/date/day/title to /title.

Unfortunately, I started getting 404’s every time I’d try to access a page. This isn’t something I’ve often experienced, so I figured an Apache module wasn’t being loaded. I found this line in httpd.conf:

#LoadModule rewrite_module modules/mod_rewrite.so

Uncommented, saved, restarted Apache, and no more 404’s.

WordPress 2.5, RSS, and Ampersand Encoding

I’m done with this

Tom — Tue, 14 Jul 2009 00:32:11 +0000

When I started working on this site about a year and a half ago, I was largely driven by the desire to publish results to various programming problems. Don’t get me wrong – the idea of readership, traffic, and a community built around original content is exciting (and there’s a lot of people out there that are good at it), but whether or not people were reading this site didn’t matter much to me. My whole take on the blogging thing was this: Simply publish the solutions to the problems experienced during the course of development regardless of if anyone was reading the material. If nothing else, the articles would result in a log of things to which I could refer in the future.

At first, I did just that and the site began to consist of a small archive of seemingly unrelated posts. A few months passed and I began to get a small amount of traffic to several of the articles the majority of which was the result of Google searches.

The thing is, something about seeing traffic statistics helped to develop this desire to write more content. I tried to branch out a little bit from programming articles to things such as various Linux configuration scenarios, tips for Gmail, thoughts on personal projects, and even reviews for various things that I enjoy outside of programming. From there, I planned to widen the scope of the content I was willing to publish.

Over the past few months, that’s exactly what I’ve done. I even modified the design of the site in order to support this additional content (though I’ve since rolled it back). Although I’ve received some good feedback, the wider scope in content has made it more of a chore to publish articles. I’ve enjoyed writing less than I did a year ago. The most valuable feedback and conversions that I’ve had via comments, email, or Twitter have all been related to the articles that I enjoyed writing the most – those dealing with development problems.

Two things are going to come from this. First, many of the articles that have resulted in a bit of feedback have helped me to begin working on a small side project. For the next few months, I’m going to be working on some thing that is motivated largely by the emails and messages I’ve received. Secondly, I’ve gotta scale back. I wanna write less about utilities, applications, and tools and write more about programming problems and my thoughts on software engineering principles and related topics. I’d much rather connect with people about these types of things.

This means that articles on things like running accessories or up-and-coming utilities will be hard to come by, but there may be the occasional meme or personal video published – those things aren’t enough to bore and deter most people.

At least I hope not.

How to passively track file downloads

Tom — Mon, 29 Jun 2009 08:00:42 +0000

Keeping track of web site visitors is trivially easy especially with services like Google Analytics. I enjoy elaborate graphs, charts, and content drill-down statistics as much as the next person, but such applications can occasionally go beyond the scope of what I need, or don’t provide the type of detail I’m looking for with regard to certain information.

For example, I like to keep track of download trends for certain utilities I’ve made available online. Setting up my own tracking system has made it trivially easy to tailor the data such that I can get a glimpse at reports more relevant to what I want. After all, I define the database so I can tailor the schema against the type of queries I’m going to want to run on it in the future.

In this post, I’ll explain how I setup a simple, passive system for recording file downloads in my own database. The article is based on my own experience and is targeted at Apache, PHP, and MySQL, but the techniques are [or at least should be] platform agnostic.

Applications Used

Although any LAMP/WAMP/MAMP environment will do, I used the following applications when putting together this example.

XAMPP is arguably the easiest way to get Apache, MySQL, PHP, and Perl running on your local machine. It comes configured right out of the box, installs all of the necessary modules and services, and provides an easy-to-use interface for administering the services. There are packages available for Linux, Windows, OSX, and Solaris.

HeidiSQL is a free, lightweight MySQL front-end. It allows for both point-and-click and query-driven database administration. It’s available for Windows but is also compatible with Linux via Wine.

Notepad++ is the text-editor I used when working on this demo, but any IDE will do. PHP and XHTML are used throughout the article so anything with good syntax highlighting will work.

Database Setup

First, you’re going to need a database that will contain a table for tracking downloads. For some, it may be easier to add a table to an existing database; for others, it may be preferable to create a new database altogether. I have a single database containing a number of tables each of which are designated for the various files I wish to track.

Anyway, if you’re creating a new database, name it whatever you like. Note that if you plan on tracking multiple files, it helps to name it something that represents the data it holds (like download_stats).

Next, you’re going to want to create a table. Before doing so, come up with a meaningful name and schema that works for your data. I’m going to create a table that will be used to store the number of downloads of TheNextBigThing so I’ll creatively call the table TheNextBigThing.

For this example, I’m interested in storing the date and time the file was downloaded and what browser was used so I’ve defined the following schema:

I let the database system provide a default timestamp, although this can be overwritten when running the insert query. Of course, each schema will be different based on whatever information you’re going to be tracking or how you’re going to want to ultimately query the database. Nonetheless, this is enough to begin storing information. Since we’re eventually going to be inserting data using PHP, I always test the queries I’m going to be using before including them in my script. For example:

INSERT INTO download_stats.thenextbigthing
(browser)
VALUES ('Mozilla Firefox')

Write Some PHP

With the database in place, you’re going to need some server-side logic to intercept client-side requests, insert information into the database, and then return the requested file back to the user. All of this should be done in a transparent manner and should work regardless of if the user left-clicks or right-clicks and selects Save Target As… to download the file.

First, define the parameters that are going to be passed into the table. These typically correspond to the columns that you created when setting up the database table. Sometimes, I want to pass additional information to the script – this can be done using GET or POST parameters; however, for all intents and purposes, I’m just going to use variables available on the server-side. This way, all of the remaining information can be gathered from native PHP variables. Here’s the first thing that I do in the script:

// the parameters to save...
$str_browser = $_SERVER['HTTP_USER_AGENT'];
$str_filename = 'TheNextBigThing.zip';

After this, specify the necessary headers that will be used to return the requested file to the client. You’ll need to specify the content-type of file you’re going to be sending as well as the the content-disposition in order to force the browser’s save dialog to appear. Assuming that the file is a zip archive, the code should look like this:

// setup headers and read the file
header('Content-type: archive/zip');
header('Content-Disposition: attachment;filename="' . $str_filename . '"');

Next, you need to return the file to browser. This is easily accomplished by making a call to PHP’s readfile() function.

readfile($str_filename);

Finally, connect to the database and insert the information gathered in the script into the table.

// insert record into table
$db_handle = mysql_connect('localhost', 'root', '');
if(!$db_handle) {
  die('Failed to connect to the database.');
}
 
$db = mysql_select_db('download_stats');
if(!$db) {
  die('Failed to select database.');
}
 
$str_query = 'INSERT INTO thenextbigthing (browser) VALUES ("' . $str_browser . '")';
$result = mysql_query($str_query, $db_handle);
if(!$result) {
  die('Failed to insert record.');
}
 
mysql_close($db_handle);

At this point, you should have a working PHP script that inserts information into the specified table whenever the page is hit. You can test the page by attempting to launch it in a browser – remember to provide any query string parameters that the script is expecting. Permitting everything works well, you should be able to query the database and see a couple of new records.

If not, double-check the output in your browser. If there are any script errors, it should provide insight on the problematic code.

From client to the server and back

The last step in tracking downloads of your files is to properly setup the markup to reference the PHP script. There are numerous ways to do this such as using JavaScript or using input submits; however, for this article, I’m just going to stick with using a basic HTML link. In order to achieve this, all you need to do is specify the link to the PHP script in the href of your anchor. Again, remember to provide any required query string variables to record the data.

Click here to download it!

If all works well, you should be able to left-click as well as right-click and select Save Target As… (or Save Link As…) and have the file returned to you just as if you were linking directly to it. Additionally, information about the date, time, and browser should now be recorded in your database.

Although this is a slightly contrived example, keeping these statistics becomes increasingly useful over time. As the table begins to gather more and more information, you can construct queries that give insight into visitor information. Permitting your schema is elaborate enough, you can track much richer information that is provided here. Of course, that’s a little out of scope for this particlar How To.

Download Demo Files

For reference, you can download all of my demo files by clicking here. Remember that all of this is based on an XAMPP setup so your mileage may vary based on your environment.

Benchmarking JavaScript’s for and jQuery’s each()

Tom — Mon, 22 Jun 2009 07:00:54 +0000

Considering the last three posts were all about JavaScript, I was planning to move on to something else; however, I came across an interesting article comparing the performance of JavaScript’s standard for loop with jQuery’s each() method. I think that it provides some good quick-reference material, but it got me interested how another variation of the for stacks up against each(). I wrote a small set of tests based on the same setup provided in the article.

Setting It Up

The goal of the test was not so much to explore universal performance across various browsers, but to elaborate on the numbers found in the aforementioned article. As such, the tests were executed in Mozilla Firefox 3 using Firebug’s console capabilities. In keeping with the same structure as that test, I populated a single array with a specified data size. The same instance of this array was to eventually be processed by each loop variation during the test.

  var arTest = [];
  for(var i = 0; i &lt; iDataSize; i++) {
    arTest[i] = 'Test element number ' + i;
  }

The Actual Test

Once the array had been populated, I setup three variations of loops to iterate through the data – the standard for, a for that reads the array length only once, and jQuery’s each() – and timed each one using Firebug’s console. The test was executed using four data sizes: 100 elements, 1,000 elements, 10,000 elements, and 1,000,000 elements. Finally, each test ran right after the other on the same instance of the array created during setup.

console.time('Vanilla For');
for(var i = 0; i &lt; arTest.length; i++) {
  arTest[i];
}
console.timeEnd('Vanilla For');
 
console.time('Stored-Length For');
for(var i = 0, l = arTest.length; i &lt; l; i++) {
  arTest[i];
}
console.timeEnd('Stored-Length For');
 
console.time('Each');
$.each(arTest, function(i, val) {
  val;
});
console.timeEnd('Each');

The Not-So-Surprising Results

You can see that the loops perform marginally the same across the board up to about 10,000 elements.

Element Size           Vanilla For      Stored-Length For     Each 
 
100                    0ms              0ms                    0ms
1,000                  0ms              0ms                    3ms
10,000                 1ms              1ms                   23ms
1,000,000             81ms             64ms                 2493ms

After 10,000 elements, there is a noticeable performance difference (especially with each()). I suppose you could make a case for the importance of sticking with the stored-length for loop, but how many times are you going to store more than 10,000 elements in an array?

My Thoughts

In order to be completely exhaustive, the tests really should have been executed in IE8, Chrome, Opera, and Safari, as well. To be complete, additional data sets should have been used – such as references to DOM nodes, various JavaScript objects, other arrays, etc. Of course, this was primarily to get a clearer picture of performance of the test in the previous article had already discovered.

I didn’t find the results all that surprising. I’ve read numerous articles where other developers talk about optimizing loops; however, the results seem to indicate that it doesn’t really matter as long as your data set is below a certain size. There’s always going to be those that are all about optimization in every case, but as far as I’m concerned, this is one case in which it may not matter that much. Unless, of course, you’ve got a million elements, but that sounds like a whole other problem.

Getting Started with JavaScript: Books, Sites, Tools, & Twitterers

Tom — Mon, 15 Jun 2009 09:00:25 +0000

In the last couple of articles, I’ve outlined some resources geared towards learning JavaScript, as well as popular utilities that are beneficial for advanced JavaScript developers. In this final article, you’ll find various books, authors, blogs, and tools that are useful and/or interesting for anyone serious about JavaScript programming.

JavaScript: The Good Parts (http://oreilly.com/catalog/9780596517748/)

Douglas Crockford is the senior JavaScript artchitect at Yahoo! and is one of the leading authorities on JavaScript. His book, JavaScript: The Good Parts, exposes all aspects of the language – the good parts and the bad – and makes recommendations on what to avoid in order to get the most out of the language. Perhaps I’m giving too much credit, but I’ve found this to be the K&R of JavaScript.

Ajaxian

Ajaxian focuses on popular JavaScript, Ajax, and CSS techniques. Material is usually published several times a day and ranges from emerging technologies, best practices, up and coming plug-ins and frameworks. It’s a great resource if you want to be up to date on JavaScript trends and if you want to be on the edge of JavaScript technologies that may (or may not) become more mainstream. Ajaxian also provides links to other blogs, videos, books, and other resources that are highly relevant to JavaScript development. You can also follow them on Twitter.

Smashing Magazine JavaScript (http://www.smashingmagazine.com/tag/javascript/)

Over the past couple of years, Smashing Magazine has garnered a huge following and has evolved into an extremely valuable resource for web developers and designers. Although the site publishes a wide array of content – from WordPress themes to useful Mac articles – their JavaScript category provides a great collection of various JavaScript tips and tricks, tools related to popular frameworks, and emerging tools. Smashing Magazine is a really good resource if you’re accomplished with JavaScript and are looking to stay on top of what’s popular in the JavaScript world. Twitter.

Six Revisions JavaScript (http://sixrevisions.com/category/javascript/)

Jacob Gube runs the popular web developer and design blog Six Revisions. Though relatively young, the site maintains a consistent following and Jacob (and the occasional guest author) publishes various tutorials, techniques, tools, and other related information to web development. His articles often include strong JavaScript content ranging from tools and plug ins, to How To articles, and other best practices. Twitter.

Stack Overflow JavaScript

One of the best ways to maintain programming skills is to attempt to solve problems in that language. Stack Overflow’s JavaScript questions is a great place to not only get your questions answers but also to answer questions from other developers, as well. Additionally, simply reading the number of questions and answers already posted on the website is beneficial in improving development skills.

JSON

If you’re planning to do any sort of serialization involving JavaScript, it’s useful to understand JSON. It was discovered and promoted by Douglas Crockford, uses natural facilities of the JavaScript language, is much more lightweight than XML, and has gained widespread use as Ajax has become more popular in development. Understanding the notation and how to utilize in the context of the language is important.

Google V8

V8 is Google’s open-source JavaScript compiler that ships with Google Chrome. It’s notable in that, whereas other browsers manage JavaScript by an interpreter, V8 compiles JavaScript to machine code.

Twitterers

Elijah Manor. Elijah Manor is best known for his “tech tweets” and publishes tons of links to resources useful for tons of developers. He frequently tweets about JavaScript, jQuery, and other JavaScript related content.

JSRocks. Thomas Fuchs, author of Scriptaculous (Prototype’s UI library), and Amy Hoy are publishing a book all about JavaScript, browser performance, and other considerations for client-side developers. JSRocks is the Twitter feed for the status of the book and other useful information.

Sam Stephenson. 37signals programmer and author of the Prototype JS library.

John Resig. Mozilla developer and author of the jQuery library.

jQuery. The official Twitter feed for the popular library that often tweets about important framework issues or notable content surrounding the library.

JavaScript: The Good Parts

Douglas Crockford is the senior JavaScript architect at Yahoo! and is one of the leading authorities on the language. His book, JavaScript: The Good Parts, exposes all aspects of the language – the good, the bad, and the awful – and discusses what aspects to utilize in your code as well as what aspects to avoid in order to get the most out of the language. Perhaps I’m giving too much credit, but I’ve found this to be the K&R of JavaScript.

JSON

If you’re planning to do any sort of serialization involving JavaScript, it’s useful to understand JSON. It was discovered and promoted by Douglas Crockford, uses natural facilities of the language, is much more lightweight than XML, and has gained widespread use as Ajax has become more popular in development. Understanding the notation and how to utilize in the context of the language is key for any asynchronous JavaScript development.

Ajaxian

Ajaxian focuses on popular JavaScript, Ajax, and CSS techniques. Material is usually published several times a day and ranges from blogs, videos, books, emerging technologies, best practices, up and coming plug-ins and frameworks related to JavaScript development. It’s a great resource if you want to be up to date on JavaScript trends and if you want to be on the edge of JavaScript technologies that may (or may not) become more mainstream.

You can follow them on Twitter.

Smashing Magazine | JavaScript

Over the past couple of years, Smashing Magazine has garnered a huge following and has evolved into an extremely valuable resource for web developers and designers. Although the site publishes a wide array of content – from WordPress themes to useful Mac articles – their JavaScript category provides a great collection of various JavaScript tips, tricks, and tools related to popular frameworks, and emerging utilities. Smashing Magazine is a really good resource if you’re accomplished with JavaScript and are looking to stay on top of what’s popular in the JavaScript world.

Smashing Magazine is also avaialble on Twitter.

Six Revisions | JavaScript

Jacob Gube runs the popular web developer and design blog Six Revisions. Though relatively young, the site maintains a consistent following and Jacob (along with the occasional guest author) publishes various tutorials, techniques, tools, and other related information to web development. His JavaScript articles often include strong content ranging from tools and plug-ins, to How To articles, and other best practices.

You can follow Jacob on Twitter.

Stack Overflow | JavaScript

One of the best ways to maintain programming skills is to attempt to solve problems in that language. Stack Overflow’s JavaScript questions tag is a great place to not only get your questions answers but also to answer questions from other developers, as well. Arguably, simply reading the available questions and answers already posted on the website is beneficial in improving development skills.

Google V8

Google Chrome is an extremely fast browser for a number of reasons, one of which being the way JavaScript is managed by the application. V8 is Google’s open-source JavaScript compiler that ships with the browser. It’s notable in that, whereas other browsers manage JavaScript by an interpreter, V8 compiles JavaScript to machine code.

Notable Twitterers

John Resig. Mozilla developer and author of the jQuery library.

jQuery. The official Twitter feed for the popular library that often tweets about important framework issues or notable content surrounding the library.

Sam Stephenson. 37signals programmer and author of the Prototype JS library.

JavaScript’s arguably become the most popular language on the web. Without it, many of the most popular websites and applications wouldn’t function. It’s important for any serious software developer with a focus in web application programming to know and understand JavaScript. Hopefully the past couple of articles have proved useful in getting you up to speed with the language!

Getting Started with JavaScript: Developer Resources

Tom — Mon, 08 Jun 2009 09:00:41 +0000

Once you’ve got a relatively strong grasp of JavaScript, you quickly discover that diagnosing bugs, writing code that works across the most popular web browsers, and page performance can quickly become issues. Below are some of the more popular tools for managing the typical speedbumps along the way of developing JavaScript applications.

Debuggers

When it comes to debugging JavaScript, support is hit or miss across all of the various browsers. Although most of them will denote when an error occurs, they aren’t so good at giving enough information to help you find the culprit of said error. To that end, there are a few tools that seek to make JavaScript debugging easier.

Firebug

I’ve mentioned Firebug in a couple of past articles on this site and I don’t want to belabor the point anymore than necessary. Firebug is the arguably the premiere web developer extension for Firefox. Aside from the ability to manipulate the DOM and CSS on the fly, Firebug’s built in JavaScript debugger is a terrific resource when it comes to monitoring breakpoints, watching your variables, and viewing the call stack.

Firebug Lite is an edition of Firebug that works with IE. It’s relatively stable; however, I’ve experienced some issues with using the tool with respect to pages that include a large number of scripts and stylesheets. I recommend Firebug Lite, but only for lightweight pages.

Microsoft Script Debugger

Although the IE Developer Toolbar offers a set of tools for XHTML and CSS, it provides little in the way of JavaScript. Unfortunately, there are only a few tools available for debugging JavaScript for Internet Explorer. Although relatively simplistic in comparison to Firebug, Microsoft Script Debugger provides some functionality that is useful for specifically monitoring JScript. Its strengths lie in the ability to step through code and watch variables.

Of course, Google Chrome’s built in JavaScript debugger deserves a mention, although it’s a bit less powerful than what have been mentioned here. Opera is also currently working on Dragonfly – new product that features a built-in JavaScript debugger as well.

Frameworks

Within the past few years, a number of JavaScript frameworks have emerged that seek to help make JavaScript development easier. Many of them offer their own unique features such that it enhances the existing capabilities of JavaScript. The primary advantage that comes with using frameworks is that many of the cross-browser frustrations have been abstracted away. Additionally, you get a lot of powerful functionality – such as element animation – for free.

jQuery

jQuery is quickly becoming the most popular JavaScript framework on the web. It’s strengths lie in the ability to manipulate the DOM by using CSS selectors and accomplish a lot of work with very little code. It has great native support for Ajax, event handling, and animations. jQuery also features it’s own UI library.

Because of the plug-in system and community that exists around the framework, there is almost an unlimited number of plug-ins available for the framework, as well. Its online documentation is one of the best when it comes to JavaScript frameworks.

MooTools

MooTools is a framework that seeks to make it easy to write object-oriented JavaScript. Aside from helping to enhance the way JavaScript code is written, it also has suite of DOM utilities, animation functionality, event handling tools, Ajax utilities, and also supports a number of CSS3 selectors. Unlike jQuery, the MooTools framework has native support object inheritance.

MooTools also allows you to roll your own package by selecting only the modules that you want included with your download. This allows for keeping the framework as small as possible for a given project. The framework also maintains a strong community so finding help or dealing with an issue is relatively painless.

Prototype

Much like jQuery and MooTools, Prototype supports cross-browser compatible event handling, strong Ajax features, and animation tools through its UI library scriptaculous. The distinguishing factor of Prototype from other frameworks is that it extends the DOM by adding various utility methods to many of the objects. Additionally, it introduces many new useful functions to native JavaScript objects.

Prototype’s API is well documented and there is still an active community around the framework. Development on the framework has been relatively slow as of late, but it still offers much in terms of JavaScript functionality. The library is especially popular within the Rails community as it’s incorporated into Ruby on Rails by default.

Obfuscators

As the web becomes more and more dependent on JavaScript, the number and/or size of scripts on given pages or sites has greatly increased. This ultimately affects bandwidth and, thus, the amount of time is takes for a page to load on a client machine. Obfuscators help by making the script as small as possible.

JSMin

Originally written by Douglas Crockford, JSMin is an obfuscator that aims to remove comments, unneeded whitespace, and other various characters throughout the JavaScript source code. The JSMin homepage does an excellent job of explaining additional features of the tool as well as how it works.

Although it was originally written in C, it has been ported to a number of languages one of which being JavaScript itself such that the utility is able to be executed within the context of a web browser.

YUI Compressor

YUI Compressor is another JavaScript obfuscator that is written and maintained by Yahoo! It was originally written by Julien LeComte . YUI Compressor is written in Java so will require an instance of the JVM to execute the application, but various tests have demonstrated that YUI Compressor can minify up to 20% more than JSMin. In addition to minifying JavaScript, YUI Compressor 2.0 also offers the ability to minify CSS files, as well.

In the final article in this series, I’ll outline some of the advanced tools that are available related to JavaScript development as well as my suggestions for various websites, blogs, and other programmers that all Javascript developers should be following online.

Getting Started with JavaScript: Beginner’s Resources

Tom — Mon, 25 May 2009 09:00:47 +0000

Over the past few years, JavaScript has become the language of the web. Because of it, web applications have begun to blur the lines between desktop software and web-based software. As such, it is becoming more and more of a requirement for web-based software developers to understand client-side development and the JavaScript language. Of course, JavaScript is not without its pitfalls. Amazing things can be done with the language and modern browsers, but it’s also important to understand some of the problems that arise when developing JavaScript applications.

In the next series of articles, I’m going to be highlighting various resources to help you get started learning JavaScript, its relationship to the document object model, and various websites, tools, and books available to help get you up to speed on the language and technologies surrounding it.

MDC: The DOM & JavaScript

In order to build effective client-side applications, it’s not only important to understand the JavaScript language, but to understand the document object model, as well. The DOM & JavaScript article serves as a primer on the document object model, and how its interface is exposed such that JavaScript can manipulate it. This is a good place to start if you’re absolutely brand new to programming for the web.

W3Schools: JavaScript & Ajax

For years now, W3Schools has been the reference for all technologies web-related. Their JavaScript tutorial provides an excellent introduction and point of reference for anyone that is just getting started with JavaScript. The site also covers information on events and their compatibility across Firefox and Internet Explorer.

When you’ve got a handle on JavaScript functions, events, and objects, it’s then worth understanding Ajax. Once again, W3Schools provides a good introduction to Ajax. The site explains what Ajax is, the XmlHttpRequest object, how it’s used, and how JavaScript utilizes the object to make asynchronous requests to provide for dynamic applications.

Stack Overflow: JavaScript

While working with JavaScript (or any language, for that matter), you’re going to have questions. It’s rare that your JavaScript code will work correctly across all of the major browsers during your first pass over the code. Whenever problems arise, or you’re unsure of how to accomplish something using JavaScript, Stack Overflow’s JavaScript community is the best for getting intelligent, working answers to your questions extremely fast.

Head First JavaScript

Although the web provides countless resources when it comes to JavaScript, there are several books available that also serve as good places to begin for learning the language. The Head First series from O’Reilly has been successful and introducing numerous concepts (those computing-related, and those not) in their non-traditional way. Head First JavaScript is another really good resource if you have little-to-no JavaScript experience.

Notepad++

As past articles have shown, I’m a big fan of Notepad++. For large-scale JavaScript applications, there are tools out there that are more aptly suited to the job, but if you’re just getting started, Notepad++ provides all that you need in order to begin writing JavaScript. Although any text editor will do, Notepad++ is lightweight, and it’s interface and syntax highlighting make it a really good candidate for beginning to intermediate client-side development.

In the next article, I’ll discuss various tools and resources that are geared more towards advanced, large-scale JavaScript development. I’ll also provide links to several blogs and developers on Twitter that I recommend following.

Navigation & Searching (Chrome got it right)

Tom — Mon, 11 May 2009 09:00:23 +0000

When it comes to web browsers, it seems as if there is one thing that is consistently inconsistent: the address bar. Each browser has its own philosophy on how powerful that single text box should be. For example, Internet Explorer views it as nothing more than a place for a URL. If it fails to find the site, it funnels it through Live Search. Similarly, if Opera fails to find the requested, it attempts to guess the correct address.

Out of all the browsers, my favorite utilization of the address bar is Google Chrome’s omni bar. First, I really like the paste and go feature.

I know that it’s really simple, but it makes so much sense I can’t help but wonder why other browsers didn’t implement it sooner. After all, if you’re pasting a URL into the address bar, what else are you going to do other than attempt to navigate to the site?

Secondly, when your goal is to index the world’s information and a web browser is the threshold to said goal, then you bring something new – like paste and search - to the table.

If you’re trying to find something online but don’t have a specific destination, then you’re going to search google for it (anyone who says otherwise is only kidding themselves). When your primary service is search and you’re building a web browser, then the application should inherently support your purpose.

I know Google Chrome has been out a while and maybe these two features seem ridiculously simple. Over the past few months, though, I’ve gotten to the point where it’s hard to imagine a browser without them. When something is done right, it’s hard to imagine why it wasn’t done sooner in the first place.

The problem with jQuery, hide(), Safari, and Chrome

Instant Code Reviews via Instant Message

Tom — Mon, 04 May 2009 09:00:07 +0000

With the exception of sites such as Refactor My Code, it’s difficult to actually review the code that goes into your personal projects. As you develop your projects, you begin to adopt your own set of conventions, styles, and other little idiosynchrasies that ultimately become your own personal standards.

On the other hand, in a team-oriented environment, each person will bring their own set of standards to the table. Permitting that the developers actually care about good software engineering, coding standards will begin to emerge. Conventions for organizing the code, defining classes, naming methods and variables, and other best practices begin to form. At that point, it’s not unusual for some type of review process to arise to help enforce the standards.

When it comes to development, code reviews are useful for a number of reasons. Getting more than one pair of eyes on the code is beneficial in that potential problems can be exposed, opportunities for improvement may be found, architecture improvements (such as design patterns) may be discovered, and so on. Aside from all of this, code reviews can also be useful in helping to enforce conventions.

There’s a number of way to conduct reviews, too. Projectors, pair programming, email – there’s no single correct way to do code reviews. At work, one way that my team and I have recently begun to conduct them has ended up contributing to architecture improvements, convention enforcements, and quick design decisions all with near immediate feedback.

We’ve begun using the group chat feature of our office IM client to discuss aspects of our code during development. This doesn’t replace our current code review process, but it definitely enhances it. IM is perfect for supporting the review of properties, short methods, or small blocks of code.

By including everyone involved on the project in the group chat and pasting in these blocks of code for review, we get multiple sets of eyes on the code, near immediate feedback on ways to improve, change, or just acceptance of the code. Not only does this help in the midst of development, but it also helps improve the overall code review process because the code that’s going out for review has already received at least one level of review.

Obviously this is nothing ground breaking, but the idea of discussing code via IM is so simple that I wish we had thought of it sooner. It provides a quick outlet for discussion on small areas of code all of which ultimately contributes to the overall component of the application and the formal code review process.

If you and your team do code reviews, how do you do it?

No related posts.

My Thoughts on 960gs

Tom — Mon, 27 Apr 2009 09:00:53 +0000

Over the past few years, grid-based layouts have become increasingly popular in web design. The trend has grown with good reason – grids support organized relationships among page elements, help leverage whitespace to an advantage, and contribute to creating a consistent look and feel across the pages that compose a site or application.

Though there are numerous frameworks and tools available to help with prototyping grid-based layouts, the 960 Grid System, or 960gs, is my preferred framework. Through the use of a set of predefined styles as well as a set of optional stylesheets and tools, 960gs seeks simplify the web development process by making it exceptionally easy to put together a grid-based design.

The Advantages

960gs’ primary container is based on a width of 960px. Since all modern browser resolutions support dimensions of at least 1024×768 and since 960 is easily divisible by a wide array of numbers (2, 3, 4, 5, 6, 8, and many, many more), the framework is based on an extremely flexible foundation. 960gs comes in two variations of columns each of which support a variation in sub-columns that are contained in 960px container. The first variation, the 12 column grid, is divided into 60 pixel wide columns:

The alternative 16 column grid is divided in 40 pixel wide columns. Both variations feature 10 pixel margins on each side of every column. For added flexibility, the variations can be used separately or together. Columns are created within the framework by using a set of classnames that are defined in the 960gs.css stylesheet.

The various column widths and arrangements are accomplished by declaring certain classnames as defined by the framework. Examples are available in the github repository as well as in the framework’s distribution.

In addition to the framework, 960gs ships with Eric Meyer’s popular reset.css file and a text.css file both of which help to standardize font and element sizes, margins, paddings, etc. These files are useful when it comes to building pages that seek to support a variety web browsers as they help to neutralize the inconsistencies by giving you a uniform foundation on which to base your styles.

Additionally, 960gs includes a PDF file featuring a grid for ease of printing, templates for popular applications such as Illustrator, Photoshop, and Visio, and well as an example of how to use the framework.

Things to Consider

Though 960gs is designed for rapidly building prototypes, it also works well in a production setting. Of course, there are some purists out there that will want to avoid using 960gs in production since including the framework adds overhead to each page.

Often times, developers prefer to have total control over their CSS and will want to avoid using any libraries beyond their own personal code. Not only does it make it easier to diagnose various issues that arise, but it also leaves nothing abstracted away from the construction of the page.

The framework also requires that you utilize classnames such as grid_7 or grid_10 in order to manage the columns that compose the layout. These classnames obviously have no meaning outside of the context of the framework. This makes it easy to customize various aspects of the element’s using your owns as you’re not likely to give your own styles such generic names; however, this also prevents your markup from giving full semantic meaning to its data.

Another caveat is that the framework is flexible only within the context of the features that it offers. For example, 960gs does not support elastic or liquid layouts. Though, there are alternative solutions for fluid or elastic, grid-based layouts.

Why I’m a Fan

The flexibility that comes with being able to mix and match the variations of the grid system matched with the speed at which a basic layout can be generated is also a huge plus. Incorporating the included reset.css and text.css helps to facilitate developing custom styles that are more likely to translate well across the major browsers than without them.

Although some control is lost whenever utilizing a framework like this, I’ve found 960gs does a good job of staying at of your way. If a problem arises with respect to various stylesheets, I’ve found that it’s really easy to diagnose the root of the problem without stumbling around the abstractions the framework presents. Finally, grid layouts – although a little less forgiving when it comes to more flexible design issues – are helpful in making it easy to relationally organize the components of your page.

960gs is ideal for rapid prototyping, but I’ve been happy with deploying it in production environments. As mentioned, it will add additional overhead, but the compressed version of the framework weights about 3.5KB so for most modern websites and audiences it’s not a deal breaker. Plus, with the ability to host files on various CDNs, bandwidth issues are not quite as significant as they once were.

Overall, I dig 960gs. Though it’s not applicable in every design situation, it does lend itself to a certain breed of layouts. Though it comes at a cost, the advantages far outweigh any additional overhead that may arise for a standard web-based project.

Assorted Development Tomfoolery | Tom McFarlin

Configuring Apache for WordPress, Permalinks, and no more 404’s

Related Posts

I’m done with this

Related Posts

How to passively track file downloads

Applications Used

Database Setup

Write Some PHP

From client to the server and back

Download Demo Files

Related Posts

Benchmarking JavaScript’s for and jQuery’s each()

Setting It Up

The Actual Test

The Not-So-Surprising Results

My Thoughts

Further Reading

Related Posts

Getting Started with JavaScript: Books, Sites, Tools, & Twitterers

JavaScript: The Good Parts

JSON

Ajaxian

Smashing Magazine | JavaScript

Six Revisions | JavaScript

Stack Overflow | JavaScript

Google V8

Notable Twitterers

Related Posts

Getting Started with JavaScript: Developer Resources

Debuggers

Firebug

Microsoft Script Debugger

Frameworks

jQuery

MooTools

Prototype

Obfuscators

JSMin

YUI Compressor

Related Posts

Getting Started with JavaScript: Beginner’s Resources

MDC: The DOM & JavaScript

W3Schools: JavaScript & Ajax

Stack Overflow: JavaScript

Head First JavaScript

Notepad++

Related Posts

Navigation & Searching (Chrome got it right)

Related Posts

Instant Code Reviews via Instant Message

Related Posts

My Thoughts on 960gs

The Advantages

Things to Consider

Why I’m a Fan

Related Links

Related Posts