Show HN: My GitHub Readme Is Interactive | Hacker News Reader

Show HN: My GitHub Readme Is Interactive

github.com

237 pointseat_veggies99 comments

Also check out my GitHub webring! Building the markdown widget for it [0] inspired this project.

I love the style of the site. It doesn't look prehistoric but also doesn't have that modern corporate feel to it. Just balanced! Lovely illustrations, did you make them yourself?

Yes, I made them in MS Paint!

Hahaha that made my day

You might want to reword the "delete your account" section -- it sounds like, to remove yourself, you must delete your github account!

Just added this to my profile https://github.com/andy1729

As I was clicking on next to go to next profile, I came across a profile that didn't have the widget, so I wasn't able to move forward! Perhaps you can add logic to move only to those profiles which have widget showing!

Thank you very much for building this, gives a community like feel!

I absolutely love the drawings. They're just so cute..

With so many people entering characters right now, it’s only a matter of time til we get some Shakespeare

I suppose this is an ode to the famous "enough monkeys will write Hamlet?"[1] :p

[1] https://en.wikipedia.org/wiki/Infinite_monkey_theorem

There's a section in the linked Wikipedia article that describes Jorge Luis Borges tracing the origin of the concept back to Aristotle's Metaphysics.

That's the best thing I've read today. I've often heard the monkeys-on-typewriters imagery, but never related it to an idea of a "total library" which contains everything that can ever be written, probably even itself. I suppose the digits of Pi may be considered such a "library".

"Strictly speaking, one immortal monkey would suffice."

The "total" library (which is mathematically paradoxical) can't contain itself because it has higher cardinality than any of its contents.

When I wrote that a total library would contain "probably even itself", I had a nagging feeling that may lead to a contradiction.

Here is the essay "Total Library" by Borges:

https://www.gwern.net/docs/borges/1939-borges-thetotallibrar... (PDF)

It mentions "abnormal transfinite numbers (whose parts are no smaller than the whole)". This seems to be a reference to Russell's Paradox:

https://en.wikipedia.org/wiki/Russell's_paradox

> Let us call a set "normal" if it is not a member of itself, and "abnormal" if it is a member of itself.

> Now we consider the set of all normal sets, R, and try to determine whether R is normal or abnormal. If R were normal, it would be contained in the set of all normal sets (itself), and therefore be abnormal; on the other hand if R were abnormal, it would not be contained in the set of all normal sets (itself), and therefore be normal.

> This leads to the conclusion that R is neither normal nor abnormal: Russell's paradox.

That proves your point, that it's a mathematical impossibility.

Borges calls it "the vast, contradictory Library", so clearly he was aware of this fact.

Borges's library can't contain itself because it is of a strictly finite size: the books are only 410 pages, or whatever, and so while astronomically large, the total number of sequences is finite. His point was that for any sub-book-sized claim, there would be another book contradicting it, if only through prefixing "it is not true that" or something.

His Book of Sand would, however, appear to be vulnerable to diagonalization.

Well "thou" might appear sometimes

Love it!

Unfortunately the distribution of entry of characters by humans is not likely to be uniformly random, hence this will not occur even if all of humanity were to stumble across this readme.

But letters in Shakespeare aren’t uniformly distributed either, so maybe it’s even more re likely.

Semi related: check out libraryofbabel [1] or the Vscauce video [2]

[1] https://libraryofbabel.info

[2] https://youtu.be/GDrBIKOR01c?t=1032

It just broke.

It doesn't appear to work for me. I tap a letter but it refreshes the page, goes to top, with no letter appended. Cool idea though, would love to see it working.

Most likely your browser is caching the image. Open dev tools and disable cache in the network tab. (If you are viewing this on a desktop browser.)

Same. Bit different with ffox, chrome and chromium, sometimes you don't get sent to the top.

Dead user maybevain recommends bellow to:

open dev tools –> network –> disable cache

Without caching it is indeed interactive.

By the way, mods, why is that user dead? Registered 1 hour ago, posted just two helpful comments.

https://news.ycombinator.com/user?id=maybevain

I assume I was hit by an automod of some kind, as the first thing I did after creating this account was to post a comment with a link (elsewhere in this thread and relevant). Maybe a heuristic to catch bots?

Did not notice being dead myself before reading your comment, so I assume someone vouched for me.

please email the mods at hn@ycombinator.com so they can fix this. (this also goes for yreg: randomly commenting is not an effective way to get the mods to look at something, but emailing will get a response in my experience)

Doesn’t work for me on my phone either.

Sorry about that. I misconfigured a caching header some time last night before I went to bed. Should hopefully be working normally again

still not working for me. It refreshes the page with some random word appended when i click on a letteer.

How can this work on Github when Github's image proxy has a 4-hour cache?

It's frozen in time and can never be updated as fast as this (https://kbd.jse.li/screen.gif), afaict, without making commits that repeatedly update the readme image url to bust cache.

So how is it working for people ITT?

