Developer Tips

Here I intend to provide recipes, patterns, and best practices across the areas I am often asked to help with on my consulting engagements.

Calculate person’s age from the date of birth

To calculate a person’s age from the date of birth use vanilla JavaScript:

function Person(dob) {
  this.birthday = new Date(dob);
  this.calculateAge = function() {
    const difference = - this.birthday.getTime();
    const ageDate = new Date(difference);
    return Math.abs(ageDate.getUTCFullYear() - 1970);
const person = new Person('9-10-1990');

Remove the Form on Contact Form 7 WordPress plugin after the submission

To remove form fields on a contact form that uses Contact Form 7 WordPress plugin after the successful submission, add this code to the functions.php file in the WordPress installation:

add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
}, false );
/* ]]> */

Display the Woocommerce Product Tags in a simple list

Default setting of the WordPress WooCommerce Product Tag Widget displays the tags in a cloud. If you want to display the tags in a simple list, add the follow code to the function.php file:

add_filter('woocommerce_product_tag_cloud_widget_args', 'nwb_woo_tag_cloud_filter');
function nwb_woo_tag_cloud_filter($args) {
	$args = array(
		'smallest' => 14, 
		'largest' => 14, 
		'format' => 'list', 
		'taxonomy' => 'product_tag', 
		'unit' => 'px', 
	return $args;

Copy a Website from the Internet

HTTrack is a free (GPL, libre/free software) and easy-to-use offline browser utility.

It allows you to download a World Wide Web site from the Internet to a local directory, building recursively all directories, getting HTML, images, and other files from the server to your computer. HTTrack arranges the original site’s relative link-structure. Simply open a page of the “mirrored” website in your browser, and you can browse the site from link to link, as if you were viewing it online. HTTrack can also update an existing mirrored site, and resume interrupted downloads. HTTrack is fully configurable, and has an integrated help system.

An overlay layer for a background image

Make an overlay layer for a background image on your template. This is the HTML:

<header id="bg-section">
  <div class="dark-overlay">


$dark-overlay: rgba(0,0,0,0.7);

#bg-section {
    background: url('img/bg.jpg') no-repeat center top fixed;
    background-size: cover;
    background-attachment: fixed;
    min-height: 700px;

    .dark-overlay {
        background-color: $dark-overlay;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 700px;

Bootstrap 4 beta Starter Template for Vue.js

This is an HTML5 Bootstrap 4 Beta template with Bootstrap CDN links with SRI. Great start for developing Vue.js applications.

<!DOCTYPE html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <div id="app"></div>
    <script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>