Google JavaScript Style Guide:

Style guidelines for JavaScript developers written by Google team

Link to Google JavaScript Style Guide.

jsFiddle:

This is an Online Editor for the Web. With this editor you can write JavaScript, use some popular frameworks(MooTools, jQuery, Prototype, YUI, Glow and Dojo) and also you can edit HTML and CSS.

Link to jsfiddle.

jsPerf, JavaScript performance playground:

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

Link to jsperf.

Mozilla:

Dedicated section to the JavaScript language itself, the parts that are not specific to Web pages or other host environments.

Link to Mozilla JavaScript guideline.

Haskell and JavaScript:

Great article about Haskell Functions for JavaScript and a library, by Ariel Flesler.

Link to Haskell JavaScript Functions for JavaScript.

Bonus:

w3schools:

In the w3schools we can find a JavaScript and HTML DOM Reference. It also has an Online Editor, so you can try what you are reading.

Link to w3schools reference.

JavaScript’s appendChild and the Mythical prependChild:

A nice article about the JavaScript’s appendChild() and the Mythical prependChild().

Link to the article JavaScript’s appendChild and the Mythical prependChild.

Creating a plugin:

The first step is to create a folder at “/wp-content/plugins/”, for example, called “custom-admin”. Save this file inside of the folder and call it custom-admin.php. This file must contain the next code at the begining:

This is the “header” and provides information about the plugin to be viewed on the Plugin Panel. It provides the name, URI of the plugin, the description, author, and version. Now we have the plugin and we have to activate it from the admin panel like any other plugin. And we ready to start developing our plugin.

Custom footer

Now that we are ready to start customazing the dashboard let’s start with something easy, for example, think about adding your own footer. If you want to modify the text you should add a function like this:

function custom_admin_footer() {
   echo 'This theme was made by Mr. WordPress.';
}

add_filter('admin_footer', 'custom_admin_footer');

This will replace the default Thank you for creating with WordPress. | Documentation | Feedback wordpress admin footer.

Menu Items

Now, we are going to remove some items from the admin menu with the remove_menu_page() function:

This snippet remove the Links Manager and Tools menu items, and if you want to remove another item, you should change the parameter with the slug of the menu (typically the name of the PHP script for the built in menu items; example: edit-comments.php).

Dashboard widgtes

Another thing that we can do is removing the default dashboard widgtes remove_meta_box():

function custom_admin_remove_dashboard_widgets() {
	remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
	remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'side' );
} 

add_action('wp_dashboard_setup', 'custom_admin_remove_dashboard_widgets' );

This snippet will remove the quick press and the incoming links widget in the home page of the dashboard. Also, we can add a custom widget if you want:

function custom_admin_dashboard_widget_function() {
	// Display whatever it is you want to show
	echo "Hello World, I'm a great Dashboard Widget";
} 

// Create the function use in the action hook
function custom_admin_add_dashboard_widgets() {
	wp_add_dashboard_widget('custom_admin_dashboard_widget', 'Example Dashboard Widget', 'custom_admin_dashboard_widget_function');
} 

// Hook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'custom_admin_add_dashboard_widgets' );

You can find more info in the Dashboard Widgets API page.

Custom CSS for the dashboard

Another useful tip is adding a custom CSS file for the admin panel. This will let you override the default styles of the wordpress dashboard. Here is an example of how you can do it:

function custom_admin_css() {
  echo site_url() . "/wp-content/plugins/custom-admin/custom-admin.css";
}

add_action('admin_head','my_wp_admin_css');

This will add a CSS file at the end of the head tag in the HTML, make sure that path is ok for you.

Custom admin based on roles

To finish this post I will show you how you can do different actions depending on the user role. As you know, WordPress uses a concept of Roles, designed to give the blog owner the ability to control and assign what users can and cannot do in the blog. So, we can extend this feature, adding or removing menu items, widgets, css and other stuff. For this, the first step is check the user role. For this example, I will only check if the user has an ‘administrator’ role with the function “current_user_can()”:

In the previous code, we are added a custom widget only if the user is not an administrator. Obviusly this bring us a lot of capabilities to customize the dashboard if you want users with differents roles have some custom widget or only some items in the menu. This is what you need. As I wrote at the begining, WordPress is a very flexible CMS and we put our own limits.

One of them is the Placeholder attribute, which works exactly as my snipet(well, my snipet add an extra class to the input when get focus, but that is not always necessary). If your browser support HTML5 you can test it here:

Apart of this one, there are other new great features in HTML5 that I going to talk about in the future, as I think that HTML5 help making easy many task that ussualy were more complex and required the use of HTML, CSS and JavaSctip. Meanwhile you can start checking some of them in w3schools.

Strings and Regular Expressions:

