This is the blog, but if you want to know more about me and my projects, check out the Projects and About pages.

The Studio71 Office Screens

Update: I forgot to mention it in the post, but if there is any interest I could release a generic version to the store and/or the source code to the app. Let me know: @thatmikeflynn

I love screens. You love screens. Developers love screens! We have at least two or three on our desk and when that’s not enough we like to hang them all over the place so no matter where we look there’s a screen in there somewhere. Is the graph pointing up? Is that counter a high number? How many tickets has that new guy done? All important questions resolved by easy access to a well designed screen of information.

We love screens. We want screens. How do we get the screens? There are plenty of apps you can buy to create beautiful dashboards for you, and after researching the options, I want to tell you about the solution I came up with at Studio71.

Context

We are a Multi-Channel Video Network, so we have YouTube, Vine, Facebook, Instagram, and [INSERT NEW SOCIAL VIDEO NETWORK] creators all over the globe. Our tech team aggregates those stats, moves the videos around, and creates applications for our creators, employees, and brands to log in and see the information we’ve collected on our network. In short, we already have lots of things to display on screens (Kanban boards, Google Analytics, internal metrics, etc…) we just needed the way to do it.

Requirements

  • Should rotate through $n URLs with an adjustable wait time.
  • Easy to run on different machine types, specifically the Chromeboxes we have in the office for our conference rooms.
  • Quick and easy setup.
  • Remote updating of the application.
  • Remote updating of the list of URLs.
  • Allow for different displays to run different sets of URLs.

Solution

I created a Chrome App that met all of the above needs after a couple of hours of tinkering and off and on over the span of two days applying fixes. A Chrome app was perfect to get up and running quickly as it was uploaded to an unlisted Chrome Web Store page, and will run on nearly anything that runs Chrome.

Studio71 Office Chrome App

The app has two layouts: The primary URL rotation screen and a very minimal options panel. The options panel allows the local user to give the app name. The name matches the remote configuration (more on that later). The only other option is to set the wait time between URL rotation, which defaults to 30 seconds.

The application logic is very simple: On load, the application checks the options to get the computer name and rotation delay. It pings a server to get a JSON file that dictates the URLs to rotate for each machine name, downloads the file and looks for it’s name (if the name isn’t in the list, there is a default configuration it will load). The app then creates web views for each of the URLs and sets and interval to rotate through the list, hiding all the views and displaying the current URL’s web view. There’s some additional logic for when to optionally reload each URL, and to handle a handful of events like pausing the rotation, advancing to the next URL, or reloading the page.

Security isn’t much of a concern as any URL authentication is handled by the local user. I could certainly add some option authorization logic to the URLs but that would have be created for each URL and would mean a massive security requirement on the JSON file location, so it’s not worth the trouble.

Conclusion

I launched the solution on Chromeboxes plugged in to two wall-mounted monitors and another Chromebox plugged in to our TV in the waiting area. The wall-mounted boxes are set to a “dev” profile that rotate through Google Analytics dashboards, Jira, our internal status page and a playlist of Studio71’s currently most popular YouTube videos. The big TV has a “lobby” profile that just includes the YouTube playlist.

Studio71 Office Dev Screen

Everything has worked perfectly! I’ve found that fullscreen YouTube playlists tend to just die after about 24 hours of playtime so having those URLs set to auto-reload at 24 hours works perfectly. I’ve also been able to add new dashboards to rotate through for the “dev” screens by easily updating the JSON file…and I’ve even added a few random gifs to rotate occasionally.

This solution could also easily be rolled out to out other offices and still all be controlled by a central configuration. I’d long since blocked it from my memory, but I actually did some contract work with a company that created a really really overly-complicated system to do this exact thing in banks but with Flash animations…and I think this solution works better after a few hours banging around the Google Chrome App documentation!

Studio71 Office Dev Screen

Super Bowl City is the Worst City Ever

Super Bowl City

