Sous Chef is a comprehensive companion app for hosting cooking shows on the Twitch livestreaming platform. It integrates with every aspect of the streaming experience, providing animated video overlays for rendering show graphics, a web-based control panel for switching cameras and managing other show elements, and integration with Twitch's chat functionality for engaging with audiences.

The application is built upon a variety of open source tools, including Electron, Express, Socket.io, React, Webpack, and Bootstrap. Sous Chef has a modular architecture, allowing pieces to be added or removed depending on the host's particular needs. It was developed in collaboration with @AndrewCooksLive, and its code can be found on GitHub. Icons and graphics were provided by the Mutant Standard alternative emoji set.

Features

• Runs locally as a native application on both macOS and Windows.
• Provides a web-based control panel that can be accessed from any computer, tablet, or smartphone on the host computer's LAN.
• Includes integration with OBS-Websocket plugin for software-based scene switching and device muting.
• Locally hosts a web overlay which can be integrated into the Open Broadcaster Software (OBS) or Streamlabs OBS. Overlay elements include:
  • Video inlay panels
  • Stream info panels (Recipe details, etc.)
  • Multiple simultaneous timers
  • Image and Tweet embeds (including animated gifs and Twitter videos.)
  • Probe thermometer temperature charts and live readouts
  • iTunes integration for displaying background music details.
  • Full-screen confetti and other celebratory animations
• Supports Twitch's chat API. Can post messages to chat, respond to viewer commands, allow select viewers to trigger overlay actions, and engage viewers with automated trivia questions.
• Additionally supports Twitch's event APIs, allowing actions to automatically trigger when users perform standard actions such as following or subscribing.

Background

This project might take a bit more explaining than usual. I never saw myself as the type of person to co-host a cooking show, but 2020 turned out to be an interesting time for everyone. By now most people are at least passingly familiar with Amazon's livestreaming video platform Twitch. It originally launched as a platform solely dedicated to allowing gamers to livestream their video gaming sessions, but in the years since it launched, they've opened it up to all sorts of non-gaming topics.

Twitch streams now feature everything from artists painting to live music concerts, or in our case, a homegrown cooking show. Hosting a show on Twitch is a bit like running you own TV show, with a few subtile differences. Most notably, there's a chatroom running alongside every broadcast. Your typical Twitch streamer isn't broadcasting out into the void, but rather interacting with a community of regular viewers. For our stream in particular, @AndrewCooksLive handles the bulk of the culinary workload, and I help produce things. (I've been known to occasionally hop in and chop some onions when things get hectic.) It's been a fun way of staying connected to other people during these quarantine times, and stopped us from falling into a culinary rut.

In addition to having to come up with something new to cook every week, it turns out there is a ton of specialized technology that goes into producing a livestream. Your basic video game stream simply needs a webcam, a microphone, and streaming screen capture software. Your basic cooking stream however typically involves two or three cameras, wireless microphones, streaming software, and usually some additional plugins or programs. That's where Sous Chef comes in. What originally started as a side project to show recipe info and egg timers on our stream has morphed into the glue holding the entire show together.

Our Setup

While the software's important, I want to touch briefly on the hardware we're working with. Our setup and configurations could be its own specific writeup, but in brief, we're currently using:

• Three Logitech C920 Webcams
• A wireless IP camera
• Two wireless UHF lavalier microphones
• A PC with enough horsepower to handle all of the above
• A kitchen's worth of pots, pans, and accoutrement

Everything's arranged in the kitchen through a variety of camera arms, tripods, and 3D printed mounts. (It's seriously tricky to hang a camera over a cutting board while still being able to chop efficiently.) Our next big project is to improve the lighting of the show, but for now, it's a pretty solid cooking stream setup for only a few hundred dollars. It also helps that we're currently not entertaining company who might have more than a few things to say about the number of USB cables scattered about our kitchen.

On the software side of things, you've got one big choice you need to make: Are you going to go with the Open Broadcaster Software's OBS Studio, or Streamlabs.com's custom Streamlabs OBS? OBS Studio is the classic piece of open source software that helped jumpstart the particular streaming revolution that we're currently in, while Streamlabs OBS is a proprietary layer of niceties on top of the open source software to make things run a bit more smoother. For the purposes of Sous Chef, either work. You simply need to be able to create a web browser overlay element, which both support.

To touch on Streamlabs.com for a moment: Their site touts it as the "All-in-One Live Streaming Software". If this sounds familiar, it's because Sous Chef is essentially a competitor to Streamlabs. Streamlabs can handle onscreen elements, manage chatbots, and even take care of complicated processes like taking money for donation drives. It's essentially the Wordpress of web streaming, if you have any experience in the blog CMS world. Streamlabs.com is the Swiss army knife of live streaming services, while Sous Chef is designed to be more specifically focused on the elements of live streaming that would be useful during a cooking stream. I generally prefer working with OBS Studio to avoid Streamlabs' constant nudging that I pay for a premium subscription, or check out their gallery of paid themes, but I still will occasionally use some of Streamlabs.com's different plugins for non-standard parts of our show. Either way, whichever flavor of OBS you decide to go with, Sous Chef should have something to offer.

Getting Started With Sous Chef

Sous Chef is structured a bit unusually as far as Electron applications go. Electron is a NodeJS framework which allows you to create cross-platform desktop applications using standard web technologies like HTML, CSS, and Javascript. In its most simple form, Electron creates a desktop app window, and then wants you to point it at an HTML file, a localhost URL, or an external web URL.