Regular Expression is not something exclusive of JavaScipt. You can use it in many languages and it provides a concise and flexible means for matching strings of text, such as particular characters, words, or patterns of characters.

A regular expression, often called a pattern, is an expression used to perform pattern-matching and “search-and-replace” functions on text. At first it seems to be very complex, but is very helpful, so is important learn how to use it. Luckily, JavaScript has several global functions that you can use when you have to work with strings. These are just some of then:

string.search(regexp)

The search() method, as its name says, searches for a match between a regular expression and a string and will returns the position of the match, or -1 if no match is found. 

var theString = “search me”
document.write(theString.search("me"));  //output: 7

string.substr(start,length)

The substr() method extracts the characters from a string, beginning at “start” and through the specified number of character, and returns the new sub string.

var str="Hello world!";
document.write(str.substr(3)+"
"); //output: lo world!
document.write(str.substr(3,4)); //output lo w

These functions are fine to make simple task, but it can get complicated without the use of regular expressions. Just to give an example, here a I leave a function to validate an e-mail just with global functions:

function validate(email){
 if(email.search("@") == -1){
 return false;
 }else if(email.substring(0, email.search("@")).length>1){
 email = email.substr(email.search("@"));
 email = email.split(".");
 if(email.length>1){
 for(i=0;i<email.length;i++){
 if(email[i] == " "){
 return false;
 }
 }
 return true;
 }else{
 return false;
 }
 }else{
 return false;
 }
}

And here is an alternative function, much simpler, with a regular expression:

function validate2(email) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)){
    return true;
}else{
    return false;
}
}

Math Object

The Math object allows you to perform mathematical tasks. You can use this to avoid a lot of looping and conditions. For example, if you need to get the the largest number in an array of numbers, you can do something like this with a loop:

var myNumbers = [5,635,98,17,500,950];
var max = 0;
for(var i=0;i max){
  max = myNumbers[i];
}
}
alert(max);

But it is easier and better perform this:

Math.max(5,635,98,17,500,950); // returns 950

Math.max returns the number with the highest value. If no arguments are given, the result is “-Infinity”. On the other hand, if you want to get the lowest value you can perform Math.min method.

Also, maybe you have negative numbers and you want to get the absolute value of a number, to compare o do something else with it, what you need is the abs() method.

Math.abs(-7) // returns 7

Links of reference:

• JavaScript Regex Generator
• Wikipedia article about regular expression
• JavaScript RegExp Object
• JavaScript String Object
• JavaScript Math Object

Numbers are represented in binary as IEEE-754 Doubles, which provides an accuracy to about 14 or 15 significant digits. Integers up to just over 9e15 are precise, but few decimal fractions are.  Because they are floating point numbers, they do not always exactly represent real numbers, including fractions. Given this, arithmetic is as exact as possible, but no more. Operations on integers are exact if the true result and all intermediates are integers within that range.

The problem is that although you can input and they are show as  common floating points numbers, internally they aren’t. This mean that a JavaScript program can not represent exactly some numbers like 0.3 or 0.1 (0.1; 0.001; etc) but it can represent others like 0.20 or 0.5. What you could do is something like this:

var floatnumber1 = 0.9;
var floatnumber2 = 0.1;
var result = Math.round(((floatnumber1*100) + (floatnumber2*100))/100));

And what about if we make more complex? In my case in need to represent the number in the HTML with a comma instead of a dot, like this ’0,9′. So when I take the number from the HTML with JavaSript I have to convert from string to a floating point numbers. What I have to do first is convert the string with the JavaScript Global Functions ‘replace’:

var floatnumber1 = '0,9';
floatnumber1 = floatnumber1.replace(",",".");

And them I have to transform the string to a floating point numbers with the ‘parseFloat’ JavaScript Global Functions.

floatnumber1 = parseFloat(floatnumber1)

And now, I have my number ready to do the arithmetical function.

var result = Math.round(((floatnumber1*100) + (floatnumber2*100))/100));

Its seems complicated, but its easier with the help of the JavaScript Global Functions. To finish, here is the final snippet, optimized just in one line. I add some code to the transform the floating point number to string again, adding the “” at the end, and them I replace the dot with the comma, to show it as the client want.

var floatnumber1 = '0,9';
var floatnumber2 = '0,1';
document.write(((Math.round((parseFloat(floatnumber1.replace(",","."))*100) + (floatnumber2.replace(",","."))/100) + "").replace(".",","));

In my next post I will be talking a little bit more about the JavaScript Global Functions, because I think be use to ignore them, using frameworks or just because we just don’t take the time to investigate if already exist a way to do some things, and they are a very powerful tool.

In sum, the add-ons could be a good addition to any web site to be conected with the user even when his is not on the web site. So I think that it is a good time to learn how to do this and start offering it to customers.