public
Last active

140byt.es -- Click ↑↑ fork ↑↑ to play!

  • Download Gist
LICENSE.txt
1 2 3 4 5 6 7 8 9 10 11 12 13
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
 
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
 
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
 
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 
0. You just DO WHAT THE FUCK YOU WANT TO.
README.md
Markdown

140byt.es

A tweet-sized, fork-to-play, community-curated collection of JavaScript.

How to play

  1. Click the Fork button above to fork this gist.
  2. Modify all the files to according to the rules below.
  3. Save your entry and tweet it up!

Keep in mind that thanks to the awesome sensibilities of the GitHub team, gists are just repos. So feel free to clone yours and work locally for a more comfortable environment, and to allow commit messages.

Rules

All entries must exist in an index.js file, whose contents are

  1. an assignable, valid Javascript expression that
  2. contains no more than 140 bytes, and
  3. does not leak to the global scope.

All entries must also be licensed under the WTFPL or equally permissive license.

For more information

The 140byt.es site hasn't launched yet, but for now follow @140bytes on Twitter.

To learn about byte-saving hacks for your own code, or to contribute what you've learned, head to the wiki.

140byt.es is brought to you by Jed Schmidt. It was inspired by work from Thomas Fuchs and Dustin Diaz.

annotated.js
JavaScript
1 2 3 4 5 6 7 8 9 10
function(){
// make sure
// to annotate
// your code
// so everyone
// can learn
// from it!
// see jed's entries
// for examples.
}
package.json
JSON
1 2 3 4 5 6 7 8 9 10 11 12 13
{
"name": "theNameOfYourLibWhichMustBeAValidCamelCasedJavaScriptIdentifier",
 
"description": "This should be a short description of your entry.",
 
"keywords": [
"five",
"descriptive",
"keywords",
"or",
"fewer"
]
}
test.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!DOCTYPE html>
<body>
<div>Expected value: <b>undefined</b></div>
<div>Actual value: <b id="ret"></b></div>
</body>
<script>
// write a small example that shows off the API for your example
// and tests it in one fell swoop.
 
var myFunction = function(){ /* the code here should be identical to the entry. */ }
var ret = myFunction()
 
document.getElementById( "ret" ).innerHTML = ret
</script>

Nit: Twitter allows more than 140 bytes. (Multi-byte characters still only count as one character.)

Yeah, I wish they hadn't done that. CJK tweeters get an unfair advantage on Twitter.

Save your entry and tweet it up!

When tweeting up, is any particular manner recommended?

a) http://140byt.es/#gists/xxx #140bytes
b) the code #140bytes
c) just the code
d) ?

@atesgoral

Until the site is properly up, a link to the gist with "+@140bytes" is good.

If the code is meant to be assigned to a variable, does the code need to be an self-invoked anonymous function that returns a function, or can the snippet just be a function?

For example:

var method = /* my code snippet injected here */;

var method = (function() {
    return function() {
        // functionality here
    };
})();

// OR:

var method = function() {
    // functionality here
};

@eliperelman the latter. you only need to do the former if you need to keep some kind of persisted state across calls. see the parseURL function for an example.

Thanks, where do you want completed URLs to be posted?

no need, all you need to do is fork and you'll show up there →

"(2) may be self-executing" ??? What's that?

@joside this is a valid entry: function(){}()

@jed sure this is valid, but this function is definitly not self executing.
Maybe it would be better to say this is a "function invoked directly after declaration"

@joside cool, fixed!

That pattern is called IIFE nowadays.

The annoted. js and index.js in this gist can be misleading regarding function definition. As seen in https://gist.github.com/962814 , the 140byt.es gist can use a named function because such gist can perfectly be used in ways that do not leak in the global scope.

This package.json is not JSON btw.

I think the inclusion of a test.js to provide usage examples should be encouraged by the instructions.

↑ I approve this message ! ↑

cool, thanks for all the feedback. i've made some changes, let me know if there's anything i missed.

@jed, thats great!

How about adding a a doctype to test.html, if only to trigger standards mode?

<!DOCTYPE html> 
<title>Foo</title>
<div>Expected value: <b>undefined</b></div>
<div>Actual value: <b id="ret"></b></div>
<script>
  // write a small example that shows off the API for your example
  // and tests it in one fell swoop.

  var myFunction = function(){ /* the code here should be identical to the entry. */ }

  document.getElementById( "ret" ).innerHTML = myFunction()
</script>

Shouldn't there be a test.js that can be copy/pasted into any console (browser, Rhino, Node, etc) instead of constraining it to the browser with test.html?

i thought about that, but since more than half of the entries rely on
the dom, and the browser is the only place where arbitrary space
limitations make sense, i figured it was a better testbed.

On Wed, Jun 1, 2011 at 3:30 PM, atesgoral
reply@reply.github.com
wrote:

Shouldn't there be a test.js that can be copy/pasted into any console (browser, Rhino, Node, etc) instead of constraining it to the browser with test.html?

Reply to this email directly or view it on GitHub:
https://gist.github.com/962807

@jed I see you’ve edited test.html, adding the doctype – thanks! However, you’re still closing the body before inserting the <script>, which is syntactically invalid. For inspiration, feel free to have a look at my proposed test.html in my comment above :) As you can see, you could just get rid of the opening and closing body tags, as long as there’s a body-only element (in this case, <div>) preceding the <script>. Alternatively, you could just move the closing </body> tag down.

With a pure-JavaScript test bed, you could potentially allow running tests inline (within the same page that's displaying the gist) when 140byt.es is launched. Arbitrary HTML markup is not the most portable way to capture tests, but it probably wouldn't be a big deal to parse out the tests from HTML...

I propose to add another constraint:

  • the function should not access the global scope

This way the function would have to receive globals like document or window as parameter. With this seperation dogma 140bytes would be better testable, smaller and more reusable.

I would also prefer a pure test.js. (And maybe it could be better called example.js.)

@jed: thanks for starting this über awesome project!

the function should not access the global scope

thats I huge impact! It means I cannot even access Math or Object, without them getting passed to me first! I don't see how this will make entries more testable or smaller( well, maybe). They could be more reusable if you work with frames, and can pass in different docments.

I think this constraint is too much to ask for.

Can core JS objects (e.g. Math) be considered global? Also, does "access" imply "pollute" or does it really mean "read/write"?

given that Object === window.Object and so on for these things, i would definitely consider them global.

i'm mostly concerned with unintended side effects due to global pollution, such as leaving temporary variables everywhere.

@Kambfhase: I admit I haven't thought of Math and Object and even forgot Date. Shame on me!
I totally agree that the existence those global objects should be implied. Could you agree with

  • the function should not presuppose global objects except the standard global objects

as listed in eg. https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects#Standard_global_objects_(alphabetically)

I am especially focused on document and window which are not available outside the browser.

I am especially focused on document and window which are not available outside the browser.

true. But if a snippet uses document it most likely has no use outside the browser. And instead of using window, ppl can use self which is the very same, but shorter plus it doesnt fail in ES5 compared to this.

there is still much to be done with the site, but for now i am still slammed with client work.

i had this idea, though, which may be relevant: provide a dependencies array in the package.json, which has the IDs of other entries. then, when we build an app containing several entries, your entry would be curried so that the first n arguments are the dependencies themselves.

maybe you're right. My underlying intention had arising while trying to validate the gists server side. Maybe thats the only need for that constraint and has no use outside of that specific case.

Any ideas on how to perform server side validation for 140s using document?

@jed, those dependencies are great!

Any ideas on how to perform server side validation for 140s using document?

@jo, Envjs might help.

@atesgoral: thank you, I will have a look

Any ideas on how to perform server side validation for 140s using document?

Take the "selector function", it uses document. It mainly exists as a shim for older browsers. Is there even a use-case for it on the server? I highly doubt that.

I have mixed feelings about the dependencies array. I thought that each 140bytes entry should be monolithic. If you want to use a snippet you can then simply copy and paste it. Everything bigger can go to http://microjs.com/ .

I have mixed feelings about the dependencies array.

I second that sentiment.

Once you start creating dependencies among libraries/modules, it can quickly turn into a maintenance nightmare. Some of these libraries are still in-flux: their interfaces, or even their behaviour may change. Also, it creates a barrier for newcomers: It creates a constant need to know what's available to use as dependencies. I also have other negative gut-feelings that I cannot articulate with words right now...

I also suggest introducing some kind of "140byt.es stamp" to certify gists as meeting the requirements and quality standards.

There’s some trailing whitespace in the test.html file. Wasted bytes!

Could we somehow clear up the unfilled gists on the right side?

I'd like to see something like "golf request" here where developers can enter small snippets with little more than 140bytes so the community can help them to get rid of the last remaining spare bytes.

@atk

the best bet is to go ahead and submit a work in progress. entries don't need to be within 140 bytes right off the bat.

I wonder if there is a 140bytes for css.

@tsaniel: I'd love to see that. I made a couple of tweet-sized user CSS including a TurnOffTheLight for YouTube and Vimeo, and a "noise" filter for Facebook

@p01: I'd love to see that too. The 140bytes for javascript lets me learn lots of javascript tricks, I hope the css one will do so.

I think we should remind people to name their gist's description.
As it's hard to know whether one really did something or just fork.

i dunno, i think the tags on the 140byt.es site are probably good enough, since descriptions are truncated at a few words here anyway.

uhhhhh... How do I get my gists on the 140byt.es website?
Is it automatic? My snippets aren't there :(

Since we don't want spam entries, jed usually updates them manually. Since he's currently rather busy as js1k judge, please be patient until he finds the time.

Nobody's around...

@tsaniel Every possible function that can fit into 140 characters has been written. Nothing more to see here...

@tsaniel @atesgoral What about my function (three comments up) - can anyone shrink it?

@atesgoral
NOOOOOOOOOO!!!!!!!

I can't even reply to any gist, anyone knows what's going on?

The new layout breaks some of our concepts... :-(

Sorry, I don't use twitter, but here's a Lindenmayer system and some basic visualisation:


<!DOCTYPE html>


L-system test

// A Lindenmayer system, see http://en.wikipedia.org/wiki/L-system
// Input:rules as a lookup table, start String, and iteration count. Outputs result String
// Example 1: Algae from the Wikipedia page above: f({"A":"AB","B":"A"},"A",3)
// Example 4, note that non-changing symbols also need rules: f({"F":"F+F-F-F+F","-":"-","+":"+"},"F",3)
function f(r,s,i){for(j=i;j--;){var a=s.split('');for(k=a.length;k--;){a[k]=r[a[k]];}s=a.join('');}return s;}

// A shorter-than-256-bytes simple turtle graphics SVG visualisation for the Lindenmayer system output String.
// Usage with Example 4 above: g( f({"F":"F+F-F-F+F","-":"-","+":"+"},"F",3) );
function g(s){var i=[0,3,0,-3],j=[-3,0,3,0],d=9,a=s.split(''),v='';for(k=a.length;k--;){if(a[k]=='F'){v+=' l'+i[d%4]+' '+j[d%4];}if(a[k]=='+'){d++}if(a[k]=='-'){d--}}document.body.innerHTML+="";}

</script>



Please enable JavaScript!


Why did you call the gist LICENSE.txt? Is there a story behind that?

Alright! I just re-enabled the javascript: uri thingy in firefox and tried https://gist.github.com/4275420

javascript:(function(){var a="-webkit-",b='transform:rotate(1turn);',c='transition:4s;';document.head.innerHTML+='<style>body{'+a+b+a+c+b+c})();

Cool!
hehehe!

Yeah, I'm new to this, but I have a bunch of ideas... I think a link to 140byt.es should be included in the tweets, because it gives some coherence to the tweeting, which are now totally random disconnected fragments of javascript that no one other than 140bytes participants will know what they're about or more importantly, where to go to find out what they're about. Yet, there are lots of js/es programmers out there that would be interested in this if they saw an entry tweet and were able to follow a link to the home page.

That's my argument, now the technical challenge: No matter what the size of a URI/URL twitter now minifies (or expands) it to 22 chars, allowing only 118 remaining for the actual code. I kind of think this is acceptable, because this 1) only make the challenge harder, which is the point, right, hardness? and 2) the chars reserved for the link can be considered part of the task, as it helps to promote the task(s) as a whole

@Revlin: The point of this challenge is fun and learning. The difficulty of it is balanced between "too easy to be fun" and "too hard to do anything of interest". So making it harder will not improve the challenge, quite the opposite. In addition, I don't think that we need the promotion. We are here for our own entertainment, not for marketing purposes.

@atk Thanks, dude. I'll start over with all that in mind.

I guess I can be self-defeating and waste 22 chars on including the link myself, without that necessarily being a rule :)

So, according to the instructions all I have to do is fork this repo and my fork will show up on the main page (whether or not I've made any changes)? I'm a bit confused about that... how important is the package.json in this process?

So I see a button on the main page, "Log in with GitHub," but clicking it has no effect. Is this the way to go to "Save your entry" as suggested in the instructions?

My first crack: https://gist.github.com/Revlin/6766557

Since the last github change, Forks don't show up on the main gist (unless you select "Forks").

The automatical updates of the homepage (140byt.es) don't work. Jed and I never found out why. Also, we usually only include stuff that has an actual use or at least a cool effect. The package.json should be valid JSON, otherwise the importer will stop (again).

hey all. i don't think the rules need to be changed, but i understand that our UI isn't optimal in that case (the platform has changed underneath our feet a few times since launch two years ago).

as for stuff showing up on the site, it doesn't happen until one of the admins stars the gist. this is to prevent spam and make sure that entries are not dupes and are of sufficient quality/creativity.

Hi!

Is tweet https://twitter.com/dluciv/status/404937670419161088 suitable to submit the gist, or I should reformat it in some other way?

Hi all,

Last month, subzey and I invented a system allowing to execute 190 JS characters in one single tweet.

Gist: https://gist.github.com/xem/7086007

I described it in detail here: http://xem.github.io/?golfing

Though, It uses 140 characters, not 140 bytes...

So do you think this system is still suitable for 140byt.es entries?

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.