If you'd like to do something a bit more complicated than serving up a simple index.html file, there are two different approaches. The first is to use the popular Create React App boilerplate project to develop a complex React frontend for your Electron application. The second approach is to create a localhost environment using the Express framework to create a robust backend that's also capable of serving the Electron frontend.

Sous Chef takes advantage of both of these approaches. Express manages a backend API, and serves the Sous Chef control panel to any browser on the local network. Create React App handles the inner workings of the control panel itself, and brings along some niceties for developing a complex React application like module hot-reloading. When working in dev mode, Create React App will host the frontend on its own localhost port using webpack, and Electron and Express will both just reference this instance. When compiling the application, Create React App will compile the application down to an index.html file that the Express instance manages serving.

So at a high level, the application structure looks something like this:

• sous-chef/ (Top-level app folder)
  • plugins/ (Express back-end modules)
    • recipe.js
    • timer.js
    • ...
  • public/ (Create React App flat files)
    • favicon.ico
    • index.html
    • ...
  • src/ (Create React App React modules)
    • index.css
    • index.js
    • Control/
      • Control.js
    • Overlay/
      • Overlay.js
    • ...
  • main.js (App entry point, manages Electron & Express configs)
  • package.json (App configs)

Go ahead and run npm install. While npm fetches all the required packages, go ahead and take a look at the package.json file's script section. At the risk of losing you to another bulleted list, you can see the various commands that will finally allow us to finally get this bad boy up and running.

• "start": "cross-env PORT=3000 react-scripts start"
  • Launch the application's Create React App
• "electron": "wait-on tcp:3000 && electron-forge start"
  • Launch the application's Electron main.js component only after it sees a service running on port 3000.
• "dev": "concurrently -k "BROWSER=none npm start" "npm:electron""
  • Use concurrently to launch the start and electron scripts at the same time. Supress Create React App's standard browser-opening behavior.
• "build": "cross-env PORT=80 react-scripts build"
  • Build the Create React App instance using port 80.
• "make": "cross-env PORT=80 react-scripts build && electron-forge make"
  • Build the Electron application using port 80.
• "package": "cross-env PORT=80 react-scripts build && electron-forge package"
  • Build the Create React App instance using port 80, then make and package the Electron application for distribution.

As you can see, these scripts typically build on top of each other. npm run dev launches npm start and npm electron together, while npm run package kicks off npm run build and electron-forge package at the same time. Along with the packages I've already discussed, you've probably noticed that Sous Chef takes advantage of the Electron Forge toolkit to streamline the build and distribution process.

You're almost ready to get started. There's just one last piece that needs taking care of. Sous Chef uses the Twitch and Twitter  APIs for fetching data and interacting with 3rd party services. You'll need developer API keys for both websites, so head over to their developer sections, register, and create a new dev application. Once you've got Twitch's client ID, go ahead and copy the format in .twitch-keys_example.json to create .twitch-keys.json. Paste your client ID into the new file's json. Do the same for .twitter-key_example.json. You'll need to put your Twitter consumer key, consumer secret, and bearer token into .twitter-key.json. Twitter can take a few days to create a dev account for new users, so go ahead and do this process now if you're thinking about using Sous Chef.

Alright, that's everything! Go ahead and fire up npm run dev, and you should see Sous Chef start. If everything looks good, you can use npm run package to create a nice compiled application with a single icon to click.

Using Sous Chef

Basic Setup

Once you've got OBS up and running, you'll need to integrate its overlay into your OBS scenes. Create a browser overlay element, and make sure it's the same resolution and size as your screen. Set the source to Sous Chef's overlay URL. There's a few options for this, which can be found in the Config tab of Sous Chef. There's the human-friendly http://souschef.local/overlay for system's with Apple's Bonjour multicast DNS service installed, http://[Your IP]/overlay as a fallback for systems without Bonjour, and http://localhost/overlay if you don't need to access Sous Chef on your LAN. If Sous Chef is running in dev mode, make sure to put :3000 after the domain.

If you'd like to create a scene without the video inset panel, add the query string parameter ?noInset=true to the end of the URL.

If you haven't already, go install the OBS-Websocket plugin. This will allow Sous Chef to remotely control OBS from outside of the OBS application. You may keep OBS-Websocket's settings at their defaults. If you need to change the default port or would like to add authentication, these settings are managed in /plugins/obs.js via the obs-websocket-js package.

The "Now Playing" iTunes integration does not require any specific configuration. If you're using iTunes on Windows, iTunes on the Mac, or Apple's new Music app on the Mac, Sous Chef will automatically show song information and cover art when a new track starts playing.

The Sous Chef control panel is divided into three main sections: Cook, Prep, and Config.

Cook Tab

Scene Switching & Hotkeys

The top of Sous Chef has your classic scene-switcher interface. The button layout is designed to mimic Dave Madison DIY Streamdeck project. We've got one at the base of the stove, so it's nice to have the same button layout mapped in software as well. It provides a quick interface to move between the stove, cutting board, and kitchen cameras, as well as quick actions such as muting the microphones or toggling confetti.

Active Timer

