The Onion releases fartscroll.js | Hacker News Reader

The Onion releases fartscroll.js

theonion.github.io

490 pointsjgv126 comments

The only way The Onion could improve on this is by writing a followup article saying that the response has been so positive that they've decided to sell fartscroll.js as a SAAS offering, and have taken investment from twenty prominent VC funds.

Yes but they are a satirical news outlet. They wouldn't want to confuse people by reporting news that is true.

The sounds are included directly in the JS, which is pretty neat: https://github.com/theonion/fartscroll.js/blob/master/fartsc...

And in ogg as well as mp3, to boot. Settling once and for all the great question which of these two codecs is more efficient at encoding flatulence.

It's because Firefox doesn't support mp3 via the HTML5 <audio> tag due to licensing IIRC. IE supports mp3 but not ogg. Chrome supports both.

Well - which is more efficient?

What's important is that neither stinks.

I would say that including two audio assets for the same sound seems like a code smell.

Perhaps an MP3 => OGG JavaScript converter is in order.

Transcoding is not a computationally cheap endeavor…

Well, since we are talking about a demo/proof of concept it could be interesting to try.

In case it slipped right past your nose, the previous comments were a play-on-words in reference to the library.

I think he meant to say an MP3 => OGG JavaScript converter is an odor.

It didn't, but I was wondering about the actual technical aspect of using a single asset type and a codec as a shiv.

At least in terms of size, the mp3 strings are 23%~ lighter than the ogg strings.

Curious what quality they encoded them with.

The ogg's bitrate is 35kb/s. The mp3's bitrate is 32kb/s. The sample rate for both is 11025 Hz.

It is a fart sound... how much quality do they need? lol

320 kpbs

Presumably they did that just to avoid external dependencies.

Talk about anal...

The novelty of the fart sounds is funny, but the JS implementation is fascinating.

How did they convert the mp3/ogg into strings?

Base64 encoded. See: https://en.wikipedia.org/wiki/Data_URI_scheme

Love Base64 encoding... for anyone looking to optimize their CSS, check out Shaun Inman's CSS Cacheer... it can automatically inline images using that encoding: http://www.shauninman.com/archive/2008/05/30/check_out_css_c...

Sorry for slightly OT, but I really do love Base64...

Or if you're on Rails, there's a little-known helper as part of the asset pipeline that will do this for you:

    #logo { background: url(<%= asset_data_uri 'logo.png' %>) }

The best part of this entire thing may be that in "Issues", there is a pull request for "My Finger".

I can't believe that's my only public activity ever on Github :/

Jokes aside, I make my browser make a click when an external object is loaded and when a page starts and finishes loading.

This audible enforcement is very helpful during development and to "hear" which sites are sneaking in external calls without bringing up firebug, etc.

would you share how you did this? is it a greasemonkey script or some sort of add-in?

Oh sorry I missed all the questions/replies for this.

I have my own firefox extension which I hacked up from an abandoned old firefox extension (called "soundextension" by Torisugari) not suitable for release, but there is a more modern extension here which does most of the same:

https://addons.mozilla.org/en-US/firefox/addon/noise/

The click sounds I use are from old Windows 2000, I doubt XP/7/8 has them, NIMclick.wav and NIMover.wav

https://www.google.com/search?q=nimclick.wav+nimover.wav

I vaguely remember I also had to edit the sound files to cut the volume way down, so my PC sound could be at normal levels while the clicks were much more subtle in the background.

Once your brain is trained as to which click means what, you get a good sense of what a page is doing, sneakily or otherwise. Won't work with websockets though.

Anyone knows of a Chrome extension for the same thing? I searched, but couldn't find anything.

I run Ghostery to stop sites from loading external media. If you're not opposed to plugins, even if you don't actually want to block the media, you can put it into disabled mode and it'll still tell you how many external calls were made (and, if you click on the icon, it brings up a list of the associated domains).

Granted, I'm running Chromium (presumably you're talking about Firefox), but the plugin does exist for both browsers.

I've always felt ghostery is the poor-man's noscript. If he wants to know about all external calls (which he presumably does) then noscript will actually do that while ghostery will let 'good' ones by untouched.

I use RequestPolicy[1] to prevent cross-site requests. If only NoScript is used and a user has allowed javascript on a domain, then NoScript allows cross-site requests and javascript from that domain to run on any domain.

https://www.requestpolicy.com/

I've read up on AdBlock, NoScript, Ghostery. I have no idea what differentiate's them. Some people run two or more. I have no idea if more means better.

I don't have the gumption to splunk the code.

I kinda wish either they'd declare each other competitors or embrace each other as compliments.

AdBlock blocks ads, Ghostery blocks "trackers", and NoScript blocks all JavaScript (and a few other dangerous potentials). NoScript doesn't necessarily block ads but it does block "trackers" by default.

