Basic Shell script to automatically start NodeJS if for some reason it stopped

Hi Guys, Well this one is a really basic example of a shell script that I used before in one of my production NodeJS website called http://icompressjs.com Here is the bash script that I wrote to monitor my local node install     as you can see that I am running Node on port 8080 and I am using curl to send a request to my node server. If response is 200 that is good and it will print "All Working well" else it will try to start NodeJS server You can also plugin another line to send email to you when a server is launched again. Something like this mail -s 'Subject' [email protected] < msg.txt put above line just under echo "Launching" Now the final step is to cron this our bash script. I named it as node_monitor.sh You will have to give your local user rights to execute this script, after doing that you are able to cron it as shown below Above lines says that every 5th minute run node_monitor.sh If the response is ok i.e. 200 then nothing will be done else there will be an attempt to start NodeJS server again You can improve this script with better error handling but for what I was trying to do this was sort of enough I hope this helps Cheers         … [Read more...]

Install node.js on Ubuntu 12+ and test with example server

Now that I've started to learn node.js to a project of mine thus there will be a few articles on node that you will see. And of course I am not an expert on this topic or any actually thus making any amendments will be welcome to improve this post Ok so I am using Ubuntu 12.04 LTS and I think ubuntu works for me atleast for stuff I wanted to do. So after reading many articles online, this is how I successfully installed node on my ubuntu. First we will need to install pre-requisites or dependencies before we can touch node so run the following commands to install Dependencies You will need to install these dependencies first If something goes wrong while installing any of the above then try these steps before you repeat above Installing for current user Change to the directory your want to install node in. For this example lets keep it simple and create a nodejs directory first as shown below If everything went smoothly then its time to get the source from GIT so here are the required steps for that Please note that ./configure will do a check on dependencies and you will see problems in red if something went wrong. Congratulations! Node is now installed and you are ready to rock But just before that I would also recommend you to install node package manager (npm) npm is now installed. npm is a good way to install node modules. But Lets test our node install out Somewhere where you would like to create a new project, just create a new file called index.js (please note that this is just a test thus I am not emphasizing on where and how to do your project structure) I just use gedit to do this Ok inside your index.js put this code in Ok now in your browser address bar either put localhost:8080 or if it is a local network then point your browser to network address of your node server generally starts with 192.168.*.* or 10.1.*.* remember to put 8080 as port number because thats the … [Read more...]

jcedit: A jQuery Plugin for contenteditable containers

Hi Guys, Here is a skeleton jQuery plugin that you can use on various pages to get people to send you corrections on the web pages of yours. Let me explain a bit more. So this plugin was written to help me with my work with a WordPress plugin of mine that allows in article editing and correction suggestion to be sent to the author/administrator. The WordPress plugin is called WP Errata and will be available from Wordpress.org But lets talk about this little jQuery plugin and I will take you though some key things that this plugin does. Example markup So the above markup is something that we will need. It doesn't matter if you include contenteditable="true" or not, as long as you are including class="jcedit" or your own within the div element, see the usage section Usage This plugin allow hook functions when user resets or hit save button and these actions can be overridden by following functions As you can see that by default the functions will have old and new content available through params. So a quick usage example will be   .jcedit is the default class that we have applied jcedit to but you can have your own hook classes. It shouldn't matter. There is a good Stack print when you pass on debug: true some maybe useful info is printed out. Styling Here is the default stylesheet that you can edit if you are not happy with default styles. Above is pretty much very simple styles definitions that can be edited with ease     Version Current version 1.0 Demo Ok here is a quick demo of this plugin http://jaspreetchahal.org/examples/jquery-examples/jcedit/jcedit.html If you have any question regarding this demo please let me know Compatibility This plugin should work if contenteditable is supported by your browser. This plugins has been tested on latest version for the following browsers including IE9 and IE10   Donations If you like this Plugin, please … [Read more...]

Check if contenteditable is supported in a Browser

Hello, So the plugin I am writing on contenteditable, I had to check if browser actually support this functionality or not. So I read a few articles and I came to this conclusion that there are a few ways that you check support for contenteditable Lets check out what those ways are First way First way is to use Modernizr framework and this is how you do it with Modernizr Please correct me if I am wrong in stating above. Second way This is just a pure JavaScript way and we have been using this for ages (overstated :)) now Here is how you can check it isContentEditableSupported will have value true or false depending on if its supported or not   Third way We can make use of jQuery in third way let me show you how this is done. We will just create a tag and check if contenteditable property value is inherit, inherit is the default value of contenteditable Once again isContentEditableSupported will have value true or false depending on if its supported or not So as you can see that there are a few ways to detect support for this property. There are some cases such as in Smartphone and Tablet browser that above test may return false positive so maybe its better to see what check reliably result in accurate output. I hope that this helps To make a correction to this post please leave your comments so that others can benefit. Cheers   … [Read more...]

jQuery Element exists function

Hello, So  a friend of mine asked me a question that if there is a function in jQuery that makes it simple to check if a element with an ID exist in DOM or not. So I think that function does not exist but its pretty simple to write one. Ok first things first, here is a simple way to check if an element exist or not. Markup Here is an example markup on which our jQuery code will be based on  A simple check (This is how you do it anyway) So above works pretty well and it will work pretty well with the CSS class selectors too. But just if you are after exists() function here is what you can do :) The only advantage is readability of your code. Now lets write a little plugin so that you can hook it in your code easily     So to be generic in nature here is a generic definition for our exists() function for jQuery To make our function return boolean true or false we just need to change the condition in our plugin function as shown below I hope that this helps. If you would like to add something or make a correction please leave your comments Cheers     … [Read more...]

