Category: Web Development

When developing a web form, it’s always nice to provide users with the instant feedback of invalid form fields that you get with Javascript client-side form validation. However, some users may not have Javascript enabled and therefore you must have server-side form validation no matter what. This often results in two sets of form validation code for the same form. To simplify your code and maximize code reuse, you can use jQuery Tools Form and power your client-side form validation use your server-side validation rules. Following is an example:

Continue reading Javascript Client-Side Form Validation Using Server-Side Form Validation

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed. The special thing about a callback is that functions that appear after the “parent” can execute before the callback executes. Another important thing to know is how to properly pass the callback. This is where I have often forgotten the proper syntax.

Callback without arguments

For a callback with no arguments you pass it like this:

[cc lang=”javascript”]
$.get(‘myhtmlpage.html’, myCallBack);
[/cc]

Note that the second parameter here is simply the function name (but not as a string and without parentheses). Functions in Javascript are ‘First class citizens’ and so can be passed around like variable references and executed at a later time. Continue reading Javascript Callbacks and Functions

Most people are used to seeing their code run sequentially but with Javascript, some code runs asynchronously. This can produce some confusing results. There are 2 cases when code would run asynchronously:

1. when making an AJAX call, e.g. $.ajax, $.getJSON, $.getScript, etc
2. when an “event” occurs, e.g. on load, on click, on blur, etc

In the first case, if you make an AJAX request, that initiates an http request which may take some time to complete. Here’s an example:

[cc lang=”javascript”]
var a = 0;

$.getJSON(‘somefile.json’, function(data)  {
a = 2; // this block of code executes on success and is the same as the following “success” callback
}
.success(function(data) {
a = 2;
})
.error(function() {
a = 3;
})
.complete(function() {
a = 4;
});

console.log(a);
[/cc]

Continue reading Asynchronous Javascript / Order of Execution

Recently, I need to write a script that depended on JSON. While I tried to remove whitespace where not needed, I missed one space and apparently that broke my code. I found out about it using JSONLint which is a nice tool for testing your JSON code.

[cc lang=”javascript”]
// load jquery UI CSS theme
$(“head”).append(“”);
var css = $(“head”).children(“:last”);
css.attr({
rel: “stylesheet”,
type: “text/css”,
href: “//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/themes/smoothness/jquery-ui.css”
});

// load jquery UI and if available, run autocomplete
if (typeof jQuery().ui === ‘undefined’ || jQuery.ui === null) {
$.getScript(“//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.19/jquery-ui.min.js”, function() {
loadJobTitles();
});
}
else {
loadJobTitles();
}
[/cc]

Managing a scalable and high availability website is a lot of work and expensive. That’s why many startups get started with cloud-based web hosting like Amazon Web Services, which proved to be very scalable for Instagram. But, it can still be a bit expensive when you’re not sure your app with take off. PHPFog is a similar scalable PHP web hosting service that is cheap and looks like a good alternative when you’re just getting started. Check it out at

https://www.phpfog.com/pricing

[cc lang=”html”]
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;

border-bottom: 5px solid black;
}

.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;

border-top: 20px solid #f00;
}

.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;

border-left: 60px solid green;
}

.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

border-right:10px solid blue;
}

[/cc]

and here are a bunch of other CSS shapes

http://www.cssportal.com/css3-shapes/

or just use this CSS Triangle Generator

http://apps.eky.hk/css-triangle-generator/

Set up your email message with text/html boundaries as follows:
[cc lang=”php”]
–$boundary
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 8bit

Text email content goes here

–$boundary
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 8bit

HTML email content goes here

–$boundary–
[/cc]

Let’s say the message above is in the variable $message.

Set headers and send email.

[cc lang=”php”]
$boundary = uniqid(“”, true);
$additional_headers = “Mime-Version: 1.0rn”;
$additional_headers .= “Content-Type: multipart/alternative; boundary=$boundary” . “rn”;

mail($to, $subject, $message, $additional_headers, $additional_parameters);
[/cc]

If the user’s email client supports HTML, it will show the HTML version, otherwise, it’ll show the text version.

Let’s say you have a PHP script called message.php with the following contents:

[cc lang=”php”]
Hello, $name;
[/cc]

You can evaluate this code by reading it into a variable as using the eval() function as follows:

[cc lang=”php”]
$name = “David”;
$fh = fopen(“message.php”, ‘r’);
$message = fread($fh, filesize(“message.php”));
eval(“$message = “$message”;”);
echo $message; // prints Hello, David
[/cc]

[cc lang=”php”]
foreach($_POST as $name => $value) {
$$name = trim($value);
}
[/cc]