Developing Eventbrite Using Docker

Eventbrite is comprised of tens of different components – services, databases, tools and more, and running that all on a single virtual machine is fragile. Learn how we used Docker and our own tool “tugboat” to create a development environment where you can rebuild parts at a time, run different subsets of the site depending on the problem, and easily change and add new containers.

Andrew Godwin is a Django core developer and the primary author of both South and the new Django migrations framework. He works as a Senior Software Engineer on Eventbrite’s Architecture team, and has spent much of the past decade making databases do things they were never designed for. In his spare time, he also enjoys archery and flies private planes.

Learning ES6: for-of loop

So far in our Learning ES6 series, we’ve covered syntactic sugar features added with ECMAScript 6 (destructuring, rest & spread operators, and default parameters to name a few). But ES6 isn’t solely syntactic sugar. There’s new functionality as well. Some of these new spicy features are pretty advanced (like generators), but let’s start slow looking at the new for-of loop.

for loop image

TL;DR

The new for-of loop introduced with ES6 allows for iterating over an array (or any iterable) in a succinct fashion similar to how we can iterate over the keys of an object using for-in.

let list = [8, 3, 11, 9, 6];

for (let value of list) {
  console.log(value);
}

For the most part, there’s nothing really too earth-shattering here. We just now get the functionality that exists in other programming languages and has been sorely lacking in JavaScript. But keep on reading to learn the ins and outs!

Continue reading

Commenting JavaScript code with JSDoc

Software developers do not document their code very often, that’s especially true for JavaScript. That’s a problem when they jump into parts of the code they are not familiar with (or they forgot about) and there are no docs or comments.
How can we avoid this? In this post, I will talk about how you can use JSDoc comments to clarify your JavaScript code and generate documentation for it.

My Experience

Some months ago, I spent some time reading a bit about JSDoc. I found it really interesting, so I decided to use JSDoc comments in the next projects I tackled at Eventbrite.

Over the last few months, I had the chance to use JSDoc comments in three ‘types’ of codebases that I think represent three different archetypes of code. Let me introduce you to them: I’m breaking it down into The Good, The Bad & The Ugly.

Continue reading

Learning ES6: Destructuring

After learning all about default parameters and rest & spread operators, let’s continue the syntactic sugar train in our Learning ES6 series with destructuring in ECMAScript 6.

TL;DR

Destructuring makes it easier to work with objects and arrays in JavaScript. Using a pattern syntax similar to object and array literals, we can poke into data structures and pick out the information we want into variables.

// object pattern matching
let {lName, fName} = {fName: 'John', age: 15, lName: 'Doe'};

// array pattern matching
let [first, second, third] = [8, 4, 100, -5, 20];

// output: Doe, John
console.log(lName + ', '+ fName);

// output: 100, 4, 8
console.log(third, second, first);

As you can see, we can store properties of an object or elements of an array using pattern matching. You can find many more examples in the destructuring code examples which are part of the Learning ES6 Github repo.

If you’re finding destructuring intriguing (or maybe confusing), keep on reading for a more in-depth explanation.

Continue reading

Safe-ish by Default: How the Django Security Model Protects Your Apps, and How to Make It Better

Senior Software Engineer Philip James gives a deep-dive into the Django security model, and everything it does by default to make your apps safe. We’ll be doing a rundown of what’s enabled on a base Django install, some best practices to make your app even more safe, and some third-party packages and tools to lock down your Django Application.

Philip James is a Senior Software Engineer at Eventbrite. In his spare time, he writes novels, makes twitter bots, and gives technical talks. He used to run a webcomic, but there’s just no money in it, you know? Philip is a refugee from the video games industry, and wishes anyone still there the best of luck. Philip believes in the Web.

Mobile Safari (Whyyyy?!)

Have you ever felt the fear when someone from the Executive team finds a bug on your site? I have. Recently. It’s all because of mobile Safari.

