New Program: Unpaid Work for Puerto Rico Relief

Puerto Rico needs lots of help. Indeed, for its people to have regular access to basics such as clean water, drinking water, and electricity, a relentless response of unprecedented scope is required. This situation is dire. It is similar to Haiti after its 2010 earthquake, or perhaps Europe after World War II. I do believe the U.S. military and FEMA will be the major doers in the region, but because of red-tape and infrastructure deficiencies, their work must be supplemented by volunteers and charities. Given that Puerto Rico already faced depleted and damaged resources before the storms, our help is all the more needed. Puerto Rico needs money.  So let’s raise it.

After some thought on how I could help, I’ve struck upon an arrangement for October. I will work unpaid for up to 20 hours per week in exchange for direct, verified contributions to the Ricky Martin Foundation’s Fund for Puerto Rico. Organizations that hire me benefit from both the work and the charity contribution, as a tax deduction. I’m happy because I’m solving problems and directing money where it is needed. Puerto Rico benefits because its people can access the funds of the Ricky Martin Foundation as a supplement / substitute for government aid.

Guys: Puerto Rico is in misery. We must alleviate their pain. It is a moral imperative.

In cases where I do not obtain at least 20 hours of such work, I will instead give my employment to any organization that is directly assisting the relief efforts in Puerto Rico and other Caribbean islands.

If you have suggestions of such organizations, or ideas to refine this program, please share.

I have provided details over at Ha Ha Hanley, as that is where we’ll manage and promote the program.

Work for The New York Times

It was a big thrill working at The Old Grey Lady in midtown Manhattan. I helped achieve much in their Marketing Services department. Paid subscriptions went from one-half million to more than 3 million. A steady stream of new apps such as Top Stories, Cooking and Real Estate were built, requiring ads and landing pages. A robust roster of events and conference series demanded custom websites and content management systems. International initiatives like localized pricing needed programming chops to operate dependably and accurately. Bold ideas like “Sponsor a Subscription” called for an experienced problem-solver to code, test, and enable social sharing. A co-branding program required a steady but flexible templating system. Integrating new technologies like ApplePay demanded a developer who could get through the technical specifications and marry it to an art director’s design.

New York Times Sponsor a Subscription / Support the mission of The Times.

I was directly involved in all such endeavors, splitting my time between developing creatives for NYT events and to building ads and landing pages to drive sales of subscriptions to The Times and its apps.  As a contractor rather than an employee, I was allowed to work extra hours and given wide leeway to meet directly with the various stakeholders of each project, to assure things were in sync and optimized. That’s why I came to know such a variety of professionals, both in the business, analytic, and creative sides.

Look West website to promote upcoming events and showcase prior events.

I will blog some entries about certain projects I helped execute for The Times. If you wish to learn about me working AT The Times, there’s a post for that too!

Build a Virtual Record Player

I built a virtual record player.  It is a virtual machine, rather than a representation. The player has components that resemble real-life components, and they act in a way that is internally valid and hues to what is expected from a real player. For instance, there can not be a status in which the Arm is not moving but sound is playing.

Screen of my virtual record player

I will detail here some of the challenges I faced, decisions made, and give credit where I received help.  The tools I used were : CSS3, PhotoShop, HTML, and JavaScript / jQuery. (the music itself was recorded by me and some friends and mixed in ProTools).

First, here is the webpage that holds my virtual record player.

One major decision was to use pixel sizing rather than percentages. That’s because I wanted to control the experience and have more options available to me regarding animation. I knew that the users would be able to zoom in as desired, so I found a size on-load that looks nice even on a large screen. (And on other hand, that I could force a zoom-out on smaller screens). That size for the vinyl record is 360px x 360px.

Using an image for the record(s) might seem a limitation. Sure, one could devote time to making a CSS circle(s) that a user could then color to their liking, and add text… and perhaps we could approximate the shadowing of the disc, but I wanted to make a record that looked good. Photoshop is where a developer would want to layout their record’s art / labeling. That’s what I did. And it saved my programming resources for the operation of the machine rather than customizing per user.

Blank PNG disc. Before Photoshop.

To design the player components I studied my own real-life player by Technics. I decided against skeuomorphism but to use flat, simple components. I wanted accuracy in placement and operation, not so much to make things look real-life. I also wanted to give users a modern experience that they would expect from all digital / websites. So certain liberties were taken but also some restrictions put in place (get to later).

So: to make a player that shows a Single (45) playing (with an adaptor) on a full-size (LP) record player.

The HTML elements are :

plate (holds disc)
spindle (inner Circle, adaptor) – uses absolute positioned CSS circle.

Let’s jump to some action and math !

The rotation of the disc and movement of the arm is based on the CSS transform:rotate property. It is manipulated through JavaScript, because the movement is connected to and must be mindful of other things going on (whereas CSS animations do not even allow for a callback function).

