Eric Schaefer - software // music // nonsense

Work Studio in Effect

Mon, 03 Sep 2012 22:00:00 GMT

I'm finally settled in my new apartment in Neukölln, and rent is cheap enough here to afford extra space for a studio. So voila, here's the minimalist studio where I'll be working, with the only (welcome) distractions coming from the backgammon players at the shisha bar downstairs. The windows will remain permanently open until the rainy days of fall force me to close them.

In the meantime I will be neck-deep in some new Ruby on Rails adventures, and beginning a Functional Programming Principles in Scala course to keep me on my toes.

Plug and Play Performance Boost with mod_pagespeed

Tue, 09 Oct 2012 22:00:00 GMT

For real? This nifty Apache module just jumped out of beta, and an nginx version is available as well. Over 40 output filters that range from CSS rewriting to image manipulation and preprocessing. Google's Ilya Grigorik has a great writeup on it here.

Also launched: Axel Pfaender's web store

Sat, 03 Nov 2012 23:00:00 GMT

In an unlikely turn of events, I took on a Wordpress project this month as well. Take one look at this guy's stuff and you'll know why. Behold Axel Pfaender's web store. I had to make some significant changes to Shopp's core and UI files to make it play nicely with Germany's value-added-tax laws. The same would apply to a number of other EU countries as well. Anyway, the site is also multilingual, and I learned a lot about how internationalization works on the back end. Cool stuff. I'm just fantasizing about porting this whole thing to Rails though...

Building an audiovisual installation using PD

Sun, 03 Feb 2013 23:00:00 GMT

Creative code time. I started the putting together a PureData patch this week, based on a installation proposal my friend Nick and I collaborated on. The concept is to take video motion data from a room, and make the aggregate change in motion speed (people moving) directly influence a full-surround sound environment. No motion would result in a low drone, and quick motion would turn the environment into a responsive dance freakout technorave. It'll be rad.

Currently the patch just takes motion detection data and translates the values to influence a few oscillators. Time to switch those out for a looping audio file...

I'm making the code freely available on Github, too.

Launched: SAND Journal

Mon, 10 Dec 2012 23:00:00 GMT

Labors of love tend to get drawn-out longer than any other projects, at least for me. I think I began working on SAND's new website back in April after one of their editors approached me about the project during an event at the American Academy in Berlin. How could I turn down helping out a literary journal? I want my trajectory to include projects that are more culturally relevant or important, and the SAND staff are certainly working their asses off to make this journal amazing.

The website is built on Drupal, since content management was pretty central to what SAND needs. They needed custom content types to feature exclusive online content, which could include anything from photo-essays to video to issue previews to poetry and yeah anything in between. No fancy development footwork here. Just giving a boost to an already kickass lit journal.

Get a copy of SAND at a local bookstore if you live in Berlin.

Berlin Boombox launch and web store

Sat, 03 Nov 2012 23:00:00 GMT

Today I wrapped up the official website for the Berlin Boombox, which is a badass DIY soundsystem developed by Berlin designer Axel Pfaender. The site includes a lot of cool stuff, and some of the best-designed instructions ever. Since the website didn't really need any special app-like functionality, I built it on Drupal with a custom Zen-based sub theme. Coming soon will be an interactive Google Maps mashup on the "Buy" page, which will give a nice overview of the retail locations. Can't wait to see Axel's design ideas on that.

Launched: Kofelgschroa's Band Website

Sat, 06 Apr 2013 22:00:00 GMT

Kofelgschroa's website is a collaboration project with the mega-talented designers at Berlin's Sunst-Studio. I'll be working with them again on some other projects, so definitely looking forward to that. Swear to god, working with designers makes the development process so much smoother.

The website is built on Drupal with a totally custom Zen-based theme. I also made good use of Isotope for sorting and filtering the blog posts page in an elegant way that works on all browsers. Additionally, I'm finding that parts of Twitter's Bootstrap framework are insanely useful. I'm starting to think of Bootstrap as a collection of small front-end tools that can be plucked out rather than a static framework.

Automate responsive screen captures with Review

Tue, 19 Feb 2013 23:00:00 GMT

Review is an awesome node.js package that uses PhantomJS to grab screenshots of all your websites in different screen resolutions.

It's best said on the review Github page:

Updating large and possibly responsively designed sites can be a hassle. You never know whether your change breakes anything on the other end of your sitemap, or in a certain resolution, except if have a look at every individual page...in every resolution you care about.

Simply install review from the node.js package manager and feed it a JSON string of different websites and screen resolutions that you'd like to see them in. Highly recommended for anyone who needs to keep tabs on a responsive design, etc.

Install with the node package manager:

$ npm install -g review

Lots of detailed usage examples here.

How (Code) Language Creates Its Own Culture

Mon, 15 Apr 2013 22:00:00 GMT

Yesterday I participated in a discussion that Berlin-based startup ezeep hosted, in which we discussed the various cultures around programming languages, and how those cultures shape the real-life projects we work on. The topic stemmed from ezeep's recent decision to rewrite their backend in Python.

Something that Marian Zange mentioned struck me as the real meat of this discussion:

...even if you join our team through a marketing or sales route, you’ll get an engineering intro (the happy, smiling 'light edition') to explore parts of our code, learn how to read it and understand the inner-workings of our product.

This kind of intro for non-technical participants to a project's codebase was once unheard of. It's symptomatic of a larger trend in programming--I believe--that communication with those outside the walls of the programming community is essential to evolving a project, and more broadly, evolving how languages are structured. The culture around languages like Python and Ruby are certainly making coding more accessible to anyone interested. Free online tools like Code Academy seem to have caught on like wildfire, and in the long term, will simply make people smarter and more well-rounded problem solvers. And as long as companies like ezeep take the time to explain the inner-workings of their product to their employees, we might see less of a dividing line between the technical and "non-technical" camps among people that have a common interest in technology.

Launched: Filmcake's Website

Sun, 08 Dec 2013 23:00:00 GMT

Another successful launch in collaboration with the rad Sunst-Studio design team in Berlin. The Filmcake website is fully responsive and was built on Wordpress, using the Bones base theme, which I found incredibly flexible, and comes with minimal Javascript weight. Additionally it comes with both LESS and SASS starting points (choose your poison) baked-in for rapid styling and development.

This was a very straightforward project with no technical hurdles, and raw development time was probably only two weeks.

Launched: Bechstein Network

Mon, 21 Apr 2014 22:00:00 GMT

Yet another launch in collaboration with the ever-badass Sunst-Studio design team in Berlin. The brand new Bechstein Network website is built on Wordpress, which provides a familiar backend for the network members. Easy posting was paramount for this project, so members (galleries, clubs, restaurants, architects, etc) can quickly showcase events and work.

A customized filtering system was built to find network members based on categories, and network member profile pages have a flexible back-end that allows members to highlight their strengths and showcase detailed photos of their work.

This is also the first project I used gulp for a build process in both development and production environments.

The quickest way to set-up live reload in Chrome

Fri, 13 Dec 2013 23:00:00 GMT

Front-end development just got a little easier. Ever wanted to have like four browser windows next to each other, and have them automatically refresh when you've made an update to the project's javascript, CSS, or whatever?