We went to Super Bowl City in San Francisco the other day and outside of the excellent policing budget, you would never want to live in that city. Communist Russia-style food lines and prices, no schooling outside of how to “Punt, Pass and Kick,” and it was filled with people wearing jerseys for teams that weren’t in the Super Bowl! Why?! “Well this is a football thing so I have to wear my Patriots jersey…and hat…and pants!” No, you don’t. You look like a douche. Just wear a light jacket like everyone else! Arrg! Ok, here are some pictures.

Fan Energy Zone

“Fan Energy Zone”s was a place where you stand and they tell you stuff they want you to do, like watch kids to a half-hearted dance show or to remind you about the Fisherman’s Wharf-type food they were selling everywhere.

The Super Bowl City stage

There was a big stage.

Butts

Watching people cram themselves behind these Manning and Newton was the single best part of Super Bowl City. It’s really an interesting commentary about the NFL: They looked Facebook post worthy cool from the front, but looking at them from a different angle and you realize they are just a fraud. A fraud with their ass sticking out.

CNN Set

It doesn’t take long to figure out what the actual point of Super Bowl City is: A place to put TV sets for live shots with the pier in the background. The NFL Network, CBS, and CNN (???) all had big sets that towered above the confused residents of Super Bowl City. I eagerly await a CNN news break about the New Hampshire primaries butted up against Kathy Griffin making gay jokes with Anderson Cooper in front of San Francisco Pier.

Weird SB SF Mascot

Ok, now lets talk about this thing. What is this supposed to be? It’s a bear…a hipster bear with the hipster hat and hipster glasses and the hipster v-neck tshirt…and icons of hipster stuff for tats. For fucks sake, one of the icons is a picture of a human hipster! From what I can see this mutant hipster bear mascot isn’t being used anywhere nationally, so is this how the NFL thinks San Francisco wants to be portrayed? Yes. The answer is yes. One of the NFL designers has a nephew that lived in San Francisco briefly before they flunked out of Berkley and took his word as the single source of input for how the Bay Area wants to be marketed to.

In a related note, here’s the mascot we designed for NFL City:

NFL City Logo

This is How You Comedy Hack Day

We can all talk about my Comedy Hack Day 10 / Sketchfest later, but for now lets check out this git log from this weekend. This is how you Comedy Hack Day!

image

An Ode to My Work Laptop

When my laptop and I first met

I started at Collective Digital Studio in 2012 as the month of December awoke from it’s yearly slumber. I was handed a computer. A Macbook Pro Retina. That Retina part was new, as was how thin and light it was. Instantly I realized it was the best computer I had ever used. That computer has been with me every day since then, and it died today. A little piece of me did too.

My Macbook Pro lived a hard life. I asked a lot from it. Not “a lot” in the sense that I managed to tax any part of it’s excessive specs, as I’m a developer and I just edit text files all day, but I brought it everywhere. It was thrown in countless bags, eaten over for countless meals (but never spilled on), taken out at countless TSA checkpoints, and even sat on a couple of times. It was a tray, it was a paper weight, and it was a way to block my face while I laughed at some guy from a different company farting during a sales presentation at my office. Oh, and I worked on it. Tons of times. I coded the first version of the API we use at Collective Digital Studio, typed out a ton of emails, and planned the reboot of the tech team we had in 2012 in to the amazing tech team we have today.

It Facetime’d with me. It Hangout’d with me. It brew install‘d with me. It XCode’d with me. It Sublime Text’d with me. It “I’m Googling that because there is no way a piece of software is actually named…oh, it’s a Node.js thing”‘d with me. We saw Google IOs, f8s, Clojure/Wests, and Variety Big Data conferences. We watched a lot of YouTube. We wrote a bunch of code that hopefully helped make YouTube a better place.