The Active Timer panel lists the timers currently being displayed on the overlay. Once a timer expires, the control panel will play a whistle sound effect, and the expired time will begin to flash red. There will also be an attention-grabbing red flashing boarder on the overlay itself. Timers can be canceled or restarted at any time. The scene Switching and Active Timers panels are responsive, so they'll be displayed side-by-side if the control panel is large enough.

New Timer

The New Timer panel provides an interface for creating new timers. Users can optionally give the timer a unique name, and either provide a specific amount of minutes and seconds, or use one of the provided hotkeys for common timer amounts.

Show Image

Sometimes a a picture is worth a thousand words, and you'd just like to show your viewers a specific image from somewhere on the web. The Show Image panel allows you to create a pop-up image panel on the overlay software. It accepts an image URL, and provides options for rotating images in the case that OBS's browser element has difficulty reading a camera's rotation EXIF data. The control panel provides a small thumbnail of the currently displayed image so that the producer can have immediate feedback as to whether or not anything is currently being displayed on the overlay.

Show Tweet

Similar to the Show Image panel, the Show Tweet panel allows you to embed a tweet from Twitter.com on the overlay. The embed panel supports Twitter video and Twitter's .gifv videos, allowing you to quickly show off some animated content.  

Probe Thermometer Control

This section could honestly be a standalone blog post. After a few streams involving frying, we realized that there's not much for the audience to watch while the oil warms up. There's a number of fry recipes that rely on maintaining a particular fry oil temperature, so we decided why not feed two birds with one scone and display our probe thermometer's output on the overlay itself?

This is of course easier said than done. We'd been using the reliable Thermoworks Chef Alarm, but it doesn't provide any Bluetooth or Wifi connectivity that we could piggyback off of for the overlay. Rather then investing in a new thermometer, I decided to build a small probe-thermometer-to-PC adapter using an Arduino-based microcontroller. The Arduino reads the electrical resistance of the probe thermometer, passes it through the Steinhart–Hart equation to determine how hot the probe is, and then sends the data to the PC with a basic USB serial signal. There's even a small seven-segment display built in for some immediate feedback.

The Probe Control panel in Sous Chef lets you control what you'd like to do with this thermometer data. Once you selected the proper serial port, you can either display the current temperature, or you can show a live-updating plot of the data with a Chart.js graph. There's also the ability to set an alarm to go off when a target temperature is reached.

Toggles

Alright, this one's a bit more straightforward. There's a few less-frequently used overlay elements such as confetti or an announcement banner. This panel does what it says on the tin, and allows you to toggle these on and off.

Remote Producers

Part of streaming is letting your audience get in on the fun. A few of the overlay's elements have been tied to chat commands like !cuttingboard or !confetti. The Remote Producers panel allows you to grant permissions to specific users to take over producing responsibilities for the stream.

Prep Tab

Recipe & Drink

The Recipe and Drink panels control a small overlay element which let people know what's on the menu for the evening, and what cooking beer you're enjoying during the stream. The URL section controls a small chat bot which responds to !recipe or !drink.

Reminders Bot

The Reminders Bot is a Twitch chatbot which posts specific messages at a regular interval. This is usually used to remind people of ongoing charity drives and other events.

Trivia Bot

We've been experimenting with a Trivia Bot recently as a way to boost viewer engagement. It's currently managed through a small trivia.json file stored within Sous Chef itself. The trivia bot will post a message at a regular interval, allowing people to score points for various stream prizes.

Config Tab

Twitch Integration

The aforementioned Twitch integration is controlled through Twitch's OAuth API. Sous Chef requires two separate logins. Collecting stream event data requires the broadcaster to log in, while posting chat bot messages requires the specific chat bot account to login.

OBS Integration

The camera switching components rely on OBS's websocket plugin. The connection kicks in automatically when Sous Chef launches, but its status can be double-checked here if something's gone wrong.

Sous Chef Information

The application has two main web endpoints: The control panel interface, and the overlay itself. The Sous Chef Information panel provides links to these pages in a variety of forms for testing purposes. The most user-friendly of these links is the souschef.local Bonjour networking (mDNS) URL. If the client machine does not have Bonjour installed however, a direct IP option may be used as well.

Closing Thoughts

Sous Chef has been a fun quarantine project. It's helped me learn a lot about NodeJs, React, and integrating with 3rd party services and clients. The app is currently fine-tuned to our cooking stream's specific needs, but if it looks like something you would be interested in using, don't hesitate to reach out to me with ideas. All of the code is up on my Github for forking as well.

Internet Famous is a digital version of the classic Celebrities or Hat Game party game. More specifically, it's an open-source version of Alex Hague and Justin Vickers' Monikers. The game itself is pretty straightforward. You spit your group into two teams, and have 60 seconds to get your team to guess as many weird, quirky card titles as possible. In the first round, you can say anything you want to. In the second round, you can only say a single word. In the third round, you can't say a thing, and play charades to get your friends to guess the card. The catch is that reach round is played with the same deck of cards, meaning that there's a pretty good chance you'll come up with some good in-jokes by the time you make it to the last round.

How to Play

Skip the boring compiling and building stuff, just point your web browser at /internet-famous/

How to Build

Oh, you actually want to do the compiling and building stuff. Internet Famous is built on the React JavaScript framework. It uses Redux as a state container, and Express as a simple webhost. The app doesn't have any logins or persistent state, which means it's pretty simple to build. The package.json file contains all of the NPM packages you'll need, and webpack puts everything together. If you'd like to run the game locally in development mode, copy this repository and run npm start -s to get a local sever running. If you'd rather build the game for production, run npm run build, and upload the resulting Node app to your webserver of chioce.