great on my phone

Apparently it's possible to bust the cache.

https://github.com/veggiedefender/typing/blob/master/handler...

OP: You might want to add some basic rate limiting in the range of 3+ clicks per second. Currently you can flood the http endpoints to spam a single action (like backspace). Given GitHub's TTFB of 700ms for this page, I don't see how a regular person could type anything quicker than that, unless they had multiple tabs open.

It's alright! If I see worse backspace abuse I'll disable it, but scripting is part of the fun :)

I am curious how many requests are you receiving at the moment. I can't even see the text because it seems to be moving too fast.

About 20 button presses per second, which honestly is not that bad.

It's a script pressing the buttons cause the text has a pattern. Humans cannot use this demo at this moment.

Right now it seems to be exploited to spam support for... a particular candidate.

apologies, my seriously unoptimized rendering routine is choking under the load. I'm restarting every few seconds to clear the screen...

edit: renders PNG instead of GIF (no more fancy blinking animation) to lighten the load a little. This thing is running on a $5 digitalocean droplet and performing admirably!

Oh wow, this is quite clever. This is hacking in its pure, positive form. I love it.

I wonder what the README will say once the firehose of Hacker News slows down.

https://i.redd.it/agcbmqgjn14z.png

ahh yes, theplace! IMHO the last bastion of reddit's old school leanings before they adopted the path to please investers over users.

Reminds me of Twitch Plays Pokémon[0].

[0] https://en.wikipedia.org/wiki/Twitch_Plays_Pok%C3%A9mon

"HN writes a Readme"

I love this. I think there's something beautiful about making software just because it's a fun to do; not trying to change the world, but just thinking it would be funny to have a publicly interactive readme.

You have my respect!

Doesn't work on mobile if you've got the GitHub app installed.

Interesting that it's implemented via a table with all the image keys and individual links.

Seems like a better implementation for this would be an image map, although I'm not sure how well those are supported in modern browsers, or if you could implement them in a github readme.

That would definitely be better, but GitHub has an extremely aggressive allowlist of tags and attributes which preclude styles, image maps, and regular buttons

You can do some very basic styling.

While you added rate limiting, it looks like you might have only done it for `RemoteAddr`. If I set random `X-Forwarded-For` and `X-Real-IP` I seems to let me post as quickly as I'd like.

That allowed me to send 200 backspaces, then fill the page with "i like turtles" or just the letter "o".

That said, there's a backup rate limiter working for you. Github.

Github has blocked my IP because of my shenanigans, which I suppose is fair. I'd have created an issue there if not for that.

Way back when forums were a thing and all the kids had obnoxious photoshop "signatures" with their favorite anime characters and video games, I made a dynamic forum signature image that let people type messages.

I used to use variations of that "interactive" signature theme. Random redirects that showed different anime images. IP addresses. (Which was later a service that someone built and provided to everyone.)

I remember using this on Warp Pipe, the GameCube online tunnelling software forums.

https://web.archive.org/web/20041231055055/http://www.warppi...

https://web.archive.org/web/20060204011647/http://forums.war...

Remember these things?

I then made a Nintendo DS match making service for friend codes and advertised it on Mario Kart DS by setting it as my username (I chose the domain "DSmeet.com" to be juuust short enough to fit), then raced backwards the entire game so people would see me. (And it worked!)

https://web.archive.org/web/20060208013613/http://dsmeet.com...

https://web.archive.org/web/20060216171807/http://dsmeet.com...

I was so happy with myself because I wrote the forum software by hand. (Of course I had to do everything hard-mode back then...)

Here are some examples of the "signatures" I'm talking about, if you've never seen one before:

https://web.archive.org/web/20060418010950/http://dsmeet.com...

https://web.archive.org/web/20060429153550/http://dsmeet.com...

Those were some fun times...

Really neat interactive project. You sent me on a trip down memory lane. :)

Ahhh, I used to love those signatures! I remember when everyone used to post their computer specs on their signatures. And I loved your DSmeet project! Did you happen to get into any of the communities that popped up for Animal Crossing New Horizons? They brought me back to the olden days of finding a community on a forum and making friends that way.

I have been thinking of coding myself something fun for readme. I like how few people have built poor man's chess: https://github.com/timburgan/timburgan

Any ideas HN?

Try 2048, or render GIFs in realtime to do Tetris!

I think I can see what you're trying to do but every user seems to share the same view? Or is that a bug? If it's a bug I'm sure you could fix it with something like sessions to have individual state per 'user.'

Overall: very clever

Someone is spamming it from a lot of different IPs.

What kind of IPs? Residential, Data center?

Damn. Well, it's still really cool. Made me think of software a little differently

Frankly I have no idea why are people acting so impressed. ~15 years ago were extremely common images which showed user's IP address, it was usually done in PHP using imagemagicks. This is basically same, just with added cache of text which is then showed. I even remember POC html/server only chat which sent clients new gif frames as they posted new messages (found it [0], it's over 20 years old). That was much more impressive.

