Creating an i18n WordPress Plugin

wordpressIt was not an easy task to search for all steps needed to create a WordPress plugin that supports multiple language.

So I’m listing here all the steps I learned in the proccess of developing an i18n WordPress plugin.

Step 1 : Choose a Domain For Your Plugin Texts

A domain is a name space you choose to facilitate your texts under. And you control when these texts will be available.

What I did was to add a function when the plugin was loaded

This function is called when the plugins are loaded, In ‘my_custom_init_function’ I load the text with the domain name I picked for the texts:

the load_plugins_textdomain load the translation from the third parameter location. I chose to put the translation files inside the plugin so it will be part of the plugin package. I’ll cover on how to create the translation files in Step 3

Step 2 : Wrap All Your Texts With The Translation Function

We need to declare which text is for translation. We do that with the __ (double underscore) function. The second parameter of the __ function is the text domain we chose in step 1.  So an example usage will be:

And we are done! The only thing that is left is  to do the actual translation – That will be done in the next step

Step 3 : Translate Your WordPress Plugin

Translation in WordPress is made with .po and .mo files. You use the .po files in a text editor and these files are converted to .mo files which are binary files. You can save a lot of headache by letting some other plugin to create those files for you. I played with a few plugins and the one that I liked the most was Codestyling Localization. With this plugin you translate your plugin directly from the admin panel ( tools > localization ) and you can also generate the .mo file in one click.

More Information

You can have multiple text domains in your plugin, that make sense if you have different areas your plugin is running under and than you can make a text domain for each area. For example if your plugin is running in the admin panel and in a blog post it make sense to separate the two into two text domains.

Best Practice to Build a Backbone.js App

backbone-300x53I’m going to show my way of building a Backbone.js application architecture. But first I will tell you why I’m going to do that.

There is no one best way to build a Backbone.js app, Backbone.js is so flexible that you can write a good application is many ways.

Backbone.js has a lot of critics. The most obvious of all is the claim that there is no one straight forward way to build a Backbone.js app, more than one recipe exist. Every individual is doing it a little bit different. In my opinion that is a good thing.

What You Already Need To Know

This is a basic tutorial for creating an application architecture but you should already know what is a backbone model, collection, view and how to create them.

Freedom of Coding

You can built an app in any way You want. That can be a bad thing if you are not such a good developer. So I will say to you that if you are planing to be a mediocre developer, don’t develop in Backbone.js, it’s not that it is hard, it’s actually very easy. So easy that it will let you do stupid things, similar to PHP.

Gradually Adaptation

Backbone.js is a very versatile tool, and as such you can basically do whatever you want. One of these perks is the ability to convert your app gradually to Backbone.js. Yes! it is not a framework, you can play with a little feature and you can migrate your app bit by bit.

POP, or Power Of Plugins

I’m not talking about Backbone Plugins… those exist and they are great. I’m referring to any JavaScript plugin that exist. want to use the funky jQuery dropdown plugin that you saw? You can! Or what about this beautiful bootstrap tooltip plugin? You can.

In fact it is very easy to use any plugin and embed it in your Backbone.js application. This feature was the most important one for me.

Application Structure

Ok, after the ‘why’ let’s move on to the ‘how’, Every Backbone.js app that I’m building has the same structure layout. It does not have to be in that structure, I just found out that most of the time that structure is a best practice for me.

I’m using one global variable that holds the entire application. Usually I call it ‘app’.

here is the structure of the app object:

As you see under the app object there is another object called ‘bb’ that is my short to Backbone, all my Backbone objects will exist under the ‘bb’ object.

Under the ‘bb’ object there are three types of objects that start with an uppercase

  • Models
  • Collections
  • Views

And as you can imagine, all of the models will be under ‘app.bb.Models’, collection under ‘app.bb.Collections’  and views under ‘app.bb.Views’

The actual instances of models will be under ‘app.models’, same for collections and views.

Creating a New Model Object

When creating a new model, just extend the ‘app.bb.Models’ object:

It is best practice that the object name will also start with an uppercase, this way it will be easy to distinguish between objects and instances.

Creating a New Model Object Instance

