Giter VIP home page Giter VIP logo

requirebin's Introduction

requirebin

create programs in the browser using modules from NPM

js-standard-style

Build Status

the app itself is 100% client side (requirebin.com is hosted on github pages) but it relies on these three APIs:

both can be hosted anywhere, the instances used by requirebin.com are hosted on a linode VPS and nodejitsu, respectively.

by default config.js is set to use http://localhost:8000 as the browserify-cdn endpoint but feel free to use http://wzrd.in which is the one I host on a VPS (requires internet connection to use but hey)

getting it to run locally

set up browserify-cdn

npm install -g browserify
npm install -g browserify-cdn
browserify-cdn 8000

set up gatekeeper (only if you want to publish gists in dev mode)

  1. make a new github oauth application and set the app URL and callback URL to http://localhost:5000
  2. follow these instructions to install and start gatekeeper on port 9999

edit config.js to point to your endpoints

npm install
npm start
open http://localhost:5000

deploying

if you are a collaborator and want to deploy code to requirebin.com, simply run npm run deploy

contributing

requirebin is an OPEN Open Source Project. This means that:

Individuals making significant and valuable contributions are given commit-access to the project to contribute as they see fit. This project is more like an open wiki than a standard guarded open source project.

See the CONTRIBUTING.md file for more details.

Collaborators

requirebin is only possible due to the excellent work of the following collaborators:

maxogdenGitHub/maxogden
h0keGitHub/h0ke
kumavisGitHub/kumavis
maurizzzioGitHub/maurizzzio

license

BSD

requirebin's People

Contributors

ahdinosaur avatar charlesholbrow avatar cmtegner avatar czzarr avatar feross avatar hughsk avatar jameskyburz avatar jfhbrook avatar linusu avatar mauriciopoppe avatar max-mapper avatar maxfell avatar philipp15b avatar piatra avatar rgbkrk avatar shama avatar techdubb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

requirebin's Issues

Fails to start in firefox 22

Similar situation to #1 but different error and on FF 22 on Ubuntu:

Timestamp: 07/06/2013 01:50:07 PM
Error: Error: Bad xmlhttprequest.XMLHttpRequest
Source File: http://requirebin.com/bundle.js
Line: 11357

Relevant code chunk:

