Laravel enable foundation validation

If your using Laravel and also using foundation for your front end development there is an easy way to add Foundation’s built in form validation (Abide) to a form. When opening the form tag use the following code,

 

{{ Form::open(array(
         'action'     => 'AController@index', 
         'class'      => 'hello', 
         'data-abide' => true
     ))
}}

Google Recaptcha – Defeating spam got a lot easier

Earlier version of the recaptcha was just a pain in the ass. For developers to implement and also for users who had to squint and type distorted text. Remember this?

2015-04-10 09_07_07-Customizing the Look and Feel of reCAPTCHA - reCAPTCHA — Google Developers

 

Well Google changed that with this new version where the user only had to Tick a check box and some magic happened and it checked if the user is authentic. (Its not clear on their website how exactly they do it, but i think they check for data that has been captured by their analytics tools or cookies or something to make sure that your human)

2015-04-10 09_10_56-reCAPTCHA_ Easy on Humans, Hard on Bots

Here also it falls back to a captcha text if it cant determine if your human so there is a fail safe built in.

Anyway the good news for developers is we can quickly add captcha to our pages without going through a tedious process. So I’m going to give the steps down here that I used to implement recaptcha on my free invoicing tool. (Invoicer)

Step 1.

Go to https://www.google.com/recaptcha/intro/index.html and click the get Recaptcha buton.

2015-04-10 09_14_19-reCAPTCHA_ Easy on Humans, Hard on Bots

Step 2.

Enter the Label and domains that this recaptcha needs to be active on, and click register.

2015-04-10 09_15_43-reCAPTCHA_ Easy on Humans, Hard on Bots

Step 3.

On the next screen you will get the instructions on how to add the recaptcha into your page. But Ill list down the steps here as well.

On client side,

add the script file in the head tag.

 <script src='https://www.google.com/recaptcha/api.js'></script>

Add the following code at the end of the form where you want the captcha widget to appear,

 <div class="g-recaptcha" data-sitekey="6LddIgUTAAAAAEky5noUKqsnA3QPysdXQ05WFsnB"></div> 

On server side,

You need to capture the value generated by client side code and post it to google for verification. This bit can be a bit tricky.

How I did it on Google App Engine is to do a url fetch. Think you will be able to do the same by using curl. Or also ajax.

 <?php

/* recaptcha validation */
<pre>$data = ['secret' => 'YOUR OWN SECRET KEY', 'response' => $_REQUEST['g-recaptcha-response']];
$data = http_build_query($data);
$context = [
    'http' => [
        'method' => 'POST',
        'header' => "custom-header: custom-value\r\n" .
            "custom-header-two: custom-value-2\r\n",
        'content' => $data
    ]
];
$context = stream_context_create($context);
$result = file_get_contents('https://www.google.com/recaptcha/api/siteverify', false, $context);

You will get a json response and if the success attribute it true you can proceed with processing the form values.

<pre>$success_status = json_decode($result)->success;

if($success_status) {

}</pre>

 

More information can be found here regarding verification.

The trickiest part is handling it on server side. If you have any problems with that please post on the comments section and I will try and help. 🙂

Change Place Holder Text Color – CSS

If you have place holder text for input boxes on a html form, and if you want to change the color of that place holder text use following coding,

::-webkit-input-placeholder {
 color: #595959 !important;
}
:-moz-placeholder { /* Firefox 18- */
 color: #595959 !important;
}
::-moz-placeholder { /* Firefox 19+ */
 color: #595959 !important;
}
:-ms-input-placeholder { 
 color: #595959 !important;
}

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='#';};

HTML Image Map Issue on Internet Explorer – Reference Code

So I ran into this problem where image map was not working properly for Internet explorer. For my project I had the singapore map loaded with it being devided into 4 areas. When someone hovers over each area its supposed to highlight that area. It was working properly on Firefox, Chrome and Safari but there was a problem on IE… turns out I havent set the Width and Height for the initial image. After adding those it worked properly. So if your also having a problem like this you might like to check out that.

<img id="mapImg" src="images/maps/main_map.jpg" alt="map" width="496" height="261" border="0" usemap="#Map"/>
 <map name="Map" id="Map">
 <area class="westmap" shape="rect" coords="13,24,192,231" href="#" >
 <area class="centralmap" shape="rect" coords="192,137,292,252" href="#" >
 <area class="eastmap" shape="rect" coords="293,121,479,242" href="#" >
 <area class="northmap" shape="rect" coords="191,5,291,136" href="#" >
 </map>

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)"

Add css styling to the last item of a list / Menu

To apply css styling to the last item on a list you can use the following syntax,

.ul li:last-child {
border-right: 1px solid #806862;
}

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.

 

Prevent Skype Highlighting on your website

If you have skype installed on your computer you will see that phone numbers on a website are highlighted,

Skype Highlighting

This is all good and useful if your a web user, but this could be a nightmare situation if your a web developer, as this could create havoc with your layouts.

To prevent skype highlighting from showing and messing up your carefully created design you can add the following style rules to your css file,

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container, span[class^=”skype_pnh_print_container”] {display:inline !important;}

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.

<code>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

</code>

 

Hope this will help. 🙂