Fri, Apr 14, 2017

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.

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.

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.

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.

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.

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.