I read a bunch of walkthroughs on setting up guard and guard-livereload through the terminal, but hopefully I can save you from having to do that as well.

Setting up LiveReload through Sublime Text 2's package manager is a much easier option.

So, to get directly to the point:

Open Submlime Text 2 and install the LiveReload package through Package Control.
Re-open Sublime Text 2 and open up whatever project directory you're working from.
Install the Chrome browser extension called LiveReload (or the same extension for Firefox). Once it's installed, toggle the extension.
Navigate to your dev project in Chrome, and behold it automatically updating when you save changes in ST2!

Launched: Benjamin Obdyke

Mon, 06 Jan 2014 23:00:00 GMT

Since May 2013 I've been working with the insanely talented designers and developers at King Design. My time there has been pretty nuts; lots of client work, jumping into projects that have been brewing for many months.

I'm proud to say my first complete front-end build with King Design is also my first ExpressionEngine build. And I have to admit, ExpressionEngine rules. After a brief learning curve, I found the templating engine a breeze to work with. I still have a lot to learn, and I've only scratched the surface of what's under the hood in EE.

This particular project took a little under two months to code, which included a few iterations of functionality and design. More updates are on the way for this one too. I'm really looking forward to another ExpressionEngine project now!

Now Exhibiting in Berlin: PLAYING THE FIELD

Fri, 14 Jun 2013 22:00:00 GMT

The audiovisual installation that I worked on with my friend Nick is now exhibiting in Berlin at the Staycation Museum. Here's an excerpt from their website:

Playing the Field

OPENING 14-16 JUNE 2013 (48 Stunden Neukölln)
Friday, 14 June, 19:00-22:00
Saturday, 15 June, 12:00-22:00
Sunday, 16 June, 12:00-19:00

CLOSING 28 JUNE 2013
19:00–22:00

Imagine an environment not as an ambience but rather as a complex ecology where each part is equally responsive and responsible in its own becoming. Key to this responsiveness is the awareness of inside and outside collapsing in the realization that each element is embedded in a constellation whose patterns exceed that of any single component.

We are embedded in our own affect.

All source code for the video and audio processing is now freely available on Github at https://github.com/eschaefer/field.

Here's someone interacting with it!

How to Render jQuery Flot Charts through AngularJS

Thu, 25 Jul 2013 22:00:00 GMT

There are lots of javascript data visualization and charting libries out there, but only a couple bother to minimize the IE8 compatability headache. Flot Charts seems to work nicely for my purposes on this particular project. I need bar charts and donut charts, both of which Flot handles well.

Thing is, I really want to use AngularJS for the project I'm working on right now. I don't know of any Angular-native charting libraries (though that would be a killer addition to Angular UI). Now I'm faced with the added layer of wrapping a jQuery plugin inside of Angular functions. What?

Luckily AngularJS can render Flot through a unique feature called a directive. Stackoverflow user jm- got me started in the right direction on this. I've expanded his example in my own JSFiddle, which renders a bar chart through AngularJS.

If you've worked with Flot before in regular ol' jQuery, then you're probably familiar with the Flot API. If you're new to Flot, then give the API a quick read. You can customize pretty much anything in your graph/chart with it.

Here's some example DOM markup:

<div ng-app="App">
  <div ng-controller="barChartController">
    <chart ng-model="data"></chart>
  </div>
</div>

Then the AngularJS:

var App = angular.module("App", []);

App.controller("barChartController", function ($scope) {
  var daftPoints = [[0, 4]],
    punkPoints = [[1, 20]];

  var data1 = [
    {
      data: daftPoints,
      color: "#00b9d7",
      bars: {
        show: true,
        barWidth: 1,
        fillColor: "#00b9d7",
        order: 1,
        align: "center",
      },
    },
    {
      data: punkPoints,
      color: "#3a4452",
      bars: {
        show: true,
        barWidth: 1,
        fillColor: "#3a4452",
        order: 2,
        align: "center",
      },
    },
  ];

  $scope.data = data1;
});

App.directive("chart", function () {
  return {
    restrict: "E",
    link: function (scope, elem, attrs) {
      var chart = null,
        options = {
          xaxis: {
            ticks: [
              [0, "Daft"],
              [1, "Punk"],
            ],
          },
          grid: {
            labelMargin: 10,
            backgroundColor: "#e2e6e9",
            color: "#ffffff",
            borderColor: null,
          },
        };

      var data = scope[attrs.ngModel];

      // If the data changes somehow, update it in the chart
      scope.$watch("data", function (v) {
        if (!chart) {
          chart = $.plot(elem, v, options);
          elem.show();
        } else {
          chart.setData(v);
          chart.setupGrid();
          chart.draw();
        }
      });
    },
  };
});

How to get this to work on IE8

Add <code>id="ng-app"</code> to the document's root element in conjunction with <code>ng-app</code> attribute
```
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="App">
  ...
</html>
```

Load the AngularUI IE shiv, at the bottom of your javascript file list, in an IE8-targeted comment, and declare the <code>chart</code> directive. IE8 won't load that <chart> element without this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/application.js"></script>
...
<!--[if lte IE 8]>
  <script>
    // Declare custom directive names and load shiv for AngularJS in here. Or else IE8 bummertown.
    window.myCustomTags = ["chart"];
  </script>
  <script src="js/ie-shiv.js"></script>
<![endif]-->
...
<body>
  ...
</body>

Launched: Openers

Mon, 09 Jun 2014 22:00:00 GMT

At long last, the minds behind Tech Open Air Berlin have launched a sister company called Openers. The primary goal of the website is to showcase their portfolio and strengths in consulting, media, events, branding and strategy.

The design was done by long-time collaborators Sunst-Studio, and I built-out the backend in Wordpress. Easy management of portfolio galleries, and flexibility to move content around made Wordpress a solid choice.

Go hire these folks if you want the best-connected strategists in Berlin!

Launched: Tech Open Air Berlin

Wed, 16 Jul 2014 22:00:00 GMT

In collaboration with Avalon Emerson, and with record time constraints, we built the 2014 edition of the Tech Open Air Berlin website. Once again I chose Wordpress to bolster easy content administration for the small team of event organizers. A number of custom content types, and lots of metadeta about events required building some custom plugins. More integration with Eventbrite would have been nice to dig into, but we simply didn't have the time to go that far.

How to Spoof a (Valid) Random MAC Address on Bootup

Wed, 21 May 2014 22:00:00 GMT

Updated for Yosemite 10.10.4

I spend a lot of time at coffee shops, using their wi-fi networks. I'm not sure who is operating these things, or if they're hacked, so I wanted to add a layer anonymity to my connection. Tons of routers record and store the MAC address of anyone connected. That makes me uneasy. Here's how I randomized a new (and valid) MAC address on every reboot of my MacBook pro, running OS X 10.10.4 (Yosemite).

Create a Bash script

Open your terminal. Let's create a folder and an empty script file in one swoop.

sudo mkdir /Scripts && sudo nano /Scripts/mac-random.sh

Nano will open up a new mac-random.sh file with blank contents. Paste the following in there:

#!/bin/bash

# disconnect the airport from any network

sudo /System/Library/PrivateFrameworks/Apple80211.framework/Resources/airport -z

# use OpenSSL to generate a random MAC address