HTML5 vibration API with code examples

Hello, While reading more and more about HTML5 and working with it nearly everyday there is something new you end up doing everyday. Yesterday I was doing a bit of reading and came across the Vibration API so let me share you few things about the vibration API.   Why would you use a vibration API Well I can think of a few usage scenarios and the one that is more obvious is to when you alert user about something in your mobile application it would be fun if you can add a little bit of shake so that an alert becomes a little bit more exciting. Or if you are a game developer then you can use it when a guy snaps a punch on other guys face. Think of anything that result in some sort of a shock you can use vibrations to make that shock more realistic Lets start  looking more in depth of this API Detection With new APIs introduced not all browsers support it out of the box so it makes sense to detect the API support first and then do something cool with it. Firefox for Android as of writing support this API Here is how we can detect the vibration API supports Usage Now that we have seen how to detect the support for lets now check out how to use the vibration function Here are couple of ways you can use the overloaded vibrate so above is translated to following for real app situation Cancelling the vibration Cancelling the vibration is quite simple and here is an example to cancel the vibration Quite simple ehh! You can use Javascript method such as setTimeout()/clearTimeout() and setInterval()/clearInterval() to control the delay or repeats for vibrations. As web is moving more towards HTML5 now is the time to get used to new API. More browsers will be supporting these sort of new API. Browsers such as Chrome, Safari and Firefox and even Opera are pretty aggressive with keeping themselves ahead of each other so I am hoping that all will be adding support to this API pretty soon. As of now only Firefox … [Read more...]

ExtJS 4 dialog window and mask position stays on window scroll

Hi Guys, Now that I am working non-stop with ExtJS and am learning some good stuff, here is another situation that I came across, When Ext window is displayed with mask behind it then when you scroll your browser tab window then you will notice that the mask will stay at the initial position. The case is discussed here http://www.sencha.com/forum/showthread.php?145525-Modal-windows-with-long-pages-mask-not-covering-whole-document.body There are a few solutions that a few authors have come up with but I would just chuck in my bit to see what you think. The problem that I am talking about is shown in the screenshot below   This is another way to tackle the scrolling issue. Not very intuitive but works in most scenarios. Now please do not judge on this because this is just a working alternative and I am not overriding default behaviour of showLoadMask. First we declare the function below Now lets handle window scroll Or with Ext Window add a on show listener and call resetMask() from there as shown below Now when Ext window shows up, the mask's top CSS property will reset to window.pageYOffset There are other ways to do it too but I thought I should share the one that I couldn't find elsewhere :) Happy Ext'ing Sorry for the mix of traditional Javascript and Ext. You can do above in a well mannered way. Cheers … [Read more...]

ExtJS 4 form focus first field

Hi Guys, This is a quick tip on how to set focus on the first field of your form. Consider the ExtJS form below So if we would like to set focus on first field, in our case first name field is the one that we would like to set focus on. Here are couple of method that you can try Method 1 Add an afterrender event listener This is preferred way because we are making sure that field function is encapsulated within its config. Here is quick reference to focus() method http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-method-focus Second Method You can always use Ext.getCmp() to get the component and do all sort of allowed things with it. Here is what you can do to focus on first name field Make sure that above line should be placed after the code to generate form panel. We have give a delay of 200ms but you can increase to a value that suits you. I hope that this helps Just in case you found an error or want to improve part of this post please leave your comments. Cheers       … [Read more...]

plupload and RackSpace cloud files

Hi Guys, There are a few uploaders that one can like. Mine favourite is plupload and there are heaps of reason behind that, but this post is not about discussing how good plupload is rather we will concentrate on how we can use plupload to upload files to your server and then send a signal to your server to upload that file to RackSpace cloud files. This post assume that average file size to be uploaded is not more than few 100 kilobytes else a bit more sophisticated error handling will be required so that files are reliably sent to RackSpace Cloud. You should know we will need to upload a file to the server hosting plupload and then upload it to RackSpace cloud. Doing it this way does have advantages as it offers greater flexibility. Here is an activity diagram of what we are going to do. This is just a basic activity diagram explaining core steps only. You can have better error handling. Above is just a skeleton activity diagram. In the code provided the upload failure to RS Cloud is not implemented and I leave it to you to do that. Lets get started. Create a folder pltest under your htdocs or html folder. This is the location where your web server find files to return to the user when queried. On linux path could be /var/www/html and on windows path could be something like this depending on where you've installed Apache. C:\Apache2\htdocs Download plupload First step is to download plupload and this can be done by visiting their website and follow the download instructions. Here is the link http://www.plupload.com/ Extract downloaded plupload in pltest folder. Getting Cloud Files PHP API Next we will need to download Cloud Files PHP API which you can find here https://github.com/rackspace/php-cloudfiles Extract PHP files in archive to to our pltest folder. Your folder structure should look like this now. Also make sure that you extract share folder under pltest. Sorry that is not part of the … [Read more...]

ExtJS 4 dialog window goes beyond browser boundary on drag

Hello, This is a really quick tip that I wanted to share. Let's say you create an ExtJS window as shown below You already know that by default window property draggable is true. If you try to drag window and move closer to the the browser boundary, the drag will go beyond the browser boundary.     This situation is shown in the screenshot below   The easiest solution to this problem is to constrain the window by adding property constrain to window config So about code will show it as You can read more about constrain config here http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.Window-cfg-constrain Now that you know how to constrain there is one more config that makes constraining super flexible and that is called contrainTo: An element or region from which a Region measurement will be read which is then used to constrain the component. Only applies when the component is floating. I hope that this tip helps. In case I missed a point or two, don't forget to leave your comments so that this post can be improved. cheers,       … [Read more...]