Matthew Spencer

More or less how I setup an iTunes alternative

Wed, 15 Jan 2020 00:00:00 +0000

In 2020 my resolution was not to use music streaming services and spend money in a way that goes more directly to artists through Bandcamp, Resonate, or iTunes. One problem I ran into tho is that iTunes is pretty buggy these days — asking me to log in over and over and randomly quitting while I’m listing to music.

Since most of my time spent listening to music is at my desk at work I was looking for desktop options primarily. I couldn’t really find many and felt so-so about the options until someone mentioned MPD (Music Player Daemon). Since I didn’t really find it easy to setup at first I wanted to share my experience setting up mpd with ncmpcpp (NCurses Music Player Client (Plus Plus)).

First here’s my best explanations for what these are:

mpd

It plays audio files, keeps a database of music, and can be used to make playlists. It can run off a networked server or locally on a laptop. It has no visual interface.

ncmcpp

It is a text-based interface for mpd that runs in a terminal.

Installation

I used Homebrew to install them although I’m sure there are other ways:

brew install mpd
brew install ncmp

If you want to use last.fm with MPD you will also want to:

brew install mpdscribble

Setup

~/.mpd/mpd.conf

MPD needs to know a few things when it starts like where your music files are and where it should save state, playlists, etc.

music_directory    "~/Music"
playlist_directory "~/.mpd/playlists"
db_file            "~/.mpd/mpd.db"
log_file           "~/.mpd/mpd.log"
pid_file           "~/.mpd/mpd.pid"
state_file         "~/.mpd/mpdstate"

Which I believe you’ll need to create:

mkdir -p ~/.mpd/playlists
touch ~/.mpd/{mpd.db,mpd.log,mpd.pid,mpdstate}

Next I struggled with the audio_output configuration a bit, especially with bluetooth headphones, but the following works great for MacOS:

audio_output {
    name       "default"
    type       "ao"
    mixer_type "software"
}

There’s a bunch more options but these are the most important.

~/.ncmpcpp/config

Most of my config is personal preference, but I wanted to talk about a few parts:

Ignore the from artist names (put The Raincoats under r not t) using ignore_leading_the = yes
I use 25% left pane locked_screen_width_part = 25 with the visualizer startup_screen = visualizer and 75% right pane with the playlist viewer startup_slave_screen = playlist focused by default startup_slave_screen_focus = yes (ugh I know master/slave nomenclature)

Also as above there’s a bunch more config options I don’t talk about.

The Visualizer

I really like the ncmpcpp visualizer — it is cute and feels futuristic. To set it up you’ll need to tell mpd to output the visualizer bits and configure some preferences in ncmpcpp.

In ~/.mpd/mpd.conf:

audio_output {
    name   "visualizer"
    type   "fifo"
    path   "/tmp/mpd.fifo"
    format "44100:16:1"
}

(I assume fifo refers to “first in first out” but I’ve never specifically looked into it.)

And in ~/.ncmpcpp/config:

# I think this has to match the name above,
# but I never really looked into it
visualizer_output_name = visualizer

## defaults to 30
visualizer_sync_interval = 30

## no  - 44100:16:1
## yes - 44100:16:2
visualizer_in_stereo = no

## spectrum, wave, wave_filled, ellipse
visualizer_type = ellipse

Definitely check out the different types, but ellipse is my fave.

Starting

To start mpd it is best to use Homebrew:

brew services start mpd

Note: You can sudo brew service start mpd if you want to run it at boot, but since I rarely reboot I opted not to since it makes configuration paths more of a pain.

To start ncmpcpp:

ncmpcpp

Keyboard shortcuts

`ncmpcpp` shortcuts I use most