mac=$(openssl rand -hex 1 | tr '[:lower:]' '[:upper:]' | xargs echo "obase=2;ibase=16;" | bc | cut -c1-6 | sed 's/$/00/' | xargs echo "obase=16;ibase=2;" | bc | sed "s/$/:$(openssl rand -hex 5 | sed 's/\(..\)/\1:/g; s/.$//' | tr '[:lower:]' '[:upper:]')/" )

# reassign the wifi adapter with the saved $mac variable above

# the wifi adapter in my case is "en0". yours may be different. run "ifconfig" to find yours.

sudo ifconfig en0 ether $mac
networksetup -detectnewhardware
networksetup -setairportpower airport off
networksetup -setairportpower airport on

Notice the elaborate chain of commands that we used with OpenSSL? Props to commenter osmium for that. This ensures that the least significant bit of the first byte is 0.

Save mac-random.sh with the new contents. Now we get need to reference this file on startup!

Load the Bash script on every bootup

But first let's make sure it has all the right permissions.

sudo chown -R root:admin /Scripts/mac-random.sh
sudo chmod u=rwx /Scripts/mac-random.sh

The kosher way OS X loads boot items is with a launchd .plist file. Let's create one which references the script.

cd /Library/LaunchDaemons && sudo nano com.superuser.macrandom.plist

Paste the following XML-style contents into the blank file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>Label</key>
  <string>com.superuser.macrandom</string>
  <key>ProgramArguments</key>
  <array>
    <string>/bin/sh</string>
    <string>/Users/ericschaefer/Scripts/mac-random.sh</string>
  </array>
  <key>UserName</key>
  <string>root</string>
  <key>GroupName</key>
  <string>wheel</string>
  <key>RunAtLoad</key>
  <true/>
  <key>Debug</key>
  <true/>
  <key>KeepAlive</key>
  <false/>
</dict>
</plist>

Save and exit nano. Then change the permissions on this file that you just saved:

sudo chown -R root:wheel com.superuser.macrandom.plist

Then load the file into launchd:

sudo launchctl load com.superuser.macrandom.plist

Check if you're good to go...

sudo launchctl list | grep macrandom

If you see the launch item, then this will load on boot!

Once you've rebooted, run ifconfig to check if your MAC address has changed for your wi-fi adapter (named en1 in my case).

Avoid a Headache: Precompiling Zurb (Foundation) on Heroku

Tue, 23 Apr 2013 22:00:00 GMT

It always happens. My pristine development environment is running my app just fine. Then I deploy it to Heroku and whomp, trouble abounds. Let's leave alone the fact that I'm using the zurb-foundation gem, and instead focus on the problem which has to be afflicting you as well if you're reading this.

I got this message in my Heroku log while deploying my app:

    ....
    Preparing app for Rails asset pipeline
    Running: rake assets:precompile
    rake aborted!
    File to import not found or unreadable: foundation/common/ratios.

Well, look in your assets/stylesheets folder, the zurb-foundation gem generated a file called <code>foundation_and_overrides.scss</code>. The first thing it does is <code>@import "foundation/common/ratios";</code>. So, what? Well, if you're lazy like me, you're loading the zurb-foundation gem without a specified version number:

group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'compass-rails'
gem 'zurb-foundation'
end

At the time of writing this, the zurb-foundation gem is at 4.1.2. Which means that 'foundation/common/ratios' is no longer included in the gem. The quick and dirty fix would be to lock the zurb-foundation gem down to 3.2.5 (thank you Stackoverflow). So now I declare the gem 'zurb-foundation' in the assets group like so:

gem 'zurb-foundation', '= 3.2.5'

Save your gemfile, now run <code>bundle update</code>, commit your changes to git, and re-deploy to Heroku. Should be smooth sailing and your assets should compile just fine.

Deploying a Rails Application to Dreamhost with Capistrano

Tue, 25 Sep 2012 22:00:00 GMT

I don't think there's a quick way to figure out your first "real" Rails deployment process. Sure there's Heroku (and now cloudControl, based here in Berlin) with magic one- or two-liner deployments. But they get expensive very quickly if you're running more than a dev server. Your file system also remains fixed after deployment, so you will end up storing your user assets in yet another cloud service. So for now I am relying on a cheap VPS from Dreamhost. A little more complex but also more flexible, and I'm learning a lot.

Some background before getting started:

Railscast: Deploying to a VPS
Capistrano on Dreamhost (kinda dated, but useful)
Syncing a git repository directly between your machine and Dreamhost. No GitHub!

I spent a good while figuring out a recipe to deploy a Rails app using Git with Capistrano on Dreamhost's particular hosting setup. I felt compelled now to share some of the snags I hit, so hopefully I can save someone else out there from wasting a few hours.

A Capistrano recipe for Dreamhost

I'm assuming you set up Capistrano in your app. My config/deploy.rb ended up looking like this. Read through just to get a sense of how this works with Dreamhost. All-caps should be replaced with your own values:

set :user, "YOURUSERNAME" # Your dreamhost account's username
set :domain, 'YOURSERVER.dreamhost.com' # Dreamhost servername where your account is located
set :project, 'YOURPROJECT' # Your application as its called in the git repository
set :application, 'YOURAPPFOLDER' # Your app's location (domain or sub-domain name as setup in panel)
set :applicationdir, "/home/#{user}/#{application}" # The standard Dreamhost setup

set :repository, "ssh://YOURUSERNAME@SERVER.dreamhost.com/home/YOURUSERNAME/repos/YOURPROJECT.git"

ssh_options[:forward_agent] = true
default_run_options[:pty] = true

set :scm, :git
set :branch, 'master' # Or whatever branch you're on.
set :git_shallow_clone, 1
set :scm_verbose, true

# Or: `accurev`, `bzr`, `cvs`, `darcs`, `git`, `mercurial`, `perforce`, `subversion` or `none`

role :web, domain # Your HTTP server, Apache/etc
role :app, domain # This may be the same as your `Web` server
role :db, domain, :primary => true # This is where Rails migrations will run

# deploy config

set :deploy_to, applicationdir
set :deploy_via, :remote_cache
set :chmod755, "app config db lib public vendor script script/_ public/disp_"

set :use_sudo, false

set :normalize_asset_timestamps, false