I’ll miss you buddy. You died in a really weird way where you just kept restarting all the time which was super frustrating…and you’re a huge asshole for dying a month or two before the next model of Macbook Pros will be announced, but that’s OK. The intern was using a computer just like you and I took his and imaged it with my backup. Once I put my cover on it will be just like you didn’t die at all. My stickers will even be back! Ok, I gotta make up all the time from yesterday when I was yelling at you and then replacing the intern’s files with my files…but you were a good friend so I’m going to write “broken” on a Post-It Note and leave you in this cabinet. A fitting tribute! Maybe one day we’ll get you repaired, or maybe one day someone will throw this cabinet away and forget to open it first, but either way you should know that I loved you.

Shit.

Which one of these was the broken one?

2016 Security Best Practices for Collective Digital Studio Talent

With YouTubers becoming larger celebrities every year, 2016 has started off with a hacker group getting access to YouTuber’s social, financial and management account and sharing their data via their Twitter feed. This obviously has some of talent very worried. Theories were flying: “They must have cracked 2-factor authentication!” “No, I bet the MCNs are getting hacked.”

The following is a note I sent to all of our creators regarding best practices for securing their accounts and I thought it was a good summary for everyone, including and especially Collective Digital Studio talent, so I figured I would post it here on my blog to share the info and to give people a taste of how we help our awesome talent throughout the year.

CDS Creators —

The new year is always a good time to review and update the security on your various social accounts and 2016 is no different, especially with the recent attention YouTubers have received from various hacker groups. I’d like to go through a few best practices that everyone should do, but first let me assure all of you that CDS takes security very seriously and we do everything we can to ensure your private information remains private. As for the recent threat by hacker groups, let me say clearly that no one has broken 2-factor authentication nor is there any evidence that they have hacked any MCN. It is clear, however, that they have successfully hacked many individual accounts for various MCN dashboards and social accounts like Instagram and even PayPal. To protect your accounts from hacks like that here are four things you can do right now to make yourself a harder target:

Always use 2-factor authentication.

2-Factor authentication, where your phone is required when logging in to a new computer, can be annoying at first but it is the best way to protect against people getting access to your account. Passwords can be guessed, or someone might just accidentally give it to them (though, we at CDS keep your password so secure that we don’t even know it). In those cases, a hacker still couldn’t access your account unless he also had your phone.

2-Factor Authentication is available on your Google account, but also Twitter and Facebook. We strongly recommend you use it wherever available.

Change your password regularly.

You should rotate your password at least once a year and the start of a new year is a great way to easily get in the habit. Be sure to use a secure password that is ideally not just a word and is long enough to make guessing difficult. There are several good password generators out there if you need help generating a secure password: passwordsgenerator.net

Use a different password for each site.

I know. This might sound like a huge pain, but having a different password for each site is a great way to make your online life more secure. This is important because if someone does get access to one of your accounts, they won’t immediately be able to try the same password on everything else you use.

Password management software can be a big help with this one (as well as #2) and there are really good free options available, like Last Pass: https://lastpass.com/

Review which apps and sites have access to your accounts.

Another way for people to gain access to your data without the need of a password is to simply ask for it. It’s true! Think of every app you sign in with Google, Facebook, or Twitter asks your permission for different parts of your account data. That’s usually a good thing and makes the apps useful, but even good apps can become bad partners and it’s important that you know who else can see your data or post to your accounts. Luckily each major provider supplies lists for you to see which apps you’ve approved and give you the chance to remove them. We strongly suggest that you review these list regularly, especially if you think something weird is happening on your accounts.

Google / YouTube

Twitter

Facebook

Thanks for taking a moment to talk about something that may not be as exciting as the great content you all produce every day, but is critical to ensure your content and earnings are safe. If you have any questions about this or anything else related to security, please reach out to your talent manager and we’ll do our best to get you an answer as soon as possible.

Mike Flynn, Chief Technology Officer @ Collective Digital Studio

mikeflynn @ GitHub thatmikeflynn @ Twitter