Author: admin

HTML5 and all browsers compatibility

Shims, Shivs and Polyfills

Shims and shivs are small libraries that fill gaps in a platform

  • Mainly used when API changes and cause compatibility issues
  • The older API can still be supported by a thin compatibility layer on top of the newer code

Polyfills are similar concept to shims/shivs

  • They provide fallback functionality for features still not implemented natively in the browser
  • When the user update their browser they will have the same experience, but use native implementation

Continue reading “HTML5 and all browsers compatibility”

Useful predefined PHP functions

print_r(get_defined_vars());

get_defined_vars — Returns an array of all defined variables 

print_r(get_defined_functions());

get_defined_functions — Returns an array of all defined functions

You should be careful about the location in the code, because if you are inside a function it will work only for this function.

print_r(get_defined_constants());

get_defined_constants – Returns list all defined constants with their respective values

print_r(get_declared_classes());

get_declared_classes – Returns list all declared classes

print_r(memory_get_usage());

memory_get_usage — Returns the amount of memory allocated to PHP

Create WordPress Plugin

To create a plugin, all you need to do is create a folder and then create a single file. First go to the wp-content/plugins folder, and create a new folder named myPlugin. Inside this new folder, create a file named myPlugin.php. Open the file in a text editor, and paste the following information in it:

<?php
 
   /*
 
   Plugin Name: myPlugin Creator
 
   Plugin URI: http://www.nikolaynikolov.net
 
   Description: My fist plugin
 
   Version: 1.2
 
   Author: Nikolay Nikolov
 
   Author URI: http://www.nikolaynikolov.net
 
   License: GPL2
 
   */

You can go into the back end to activate your plugin. Of course, this plugin doesn’t do anything, but you can add functionality by yourself.
Continue reading “Create WordPress Plugin”

Responsive design for all browsers and older versions of IE

If your task is to make your CSS media queries to work in most browsers and older versions of IE (7-8), all you need to do is to include Polyfills. Polyfills are js and you can download them from https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills. I can recommend you Respond by Scott Jehl.

Show google maps from address

If you have for a task to show google maps location using just the address the following script should help you.
Here is the HTML code

<html>
 
<body onload="initialize();">
 
    <div id="mapsaddress">Boulevard Mansions, Borough Road, SE1, United Kingdom</div>
 
    <div>
 
        <div id="map-canvas" style="width: 750px; height: 450px; margin: auto; padding: auto;"></div>
 
    </div>
 
</body>
 
</html>

For Google Maps visualization we will use -> Google Maps Javascript API v3:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCClx895bzWz1KUS4aytDTnTpi8Dv988Pg&sensor=false"></script>
 
<script>
 
  var geocoder;
 
  var map;
 
  var latlng;
 
  function initialize() {
 
    var address = document.getElementById("mapsaddress").innerHTML;
 
    geocoder = new google.maps.Geocoder();
 
    geocoder.geocode( { "address": address}, function(results, status) {
 
      if (status == google.maps.GeocoderStatus.OK) {
 
        map.setCenter(results[0].geometry.location);
 
        var latlng = results[0].geometry.location;
 
        var marker = new google.maps.Marker({
 
            map: map,
 
            position: results[0].geometry.location,
 
            center: latlng
 
        });
 
      } else {
 
        alert("Geocode was not successful for the following reason: " + status);
 
      }
 
    });     
    var mapOptions = {      zoom: 13,center: latlng   } 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);           
  }
 
</script>

We will use the predefined address from the div with id=”mapsaddress” and will get the coordinates needed for Google Maps API. Don’t forget to use your own google map key!

You can also check the working DEMO.