Got some cool feedback on Mote.io today:
Hello, I just wanted to recommend making it so when you are on your phone you can better navigate what’s on your computer if you are not actually looking at your computer. I use it mostly to power pandora to listen to music over a PA system, and when i need to run it I just have to remember where all the buttons are without looking at the computer.
I actually work for a Minor League Baseball team, and I use this app to control pandora in our stadium so I don’t have to keep going all the way up to the press box to change the channel, skip, thumbs up or down. I would just recommend making it easier to switch stations from the app without being at the computer.
I don’t go to Urban Outfitters often. But when I do, I buy small square yellow books that are less than 100 pages and half pictures.
I bought “Show Your Work” by Austin Kleon thinking it would help get inside the minds of users for my new project, DevPort. It turns out it inspired me to set up YAB (yet another blog). So here we are, once again.
Most of my Tumblr stuff made it over; though I’ve combined all three of my Tumblrs into a single blog found here.
One interesting note from “Show your work” is how Austin referred to blogs. He calls them “your own little corner,” which is easy enough to relate to. He also suggests using your own domain, your own site, and your own blog engine. Avoid the trendiness, restrictions, and judgements from Tumblr, Medium, etc. This is your corner and you should decide what that means.
I think I was too intimidated to post more on Tumblr knowing that all my friends, employers, and a handful of Venture Capitalists would get pinged about it. Then again, I was afraid nobody would read my content if I didn’t have a network to support it.
Well fuck it, now I have my corner and I’m going to write whatever I want.
When I was 15 or 16 I saw the move “Hackers” and it became my fantasy. I never spray painted my computer or learned how to roller blade; I thought learning to crack was the sure path to my “Hackers” enlightenment.
As I past through different scenes: academia, hackathons, the startup life, electronic music clubs… each world offering a taste but not quite fully encapsulating my fantasy.
Over the years I’ve had this urge to create some gathering place for hackers. First it was the “Hacker Hotel,” and most recently the “Hacker Bar.” Of course, in each scenario I imagine the bunker the characters in “Hackers” hang out in. On paper, these ideas quickly morph into kushier hangouts for startup folks.
At Electric Forest this year, my friend Andrew broke out a “Tron costume” and I remember slapping his back and shouting “you’re keeping the hacker spirit alive!”
It’s all I’ve ever hoped to do, but I can’t even explain what the hacker spirit is.
It’s somewhere between startup life and touring with Phish in a converted school bus. It’s blasting Gramatik out of a speaker while riding a neon yellow bike around downtown NYC. It’s wearing Google Glass at a standup desk with three monitors. It’s smoking hookah in UV light in your dirty old basement. It’s going to the arcade everyday to play DDR. It’s starting your ancient car with a switch you wired in yourself from RadioShack. It’s being a virtual worker. It’s a warehouse full of 3d printers, laser cutters, and an auto bay. It’s doing yoga to dubstep. It’s knowing your friends as screen names first and flesh months later.
Like any culture it’s impossible to define, but you know what it means to be a part of.
Yes, that’s right…with one line of code you’ll get a mobile group chat app that looks like this:
The chat box drops right into any div on your page. It’s fully responsive and will look great on any mobile site with Bootstrap. Or, you can ditch Bootstrap and style it yourself.
All the code you need to get started and an example is below:
The PubStrapChat plugin can be extended to use your own PubNub API keys and even your own user authentication system. You can configure the plugin by using an options object.
Check out the documentation to get it working with your custom user system. You can even set it up to use third party authentication systems like Facebook.
Why a custom PubNub Chrome Extension?
When I started developing Mote.io, all the PubNub publish and subscribe calls got noisy and confusing. To solve this, I created a custom function to manually title and log all PubNub traffic to the Chrome console inside Dev Tools.
You might ask: “doesn’t all traffic show up in the network tab?” It’s true, but we’re really talking about all traffic here, in one giant list. It’s unorderly and difficult to decipher. Plus, we only really care about a small portion of this network traffic; the JSON messages received.
You might be familiar with the ability to debug a single WebSocket in the Network tab. Wouldn’t it be great if the same was true for PubNub?
Because I carry the burden of creating all the most awesome stuff for PubNub, I decided to take matters into my own hands. I built a Chrome extension that does just this. It takes PubNub traffic and displays it in a fashion similar to WebSockets.
You can read more about this extension here. We just released a second version that adds message filtering and traffic graphs.
Google Chrome Devtools Extension APIs
Many developers are familiar with Chrome Extensions, but many are surprised to find that you can also create extensions for Chrome Developer Tools.
A DevTools extension adds functionality to the Chrome DevTools. It can add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more. DevTools extensions have access to an additional set of DevTools-specific extension APIs:
All we’re interested in is monitoring the PubNub traffic and formatting it in a way that makes sense. Lucky for us, Chrome Devtools exposes a network api that lets us catch all incoming traffic. Perfect.
Use the chrome.devtools.network API to retrieve the information about network requests displayed by the Developer Tools in the Network panel.
But where do we log the traffic? Devtools extensions allow us to create a new panel just for our extension. Again, just what we needed.
Use the chrome.devtools.panels API to integrate your extension into Developer Tools window UI: create your own panels, access existing panels, and add sidebars.
The third special API for Chrome Devtools is inspectedWindow. The PubNub Console extension does not make use of it, but it’s worth an overview.
Use the chrome.devtools.inspectedWindow API to interact with the inspected window: obtain the tab ID for the inspected page, evaluate the code in the context of the inspected window, reload the page, or obtain the list of resources within the page.
I’ve made a few extensions in the past, so I started with the Chrome Preprocessor Example from the samples page.
The goal here is to provide a general overview of how our Devtools extension works, but not necessarily a tutorial on how to make a full extension. However, if you want to follow along at home you’ll notice that almost everything you need to get started is within the Panel directory. I also highly recommend taking a look at the rest of the devtools examples.
Using the chrome.devtools.network API
Let’s take a look at how to monitor network traffic. We start by register a watcher for all page requests and fire a function when a new one is complete:
Great, now whenever a new network request is finished our function is fired. It works just like the Network tab.
But we don’t want every request, just stuff from PubNub. So let’s take a look at exactly what this function is returning to us so we can filter it.
Network requests information is represented in the HTTP Archive format (HAR). The description of HAR is outside of scope of this document, please refer to HAR v1.2 Specification.
So we can access the URI of the request through the *,request.url parameter. I did some googling and found this awesome URI parser gist which will really help us out.
Now it’s just a matter of parsing the URI according to the PubNub Rest Push API. All PubNub push traffic is sent through the request headers, so this is all we need to keep track of PubNub publish.
However, the body of subscribe calls is sent through the request content. You’ll notice from the chrome.devtools.network documentation that we don’t get request content for free.
There’s an additional function we need to call. It is cleverly named getContent() and is a property of the object returned from the first function.
You can learn more and download the full Chrome extension here.
Next, we added a here_now shortcut to the toolbar. When you click this button you’ll be able to see a list of all UDID’s currently subscribed to the channel.
Finally, we’ve added sparklines next to channel names so it’s easier to see which channels are receiving messages right now. The sparklines graph messages published + subscribed over the past 10 seconds.
Need more help with the PubNub Console for Google Chrome? Check out our how-to video below:
“Where are you from!?”
“FUCK THAT CITY. I moved from New York to Austin 10 years ago and never looked back.”
The was the first person I met in Austin. We split a cab from the airport to the bar I was meeting my friends at.
“New York City. I’ll tell you what. I ain’t never left anything there, so I ain’t goin back.”