Creating an object instance is simple:

The same process apply to collections and views.

Raw Data

Preserving data after manipulation could be easy when you have a dedicated object for it. Want to create data that is not part of your models / collections / views? In those cases I save the data under ‘app.data’ and ‘app.data.rawData’. This is not a good idea if you have a huge amount of data – the browser have a size limit and with a humongous amount of data it could crash.

How to backup my MongoDB to Amazon S3?

mongodb_leaf.jpeg.pagespeed.ce_.uVfHcrd4r6

I searched a lot for an easy script that would give me an option to easily make a daily backup of my MongoDB database and then upload the backup to Amazon S3.

I found a few solutions, but they did not did exactly what I wanted.

I found one that did exactly what I wanted, but it was for MySQL, not for MongoDB… So… I converted that script to do the same with MongoDB and now it is available for you to use on Github.

You can make daily, weekly and monthly backups. it can be automated through CRON. The only dependency is ‘s3cmd‘ which is a really recommended for everyone who uses Amazon S3.

The code is really simple, and I’ll put it here, but if you want the latest version – download it from the project Github repository.

Enjoy!

JavaScript Context is Actually Easy to Understand

js-150x150One of the most misunderstood concepts of JavaScript is the context topic. When saying context I’m referring to the ‘this’ keyword inside a function.
Now let’s break that down:

If it is a constructor than the ‘this’ keyword will refer to the newly created object.
So when creating an object with the ‘new’ keyword the context of the ‘this’ keyword is the new object that was created. But if the function would have been called without the ‘new’ keyword than the context would be the global context meaning the global ‘window’ object

On an object the context is the object the function is executed on. Sounds confusing? A simple example will clear that out:

That is it! It is simple as that. So, why the confusion? Things can go a bit more complex when we want to use a different context than the current one. Let’s look at an example:

I used  the context var here because that inside the ‘dat’ function we have a new context so if we used the this keyword instead of the context variable then it would refer to ‘obj.doo’ instead of just ‘obj’

Another exception of context is the ability to control the context inside a function. Using the call and apply method of JavaScript we can set the context:

The call function first parameter is the context that will be available as the this keyword inside the called function. the rest of the parameters – will be the original function parameters:

The difference between call and apply is the way the parameters are passed:

These two calls are equivalent, the apply function parameters are just passed as an array. Why do we need that? well, sometimes we have the data as an array and this will save as the conversion, no other difference besides that.

Hope this was clear… Have Questions? contact me! or post a comment

GRUNT – JavaScript Build Tool For Everyone

It doesn’t matter if you are a high level developer or

grunt

a newbie – Grunt can help you. I will share a few practical ways

Minify your codethat I use Grunt, although I can for sure do a lot more with Grunt than just those solutions that I will discuss I will only discuss only a few of my favorites. Also I am still in the learning process of all of the benefits of Grunt, so if you have a usage that you think is important and is not listed here, please share! All of my current usages for Grunt is for static resources.

With Grunt you can easily minify your code into a destination file. The most common way to minify a file with Grunt is to use Uglify.js. there is a lot of information on the Grunt website on how to get started.

Combine a few JavaScript files

With Uglify you can combine a few files into one file – that is great for configuration files. If you have different configuration values on your development server than your production server – just make all your configurations on a separate file and combine it with Grunt. The build will be per server.

There are a lot of ways to handle configuration in JavaScript. The most obvious is to just put it in the script without thinking about it too much. That solution is good only if you test everything on production, but for those sane developers like us that want to test our scripts on multiple environments we need a good way to easily move our scripts from one environment to the other. With Grunt it is easy to do so – use a settings file that is combined during the build process

JSLint

you can put JSLint as part of the build process, personally I don’t use that feature since I use JSLint directly into my IDE, but that can be useful for other people.

Testing

We can integrate our tests with the Grunt build. This is extremely useful since I can integrate the testing process directly to the build process and when the test is failing – I will get an immediate feedback.

Reformatting code

remove all of your debugging code on the build, that way no accidental console.log statements on the real script.

How to install?

A great in depth manual is in the Grunt website. It is depended on Node.js.