npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

browser-sync-tal

v0.0.6

Published

Plugin for BrowserSync to enable TAL app remote-control

Downloads

8

Readme

BrowserSync TAL Plugin

Plugin that provides client-side scripts for BrowserSync, supporting the broadcast of keypresses to any number of TAL applications.

BrowserSync (with this TAL plugin) allows us to launch a TAL application on an unlimited number of real devices, and then control all those devices in synchronisation with a single remote control. Each device will receive your keypress event - allowing mass testing across devices.

What is TAL?

TAL

TAL was developed internally within the BBC as a way of vastly simplifying TV application development whilst increasing the reach of BBC TV applications such as iPlayer. Today all of the BBC's HTML-based TV applications are built using TAL.

How do I get it setup?

  1. Install BrowserSync:

npm install -g browser-sync

  1. Install the BrowserSync TAL plugin:

npm install -g browser-sync-tal

  1. Create a config file (you could check this into your application codebase):
# browser-sync-iplayer.conf
module.exports = {
    "proxy": "www.bbc.co.uk/iplayer",
    "plugins": [
        "browser-sync-tal"
    ]
};
  1. Run BrowserSync:

browser-sync start --config browser-sync-iplayer.conf

  1. Get each device to load the URL output in your console labeled "External".

You could do this via your TVX page.

  1. Grab a remote for any one of the devices under-test and press some keys. Your keypresses will be broadcast to all the other devices.

Use cases of BrowserSync

  • Live feedback of CSS or JS changes
  • Regression testing prior to a release
  • Explorative testing, discovering differences between different devices.

How does it work?

  • BrowserSync establishes a 2-way communication channel between each device and your computer.

  • This plugin listens for keypress events and derives a TAL keyname using the keyboard mapping config for your device (e.g. VK_UP or VK_DOWN).

  • With this device-agnostic keyname we broadcast it over the network to all other devices using SocketIO.

  • Upon receiving a network-keypress, we emit a TAL keypress event. From this point onwards your application will behave just as if it had received a normal IR remote control command.