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
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,