Posts

Building a Custom HTML5 Audio Player With Javascript

Sun, May 4, 2014

This tutorial details how JavaScriptpt, HTML, and CSS can be used to make a custom HTML5 audio interface. It is divided into three sections.

The Play Button
Track Progress
Changing Track Position

Here is the code for the audio element that we will be controlling.

<audio id="music" controls="controls">
  <source src="music/onlyidreamwithyou1.ogg" type="audio/ogg" />
  <source src="music/onlyidreamwithyou1.mp3" type="audio/mpeg" />
</audio>

Hugo Site Deployment

Fri, Apr 14, 2017

I built my site with Hugo and am hosting in on GitHub Pages.

My site is in a directory named alexkatz-hugo. I run hugo on the command line to generate the site into the public directory. The public directory is a submodule.

To deploy my site I run a shell script that clears my public folder, generates the site with Hugo, and commits and pushes my changes.

Before generating the site, my script removes all files and directories from the public folder, except for the .git directory and CNAME file. It is important to clear the public directory because running hugo does not remove previously generated files. If you don’t clear the public directory you may end up deploying drafts or deleted content.

See the documentation for more details.

Here is my deployment script.

Binary Search Tree

Sat, Apr 8, 2017

This post will discuss how to connect a BST implementation to d3.js.

I recently implemented a Binary Search Tree in JavaScript. It was a fun exercise and a great opportunity to use ES6 Classes.

Below is my code for the Binary Search Tree class, Node class, and their insertion methods.

CSS Placeholder Text

Fri, Mar 10, 2017

How can you find all empty elements on a web page and populate them with placeholder text?

My first thought was to use JavaScript, loop through each element, and populate the empty ones. This approach works, but CSS provides a simple solution.

*:empty::before{ 
    content: "Please Add Information"; 
}

Using SVG in an Interface

Wed, Feb 22, 2017

Even though I have been working with SVG in Illustrator for years, it wasn’t until last week that I began exploring its application in web development. To start my learning I completed a few video tutorials and researched how SVG is manipulated with CSS and JavaScript. I found a myriad of beautiful SVG animations and visual experiments, but it was not clear how to leverage SVG to enhance UIs. That was until I overheard two of my coworkers discussing how to implement a radial meter to track memory usage in Bluemix.

SVG Mask

Sun, Jan 29, 2017

Although this technique is not new, I still wanted to share it. In the past if I wanted to change the color of an icon on hover I would have changed the background of the element to a differently colored icon. The CSS would have looked something like this. .icon{ background:('path/to/icon.png'); } .icon:hover{ background:('path/to/different-icon.png'); } This doesn’t seem too cumbersome, but for each icon you need two files with differently colored icons.

Image Upload with Node and Multer

Sat, Dec 3, 2016

This tutorial provides an end to end walkthrough of uploading images in Node with Multer. To make things simple I am providing an app-template and complete code. Feel free to use the template or an app that you are working on. App-Template Complete Code I am using Multer 1.2.0 and Node 6.4.0. Install Multer, Mime, and Cryto and save to dependencies. `npm install -S multer` `npm install -S mime` `npm install -S crypto` Require depencies in route `index.

Google Analytics Embed API

Sun, Aug 14, 2016

The Embed API is a JavaScript library that lets you create custom dashboards for Google Analytics that can be hosted on your own site. Why bother creating a dashboard programmatically when you can just create one using Google’s site? Because you can make a better one, control its styling, and accomplish things that cannot be done through Google Analytics alone.

There is a Google tutorial on the Embed API which I used and and enjoyed. I am borrowing from it, but am filling in gaps and adding sections.

To see the types of dashboards that can be built using the API, check out the Embed API demos.

Multiple HTML5 Audio Players

Tue, Aug 25, 2015

This is a follow up to my original article, Building a Custom HTML5 Audio Player With Javascript.

A number of people have asked me how to make multiple audio players on one page, so I decided to figure it out. I am posting the code before writing a tutorial so it can be used for your projects.

In brief I created an object called AudioObject for each track and store each object in an array. By storing all the tracks I am able to access each players audio and the components of their interface. I also created a lookup table that maps components like a playbutton or playhead to the array index of the correct AudioObject. The code is well commented, but still needs to be refined and further tested.