Backstage Blog

• Intervene
• Web Development
• JavaScript
• Mocking
• API

Open sourcing intervene, a tool to selectively mock API responses and proxy everything else to the real API server.

• Engineering
• JavaScript
• Redux
• React

This post describes why and how we implemented a garbage collector in our Xbox application on top of Redux and in addition to the JavaScript engine’s regular garbage collector.

• Announcements
• API
• JavaScript
• SDKs

We are happy to announce version 3.0.0 of our SoundCloud JavaScript SDK.

The new SDK improves stream security and content uploading functionality, and modernizes the technology stack.

Version 3 of the SoundCloud JavaScript SDK is a major update and is not backwards compatible. That said, the changes that you need to make your web app work with the new SDK are easy to implement. Please refer to Migrating to JavaScript SDK 3.0.0 to upgrade.

ECMAScript 2015 and CommonJS

The original version of the…

• Announcements
• JavaScript
• SDKs

SoundCloud is pleased to introduce a new major version of the SoundCloud JavaScript SDK. In version 2, we’ve rewritten much of the internal code, resulting in better performance for your JavaScript applications and support for more streaming standards, such as HTTP Live Streaming.

You can test the new version by pointing your JavaScript applications to https://connect.soundcloud.com/sdk-2.0.0.js.

We’ve also created a guide to help you upgrade from version 1 to version 2.

JavaScript SDK version…

• JavaScript

The site soundcloud.com is a single-page application that displays a multitude of users’ images. At SoundCloud, we use a technique to make the loading of an image appear smooth and fast. When displaying an image on screen, we want it to display to the user as fast as possible. The images display in multiple locations from a tiny avatar on a waveform to a large profile image. For this reason, we create each image in several sizes. If you are using Gravatar, this technique also applies because you can fetch…

• JavaScript

Background

When we started to work on the new version of our mobile web app, we knew we wanted to run unit tests on a wide variety of clients, mobile devices, PhantomJS, and on Chrome when running locally. Because we practice continuous integration, we knew we also wanted Git hooks and proper results formatting.

We chose Karma runner, which is a project from the Angular JS team that provides developers with a “productive testing environment”. One of the advantages that Karma runner offers over other similar projects is its ability to use any testing framework. At SoundCloud, we aim to have the same toolset across various JavaScript projects, and our unit test framework of choice is Tyrtle…

• JavaScript

This article is also available in:

• Serbo-Croatian: Pravljenje novog SoundCloud
• Armenian: SoundCloud (ձայնամպ) ծրագրավորողների համար

The front-end team at SoundCloud has been building upon our experiences with the HTML5 widget to make the recently-released Next SoundCloud beta as solid as possible. Part of any learning also includes sharing your experiences, so here we outline the front-end architecture of the new site.

Building a single-page application

One of the core features of Next SoundCloud is continuous playback, which allows users to start listening to a sound and continue exploring without ever breaking the experience. Since this really encourages lots of navigation around the site, we also wanted to make that as fast and smooth as possible. These two factors were enough in themselves for us to decide to build Next as a single-page Javascript application. Data is drawn from our public API…

• JavaScript

Proper and effective error tracking is a common issue for front-end JavaScript code compared to back-end environments.

We felt this pain as well and experimented with different solutions over the past months on the SoundCloud Mobile site.

Analytics

The first approach we had was to track errors with Google Analytics. Their library permits to fire custom events and whenever an ajax error would occur, we would log it.

The biggest benefit of this tool is to monitor the stability of the site and its…

• API
• JavaScript

If you’re a JavaScript head, we’ve got something for you. SoundCloud now supports Cross Origin Resource Sharing, using XMLHttpRequest. Or, to put it another way: no more implausible JSON-P hacks.

Some background on CORS can be found here and here.  Our implementation is super-simple:  we let you do GET requests, for our public resources. Full documentation of the feature is on our wiki, but here’s a bit of code to get you started:

var invocation = new XMLHttpRequest();
// Internet Explorer uses a propritary object called XDomainRequest
var url = 'https://api.soundcloud.com/tracks';
function callOtherDomain() {
    if (invocation) {
        invocation.open('GET', url, true);
        invocation.onreadystatechange = handler;
        invocation.send();
    }
}

As we’re just setting headers, the implementation was done as an…