Greg Jopa

Last week I attended Google’s HTML5 Web App Hackathon event in Chicago, IL. Over 100 developers attended this one day event and got to spend the day at Google’s Chicago office. At the beginning of the event we split up into groups and got to design and develop an app of our choosing using HTML5. My team designed the HTML5 Cloud Composer app which lets you do basic music composition in the browser.

What if there was a standardized way to display interactive guitar tab on the web? And this guitar tab could be listened to and required no plugins to run, just a browser…

I built a web-based guitar tab player using Firefox’s Audio Data API and Vexflow. This proof of concept guitar tab player reads MusicXML files and dynamically generates tablature and audio using JavaScript.

Using jQuery I combined Flickr’s public photo feed with FancyBox to provide an interactive way to browse the latest Flickr pictures. My code pulls pictures from Flickr and formats them into a lightbox-style image gallery.

What if there was a standardized way to display interactive guitar tab on the web? And this guitar tab could be listened to and required no plugins to run, just a browser…

I built a web-based guitar tab player using Firefox’s Audio Data API and Vexflow. This proof of concept guitar tab player reads MusicXML files and dynamically generates tablature and audio using JavaScript.

Using ASP.NET MVC I created a mashup with jQuery Mobile and Google Maps. This app reads a list of locations from an xml file and creates a jQuery Mobile page for each location. Each page contains a map with a marker and an info window for displaying the location details.

Create, read, update, and delete (CRUD) operations are easy to perform in ASP.NET MVC. By using the default T4 scaffolding templates and strongly-typed views you can quickly build a web application that can create, update, and delete records.

Using ASP.NET MVC 3 I built a simple Billing Application that performs CRUD operations on an XML file. With LINQ I was able to quickly write code to update nodes in the XML file.

MUSIC.js is a music creation library containing functions and data sets to generate notes, intervals, chords, and scales.

With the new client-side script APIs (Firefox’s Audio Data API and Webkit’s Web Audio API) we have the ability to do audio synthesis (generate sound) with javascript. MUSIC.js is designed to make it easier to do audio synthesis with javascript by providing functionality for frequency calculations and transposing notes.

Many websites use CSS fixed positioning to pin elements to the top or bottom of a webpage so they never scroll out of view. This technique is commonly used for navigation elements on sites that require the user to scroll through many screenfuls of information on a single page.

I put together a demo that conditionally applies fixed positioning to a side navigation element when it scrolls to the top of the browser window.

Last week I attended Google’s HTML5 Web App Hackathon event in Chicago, IL. Over 100 developers attended this one day event and got to spend the day at Google’s Chicago office. At the beginning of the event we split up into groups and got to design and develop an app of our choosing using HTML5. My team designed the HTML5 Cloud Composer app which lets you do basic music composition in the browser.

How well do you know JavaScript? Here are some JavaScript interview questions I was recently asked. After the interview I had to research some of these because I got stumped… JavaScript is hard and hopefully this post helps you out on your next front-end web developer interview.

It’s common to use d3.js to render svg charts on the client-side. With the d3 node module you can render svg charts on the server-side as well. The d3 node module uses jsdom to simulate the browser’s Document Object Model (DOM) which allows for d3 selectors to work on the server-side.

Running D3 on the server with Node.js is pretty easy. You can reuse most of your client-side d3 code on the server. The only tricky part is integrating d3 widgets into your server-side views.