NPM not working after installing yarn – MacOS Sierra

I was getting the following error when trying to use NPM after installing yarn.

To fix this need to reinstate npm with yarn. Following command will do the trick.

yarn global add npm

Regular Expressions – validating the Email

How to validate an email address with following rules using regular expressions?

  • There should one @ sign in the email address.
  • The email should start with a letter and can include letters and numbers and underscore symbol  _ . This constitutes the left hand side of the email from the @ sign.
  •  Right hand side of the @ sign should be the domain name. This should include the period . and left hand side of the period should be alpha numeric and right hand side should be letters.
  • Lower case and upper case is supported.

Lets get started on how to validate for above rules using regular expressions.


This means the reg expression has started.


This part means the first letter should be a letter. Either lower case a-z or upper case A-Z.


After that We check for alpha numeric characters and underscore character.


Then we check for the @ sign.


Then we check for the domain name alpha numeric characters and – dash sign.


Then we check for the period in the domain name.


Then we check for the domain extension letters.


Last part is to mark the end of the reg expression.

Hope this help you understand regular expressions a bit more. I have added the regular expression for javascript. But this will be similar for other languages as well. Please share how to validate email in other languages using regex below in the comments.


Invoicer by Suren Dias – Free invoicing tool for freelancers

HI I created this free invoicing tool aimed at freelancers. Its currently at a very early stage. Can only create pdf invoice at the moment from the data that user enters.

Tool –

Source –

When embedding YouTube videos, page jumps to the video

Ok. this is a problem I noticed today. Let me explain the situation,

I have embedded a YouTube video on one of my client websites. That video is placed at the end of the page. And when the page is loading the page jumps to that video instead of loading the page from the top. This is happening without me entering any anchor tags in the iframe of the YouTube embed code.

When checking the iframe code I noticed it is loading a # tag called #document within the iframe. This is causing the page to jump.


Add following code to prevent #tag in iframe from loading on page load,

 style="display: none;" onload="'block';"


If your using WordPress this method is more suitable, Add the following code in the footer section. This will make the page jump back to top.

window.onload=function() {location.href='#';};

Regular Expression – Javascript- To check filename to see if alpha numeric characters

Ok here is a quick regular expression to check if a file name only contains alpha numeric characters  also we need to allow the period sign.


This allows numbers, letters and the period symbol.

The full code,

