MP3 Playlist for Chromecast

Come to find out, I am a very retro guy when it comes to music. I have these old things that I like to use to play music, you may not have heard of them, they are called MP3s. They are kind of like 8-track tapes, but digital, not in the cloud, and not old enough to be cool yet.

How do you play MP3s via Chromecast?

The official answer is to use Google Play, but that implies that you want to both pay for that service and upload your files to the cloud. The unofficial answer is to drag and drop your MP3s into a Chrome tab and cast that tab, however this does not allow you to create a playlist.

Introducing Playlist for Chromecast

I have created a simple single page HTML 5 application that will act as a playlist for MP3s on your computer. Just download the project and open up release/playlist.html in Chrome, then drag and drop MP3s on to the page.

Development

I had a lot of fun making this, and I'm not done. I intend to use this project as a case study to talk about VSCode, TypeScript, SASS, HTML5 Audio, NPM, and unit testing. For now, I just wanted to start by getting this initial post up, but expect more to follow.

• Source on GitHub

What's next?

• Update project documentation.
• Create unit tests.
• Add theme support.
• Write blog posts about development.
• Maybe host it on a domain.
• Maybe submit it as a Chrome application.

Enjoy,
Tom

How to Debug Minified JavaScript

I recently wrote a blog post about how to control minification per request. However, that strategy will not help you if the minification itself is causing a bug.

Fortunately Chrome has an absolutely amazing set of developer tools that can help you debug any script, even one that have been minified! Just follow these very simple steps:

1. Navigate to the page in Chrome.
2. Launch the developers tools (by pressing F12).
3. Open the JavaScript file in the Sources tab.
4. Activate the amazing "Pretty print" feature.
5. Debug those scripts!

Enjoy,
Tom

jQuery UI Modal Dialog disables scrolling in Chrome

Is Chrome becoming the new IE?

As much as I love jQuery, I still cannot escape the fact that jQuery UI leaves a lot to be desired. Yesterday I ran across an issue where the jQuery UI modal dialog acted inconsistently in different browsers. Normally opening a modal leaves the background page functionality unaltered, but in Webkit browsers (I ran into this while using Chrome) it disables the page scroll bars.

The Fix

Yes, this bug has already been reported. Yes, it is priority major. No, it won't be fixed anytime soon. For a feature as widely used as the Modal Dialog, I find that kinda sad.

However, thanks to Jesse Beach, there is a tiny little patch to fix this! Here is a slightly updated version of the fix:

(function($) {
  if ($.ui && $.ui.dialog && $.browser.webkit) {
    $.ui.dialog.overlay.events = $.map(['focus', 'keydown', 'keypress'], function(event) { 
      return event + '.dialog-overlay';
    }).join(' ');
  }
}(jQuery));

Additional Resources

• Stackoverflow Question
• Official jQuery Bug - Ticket #4671
• Jesse's Patch

Hope that helps!
Tom