I used Ghostery for a while but found it redundant and onerous since I also run NoScript. I agree with the parent that said Ghostery was a poor man's NoScript, though Ghostery only blocks known trackers (analytics tools) and will let random evil scripts through. NoScript allows you to whitelist script sources by domain, so you usually see "Enable example.com; Enable analytics.google.com; Enable quantcast.com;", etc., and you can just enable example.com if you don't like the trackers.

NoScript is really important and useful I think. Less convinced on Ghostery. AdBlock is useful but I don't know if I'd call it "important" really; it provides a great visual convenience to be able to read sites without being bombarded by ads, but one can live safely without it if necessary.

Good summary! And just shows how much current web "stinks". There's a bunch of tools that advanced users can use to make the web experience more or less safe and tolerable. But I suspect (and sorry, I don't have any source to back up my suspicions) that the majority of the users have no idea that they are being tracked and targeted by bunch of nasty scripts, and more importantly how to fight against this. Makes one think that tools like Ghostery and NoScript should be built into the browsers and enabled by default.

Doesn't Ghostery also block specific widgets and the like, which NoScript doesn't?

I think they do compliment each other. Both Ghostery and Adblock come with something NoScript doesn't have by design: A wide array of predefined filters (for trackers and ads, respectively).

However, NoScript is still very useful for (imho) two things: disabling extra functionality that you don't use in exchange for faster loading time, and for browsing on potentially dangerous websites.

AdBlock: Blocks requests with a url match in the filter list. NoScript: Blocks JavaScript. Ghostery: Blocks webbugs (JavaScript and hidden tracking elements, such as small/transparent images). AdBlock appears to be the simplest, and NoScript the most complex (e.g., ABE).

Such a good idea! Thanks for sharing

Can this be considered a code smell?

This jQuery extension is a breath of fresh air

Air? sure. Fresh? Probably not. ;)

ThatsTheJoke.gif

Annnd... we're reddit.

annnnd... sometime it's good to relax a little...

The Internet is finally useful. Thanks, The Onion!

On a side note, I can't be the only one trying to memorize the embedded Base64 representations of fart mp3s, can I? That would kill at parties.

Oh yes, the suspense and rollercoaster thrill of the "watching a person type a 2100 character string" setup would just make the "listen to a half-second fart noise" that much more amazing.

Well, I once attended a party where a guy typed a 128 bytes program in binary form (using ALT + number) in edit, run it in DOS and the thing did what was expected. That was amazing and totally worth the wait :)

The 90s, don't ask.

I need to go to more of your parties, then, where my skills can be appreciated :P

I wonder if putting something like this on a checkout page for Gas-X or anti-diarrheals might actually increase conversions.

All of the fart apps in the App Store are now ready for that transition from native to multi-platform web based applications.

Is there a way to make anyone accessing my home wifi network get this injected into their webpages (or random webpages)? I know there is that trick that lets you flip all the images or replace them with pics of something else (usually cats) but can you inject arbitrary js into pages also?

I think you'd need a proxy server that injects the JS into each page. Then your network's DNS should redirect to the proxy.

You can use the one I just set up on 92.163.21.52 port 9990

edit : port 9999 edit 2 : port 9990

Have a look at this http://www.ex-parrot.com/pete/upside-down-ternet.html

Now all we are missing is a Chrome Extension that automatically injects this in every page and stays hidden. Perfect office prank :)

https://chrome.google.com/webstore/detail/web-statistics/klf...

done.

Fantastic.

I suppose you could say this extension is silent... but deadly.

I originally read the link as "The Onion releases FASTscroll.js". I thought maybe there was a new high performance infinite scroll implementation. I was a little confused initially after clicking through.

me too. nothing happens when I put this code in my DocumentRoot and open example.html.

People laughed when it was said that perhaps The Onion could save Journalism.

Who's laughing now, eh!?

You could call this brilliant advertising: Those laughing now are most likely to be males between the ages of 12 and 34. :)

If I stop laughing at fart sounds when I'm 35, it'll be because I'm dead.

It's just a demographics joke. I hope you are still amused by flatulence past the ripe old age of 34... even if you do cause a world-rending paradox, you selfish bastard.

43 and still laughing. Teaching my 6-year-old to make the sounds. All is well.

Almost 50. I laugh through the tears at fart sounds.

Well I made a small intercepting proxy which inserts this JS if you want to try..

Use http proxy 92.163.21.52 port 9990 and start browsing :)

I'll let the VM opened for a few hours

edit: port 9999 edit2: port 9990

