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

Advertisements

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.

/^[a-zA-Z]{1}

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

/^[a-zA-Z]{1}[a-zA-Z0-9]_

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

/^[a-zA-Z]{1}[a-zA-Z0-9]_@

Then we check for the @ sign.

/^[a-zA-Z]{1}[a-zA-Z0-9]_@[a-zA-Z0-9]\-

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

/^[a-zA-Z]{1}[a-zA-Z0-9]_@[a-zA-Z0-9]\-\.

Then we check for the period in the domain name.

/^[a-zA-Z]{1}[a-zA-Z0-9]_@[a-zA-Z0-9]\-\.[a-zA-Z]

Then we check for the domain extension letters.

/^[a-zA-Z]{1}[a-zA-Z0-9]_@[a-zA-Z0-9]\-\.[a-zA-Z]$/

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.

Resource: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

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 – http://invoicer.surendias.com/

Source – https://github.com/surendias/Invoicer

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.

Solution,

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

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

Update

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.

/^[0-9a-zA-Z\.]*$/

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;
       }
       //-->
    </SCRIPT>

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 http://fontface.codeandmore.com/ and http://www.kirsle.net/wizards/ttf2eot.cgi

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.