Disclaimers & Licensing

Emoji art assets provided by EmojiOne 2.3, a Creative Commons BY 4.0 project. React-friendly SVG library courtesy of wilhearts' https://www.npmjs.com/package/react-svg-emojione NPM package.

Internet Famous is a Creative Commons BY-NC-SA 4.0 derivative of the card game Monikers. The name Monikers is a registered trademarked of Palm Court LLC. Internet Famous is unaffiliated with Monikers and Palm Court LLC. If you enjoy Internet Famous, why not pick up a physical copy of their game at http://www.monikersgame.com?

This work is available under the MIT and Creative Commons BY-NC-SA 4.0 licenses.

While Github is all the rage, BitBucket is still a popular alternative for code repositories. A gamedev buddy @RedVonix has been working on an upcoming title, and wanted to automate BitBucket commit notifications to his Discord chat. This is built into Discord and Slack if you're using GitHub, but Bitbucket took a little extra finagling. BitBot is a small Node script I created for sending commit messages from BitBucket pushes to the Discord or Slack room of your choice. BitBot takes advantage of BitBucket's outgoing webhooks, and Discord/Slack's incoming webhooks. You'll need your own server running NodeJS in order to receive and pass on the messages. The source can be found on my GitHub page.

Configure Discord Webhooks

Navigate to the channel of the Discord server you would like BitBot to post messages in. Click the gear icon next to the channel name. (Note: You will need admin privileges on the server to configure webhooks and use BitBot.) In the channel settings window, click 'Webhooks' on the left hand side of the screen. Click 'Create Webhook'. Enter a bot name, confirm the channel, and optionally upload an icon. Copy the Webhook URL, and click save.

Configure Slack Webhooks

Navigate to the channel of the Slack server you would like BitBot to post messages in. Click the gear icon on the top of the page. Select 'Add an app' from the dropdown menu. Your Slack channel's app manager will appear in a new browser window. (Note: You will need admin privileges on the server to configure webhooks and use BitBot.) Click 'Manage' in the top right of the browser window. Select 'Custom Integrations' from the left side of the page. Choose 'Incoming Webhooks', and then 'Add Configuration'. Slack will ask you which channel you would like the bot to post into. Click 'Add Incoming Webhook Integration'. On the next page, you can configure your bot further. Copy the Webhook URL.

Configure BitBot

Clone this repository to an empty public folder or subdomain on a server running Node. Edit the config.js file. Set the name to whatever you would like BitBot's display name in the chat to be. Choose a port, and paste in at least one Webhook URL from the previous steps. BitBot can post to both Discord and Slack, or just one of these services. If you are not using a service, just leave the single quotes blank.

Build and Run BitBot

Run an npm init command to download the required npm packages. Run npm start to begin running BitBot.

Configure BitBucket

Finally, browse to your BitBucket repository. Click the 'Settings' option and choose 'Webhooks' from the settings menu. Click 'Add webhook'. Give your webhook a title, and paste in the server URL where you installed BitBot. Make sure 'Active' is checked. Check the 'Skip certificate verification' checkbox if your server is not running SSL. Make sure 'Triggers' is set to 'Repository push'.

Congratulations, BitBot should now be up and running.

Undercast is a small third-party desktop applet for Marco Arment's popular iOS podcatching app Overcast. This project can also be found on Github.

What's Undercast For?

Overcast has become a popular alternative to Apple's first-party Podcasts app. It's simple and clean interface makes it easy to access your shows, and it has a few nice power features like voice boost and smart speed. Overcast also has a syncing service to manage your subscriptions and playback progression across devices, but it unfortunately lacks an official Mac or Windows client. Overcast does sync your data with Overcast.fm however. Overcast.fm lets you access your subscriptions, and offers a basic web-based player for listening to your shows.

On it's own, Overcast.fm is a good solution for accessing your podcasts on the desktop when in a pinch. It lives in one of your browser tabs however, so there's a chance you can accidentally close it, and more critically, it lacks support for the ubiquitous keyboard media keys.

Undercast tries to make up for these shortcomings. Rather than writing an entirely new podcasting client that highjacks Overcast's syncing service, Undercast simply wraps the Overcast.fm web player inside of a desktop applet that lives in your menubar or system tray.

Features

• Undercast lives in your menubar or system tray.
  • Click on it to pull up the Overcast window, or right click on it to access the options or quit.
• Media Key Support. Undercast supports keyboard media keys on both Mac and Windows.
  • Play keys will play and pause your podcast. Stop keys will pause the currently playing podcast. Forward/Rewind keys will jump your podcast forward or back by a few seconds.
  • The amount of seconds Undercast skips is determined by a setting on the iOS app. In Overcast, tap on the Overcast icon on the top left of the main screen, then go into the "Nitpicky Details" menu, then change "Seek Back By" and "Seek Forward By" to your desired values.
  • By default, Undercast will attempt to bind your system's global media keys to it. If you would like to free up control of your system's media keys to another application, right click on the icon and deselect "Bind Media Keys".
• Playback Indicator
  • By default, Undercast's icon changes from white to orange when a podcast is playing. This setting can be disabled in the right click menu.

