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.

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">
  <head>
    <!-- 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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

Progress bar with Vue.js

This example shows how to create a simple progress bar with a little Vue.js and Foundation CSS help.
Create a simple HTML template and attach minimized Foundation CSS file.

<!DOCTYPE html>
<html>
<head>
    <title>Progress Bar</title>
    <script src="https://npmcdn.com/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="foundation.min.css">
    <link rel="stylesheet" href="app.css">
</head>
<body>
<div id="app">
    <section class="row">
        <div class="small-12 columns">
            <div class="progressbar">
                <div class="progressbar text-center"
		  style="background-color: green; margin: 0; color: white;"
		  :style="{width: progress + '%'}">
		  {{ progress }} %
                </div>
            </div>
        </div>
    </section>
    <section class="row">
        <div class="small-12 columns text-center">
            <button id="attack" @click="increase">Increase</button>
            <button id="attack" @click="decrease">Decrease</button>
	</div>
    </section>   
</div>
<script src="app.js"></script>
</body>
</html>

Add custom CSS styles:

/* app.css */
.text-center {
    text-align: center;
}

.progressbar {
    width: 80%;
    height: 40px;
    background-color: #eee;
    margin: 1em auto;
    transition: width 500ms;
}

button {
    font-size: 20px;
    background-color: #eee;
    padding: 12px;
    box-shadow: 0 1px 1px black;
    margin: 10px;
}

Add some Vue.js code to provide business logic for the progress bar:

/* app.js */
new Vue({
  el: '#app',
  data: {
	progress: 50,
  },
  methods: {
	increase: function() {
	  if (this.progress < 100) {
	    this.progress += 1;
	  }
	},
	decrease: function() {
	  if (this.progress > 0) {	
	    this.progress -= 1;
	  }
	}	
  }
});

How to get the title of the blog page in WordPress

To get the title of the blog page you may use the get_the_title() function. Make sure you put the post page id as a parameter for the function. To get that id, use another function get_option() with two parameters: a page_for_posts variable and true. Your code may look like this:

<h2><?php echo get_the_title( get_option('page_for_posts', true) ); ?></h2>

The Singly Linked List

In a singly linked list each node only has a single link to another (next) node. To store a single linked list, you only need to store a reference or pointer to the first node in that list. The last node has a pointer to NULL to indicate that it is the last node.

To define a singly linked list element create a separate class where each element will be an instance of this class. The class will have two property variables: data itself, and a pointer to the next node. Create another class where the list itself will be instantiated as an object. This class will define all methods that the list utilizes, such as insertFirst(), insertLast(), deleteFirst(), deleteLast(), and printList().

The following is a Java code that uses static inner classes:

package dsmy.linkedlist;

public class App {

	public static void main(String[] args) {
		SinglyLinkedList list = new SinglyLinkedList();
		list.insertFirst("First String");
		list.insertFirst("Second String");
		list.insertFirst("Third String");
		list.insertLast("Last String");
		list.deleteFirst();
		list.deleteLast();
		list.printList();

	}
	
	static class SinglyLinkedList {
		private Node first;
		
		public void insertFirst(Object data) {
			Node node = new Node(data);
			node.next = this.first;
			first = node;
		}
		
		public void insertLast(Object data) {
			// Traverse the list from beginning to the last node
			Node current = first;
			while (current.next != null) {
				current = current.next;
			}
			// Insert the node
			Node node = new Node(data);
			current.next = node;			
		}
		
		public void deleteFirst() {
			// The following node becomes the first one
			first = first.next;			
		}
		
		public void deleteLast() {
			// Traverse the list from beginning to one before 
                        // the last node
			Node current = first;
			while (current.next.next != null) {
				current = current.next;
			}
			// The node before the last one becomes the last
			current.next = null;
		}
		
		public void printList() {
			System.out.println("First --> Last");
			Node current = first;
			while (current != null) {
				current.displayNode();
				current = current.next;
			}
		}
	}
	
	static class Node {
		private Object data;
		private Node next;
		
		Node(Object data) {
			this.data = data;
		}
		
		public void displayNode() {
			System.out.print("{ " + data + " } \t");
		}		
	}
}

The Heap

The Heap is a data structure similar to binary sort tree structure. New nodes are placed to the heap from the top to bottom and from the left to right. Each parent may have no more than two children.

There are two kinds of heaps:

  • The Max heap, where the root node is the largest element of the entire tree.
  • The Min heap, where the root node is the smallest element of the tree.

When you add elements to the heap you add them to the bottom to the
next available slot to the right or down.

When you remove elements from the heap you remove them from the top. The root should be removed and the last element down the tree takes its place. The the new root is compared with its children and the largest element goes to the place of the root. The same process continues to the bottom of the tree.

To figure out parent and children in array that represents a Heap, use
the following formulas:
Left child index position = 2n + 1 (where the n is the index position of the parent)
Right child index position = 2n + 2 (n is its parent position)

To find a parent of the child use the formula:
Parent index position = ⌊(n-1) / 2⌋ (n is its child position)

The Binary Search Tree Data Structure

The binary search tree data structure is inspired by binary search algorithm. The tree inherits the same advantages as that algorithm.

The data is inserted in a sorted manner. It has inserting and deleting benefits of the linked list. This is the most popular data structure in Computer Science with many applications.

The binary search tree as any trees consists of nodes. Each node has no, one ore two children, but no more than two. This is why it is called binary. The top node is called the root. Everything that is on the right side of the root must be greater that the root, and every node one the left side should be smaller than the root. The child that has the same value must go to the left.

To get the most efficiency from the binary search tree, the tree should
be balanced, meaning that for all the nodes in the tree, the difference
between the hights of the left and right sub-trees must not be greater
than one.