I’m one of the engineers on the Listings team at Eventbrite. We work on the event page, which I like to think of as the heart and soul of Eventbrite. All was well in the land of Listings, until one day someone on our E-team noticed while scrolling the event page, the “Get Tickets” button required two clicks to get to the ticket purchase modal.

ios-safari-button

And thus began the month long saga of finding a solution to this problem. It turns out that the normal behavior of mobile Safari is to shrink the top address bar and hide the bottom navigation bar on scroll. When an approximately 44px high space on the bottom of the window is touched, the bottom navigation bar reappears.

Continue reading

Learning ES6: Rest & Spread Operators

Let’s continue the Learning ES6 series and look at the new rest and spread operators introduced in ECMAScript 6 and how they can make our code both cleaner and clearer. We’ve already talked about default parameters and block-scoping, so play catch-up if you need to!

TL;DR

The ES6 rest operator is three dots (...) preceding a function header parameter and should be able to completely replace the need for the problematic arguments special variable:

function join(separator, ...values) {
	return values.join(separator);
}

// all of the parameters after the first
// are gathered together into `values`
// which is a true `Array`
// output: "one//two//three"
console.log(join('//', 'one', 'two', 'three'));

And we should no longer need the apply function with the new ES6 spread operator, three dots (...) preceding a function call argument:

function volume(width, length, height) {
	return width * length * height;
};

// the array values are separated into
// separate parameters
// output: 80 (2 * 8 * 5)
console.log(volume(...[2, 8, 5]));

These quick examples are only scratching the surface of how to use the rest and spread operators. Be sure to check out the full suite of parameter handling code examples (a part of the Learning ES6 Github repo) and keep reading.

Continue reading

Learning ES6: Default parameters

The Learning ES6 series continues with a look at default parameters in ECMAScript 6. If you don’t yet know about let and const in ES6, you should check out the previous post on block scoping to catch up.

TL;DR

ES6 allows for function headers to define default values for parameters, marking them as optional:

function getData(data, useCache=true) {
	if (useCache) {
		console.log('using cache for', data);
	}
	else {
		console.log('not using cache', data);
	}
}

// `useCache` is missing and is `undefined`.
// therefore `useCache `defaults to `true`
getData({q:'churches+in+Pittsburg'});

This quick example is just a tip of the iceberg. Be sure to check out the full suite of parameter handling code examples (a part of the Learning ES6 Github repo) and keep reading.

Continue reading

Leveling Up D3: Test Driven Development

In the previous post, I introduced the Reusable Chart API and its multiple benefits when compared to the standard example-based approach of building D3 charts. This time, I will go into deeper detail about how you can further advance your workflow. By using Test-Driven Development when building your D3 charts, you will be able to embrace change, mercilessly refactor your code and at the same time, get executable documentation for your components.

tdd-d3-rgr

I’ll walk you through the creation of a simple bar chart using Test-Driven Development (TDD). But first, let’s compare this with a common approach to writing d3 code.

Continue reading

Code Review: The art of writing code for others

Writing code is no longer a solo activity. Instead, reading and working within existing code has become far more important.

So how should we be changing our development process knowing that code is meant to be written once, but be read many times?

At Eventbrite, code review has become one of our most productive habits for building better things together. Making sure we write and modify code in a way that others—and our future selves!—can read well requires a new mindset and some deliberate choices.Code Review

We don’t work alone anymore.

Plenty of us crave time alone to solve a problem from beginning to end, but we’re not doing ourselves any favors with that approach. Ultimately, shutting out input from a healthy variety of stakeholders is the fastest way to end up with a faulty, less robust solution.

If we want to write and maintain code that’s readable for lots of other people, we need to work with lots of other people.

Iterating through a rapid feedback loop with others before jumping straight into the code is often the best way of arriving at a strong solution—even more so when the code has been written by someone else and we’re modifying it.

Only a broad and deep understanding of the relevant context allows us to ultimately build an elegant solution that benefits anyone affected by it.

Continue reading