We want the disc to continuously rotate 360 degrees (round in circles). So I have a little function that calls itself every X milliseconds to move a degree. How do we define X ? To start, look at the name “45” or “45 rpm” .. revolutions per minute.

One revolution = 360 degrees. 45 revolutions is 360 x 45… 16,200 degree movements per minute. If a minute is 60,000 milliseconds, we get the ms interval like so : 60,000 / 16,200 .. or 3.75, which we round up to 4. Our javascript function calls itself to rotate one degree every 4 milliseconds.

The movement of the stylus confounded me, especially as I wrongly believed the arm moves 45 degrees. After more study of my Technics player, I understood that the arrangement is such that the top of the stylus to its needle, to the center of the disc is a right triangle. BUT… the arm only needs to cover an area half the length of the sides (itself) — just the actual vinyl not the label. You want to further limit the movement needed to cover that length.

One way is to slightly angle the bottom of the stylus (the wider, black shape) slightly inward (as much as you can while still assuring movement to the center of the disc). Also helpful is grasping the nature of the tone arm, which (hint : “arm” ) resembles a human joint. A lateral motion originating in the joint throws off a disproportionate motion of the limb. You have to represent this “upper rigidness.” By dividing the stylus into a couple pieces, you have leeway to give different rotation to the upper “motor” versus toneArm (and stylus as whole).  The motor / housing also provides cover to conceal the horizontal rotation. I ended up with success making the Stylus move (thus, both the motor and arm move in concert).

draft Ball and socket solution considered for Stylus movement …

To get this in place you have to do some trial and error of altering the positioning of the stylus on the disc by using the browser’s inspector and changing the CSS rotate property to derive a proper start and end point. The locations I mustered are : At Rest (-4 degrees); Begin Play (7 degrees); End Play (26 degrees). During the course of the song, the stylus moves 19 degrees.

19 degree movement during song playback.

At what rate does the stylus move? You have to calculate in the usual fashion for rate– R = t/d .. Time is the duration of the song. I track this in my global variables rather than extract it from the audio meta data. (Again, we’re only dealing with 2 songs. The owner will want to control this information; this is not an automatic player of any mp3).  I’m using 2 abbreviated versions of songs I recorded a few years ago when I pretended I was a bluesman (long story).  The Side A is 147 seconds, or 147,000 milliseconds. My script does this division of sideA.songLegth / armDistance … and tells itself what rate to move the arm during the song.

In similar fashion, once we give the user controls to Rewind and Forward, the system must know how far to move the stylus. The number you need to plug in , is the desired time interval. I decided 15 seconds. The script divides 15 into the song’s duration in seconds. This tells it what proportion of the song is being jumped (var songSeg). Then it divides that number “songSeg” Into the Total degree movement during the song (calculated earlier as 19 degrees).  In our example, 147 seconds / 15 seconds  = 9.8 song segments. Total arm movement is 19 degrees, so that gets divided by 9.8 and the script knows it will move the arm 1.94 degrees.

(Note: you have to be careful of when to use Round Up verses Round Down “floor”. For degree changes, being mindful that it will compound with each Jump, you can use the actual value, rather than have a situation where successive jumps cause the stylus to go beyond the center).


I’ve written much here, so let’s “skip” to 2 important elements of the project. First, is something cool — “flipping” the record. The rotation to reveal / hide an “underside” .. uses CSS that was spelled out by David Walsh in his blog. For our purposes, we also want to simulate the “raising” and “lowering” of the disc. This involves the CSS scale property, which we set in a javascript function. This is an example of pulling this to work together : on click of Flip, the system needs to stop Music, set the stylus to start position, stop spinning, raise itself a bit, move to the left a bit (to clear the spindle and tone arm), raise itself incrementally, THEN flip itself (trial and error to get proper transform-origin property since the Size of the disc when beginning the flip will not equal its resting size when animation is complete).   .. and then call a function that “prepares to play B.”

function to distinguish Playing song versus needle.

Another cool aspect is the “needle sound.” This was tricky because of a high level decision that to be accurate, it is the Player/Needle that makes the needle sound; rather than faking it by adding to the mp3 itself. Thus it is the lowering of the needle, and other instances where music is not playing but arm is on the disc, that generates the needle sound. What made this aspect complicated, and which effected the whole system, is Apple’s iOS not allowing more than one Audio object instance. Because the Side A, Side B, AND the needle sound have to share a audio object there must be quite a bit of tracking what should be playing.  Mostly this impacts the system’s “Listener” function which is called while the audio is playing.


So, I have to call it a day here in Blogville. You might want to know why I went to the trouble of making the virtual record player. I am starting a record company, and trying to figure out what that means these days. So I wanted an option to have a virtual player, but there are none at hand on the great Internet. This project also allowed me to work with the newest CSS 2-D and 3-D transformations, and to get back in the swing of web development after a summer break while I renovated a home.



Thank you jQuery, David Walsh Blog, MSDN, Source of Disc Image, Needle Sound.