How Undercast Works

Undercast uses a technology called Electron. It was developed by Github for use with their Atom text editor, but has become a generalized tool for creating cross platform applications using web technologies like HTML, CSS, and Javascript.

Using Electron, Undercast creates a sandboxed instance of Overcast.fm's website. As far as the website is concerned, it's just been opened in a standard browser instance. Undercast then injects a small javascript API into the Overcast instance to enable media key controls. The menubar aspects of Electron are handled by maxogden's menubar package.

Getting Undercast

Precompiled builds of Undercast are located in the /releases folder. Simply unzip them and launch the .app or .exe file.

Current Mac Release

Current Windows Release

Building It Yourself

Undercast is a standard straightforward Electron application. Run npm install to download the necessary Node packages, then run ./node_modules/.bin/electron . to launch the application. Compiling the application for production can be done with the electron-packager npm module.

Disclaimer

Undercast is not an official Overcast application. It has no relation to Marco Arment, and offers no guarantee that it will continue working in the future. Undercast is a free open source project available under the MIT license.

Cron is a popular reoccurring task scheduler for Unix-based computer systems. The concept is relatively simple: Create a .crontab file with your scheduled events, and an omnipresent system daemon executes the command at the correct time. Cron has been around since the 1970s, so the crontab's file format has seen plenty of use outside of Cron itself. Being such an old format, Cron can take a while to completely wrap your head around. Set your brackets and braces aside, Cron works completely off of whitespace and newline characters.

Here's an example of your typical .crontab file:

30 08 10 06 * /home/john/full-backup
00 11,16 * * * /home/john/bin/incremental-backup
00 09-18 * * * /home/jane/check-db-status

The first five entries designate the times the job should run, and the last entry is the command that should be run. Cron's manfile gives a brief rundown of what which number signifies:

# ┌───────────── minute (0 - 59)
# │ ┌───────────── hour (0 - 23)
# │ │ ┌───────────── day of month (1 - 31)
# │ │ │ ┌───────────── month (1 - 12)
# │ │ │ │ ┌───────────── day of week (0 - 6) (Sunday to Saturday;
# │ │ │ │ │                                       7 is also Sunday on some systems)
# │ │ │ │ │
# │ │ │ │ │
# * * * * *  command to execute

In addition to numbers, Cron also accepts * wildcards, and will also allow ranges of values (1-5) and comma separated lists of values (1,3,6,8).

Some cron jobs are easier to build than others. It's fairly easy to determine that 0 0 * * * means midnight every night, but it's less evident that 0 0 * 1 0 means midnight on every Monday in January. To double-check their work, programmers often turn to Cron-to-English tools to ensure their task will run at the correct interval.

I've been learning React recently, and realized that a such a converter would be a nice way to test the React skills I had learned without needing to code an extensive backend. The end result was Chrono, a simple Cron-to-English Cron Job Builder.

Chrono takes a standard 5 field Cron job, validates the entries, and then converts it to English. It also provides a field-by-field explanation of valid values. It can be used in the embed above, or viewed directly using the link.

Building Chrono was relatively straightforward. It uses the latest version of React (15.3), and the ES2015 and JSX javascript standards. I used the Gulp task runner to convert the ES2015 scripts to standard ES5 javascript using the Babel polyfill. For styling the page, I used the Bootstrap framework and the Sass CSS Preprocessor. For converting the cron jobs to plain English, I used azza-bazoo's PrettyCron NPM package. This package was converted for use with React by Browserify. Finally, the validation of the various cron fields was done by this lengthy RegEx. The code for Chrono can be found on my Github repository.

Using computers to message each other isn't exactly a new concept. From the dawn of networked machines, we've been using a variety of tools to communicate with each other. Be it email, IRC, IM, SMS, or one of the relative newcomers like social networks, group messaging apps, and persistent team chats like Slack, we've gotten pretty good at letting each other know what we're up to.

One newer wrinkle in this paradigm is human-to-machine messaging. Rather than using a messaging app to talk to another human being, your messages are being sent to a fully or partially automated computer script. These services can vary in complexity, ranging from something as primitive as a phone tree, or scaling all the way up to natural language processing with something like IBM's Watson.

These new services have started to be colloquially referred to as "Bots". Services like Siri and Slack have gotten people used to talking to machines, and so designers have begun to focus more attention on these new "Conversational UIs". There have already been a few interesting projects to come out of this new focus, such as the Lifeline mobile game, or Quart's new iOS news app.

That's where Bruno comes in.

Bruno

Bruno is a conversational UI concept that lives completely in your web browser. It loosely mimics the iOS Messages interface. It supports image attachments, gifs, emoji, and links. Rather than allowing full text entry, Bruno allows the user to choose from a fixed set of replies.

This UI mockup was a chance for me to learn a variety of newer web technologies, it probably won't work if your browser doesn't suppose ES2015. Bruno uses CSS3 Animations, Promises for flow control, Emoji One for cross platform emoji support, and Flexboxes to keep everything nice and centered. The messages are currently a fixed script of JQuery-parsed .json files, but he was designed modularly so that a more complicated message source could be implemented later.

I just referred to my program as a 'he'. The future is weird.

If you'd like to try out Bruno, feel free to use the embed below, or view it full screen here. His- err, the page's source is also up on Github.

I've already highlighted a few of my favorite projects on this site, but I wanted to take a minute to post about some of my older college works. Enjoy.