var filename = fullfilepath.replace(/^.*[\\\/]/, ''); // this is to get only the file name, file upload field gives the full path

 if (!filename.match(/^[0-9a-zA-Z\.]*$/)) {
 alert('File name should only containg letters and numbers, please rename image file and upload.');


Allow only Numbers and Decimals in a text box

To allow only Numbers and Decimals in Text boxes you can use the following JavaScript code,

<SCRIPT language=Javascript>
       function isNumberKey(evt)
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;

And at the Text box call the function on Key Press event,

onkeypress="return isNumberKey(event)"

Embedding Fonts Different Methods

If your a front end web developer you might have received a design of a website that has some uncommon font. Normally fonts like Arial, Times New Roman are commonly present in all browsers/Operating systems, that websites designed with those fonts are rendered more or less same in all browsers. But for websites that has custom fonts or fonts that are not available in a normal users computer the web page will get rendered differently depending on the availability of fonts in the client computer or device.

Some really artisitic and creative web designs requires us to use the specific font the website was designed with. So how to do this? Let the user download the fonts required to view the website properly? hmmm not practical… Develop the entire website in Flash? hmmm seo nightmare :-/

Method to embed fonts on a website so that it may be rendered properly at the client.

Method – Embedding the font files in the website. Using @font-face

What you need,

.ttf or .otf font file. these will work on firefox and other modern browsers.

.eot file for internet explorer -> you can convert .ttf files to .eot using online font file converters like and

after you get those two files put them in your website directory and at the top of your css file add the following code to define the font-face

/* custom fonts */

@font-face {
font-family: gillsans; /* this could be any name but for clarity use the font name */
src: url(“fonts/gillsans.eot”) /* path of EOT file for IE */

@font-face {
font-family: gillsans;
src: url(“fonts/gillsans.ttf”) /* path of  TTF file for CSS3 browsers */

Make sure to put the .eot file code first.

Then when you want to apply the font just use like following,

p {

font-family: gillsans; /* font family should be what you defined earlier */


This method will work on IE and other browsers but is sometimes difficult due to convert difficulties of font files from .ttf and .otf to .eot format.


WordPress Tabs and Slides Plugin Customization

Hi Guys after a long time 🙂

I got a project that required to have a tabbed layout on its pages. This was easily achievable with numerous plugins out there. I did some research and decided to use “WordPress Tabs Slides” Plugin.

After customizing it according to the customers need I realized that the url wasnt changing to reflect the tab the user was on. The SEO company I was working was adamant about having seperate urls for each tab for SEO optimization.

So Me and my friend(Shammi) decided to customize it to show the #tag for the tab on the url. The effort was successful and I decided to share what we learned with you guys.

After installing the plugin go to the plugin directory,


and replace the tabs_slides.js file with following content,

// JoomlaWorks “Tabs & Slides” Plugin for Joomla! 1.5.x – Version 2.4
// License:
// Copyright (c) 2006 – 2008 JoomlaWorks, a Komrade LLC company.
// More info at
// Developers: Fotis Evangelou
// ***Last update: May 20th, 2008***

/* Copyright (c) 2006 Patrick Fitzgerald – Version 1.9 */
// Temporarily hide tabs
document.write(‘<style type=”text/css”>.jwts_tabber{display:none;}<\/style>’);
var pageURL = window.location.toString().slice(0, -1);
var urlArray = new Array();
urlArray = pageURL.split(‘//’)[1];
var pageId = urlArray.split(‘/’)[urlArray.split(‘/’).length-1];

var tabberOptions = {
//start on DOM ready
‘cookie’:”jwts_tc_”+pageId, /* Name to use for the cookie */
‘onLoad’: function(argsObj)
/* var t = argsObj.tabber;
var i;
if ( {
t.cookie = + t.cookie;
i = parseInt(getCookie(t.cookie));
if (isNaN(i)) { return; }
$(‘#jwts_tab ul li’).find(‘a’).each(function(index){
var str = $(this).text().toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
str = str.replace(“Echo”, “ECHO”);
str = str.replace(“Faq”, “FAQ”);
$(this).text(str.replace(/-/gi, ” “));

var t = argsObj.tabber;
var show_type=unescape(document.location.hash.substring(1));
var i;

// alert(‘hash = ‘ + i);
if ((show_type==””) || (show_type==null))
if ( {
t.cookie = + t.cookie;
i = parseInt(getCookie(t.cookie));
if (isNaN(i)) {return;}
// $(‘#jwts_tab’).find(‘a’).text() = $(‘#jwts_tab’).find(‘a’).text().replace(“-“, ” “, flags);
//alert($(‘#jwts_tab’).find(‘a’).html().replace(“-“, ” “));

$(‘#jwts_tab’).find(‘a’).html($(‘#jwts_tab’).find(‘a’).html().replace(“-“, ” “));

//var strVal = attrib;
// alert($(‘#jwts_tab’).find(‘a’).attr(‘href’));
// alert($(‘div.jwts_tabberlive ul li’).find(‘a’).attr(‘href’));
// $(“ul.jwts_tabberlive > ul > li”).css(“border”, “3px double red”);
//alert(‘getCookie(‘ + t.cookie + ‘) = ‘ + i);
var c = argsObj.tabber.cookie;
var i = argsObj.index;
//alert(‘setCookie(‘ + c + ‘,’ + i + ‘)’);
setCookie(c, i);
var urloftab = this.tabs[i].headingText;
window.location.hash = urloftab;

// $(“#tabs > ul”).bind(“tabsshow”, function(event, ui) {
// window.location.hash =;
//var urloftab = $(‘.jwts_tabberactive’).find(‘a’).attr(‘href’);
// alert(urloftab);
//window.location.hash = urloftab;
// Cookie handling
function setCookie(name, value, expires, path, domain, secure) {
document.cookie= name + “=” + escape(value) +
((expires) ? “; expires=” + expires.toGMTString() : “”) +
((path) ? “; path=” + path : “”) +
((domain) ? “; domain=” + domain : “”) +
((secure) ? “; secure” : “”);
function getCookie(name) {
var dc = document.cookie;
var prefix = name + “=”;
var begin = dc.indexOf(“; ” + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else {
begin += 2;
var end = document.cookie.indexOf(“;”, begin);
if (end == -1) {
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + “=” +
((path) ? “; path=” + path : “”) +
((domain) ? “; domain=” + domain : “”) +
“; expires=Thu, 01-Jan-70 00:00:01 GMT”;
// The tabs!
function tabberObj(argsObj)
var arg;









for(arg in argsObj){this[arg]=argsObj[arg];}
this.REclassMain=new RegExp(‘\\b’+this.classMain+’\\b’,’gi’);

this.REclassMainLive=new RegExp(‘\\b’+this.classMainLive+’\\b’,’gi’);

this.REclassTab=new RegExp(‘\\b’+this.classTab+’\\b’,’gi’);

this.REclassTabDefault=new RegExp(‘\\b’+this.classTabDefault+’\\b’,’gi’);

this.REclassTabHide=new RegExp(‘\\b’+this.classTabHide+’\\b’,’gi’);

this.tabs=new Array();if(this.div){this.init(this.div);this.div=null;}}

if(!document.getElementsByTagName){return false;}
this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;





if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi,” “);t.headingText=t.headingText.replace(/<[^>]+>/g,””);}








this.tabShow(defaultTab);if(typeof this.onLoad==’function’){this.onLoad({tabber:this});}
return this;};

rVal,a,self,tabberIndex,onClickArgs;a=this;if(!a.tabber){return false;}

if(typeof self.onClick==’function’){onClickArgs={‘tabber’:self,’index’:tabberIndex,’event’:event};

rVal=self.onClick(onClickArgs);if(rVal===false){return false;}}
self.tabShow(tabberIndex);return false;};tabberObj.prototype.tabHideAll=function()
{var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i);}};

{var div;if(!this.tabs[tabberIndex]){return false;}
div=this.tabs[tabberIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=’ ‘+this.classTabHide;}
this.navClearActive(tabberIndex);return this;};

tabberObj.prototype.tabShowByName=function(tabberName){var i;for(i=0;i<this.tabs.length;i++){if(this.tabs[i].headingText==tabberName){this.tabShow(i);break;}}return this;};

{var div;if(!this.tabs[tabberIndex]){return false;}


this.navSetActive(tabberIndex);if(typeof this.onTabDisplay==’function’){this.onTabDisplay({‘tabber’:this,’index’:tabberIndex});}
return this;};

// var urloftab = this.tabs[tabberIndex].headingText;
// alert(urloftab);
// window.location.hash = urloftab;
return this;};

{this.tabs[tabberIndex].li.className=”;return this;};function tabberAutomatic(tabberArgs)
tempObj=new tabberObj(tabberArgs);divs=document.getElementsByTagName(“div”);for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabberArgs.div=divs[i];divs[i].tabber=new tabberObj(tabberArgs);}}
return this;}
function tabberAutomaticOnLoad(tabberArgs)
{var oldOnLoad;if(!tabberArgs){tabberArgs={};}
oldOnLoad=window.onload;if(typeof window.onload!=’function’){window.onload=function(){tabberAutomatic(tabberArgs);};}else{window.onload=function(){oldOnLoad();tabberAutomatic(tabberArgs);};}}
if(typeof tabberOptions==’undefined’){tabberAutomaticOnLoad();}else{if(!tabberOptions[‘manualStartup’]){tabberAutomaticOnLoad(tabberOptions);}}

/* WordPress Slides */

wtsslide = function(wrapper,speed, obj){

//jQuery(obj).text(jQuery(obj).text().replace(‘.’, ”));
if (jQuery(obj).text().indexOf(“(Hide)”) >= 0) {
jQuery(obj).text(jQuery(obj).text().replace(‘(Hide)’, ”));
return true;

jQuery(obj).text(jQuery(obj).text() + ‘ (Hide)’);


wtsaccordion = function(group,wrapper,speed){

Please pay attention to the Bolded code, those are what we added. Hope this is helpful feel free to contact me if you have any questions.

Regular Expressions – validating the NIC number

Regular expressions!!! kind of a scary thing for most developers.. 🙂 Well it is scary because its not something that is really user friendly for developers, its a combination of letters, special characters and numbers that kind of make our eyes go the wrong way when we look at them.

Well I normally don’t like to use regular expressions, I just copy from some web site and paste the regular expression when I really need to use one. But I needed to learn how to build my own regular expression and I couldn’t find one on the Internet. What a bummer that was 🙂

What I wanted to do was to validate a National Identity Card (NIC) number (Sri Lankan). Which is 9 number followed by one letter that is v, V, x or X.

So how to write the regular expression for this?

Well you start with


that means that the regular expression is started.

Now we need to tell them that next nine characters should be numbers,


that is how you say numbers 🙂 , how to tell them that next 9 digits are numbers???


the number in curly brackets is the number of times to repeat.

Next we need to tell the regular expression that next letter should be x, X, v or V.


and then we need to tell that the regular expression is over. you do that by,


The final version of the regular expression for validating the NIC number is,


It is really easy when you break it down like that. 😀

Jquery Fancy Box – Issue in IE – How to fix?

I used jquery fancy box for displaying the contact box in the ocean dental web site and when I tested it using chrome, safari and firefox it was working without any issue. But when I tested using IE 7/ 8 it was not showing up properly. the fancy box has become smaller than the content on the page.

After trying to fix the issue by trying various css tricks and editing the stylesheets used by fancy box.

I found that the page that I am calling fancy box must have a specific doc type. after applying what is given in fancy box site it started working without any issue. If your like me and if you have just integrated fancy box by copieng from the demo you might also get this error, so to fix this use the following doc type on the page that your calling fancy box.


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “”&gt;
<html xmlns=”; xml:lang=”en” lang=”en”>



Hope this will help. 🙂