DreamSite Labs

This time I’m sharing some resources that I found helpful while I developed in this great language. As we can read in the website of Mozilla: “JavaScript (sometimes shortened to JS) is a lightweight, object-oriented language, most known as the scripting language for web pages, but used in many non-browser environments as well”.
Here are some guidelines, tips and online editors.

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.

Have you ever try to customize the wordpress dashboard? I’m sure that you think about it at least once if you made any development with wordpress. Luckily, WordPress’ flexible nature allows for almost every part of it to be easily changed, Dashboard inclusive. The easy way is to create a plugin for it, so let’s take look on how we can creat a plugin first.

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.

A time ago post a JavaScript snipet. It was simple snipet that provides a hint that describes the expected value of an input field. So, when text input get focus, the default value disappears and allows the user to write, but if the user doesn’t type anything, the default value returns to the input text when the input lose the focus. But the last week I was reading the book HTML5: Designing Rich Internet Applications, and I found some great new attributes.

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.

In my last post, where I wrote about the Javascript problems with the float point numbers, I told that I would be writing about the JavaScript Global Functions. So here we are. This time I will talk about a few global functions that I think that could be useful and I hope that it will give you curious enough to investigate further.

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

A few weeks ago, I was doing a freelance for my friends of Gruponat when I got with this JavaScript problem. I was doing the following arithmetical function: “0.9 + 0.1″. To my surprise, the result wasn’t “1″ as I spected.

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.

Tomorrow I will go to the Firefox Add-ons Workshop Argentina, hoping I could learn all about firefox add-ons. I don’t have an idea yet about what add-on I could do in the future, but I think is useful having the ‘know-how’ about that, because in the future you can create add-ons for your web proyects as complement of it. Imagine for a web site of bids, like ebay, you can do an add-on were the user can follow his bid, an kwon when the his is loosing the bid. Or for a managing tasks web site, like Remember the milk, you can do an add-on where the user could manage his task, adding new ones or editing others.

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.

As I have announced a few days ago on Twitter(by the way, if you want to follow me, here is my user:@andres_314, the only thing is that I usually write in Spanish and not many important things). Two weeks ago, I was working on a web project and I needed to use a tooltip to show some comments from the users of the site. As I was already using jQuery in the project, I decided to search a plugin to help me with that task. But after being spending a lot of time searching something useful for the project without success, decided to do my own plug-in. I couldn’ t find one with the options that the project require. The next day I made one after a couple of hours, with the basic stuff I was needing at the moment. Although, I made it with a lot of options thinking in a future development, open for the comunity. In this version you can choose the basic effect that jQuery offer for animations without the UI library, swing and linear. The speed of the animation and add some callbaks to use when the tooltip appear and disappear too.

The idea for the future is that you will able to choose the event that fire the tooltip and others features like the tooltip orientation.
You can try the basic demo of the dreamy tooltip here and download it here. If you just want JavaScript file download it here.

Updated September 15, 2010:

Here is the link to the page of dreamytip in jQuery.com: http://plugins.jquery.com/project/dreamyTip

It’s been a while since the first version, but now I’m glad to announce that the new release it’s finally out. There is no documentation yet, but the it’s explained in the file. You can see a demo page or download the demo of the plugin here.
If you only want to download the plugin you can download here the full version or here the minified version.

As soon as I can I will update this post with the documentacion.
If you need help, just let me know.