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

topcube

v0.2.0

Published

Simple bindings to create a webkit window that node can control

Downloads

17

Readme

TopCube

Gives node developers a way to have a desktop GUI to their node servers using HTML5 + CSS3 as the GUI platform.

Assumes:

  • Client/server architecture with communication over HTTP.
    If you're interested in merged event loops, common javascript contexts, or other non-HTTP communication and resource sharing between the node process and the GUI take a look at node-webkit.
  • Single, HTML5 + CSS3 driven window.
    The client window does not spawn popups, support tabs, create additional windows or add any native UI components other than what a typical browser pane would provide.
  • Child process.
    The client window runs as a child process of the calling node process.

Implementation Details

Linux

Requires gtk2.0 and webkitgtk. Install the following packages on Debian/Ubuntu or the equivalents for your system to build topcube:

sudo apt-get install libgtk2.0-dev libwebkitgtk-dev

Windows

The windows client currently downloads a custom compiled binary client that uses the Chromium Embedded Framework. If you're interested in building the client yourself or making modifications see mapbox/cefclient.

Mac OS X

TODO. Work on a native webkit client for Mac OS X that can be built within topcube is certainly welcome.

API

Pass a single options object to topcube with the following properties:

  • url of your running node application to point topcube at.
  • name of the window displayed in the titlebar. Also sets any window manager classes associated with the topcube window. On linux a .desktop file using the same name can be used set the icon for your application.
  • width in pixels of the window. Optional.
  • height in pixels of the windows. Optional.
  • minwidth in pixels. Restricts resizing the window width smaller than this value. Optional.
  • minheight in pixels. Restricts resizing the window height smaller than this value. Optional.
  • ico full path to a Windows .ico file to use for your application. Optional, no-op on non-windows platforms.

Example usage of topcube to wrap a default "Hello world" server.

var Http = require('http');
var TopCube = require('topcube');

Http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(7569);

TopCube({
  url: 'http://localhost:7569',
  name: 'My webapp',
  width: 800,
  height: 600
});