PiOT

It's an Internet Of Things sensor based off of a Raspberry Pi. Get it?

The PiOT is a data capture device for a do-it-yourself IoT setup. It's equipped with a pair of DS18B20 temperature sensors, a DHT22 combination temperature/humity sensor, and an optional Raspberry Pi camera.

The sensors are read and logged on a five minute interval. This data is uploaded to Sparkfun's data.sparkfun.com data logging service, or a personal hosted instance of the underlying Phant service. From there, data.sparkfun.com and Phant can serve up .json files to a variety of endpoints, including a web dashboard, mobile app, or even a smartwatch.

It was a fun project combining several of my favorite technologies. I got to solder a sensor together, write some Python scripts for the sensors, design a Chart.js and Bootstrap web dashboard, and even learn how to write Pebble smartwatch faces.

Movie Knight

Movie Knight was my senior project. Working with a group of classmates, we followed standard Agile and SCRUM methodologies to create an 2.3 Android-based movie recommendation app.

The app was a least-grief recommendation service for groups. You and your friends would enter your movie collections into the app, giving each film a 5-star (with half increment) rating. Then, you would specify which users were attempting to watch a movie together, and the app would recommend movies that best fit the entire group's tastes.

I handled the majority of the work writing the Android app. Another classmate handled the database logic, and finally our final group member wrote the recommendation engine. It was a fun project, and gave a good amount of insight into mobile app development.

Dice Roller

This one might take a bit of explaining. My school had a Computer Human Interaction course. It was a fascinating class that taught Computer Scientists to use Humanities-style skills in order to study users more efficiently. As part of the class, we had to study a group of people in a culture we didn't belong to. These groups ranged from student athletes to bingo hall regulars. I had never played a tabletop RPG before, so I decided to study my friends during their weekly Dungeons and Dragons game.

I got to hang out with friends for homework, how cool is that?

The final project of the class was open ended. All we had to do was to create something that would benefit the group we had studied. I had recently been teaching myself the Arduino platform, so I decided to put those skills to good use.

I ended up creating an electronic dice roller. Tabletop games like Dungeons and Dragons often require users to roll all sorts of non-standard dice. The device I created could simulate any number of dice rolls, and automatically integrate a player's skill modifiers into the final result. It even had a motion sensor in it so that you could mimic the sensation of rolling dice.

My favorite part of the project was the enclosure. I used Ponoko.com to laser-cut a custom enclosure I had created in the 3D modeling software Sketchup. It definitely helped turn heads during the final presentation.

Bootstrap 3's documentation is good at showing you how to use its grid system, but it's not that great at telling you when or why you might want to use some of the grid system's various features. This abridged guide is going to try and help fill in some of those gaps, and point out some beginner pitfalls of the Bootstrap grid.

Wrappers

Before we can get started discussing the grid itself, we first need to briefly go over some of Bootstrap's wrapper elements. Bootstrap offers two primary page wrappers .container and .container-fluid. .container has a fixed width, while .container-fluid always take up the full width of the page. Bootstrap expects one of these two divs to be wrapped around your page's primary content. The grid system won't work without it.

One of the common pitfalls with Bootstrap's .container is not knowing when to break them up into separate elements. It's rare that you'll just have one container covering the entire page.

<html>
<body>
	<div class="container">
		// This rarely happens.
	</div>
</body>
<html>

<html>
<body>
	<nav class="navbar">
		<div class="container">
		</div>
	</nav>
	<div id="main">
		<div class="container">
			// Main content goes here.
			// The typical Bootstrap layout has a few containers.
		</div>
	</div>
	<div id="footer">
		<div class="container">
		</div>
	</div>
</body>
</html>

The second wrapper is a much shorter discussion. When working with the grid system, you need to place your grid within a .row div. The Bootstrap documentation dedicates all of 6 words to this vital point. Place grid columns in any .row.

The Grid

Alright, with wrappers out of the way, we can move onto the grid itself. The Bootstrap grid system has 12 column slots that are typically displayed side-by-side. It uses CSS media queries to stack these columns on top of each other when your browser window gets small enough to pass a certain breakpoint.

<html>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
		</div>
	</div>
</body>
</html>

Large Window:

Small Window:

You can set which breakpoint you'd like the columns to start stacking at by changing the variable in the middle of the column. .col-lg-1 is shown side by side with the other columns when the browser is 1170px or larger, .col-md-1 shows side by side with other columns when the page is 970px or larger, .col-sm-1 shows side by side with other columns when the page is 750px or larger, and .col-xs-1 is always shown as a side-by-side column. Columns using .col-xs-1 will never be stacked, no matter how small the browser window gets.

Of course, page layouts are almost never twelve individual columns of content. Most page layouts take advantage of about two or three columns. To create a layout with only a few columns, we'll need to adjust the size variable at the end of our column class. Instead of using 12 .col-md-1 columns, we'll use just two columns: .col-md-8 and .col-md-4. The number at the end represents how many columns wide a div is. For most layouts, you'll want all of your column sizes to add up to 12.

<html>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-1">.col-md-8</div>
			<div class="col-md-1">.col-md-4</div>
		</div>
	</div>
</body>
</html>

Large Window:

Small Window:

Columns can have different sizes at different breakpoints. Take for instance the .col-md-8, .col-md-4 layout shown above. If you wanted the .col-md-4 sidebar to render narrower on a smaller screen, you should just add the sm class after the md class. .col-md-8 .col-sm-9 and .col-md-4 .col-sm-3 would feature a thick sidebar at lg and md breakpoints, a narrower sidebar at the sm breakpoint, and would stack at the xs level. Just remember that you still would generally want your columns to add up to 12 at whatever size they're at.

Column Wrapping

There is one exception to the add-up-to-12 rule, which the "Column Wrapping" section of the Bootstrap docs tries to explain. If you've got a .row that is more than 12 columns wide, the overflow columns will be wrapped around to the next line. A trio of .col-md-6 columns would render as two boxes side by side, with a third box underneath the first. This technique is useful for when you're rendering n items from a database, and don't know how many items are going to be retrieved. You'll frequently see it used in galleries and similar layouts. The overflowed columns will still stack on on small screens as before.

<html>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-1">.col-md-6</div>
			<div class="col-md-1">.col-md-6</div>
			<div class="col-md-1">.col-md-6</div>
		</div>
	</div>
</body>
</html>

Large Window:

Small Window:

Offset Columns

Offset columns are fairly straightforward. They create a gap in your column layout. .col-md-4 and .col-md-4 would usually create two blocks that are four columns wide, with a four column wide space after the two blocks. If you instead have a .col-md-4 div and a .col-md-4 .col-md-offset-4 div, the second block will be pushed over 4 spaces. The page will render with a block 4 columns wide, a space 4 columns wide, and then a block 4 columns wide. The xs/sm/md/lg sizing in the col-*-offset-4 div refers to what screen size the offset should happen on. The divs .col-sm-6 .col-md-4 and .col-sm-6 .col-md-4 .col-offset-4 will be stacked on xs screens, side by side on sm screens, and separated by a 4 column gap on screens md and above. I don't really use this feature much, but it can be useful for certain layouts.

Large Window:

Small Window:

Large Window:

Small Window:

Nesting Columns

Nesting columns is one of the tricky mental leaps to make with grid systems. It's often not strictly necessary, but can help logically separate your page better. For instance, if your page layout has a main content area and a sidebar, you'd probably use a .col-md-8 and .col-md-4 div. If for whatever reason you needed to break your main content area up into another pair of equal divs, you generally would not want to change the page layout to be a .col-md-4 .col-md-4 .col-md-4 grid. Instead, you would want to keep the .col-md-8 .col-md-4 layout, and nest a new grid inside of the main col-md-8 content area. The nested grid will need its own .row element, but it doesn't need another .container wrapper.

<html>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-8">
			<p>.col-md-8</p>
			<div class="row">
				<div class="col-md-6">
					.col-md-6
				</div>
				<div class="col-md-6">
					.col-md-6
				</div>
			</div>
		</div>
		<div class="col-md-4">
			.col-md-4
		</div>
	</div>
</div>
</body>
</html>

Large Screen:

Small Screen:

The new nested divs still needs to add up to 12, not the width of the parent column. After all, you're creating a whole new set of columns. So inside of your .col-md-8 column's .row wrapper, you would want to put a set of .col-md-6 .col-md-6 divs. If you wanted to make the main content area temporarily have three columns, you'd instead use .col-md-4 .col-md-4 .col-md-4, etc.

Column Ordering

Finally there's column ordering. When using Bootstrap's grid system, your columns will be displayed in the order they're declared. When unstacked, they'll be shown in order from left to right, and then they're stacked they'll be shown top to bottom. The only way to change the stacking order is to change the order in which your columns are declared in your HTML code.

In the unstacked, side-by-side view however, it is possible to change the order of the columns. Using the .col-md-8 .col-md-4 example from before, let's say that you wanted the col-md-8 column to stack on top of the .col-md-4 column, but you wanted the .col-md-4 column to render on the left of the .col-md-8 column when on larger pages.

To do this, you would need to use the .col-md-pull-* and .col-md-push-* helper classes. By changing your columns to .col-md-8 .col-md-push-4 and .col-md-4 .col-md-pull-8, the larger column would be pushed out an extra 4 column lengths, and the smaller column would be pulled in 8 column lengths. The end result would be that the columns would switch places when viewed at md breakpoints and above.

<div class="row">
	<div class="col-md-8 col-md-push-4">.col-md-8 .col-md-push-4</div>
	<div class="col-md-4 col-md-pull-8">.col-md-4 .col-md-pull-8</div>
</div>

Large Screen:

Small Screen:

Large Screen:

Small Screen:

Conclusion

I hope these explanations make sense. It can take a while to get used to combining all of these different techniques together. Make sure to check out the Bootstrap documentation to see some of the more advanced options I didn't have a chance to go over here.

I recently looked into what it takes to theme a Tumblr site. While there were a few existing Bootstrap-based Tumblr themes, none of them were that straightforward to use or customize. I decided to throw this theme together for anyone else who happens to be looking for a Bootstrap-based Tumblr theme.

tl;dr

Take the index.html file in the /dist folder and upload it to the "Edit Theme" section of Tumblr. That’s it. You’re done.

The Hard Way

Wallace provides two methods for styling the theme. Option 1 is the simple method described above. You fetch the Bootstrap.min.css file from a CDN, and the theme’s header contains the few Tumblr specific stylings required to make the page render correctly.