[0]: http://zesty.ca/chat/chat.cgi

Thanks, those types of sites were a huge inspiration for this. Actually the zesty.ca site you linked was created before I was born :O

This is fun typing with hundreds (or more?) of people!

I tried to type a sentence by scripting the api calls in the console. But even after requesting all the characters too many people interfere to create a good sentence.

on a related topic of interactive READMEs, I decided to recreate the Endorsements feature of LinkedIn on the new Github Profile feature: https://github.com/sw-yx#skills--endorsements

uses github actions and octokit to map issue reactions to Readme output - many people dont know you can set github actions on a cronjob

That's clever! Nice job!

Aaaand we got the n word, didn't take long.

it's what finally got me to implement IP-based rate limiting, but it appears to be a coordinated effort. At least we made it to two full hours before running into this :((

If you play with this and script it; be careful that you don't follow redirects or reload github.com too much; you'll trigger github's rate limiter.

Oops. Sorry Github.

Coulden't get my full message out, but got a few "japh"s there :)

You can continuously refresh the screen image here to watch what's being typed: https://kbd.jse.li/screen.gif

not updating for me

You've reinvented "open proxy" spam. Well done!

Question. From my experience, GitHub uses the `github-amo` bot to fetch the data when the page is rendered. How did you prevent it from cacheing on GitHub's servers?

I was wondering the same. Seems like returning a no-cache value for the Cache-Control header prevents the Camo service from caching the image [0].

My browser did however cache the latest image (which is why I thought the system was not working for a second), and I'm not sure how to get around that.

[0] https://docs.github.com/en/github/authenticating-to-github/a...

EDIT: I see. The no-cache causes the Camo service to refetch the image every time it is requested, but it still applies a 4 hour cache time to the response to the browser so it is anyway cached on the client side.

You can open the image directly here: https://kbd.jse.li/screen.gif

If you're having problems, kbd.jse.li is currently blocked by OpenDNS seemingly.

Commit two hours ago: "Implement rate limit" :-)

Any stats for which keys are pressed the most frequently?

I'm not currently saving logged output, but that's a good idea!

How does this work?

Each button is a separate image that links to my website, which records the letter, and then redirects you back to GitHub. The top part of the screen is dynamically generated, and you can view it directly here: https://kbd.jse.li/screen.gif

Doesn't GitHub cache fetched images? Any tricks required to get GitHub to refresh the image?

For most use cases, like for CI badges, setting cache-control and etag headers will suffice, but GitHub still caches it (just for a shorter time? I don't know the specifics). Luckily, you can request that they purge their cache for a specific file [0] so I've got a goroutine that calls it once per second [1]

[0] https://docs.github.com/en/github/authenticating-to-github/a...

[1] https://github.com/veggiedefender/typing/blob/0ed7c9c17970d6...

The api it uses is 404'ing for me now... Sad

Clever, you could use branches to add sessions.

Base the session on the IP for the request to https://kbd.jse.li/type/:letter, would be good enough for a hack

Go to https://kbd.jse.li/screen.gif and refresh for a bit to see what people are typing!

Could slowly stream the gif to show other people typing?

I tried that at first, but GitHub's CDN will take the first few seconds of the streamed GIF and loop it :(

Hugged to death – but neat idea nontheless!

This is extremely clever. Many kudos.

Its not working on my chrome mobile version. It just takes me back to the top of the screen, when I click on the letters.

it s not working on my laptop

To the person typing "trump2020" it specifically says type something nice, not something horrible.

is this like twitch plays pokemon?

SVG?

Its not an svg. However that might be an idea for OP - rendering an svg is probably easier on the server, and you can have a blinking cursor with SMIL animations (full interactivity of course does not work when included as an <img> tag)

SVG also has hyperlinking although I've never actually tried it in the browser but if it worked then you could do a very strange but functional imagemap vector implementation.

Hyperlinks don't work in <img> tags though, they only work if you are allowed to embed the svg elements directly in the page.

Basically if you include an svg as an image (via <img>, or via css, etc) it can only be an animated image but you can't do anything interactive.

Ah interesting. It's probably a pretty clean implementation then. No immediate workarounds come to mind.

There's ways you can obscure things, such as using an object tag, leaving it up to the browser to decide via a mime type header which you specify then as svg, buuut that won't work here.

Things are fairly locked down these days. Maybe there's something I'm not thinking of using a similar pattern (confuse the browser, tell it the answer and then have it generate the restricted type) ... Maybe something dealing with lang or codepages... There's still plenty of shenanigans there.

Back in the day I used to upload full-blown servers I wrote in postscript as my "profile image" and then they were blindly executed when trying to "convert" the file - imagemagick locked that down about 10 years ago though. Even back then usually some max execution timer would kill it after a minute or so. But it was fun.

Looks like 90s style

Crappydesign on reddit will have a laugh

Reply on news.ycombinator.com