p play/pause
` (backtick) in playlist edit to open random then s for songs and 50 or whatever amount
1-8 for different screens, especially 1 for the current playlist and 4 for the normal 3 column artist/album/song view
q quit
u update the mpd database

I also setup vim-like bindings since I expected them to work and they didn’t.

Setting up media keys

This part was a real pain. Basically to use the play/pause, next, and previous keys you have to do the following.

Install Karabiner to edit MacOS key bindings:

brew cask install karabiner-elements

Install mpc for a simple interface to mpd:

brew install mpc

Configuring Karabiner:

Open Karabiner-Elemnents.app (you’ll want to have this open with the Login items)
Bind the media keys for the following in complex modifications:
- play/pause /usr/local/bin/mpc toggle
- prev /usr/local/bin/mpc prev
- next /usr/local/bin/mpc next
I found it easiest to edit ~/.config/karabiner/karabiner.json directly instead of the editor

Note: You can either use the fn key or not, but whatever you put in the config will work that way disregarding the setting in System Preferences.

Adding new music

One day I intend to setup beets for organizing files, but today I still use iTunes to import new music and hit u in ncmpcpp to update the mpd database.

Becoming a web developer!

Fri, 08 Apr 2016 00:00:00 +0000

A friend asked me recently for a rundown of things to learn to get an entry-level web developer position. The following is the email I sent, which ended up being longer than I initially anticipated! All of this I based on my experience. I’m curious to hear of any resources I may have omitted due to ignorance. This could likely be improved!

So a few things in general:

I’ve learned way more from trying stuff out than reading about it. Like we might be different kinds of learners, but I think side / example projects are invaluable. Even if they are just like for personal uses.
I Google everything all the time.

HTML

HTML5 For Web Designers: A book about newer stuff happening with the HTML spec. Also has a good history. (The full text of the book is available online).
Dave Raggett’s Introduction to HTML: A very mellow guide to how HTML documents are structured. I suspect you know a lot of this already.

CSS

Getting started with CSS: Goes a bit into the history of CSS, how it works, some tutorials and examples. It’s a little dry, but it is the best I can think of.
Mastering CSS coding: A little dated, but gets into the box model, which is important.
Responsive Web Design: I turned this into a whole section (below) because it is super important.
CSS Preprocessors: Writing CSS can be repetitive and tedious, so people write in languages that get compiled to CSS like Sass and Less. It’s better to learn CSS first, but this is something you’ll likely run into down the line.
CSS Frameworks: Again, writing CSS can be really fun and rewarding, but also a drag. There are tons of CSS frameworks that try to offer common patterns, especially for things like layout. A good example is Bootstrap.

JavaScript

JavaScript For Cats: A pretty good introduction to JavaScript and interacting with the browser console. Actually pretty good introduction to programming concepts in general (loops, arrays, objects…).
A re-introduction to JavaScript: Goes in deeper on JavaScript as a programming language.
JavaScript: The Good Parts: Another book (PDF), gets way more technical.

Blogs / Resources

CSS-Tricks: Definitely more than CSS. Lots of good examples/tutorials. Probably end up here Googling for help.
HTML5 Rocks: Sponsored by Google. Goes pretty in depth to new stuff coming to browsers.
dropshado.ws: Gets into edge cases and minutiae of web development. Tends to be more advanced stuff.
MDN: Wiki for web development. Very good. Always opt for this over w3 schools in search results. (That site used to be good, but now it is shitty, full of ads, and kind of spammy).
Stack Overflow: Question and answer site for programmers. Often I Google something and end up here because someone has already asked and answered the question.
How DNS Works: A really good series on DNS, basically how like google.com gets resolved to a server somewhere.

Courses

The Lodge: From CSS-Tricks. Free.
Code Academy: Also free, some additional stuff not covered on The Lodge.
Treehouse: Cost money, more support (I assume!).

Tools

Text editors: They are all pretty good. Super teched out folks use vim or emacs (don’t use these). I use Sublime Text. Coda is nice because it has a built in browser for testing. Atom is like Sublime Text but free.
CodePen: Text editor in the browser. Nice feedback loop of edit => preview => edit => preview… Associated with the CSS-Tricks folks. Good place to get started.
Chrome Developer Tools: The cool thing about the web is you can always view the source of websites and see how they are made.

Git / Version Control

Atlassian’s Getting Git Right: The whole series of tutorials is pretty good, I refer back to it often. Good place to get started: What is version control.
GitHub: A git repository hosting service. Important, monolithic. This is me.
Tower: A good GUI for git. Cost money. (Graphical User Interface… as apposed to a Command Line Interface or CLI…) GitHub has a free GUI. It’s okay.

Responsive Web Design

This is perhaps more of a conceptual point, but is mega-important to writing CSS. So, briefly… websites used to be designed for a specific screen size (a long time ago 640px or 800px wide, in more recent eras 960px). After the iPhone (this is somewhat of a simplification, but you get the idea), the idea is to build websites that are flexible to any screen size (within reason), often considering the mobile screen first and expanding to the larger tablet and desktop views. This was an important conceptual change in the early 2010s, but now is 100% integrated with like everything. So mega-important. Anyhow, here’s some articles and books:

Responsive Web Design: Early article coining the terminology and discussing the benefits of the approach.
Responsive Web Design: What It Is and How To Use It: Kind of rehashes the previous link but gets more into media queries.
Responsive Web Design: Book by the guy who wrote the first article.
Responsive web design basics: Documentation of the technical details of responsive web design, made by Google.
Mobile First: Another book on the concept of developing for mobile first which I briefly mentioned above.

Web Standards

Oh god, this should also be mentioned. There used to be a time when each browser supported different things. Writing cross browser code was a nightmare. There was a big push for web standards. Things have gotten better, but there is still not 100% parity between all browsers, especially mobile. W3C & WHATWG both kind of manage the HTML spec, W3C for CSS too, and ECMA for JavaScript.

Vocabulary

CSS: Cascading Stylesheets
HTML: HyperText Markup Language
DNS: Domain Name System
API: application programming interface
GUI: graphic user interface
CLI: command line interface
Front-end: Things that happen in the browser—HTML, CSS, JavaScript.
Back-end: Things that happen on the server. Lots more programming languages, some common PHP, Ruby, Python, MySQL (databases), Node.js (JavaScript again, this is confusing I know)…

Browser extensions and restrictive CSP headers

Thu, 07 Apr 2016 00:00:00 +0000

Recently I’ve been working on browser extensions for Chrome and Safari. One of the major hurdles was dealing with sites that have restrictive Content Security Policy (CSP) headers. CSP headers are used to prevent XSS attacks or code injection from unauthorized sources. Some sites (e.g. twitter.com) make full use of them. And, the thing is, when you boil it down, browser extensions are just that, code injection.

Let’s say you wanted to load a stylesheet from your server, you’re likely to get this gnarly console error. This is the browser telling you that they honoring this site’s CSP. This is good and important, but is frustrating for our purposes.

One approach that I’ve been using for Chrome is using the browser extension to rewrite CSP headers. I’m going to show how this is possible here for posterity, but, spoiler, this is a bad idea and you shouldn’t do this and there are crazy caveats and I’m going to give you a better workaround!

Chrome has an API (chrome.webRequest) which gives you, the browser extension developer, access to every request the browser makes. To enable access to this API add webRequest and webRequestBlocking to the permissions array in manifest.json:

Additionally, the webRequest API is only available for the older (deprecated?) Background Pages. To switch from the newer, more performant Event Pages set persistent to true in background object in manifest.json:

Okay, now let’s hook into the chrome.webRequest.onHeadersReceived event and rewrite some CSP headers!

Pretty wild right? Well this works, but there are said caveats. The major drawback to this approach is that only one installed extension can rewrite headers¹. This would only work for the most recently installed extension, so there are no assurances that doing something gross like this would even work 100% of the time. And this only works for Chrome, there are no parallels for Safari.

Now I said there was a better workaround. It is somewhat less gross and works for both extensions! Reading through Apple’s (somewhat inscrutable) documentation I discovered Safari extension code is sandboxed. This means the browser considers it safe and doesn’t consider CSP headers for code loaded from the extension. This mean an extension file could be used as a proxy to load files off of our server.

The idea is to use a content (or injected content) script to load an “unsafe” iframe inside of a “safe” iframe.² Below is the basic idea, but it can be accomplished in different ways:

The safe iframe looks like this and gets appended to the current page:

The linked script looks like this and is used to load the unsafe iframe³:

Then inside the extension’s background (or global) script:

Side note: Chrome needs these files to be whitelisted in the web_accessible_resources array in manifest.json:

So the essence of this approach: a safe iframe is loaded directly from the extension’s directory, its contents are deemed safe by the browser, magic. Hopefully this helps you in your future extension explorations.

The Chrome extension error indicating as much. ↩
This idea was definitely inspired by advertisers and their “safe” iframes. ↩
Chrome doesn’t think inline JavaScript is safe so it is loaded from an external file. ↩

setDragImage Edge Cases

Tue, 09 Feb 2016 00:00:00 +0000

What this is

The HTML Drag and Drop API is an important tool for building dynamic interfaces, but it is inconsistently implemented across browsers (which can be quite frustrating). The goal of this post is to enumerate some of these rough edges, specifically with regards to the setDragImage method on the dataTransfer object¹.

Firefox and the DOM

When using a custom element for the drag image, Firefox prefers it to be in the DOM. In fact, it won’t display it otherwise. Safari and Chrome permit this, but they don’t like it. They’ll often pick up weird artifacts in the drag image from nearby elements.

Unfortunately, there isn’t a good way to test for this other than looking at the browser’s user agent²:

It works like this, on dragstart add the element to the DOM for Firefox:

And on dragend clean-up the drag image:

Using an image

To use an image (or background image) for the drag image, it must first be downloaded. Otherwise the drag image appears blank on drag. Images can be prefetched using an image element:

Also worth noting, animated gifs do not animate when set as the drag image.

Positioning the drag image

The latter two arguments for setDragImage are the x and y offset of the drag image relative to the cursor. Often examples set these to a specific number like 0, but this differs from the normal img drag behavior which sets the drag image relative to the cursor position on mousedown.

To recreate this behavior, use getBoundingClientRect() to calculate the offset position:

Maximum drag image dimensions

Anecdotally these are the largest pixel dimensions for a drag image before cropping occurs:

400×400 - Safari/Chrome
700×450 - Firefox

Noting this, it is important to scale the dimension of the drag image as well as its offset position. The following scales the clientRect to the smallest maximum:

Firefox and window.devicePixelRatio

Unlike Safari and Chrome, Firefox sees the actual dimensions not the retina-scaled dimensions. Multiply the offsets by the devicePixelRatio, otherwise Firefox’s offset is always off on retina screens³:

Firefox and the drag event

Safari and Chrome provide dynamic mouse position on the drag event. Firefox does not (wontfix). To get around this just use the dragover event which provides the mouse position in all browsers.

Other notes

Firefox will not allow you to drag an element without the draggable attribute.
The drag image element accepts limited styling.

setDragImage is used to set a custom ghosted image that appears while a draggable element is being dragged. This post glosses over the basics of its usage, which is covered quite thoroughly in Setting a custom ghost image when using HTML5 drag and drop. ↩
It would better to have a feature test for this. I’m open to suggestions. ↩
Again, open to suggestions for feature detection in lieu of user agent detection. ↩

Bass: A Fish Wrapper for Bash Utilities

Tue, 09 Feb 2016 00:00:00 +0000

I use Fish for my shell and up until recently I’ve just dealt with its slow startup time. I treated it as my penance for being fussy about such things. But today I reached the limit of my patience and decided to track down the cause of this delay. I discovered was this was a commmon issue with the Fish wrapper for the nvm bash utility. The author of the tool has deprecated it in lieu of a general Bash-Fish bridge called Bass. After installing Bass, I was able to quickly setup the nvm command for Fish using the following function:

Safari’s weird mousemove

Fri, 11 Dec 2015 00:00:00 +0000

The implementation of Safari’s mousemove event differs in a notable way from Chrome and Firefox. After first mouse movement, Safari fires the event on key press of the modifier keys ctrlKey, shiftKey, altKey, and metaKey. For example, the following logs the event name in Safari without mouse movement.

Additionally Safari’s MouseEvent object uses the last known position values (i.e. clientX, clientY), which can create issues. To get around this behavior and ensure the mouse has actually moved, check against the last known position:

document.scrollingElement

Fri, 10 Jul 2015 00:00:00 +0000

Update October 2017

Chrome now uses document.documentElement for scrollTop. Chrome, Safari, and Firefox support document.scrollingElement.

When discussing animating document scroll with jQuery, there are often examples given like this:

$('html, body').animate({scrollTop: 200});

You’ll notice both the document and body elements are selected. This is due to inconsistencies between browsers. The standards mode approach is to use the document.documentElement, but quirks mode uses document.body.¹

While the approach to target both works, it can be potentially problematic. For example, if you have a complete callback on the animate, it will get called twice, once for each element:

$('html, body').animate({
  scrollTop: 200
}, {
  complete: function () {
    // I’m doing cool stuff after the animation.
    // Whoops! I’m doing it again.
  }
});

This can prevented using something like Underscore’s _.once(), but ideally we could solve for the root issue.

To that end, there’s a working draft for a new document attribute called scrollingElement. It would be used in lieu of documentElement and body as a consistent approach across browsers.

Unfortunately, there currently isn’t much support for scrollingElement². If you want to start using it today you could use this function or the polyfill.

For now, I’m continuing target both elements.

Firefox and Internet Explorer use the former, Safari and Chrome (and probably Opera) use the latter. ↩
At the time of writing, the next version of Chrome will support it (Chrome 44). ↩

Asynchronous gist embeds

Sat, 27 Jun 2015 00:00:00 +0000

I discovered recently that gist embeds use document.write(). This is fine in some cases, but it doesn’t work at all with asynchronously-loaded content. This is because document.write() can’t be used once the document has completed loading. document.write() is also blocking meaning that the document cannot proceed to load until the write is complete. If gist.github.com is slow to respond, your site will load slowly.

The good news is that we can get around this. Each gist has a JSON endpoint, which we can use to load the gist asynchronously. The following is a simple example using jQuery:

For a more flexible approach, please check out this jQuery plugin that I wrote. This site you are reading now uses it. That gist right there.

Get the current URL in WordPress

Fri, 26 Jun 2015 00:00:00 +0000

Sometimes you need to get the current URL (or path) in WordPress outside the loop (e.g. when a post ID is unavailable like on archive pages). There are different ways of handling this — constructing the URL using $_SERVER or the global $wp object — but I prefer the following approach for its brevity.

The idea is to use add_query_arg() with a bogus / empty query variable. This works because add_query_arg() has a fallback when no URI is passed. The falsey value removes the query variable from the path (this is how remove_query_arg() works).

// This will return the current path including query_vars
add_query_arg( '_', false );

// This will return the absolute URL
home_url( add_query_arg( '_', false ) );

Debug: a simple console.log wrapper with line numbers

Fri, 26 Jun 2015 00:00:00 +0000

Not all browsers support the console object in the same way or at all. While it is best to avoid running debugging code on a production site, there are times when you may need to (or think you do 😜). To get around these cross browser issues, the following helper function calls console.log() for you, first checking if the console object exits:

function debug(args) {
  if (!window.console || !console.log) {
    return;
  }
  console.log(args);
}

The issue with this function is that console shows the line and column numbers for this function definition instead of showing the line and column numbers of the caller. Not very helpful!

The following method resolves this by using bind and call, to act as if console.log() is getting called from the caller:

var debug = function () {
  if (!window.console || !console.log) {
    return;
  }
  return Function.prototype.bind.call(console.log, console);
} ();

Matthew Spencer

More or less how I setup an iTunes alternative

Installation

Setup

~/.mpd/mpd.conf

~/.ncmpcpp/config

The Visualizer

Starting

Keyboard shortcuts

ncmpcpp shortcuts I use most

Setting up media keys

Adding new music

Becoming a web developer!

Browser extensions and restrictive CSP headers

setDragImage Edge Cases

What this is

Firefox and the DOM

Using an image

Positioning the drag image

Maximum drag image dimensions

Firefox and window.devicePixelRatio

Firefox and the drag event

Other notes

Bass: A Fish Wrapper for Bash Utilities

Safari’s weird mousemove

document.scrollingElement

Asynchronous gist embeds

Get the current URL in WordPress

Debug: a simple console.log wrapper with line numbers

`ncmpcpp` shortcuts I use most