Option 2 is a bit more tricky. Due to the popularity of Bootstrap, sites powered by the framework have all started to look the same. To combat this, Bootstrap offers several different methods of theming the framework. The most simplistic method uses getbootstrap.com/customize/, while the slightly more advanced methods rely on the LESS and Sass CSS preprocessors. CSS Preprocessors act as a superset of CSS, allowing you to take advantage of more advanced features such as variables, inheritance, and mixins.

Wallace is designed to take advantage of Sass. It uses NodeJS’s LibSass to compile Sass files, aided by the Grunt task runner and the Bower package manager. If you’d like to theme Wallace, you’ll need a system with Node, Grunt, and Bower installed. Node’s website has everything you need to install the scripting language. Once that’s done, you’ll want to install Grunt and Bower globally on your development system.

npm install grunt-cli -g
npm install bower -g

Now that you’v gotten that taken care of, you can let Wallace’s install script’s do it’s thing. Execute the NPM package.json file, then Bower’s bower.son file.

npm install
bower install

Finally, all you need to do is run the Gruntfile.js. Grunt will take the ./sass/styles.scss file and compile it down into the ./css/styles.css file.

grunt

styles.scss already has a @import command for the _bootstrap.scss file that Bower fetched. styles.css is the only stylesheet your Tumblr theme will need. Go to the “Edit Appearance” section of Tumblr, then click “Edit Theme”. Click “Edit HTML”, then copy and paste Wallace’s Index.html file into the window. Click the gear in the top left corner and then click “Theme Assets”. Upload your compiled style.css file here. Find the section on line 164 that reads “[REPLACE WITH TUMBLR UPLOADED CSS FILE]”. Highlight this text, then slick the “Insert” link next to the styles.css file you uploaded. Click “Update Preview”, and then “Save” at the top of the coding pane. Wallace should now be successfully applied to your Tumblr blog.

License

Wallace is licensed under The MIT License (MIT). It is based in part on the excellent Build Themes ebook by Rohan Chandra.

In my introductory blog post, I explained the reasoning behind me jumping ship to the Ghost blogging platform. I always strive to give my sites the personal touch, so went and made my own Ghost theme to go along with my Stuart-Jones.com blog. If you're taking a peek under the hood, feel free to go look over at my Github entry for:

Ninamori

A simple and clean theme for Ghost using Twitter Bootstrap 3, Font Awesome Icons, SASS, Bower, and Grunt.

Features

Ninamori was designed and tested for version 0.6 of the Ghost blogging platform. It supports the standard theme features of Ghost up until that point, including:

• Blog Image
• Blog Cover
• Customizable Navbar
• Tags

Ninamori was designed as a single user portfolio site theme, so it does not show post authors.

In addition to these standard features, Ninamori also includes:

• Auto-hiding navbar with scroll-up reveal
• Tag specific cover images
• Link-Blog Support

Demo

Ninamori powers my site! Check it out at /

Getting Started

Ninamori uses Bower for dependency management, and Grunt as the task runner. Both of these tools require Node and npm, which should already be installed on a system running Ghost. Instructions on how to use Bower and Grunt can be found on their respective websites. To get started using the theme, clone it to your Ghost's content/themes/ folder.

git clone https://github.com/ImStuartJones/ninamori.git

Use NPM to install the required development packages.

npm install

Next, run Bower to download the necessary web frameworks. (Bootstrap, Jquery, etc.)

bower install

Bower should run and install the necessary packages into assets/bower_components/. Next we need to run Grunt to compile Ninamori's .sass and .js files.

grunt

The gruntfile is also configured to be run in watch mode with the following task.

grunt watch

Finally, Ninamori's gruntfile also supports BrowserSync. BrowserSync is a live browser reload package which streamlines web development and device testing. More information can be found at the BrowserSync website.

grunt browsersync

Your Ninamori instance should be ready for Ghost to use at this point. Login to your Ghost instance and change the theme on the main page of the Settings screen.

Changing the Tag Cover Images

By default, Ninamori comes with a variety of cover images for posts based on their tag. The image files can be found in assets/images/. New tags can be defined in the partials/post_header.hbs file. It uses a simple Handlebar has/else waterfall, so a post with multile tags will use the first one referenced.

{{! Post Header has custom images based off of tags.}}
{{#post}}
{{#has tag="tech"}}
<div class="image-header-post" style="background-image: url('{{asset 'images/post-bg-tech.jpg'}}');">
{{else}}
	{{#has tag="board-games"}}
		<div class="image-header-post" style="background-image: url('{{asset 'images/post-bg-board.jpg'}}');">
	{{else}}
		{{#has tag="video-games"}}
			<div class="image-header-post" style="background-image: url('{{asset 'images/post-bg-video.jpg'}}');">
		{{else}}
			{{#has tag="lgbt"}}
				<div class="image-header-post" style="background-image: url('{{asset 'images/post-bg-lgbt.jpg'}}');">
			{{else}}
				{{#has tag="news"}}
					<div class="image-header-post" style="background-image: url('{{asset 'images/post-bg-news.jpg'}}');">
				{{else}}
					<div class="image-header-post" style="background-image: url('{{asset 'images/post-bg.jpg'}}');">
				{{/has}}
			{{/has}}
		{{/has}}
	{{/has}}
{{/has}}
{{/post}}

Licensing

Ninamori and its included images are covered under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license.