Tabs are more flexible

When code is using spaces for indentation, the viewer is rigidly locked into viewing the code with that exact format. Some programmers might want to see indentation as two spaces, others might want four. These are both reasonable requests, and it should be trivial to satisfy both requirements.

It’s very simple for almost any editor to display a tab at whatever width the user desires. Spaces do not provide the ability to do this. Therefore, tabs are more appropriate.

Tabs have semantic meaning

When referring to indentation, a tab is the perfect representation. A space is typically a separator between words, sentences, punctuation, variables, operators or other list items. It can be many different things, but typically is just a buffer to allow similar items to breathe. When placing a dozen or so of these in front of a line of code, you’re separating separators with other separators, which isn’t useful.

When using tabs instead, not only are there less characters being used, but a tab is also representing an indentation, which makes perfect semantic sense.

“But tabs mess up multi-line assignments!”

This is a common complaint that I hear about tabs. Here’s an example of what this means:

<br /> var foo = ‘bar’;<br /> var a_really_long_foo = ‘bar’;<br /> var another_foo = ‘bar’;<br />

The complaint is that when formatting code like this, tabs viewed at two spaces look one way and tabs viewed at four spaces look a completely different way. What really blows my mind about this argument is that spaces are actually appropriate for this format and it’s such a trivial thing to hit space instead of tab when formatting your code like this. That’s not much of a compromise.

“But I want people to see my code the way I want them to see it!”

Then you’re selfish. Please realize this. Would you insist on whoever’s reading your code to use a specific syntax highlighting color scheme? Of course not. If for some reason you like tiny fonts, would you insist that those with poor eye sight view your code in the same format? I really hope not. When freedom or strict, arbitrary rules are your two choices, I really hope you’ll appease everyone involved and see the light.

Consider the extremes

If you care at all about this discussion, then I’m guessing you’ve worked with programmers before. You know that they tend to be intense, obsessive people, often with preferences that seem weird to others. I’ve heard of some programmers preferring as low as one character indentation, and others who prefer up to eight. See how different that looks:

One character indentation

<br /> if (obj) {<br /> for (i in obj) {<br /> if (obj[i]) {<br /> obj[i]();<br /> }<br /> }<br /> }<br />

Eight character indentation

<br /> if (obj) {<br /> for (i in obj) {<br /> if (obj[i]) {<br /> obj[i]();<br /> }<br /> }<br /> }<br />

You might not prefer either extreme, but try to remember that we’re not all the same. We each have our own, often bizarre preferences. Tabs ensure that everyone is happy.

Summary

We discussed why tabs are the correct choice and spaces are incorrect. Tabs are flexible and give each reader the ability to view them the way s/he chooses. They also have semantic meaning that can be useful for a myriad of reasons.

So please keep this in mind when making a decision on your codebase: spaces are rigid and uncompromising, meaning spaces are a selfish, stubborn choice. Tabs are flexible, which means tabs provide the freedom programmers need to view the code in their own format. Make the right choice!

@scriptnode

Should be:

@<href="http://twitter.com/scriptnode">scriptnode</a>

Which looks like:

@scriptnode

And here’s how to do it in PHP and JavaScript:

PHP