require.define("/node_modules/browser-module-sandbox/node_modules/browser-request/dist/ender/request.js",function(require,module,exports,__dirname,__filename,process,global){// Browser Request
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

var xmlhttprequest = require('./xmlhttprequest')
if(!xmlhttprequest || typeof xmlhttprequest !== 'object')
  throw new Error('Could not find ./xmlhttprequest')

var XHR = xmlhttprequest.XMLHttpRequest
if(!XHR)
  throw new Error('Bad xmlhttprequest.XMLHttpRequest')
if(! ('_object' in (new XHR)))
  throw new Error('This is not portable XMLHttpRequest')

Pause/Reset Button

I often find myself live coding data visualizations on the fly with requirebin. If something is not quite right, this sometimes leads requirebin to get bogged down until I can no longer rebuild or modify the source. Reloading the page reloads the script again and it can be difficult to recover (I usually have to point it at a different gist). Would it be possible to have some sort of "pause" or "reset", that could stop the current build and wait for another rebuild before running again?

Feature proposal: "preferTransform" option in package.json

I am thinking about what it would take to make glslify work reliably in requirebin. Ideally I would like to be able to write shaders and inline them without having to manually add glslify as a transform in the package.json. To do this though, it seems that when a user types require("glslify") into requirebin, requirebin needs to be smart enough to figure out that it should install and apply glslify as a transform.

Related to this how to figure out which dependencies are required by glslify, which I don't really have any great ideas for yet.

Stuck with old version of a package

My browsers seem to be stuck with an old version of a required package.

Using private browsing mode works around it.

Where is it cached?

Is this really what is going on?

support anonymous gist saving

right now you have to sign in with github to publish, but i wanna copy http://geojson.io/ and have it default to anonymous unless you explicity sign in, then when you save it will save under your github account

this will lower the barrier to entry to saving, as not everyone has a github account

optional url format requirebin.com/#<gistidhere>

this one also shouldn't be too hard -- when the page loads it currently parses out the query string (for ?gist=) but it should also parse out the id from window.location.hash and use that if it exists

Modules In Use section needs improvement

Show only those that are really in use/valid.

For example:

require ('foo') must valid if foo is present in npm registry on not, if not present must it must highlight with an error saying that there is no such module called foo

Would be happy to work on a PR if this sound good. ๐Ÿ˜ธ

split index.js up into modules

for example, the gist stuff could live in gist.js and get required. there are lotsa ways to slice up index.js right now, and even publish standalone reusable modules to NPM

show helpful errors when preview fails

browserify-cdn outputs stuff like this:

browserify-cdn ERR!  Error: module `diffle` is not on npm.
browserify-cdn ERR!      at Request._callback (/home/max/src/browserify-cdn/bundler/registry.js:22:15)
browserify-cdn ERR!      at Request.self.callback (/home/max/src/browserify-cdn/node_modules/request/index.js:148:22)
browserify-cdn ERR!      at Request.EventEmitter.emit (events.js:98:17)
browserify-cdn ERR!      at Request.<anonymous> (/home/max/src/browserify-cdn/node_modules/request/index.js:876:14)
browserify-cdn ERR!      at Request.EventEmitter.emit (events.js:117:20)
browserify-cdn ERR!      at IncomingMessage.<anonymous> (/home/max/src/browserify-cdn/node_modules/request/index.js:827:12)
browserify-cdn ERR!      at IncomingMessage.EventEmitter.emit (events.js:117:20)
browserify-cdn ERR!      at _stream_readable.js:910:16
browserify-cdn ERR!      at process._tickCallback (node.js:415:13)
browserify-cdn ERR!  

but I don't show it in the UI during a failure, it would be nice if these kind of errors were surfaced. they come back in the /multi xhr POST as the response body

re-bundle module if there is no minified.js on gist

There is an optimization where;

  • If you load a gist into requirebin via the ?gist= URL on page load
  • requirebin md5 hashes the index.js of the gist when you load it
  • when you hit Run, if you have not edited index.js (e.g. the hash of the code in the editor matches the hash of the code at load time) then the optimization is to just load minified.js from the gist directly, otherwise if the hashes don't match then requirebin does a full rebuild from browserify-cdn

the optimization works great except for the case where there is no minified.js in the gist. any gist saved by requirebin will have a minified.js, but ones that are made manually dont, e.g. https://gist.github.com/NHQ/9711493

To reproduce the bug: open http://requirebin.com/?gist=NHQ/9711493 and hit 'run', then look at the console

large files cannot be run

Large files fail to load due to this change in the gist API

What's seen in the console is
Uncaught SyntaxError: Unexpected end of input

This is because the gist payload contains files with `content = ""

The gist is saved correctly but then doesn't load...

Bad XMLHttpRequest in Firefox (Nightly)

Tweeted a link to http://requirebin.com/?gist=5963363 and got a report that it didn't work. I checked it out in Firefox and saw this:

Error: Bad xmlhttprequest.XMLHttpRequest @ http://requirebin.com/bundle.js:21056

Which was thrown by a part of module browser-request:

var xmlhttprequest = require('./xmlhttprequest')
if(!xmlhttprequest || typeof xmlhttprequest !== 'object')
  throw new Error('Could not find ./xmlhttprequest')

var XHR = xmlhttprequest.XMLHttpRequest
if(!XHR)
  throw new Error('Bad xmlhttprequest.XMLHttpRequest')
if(! ('_object' in (new XHR)))
  throw new Error('This is not portable XMLHttpRequest')

Global is undefined

if you use global in your top level code, it is undefined. In browserify bundles, this would normally be equivalent to self, that is to say window in a normal context or the worker global (?) in the webworker context.

Expose server-side processes in the UI

Roughly 50% of the time, RequireBin just hangs and the 'loading' animation at the top right carries on forever. It'd be good to get some feedback on what was going on during this time (asynchronous feedback messaging), because otherwise the only diagnosis the user can make is that RequireBin just doesn't work a lot of the time.

Detect Fork

It would be cool if requirebins detected/show and did gist forking.

CoffeeScript support

Requirebin is very useful. It would be a killer feature to have coffeescript support.

make package.json editable, especially for version numbers

when you first save to a gist requirebin creates a package.json for you w/ the versions pegged at the newest version of each module. we should surface this in the UI so that people can edit it in order to upgrade to newer versions of modules

Fails to start on Chromium 28

Appears like a bundling issue or something affecting Chromium specifically.

image

Uncaught TypeError: undefined is not a function bundle.js:27989
fXMLHttpRequest bundle.js:27989
cXMLHttpRequest bundle.js:27989
require.define.window bundle.js:27989
require.define.require.modules.(anonymous function) bundle.js:217
require bundle.js:13
require.define.require_ bundle.js:189
(anonymous function) bundle.js:27989
require.define.require.modules.(anonymous function) bundle.js:217
require bundle.js:13
(anonymous function) bundle.js:27989
(anonymous function)

Chromium 28.0.1500.52 (Developer Build 28.0.1500.52-0ubuntu1.12.04.2) Ubuntu 12.04

Working with Angular?

Require in angular:

var ng = require('angular');

Make a module:

ng.module('app', []);

Uncaught TypeError: undefined is not a function

Has anyone encountered this? angularjs is another npm module that is apparently a browserify shim, but it just causes requirebin to literally explode.

Full error below:

Bundling error:

---FLAGRANT SYSTEM ERROR---

--- error #0: ---

(logs uuid: 3d1cf350-828b-11e4-af85-ab6c8613f7fd )

Error: "browserify exited with code 1"

code: 1
stderr: Error: Cannot find module 'angular' from '/tmp/angularjs1141113-620-1i03dpo/node_modules/angularjs'
at /home/admin/browserify-cdn/node_modules/browserify/node_modules/resolve/lib/async.js:50:17
at process (/home/admin/browserify-cdn/node_modules/browserify/node_modules/resolve/lib/async.js:119:43)
at /home/admin/browserify-cdn/node_modules/browserify/node_modules/resolve/lib/async.js:128:21
at load (/home/admin/browserify-cdn/node_modules/browserify/node_modules/resolve/lib/async.js:60:43)
at /home/admin/browserify-cdn/node_modules/browserify/node_modules/resolve/lib/async.js:66:22
at /home/admin/browserify-cdn/node_modules/browserify/node_modules/resolve/lib/async.js:21:47
at Object.oncomplete (fs.js:107:15)

dirPath: /tmp/angularjs1141113-620-1i03dpo


This is probably an issue with the package, and not browserify-cdn itself.
If you feel differently, feel free to file a bug report at:

https://github.com/jesusabdullah/browserify-cdn/issues

Include the ENTIRETY of the contents of this message, and he can
try to help you out.

Have a nice day!

Commented code is executed, causes error

Using this code, including comments on bottom, in Chrome on Mac OSX, causes this error without any stacktrace

Uncaught SyntaxError: Unexpected end of input

The code (must include bottom two lines which are commented out)

var SVG = require('svg.js');

var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);


//var draw = SVG('drawing').size(300, 300);
//var rect = draw.rect(100, 100).attr({ fill: '#f06' });

If you remove the two commented lines, no error is produced. No error is produced if you use multiline comments as well:

/*
var draw = SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({ fill: '#f06' });
*/

From a quick glance over the code, I'm thinking this might be an issue I should report to javascript-editor repo at https://www.npmjs.org/package/javascript-editor - do you agree?

window.XMLHttpRequest is undefined

In the console in requirebin.com window.XMLHttpRequest === undefined

This means going to gist.github.com fails. I think its because of require("xmlhttprequest")

Error reason: 'document not found'

screen shot 2014-03-22 at 19 03 13

But xkcd-imgs exists in npm registry.

Code I tried:

$ = require('xckd-imgs')

$(function(data){
   var img = document.createElement('img');
   img.url = data.url;
   document.body.appendChild(img);
});

Gists do not run in Chrome

Trying to run one of the examples, Chrome (35.0.1912.2 dev) refuses to run it and the console throws a

Refused to execute script from 'https://gist.githubusercontent.com/maxogden/9576573/raw/minified.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. 

This is probably due to Chrome enforcing X-Content-Type-Options: nosniff. On Firefox (29.0), the bin runs with no issue.

Interestingly, if one changes the URL of the gist from http://requirebin.com/?gist=maxogden/9576573 to http://requirebin.com/?gist=9576573, Chrome runs it. I guess, Github does not set gists' MIME type to text/plain when using the old URL scheme.

Do you see any easy fix to this issue?

New bins on Requirebin.com don't work

Posting new snippets to requirebin.com doesnt work for me. Only existing ones run. I tried an example with console.log('test') and the resulting code looks the following

setTimeout(function(){undefinedconsole.log('test');}, 0)

I didnt yet figure out where that undefined comes from. I am using Chrome 35.0.1916.114.

store package.json at pegged versions

so that requirebins dont break when people come back to them in the future and the modules get upgraded to the latest versions automatically

it should just do the equivalent of npm install --save and put the package.json in the gist, then read the package.json when the requirebin loads and use the versions there to install stuff locally

JSON.parse error "unterminated comment" in bundle.js(line 935)

I get that only for my module if i just do require('gamejs')

the JSON i get from the POST /multi is valid JSON and contains the full module code: http://pastebin.com/XssgJahj

what I find suspicious (but could be totally unrelated), is that right after the JSON.parse ajax error, there's a 404 request to "./public/gamejs-wrapped.js", which is something I only mention in this comment: https://github.com/oberhamsi/gamejs/blob/master/lib/gamejs/http.js#L20

update existing gist

this shouldn't be hard to implement

if you're viewing an existing gist and you try to save, it should try to update that gist, if that fails then it should create a new gist (or fork if thats possible)

use githubusercontent urls for loading /embed

instead of using the anonymous gist API, which is subject to rate limiting, we can construct these urls:

https://gist.githubusercontent.com/maxogden/9557776/raw/index.js

the problem is that we need the gist ID and the username. right now existing requirebin urls only have the gist ID, so to implement this we would need to change the requirebin URLs to be:

http://requirebin.com/?gist=maxogden/9556868

or something similar

would address error in comments here max-mapper/browserify-website#4

Uncaught SecurityError: An attempt was made to break through the security policy of the user agent.

Page: http://dry.ly/full-streams-ahead
Chrome Version 30.0.1599.66 m

requirebin portions do not work.

Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. embed-bundle.js:1164
(anonymous function) embed-bundle.js:1164
i embed-bundle.js:1
(anonymous function) embed-bundle.js:1
debug embed-bundle.js:960
i embed-bundle.js:1
(anonymous function) embed-bundle.js:1
jsonp embed-bundle.js:608
i embed-bundle.js:1
querystring embed-bundle.js:1
(anonymous function) embed-bundle.js:1

Option for not minifying the source when saving.

Hi!

First, requirebin is awesome! Thanks for making it.

I've been playing with it, trying to make a little example, and tried to use the multiline package for creating some CSS and markdown in the source easily.

http://requirebin.com/?gist=33a10c722ec3dbc0374a

When trying the requirebin without saving everything works great since it it does not minify, but when saved, uglify removes the comments breaking the example.

I've modified the gist to contain the unminified code, so that I can load it from url... bit of a hack.

It would be great if we could have an option when saving so that we don't minify the source.

split pane editing

im hacking on this feature this week, here's what I have so far:

screen shot 2014-05-04 at 5 01 07 pm

leave feature requests/feedback related to this issue here

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.