Skip to main content

Posts

How to create a waveform animation with HTML and JavaScript

Recently, for a pet project, I wanted to create an animation of a waveform based on the varying decibel level of the microphone input. I was thinking about a really simple way to accomplish this with SVG and JavaScript. Given below is the first sample code I did on the Codepen. You can change this code to use with any framework of your choice.

For this sample code, I am using a random number as the microphone input. You can replace it with any other time based input.

Code Pen : https://codepen.io/nadeeth/pen/vmaYXw

For this example, you need an HTML code snippet like the one given below. It’s just an SVG with a Polyline element inside. 

<div style="text-align:center">   <svg height="150" width="400" id='svg'>     <polyline id="polyline-id" fill="none" stroke="#005c66" stroke-width="1" />   </svg> </div> And then the plain Javascript code to animate the polyline. You can replac…
Recent posts

Client side MVC with backbonejs - a simple example

Some developers do not pay much attention about the structure of the client side code in their web applications, and the way they organize the code may end up in a tangled pile of JavaScript codes which is less readable and difficult to maintain. Backbonejs is a framework for web front ends which solve these issue. You can build web applications with rich front ends with backbonjs and connects those all to your existing APIs over RESTful JSON interfaces.

In this post, I am trying to demonstrate how to build a client side MVC application with backbonejs, as simple as possible. The application is a list, which you can add and remove items. This is a very simplified version of the TodoMVC at http://todomvc.com, please proceed to the references at the end for more details.

Source code of this example : https://github.com/nadeeth/backbonejs_simple_example 

Application includes a model for individual list item, a collection to store list items, views/controllers to display, create, and del…

How to create a simple Web Crawler

Web crawlers are used to extract information from web sites for many purposes.

The simple example given here accepts an URL and exposes some functions to query the content of the page.

To check out the source code of this example : https://github.com/nadeeth/crawler

If you are going to make any improvements to this code, I recommend you to follow TDD and use the unit test class in the code.

Step 1 : Create the class, init function and required attributes In this example, xpath is used for querying the given web page. There is an attribute to hold the page url, and another to hold the xpath object of the loaded page.

The init() function initializes the xpath object for the page URL assigned to url attribute.

class Crawler { public $url = false; protected $xpath = false; public function init() { $xmlDoc = new DOMDocument(); @$xmlDoc->loadHTML(file_get_contents($this->url)); $this->xpath = new DOMXPath(@$xmlDoc); } } In the next two ste…

How to create a simple Wordpress plugin

Last year, I was working on some projects related to bloging platforms such as Wordpress, and I became really passionate about Wordpress during that time. Wordpress has become a very popular CMS, although originally it came as a blog publishing platform. One of the main reasons for this popularity may be it's powerful plugin architecture. So, I thought it's better to write a simple tutorial about how to create a simple plugin for Wordpress.

In this tutorial, I am giving the main priority for the simplicity since I need to show how easy to create a plugin for Wordpress. I highly recommend to improve the structure of code if you are going to use this for a complex project.

This simple plugin will show, the head lines of the latest posts in the bottom of each single post page, so that users will be able to navigate to the latest articles without moving back to the home page.

To check out the source code for this example : https://github.com/nadeeth/wp_latest_posts/tree/simple

Ste…

JavaScript The Good Parts - To see the real beauty of the language

Recently, I finished reading the book "JavaScript The Good Parts" written by Douglas Crockford. Actually, many developers, although they have used JavaScript for many years, they haven't tried to learn it in a proper way. Therefore there is a great amount of poorly written codes in the world wide web. And also JavaScript said to be the world's most misunderstood programming language. So, this is a great book to read for any one who wants to see the real beauty of JavaScript.
The book has ten chapters and five appendixes which describes the good and bad parts of the language, and how to manipulate the good parts, and how to avoid the bad parts. I did read the book from the first page to the last page and found there is nothing to ignore or skip without reading. And my passion about JavaScript was increased exponentially because of this book, since I found there are many workarounds to overcome the limitations of the language.

After all, in any language the…

Javascript Module Pattern

Module pattern is one of the well know design patterns in JavaScript. I did read about this pattern, for the first time, in a publication done by Douglas Crockford. Since then, I have used this pattern in many occasions in my coding.

Using a module, an interface can be presented, by hiding the implementation and the state of an object. And it's a way of having private attributes and methods. A simple implementation is given below.


var containers = (function () {

        var module = {};

        var default_container_width = 500; //private property

        var possible_containers_list = new Array();
        possible_containers_list[1]="comments";
        possible_containers_list[2]="respond";   

        module.list = possible_containers_list; //public property

        function getContainerWidth() {//private function
            // ...
        }

        module.hideAll = function () {//public function
           // ...
        };

        return module ;
}());


To…

De Morgan's Laws in Programming

Recently, while I was reviewing some codes, I saw there were some conditional statements that check for the same condition but written in different ways. Most of these statements were written with common sense without using any mathematical analysis, since those are too simple to go for a more formal approach. The two identical conditional statements that has been written in different ways are given below.

01)

if ($comment['deleted'] == '1' || $comment['approved'] == '0') {
                unset($conversationsArray[$key]);
} else {
               ++$count;
}

02)

if ($comment['deleted'] == '0' && $comment['approved'] == '1') {
               ++$count;             
} else {
             unset($conversationsArray[$key]);
}

Obviously, the above lines say that the inverse of the first condition is equals to the second condition and vice versa. That is...

 ($comment['deleted'] == '1' || $comment['ap…