Back to Posts

Trash Meme

Were you ever obsessed with a TV show?
And I don't mean obsessed as in binge watching it, more obsessed as in referring to it quite constantly, making it part of a shared cultural background of you and your friends?

In Italy a while back, we had Boris: a TV show about the making of of another show. The crew, producers, technicians and everyone else is involved in creating this horrible soap "The eyes of the heart" which no one gives a shit about and everyone is aware of the low artistic value, apart from some of the actors who really believe they are doing a great job.

I'm not 100% sure how funny it sounds in English, but there you go

Anyway, the series is hilarious beyond reasonable and it became an instant classic, even though only for a niche of people.

Most of the gags, became part of the way we talk, chat and relate each other. I wanted not have to look for clips on youtube every time I needed to share something like

which means "or you might die...", in a fatalistic manner, and you can immediately tell why this is super useful in any conversation: chat, facebook comment, slack etc etc.

Also I wanted to experiment React in a different context than my job: I had just started working with Flux and I needed to step away from it and experiment. I wasn't really sure about the direction, so I ended up with a store-less app, relying on top level callbacks to change the props injected. A good way to focus on the components layer, a really bad one to build something reliable and testable, but I didn't need that.

For the same reason, I didn't want anything to do with css, as my focus was totally on react itself, hence I tried to use Material UI which — beside a couple of major API changes happening while I was developing TrashMeme which took me sometime to cope with — is a really solid library.

The goals for me where:

  • search and quickly get to the clips I wanted
  • share and see the preview on FB
  • copy quickly the youtube URL if needed

I ended up using the an autocomplete in Material UI, ClipboardJS and JSPM both clientside and serverside. The last bit was trickier than expected and to be honest I'm not sure I'd do it again, but back then it was a good option (also considering we were using it at work and I wanted to get to know it better too).

Crucchi demmerda

Not enough

Once I got the potential of it, I wanted more.
I ended up moving away from being boris-centric and having some categories (all Italian trash classics), most of them were still quick chat comebacks.

Still it wasn't enough: I wanted integration.
I created a slack bot.

Slack Express made it easier than I thought.

require('dotenv').load();  
const slack = require('slack-express');

const requiredir = require( 'requiredir' );  
const data = requiredir( '../data' );

slack.slash('/trashmeme', (payload, message)=> {  
  const cmd = payload.raw.text;
  const category = cmd && data[cmd.split(' ')[0]];
  if (!category){
    return message({text: `Choose a category: ${ Object.keys(data).join(', ') }`});
  }

  var video = data[cmdTxt[0]].videos[cmdTxt[1]];
  if (!video){
    var categoryVids = data[category].videos;
    var videosIds = Object.keys(categoryVids).map(videoKey => videoKey);
    return message({text: `Scegli un video: ${ videosIds.join(', ') }`});
  }

  message({
    response_type: 'in_channel',
    text:`${data[category].videos[video].url}`
  });
});

slack.start();  

Now I could type /trashmeme boris magari-mori and get my video previewed on slack thanks to the FB meta tags on the page.

But again, not enough.

The Desktop App

Electron is really interesting and fun to work with. I wanted to play with it since ages and TrashMeme was the perfect opportunity for it.

Using menubar I created the TrashMeme desktop app.

The app itself is nothing to fancy and it's really dumb in the way it works: it fetches the website on load and grabs all the data from the inlined JSON and it offers the same as the website, but in your menu bar.

Dai Dai Dai!

One bit I really liked doing was the app settings.

The current ones are

  • Copy the youtube URL (as opposed to the https://trashme.me one)
  • Show only the quick replies (which is a special handpicked category of only the quick comeback videos, cross-source)
  • No audio (to use the app in a meeting or such)

And of course a shortcut system to quickly show the app.

The future

I have to admit that the desktop app made me less eager to write more code for TrashMeme, but I still have some ideas I want to explore.

The main being moving the data to firebase.
Right now I have a series of JSON files in a folder, which was handy when I started and helps a bit during testing (using noembed.com I can check if the videos are embeddable) but of course it doesn't scale. Ideally I should be able to let people login with FB, create their favourites shortlist, add videos, etc.

Pixel pusher, javascript-something, front end developer since able to grow a beard, father of two, meteoropathic and with an insane passion for lo-fi music.

Read Next

Echoes of me