Mobile Group Chat with One Line of JavaScript

One of our first and most popular blog posts is Chat in 10 Lines of Code. In my constant quest to outperform PubNub founder and CTO Stephen Blum, I decided to challenge myself to create a mobile group chat demo that was responsive and ready for mobile in just one line of JavaScript.

mobile group chat

Yes, that’s right…with one line of code you’ll get a mobile group chat app that looks like this:

mobile group chat

Today, I’m happy to announce the release of the PubStrapChat jQuery plugin. With this library you can add mobile group chat to your site, mobile or otherwise, with a single line of javascript:

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.

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal.

All the code you need to get started and an example is below:

See the Pen PubStrapChat by Ian Jennings (@ianjennings) on CodePen.

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.

Building a Devtools Chrome Extension to monitor traffic from PubNub

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:

Extending DevTools – Google Chrome

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.

chrome.devtools.network – Google Chrome

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.

chrome.devtools.panels – Google Chrome

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.

chrome.devtools.inspectedWindow – Google Chrome

I’ve made a few extensions in the past, so I started with the Chrome Preprocessor Example from the samples page.

Sample Extensions – Google Chrome

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.

PubNubChromeConsoleRoundAnd that’s the core of it! From here the extension does some additional work to check if PubNub messages have been bundled. Everything else is formatting, user interface, and shiny graphs.

You can learn more and download the full Chrome extension here.

PubNub Console for Google Chrome Update

nullWe’re happy to announce that we’ve released a number of new features and upgrades to the PubNub Console for Google Chrome. We released the extension just last month and have already made numerous improvements to the interface.First, you’ll notice an overall improved styling of the console, as well as a shiny new PubNub logo in the toolbar for aesthetics.The most requested upgrade (by the PubNub team themselves) was the ability to see exactly when a message was published or received. You can now see the date appear next to the message type.datesWe’ve also added the ability to filter the type of messages you see in output. Now you can choose to see only “publish” or “subscribe” type messages from a pulldown in the toolbar.

filterNext, 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.

here_nowFinally, 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.

sparklinesDid we miss something? Let us know what kind of improvements you want to see in the PubNub Console for Google Chrome! Tweet @PubNub or contact us.

Need more help with the PubNub Console for Google Chrome? Check out our how-to video below:

Fuck that city

“Where are you from!?”

“New York”

“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.”

Why z-index doesn’t work even though you set z-index: 99999;

Why z-index doesn’t work even though you set z-index: 99999;

Mote.io Now Supports Spotify + New Pandora Stations

The hackers are at it again! Rutgers student, Waynce Change or @wyc on github put together a Spotify remote! This remote works with the web player.

Now you can search, play, pause, backtrack and skip songs on Spotify Web with your phone. I know one person in particular who’s going to be very happy about this!

Chrome will update the extension to the latest version automatically, but if you need to install it head over to the Chrome Web Store.

That brings us to a total of a dozen remotes! We started with just 6 remotes at launch, and although we’ve both created and lost remotes along the way, the current list of supported sites stands strong!

The full list of remotes include:

  • Vimeo
  • Hype machine
  • Google Play music
  • Grooveshark
  • Youtube
  • Pandora
  • Soundcloud
  • Rdio
  • Tunein radio
  • Twitch.tv
  • Last.fm
  • Spotify web

Remember, you can make your own remote or improve existing ones by contributing to the Mote.io Chrome Extension. Hackers like you are responsible for making the last half dozen remotes.

I’m also excited to announce, a very highly requested feature, the ability to change Pandora stations!

Pandora is the most popular remote by far, and the ability to create new stations is the most common feature request.

Now when you synchronize your phone with the Mote.io extension and Pandora, you’ll get a search bar where you can type the name of an artist to use for a new station. Get the update from the Chrome Web Store.

That’s everything for now! Make sure to follow me or the Mote.io account on Twitter for more updates.

box-sizing: border-box; versus width:auto; and width: 100%;

box-sizing: border-box; versus width:auto; and width: 100%;

The difference between width: auto; and width: 100%;

The difference between width: auto; and width: 100%;