<br /> $text = preg_replace(’#@([a-z0-9_]+)#i’, ‘@<a href=”http://twitter.com/\\1″>\\1</a>’, $text);<br />

That was easy! Now let’s get to the more interesting JavaScript, which allows us to test inline!

JavaScript

<br /> text = text.replace(/@([a-z0-9_]+)/gi, ‘@<a href=”http://twitter.com/$1″>$1</a>’);<br />

You can run this code right here:

Format

I’m awful at regular expressions; please do let me know if I could optimize somewhere or if I missed something.
Edit: + instead of *

Funny stuff! But all kidding aside, I personally feel like PHP was ugly enough without goto. To me, one of the language’s biggest downfalls has always been that it practically encourages sloppy design, and this is a huge step in the wrong direction. How do you feel about it?

(Link via Isaac Schlueter)

And let’s just skip right past Internet Explorer and its plethora of headaches, shall we? We all know it sucks. Here’s why else it sucks to be one of us:

1. Everyone Thinks It’s Your Fault

   So you’re QA. You’re testing a website and something is broken. It looks to you like the frontend, because that’s what you see. What may separate good QA from excellent QA is the ability to determine where the error lies, but sometimes that’s out of QA’s scope.

   Regardless of who the owner is, chances are the issue will go to you first. You must then determine if it’s even your issue, and either fix it, or pass it on. Bringing us to …

2. You Are Also a Project Manager

   The frontend is the very last thing to get done. That’s because the design needs to be finished way in advance so that assets can be delivered, and the backend has to be complete before you have access to data to use in your implementation.

   This means that you must act as Project Manager to keep everyone else on track, because otherwise you can’t ever get to work! And that’s why …

3. You Always Seem Late

   Since you’re the last one that gets to begin implementing, chances are you’ve got less time than everyone else. And sometimes you can’t even get started until after your deadline! And even when you do finally get your assets and can get to it, sometimes …

4. You Must Know Photoshop

   To be fair, I actually use The Gimp, which works fine. What I mean by this point is that you must learn to use a competent image manipulation program. Why? Because although you may have an excellent design person/team, chances are they’re not going to cater to you and your crazy CSS hacks.

   You know what I mean. Sometimes you’re wanting to sprite your images to get better page performance, or sometimes you need to pull off some crazy rounded corners hack to get the positioning cohesive across browsers. You could go back-and-forth with design all day, or you could say “screw it” and alter the image yourself. It sucks but that’s how it gets done. And that’s part of …

5. You Must be a Jack-of-All-Trades

   In addition to competency with a decent image manipulation application, you’re going to need at least a familiarity in many other areas. It’s very rare to find a frontend engineer who doesn’t ever need to modify at least some server-side code.

   For example, although I am official a frontend engineer, I probably spend 30-50% of my time in PHP. That’s because, before I can even render the markup I need to tweak, I’ve got to setup the data I receive from the backend.

   Not to mention the various other tasks that randomly pop up in the webdev stack, such as Apache rewrite rules or cronjobs. I’m sure the same could be said for most jobs, but it seems like frontend engineers’ skillsets must be broader than most.

But it’s not all bad. Especially right now in Silicon Valley, frontend engineers are quite valuable, so it’s a great time to know how to code for the browser. Either way, did I miss something? Let me know!
]]> http://scriptnode.com/article/5-things-that-suck-about-being-a-frontend-engineer/feed/ 1 http://scriptnode.com/article/simple-loading-bar/ http://scriptnode.com/article/simple-loading-bar/#comments Mon, 03 Aug 2009 06:56:36 +0000 Matt Hackett http://scriptnode.com/?p=316 Haven’t had a Script Sunday for a while, so here’s a quick, simple script for you. Ever see those Loading … overlay images and wonder if JavaScript can handle it? Turns out it’s extremely simple:

<br /> animate = (function() {</p> <p> var busy;</p> <p> return function(id) {</p> <p> if (busy) return;</p> <p> busy = true;<br /> var width = 0;<br /> var interval = setInterval(function() {</p> <p> var el = document.getElementById(id);<br /> el.innerHTML = ‘@% <div style="width: @px;"><span>@%</span></div> <p>‘.replace(/@/g, width);</p> <p> if (width++ >= 100) {<br /> busy = false;<br /> clearInterval(interval);<br /> }</p> <p> }, 50);</p> <p> };</p> <p>})();<br />

You can view this by itself in the lab.

]]> http://scriptnode.com/article/simple-loading-bar/feed/ 0 http://scriptnode.com/article/jsql-javascript-query-language/ http://scriptnode.com/article/jsql-javascript-query-language/#comments Mon, 23 Mar 2009 06:12:20 +0000 Matt Hackett http://scriptnode.com/?p=286 About JSQL

When I started my new job, I had to make the transition from YUI to jQuery. I’d seen some jQuery code before (in fact, its terseness and use of $ as both an object and a function were easy to spot), but I wasn’t familiar with it. I actually thought that the query part of jQuery meant there was some kind of Standard Query Language interface. There isn’t, but there is a really cool CSS3 selector instead.

Turns out, I was a little disappointed; I wanted to use something query-based. So, I started to throw this script together. I call it JSQL. Below are some quick examples of what it looks like in action:

<br /> var results = JSQL(’SELECT * FROM #ft WHERE nodeName = “LI”);<br />

JSQL always returns an object with an error property that’s either Boolean false or a String stating what error occurred (for example, “Unknown command UPDAT3″). If it successfully retrieves or operates on elements, it returns a count:Number property with the number of elements and an elements:Array property with those elements.

Here are some interactive examples:

Example 1: Checkboxes

Option number 1

Option number 2

Option number 3

<br /> JSQL(’UPDATE #jsql-example-1 SET checked = true WHERE type = “checkbox”‘);<br />

Set Checked


<br /> JSQL(’UPDATE #jsql-example-1 SET checked = false WHERE type = “checkbox”‘);<br />

Uncheck

Example 2: Form Validation

First name:

Last name:

Email:

<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “error” WHERE value = “”‘);<br />

Highlight empty fields


<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “” WHERE value = “”‘);<br />

Reset

Example 3: Removing Elements

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<br /> JSQL(’DELETE FROM #jsql-example-3 WHERE nodeName = “STRONG”‘);<br />

Remove strong tags

In the spirit of jQuery, I also stuck in a quick each method which you can use to iterate through the returned elements immediately instead of setting up your own loop. The context is the current element (like jQuery) and the return value is still the same:

Example 4: Selecting Elements

Give him that gun. Give him ALL the guns.

<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ‘#ffff00′;<br /> });<br />

Select & Operate


<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ”;<br /> });<br />

Undo

I started coding this several months ago, and just recently decided to revisit it. I found the code hard to read myself when making some modifications before publishing it here. That typically means it’s poorly written. And I’m admittedly lousy at writing parsing code… so there’s that. I also doubt it’s realistic for any real-world websites (other libraries handle those jobs quite well), but I thought it would be fun to play with.

Some noticeable features lacking are equivalents to ALTER and INSERT INTO. I’ve also got it up on GitHub, so feel free to fork it, and maybe add those methods yourself!

• [Download jsql.js] (11k)
• [Download jsql-min.js] (3,661 bytes)
]]> http://scriptnode.com/article/jsql-javascript-query-language/feed/ 8 http://scriptnode.com/article/spacius-source-code/ http://scriptnode.com/article/spacius-source-code/#comments Tue, 10 Mar 2009 05:52:23 +0000 Matt Hackett http://scriptnode.com/?p=278 I’ve been meaning to “release” this for quite some time now, but I wanted to do it in small doses, with in-depth explanations of the code. Making a game can be somewhat overwhelming, but it’s just like any other large task: if you break it up into smaller pieces, it becomes much easier to manage.

But time is a commodity nowadays. I’ve got way less time to write, and when I do, I’d rather be writing code than tutorials (or honestly, playing video games). Sorry about that, but I hope the (well-commented!) source will help those of you out there who’d like to contribute to the slowly growing world of DHTML games.

You’ll notice that this code is over 6 months old. And I’m the kind of developer who constantly updates his style, methods and patterns. Given that, there may very well be many mistakes or bad practices in here, some of which I may have improved upon by now, but others maybe not. Either way, feel free to comment on them, and I’ll answer any questions as well.

Thanks for checking it out, and please be good to it. I’d love to know about any projects created with this source as a basis, and would appreciate links back here. Also please don’t claim it as your own, that’s not cool.

For now I am hosting the source code with GitHub.

Enjoy!

]]> http://scriptnode.com/article/spacius-source-code/feed/ 0 http://scriptnode.com/article/a-seemingly-snappier-user-interface/ http://scriptnode.com/article/a-seemingly-snappier-user-interface/#comments Wed, 14 Jan 2009 04:55:20 +0000 Matt Hackett http://scriptnode.com/?p=263

Say you’ve got a fancy user interface. You’re leveraging AJAX well, you’re making good use of best practices, and you’ve got fast servers that respond quickly.
But your user actions still aren’t quite as fast as you’d like. What else can you do?

If you’ve done things correctly, you’ve got a user interface that reacts positively to successful flows, but will also handle errors gracefully.
Even though you’re “doing it right,” consider restructuring your application: assume success. Normally, your server is up and running and operations
will be completely successfully. The edge case (hopefully) is the error case. Assuming this, we can create a slightly faster user interface.

Let’s begin with a basic voting mechanism. You’ve got a control on your page that lets a user vote on an object, and a small bit of text to represent the state of said control.
It may look something like this:

Vote
You haven’t voted yet

This example is meant to be easy and functional; hopefully your controls are prettier.
Regardless, here’s a common flow for this request and its callback states:

1. Listen for the click event on the control.
2. Send the request.
3. Display a “loading” message or a typical spinner image.
4. If the call comes back successfully, provide “success” feedback to the user and update the control.
5. If the call throws an error, provide an error message.

This flow is extremely common in today’s web. But we want something more immediately responsive, so let’s restructure the flow:

1. Use onmousedown because it will fire off just slightly sooner than onclick would.
   (This might not suit all user interfaces but in this case it’s fine, and it wins us a few milliseconds.)
2. Provide “success” feedback to the user and update the control.
3. Send the request.
4. If the call throws an error, reset the controls and provide an error message.

This structure might seem a little off. Indeed, the error case even “lies” to the user for a few milliseconds if the request fails.
But it covers all of its bases; none of the previous flow is omitted.
Keep in mind that the error case is the edge case, and a very large majority of the time it’s fine to assume success at first.

Using jQuery, here’s what the code might look like:

<br /> // Attach the mousedown event listener<br /> $(’#snappier-1-btn’).mousedown(function(e) {</p> <p> var el = $(this);</p> <p> // Go ahead and assume things went smoothly<br /> el.attr(’disabled’, true);<br /> el.next().html(’Voted!’);</p> <p> // Send the XHR<br /> $.ajax({<br /> error : function() {</p> <p> // Undo the success message and allow the user to repeat<br /> el.attr(’disabled’, false);<br /> el.next().html(”You haven’t voted yet”);</p> <p> // Let the user know what happened<br /> alert(”Sorry, an error occurred! Please try again.”);</p> <p> },<br /> type : ‘GET’,<br /> url : ‘/feed/’<br /> });</p> <p>});<br />

And here’s this flow working right here on the page:

Vote
You haven’t voted yet
]]> http://scriptnode.com/article/a-seemingly-snappier-user-interface/feed/ 3 http://scriptnode.com/article/common-php-equivalents-in-javascript/ http://scriptnode.com/article/common-php-equivalents-in-javascript/#comments Sat, 03 Jan 2009 09:04:45 +0000 Matt Hackett http://scriptnode.com/?p=245 It’s pretty widely known in the web development industry that server-side scripting is important, and PHP is an extremely common choice. Indeed, for many programmers it’s even their first language. It’s quite common for web devs to begin on the server, then later require some client-side interaction, at which point they must turn to JavaScript.

I often see questions similar to, “I’ve got these few lines of PHP code, how would I do this in JavaScript?” I’ve actually already answered a question like this, but I kept getting more questions, so I thought I’d cover many at once:

• Pushing to an array
• die() or exit
• include or require
• Redirection
• Static classes
• String manipulation

Pushing to an array

Pushing a new value to the end of an array is a common, trivial task. Here’s some PHP to accomplish this:

<br /> $my_array = array();<br /> $my_array[] = ‘a’;<br /> array_push($my_array, ‘b’);<br />

Also note this quick pointer from php.net’s array_push() documentation:

If you use array_push() to add one element to the array it’s better to use $array[] = because in that way there is no overhead of calling a function.

This isn’t the case in JavaScript. The native Array.push method is most optimal:

<br /> var myArray = [];<br /> myArray.push(’a'); // This is the way to go<br /> myArray[myArray.length] = ‘b’; // This method is possible but bad<br />

die() or exit

There has been much confusion regarding what JavaScript is and how it works in the browser. When looking for an equivalent to exit, one probably doesn’t understand that client-side JavaScript is a behavioral language that’s intended to react to events. In PHP, a script executes, stopping only when told to do so, and then it’s done. JavaScript lives and breathes on the page, reacting to the mouse being moved, keys being pressed and even time changing.

So it’s important to understand why this is not a fair equivalent, and that even asking for one shows a misunderstanding. That said, a bit of procedural JavaScript can be exited by using an anonymous function. Here’s some example PHP and then similar code in JavaScript:

<br /> if ($next_action == ‘exit’) {<br /> exit;<br /> }</p> <p>echo ‘Made it here!’;<br />

<br /> (function() {</p> <p> if (nextAction == ‘exit’) {<br /> return;<br /> }</p> <p> alert(’Made it here!’);</p> <p>})();<br />

While the language behavior is not one-to-one, taking advantage of JavaScript’s closure already has advantages, among them being able to easily exit a function via return.

include or require

There have been some arguments about this equivalence in JavaScript. Just like the previous example, this equivalence is not one-to-one and should be thought about in very different terms. That said, here is a quick example of including a PHP file within a PHP script:

<br /> // Nothing to it, just include the file:<br /> include(’my_file.php’);</p> <p>// This code will only execute after my_file.php has been included:<br /> echo ‘File included!’;<br />

To include an external script in JavaScript, writing a method or including a library is definitely best. I wrote about this once, but there are libraries such as YUI that have better support with more options. Here’s what this would look like using YUI:

<br /> // Call YUI’s method<br /> var objTransaction = YAHOO.util.Get.script(”http://example.com/my_file.js”, {<br /> // This function will only fire after my-file.js has been included:<br /> onSuccess : function() {<br /> alert(”File included!”);<br /> }<br /> });<br />

Redirection

This one is easy and straightforward. A redirect is accomplished with PHP’s header() function:

<br /> header(’Location: http://example.com’);<br /> exit; // Not necessary but a good practice<br />

Also very simple in JavaScript:

<br /> location.href = ‘http://example.com’;<br />

Static classes

In PHP, it’s a pretty common programming pattern to use a static class for encapsulation, sort of namespacing some methods and properties. Here’s an example:

<br /> class Tools {</p> <p> public static function check_stuff() {<br /> return true;<br /> }</p> <p>}</p> <p>echo Tools::check_stuff();<br />

For this JavaScript equivalence, it probably makes the most sense to use an object literal:

<br /> Tools = {<br /> checkStuff : function() {<br /> return true;<br /> }<br /> };</p> <p>alert(Tools.checkStuff());<br />

String manipulation

String manipulation is absolutely mandatory in most applications. Fortunately, it’s a breeze thanks to PHP’s fantastic string functions:

<br /> // Replace portions within a string<br /> echo str_replace(’Hey’, ‘Hi’, ‘Hey there’); // outputs “Hi there”</p> <p>// Capitalization<br /> echo strtolower(’Hey there’); // outputs “hey there”<br /> echo strtoupper(’Hey there’); // outputs “HEY THERE”</p> <p>// Get a portion of a string<br /> echo substr(’Hey there’, 0, 2); // outputs “He”</p> <p>// Get rid of extraneous whitespace<br /> echo trim(’     Hey there     ’); // outputs “Hey there”<br />

Each of these have perfect equivalents except for trim(), which we need to implement ourselves:

<br /> // Replace portions within a string<br /> alert(’Hey there’.replace(’Hey’, ‘Hi’)); // outputs “Hi there”</p> <p>// Capitalization<br /> alert(’Hey there’.toLowerCase()); // outputs “hey there”<br /> alert(’Hey there’.toUpperCase()); // outputs “HEY THERE”</p> <p>// Get a portion of a string<br /> alert(’Hey there’.substr(0, 2)); // outputs “He”</p> <p>// Get rid of extraneous whitespace<br /> trim = function(txt) {<br /> return txt.replace(/^\s+|\s+$/g, ”);<br /> };</p> <p>alert(trim(’     Hey there     ’)); // outputs “Hey there”</p> <p>

Or, we can augment the String global so that strings will have this method natively:

<br /> String.prototype.trim = function() {<br /> return this.replace(/^\s+|\s+$/g, ”);<br /> };</p> <p>// Get rid of extraneous whitespace<br /> alert(’     Hey there     ’.trim()); // outputs “Hey there”<br />

While not all of these equivalents are smooth (or even recommended), it’s typically helpful when learning a new language to have it compared to a language one is already familiar with. If you can think of any other common PHP tasks that have relatively similar equivalents in JavaScript, please let me know in the comments.

]]> http://scriptnode.com/article/common-php-equivalents-in-javascript/feed/ 3 http://scriptnode.com/article/php-to-use-backslash-as-namespace-separator/ http://scriptnode.com/article/php-to-use-backslash-as-namespace-separator/#comments Sun, 26 Oct 2008 21:23:52 +0000 Matt Hackett http://scriptnode.com/?p=235 After much debate, the minds behind PHP have made an important decision. The good news is, PHP will support namespaces. The (arguably) bad news is, the namespace separator will be the backslash character.

Here’s a simple example of what this will look like:

<br /> $object_instance = new My\PEAR\Module(’myvar’);<br />

PHP 5 already already has its criticisms. The developers looked at many different options, including **, ^^, %%, :>, :) and :::, but eventually decided on \, which is an odd decision, given that it doesn’t remotely resemble its cousins. In fact, it most closely resembles directories in MS-DOS or other Windows features.

The argument was also made that current operators such as :: or -> could have been used, but they already had other duties. The argument doesn’t go far, however, because PHP of course uses the backslash character for escaping.

]]> http://scriptnode.com/article/php-to-use-backslash-as-namespace-separator/feed/ 2