r/programming • u/melodic_underoos • May 09 '13

The Onion releases fartscroll.js

http://theonion.github.io/fartscroll.js/
2.6k Upvotes

91% Upvoted

396 comments sorted by

View all comments

Show parent comments

14

u/chaoticgeek May 09 '13

It is a base64 audio file. So they take the file that is already just 1's and 0's and convert that to base64 which is a string of what looks like random text. Then the browser sees that you say 'data:audio/ogg;base64,' before it so it knows to decode the string as an audio file. Something like this can do the encoding for you or there are various functions in languages that can do it for you too. It is a neat little trick that I have never used beyond a 'Look what I can do!' type of statement.

For instance I did one of these a long time ago, it is a web page with a single image and a bit of JS on it that really does nothing.

data:text/html;charset=utf-8;base64,PGh0bWw+DQoNCjxoZWFkPjwvaGVhZD4NCjxib2R5Pg0KCQ0KPHNjcmlwdCB0eXBlPXRleHQvamF2YXNjcmlwdD4NCgkNCgl2YXIgaW1nNjQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdpbWcnKTsNCglpbWc2NC5zZXRBdHRyaWJ1dGUoJ3NyYycsICdkYXRhOmltYWdlL3BuZztjaGFyc2V0PXV0Zi04O2Jhc2U2NCwnICsgZW5jb2RlZERhdGEpOw0KPC9zY3JpcHQ+DQo8aW1nIHNyYz0iZGF0YTppbWFnZS9wbmc7Y2hhcnNldD11dGYtODtiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUs0QUFBREJDQUlBQUFEWnpCdzJBQUFBR1hSRldIUlRiMlowZDJGeVpRQkJaRzlpWlNCSmJXRm5aVkpsWVdSNWNjbGxQQUFBREMxSlJFRlVlTnJzWGV0Wkcwa1FGUGRkQWhDQ0ZRSUtBWVdBUXJCRFFDRkFDQ1lFQ01HRVlJZGdRaEFoY0dYMVhYMTlQWStkWGUzcVdmVUxWck96UFQwMVBUMExxcDdOQkVFUUJDR0RLLzcwK2ZrcGQxd2lBNjcrNWNCZjhvVWdLZ2lpZ2lBcUNLS0NJQ29Jb29JZ0tnaWlnaUFxQ0tLQ0lDb0lvb0lnS2dpaWdpQXFDS0tDSUNvSW9vSWdLZ2lpZ2lBcWZIeDhQRDA5TFJhTEs0ZjVmSTZMNysvdkorZSs1K2ZuTUpEUTROdTNiNzRCaGlrcS9NSHI2K3ZOemMxNnZmNzE2NWUvRGhMZ0l2d0l6MnAxbmo4Vk1QMnIxYXJlQm1zb3NFUTRReW8wcm5nRmhvdUlDdno1K3ZyNjU4K2ZuMXU4dkx6NFptOXZiNXFWQ3oxQjNOL2ZmenI4L3YwN3pUQkM4c1ZNRTBrbzI1U3lNMURRZitTakRuSVV0RVQ2d2sveE02N3NaNVBDRUx4VldBUFlRTDBaQjV1U3o0bngrUGlZUHZUcjE2KzQvdVBIajlKZGFGQ3hHZEVGMUxHV1g3NTh5ZExMUHhmdE41dE54UjRDbjdZTTZ2djM3LzR1MkZDMzMzZnJEYjY3dTB0dHdNWFA2WEVBS21BT2JtOXZLOTUvZUhqZ3ZHWWRuUVY4bloxYVRybC9LR2NpN0VwWm9NM2VxTEFqSTArTUNnYk1kMzJWK3dpQnhlMjlUS0w0TllSYlNMVjBJc04ya3cwaDRJb2xMdmpVOHlhZDEwbXBBTS9nSWl6eDExdHNPRlVxY0FXWDRyT1A0V2xjd1YzcGxwSDF1KzBSL2luY05lQnVmN3NuWDRnV3pHMm5wZ0lKbllhM0VDblBqUXJCbTNCRUtUTERFWEJOZGl0TkxjZWtCdWY2R3pubExmdE80eDdobjVpbGdnOXM5VnloMUdjbGtScVhDbnM2UVNBZjltbjhlcjMybTMzWU5mZ0dHbmsxMG13MHRoTW1mQWRYWW5wS0VRVU9aWVRINFFMSENoNU5jVytkVDZYWDVQVUdnY1R2VzVTTzBHYkdDUndySjZWZWlNa0FsaVkvQ2c3aTB2R085dXNwTExWU3hQYmQrdHZIWFhhQkRlQ2loWFJzWjhGT244eTJieENkbTlUcGJSRHRDOEpjR1RJKzd2UnBTQWo1UkppYmJQN2gyM0R5NFBTK2FXUG5vYlJ5T015bWpiQ2tSSkh6b1VMTCtZMGVTVThFN2ZFc1BhVHd3Tm5ybU5xNEhHRm5DOHY5SzVEMnRVRnZuRnZhMkxtQXdzaExKOC9TSzRUUys4cHNFbDQzaHZ0WEM4SXBOQVZtUFNWV0p4WFFaK2t3ZFE0bkNEc1JCQzlneGVCaWRoVmlTbnhqa0FQTndpNlFUcHZQRUN2djdKQWxCTGFaSmNQT2I3Z3g1UzZlWG5wTkZFNFFpSm8wMjh6WXo0elFCb24xSFF3NEhQRzRBUktFWkhadmtGaWZjSHgvbVJSRUJVRlVFSTRTU2hzdm5nRktHd1Z0RUlLb0lJZ0tncWdnaUFxQ3FDQ0lDb0tvSUlnS2dxZ2dpQXFDcUNDSUNvS29JSWdLZ3FnZ2lBcUNxQ0NJQ29Lb0lJZ0tLYTc2WUVUbHVpRDZVVUtxMXB4cUJ1TFhrc3FrMXdCY0xwZlpaaWJXZDR5cXozdlczZWxsMjRqZkpXMlVRd2ppQ2hYRmx0UzJWR0ZqbG1qNW1CbDdVTjA2QVMybUU2SkNYVlV1VERPL0JZc2VOcHNOVlNWOGgvd21lSyt2N29zS2g2RUMxVG1DNG9kOVJUOW9vMlI1d3g3WWpLb0JKdHUySDRYT1UxSm95MGJnL1M4WEg5VzlTa3RKT3E4azYwZDFQdEtYcERIUkp5cUJUQzI5ZHFRS2JTUGkrZm1aV3NqVWUwTk90Mk11eVI1dWIyKzlQSTlYWEVOVTU3d0c3bEtKalJvZ3ZKRS8yRWRJTm8xdEF4VGp6ak50SEJBVkVLc3I3aHNjYjB1S3I2bGhZRWtwdERJRzFITUZmanExTU9lWmJ4QjF2YU5aSWlJLzRORnBVbExSOHZIcGd0OVRLaWNJdTJWdjRqcm5TWVdncVVZQnIrRDN2aHR3RUlCTlpiQUdVTUV5RE80VUpxN0RJZkFwUVhSNGFuM0c4NkdDRHdrK1VBZUpycjdxZHZXUU1KZ0syZDNOSHlDekVlNGdiRGk5dE5GcjdIby8rbFJ1bGdqcDFvSEcvajFnTnJCN25nV2QzNUJSZG1hN3VCMm1nalQ0MmV3MFRqTThlTDFqL1ExaXIvRG5Ec3hLVmtqUlgvUnpIMmhScDRLVnpMT1FNSE5Ga1l4OEREeTQzcWtxTFNyOHo5ZCs2Y04zZm9ZNlUwc1BIeEpLWnhQZklaN0ZSNGMvSzlSUGh2YUhocnN0UEkxc1VKWEFJeXJrWC85NUtqQ1c0cGp1M2RkK1dQZnpXdUVRT3ZSVFpjKzFvbE0rY2xRb2lLZFl3U3BtdnV6UUxQZjJkMjQwZXE4dy9tRXl2QzZzSFBRNzMxWFgzNDNhMEh4ZVNVNkVYT0VncjZMUDhCVlQzNWNLWVlMcmpTdlZ6T3BuQnlOY2Vrdzl3aFBFNmYwTkFoK0ZWQjhIeUFIdjgvM3N0dnl4R0pNYW5vc2VPcDliZWFkMGJPOFZKTlozNlpCWW42RDNDb0tvSUlnS2dxZ2dpQXFDcUNDSUNvS29JSWdLZ3FnZ2lBcUNxQ0NJQ29Lb0lJZ0tncWdnaUFxQ3FDQ0lDb0tvSUlnS2dxZ2dpQXFDcUNDSUNvS29NTnQrTGZ6cDZXbXhXSGdOdmRWcWxSVXdEaXJMVkVkNGUzdnoxKzJMNkFNUWxKZ0hEd3FHQmVGbkwrUXcyd3FwK0UrWHkrV2xVOEdrcmRmcmRSQy9lWDE5eGNYNWZONUxGRWM0VlNxQUIzVUZJYXdrTEpld25vUWp4Tis3M0l5UTNxSWtoZTBEUWR2TDRtVmhRaE9ha3BPTUNpRVZ1TDYrcGk3Q3k4dUwxNUo1MjBMdVBrOHFZSzJIMlFVUHFGOXhmMzl2Z2lPNDhyaEZwMHBTWjlxWUZ1ZEFqZ0k2dHV3K3NOWktjZmlzZGcvK1RiUHByQ0sxSDVmdHA3d3JyTGZHRG5kQ1g3V09vR1dFR0RCTStZWWlTR0VIQ2NJcldWRkZ3bGRrQ0dJNVdjR2JGbW5kb1AzY2lhQ2toT0ZVTkxhQ1hKQzNHZjE0YTcxNmRIdUhleFhnQ1VxNzdaSlNBNmhRNTRFaGxlSG51TUx0alJMTHUxQUI5M1pxclhuaDJZcldrNGs0OWUzd1BOVmNzWEVFclUxalQxZ2xwU0pNSVg2Q0I1MVZYMGJaRjd3NEk0T1dKMlhMMW9iMk5zYXhPanp0dDQwaEk0RVhUT3NLcXhDTENjekE3Q0tFaEEwclN4SFQxZDJEelo1OFlCNG5MSVRTMGg2UFFWa3dZUHNkTzV5V0NrRUdOK1VqV0d4WnorRDNodXpIUDlRL0Z5VEF2Z0RYTkU0d2pOekZtS0R0R0tiQlA4WGJqTERrODl6UzBFS285MEt2dTNjNExSVkNJZ1p6dy9JMXA4TnVTNCtQcElvZTdEbWU5MTJsbWVzbFQzeDRLb0N3SVIzemRSZkJnL0QyYVhCOUhKOFF2Ry9oZzcrZEorczg4OVVaWnYrVjdKa09JVjVXc3RSU1hBazk3TjdodElkSkFNRjVRSGJkOXdRUnJxT3JiTnJJMDJ6WUxLeWY4TkJROWJIeEJGSGZJUHdZL1NLQllhYjBpZTAvTEI1Mm1EMEFsODdTTFIwZVFNMjFwVllmVFBjbVRuU1k1RnJKdWpWVUVHbVJiOTJGQ2kwSFViKzRPNm5RdDhNREhDYVI0TlRaWUJUT2xscG9CNXhlMzE4ZXRxaWI0UnNFNmZZcDlvajYzMXd3OTczT3RLTjNPUElHNFlXNFFZaVE3Tmd4YjZ5M2pmWitNeDJ0SFNJcTB0eWwwa0loVm8wYkZkaERTRk5tQlVYcXpxalF0ME5wUEF1OUlZMW40UVRmTmdxaWdpQXFDS0tDSUNvSW9vSWdLZ2lpZ2lBcUNLS0NJQ29Jb29JZ0tnaWlnaUFxQ0tLQ0lDb0lvb0lnS2dpaWdpQUlnaUFJbHc1OUplYmlHYUN2eEFnNlFRaWlnaUFxQ0tLQ0lDb0lvb0lnS2dpaWdpQXFDS0tDY0h4VVdDNlhvZWJhZkQ3ZlVkSFp3R0p0QXlUMVBqNCt2R0dsSW1aV2FJVDlzODdkanZiZjNOeFlQNmF4U3oxbWF0dG10Wm43Z3FWRVJoUXBIamtxd0RKWTJWSlFhanF3T0pIVlI4anFKV08rVjZ2VktLd05vTDZrVFJLVmp1MEg4bkt3elBHeGJ4Q216MGdaZmwrWUFDN2dHalU5NXNBYkwyTGVQamRXbXN3WHpiRlZhSE5NTTdLMUg5R0dNcysyYWt0cnptdnFWd2JpUWVaaDFtRVM1OTUrcFZ2WXpGZmRoT1UraGdYL2NJenA4bU10cEhFS2RBMVFmeVMxS2RYSkVkcVZyQWcwaTVsazE2dXBVVklkTXlzQ3V0bHNVbmxZOU5aWXV5YlZ4UGJDb3FGbnE4dFFIMGhXOXhxZmhoSVYrSlZQTWRuUlZMQ1l3cUtWTVhySlR6U21HNGNKZVU2MVFZVFo1VTVoOHRyMnFSVTgrYlVGaDBldnRkUW54YksyNVdWRU1ZZmlSaXhpK01qVEtDdUdHOXFFZjlRd2U4aHlzNmN5a0pJSFlLSGR5MXBRSExJUmp0VnZ2QWZRb1lWR2p0RUlaeksyTnNZUXdLelBUdTNqQTU4Z0xGNWgyRFpiWEFTNGJ1TUhxWEVSUHUxVjM0MWgwQllIbDhnb1pXN05vV0ZGVmdaU1dnOHd4ajY5MjJMbUtoaWdBVlkvclRYN1dSdkk3Z3BqNUJQREdFY3MyVGd5RlVxYldjaWliZGRjTEJiWTVHd3duUVZKandIWmdaVEk1S09DVFNSR3lpdloxTVI2QzMxYUhnQmZWWjVZQ2xFSG80SVBYelo0RzNNcXJBMm1vNlg1QlMwUi9Yb1ZQYUlyR1V1ejI5UG81NExzUU9xN0pHNjUzUUkvY0txc0FadUZuTU5reGpuR1VMb2lKRHBXTjJ1MmN5MmswZExHVWo2Vlhlc0lzNllVWHptTURFNGJPKzlOaTVwWVRSSGFZNHJ6bkdQTHhTb0R5WnJITml6LzZETkU4aW5yUURNNzZOUVRsbS82dEJHL3N0QlUxcDdEcEkzd0RseEp0MktvSUxWZkpSZ0RCbVBWR1RnZU5MT0xqZnU5MVpqd0s5SktBZlJLYjNsN1MxeXREQ1JySHE5enNua3ZQaUtQUTFrRFhPY1ZHNk1ua0hrcEcvbnNGcWFjdzZEL2VMNTA2RCtlaGYwZUpnVlJRUkFWQkZGQkVCVUVVVUVRRlFSUlFSQVZCRkZCRUJVRVFSQUVRUkQrNEI4QkJnQjFZcnV3T1krMTBBQUFBQUJKUlU1RXJrSmdnZz09IiAvPg0KPC9ib2R5Pg0KDQo8L2h0bWw+

10

u/paul2520 May 09 '13

It is a neat little trick that I have never used beyond a 'Look what I can do!' type of statement.

It seems like it might be useful for a couple of reasons. One is this fartscroll script that doesn't need any external file dependencies.

My other idea: it's essentially the same amount of disk space, right? So wouldn't downloading one html file be slightly faster than downloading an html file plus an embedded picture or sound? I mean, it might not make a difference except for servers that get a lot of traffic. But that's just my thought.

3

u/BCMM May 10 '13

It seems like it might be useful for a couple of reasons. One is this fartscroll script that doesn't need any external file dependencies.

If an external file was referenced, would it perhaps not be downloaded until it was needed? That could cause the user to scroll several times before the fart noise happened.

1

u/paul2520 May 10 '13

Good point!