Hackday: NewRelic and Chrome Dev Tools

Recently, I was paired up with a co-worker and our task was to speed up a section of our site. We relied heavily on the Developer Mode of the NewRelic Ruby gem. This was the perfect tool for finding slow pages and then diving down into the queries that are probably causing that.

Here is a screenshot of it in action.

Screen Shot 2015-06-23 at 10.48.47 AM

We recently had a hackday and I wanted to create something that would bring this front and center for our dev team. The problem is, no one ever tells the new guys about the newRelic summary page, or it’s a hassle to have the data in another tab (that needs refreshing). What is something that is always in our face? The browsers dev tools. That’s the perfect place for it!

The dev tool extension will wait for a page to load, then, via XHR, grab that NewRelic page, parse the table, and then create a graph that shows you the data over time. Have a look:

Screen Shot 2015-06-23 at 10.46.55 AM

It’s great to see, over time, how your changes affect the performance of the app.

Advertisements

Tab Pages Prototype

In this experiment, I’m interacting with a web page without activating the tab it’s contained in. Say you want to pause a song playing in one tab. You would have to switch from your current tab, pause, then switch back to your last tab. This demo shows the possibility of surfacing common functionality when you simply roll over the tab.

This demo was built as a Firefox add-on to quickly prototype the idea. Ideally, this would be a browser feature. Here is my original blog post on the idea.

How does the browser know to show a mini site when the tab is moused over?

This is up to the site developer. The developer would create a mini site, and added a link to it in the header of the main page. If the browser sees this link, it will know to display the mini site on rollover.

How do the two pages talk to each other?

Right now, I’m opening a web socket between the two pages (using Pusher.com to power this). This allows the two pages to communicate back and forth. So when I click a button in the mini page, a message is sent to the main page and handled accordingly. This goes both ways, too… a main page should be able to update content on the mini page as needed.

What else could this do?

  • It’s almost like giving each site it’s own add-on without having to create an add-on.
  • It could be powered by user scripts instead of waiting for developers to implement a mini.html page. However, lots of security risks there.

Possible Improvements

  • It might be nice for the tab to show some kind of visual cue that if they roll over it, something will happen.
  • It should have the option to be disabled for certain sites.
  • Could be triggered with key commands?
  • Would not open the panel immediately, give it a timer before opening

Tab Pages

I spend most of my day in a web browser. During this time, I accumulate tabs for various reasons; email, issue tracking system, language documentation, a feed reader, a music player, and so on.

Usually, when I need to switch tabs to do something, it’s a simple interaction. Such as skipping a song in Grooveshark, seeing new tweets, checking a calendar, or scanning documentation, to name a few things. I really don’t need the full site to do any of those things.

What if the owners of these sites could surface an interface for common tasks? What if the browser could presents this “mini-site” to us when we hover over a tab?

How would the browser know to do this? What if the head of the document contained something like:

<link href=’http://grooveshark.com/mini.html&#8217; rel=’tab_page’ type=’text/html’ width=’300′ height=’225′>

That mini.html page would look something like this (with the full page shown behind for reference):

Grooveshark_tab_page

Now, if a browser sees this code on a site, but my current active tab is some other page, all I do is mouseover the Grooveshark tab and a panel will open to that url.

Screenshot_grooveshark_tab_page

Wait, I know what you are going to ask… how does the real page know I skipped a song in the tab page? Why, they talk to each other, of course!

The browser would need to provide a bridge between the two pages so that data could be posted and sent… sounds like something we could do with postMessage right? When I click on “next song” a message is sent from the tab page to the real page. The real page would be on the lookout for incoming messages and route them to functions as needed.

The real page should be able to send messages to the tab page as well. If a song was playing, I’d want the scrubber in the tab page to keep up.

Here are a few more examples…

The tab page could be as complicated as the developer wishes to get, like in this example where the user could switch between day/week/month calendar views. If an event was about to trigger, maybe the whole calendar goes away altogether and just shows the event.

Tab_page_calendar

If the two pages don’t need to talk to each other, we could just show a responsive page to the size of the panel containing it, as seen here while I’m using Firebug to debug a page and have Javascript documentation readily available.

Tab_page_with_mdn

Do you see a use for this?

Allowing JS to access Firefox’s Inspector dev tool

I would like to be able to access the Inspector dev tool in Firefox (It may only be in Aurora right now) via javascript. It’s already a great way to debug your DOM, but in a sense, this could also become a new input type from the visitor of the page.