namespace :deploy do
namespace :assets do
task :precompile, :roles => :web, :except => { :no_release => true } do
from = source.next_revision(current_revision)
if capture("cd #{latest_release} && #{source.local.log(from)} vendor/assets/ app/assets/ | wc -l").to_i > 0
run %Q{cd #{latest_release} && #{rake} RAILS_ENV=#{rails_env} #{asset_env} assets:precompile}
else
logger.info "Skipping asset pre-compilation because there were no asset changes"
end
end
end
end

# if you want to clean up old releases on each deploy uncomment this:

after "deploy:restart", "deploy:cleanup"

# if you're still using the script/reaper helper you will need

# these http://github.com/rails/irs_process_scripts

# If you are using Passenger mod_rails uncomment this:

namespace :deploy do
task :start do ; end
task :stop do ; end
task :restart, :roles => :app, :except => { :no_release => true } do
run "#{try_sudo} touch #{File.join(current_path,'tmp','restart.txt')}"
end
end

If your git repo is in place, and you just want to deploy your damn shit from your local terminal, run cap deploy:setup just once before running cap deploy. Capistrano will be verbose about anything going wrong, so it won't be a mystery to track down what the problem is, if you have one. Something probably will go wrong the first time.

More like than not, your asset pipeline won't precompile properly through the Capistrano deployment. If you figured out the secret to that, let me know. So for now I SSH into my <code>/home/username/app/current</code> folder and run <code>bundle exec rake:assets --precompile</code>.

Set up your shared gems folder

You might also find your VPS environment needs customization to use gems shared across different Rails apps, and StackOverflow will be your friend there.

If you're sharing gems, the most important thing you'll need that's specific to Dreamhost is this bit of code in the top of your <code>config/config.ru</code> file:

ENV['GEM_HOME'] = '/home/YOURUSERNAME/YOURSHAREDGEMFOLDER'
require 'rubygems'
Gem.clear_paths

Passenger will also be vocal about what you're missing if you try to access your newly deployed app from a web browser.

Prettify JSON data in the Rails console with pretty_generate

Tue, 12 Feb 2013 23:00:00 GMT

Using the Rails console has been a big time-saver for me. I'm trying to minimize switching between my browser window and my development windows (terminals, Sublime Text), and a lot of the debugging that I once did through the browser can easily be moved into IRB.

But the first problem I encountered was JSON formatting in IRB. I've been working with JSON and re-mapping some hashes quite a bit. Not pretty in the console.

Example 1: Jumbled JSON

1.9.3-p362 :035 > puts some_json

{"count"=>1, "results"=>[{"listing_id"=>96441649, "state"=>"active", "user_id"=>11923733, "category_id"=>69150359, "title"=>"Hipster Owl with Glasses - Yellow - Space Invaders - Retro", "description"=>"This Hipster Owl is just too cute!!!\r\n\r\nHe measures approx. 10&quot; tall and 9.5&quot; wide.\r\n\r\nHis eyes, nose and glasses are made from felt. \r\n\r\nHis body is white with tiny black dots. On his tummy, I used a Charlie Brown yellow and black fabric and his wings are a space invader print.\r\n\r\n\r\n\* Not machine washable\r\n\r\n**\*** This will be a duplicate of the item shown above.", "creation_tsz"=>1359839867, "ending_tsz"=>1370145600, "original_creation_tsz"=>1333072966, "last_modified_tsz"=>1359840873, "price"=>"30.00", "currency_code"=>"USD", "quantity"=>1, "tags"=>["hipster", "plushie", "nursery", "baby", "birthday", "gift", "pillow", "retro", "old school", "dot", "charlie brown", "space invaders", "geek"], "category_path"=>["Geekery"], "category_path_ids"=>[69150359], "materials"=>["cotton", "fiberfil", "felt", "buttons"], "shop_section_id"=>11341955, "featured_rank"=>5, "state_tsz"=>1359839867, "url"=>"http://www.etsy.com/listing/96441649/hipster-owl-with-glasses-yellow-space?utm_source=tipsy&utm_medium=api&utm_campaign=api", "views"=>768, "num_favorers"=>121, "shipping_profile_id"=>169274918, "processing_min"=>1, "processing_max"=>3, "who_made"=>"i_did", "is_supply"=>"false", "when_made"=>"made_to_order", "recipient"=>nil, "occasion"=>nil, "style"=>nil, "non_taxable"=>false}], "params"=>{"listing_id"=>"96441649"}, "type"=>"Listing", "pagination"=>{}}
=> nil

Ugly, right? The nesting structure is impenetrable at a quick glance. But the standard JSON module includes a little-known method called pretty_generate for exactly this situation. Check it out:

Example 2: Pretty JSON

1.9.3-p362 :034 > puts JSON.pretty_generate some_json

{
"count": 1,
"results": [
{
"listing_id": 96441649,
"state": "active",
"user_id": 11923733,
"category_id": 69150359,
"title": "Hipster Owl with Glasses - Yellow - Space Invaders - Retro",
"description": "This Hipster Owl is just too cute!!!\r\n\r\nHe measures approx. 10&quot; tall and 9.5&quot; wide.\r\n\r\nHis eyes, nose and glasses are made from felt. \r\n\r\nHis body is white with tiny black dots. On his tummy, I used a Charlie Brown yellow and black fabric and his wings are a space invader print.\r\n\r\n\r\n\* Not machine washable\r\n\r\n**\*** This will be a duplicate of the item shown above.",
"creation_tsz": 1359839867,
"ending_tsz": 1370145600,
"original_creation_tsz": 1333072966,
"last_modified_tsz": 1359840873,
"price": "30.00",
"currency_code": "USD",
"quantity": 1,
"tags": [
"hipster",
"plushie",
"nursery",
"baby",
"birthday",
"gift",
"pillow",
"retro",
"old school",
"dot",
"charlie brown",
"space invaders",
"geek"
],
"category_path": [
"Geekery"
],
"category_path_ids": [
69150359
],
"materials": [
"cotton",
"fiberfil",
"felt",
"buttons"
],
"shop_section_id": 11341955,
"featured_rank": 5,
"state_tsz": 1359839867,
"url": "http://www.etsy.com/listing/96441649/hipster-owl-with-glasses-yellow-space?utm_source=tipsy&amp;utm_medium=api&amp;utm_campaign=api",
"views": 768,
"num_favorers": 121,
"shipping_profile_id": 169274918,
"processing_min": 1,
"processing_max": 3,
"who_made": "i_did",
"is_supply": "false",
"when_made": "made_to_order",
"recipient": null,
"occasion": null,
"style": null,
"non_taxable": false
}
],
"params": {
"listing_id": "96441649"
},
"type": "Listing",
"pagination": {
}
}
=> nil

Nicely formatted so you can remap elements, and get a nice clear picture of whatever JSON you're consuming (or serving up).

Another option: Awesome Print

This is an extra ruby gem that you'll need to install in your dev environment, but it adds color and all kinds of goodies. Keeps you cozy in that console.

Music and Noise Compilation: Teenage Mustache

Sat, 25 Jul 2015 22:00:00 GMT

Figured it's not a terrible idea to share some of the music rumbling in the background of life. Lately I've been listening to a bunch of ambient, noise, German new-wave, and everything in between.

Behold, a mix. I'll aim to keep these semi-frequent.

Removing Trailing Slashes from a Rails App on Heroku

Thu, 23 Jul 2015 22:00:00 GMT

I need to redirect those terrible trailing URL slashes on a large project with thousands of articles. Turns out that trailing slash == duplicate content.

The first suggestion is usually to use Apache's mod_rewrite, however I wanted a server-agnostic way to handle these redirects. Not every project these days is sitting on top of Apache. And in my particular case, I need this to work on Heroku's very tightly controlled configuration stack.

The solution which worked for me is just including and configuring the rack-rewrite gem.

1. Add `rack-rewrite` to your Gemfile

gem 'rack-rewrite'

Then rerun bundle install from your shell to make it available to your project.

2. Configure

Rails 4

In config/application.rb:

require "rack/rewrite"

...

# Rewrite trailing slashes

# goes inside your main Application class

config.middleware.insert_before(Rack::Runtime, Rack::Rewrite) do
r301 %r{^/(.\*)/$}, '/$1'
end

Setting Up Docker From Nothing

Thu, 18 Jun 2015 22:00:00 GMT

Docker... Starting from Nothing

On OS X, you will need Three applications... VirtualBox, Boot2Docker and Compose.

Boot2Docker

Because the Docker daemon uses Linux-specific kernel features, you can't run Docker natively in OS X. Instead, you must install the Boot2Docker application.

1. Download/install VirtualBox

2. Install Boot2docker and Compose to run Docker on OS X.

$ brew install boot2docker docker-compose

Follow the Homebrew instructions to manage launching on startup, etc.

3. Create a new Boot2Docker VM. You only need to do this once, yay!

$ boot2docker init
$ boot2docker start

4. Display the environment variables for the Docker client.

$ boot2docker shellinit
Writing /Users/mary/.boot2docker/certs/boot2docker-vm/ca.pem
Writing /Users/mary/.boot2docker/certs/boot2docker-vm/cert.pem
Writing /Users/mary/.boot2docker/certs/boot2docker-vm/key.pem
    export DOCKER_HOST=tcp://192.168.59.103:2376
    export DOCKER_CERT_PATH=/Users/mary/.boot2docker/certs/boot2docker-vm
    export DOCKER_TLS_VERIFY=1

5. Set the environment variables in your shell:

$ eval "$(boot2docker shellinit)"

You’ll need to run this for every terminal session that invokes the docker or docker-compose command.

Auto initiate this by adding the following line to the bottom of either your .zshrc or .bashrc file:

$ eval `boot2docker shellinit 2>/dev/null`

6. Run the hello-world container to verify your setup.

$ docker run hello-world

Example Dockerfile for a Rails project

In the root directory of your Rails project, create a file called Dockerfile. Example contents for our Wildeisen project would be:

FROM ruby:2.2.2

RUN apt-get update -qq && apt-get install -y build-essential

# for postgres
RUN apt-get install -y libpq-dev

# for nokogiri
RUN apt-get install -y libxml2-dev libxslt1-dev

# for a JS runtime
# patch the version of Node since apt-get would grab an olllld version
RUN curl -sL https://deb.nodesource.com/setup_0.12 | bash -
RUN apt-get install -y nodejs

# for npm task runners
# grab newer version, not from apt-get
RUN curl -L https://www.npmjs.com/install.sh | sh

ENV APP_HOME /project
RUN mkdir $APP_HOME

WORKDIR /tmp
COPY Gemfile Gemfile
COPY Gemfile.lock Gemfile.lock
COPY package.json package.json
RUN bundle install
RUN npm install

ADD . $APP_HOME
WORKDIR $APP_HOME

# for running grunt task, which builds SVG sprites
RUN npm install -g grunt-cli

ADD . $APP_HOME

To build this Docker image, from Rails root run:

$ docker build .

Compose

Compose lets us configure our application from one yml file. Pretty sweet.

In the root directory of our Rails project, create a file called docker-compose.yml

Here's a really basic example that works for my project:

db:
  image: postgres

redis:
  image: redis

web:
  build: .
  volumes:
   - .:/project
  command: bin/rails server --port 3000 --binding 0.0.0.0
  links:
   - db
   - redis
  ports:
   - "3000:3000"

Then build the project with the above config:

$ docker-compose build

Now we can run it with our Docker container!

$ docker-compose up

You can find out which IP address to access the Rails server from by opening a new shell window and typing:

$ boot2docker ip
192.168.59.103

In my case, I can access 192.168.59.103, with the port we set in our yml file, 3000.

So voila, I can now see my Rails project in my browser at http://192.168.59.103:3000

Running npm watch/build tasks is easy too.

$ docker-compose run web npm run watch

$ docker-compose run web npm run build

or whatever task runners you have defined in your package.json file.

Apollo + GraphQL: A step toward more declarative UIs

Sat, 21 Oct 2017 22:00:00 GMT

<div class="center-block"> <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">And here is <a href="https://twitter.com/ultrasandwich?ref_src=twsrc%5Etfw">@ultrasandwich</a>, kicking off today’s series of talks! <a href="https://t.co/EzNBVEjPgG">pic.twitter.com/EzNBVEjPgG</a></p>— BerlinJS (@berlinjs) <a href="https://twitter.com/berlinjs/status/921070699342630912?ref_src=twsrc%5Etfw">October 19, 2017</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </div>

Today I gave my first talk at BerlinJS! I started with some gripes that I have with building imperative-style user interfaces, and gave some examples of how declarative UIs are simpler to maintain. I wrapped-up with an example React app that I built with Apollo and GraphQL, and demonstrated how we can get selective server-side rendering and all kinds of smart performance improvements with this toolset.

I also open-sourced the boilerplate that I built for this talk, so check it out if you want a starting-point for your next app that needs a more declarative approach to fetching data:

https://github.com/eschaefer/react-apollo-ssr-boilerplate

Compiling dcraw to WebAssembly

Thu, 09 Jan 2020 23:00:00 GMT

At EyeEm we handle about every digital photo format you can imagine. And with the variety of digital cameras out there, some of our web-based tools must accept RAW photo formats. Sometimes a JPG just won't make the cut.

RAW photo file sizes can be huge. Depending on which camera you're using, they can vary from 10MB to well over 100MB.

That's of course impractical for web use. I want to take these huge RAW files and compress them for web usage so we can have thumbnail previews. And I want to do this without a round-trip to another server.

Goals

Process RAW images in the browser. We don't want to do this server-side.
Leverage WebAssembly for speed and memory safety.

Emscripten

Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.

How magical does that sound? It also sounds a little bit like things might get complicated. However though, I found that was not the case. In fact I was genuinely in awe of how much Emscripten can do with minimal configuration.

dcraw

David Coffin wrote a brilliant open source library written in C called dcraw which supports decoding RAW files from 731 different digital cameras. It's been around since the '90s and seems pretty battle-tested. There's even a port of dcrawto Node.js by Zelemir Fedoran. And while this port can run as plain Javascript in the browser through some neat MEMFS tricks, it does not leverage WASM for the heavy lifting.

Looking at Fedoran's build process gave me a great starting point for building dcraw with Emscripten's emcc tool. I want to leverage the speed of WASM too, so my end-goal is to compile dcraw so we can call it directly in the browser with all the speed that the WASM binary gives us.

Extracting embedded JPGs from a RAW file

Did you know that most RAW files include an embedded JPG thumbnail? These may be used for low-penalty previews in a camera's display screen. Well no wonder RAW files are so big. The size and resolution of these JPGs can vary a bit depending on the camera model, so you might want to run some checks on what you extract. I've seen some extracted preview JPGs that are only 400px wide, which doesn't meet our size requirements for thumbnail resolution.

So how do we extract these?

dcraw includes an -e (extract?) flag, which will return an extracted thumbnail from a RAW file, if it has one. If you were running it as a command-line tool, you would do so like:

$ dcraw -e <filename>

First pass

Let's first try the simplest emcc build targeting WASM.

$ emcc dcraw.c -s WASM=1

dcraw.c:77:10: fatal error: 'jasper/jasper.h' file not found
#include <jasper/jasper.h>      /* Decode Red camera movies */
         ^~~~~~~~~~~~~~~~~
1 error generated.
shared:ERROR: '/usr/local/opt/emscripten/libexec/llvm/bin/clang -target asmjs-unknown-emscripten -D__EMSCRIPTEN_major__=1 -D__EMSCRIPTEN_minor__=38 -D__EMSCRIPTEN_tiny__=44 -D_LIBCPP_ABI_VERSION=2 -Werror=implicit-function-declaration -Xclang -nostdsysteminc -Xclang -isystem/usr/local/Cellar/emscripten/1.38.44/libexec/system/include/libcxx -Xclang -isystem/usr/local/Cellar/emscripten/1.38.44/libexec/system/lib/libcxxabi/include -Xclang -isystem/usr/local/Cellar/emscripten/1.38.44/libexec/system/include/compat -Xclang -isystem/usr/local/Cellar/emscripten/1.38.44/libexec/system/include -Xclang -isystem/usr/local/Cellar/emscripten/1.38.44/libexec/system/include/libc -Xclang -isystem/usr/local/Cellar/emscripten/1.38.44/libexec/system/lib/libc/musl/arch/emscripten -Xclang -isystem/usr/local/Cellar/emscripten/1.38.44/libexec/system/local/include -DEMSCRIPTEN dcraw/dcraw.c -Xclang -disable-O0-optnone -Xclang -isystem/usr/local/Cellar/emscripten/1.38.44/libexec/system/include/SDL -c -o /var/folders/4k/bv2brsrx6cb5r4b20320_gp00000gp/T/emscripten_temp_HVI35t/dcraw_0.o -emit-llvm' failed (1)

Ah, looks like there are some extra dependencies in dcraw. Luckily its documentation says we have the option to compile without them!

So I passed this extra flag like so.

$ emcc dcraw.c -lm -DNODEPS -s WASM=1

...
shared:ERROR: BINARYEN_ROOT must be set up in .emscripten

Another error, which may be specific to my OS X environment. It's a strange message, since after installing emscripten with Homebrew, it specifically instructed me to comment-out the BINARYEN_ROOT line in my .emscripten file. Luckily, I found this Github comment which had a working fix.

So, I installed binaryen manually.

$ brew install binaryen

Then opened ~/.emscripten and set

BINARYEN_ROOT = '/usr/local/opt/binaryen'

Now once again, I tried

$ emcc dcraw.c -lm -DNODEPS -s WASM=1

🎉 And it worked! A few non-fatal warnings were generated, but so were two files:

a.out.js
a.out.wasm

We have our WASM file, and a Javascript "glue" file which lets us interface with it.

Those file names are pretty meaningless though, so let's pass another flag to specify the output names.

$ emcc dcraw.c -lm -DNODEPS -s WASM=1 -o dcraw.js

Which yields

dcraw.js
dcraw.wasm

So how do we call our WebAssembly module?

First things first, let's just call that Javascript file in a basic page, and see if anything happens in the dev tools console.

<!doctype html>
<script async src="dcraw.js"></script>
</html>

Sure enough! It prints the full man page for dcraw as if we were using it in a shell environment with no arguments!

The Javascript file generated from Emscripten has automatically imported our WASM binary in the background, and run dcraw in the WASM sandbox, printing the contents of stdout. Pretty cool.

But we don't want to immediately run dcraw, which is what's happening by default. So let's disable that by adding INVOKE_RUN=0 and a named runtime method when we do our build.

$ emcc dcraw.c -lm -DNODEPS -s WASM=1 -s INVOKE_RUN=0 -s EXTRA_EXPORTED_RUNTIME_METHODS='["callMain"]' -o dcraw.js

By doing this, we can now invoke dcraw later, from a callMain function.

<!doctype html>
<script>
  var Module = {
    onRuntimeInitialized: () => {
      // Set a 2 second delay to test!
      setTimeout(() => Module.callMain(), 2000);
    }
  };
</script>

<script async src="dcraw.js"></script>
</html>

And we see the same output, but delayed by two seconds. The Module.callMain() function is now what executes dcraw.

It's worth noting that only main() from dcraw.c is called here by default, which is good enough for us right now.

By default, Emscripten-generated code always just calls the main() function, and other functions are eliminated as dead code. <sup>MDN</sup>

So we are calling dcraw, but it's pretty useless without any files or flags. Let's add those.

Module.callMain() can receive one array of arguments. The last one must always be a reference to a file buffer stored as a Uint8Array. All precending ones can be flags like -e, -c, etc. It will take some work to get us there, but it would look like

Module.callMain(["-e", "raw_file_buffer"]);

So how do we store a RAW file buffer as a Uint8Array in MEMFS, and then pass a reference to it?

<!doctype html>
<script>
  var Module = {
    onRuntimeInitialized: async () => {
      const image = await fetch("IMG_4248.CR2").then(r =>
        r.arrayBuffer()
      );

      // Cast ArrayBuffer to Uint8Array
      const clampedBuffer = new Uint8Array(image);

      // Create a workspace in MEMFS
      FS.mkdir("/workspace");
      FS.chdir("/workspace");
      FS.writeFile("raw_file_buffer", clampedBuffer);

      // The buffer is stored in FS. Pass a reference to its name.
      Module.callMain(["-e", "raw_file_buffer"]);

      console.log(FS.readdir("/workspace"))
      /* Will print
         [ ".", "..", "raw_file_buffer", "raw_file_buffer.thumb.jpg" ]
      */
    }
  };
</script>

<script async src="dcraw.js"></script>
</html>

Great! We can already see the name of the extracted thumbnail in the FS workspace we created! All that's left is to read this new extracted thumbnail from the workspace, and clean it up.

<!doctype html>
<script>
  var Module = {
    onRuntimeInitialized: async () => {
      const image = await fetch("IMG_4248.CR2").then(r =>
        r.arrayBuffer()
      );

      // Cast ArrayBuffer to Uint8Array
      const clampedBuffer = new Uint8Array(image);

      // Create a workspace in MEMFS
      FS.mkdir("/workspace");
      FS.chdir("/workspace");
      FS.writeFile("raw_file_buffer", clampedBuffer);

      // The buffer is stored in FS. Pass a reference to its name.
      Module.callMain(["-e", "raw_file_buffer"]);

      const extracted = FS.readFile("raw_file_buffer.thumb.jpg", {encoding: "binary"});

      // Cleanup
      if (extracted && clampedBuffer) {
        ["raw_file_buffer", "raw_file_buffer.thumb.jpg"].forEach(item => {
          FS.unlink(item);
        })
      }
      FS.chdir("/");
      FS.rmdir("/workspace");

      // Now use `extracted` to create an image Blob to be used in the browser
      const blob = new Blob([extracted], {type: "image/jpeg"});
      const imageUrl = URL.createObjectURL(blob);
      const img = document.createElement("img");
      img.src = imageUrl;
      img.width = 600;
      document.body.appendChild(img);
    }
  };
</script>

<script async src="dcraw.js"></script>
</html>

And there we have it. Our most minimal implementation of dcraw compiled to WASM, extracting a RAW image thumbnail and rendering it directly in the browser.

Hopefully the steps outlined are straightforward enough to go forth and compile your own C/C++ libraries to WASM. The piece that I got hung-up on the most was using the browser's in-memory FS. It wasn't obvious to me that WASM was able to write directly in there, until I started logging everything in the workspace I created.

If you compile anything of your own and want to share with the world, or got stuck on any part of this, just ping me on Twitter @ultrasandwich.

Example demo

If you would like to see the full code example from this article (plus a little extra), you can find the Github repo at https://github.com/eschaefer/wasm-dcraw.

A running demo is also here.

Babel Plugin for React Components Made with Framer X

Sun, 07 Oct 2018 22:00:00 GMT

This weekend I published a Babel plugin that turns React components made with Framer X into production-ready components that you can directly use in Storybook, Styleguidist, Gatsby, or wherever.

Typically if you created React components with Framer, you need to remove the static propertyControls and dependencies imported from the framer npm library by hand, if you want to use them anywhere else.

The TLDR;

npm install --save-dev babel-plugin-framer-x

Then add it to your Babel configuration:

{
  "plugins": ["babel-plugin-framer-x"]
}

If you find any issues, please bring them to my attention on Github!

https://github.com/eschaefer/babel-plugin-framer-x

Bulk fixing photo and video dates

Wed, 28 Feb 2024 23:00:00 GMT

I have a lot of old digital photos with the correct date in the filename. But that date doesn't match anymore with the file creation date. This can pose a big problem for a some photo library software out there, which depends on file creation date to correctly organize the photos (looking at you Google Photos).

Most of my photos generated from a digital camera or phone have dates somewhere in the file names, formatted something like:

IMG_20161226_115358.jpg
20180101_141437.jpg
VID_20171202_124719.mp4

There is a date in there. If only I could parse the date in each file, and manually set the creation date for each one accordingly...

Regular expressions to the rescue

The date portion of the filename can be represented by the following regular expression:

[0-9]{8}_[0-9]{6}

In simple terms it means match any 8 digits (yyyymmdd) followed by _, followed by any 6 digits (hhmmss).

Here's a quick regexr playground to look at it in action.

Using this in a bash script could be done like so:

#!/bin/bash

filename="IMG_20161226_115358.jpg"

if [[ "$filename" =~ ([0-9]{8}_[0-9]{6}) ]]; then
  date_from_filename="${BASH_REMATCH[0]}"
  echo "$date_from_filename" # prints 20161226_115358
fi

We have the date formatted like yyyymmdd_hhmmss. But we need to convert it into a generic timestamp that can be used. To do that we can use the date utility to accept a predefined date format, and parse it into a proper system date.

date -jf "%Y%m%d_%H%M%S" "20161226_115358"
# Mon Dec 26 11:53:58 CET 2016

We can also output the parsed date into a format that can be used by the touch utility, to set the file creation date...

date -jf "%Y%m%d_%H%M%S" "20161226_115358" +"%Y%m%d%H%M%S"
# 20161226115358

Jumping ahead a few steps, we can assemble these building blocks into a full bash script that can:

Accept a directory of files
For each file, extract a date from the file name
Parse the date and reformat it to be used to modify the file creation date
Gracefully fail in any of these steps with a helpful message

#!/bin/bash

# Usage example: bash date-fixer.sh ~/Pictures/backup/

# Check if the correct number of arguments is provided
if [ "$#" -ne 1 ]; then
  echo "Usage: $0 <directory_path>"
  exit 1
fi

directory_path="$1"

# Check if the directory exists
if [ ! -d "$directory_path" ]; then
  echo "Error: Directory not found: $directory_path"
  exit 1
fi

# Loop through all files in the directory
for filename in "$directory_path"/*; do
  # Extract just the filename without the full path
  basename=$(basename "$filename")

   # Skip hidden files
  if [[ "$basename" == .* ]]; then
    continue
  fi

  # Extract date from filename
  if [[ "$basename" =~ ([0-9]{8}_[0-9]{6}) ]]; then
    date_from_filename="${BASH_REMATCH[0]}"
    echo "Date from filename: $date_from_filename"

    # Convert parsed date and time to timestamp
    timestamp=$(date -jf "%Y%m%d_%H%M%S" "$date_from_filename" +"%Y%m%d%H%M%S")

    # Check for valid timestamp
    if [[ ! "$timestamp" =~ ^[0-9]+$ ]]; then
      echo "Invalid timestamp for $filename: $timestamp"
      continue
    fi

    # Modify file's creation time
    touch -t "$timestamp" "$filename"
    echo "Modified creation time of $filename"
  else
    echo "Skipping file without date in filename: $file"
  fi
done

Building a DIY Air Quality Sensor

Wed, 31 Jan 2024 23:00:00 GMT

While attending this year's Chaos Communication Congress in Hamburg, I saw a pretty inspiring talk from two researchers in the field of numerical pollution modeling. They were combining data from all kinds of sources, including a DIY sensor network run by volunteers, to create models that can improve city planning, life quality, and ultimately address the problem of air pollution. I can really recommend watching the whole thing:

One of their slides mentioned the website sensor.community which tracks all volunteer-run air quality sensors, and provides DIY guides to build your own air quality and noise pollution sensors. When I got home after the conference, I bought the pieces to assemble the DIY AirRohr device. I live on a pretty busy street in Berlin, and wanted to get a sense of how much air pollution is affecting my area.

Here are all the pieces ready to be assembled on my living room floor:

The NodeMCU CPU/WLAN + BME280 temperature sensor

This piece is responsible for powering the sensors, and communicating the collected data back to my WiFi router. Flashing the firmware for this was not possible with my Macbook Pro (M2, 2023). I used an old Linux laptop to do this instead, which was much more straightforward.

The SDS011 fine dust sensor

A clear plastic tube is connected to the nozzle on this piece, and a small fan circulates air through the sensor.

Fully assembled kit fixed to my apartment window

The white pipe provides a little housing for the electronics inside. A 3m USB cable runs under the window frame to power the the device. It's fixed to the window with some zip ties.

After a little bit of configuration, the device started wirelessly emitting data back to the sensor.community network!

Live data: fine dust, 10 µm

Live data: fine dust, 2.5 µm

As of the date of this blog post, the device has been collecting data for about a week. It's already quite interesting to see the patterns of weekday rush-hour traffic and how they affect the air quality in my area.

Repairing Shock Cord on Quarter Dome 2 Tent Poles

Fri, 04 Aug 2023 22:00:00 GMT

Recently while camping I discovered that the elastic shock cord in my REI Quarter Dome 2 tent poles had become totally brittle and non-elastic, making it nearly impossible to keep all the poles together. This kind of thing happens when storing the tent in a warm place, or if the cord is wet before storing it for a long time.

The tent pole assembly is a little unusual on the Quarter Dome 2. There is a central hub which routes all the cords to the different poles. I found this a little intimidating to try and repair the cords before making a proper diagram of how it all fits together. I could not find any existing guide online for this tent. I hope this helps anyone else out there who has this tent, but found the cable routing a little crazy. It's really not so bad when it's broken-down into its smaller parts. I have also color-coded how each of the 4 cord routes should run.

Tent pole assembly diagram for the REI Quarter Dome 2

Click image to see zoomed-in detail view

Each terminal end of the poles has a silver knob, which can be twisted off. Inside, you can see how the shock cord is tied. Just cut out the old shock cord and replace with a new one. I bought this 10m cord from Vaude, which is slightly thicker and more robust than the original cord, while still fitting nicely.

For a general idea of how to string the shock-cord through the poles, I recommend this guide from iFixIt. It includes some close-up videos of how to apply the right amount of tension on the cord as well.

How I Learned to Stop Worrying and Log the Noise

Sat, 18 Oct 2025 22:00:00 GMT

import { Image } from 'astro:assets'; import Chart from './chart.astro'; import Audio from './audio.astro'; import siren1 from './audio/siren_20250730_223059.wav'; import siren2 from './audio/siren_20250805_203714.wav'; import spectrogram1 from './images/siren_20250730_223059.jpg'; import spectrogram2 from './images/siren_20250805_203714.jpg';

Living in Berlin means accepting a certain soundtrack. I know what I signed up for when I chose to live on a city artery. Nonetheless I am sensitive to sound, and the constant wail of sirens started to feel... excessive. Was I imagining it? There was only one way to find out... another DIY recording project. I've already toyed with some window DIY data projects before, like my air quality sensor. This time we're gonna learn about noise pollution rather than air pollution.

Berlin has some open data on city noise. My humble 237-meter section of Mehringdamm, as of 2019 (kinda dated), had an average noise level of 75 dB(A) with a staggering 43,140 vehicles passing by daily. To put that in perspective, if you lined those cars up bumper-to-bumper, each averaging 4.5 meters, you'd have a 194-kilometer-long metal snake. No wonder it's a bit loud.

The recording setup

Nothing fancy here. I used a spare linux laptop from the closet, and just laid it on living room window sill along with the plants. That's it. Not even a USB microphone. I cranked up the audio input to max, and then thought about how to record the audio and make sense of what comes in.

Making sense of the recorded audio

My first attempt to quantify the sirens involved a Fast Fourier Transform. My thought was to isolate the dominant frequency range of sirens, which are predictable. The Python library SciPy has a built-in FFT function, made bootstrapping this relatively easy. But the FFT proved to be a bit too enthusiastic, generating a lot of false positives. My baby daughter's crying repeatedly showed up in the siren detection, which, I admit, tugged at the heartstrings a little while combing through the recorded samples. Clearly, a more sophisticated approach was needed.

TensorFlow

I stumbled upon an excellent tutorial in TensorFlow's documentation for classifying audio using the YAMNet model. This model conveniently includes a subset of sirens in its training data. Perfect!

Processing a live stream turned out not to be possible with TensorFlow though. The solution? Record audio constantly in two-second chunks (enough to capture a full siren cycle), then feed those snippets to the YAMNet model. I also made sure to keep the raw audio recordings for any deeper analysis that might be required later. All detected siren events with timestamps were dutifully logged to a CSV for easy digestion.

Here's what I ended up with:

import numpy as np
import sounddevice as sd
import tensorflow as tf
import tensorflow_hub as hub
import pandas as pd
import time
import os
from datetime import datetime
from scipy.io import wavfile
import requests

# --- Configuration ---
MODEL_URL = "https://tfhub.dev/google/yamnet/1"
SAMPLE_RATE = 16000  # YAMNet requires 16000 Hz sample rate
BLOCK_DURATION_S = 2.0 # Process audio in 2-second chunks
BLOCK_SIZE = int(SAMPLE_RATE * BLOCK_DURATION_S)
DETECTION_THRESHOLD = 0.55  # Confidence threshold from 0 to 1
SIREN_CLASS_NAME = "Siren"
SIREN_EVENT_CSV = "siren_events.csv"
SIREN_EVENT_INTERVAL = 30  # seconds
SIREN_SAMPLE_DIR = "siren_samples"
last_siren_time = 0

# --- Load YAMNet Model ---
print("Loading YAMNet model...")
model = hub.load(MODEL_URL)
# Load class names from the CSV file referenced by model.class_map_path
class_map_path = model.class_map_path().numpy().decode('utf-8')
class_map_df = pd.read_csv(class_map_path)
class_names = class_map_df['display_name'].values.astype('U')
print("Model loaded.")

# Ensure the sample directory exists
os.makedirs(SIREN_SAMPLE_DIR, exist_ok=True)

def audio_callback(indata, frames, time_info, status):
    global last_siren_time
    if status:
        print(status)

    waveform = indata[:, 0].astype(np.float32)
    scores, embeddings, spectrogram = model(waveform)
    siren_index = np.where(class_names == SIREN_CLASS_NAME)[0][0]
    siren_score = tf.reduce_mean(scores[:, siren_index]).numpy()

    now = time.time()
    if siren_score > DETECTION_THRESHOLD and (now - last_siren_time) >= SIREN_EVENT_INTERVAL:
        last_siren_time = now
        timestamp = datetime.now().isoformat()
        print(f"🚨 SIREN DETECTED! (Confidence: {siren_score:.2f}) at {timestamp}")
        # Save WAV sample
        wav_filename = f'siren_{datetime.now().strftime("%Y%m%d_%H%M%S")}.wav'
        wav_path = os.path.join(SIREN_SAMPLE_DIR, wav_filename)
        # Convert waveform to int16 for WAV
        wav_data = np.int16(waveform / np.max(np.abs(waveform)) * 32767) if np.max(np.abs(waveform)) > 0 else np.int16(waveform)
        wavfile.write(wav_path, SAMPLE_RATE, wav_data)
        # Append to CSV
        if not os.path.exists(SIREN_EVENT_CSV):
            with open(SIREN_EVENT_CSV, 'w') as f:
                f.write('timestamp,wav_filename\n')
        with open(SIREN_EVENT_CSV, 'a') as f:
            f.write(f'{timestamp},{wav_path}\n')

# --- Main Execution ---
try:
    print("\nListening for sirens... Press Ctrl+C to stop.")
    # Start the audio stream
    with sd.InputStream(
        channels=1,
        samplerate=SAMPLE_RATE,
        blocksize=BLOCK_SIZE,
        callback=audio_callback
    ):
        while True:
            pass  # Keep the stream alive
except KeyboardInterrupt:
    print("\nStopping...")
except Exception as e:
    print(f"An error occurred: {e}")

I let the model run for a month on my little linux laptop, and here's the result.

At first glace, yeah, that's a lot of sirens. I'm not crazy! Also interesting that the number of siren events per day varies widely in the beginning, and then the curve kind of stabilizes toward the end. I guess that's just how convergence and increasing sample size works.

The first day (July 26th) was also abnormally high, I think because it happened to be Christopher Street Day, a yearly pride parade in Berlin.

👮‍♂️ Police siren

Looking at this audio sample in Audacity with the spectrogram view, it's clear that it's a police siren. The harmonics are quite distinct, and the overall shape is quite regular.

Notice how the harmonics are clean multiples of the fundamental frequency, just appearing a little weaker in the spectrum. Pretty cool!

🚑 Ambulance siren

Lower fundamental frequency here for ambulance sirens is interesting. I learned that these lower frequencies carry better in the dense urban environment, but also, wow, they are freaking loud too. 130 dB(A) is at the human pain threshold.

Wrapping up

This was a fun project, and I learned a lot about noise pollution and sirens. Also vibe-coded enough Python to make it work. Would be cool to also auto-classify the sirens according to vehicle type, but that wasn't my original goal.