@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 *

<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.

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

<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

<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

<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

<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)

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.

Enjoy!

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:

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:

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.

<br /> $my_string = “This string\n”;<br /> $my_string .= “spans multiple\n”;<br /> $my_string .= “lines.\n”;<br />

Thankfully, PHP has the benefit of heredoc syntax, which makes code like this much easier to read, write and maintain:

<br /> $my_string = <<<MYSTRING<br /> This string<br /> spans multiple<br /> lines.<br /> MYSTRING;<br />

E4X

But what about JavaScript? There is no native heredoc support, but there are some other workarounds that can be used. The first I’ll offer up is ECMAScript for XML (E4X).

<br /> var myString = ” + <myString><![CDATA[This string<br /> spans multiple<br /> lines.<br /> ]]></myString>;<br />

The first line in the above example is a bit confusing. The XML will return an xml object by default, but what we want is a String. We can type the return as a String by concatenating to an empty string ('').

Next, an element must be wrapped around the CDATA to trigger the XML parser. This step is similar to PHP’s heredoc syntax in that it requires an identical beginning and ending identifier.

You can test this yourself in the lab.
Currently, it looks like only Gecko browsers (such as Firefox and Camino) support E4X. This obviously doesn’t include Internet Explorer, which is (unfortunately) often a large portion of most websites’ user bases. While this workaround is interesting, it’s definitely not realistic to assume all of your users are using Firefox, despite its rising popularity (also, it will fail to validate).

Hidden Element Hack

Another workaround I’ve seen is to place the string inside of an element (often hidden from view) and to read it in via JavaScript. Here’s an example:

<br /> /* Based on this markup:<br /> <div id=”multilines” style=”display: none;”><br /> This string<br /> spans multiple<br /> lines.<br /> </div><br /> */<br /> var myString = document.getElementById(’multilines’);<br />

This solution is clever, but definitely a hack job: not very clean, and with a bad accessibility case. The primary issue though is that it doesn’t completely solve the problem. Markup is needed to interact with the JavaScript code, so to use this solution one couldn’t maintain a completely independent .js file.

Escaping linebreaks

Another solution is very simply just to escape line breaks:

<br /> var myString = “This string\<br /> spans multiple\<br /> lines.”;<br />

By escaping the linebreak, you’re free to continue the string on the next line (note: this doesn’t include spaces, so if you want to separate words, you’ll need to begin each new line with a space). This solution is not as attractive as the E4X workaround, but has the benefit of being perfectly cross-browser compatible. Therefore, it looks like it’s currently the best method available.

Do you know of any other workarounds? If so, please let me know in the comments section.

<br /> myArray.push(thevalue);<br />

Easy stuff. What’s unfortunate, though, is when the questions are a bit more involved, and these developers have already searched around a bit and found lousy code to read and learn from. The problem is that there’s much ancient, awful JavaScript code out there, and when performing simple search queries, these sites come up. My goal is to improve this process.

One common topic is that of cookies. Dealing with cookies is really basic stuff, but hey, that’s what the novice category is for. So here’s a simple script to assist with managing cookies:

<br /> /**<br /> * Global cookies object to manage cookies<br /> * @return {Object} The exposed methods<br /> * @public<br /> */<br /> var cookies = (function() {</p> <p> /**<br /> * Gets a cookie’s value<br /> * @param {String} name The name of the cookie to get<br /> * @return {String} The cookie’s value, or false if it can’t find the cookie<br /> * @member cookies<br /> * @public<br /> */<br /> var get = function(name) {</p> <p> var cookie = document.cookie,<br /> end,<br /> pre = name + ‘=’,<br /> begin = cookie.indexOf(’; ‘ + pre);</p> <p> if (begin == -1) {<br /> begin = cookie.indexOf(pre);<br /> if (begin !== 0) return false;<br /> } else {<br /> begin += 2;<br /> }</p> <p> end = document.cookie.indexOf(’;', begin);<br /> if (end == -1) end = cookie.length;</p> <p> return decodeURIComponent(cookie.substring(begin + pre.length, end));</p> <p> };</p> <p> /**<br /> * Removes a cookie that has already been set<br /> * @param {String} name The name of the cookie to remove<br /> * @param {String} path The path of the cookie to remove<br /> * @param {String} domain The domain of the cookie to remove<br /> * @member cookies<br /> * @public<br /> */<br /> var remove = function(name, path, domain) {</p> <p> var cookie = name + ‘=’;</p> <p> if (!get(name)) return;<br /> if (path) cookie += ‘; path=’ + path;<br /> if (domain) cookie += ‘; domain=’ + domain;<br /> cookie += ‘; expires=Thu, 01-Jan-70 00:00:01 GMT’;</p> <p> document.cookie = cookie;</p> <p> };</p> <p> /**<br /> * Tells the browser to set a cookie<br /> * @param {String} name The name of the cookie to set<br /> * @param {String} value The value to set in the cookie<br /> * @param {String} expires The date that the cookie expires (must be a valid date string)<br /> * @param {String} path The path of the cookie to set<br /> * @param {String} domain The domain of the cookie to set<br /> * @param {Boolean} secure Whether to make the cookie secure or not<br /> * @member cookies<br /> * @public<br /> */<br /> var set = function(name, value, expires, path, domain, secure) {</p> <p> var cookie = name + ‘=’ + encodeURIComponent(value);</p> <p> if (expires) cookie += ‘; expires=’ + expires.toGMTString();<br /> if (path) cookie += ‘; path=’ + path;<br /> if (domain) cookie += ‘; domain=’ + domain;<br /> if (secure) cookie += ‘; secure’;</p> <p> document.cookie = cookie;</p> <p> };</p> <p> return {<br /> get : get,<br /> remove : remove,<br /> set : set<br /> };</p> <p>})();<br />

You can download this script below:

• [Download cookies.js] (2,160 bytes)
• [Download cookies-min.js] (634 bytes; compressed)

Also, PPK has an in-depth article about cookies. His code examples get the job done, but unfortunately create too many functions in the global scope (which, as we all know, should be avoided).

The Script

<br /> var loadCSS = function(file) {<br /> var link = document.createElement(’link’);<br /> link.href = file;<br /> link.rel = ’stylesheet’;<br /> link.type = ‘text/css’;<br /> document.getElementsByTagName(’head’)[0].appendChild(link);<br /> };</p> <p>var loadJS = function(file) {<br /> var script = document.createElement(’script’);<br /> script.src = file;<br /> script.type = ‘text/javascript’;<br /> document.getElementsByTagName(’head’)[0].appendChild(script);<br /> };<br />

Example 1 – JavaScript

First let’s load up a JavaScript file. Here’s what the external JS file looks like:

<br /> alert(’Loaded!’);<br />

And by using the above script, loading it is easy:

<br /> loadJS(’/assets/misc/dynamic-load/example-1.js’);<br />

Load JS file

Example 2 – CSS

Loading CSS is not much different. Here are the contents of the external CSS file:

<br /> body {<br /> border: 3px solid red;<br /> }<br />

Note that you can also use relative URLs or even files on another server:

<br /> loadCSS(’http://scriptnode.com/assets/misc/dynamic-load/example-2.css’);<br />

Load CSS file

This has been tested and works in all of the standard browsers including
Firefox, Chrome, Internet Explorer, Opera and Safari.

Many JavaScript libraries support the evaluating of data returned via XHR. Some, like YUI, do not (yet). In other cases, folks have rolled their own “AJAX library” but still want this behavior. The below script supports searching HTML for scripts and evaluating them:

<br /> /**<br /> * Evaluate the passed content for <script> tags<br /> * @param {String} html The string to parse<br /> */<br /> var evalHTML = function(html) {</p> <p> var piece,<br /> res = html.split(/<script/);</p> <p> res.shift();</p> <p> for (var i = 0, len = res.length; i < len; i++) {</p> <p> (piece = res[i].split(/>/)).shift();</p> <p> try {<br /> eval(piece.join(’>').split(’</scr’ + ‘ipt>’).shift());<br /> } catch (e) {}</p> <p> }</p> <p>};<br />

You can execute some examples yourself below:

<br /> // Example 1 – script inside of a div<br /> evalHTML(’<div><scr’ +<br /> ‘ipt>alert(”Hello, JavaScript!”);</scr’ +<br /> ‘ipt>’);<br />

Execute example 1

<br /> // Example 2 – script sets a global variable then displays it<br /> evalHTML(’<scr’ + ‘ipt>var foo = “bar”;</scr’ +’ipt>’ +<br /> ‘<scr’ + ‘ipt>alert(foo);</scr’ +’ipt>’);<br />

Execute example 2

• [Download eval.js] (376 bytes)
• [Download eval-min.js] (214 bytes; compressed)

Update 9/28/08: Fixed a bug thanks to Isaac Schlueter (see comments).