If you are not sure what the inspector is, here is a screen shot of it in use:

Screen_shot_2012-01-20_at_11

In that shot, the inspector is activated, and I’m acting as a dev debugging an element of the DOM. As I move the mouse over the page, elements become selected, the P tag in this case. There are tools that appear at the bottom of the page that allow me, as a developer, to interact with the element.

But this would be nice if I could access it via Javascript as a visitor input mechanism. Here is a scenario.

What if Wikipedia decided to allow people to create their own little mini wiki’s, containing only the information they wanted. Here is an example:

Inspect_1

In the above shot, we have a small panel at the bottom of the page that the user is populating with content only important to them. The can click the “Add Content” button and that might do something like this:

var element = select() # this is the API that launches the selector; if(element){   # we now have the element as if   # we did a querySelect. we can   # do something with the element   # and it's children. }else{   # nothing was selected }

The first line of that code would open the inspector, much like calling prompt() or confirm(), but instead of a dialog popup, the selector shows without the additional dev tools that would appear if I launced it myself:

Inspect_2

Now, when something is clicked on, I get back an element as if I used a querySelector. And I can then do something with that, such as add it to their clips.

Inspect_3

Maybe not a tool that could be used by everyone, but if the functionality is in the browser now (not relying on Firebug) why not make it accessible by the page?

Just an idea.

Allowing websites to use each other functionality via the browser

Overview:

This is an experiment to allow the browser to facilitate interactions between sites. When a user lands on a site that offers services, they can “add” those services to the browser. Pages the user later visits will then be notified of these services (by the browser). If a page wishes to use a service, the user confirms the connection and data is passed between the two sites.

This idea could be similar to “web intents”.

Proof-of-concept:

How it works:

  • Browser goes to a page.
  • Browser looks for “services” the site owner opens up to the browser (special code on the page).
  • Browser lets the user know services from this page are available.
  • User can toggle on/off the services, registering them with the browser.
  • User goes to a different page.
  • Browser looks for code on the page that specifies it wishes to use services.
  • Browser tells page about the services the user has installed in the browser.
  • Page javascript determines if it can use any of the services.
  • If so, the Page can add content based on the service.
  • If the special content is interacted with, the user is notified. ex: Page wishes to get X information from Y service OR Page wishes to send X information to Y service.
  • User confirms the interaction.
  • Browser passes information to service page behind the scenes.

Scenario:

  • User visits Twitter.com
  • Twitter tells the browser that a service is available to let other sites tweet as the logged in user.
  • User visits a different page.
  • Page sees they can tweet as user.
  • Page shows new content to share via the service (“Share to your followers: I’m reading….”).
  • User clicks the share button.
  • Browser confirms with user that the current page wishes to use the Twitter “tweet” service and shows the data that will be passed.
  • User agrees and browser opens a hidden page to the services site, calls the appropriate functions with the needed parameters.
  • A tweet is posted… no oauth, no apis.

Proof-of-concept Addon:

An addon for Firefox was created to extend the browser with this functionality. The add-on used in the above video can be found here: https://builder.addons.mozilla.org/addon/1015

HopComments: Add comments to HopToad, improve team communication

At work, we use HopToad to track errors from our app. I’ve found that it would be useful to communicate with the rest of the team over the more complicated errors, and for this information to not be lost, especially if the error happens again.

Since we do not own HopToad, we can not install a system like Disqus, which would help with this problem, into the site. Well, not without a Firefox Add-On.

HopComments, a Firefox 4 Add-On, adds your own version of Disqus to HopToad, and gives you something like:

Hopcomments

If you think this will help you communicate with your team, you can install HopComments by visiting it’s page on the Mozilla Add-On site. Once installed, there will be an icon in the Add-Ons bar that will let you configure the Add-On for your team.

Quick Idea: Grooveshark+

Grooveshark+ (plus) would be a simple browser plugin that would add new functionality to Grooveshark. This functionality could be simply to test new ideas, or add custom functionality per user.

The plugin would all you to add new functionality by pointing to JS files. These JS files would be loaded into the Grooveshark.com page.

Some ideas might be:

  • In the popup that displays over a song in the current song list, add a “search for…” option. This option could be broken down even further to: from same album, from same artist, like this artist, etc.
  • Add a shift-select to select multiple songs in a current songs queue so that you can add to or create a new play list.
  • etc.