Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
140byt.es -- Click ↑↑ fork ↑↑ to play!

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.

function(){
/* Rules:
(1) anonymous function or IIFE // make sure
(2) may execute immediately // to annotate
(3) <=140 bytes // your code
(4) no globals // so everyone
(5) permissive license // can learn
(6) have a good time! // from it!
*/}
function(){/******************************************************************************************************************************/}
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.
{
// [REQUIRED] A name for your library.
// This must match /^[a-z_]\w*$/i
"name": "140bytes",
// [OPTIONAL] A description of your library, phrased as a verb predicate.
// The gist description is used by default.
"description": "Explain the 140byt.es rules.",
// [OPTIONAL] Up to 5 keywords used for indexing.
"keywords": [
"140bytes",
"master",
"rules"
]
}
@mathiasbynens

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

@140bytes
Owner

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

@atesgoral

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) ?

@jed

@atesgoral

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

@eliperelman

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
};
@jed

@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.

@eliperelman

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

@jed

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

@joside

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

@jed

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

@joside

@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"

@jed

@joside cool, fixed!

@Kambfhase

That pattern is called IIFE nowadays.

@p01

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.

@jo
jo commented

This package.json is not JSON btw.

@atesgoral

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

@nesk

↑ I approve this message ! ↑

@jed

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

@jo
jo commented

@jed, thats great!

@mathiasbynens

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>
@atesgoral

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?

@jed
jed commented
@mathiasbynens

@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.

@140bytes
Owner

cool, fixed.

@atesgoral

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...

@jo
jo commented

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.

@jo
jo commented

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

@jo
jo commented

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

@Kambfhase

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.

@atesgoral

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

@jed
jed commented

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.

@jo
jo commented

@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.

@Kambfhase

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.

@jed
jed commented

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.

@jo
jo commented

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?

@jo
jo commented

@jed, those dependencies are great!

@atesgoral

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

@jo, Envjs might help.

@jo
jo commented

@atesgoral: thank you, I will have a look

@Kambfhase

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/ .

@atesgoral

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.

@mathiasbynens

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

@atk

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

@Kambfhase

https://gist.github.com/1002999 or wait for the 140byt.es website

@atk
atk commented

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.

@jed
jed commented

@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.

@xuyuanok

eeeeeeeeeeeee

@tsaniel

I wonder if there is a 140bytes for css.

@p01

@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

@tsaniel

@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.

@tsaniel

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.

@jed
jed commented

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.

@williammalo

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

@atk

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.

@tsaniel

Nobody's around...

@atesgoral

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

@Inkbug

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

@williammalo

@atesgoral
NOOOOOOOOOO!!!!!!!

@tsaniel

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

@atk

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

@dvhk

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


<!DOCTYPE html>


L-system test

@Revlin

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

@Revlin

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!

@Revlin

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

@atk

@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.

@Revlin

@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?

@Revlin

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

@atk
atk commented

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).

@jed
jed commented

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.

@dluciv

Hi!

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

@xem
xem commented

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?

@reza-farhadian

Also you can count the bytes with http://mothereff.in/byte-counter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.