The following 16 colors are easiest for most people to tell apart

Research shows that people also feel calm when looking at them. They are excellent choices to use in charts and graphs.

396AB1

#82A3DB

#3E9651

#94CA6B

#948B3D

#DCD280

#DA7C30

#F1A75C

#922428

#B68570

#CC2529

#E36E90

#6B4C9A

#B087C7

#535154

#909595

Responsive image link map

This is a Copy and Paste Quick fix solution for HTML Image Map linking for responsive design with Javascript and Jquery. Add this code before closing your body tag.

<img src="images/worldmap-world-map.jpg"   usemap="#image-map">
       
       
<map name="image-map">
    <area target="" alt="North America/Canada" title="North America/Canada" href="#" coords="373,217,393,255,405,272,405,312,391,373,354,368,352,415,371,443,344,473,290,496,213,446,168,395,155,354,137,312,114,293,87,291,45,315,41,276,30,240,18,216,27,185,35,156,59,146,116,153,128,177,155,161,169,152,178,108,260,110,283,70,313,66,344,76,336,143,323,175,376,233,404,277,369,262" shape="poly">
    <area target="" alt="Sri Lanka" title="Sri Lanka" href="#" coords="931,505,892,460" shape="rect">
    <area target="" alt="Europe" title="Europe" href="#" coords="606,362,633,369,654,385,670,371,679,395,707,404,747,364,777,354,776,269,756,270,753,229,732,224,726,205,707,205,706,158,684,158,624,224,617,248,575,225,536,226,534,244,574,255,601,254,584,265,565,279,574,306,564,327,543,335,546,370,575,384,611,379" shape="poly">
    <area target="" alt="Australia" title="Australia" href="#" coords="1011,611,1035,588,1056,575,1079,570,1088,550,1122,551,1134,574,1150,575,1149,532,1168,537,1180,574,1189,582,1197,598,1195,639,1175,650,1176,667,1156,671,1151,691,1111,696,1097,658,1075,650,1067,663,1048,675,1009,660" shape="poly">
    <area target="" alt="East Asia" title="East Asia" href="#" coords="948,405,966,399,975,358,1051,357,1067,335,1089,333,1102,340,1109,362,1125,383,1124,405,1068,407,1067,431,1058,451,1023,470,1034,487,1068,474,1088,493,1073,523,1050,549,1013,558,992,519,971,489,959,451,962,436" shape="poly">
</map>

!function(){"use strict";function a(){function a(){function a(a,d){function e(a){var d=1===(f=1-f)?"width":"height";return c[d]+Math.floor(Number(a)*b[d])}var f=0;j[d].coords=a.split(",").map(e).join(",")}var b={width:l.width/l.naturalWidth,height:l.height/l.naturalHeight},c={width:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-top"),10)};k.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(m),m=setTimeout(a,250)}function d(){l.width===l.naturalWidth&&l.height===l.naturalHeight||a()}function e(){l.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof i._resize}function g(a){return document.querySelector('img[usemap="'+a+'"]')}function h(){j=i.getElementsByTagName("area"),k=Array.prototype.map.call(j,b),l=g("#"+i.name)||g(i.name),i._resize=a}var i=this,j=null,k=null,l=null,m=null;f()?i._resize():(h(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();
//# sourceMappingURL=imageMapResizer.map
jQuery('map').imageMapResize();
//Calling with Jquery

Wordpress print something only for certain page

Wordpress print a short code or a HTML element in your files by hardcoding only for certain page in your wordpress blog

You can use the Page ID Post ID or the Slug

  <?php
  if (is_page('11')) {
    echo do_shortcode('[metaslider id="190"]'); 
  }
  ///
  if (is_page('about-us')) {
    echo do_shortcode('[metaslider id="190"]'); 
  }
  ?>

Converting uppercase url to lowercase letters and redirect

RewriteBase /

# If there are caps, set HASCAPS to true and skip next rule
RewriteRule [A-Z] - [E=HASCAPS:TRUE,S=1]

# Skip this entire section if no uppercase letters in requested URL
RewriteRule ![A-Z] - [S=28]
# Replace single occurance of CAP with cap, then process next Rule.
RewriteRule ^([^A]*)A(.*)$ $1a$2
RewriteRule ^([^B]*)B(.*)$ $1b$2
RewriteRule ^([^C]*)C(.*)$ $1c$2
RewriteRule ^([^D]*)D(.*)$ $1d$2
RewriteRule ^([^E]*)E(.*)$ $1e$2
RewriteRule ^([^F]*)F(.*)$ $1f$2
RewriteRule ^([^G]*)G(.*)$ $1g$2
RewriteRule ^([^H]*)H(.*)$ $1h$2
RewriteRule ^([^I]*)I(.*)$ $1i$2
RewriteRule ^([^J]*)J(.*)$ $1j$2
RewriteRule ^([^K]*)K(.*)$ $1k$2
RewriteRule ^([^L]*)L(.*)$ $1l$2
RewriteRule ^([^M]*)M(.*)$ $1m$2
RewriteRule ^([^N]*)N(.*)$ $1n$2
RewriteRule ^([^O]*)O(.*)$ $1o$2
RewriteRule ^([^P]*)P(.*)$ $1p$2
RewriteRule ^([^Q]*)Q(.*)$ $1q$2
RewriteRule ^([^R]*)R(.*)$ $1r$2
RewriteRule ^([^S]*)S(.*)$ $1s$2
RewriteRule ^([^T]*)T(.*)$ $1t$2
RewriteRule ^([^U]*)U(.*)$ $1u$2
RewriteRule ^([^V]*)V(.*)$ $1v$2
RewriteRule ^([^W]*)W(.*)$ $1w$2
RewriteRule ^([^X]*)X(.*)$ $1x$2
RewriteRule ^([^Y]*)Y(.*)$ $1y$2
RewriteRule ^([^Z]*)Z(.*)$ $1z$2

# If there are any uppercase letters, restart at very first RewriteRule in file.
RewriteRule [A-Z] - [N]

RewriteCond %{ENV:HASCAPS} TRUE
RewriteRule ^/?(.*) /$1 [R=301,L]

Custom HTML5 Validation Message 0 Javascript

Change HTML5 validation error message and add a customize validation. This is easy and no need to write java script separately. See the example for a select list highlighted area.

<select
 class="form-control" 
id="priceselect"
 required="" 
 oninvalid="this.setCustomValidity('Please select Portion Size')" 
oninput="setCustomValidity('')"
 title="Please select Portion Size">
<option value="">-- Please Select Portion Size --</option>
</select>

<select
 class="form-control" 
id="priceselect"
 required="" 
 oninvalid="this.setCustomValidity('Please select Portion Size')" 
oninput="setCustomValidity('')"
 title="Please select Portion Size">

<option value="">-- Please Select Portion Size --</option>

</select>