(changed the port because some botnet is using it to target a website and maybe that's because I used an online proxy checker to test it)

Now I am no longer the only one that makes fart noises as they scroll!

Pretty sure this is genius. Finally a .js site that makes sense.

See, now I just want to make a virus that injects this into random webpages.

dysentery.js?

that'd be quite a splash.

this is how you get your kid jnto programmig

my thoughts exactly!

Jokes aside, I see this extension being used in one of those "causes" pages (not that I am against them) that parody the wrongdoings of an individual or groups of individual.

e.g. a site that features an oil company, who lobbies governments to give them tax subsidies for sketchy oil drilling projects. As the user scrolls through each bad points about the oil company, a fart sound is played.

Just my thought.

After playing with this for about 3 seconds I realized this would be perfect for a ticking timebomb. The use case: You configure your freelance/consultation web app to start injecting this script 1 month after an invoice is due and not paid. I would bet the clients will be hurrying to pay your invoice after they get complaints of farting sounds coming from their website!

My computer just farted very loud in a hotel lobby.

Sure... the computer did it. Can't you just blame the dog like everyone else does? lol

awkward moment looking at this whilst interviewing an intern

Jeff Atwood calls it "Possibly the greatest code in the history of computing" [1]

[1] https://twitter.com/codinghorror/status/332495858383855617

This is the most important development of our time. You cannot deny this.

What kind of "Front end" developer are they looking for?

burpscroll.js would be an easy fork

if you want to use it to prank your co-workers: http://www.getpranx.com

This could actually prove to be useful (aside from the comedic value, and learning exercise). I'll test to see if playing audio offers will make a difference in conversions. One thing for sure, my girls will love playing around with it. :D

http://pullmyfinger.com is taken. ):

am I the only one thinking of combining this and the konami code JS for a great easter egg implementation?

I'm so tempted to implement this on one of my clients sites without telling them, just for a day!

> previous clients

FTFY

I believe that this is exactly what Al Gore had in mind when he invented the internet.

This is it, the internet has reached it's pinnacle, time to close up shop and move on.

My visit duration to the fartscroll page was increased by about 1000% because of this plugin.

I normally would have clicked away long ago, but now I find myself wanting to just leave it open in a side tab all day long.

Really? This got voted up to number 1 on the front page, and so many awesome real projects are buried without ever getting anywhere?

HN is really a joke now, I see. Haven't been around for a while. Sad.

Coincidence? [0]

0: https://news.ycombinator.com/item?id=5677046

It's a clever way to find a new hire, if you scroll to the bottom of their page.

The only sad thing around here is You.

we did a chrome extension for that https://github.com/Ninja-Pheasants/ftw enjoy and help us to fix it.

My dog's reaction to fartscroll.js: http://www.youtube.com/watch?v=OIYySjIyy_I

The Onion is the Mad Magazine of adults. I'd love to see them release a bunch of small joke JS libs like this.

This is inbound marketing at its best. What a great way to tell the tech community you're hiring.

This would be perfectly suited on any Magento website, especially magentocommerce.com

Demo?

You can open up the console on their site and change the scroll distance between noises.

It really seems like they should add some lorem ipsum text to give a better representation of farts in the wild.

Just scroll on the site itself

They should have included more text to allow more scrolling.

In Safari on OS X Lion/Mountain Lion, the rubber banding effect will continually trigger it if you keep scrolling up at the top of the page.

or shorten your window

Doesn't seem to work on firefox or chromium.

Seems to only run once per page load. You can reload to hear it again in case you missed it.

make your window smaller to allow more scrolling / farting.

Now we only need Google Nose to become real. It'll be a "killer".

Today, I learned that The Onion has a Github account. Kudos guys!

This is going to EXPLODE all over the Internet!

Web 3.0 is here!

Lets put this into a bookmarklet :P

Done: https://gist.github.com/fabriceleal/5547487.

Tested in hacker news (no jQuery) and wikipedia (has jQuery). For some reason, github doesn't like that I'm loading something from raw.github.com/...

Chrome console says:

Refused to load the script 'https://raw.github.com/theonion/fartscroll.js/master/fartscr... because it violates the following Content Security Policy directive: "script-src https://github.com https://a248.e.akamai.net https://jobs.github.com https://ssl.google-analytics.com https://secure.gaug.es https://gist.github.com.

Hah. Looks like you beat me to it. I made a slightly different version: http://dschep.github.io/GistMarklets/#5547713

It's because of this: https://github.com/blog/1477-content-security-policy

This might also be of interest: https://github.com/blog/1482-heads-up-nosniff-header-support...

Brilliant. Thanks HTML5

It just made my day.

this needs to be combined with raptorize.js...

Oh boy, here comes another bookmarklet ...

Web 2.1b!

The Onion.

That is all!

Add your own sounds.

http://www.motobit.com/util/base64-decoder-encoder.asp

Reply on news.ycombinator.com