├── .eslintrc.js
├── .jsbin.settings.json
├── LICENSE
├── _headers
├── ancient-resonance-EF1
    └── index.html
├── ancient-wind-709
    └── index.html
├── autumn-cell-089
    └── index.html
├── black-thunder-4A1
    └── index.html
├── boggle
    └── index.html
├── cold-limit-46E
    └── index.html
├── crimson-bar-07F
    └── index.html
├── crimson-waterfall-270
    └── index.html
├── damp-field-B47
    └── index.html
├── damp-wildflower-E61
    └── index.html
├── dark-fog-FE2
    └── index.html
├── dawn-term-CAA
    └── index.html
├── delicate-bush-CB2
    └── index.html
├── empty-lab-5DE
    └── index.html
├── floral-lab-B81
    └── index.html
├── fragrant-dawn-799
    └── index.html
├── frosty-math-CA4
    └── index.html
├── gentle-bonus-B7B
    └── index.html
├── gentle-lab-BC9
    ├── NqC2UNA3.png
    └── index.html
├── gentle-sound-4E1
    └── index.html
├── green-waterfall-D5C
    └── index.html
├── holy-mouse-ACA
    └── index.html
├── holy-silence-A3A
    └── index.html
├── icy-feather-C74
    └── index.html
├── icy-feather-C76
    └── index.html
├── icy-paper-08E
    └── index.html
├── icy-rice-F00
    └── index.html
├── images
    └── remy-2014-twitter.png
├── late-paper-8F4
    └── index.html
├── lingering-snow-053
    └── index.html
├── little-lake-A80
    └── index.html
├── lucky-cell-240
    └── index.html
├── marbles2
    ├── empty.gif
    ├── fonts
    │   ├── palm-os-bold.eot
    │   ├── palm-os-bold.otf
    │   ├── palm-os-bold.svg
    │   ├── palm-os-bold.ttf
    │   ├── palm-os-bold.woff
    │   ├── palm-os-large.eot
    │   ├── palm-os-large.otf
    │   ├── palm-os-large.svg
    │   ├── palm-os-large.ttf
    │   ├── palm-os-large.woff
    │   ├── palm-os.eot
    │   ├── palm-os.otf
    │   ├── palm-os.svg
    │   ├── palm-os.ttf
    │   └── palm-os.woff
    ├── four.gif
    ├── index.html
    ├── mask.gif
    ├── one.gif
    ├── sw.js
    ├── three.gif
    └── two.gif
├── morning-boat-FED
    └── index.html
├── muddy-unit-6B8
    └── index.html
├── noisy-heart-446
    └── index.html
├── noisy-recipe-8DD
    └── index.html
├── old-voice-BBF
    └── index.html
├── orange-breeze-C85
    └── index.html
├── patient-credit-871
    └── index.html
├── polished-waterfall-620
    └── index.html
├── quiet-dawn-956
    └── index.html
├── remy:restless-tooth-1B2
    └── index.html
├── remy:super-morning-1DA
    └── index.html
├── restless-tooth-1B2
    └── index.html
├── round-leaf-025
    └── index.html
├── shrill-pine-3C5
    └── index.html
├── silent-frost-D3C
    └── index.html
├── speccy-bars
    ├── index.html
    └── readme.md
├── steep-night-D89
    └── index.html
├── steep-rain-442
    └── index.html
├── sw.js
├── throbbing-sun-D17
    └── index.html
├── tight-morning-279
    └── index.html
├── tight-rice-9E8
    └── index.js
├── tinygif
    └── index.html
├── tinytime
    └── index.html
├── twilight-feather-7EF
    └── index.html
├── wandering-bonus-846
    └── index.html
├── wild-queen-E4E
    └── index.html
├── winter-butterfly-67F
    └── index.html
└── wispy-meadow-453
    └── index.html


/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['eslint:recommended'],
3 |   rules: {
4 |     'no-console': 0,
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/.jsbin.settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // you can also use comments,
 3 |   "app.baseUrl": "https://remy.jsbin.me",
 4 |   "app.theme": "light",
 5 |   "editor.fontSize": 16,
 6 |   "editor.fontFamily": "Ubuntu mono, OperatorMono-Book, Operator Mono",
 7 |   "editor.lineWrapping": true,
 8 |   "editor.keyMap": "sublime",
 9 |   "app.splitColumns": true,
10 |   "editor.extraKeys": {
11 |     "Tab": "snippets", // appears broken :-\
12 |     "Esc": "dismiss",
13 |     "Alt-Up": "swapLineUp",
14 |     "Alt-Down": "swapLineDown"
15 |   }
16 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Remy Sharp
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/_headers:
--------------------------------------------------------------------------------
1 | /*
2 |   Access-Control-Allow-Origin: *
3 | 


--------------------------------------------------------------------------------
/ancient-resonance-EF1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | img {
 9 |   display: none;
10 | }
11 | 
12 | canvas {
13 |   display: block;
14 | /*   border: 1px solid red; */
15 |   width: 512px;
16 |   image-rendering: crisp-edges;
17 | }
18 | 
19 | * {
20 |   font-family: sans-serif;
21 | }
22 | </style>
23 | </head>
24 | <body>
25 | <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlAAAAHICAMAAAC24STEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM2MCwgMjAyMC8wMi8xMy0wMTowNzoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0ZGQzY2RjlFNzcwMTFFQTkxOTZBOUVFODM2MzAwRUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0ZGQzY2RkFFNzcwMTFFQTkxOTZBOUVFODM2MzAwRUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRkZDNjZGN0U3NzAxMUVBOTE5NkE5RUU4MzYzMDBFRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDRkZDNjZGOEU3NzAxMUVBOTE5NkE5RUU4MzYzMDBFRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pimh5RAAAAAYUExURf//AADMzP8A/8zMzMwAzP////8AAAAAAILhw3sAABIfSURBVHja7J2LdqM6DEUTOin//8c3tw0pMTb4IdmyvbW6hk7bAFF2jo8UY24rQQjGjRQQAEUAFAFQBAFQBEARAEUQAEUAFAFQBEARBEARAEUAFEEAFGEIqAfxDJKSm5QjULzJjkkgKdFJASiAAiiAqp2LB0ABlFQuNv8EUACFQnUI1O0nAAqgpIDyphGgAAqg8FAMeSgUphyg1mVdnl+TA/VK7LcvPD/9eyEGBir3o5cfmqYH6tdLxAPl+/wLD/Ui6hkrCoVCiXmoZSofmgLU9icAVQLU4JVymkIFRAugToFaACrkoUJA4aFOFWphyEOhtICa2ZSnvxAAdfK+S//57vcfb/LVedzVdud/AcoMUMcnWReonQ3pD6hETzSFhzo+SRQKhVJXqGBrJfHnBxAycwxQOSFVOYkMeQry9L1XqAx5AqhUoIR6O6aB2jxUl0B15qHEgJLwUCgUQ56Ch9Lzd/ShpjTlWudW6VLpToEqKYUjtvnPwyJQvbRmWnqokmZdFFC5zyPfQzHkoVB4qNGAMvMiANQoCqUgT994qIk9lBZQeCgUCoUCKDyUHaCKC5MmQLkXLwKUGQ9V3Dpp4qHcixcLPZQZIzuAh+pTodyLF1Eoux7KJFDHD1+XLj3U1YfISUB59mRCoQoLkzpAHd6PnQLl1ZVcoIx6qMLWSRUP5QFqEexDVXsRLoFK8VC3FYWSHPJ69FATDHl9eKhAnYcpNwCU08IxXeV5Z6iu4Ut8rAKVPjvBkxTPg0x4KKeFY7oPFQ+UbQ+VPn/KIlChA3y2cFAoFKo0V4tKjrPn6UfYhdBFiXN5KE/ODQIlVuVlX0l0qlAR8vTdg0Klzk7wKtThQUb6UB8tHLE+lCxQ7jylK6Cse6jU+VMWgTpRqEVDoRSGPBSqP6B67UP10XSbw0Otnx4qrcpLLVgu/04SqOSLCK0Bdfouaw2Uznyo1JZKJlB155S3fhH6AGpChep+yBsAKLUcR+8HoAZTqLQqL7Vgufw7gBrNQ6X1oVJbKplA4aFQKBSKIQ8PBVCtqzyAwkOJ9qHk7QMeCoVCoRjy8FAAZbLKAyg8lGgfCg+Fh0KhUCg8FEBR5bUHKnmx9cLF3IPns138SB8KDyUS28WP9KHwUEJE/V78iIfCQ4lpFH0oqjyAog9ltQ/1e/EjfSgUStKW46HwUABFldcAqJRVVRLC9oWe9KHUHycP1NkamygUCjWUQjWyFduiGTMAFfVunQwo8SpvW9ZnDoUSlKdhPJRwH+oN1BQeShqoETyUtEJNNOTNpVD0ofrrXwkAVbp6yfXqJmlVXu6Nv/PPD6AqAZW2xHU7oMrOs2sPpWd8USgUyohCVT9nK14ND6U15JWtXnK9uklalZd74+/88wOoSkClLXHdDqiy88RDiXsoFAqFwkPhoQAKoPoGqvRuVNXvW1c67IsChYeSBwqFQqEAahCgom82jYcCqCigvC9Xa4UquxsVHqqhh7oEqomHKgQKhWLIAyhMOR6qR6C29ZeEwMidYtEXUHioU6A+bsZd4/o6jYsXUzwUCqU55L3WX0KhAErIQy2nJxF7R208FEDFAXVR9h8UKm+KBR5qnD7Ux4h3+PtooPImc+GhRlSoRW7Im0OhACofKPpQALX/v/+y2ouLc0MX655czGsuyXgoHQ9VDyhjScZDoVAMeR0CFXqo+/urxwEUQOnJEx5qZg+lBRQeCoVCoQAquQ/VzcnbA6p09ZPaq6XIf/B+pVARi8OZAyoyyaG/6wsomXWn5KYGNQVK9zO53BcDhUKhzChUf56noim/6j9ZByr/7+RXX9HaSq3qIvfB+6lCxa2ua1eh8l6MvoCSWXdKbmpQU6C0PVTei4FCoVBmFAoPNWIfqqGHAihMeedACdsGTQ+lD5T23PDcv0OhUCiGPIACKIACKDwUHgoPhUKhUCMB1W0yAAqFOjv5R2bgofBQeCgUCg8FUKlABRa9GBao9/MFKCWgvGkbGKjtHzxUp0AZ81BdAsWQx5BHH4o+VDOg3CW8A8/hIRTRuQueV9yNl/Qv8TkJaaCybhVfejeqAqDWU6AaeajgeakClXARoihQ50npCih3CW8zQ17ovFAo40A5MuD62lpAHf30Ut9DRT7Z2kBJGcs2QDlHrgbU4RnHA1X/Ep/aCpVxq/jSu1GVjHmnQFXyUB6glvpAxV6EWNtD9QXUhxZYGvIWFKp/oOz0oeKBMt9nGslDSa+eUhjlq7YAVHbpKwOU8PpOzYBKW05St0kmDpTWB5waQKFQKJQCUN0HQFnzUEKFULFCla7aAlDZpa+sh+odKDyUEaBQKBRKASg8FB4KoADKIlCd3AMm+nngoVAoFIohD6AACqAACg+Fh8JDoVAMeQAFUNaB+lq/nl8AJZIMPNRPDteqQFn2UKXJwEP9n8RnMOTJJIMh7/dt6T1p/3oVo3uor0bHnQAo75kDFB4qQuarAmW7D1U2/OOh3k6UIe8sGQx59XIIUDaAqn1XdGtb1dVXRk8KQAEUQAFUX0ARD5Ii66EmficmLDRCUiKveiF3AAVQAGUXKAIP1baxCVAkBaAAqhpQ/yYPb+5ISlxSAAqgAAqgAAqgJgaKwJRT5QEUQAHULEDdfyKw3f3+vZPXlNzU7RZ357vfgxyPf3U8d39/j3/tz33yx8ffgrmbNSmnt4g9JsMP1Lo71mt737ar5xxe/6RuL3O3/+n94nirJ3fvHAZydzyfE6AmTcrpTayPSQkqlHsOvjelWO7un999vBl35xM8nvtmvO/ejB/7uwLqdq5QcyblDKhDUgIeaqeKew5PzuF2S9+e5e5+//z5/R4+3hrY3357jzjvU6B6S8pNKCkXd0V3kxIc8g7DbMXc7UeUvRjk5s7dXxZQsyblvY+4pCSa8k9fKOY/3/vbcvfpc5P9p/u4SN98OeTNmBQJU06FTFLoQwEUQAHUDEARxzUlSEh0Um688wjJACgCoAiAIgCKIACKACgCoAgCoAiAIgCKACiCACgCoAiAIohCoJj2w3wo0flQTE5cmbFZkBSAAiiAio1lXZ5fAAVQckCtAAVQgkQ9gyEPoCQ1Cg8FUAAFUHbHPIACKGlbDlAABVAA1SC+1i+d26YD1LRArQAFUIJEPWMFKIAS1KgVoAAKoADK7JgHUAAlbcsBCqAACqD+ovSm7b/HeKzbtvTx0duugMqezDUjUK8pyq9t6eOjt70BtQIUCiVIVOZkrgk9VPYLHXj8mECZkidlhSqQp2+fQpU9HqCmB8r1UGWPH9NDZU/mQqFQqBNbjofCQwFUq9xdvNDvqi7xcTq5yyxJe9/+JTsuKW2BOvc2YaBSPZEIUHlNs/6B2pIdlxQUCoUaSKEKPVQLoKaLGKC68VAv9G0p1ETy9B2tUO8H2fZQIaCaeqjZgIryUEaAQqFQKDwUHsq8h3JPy6kdqPKsV3lmgAp81uZ0N+hDWe9DoVAo1JgKdQ4UHgoPJaxQVHl9VHndeCj6UH30oVAoFGpMhcJD4aFqgGW5yiuNkBiU3jcjWKVVBWoxApR/DrjJPpQWUFb3m+ahFhTKikLZBSppyFssA4WH6sZD3X7CvocyWOWVK0mgmjK630ig3izZ9lAG+1DzARXjoawBhUL1rlBdDHl4KPpQomDNVeVd7f9ivaimVZ6Vq14uvNRcfair/V+sF9W0D2UWKBTq5JHn60WhUBFeaioPdb1/P05/fri9hzKvUDNVedlA/f7TtMr7O6hxDzVTH+p6//4RTx2opOvyUKiuFGoJD3koFB4q3UMtDV+UCn0o8YLCeQ5TV3liV63ERqjPVdGU6wFFH6oJUF7fnzIfyixQKFR9oEJ9rpZtA6mWSNceKjcJ7T8rXFr3oQ4Fhf/j5gKF6rHKu0hCbJUndtUKQHXeh8oGyrUj9YFacvtQakDJDnmdKtR5EkwrlDUPVaslM2kfSt9DlQK16tyNaqoqLzUZras81dVXMhVKH6iO+lByQNXpQ6muD2UWKBRqKoVS70fhoQxFlSHvorAobR/0VOWlVlmtqzzV1VfMAtVRH0oOqDp9KNX1odSAkhnyUKhJFIo+FB5KpA+l90E3Vd536ZPqscqrBxR9KENA6XkoFAqFauuhtKYG4aFG8VCJBUJu+4AqL0ehTFR5RoGiD2UIqCQPpQxU2ZCHQg2uUPSh8FBZHkr8hkYzVXnuz3up8oLPR6DKaw9Ux32ofKDa9qHCQJX3oVAoFMpmHyq3H8V1eQ0idN4iQ57wDY1S2wc9V3nu8jq9VHmhZYHGAKrjPlQ+UG37UGGgJDyUNFB5Q16nCvW5XlM/CuVfZ4r5UPShhu9DJVd7rL5Sv8rTnG3QHijWhzIElL0+FAo1uULhofBQwh5K6QbbI1Z5YtXYwLMN2gPFOuWGgCqfD4VCoVDMh8JD2fVQqYXE1LMNRqnyQr+3dF3eFPOhRulDhYGyc10eCoVC4aGm9VCK86FSCwnBhWip8lpVeZrzodoDRR/KEFCaHgqFGlihmA+Fh5qsD1X6HPqq8r7Wr+dXdjWWPQvgeGNy1ocaog/1Q1NNoNwbNLM+1GB9qK9nrChUDFBSNwUa3EN9rTUj9gbNFj3UxZ3cxW/I3WmVFwWU2NSNwC3ku5htUB2oPvtQMSOeIFCuh+pofahAiwKF8thyFIo+VFWg8FDphYrUc5hqFeAZ+1D1gJpwnfIZ+1AoFAqlolB4qNVQkobwUErVXY9VnvbdoGao8vSBmnCd8qn6UCgUCkUfCg/VjYcKFQzSz4Eqb7IqTw8o+lBT9aFQKBSKPhQeqoKHKlYo4eqOKq/7Ks8oUPSheu1DoVAolB2FwkPhoUT7UNrPYaoqr/Rdpz31o2+FmrAPlZskfaDqeSgUCoXCQw3noaodZwQPNdNd0YsVSnfqR9+zDSbsQ5V7KN3JaZrzoVAoFGplPhQeCg9FlUeVRx+KPhQKhULRh8JD4aGo8qjy6EPRh6IPhUKhUHgoPFRKLOvy/KLKG77KqwjUmgQUfag++1DVqrzlGfShUChJjcJDCcW2aPzcfagsoKjyvEC9/rFY5VUEKoko+lAxQBnsQ9VUqAWFEgLKP+TNplA5QOGhRutDXSzsMcr2mBZP7qQOkvv72vs9VosSQJ0vPTQOUK4TUAHqYh2nzGRr7TcSqDQPhUKhULIKZcw2VLMjDwVjqWUMqxlOSQ81sDx9RyuUzEFyf197v8dqUdJDjQ5UlIeSOUju72vvNxKoTA+FQqFQeCg8lDUPZbYqE3ptw/tVrPJST6rVfjWqvHGB8rdmqvShUk+q1X41+lAoFAol24eaxjPF2AU8lMCQZ7QqE1Oo0H4Vq7zUk2q1X40qb1yg/K2ZKn2o1JNqtV+NPhQKhULJ9qHwUHgoCQ9lfnaAUpV3WtBQ5cUlZU6grm4xRx8KoFAouwrVXWzz9mO3JjzUdjJSHsrdXxUP5XktVvmCpnqVt11ZFLu9vIFTjSrv5qS/tMq7eV9O3SrP88dzAnV1i7kafagDUIV9qCBQin2oYYHKG/IaK5R/yMtXqPMhryVQ9KHoQ4l6KOJBUgAKoMwC9W/y8OaOpMQlBaAACqAACqAAamKgCEw5VR5AARRAzQLU/ScC293vcz/6cD8luDvf/R7kePyr47n7+3v8a3+Bj2zen6xt/38MkBT3xa2UFD9Q6+5Yr+19266ec0j8cNb9HDOYu/1P79fHO+TuncNA7v4e97mLxwBJCQKVmJT3d3FJCSqUew6+N6VY7u6f3328GXfn43nOp/v7e/y2v1DubnFvxp6Ssj2p0qScA3VISsBD7VRxz+HJOdxu6duz3N3vnz+/3z3H21Q+sL/99n5y3u9/t+8eAyQlDFRaUta0pASHvMMwWzF3+xFlLwbH3Lk58OfO3V8WUL0l5Qqo2KSsaUlJNOWfvlDMf773t+Xu0+cmm3L3cRe+OXrI6ykpR6DyknIOVJwpp0ImKfShAAqgAGoGoIjjdZMkJDopN955hGQAFAFQBEARAEUQAEUAFAFQBAFQBEARAEUAFEEAFAFQBEARRCFQTPthPpTofCgmJ67M2CxICkABFEC1yJ3U/US07z8iNJ6t67Iuz6/kpADUYECJxQ9NAAVQckQ9YwUoPJSgRuGhNBVK5n4i1e6DWwMobs0BUEljHkABlLQtByg8VD2g8FDtgYruBx36QLLxHRl/d7MCqL4V6tAHagXUxjlAdT7kuX2gPhTqPwEGAJCUfSo4cgx8AAAAAElFTkSuQmCC">
26 | <!--boot js--><script id="jsbin-javascript" defer>const ctx = document.createElement('canvas').getContext('2d');
27 | 
28 | const w = ctx.canvas.width = 256;
29 | const h = ctx.canvas.height = 176;
30 | 
31 | document.body.appendChild(ctx.canvas);
32 | 
33 | const img = document.querySelector('img');
34 | 
35 | const corner = 19;
36 | const count = 0;
37 | 
38 | const l = corner + 21 * count + 256 * count;
39 | 
40 | ctx.drawImage(img, -l, -corner);
41 | const imgData = ctx.getImageData(0, 0, w, h);
42 | 
43 | </script>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/ancient-wind-709/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | 
12 | body, html {
13 |   height: 100%;
14 | }
15 | 
16 | iframe {
17 |   border: 5px solid #333;
18 |   width: 100%;
19 |   height: fit-content;
20 | }
21 | </style>
22 | </head>
23 | <body>
24 | <iframe src="#"></iframe>
25 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
26 | 
27 | const f =   document.querySelector('iframe')
28 | 
29 | f.srcdoc = `
30 | <script>
31 | 
32 | window.onhashchange = () => console.log('changed');
33 | window.location = "#a"
34 | //window.location = "https://remy.jsbin.me/silent-frost-D3C/#few"
35 | 
36 | <` + '/script>'
37 | </script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/autumn-cell-089/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: 'ubuntu mono', monospace;
10 |   font-size: 16px;
11 |   box-sizing: border-box;
12 | }
13 | 
14 | textarea {
15 |   width: 100%;
16 |   border: 1px solid #ccc;
17 |   padding: 8px;
18 |   margin: 8px 0;
19 | }
20 | </style>
21 | </head>
22 | <body>
23 | <textarea placeholder="comma separated values"></textarea>
24 |   <button>
25 |     Download bytes
26 |   </button>
27 | <!--boot js--><script id="jsbin-javascript" defer>const save = (function () {
28 |   var a = document.createElement('a');
29 |   document.body.appendChild(a);
30 |   a.style = 'display: none';
31 |   return function(data, fileName) {
32 |     let blob = null;
33 | 
34 |     if (data instanceof Blob) {
35 |       blob = data;
36 |     } else {
37 |       if (!Array.isArray(data)) {
38 |         data = [data];
39 |       }
40 |       blob = new Blob(data, { type: 'octet/stream' });
41 |     }
42 |     const url = URL.createObjectURL(blob);
43 |     a.href = url;
44 |     a.download = fileName;
45 |     a.click();
46 |     URL.revokeObjectURL(url);
47 |   };
48 | })();
49 | 
50 | 
51 | document.querySelector("button").onclick = () => {
52 | 	const source = document.querySelector("textarea").value.trim().split(/[,\n]/).map(_ => {
53 |     return parseInt(_.trim(), 10);
54 |   });
55 |   
56 |   console.log(save, Uint8Array.from(source));
57 |   
58 |   save(Uint8Array.from(source), 'untitled.bin');
59 | }
60 | </script>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/black-thunder-4A1/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <!DOCTYPE html>
 3 | <html>
 4 | 	<head>
 5 | 		<title>MIDI.js Autoplay example</title>
 6 | 		<script src='https://www.midijs.net/lib/midi.js'></script>
 7 | 	<style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | 
12 | body, html {
13 |   height: 100%;
14 |   background: #eee;
15 | }
16 | </style>
17 | </head>
18 | 	<body>	
19 | 		<h1>drop to play...</h1>
20 | 	<!--boot js--><script id="jsbin-javascript" defer>document.body.ondragover = () => false;
21 | document.body.ondrop = (e) => {
22 |   e.preventDefault();
23 |   MIDIjs.play(URL.createObjectURL(e.dataTransfer.files[0]));
24 | }
25 | 
26 | </script>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/boggle/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>Boggle</title>
  7 |   <link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
  8 | <style id="jsbin-css">
  9 | * {
 10 |   box-sizing: border-box;
 11 | 	font-family: 'Archivo Black', sans-serif;
 12 | }
 13 | 
 14 | html {
 15 |   min-height: 100%;
 16 |   margin: 0;
 17 |   display: flex;
 18 |   flex-direction: row;
 19 |   width: 100%;
 20 |   align-items: center;
 21 |   justify-content: center;
 22 | }
 23 | 
 24 | body {
 25 |   margin: 10px;
 26 |   flex: 1;
 27 | }
 28 | 
 29 | body.game-running {
 30 |   background: #efb085;
 31 | }
 32 | 
 33 | body.game-running button {
 34 |   display:none;
 35 | }
 36 | 
 37 | body.game-over {
 38 |   background: rgb(244, 67, 54);
 39 |   animation: gameover 500ms;
 40 |   animation-iteration-count: 3;
 41 | }
 42 | 
 43 | @keyframes gameover {
 44 |   0%   {background: #cc1717;}
 45 |   25%  {background: rgb(244, 67, 54);}
 46 |   50%  {background: #cc1717;}
 47 |   75%  {background: rgb(244, 67, 54);}
 48 |   100% {background: #cc1717;}
 49 | }
 50 | 
 51 | 
 52 | body.game-running #timer {
 53 |   display: block;
 54 | }
 55 | 
 56 | button {
 57 |   display: none;
 58 | }
 59 | 
 60 | .game-over button {
 61 |   display: block;
 62 | }
 63 | 
 64 | .start-game button, .start-game #seed {
 65 |   display: block;
 66 | }
 67 | 
 68 | #timer {
 69 |   display: none;
 70 |   color: #c37b49;
 71 |   text-align: center;
 72 |   font-size: 12vw;
 73 |   padding: 0 0;
 74 |   margin: 24px auto;
 75 | }
 76 | 
 77 | #game-status {
 78 |   display: flex;
 79 |   flex-direction: column;
 80 | }
 81 | 
 82 | button {
 83 |   background: rgb(33, 150, 243);
 84 |   color: white;
 85 |   border: 0;
 86 |   border-radius: 2px;
 87 |   padding: 4px 8px;
 88 |   cursor: pointer;
 89 |   margin: 20px auto;
 90 | }
 91 | 
 92 | #start {
 93 | /*   display: block; */
 94 |   border-radius: 8px;
 95 |   font-size: 8vw;
 96 |   padding: 12px 36px;
 97 |   margin: 20px 20vw;
 98 | }
 99 | 
100 | #grid:empty:before {
101 |   content: 'Ready to play?';
102 |   grid-column: span 4;
103 |   grid-row: span 4;
104 |   text-align: center;
105 |   font-size: 8vw;
106 | }
107 | 
108 | #grid {
109 |   display: grid;
110 |   grid-template-columns: 1fr 1fr 1fr 1fr;
111 |   grid-template-rows: 1fr 1fr 1fr 1fr;
112 |   grid-gap: 8px;
113 | 
114 |   justify-content: center;
115 |   align-items: center;
116 |   max-width: 600px;
117 | /*   min-height: 500px; */
118 |   margin: 0 auto;
119 | }
120 | 
121 | #grid div {
122 |   background: white;
123 |   text-align: center;
124 |   font-size: 12vw;
125 |   line-height: calc(18vw + 8px);
126 | /*   border: 4px solid transparent; */
127 |   border-radius: 8px;
128 | /*   font-weight: bold; */
129 |   box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
130 |   background: #efefef;
131 | }
132 | 
133 | #seed {
134 |   display: block;
135 |   margin: 20px 0;
136 |   font-size: 4vw;
137 |   width: 25%;
138 |   border: 2px solid rgba(0,0,0,.3);
139 |   background: rgba(255,255,255,.3);
140 |   text-align: center;
141 |   color: rgba(0,0,0,.5);
142 | }
143 | 
144 | #meta button {
145 |   margin: 20px 0 20px 10px;
146 |   padding: 0px 20px;
147 | }
148 | 
149 | #meta {
150 |   display: flex;
151 |   justify-content: center;
152 | }
153 | 
154 | .help {
155 |   color: white;
156 | }
157 | 
158 | #grid * {
159 |   user-select: none;
160 |   display: block
161 | }
162 | 
163 | .letterW,
164 | .letterM,
165 | .letterZ {
166 |   text-decoration: underline;
167 | }
168 | 
169 | .letterQu {
170 |   letter-spacing: -5px;
171 |   text-indent: -5px;
172 | }
173 | 
174 | .rotate1 span {
175 |   transform: rotate(90deg);
176 | }
177 | 
178 | .rotate2 span {
179 |   transform: rotate(180deg);
180 | }
181 | 
182 | .rotate3 span {
183 |   transform: rotate(270deg);
184 | }
185 | </style>
186 | </head>
187 | <body class="start-game">
188 |   <div id="game-status">
189 |    <button id="start">
190 |      Start
191 |     </button>
192 |     <span id="timer">0:00</span>
193 |   </div>
194 | 	<div id="grid"></div>
195 |   <div id="meta">
196 |     <input type="number" id="seed">
197 |     <button id="start-from-seed">
198 |     Start from seed
199 |     </button>
200 |   </div>
201 |   <div class="help">
202 |     <p>
203 |       Letters:&nbsp;3 4 5 6 7 8 or more<br>
204 |       Points:&nbsp;&nbsp;1 1 2 4 5 11
205 |     </p>
206 |   </div>
207 | <!--boot js--><script id="jsbin-javascript" defer>const body = document.body;
208 | const timer = document.querySelector('#timer');
209 | let time = 0;
210 | let currentDice = null;
211 | let grid = null;
212 | const length = 4 * 4;
213 | const dice = [
214 |   'ryveld',
215 |   'rwthev',
216 |   'uieesn',
217 |   'nrlzhn',
218 |   'stoesi',
219 |   'ydstit',
220 |   'tootwa',
221 |   'paskff',
222 |   'abjboo',
223 |   'neegaa',
224 |   'etrlty',
225 |   'qhmnui',
226 |   'dxlrei',
227 |   'ucimto',
228 |   'sapohc',
229 |   'gwheen',
230 | ];
231 | 
232 | function roll() {
233 |   return (random() * 6) | 0;
234 | }
235 | 
236 | function rotate() {
237 |   return Math.random() * 4 | 0;
238 | }
239 | 
240 | function tick() {
241 |   const m = time / 60 | 0;
242 |   const s = (time % 60).toString().padStart(2, '0');
243 |   timer.innerText = `${m}:${s}`;
244 |   if (time === 0) {
245 |     body.className = 'game-over';
246 |     return;
247 |   }
248 |   time--;
249 |   setTimeout(tick, 1000);
250 | }
251 | 
252 | function init() {
253 |   document.querySelector('#seed').value = seed;
254 |   currentDice = 0;
255 |   const order = Array.from({ length }, (_, i) => i).sort(() =>
256 |     random() < 0.5 ? -1 : 1
257 |   );
258 | 
259 |   const letters = order.map(i => {
260 |     const letter = dice[i][roll()];
261 |     if (letter === 'q') {
262 |       return 'Qu';
263 |     }
264 |     return letter.toUpperCase();
265 |   }); // ?
266 | 
267 |   const root = document.querySelector('#grid');
268 | 
269 |   root.innerHTML = letters.map(l => `<div class="letter${l} rotate${rotate()}"><span>${l}</span></div>`).join('');
270 |   body.className = 'game-running';
271 |   time = 3 * 60;
272 |   // seed = 1;
273 |   tick();
274 | }
275 | 
276 | var seed = Math.random() * 10000 | 0 + 1;
277 | document.querySelector('#seed').value = seed;
278 | function random() {
279 |   var x = Math.sin(seed++) * 10000;
280 |   return x - Math.floor(x);
281 | }
282 | 
283 | document.querySelector('#start').onclick = init;
284 | 
285 | document.querySelector('#start-from-seed').onclick = () => {
286 |   seed = parseInt(document.querySelector('#seed').value);
287 |   init();
288 | }
289 | 
290 | navigator.serviceWorker.register('sw.js');
291 | </script>
292 | </body>
293 | </html>
294 | 


--------------------------------------------------------------------------------
/cold-limit-46E/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>Transform string</title>
  7 |   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  8 | <style id="jsbin-css">
  9 | * {
 10 |   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
 11 |   box-sizing: border-box;
 12 |   font-size: 18px;
 13 | }
 14 | 
 15 | textarea {
 16 |   display: block;
 17 |   width: 100%;
 18 |   height: 20vh;
 19 | }
 20 | 
 21 | 
 22 | li {
 23 |   margin: 4px 0;
 24 | }
 25 | 
 26 | .rule > span:first-child {
 27 |   grid-area: 1 / 1 / 2 / 5;
 28 | /*   display: block; */
 29 | /*   float: left; */
 30 |   width: 30%;
 31 | }
 32 | 
 33 | .delete {
 34 | /*   float: left; */
 35 |   margin-right: 10px;
 36 | }
 37 | 
 38 | button {
 39 |   cursor: pointer;
 40 | }
 41 | 
 42 | button:hover {
 43 |   background: rgba(1,1,1, 0.1)
 44 | }
 45 | 
 46 | #rules ol {
 47 |   overflow: hidden;
 48 | }
 49 | 
 50 | .add-rule {
 51 |   margin: 20px 0;
 52 |   display: block;
 53 |   clear: both;
 54 | }
 55 | </style>
 56 | </head>
 57 | <body>
 58 |   <div id="app">
 59 |     <h2>
 60 |       Source
 61 |     </h2>
 62 |   <textarea v-model="source" id="source" placeholder="paste a glob of text here"></textarea>
 63 | 
 64 |     <h2>
 65 |       Transform rules
 66 |     </h2>
 67 | 
 68 |     <div id="rules">
 69 |       <ol>
 70 |         <li v-for="(rule, index) in rules">
 71 |           <button class="delete" v-on:click="deleteRule(index)">
 72 |             ×
 73 |           </button>
 74 |           <label class="rule">
 75 |             <span>{{ rule.type | labelForRule }}</span>
 76 |             <span v-show="rule.value !== null"><input v-model="rule.value" type="text"> ({{ rule.value | display }})
 77 |             </span>
 78 |             </label>
 79 |       </ol>
 80 |       
 81 |       <div class="add-rule">
 82 |         <label><span>Add rule</span>
 83 |         <select v-model="newRule">
 84 |           <option value="splitter">Splitter</option>
 85 |           <option value="ignore">Ignore match</option>
 86 |           <option value="strip">Strip match</option>
 87 |           <option value="replace">Replacer</option>
 88 |           <option value="map">Map to object</option>
 89 |           <option value="dropEmpty">Drop empty</option>
 90 |         </select>
 91 |           </label>
 92 |         <button v-on:click="rules.push({ type: newRule, value: newRule === 'dropEmpty' ? null : '' })">
 93 |         	Create
 94 |       	</button>
 95 | 
 96 |       </div>
 97 |     </div>
 98 | 
 99 |     <h2>
100 |       Result
101 |     </h2>
102 |     <pre>{{ result | json }}</pre>
103 |   </div>
104 |   
105 |   <script type="text/x-template" id="splitter">
106 |   	<li>Split lines by <input v-model="value" type="text"> ({{ value | display }})</li>
107 |   </script>
108 | <!--boot js--><script id="jsbin-javascript" defer>console.clear()
109 | Vue.component('splitter', {
110 |   template: '#splitter',
111 |   props: ['value'],
112 |   filters: {
113 |     display(s) {
114 |       return JSON.stringify(s)
115 |     }
116 |   },
117 |   data: {
118 |     value: '\n'
119 |   }
120 | });
121 | 
122 | function applyRule(result, rule) {
123 |   return result.reduce((acc, curr) => {
124 |     if (Array.isArray(curr)) {
125 |       if (rule.type === 'dropEmpty' && curr.length === 0) {
126 |        	return acc; 
127 |       }
128 |       
129 |       
130 |       if (rule.type === 'map') {
131 |         const fields = rule.value.split(',').map(_ => _.trim());
132 |         curr = curr.reduce((acc, curr, i) => {
133 |           acc[fields[i]] = curr;
134 |           return acc;
135 |         }, {});
136 |         acc.push(curr);
137 |         return acc;
138 |       }
139 | 
140 |     	acc.push(applyRule(curr, rule));
141 |       return acc;
142 |     }
143 |     
144 |     if (typeof curr === 'object') {
145 |       if (rule.type === 'dropEmpty' && Object.keys(curr).length === 0) {
146 |        	return acc; 
147 |       }
148 |       
149 |       curr = Object.entries(curr).reduce((acc, [key, value]) => {
150 |         const res = applyRule([value], rule);
151 |         if (res.length) {
152 |         	acc[key] = res[0]
153 |         }
154 |         return acc;
155 |       }, {});
156 |       acc.push(curr);
157 |       return acc;
158 |     }
159 |     
160 |     if (rule.type === 'dropEmpty') {
161 |       if (!curr || (typeof curr === 'string' && !curr.trim())) {
162 |         return acc;
163 |       }
164 |       
165 |       acc.push(curr);
166 |       return acc;
167 |     }
168 |     
169 |     if (rule.type === 'splitter') {
170 |       curr = curr.split(rule.value);
171 |     }
172 |     
173 |     if (rule.type === 'replace') {
174 |       const parts = rule.value.split('/').slice(1, -1);
175 |       curr = curr.replace(new RegExp(parts[0], 'g'), parts[1]);
176 |       acc.push(curr);
177 |       return acc;
178 |     }
179 |     
180 |     if (rule.type === 'strip') {
181 |       let value = rule.value;
182 |       if (value.startsWith('/')) {
183 | 				value = rule.value.slice(1, -1);
184 |       }
185 |       
186 |       curr = curr.replace(new RegExp(value, 'g'), "");
187 |       acc.push(curr);
188 |       return acc;
189 |     }
190 | 
191 |     if (rule.type === 'ignore' && rule.value) {
192 |       if (rule.value.startsWith('/')) {
193 |         let value = rule.value.slice(1, -1);
194 |         if (new RegExp(value).test(curr)) {
195 |           return acc;
196 |         }
197 |       } else {
198 |         if (curr.includes(rule.value)) {
199 |           return acc;
200 |         }
201 |       }
202 |     }
203 |     
204 |     acc.push(curr);
205 |     return acc;
206 |   }, [])
207 | }
208 | 
209 | const app = new Vue({
210 |   el: '#app',
211 |   filters: {
212 |     display(s) {
213 |       return JSON.stringify(s)
214 |     },
215 |     labelForRule(type) {
216 |       return {
217 |         splitter: 'Split lines by',
218 |         ignore: 'Ignore if matches',
219 |         dropEmpty: 'Drop empty elements',
220 |         strip: 'Strip matching',
221 |         map: 'Map array to object',
222 |         replace: 'Replace /source/with/'
223 |       }[type]
224 |     }
225 |   },
226 |   data: {
227 |     source: document.querySelector('#source').value,
228 |     newRule: 'splitter',
229 |     rules: [
230 |       
231 |     ],
232 |     // result: [],
233 |   },
234 |   computed: {
235 |     result() {
236 |       const rules = this.rules;
237 |       let result = this.source.split('\n');
238 | 			// noprotect
239 |       for (let i = 0; i < rules.length; i++) {
240 |         const rule = rules[i];
241 |         result = applyRule(result, rule);
242 |       }
243 | 
244 | 			return result;
245 | 	  }
246 |   },
247 |   methods: {
248 |     deleteRule(index) {
249 |       this.rules.splice(index, 1);
250 |     }
251 |   }
252 | })
253 | </script>
254 | </body>
255 | </html>


--------------------------------------------------------------------------------
/crimson-bar-07F/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | <p>
15 |   It's late. I should head to bed.
16 |   </p>
17 |   
18 |   <p>
19 |     But first…
20 |     
21 |     Nice 😃
22 |   </p>
23 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
24 | 
25 | </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/crimson-waterfall-270/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 |   font-size: 24px;
11 | }
12 | </style>
13 | </head>
14 | <body>
15 | <p>
16 |   Just a little demo time. Now with github flavour!
17 |   </p>
18 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
19 | 
20 | </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/damp-field-B47/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | <p>
15 |   Just tweaked the url. Should be remy.jsbin.me now!
16 |   </p>
17 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
18 | 
19 | </script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/damp-wildflower-E61/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | 
12 | body {
13 |   margin: 0;
14 | }
15 | 
16 | canvas {
17 |   width: 32;
18 |   height: 2560;
19 | }
20 | </style>
21 | </head>
22 | <body>
23 | <canvas></canvas>
24 | <!--boot js--><script id="jsbin-javascript" defer>const ctx = document.querySelector('canvas').getContext('2d');
25 | 
26 | const size = 3;
27 | ctx.canvas.height = 256* size;
28 | ctx.canvas.width = 32;
29 | 
30 | for (let i = 0; i < 256; i++) {
31 | 	const c = document.createElement('canvas').getContext('2d');
32 | 	c.canvas.height = size;
33 |   c.canvas.width = 32;
34 | 	c.fillStyle = `#ff${i.toString(16).padStart(2, '0')}ff`;
35 | 	c.fillRect(0, 0, 32, size);
36 |   
37 |   const x = 0; size * (i & 15);
38 |   const y = size * i; // * (i / 16 | 0);
39 |   
40 | 	ctx.drawImage(c.canvas, x, y);
41 | }
42 | </script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/dark-fog-FE2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | 
15 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
16 | console.log(`I'm going to save this to jsbin!`)
17 | </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/dawn-term-CAA/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
 7 |   <title>Block animation</title>
 8 | <style id="jsbin-css">
 9 | * {
10 |   box-sizing: border-box;
11 |   font-family: monospace, sans-serif;
12 |   font-weight: bold;
13 |   font-size: 24px;
14 |   font-variant: tabular-nums;
15 | }
16 | 
17 | #box > span {
18 | /*   height: 35px; */
19 | /*   width: 88px; */
20 |   padding: 0;
21 |   display: inline-block;
22 | /*   width: 5ch; */
23 |   color: white;
24 | /*   background: red; */
25 |   white-space: nowrap;
26 | }
27 | 
28 | .one, .zero {
29 |   display: inline-block;
30 |   width: 32px;
31 |   height: 32px;
32 |   line-height: 32px;
33 |   text-align: center;
34 | }
35 | 
36 | .one {
37 |   background: black;
38 |   color: white;
39 | }
40 | 
41 | .zero {
42 |   border-radius: 4px;
43 |   background: white;
44 |   color: black;
45 | }
46 | </style>
47 | </head>
48 | <body>
49 | <div id="box">
50 |   <span id="top">
51 |     <span class="zero">0</span><span class="one">1</span><span class="zero">0</span>
52 |   </span><span id="middle">
53 |     <span class="zero">0</span><span class="one">1</span><span class="one">1</span>
54 |   </span><span id="bottom">
55 |     <span class="zero">0</span><span class="one">1</span><span class="zero">0</span>
56 | 	</span>
57 | </div>
58 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
59 | const $ = s => document.querySelector(s);
60 | 
61 | var tl1 = new TimelineMax({
62 |   repeat: -1,
63 |   yoyo: true,
64 |   repeatDelay: 1,
65 | });
66 | var tl2 = new TimelineLite();
67 | var tl3 = new TimelineLite();
68 | var $t = $('#top');
69 | var $m = $('#middle');
70 | var $b = $('#bottom');
71 | 
72 | tl1
73 | .to($m, .2, { y: '+=99%' , x: -96.3 })
74 | .to($b, .2, { y: '+=198%', x: -191.5})
75 | // .to($b, .2, { y: '+=198%'})
76 | // .to($m, .2, { y: '+=99%' })
77 | // .to($m, .2, { x: -96.3 })
78 | // .to($b, .2, { x: -191.5 })
79 | </script>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/delicate-bush-CB2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>Scale text</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | 
12 | canvas {
13 |   background: #ccc;
14 |   image-rendering: pixelated;
15 | }
16 | 
17 | _canvas {
18 |   image-rendering: optimizeSpeed;
19 |   image-rendering: -moz-crisp-edges;
20 |   image-rendering: -webkit-optimize-contrast;
21 |   image-rendering: -o-crisp-edges;
22 |   image-rendering: optimize-contrast;
23 |   -ms-interpolation-mode: nearest-neighbor;
24 | }
25 | </style>
26 | </head>
27 | <body>
28 | <canvas></canvas>
29 |   <p>
30 |     Hello world.
31 |   </p>
32 | <!--boot js--><script id="jsbin-javascript" defer>const ctx = document.querySelector('canvas').getContext('2d');
33 | ctx.canvas.width = 200;
34 | ctx.canvas.height = 200;
35 | 
36 | ctx.scale(.5,.5);
37 | //ctx.translate(0.5, 0.5);
38 | ctx.textBaseline = "top";
39 | ctx.imageSmoothingEnabled = false;
40 | ctx.font = "12pt Helvetica";
41 | ctx.fillText('W', 0, 0);
42 | 
43 | const width = ctx.measureText('W');
44 | 
45 | const data = ctx.getImageData(0, 0, width.width, 12);
46 | 
47 | toImage(data);
48 | 
49 | function toImage(imageData) {
50 |   const c = document.createElement('canvas').getContext('2d');
51 |   const s = 5;
52 |   const target = c.getImageData(0, 0, imageData.width * s, imageData.height * s);
53 |   scale(0, s, imageData, target);
54 |   c.putImageData(target, 0, 0);
55 |   
56 |   const i = new Image();
57 |   i.src = c.canvas.toDataURL();
58 |   document.body.appendChild(i);
59 | }
60 | 
61 | function scale(i, s, source, target) {
62 |   var width = source.width,
63 |       row = i / width | 0,
64 |       base = width * s * s * row,
65 |       j = i % width,
66 |       targetI = null;
67 | 
68 |   for (var x = 0; x < s; x++) {
69 |     for (var y = 0; y < s; y++) {
70 |       targetI = base + j * s + x + (width * s * y);
71 |       
72 |       for (var k = 0; k < 4; k++) {
73 |         target.data[(targetI*4)+k] = source.data[(i*4)+k];
74 |       }
75 |     }
76 |   }
77 | }
78 | </script>
79 | </body>
80 | </html>


--------------------------------------------------------------------------------
/empty-lab-5DE/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 |   font-size: 26px;
11 | }
12 | 
13 | body:after {
14 |   content: 'desktop-ish'
15 | }
16 | 
17 | @media screen and (max-width: 900px) and (hover: none) {
18 |   body:after {
19 |     content: 'mobile-ish'
20 |   }
21 | }
22 | 
23 | @media screen and (max-width: 900px) and (hover: hover) {
24 |   body:after {
25 |     content: 'has hover capability'
26 |   }
27 | }
28 | </style>
29 | </head>
30 | <body>
31 | <p>
32 |   testing
33 |   </p>
34 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
35 | 
36 | </script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/floral-lab-B81/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>JS Bin</title>
  7 | <style id="jsbin-css">
  8 | * {
  9 |   font-family: 'Menlo';
 10 | }
 11 | 
 12 | #t {
 13 |   width: 400px;
 14 |   height: 400px;
 15 |   margin: 80px auto;
 16 |   background: #cecece;
 17 |   cursor: pointer;
 18 | }
 19 | 
 20 | #t > div {
 21 |   float: left;
 22 |   width: 40px;
 23 |   height: 40px;
 24 |   display: flex;
 25 |   justify-content: center;
 26 |   align-items: center;
 27 | }
 28 | 
 29 | .on {
 30 |   background: #f33;
 31 | }
 32 | 
 33 | p {
 34 |   font-family: 'Menlo';
 35 |   border: 1px solid #666;
 36 |   padding: 4px;
 37 |   margin: 20px;
 38 | }
 39 | 
 40 | button {
 41 |   max-height: 40px;
 42 |   cursor: pointer;
 43 |   background: #222;
 44 |   color: white;
 45 |   padding: 4px 16px;
 46 |  	font-size: 18px;
 47 |   border: 1px solid #ccc;
 48 |   margin: 0 20px;
 49 | }
 50 | 
 51 | .output {
 52 |   display: flex;
 53 | }
 54 | 
 55 | .output p {
 56 |   margin: 0;
 57 |   flex-grow: 1;
 58 | }
 59 | </style>
 60 | </head>
 61 | <body>
 62 | <div id="t"></div>
 63 |   <div class="output">
 64 |     <p>
 65 |     waiting
 66 |   </p>
 67 |   <button>
 68 |     reset
 69 |   </button>
 70 |   </div>
 71 | <!--boot js--><script id="jsbin-javascript" defer>const $ = s => document.querySelector(s);
 72 | let selected = new Set();
 73 | 
 74 | const t = $('#t');
 75 | 
 76 | function div(i) {
 77 |   const d = document.createElement('div');
 78 |   d.textContent = i;
 79 |   d.onclick = () => {
 80 |     d.className = 'on';
 81 |     selected.add(i);
 82 |   }
 83 |   return d;
 84 | }
 85 | 
 86 | function fill() {
 87 |   for (let i = 0; i < 100; i++) {
 88 |     t.appendChild(div(i))
 89 |   }
 90 | }
 91 | 
 92 | function sleep(n) {
 93 |   return new Promise(resolve => setTimeout(resolve, n));
 94 | }
 95 | 
 96 | const output = $('p');
 97 | 
 98 | t.onclick = () => {
 99 |   output.innerHTML = Array.from(selected).join(', ')
100 | }
101 | 
102 | $('button').onclick = () => {
103 |   selected.clear();
104 |   output.textContent = 'waiting';
105 |   for (let i = 0; i < 100; i++) {
106 |     t.children[i].className = '';
107 |   }
108 | }
109 | 
110 | fill();
111 | </script>
112 | </body>
113 | </html>


--------------------------------------------------------------------------------
/fragrant-dawn-799/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>Via netlify</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | <p>
15 |   Trying now via netlify.
16 |   </p>
17 | <!--boot js--><script id="jsbin-javascript" defer>console.log('hoping this is fast.');
18 | </script>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/frosty-math-CA4/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>Feed links</title>
  7 |   <script src="https://unpkg.com/memfetch"></script>
  8 |   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  9 | <style id="jsbin-css">
 10 | * {
 11 |   font-family: sans-serif;
 12 | }
 13 | 
 14 | body {
 15 |   font: 400 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
 16 |   color: #111;
 17 |   background-color: #fdfdfd;
 18 |   -webkit-text-size-adjust: 100%;
 19 |   -webkit-font-feature-settings: "kern" 1;
 20 |   -moz-font-feature-settings: "kern" 1;
 21 |   -o-font-feature-settings: "kern" 1;
 22 |   font-feature-settings: "kern" 1;
 23 |   font-kerning: normal;
 24 |   display: flex;
 25 |   min-height: 100vh;
 26 |   flex-direction: column
 27 | }
 28 | 
 29 | #app {
 30 |   max-width: 38rem;
 31 |   padding: 2rem;
 32 |   margin: auto;
 33 | }
 34 | 
 35 | li {
 36 |   list-style: none;
 37 |   padding: 20px;
 38 |   border: 1px solid #bbb;
 39 |   margin: 20px 0 40px 0;
 40 |   border-radius: 4px;
 41 | }
 42 | 
 43 | li div :last-child {
 44 |   margin-bottom: 0;
 45 | }
 46 | 
 47 | h2 {
 48 |   margin: 0;
 49 | }
 50 | 
 51 | h2 a {
 52 |   text-decoration: none;
 53 |   color: black;
 54 | }
 55 | 
 56 | h2 a:hover {
 57 |   text-decoration: underline;
 58 | }
 59 | 
 60 | small {
 61 |   color: #666;
 62 | }
 63 | </style>
 64 | </head>
 65 | <body>
 66 | <div id="app">
 67 |   <ul>
 68 |     <li v-for="link in links.items">
 69 |       <h2>
 70 |         <a target="_blank" :href="link.url" >{{ link.title }}</a>
 71 |       </h2>
 72 |       <div class="body" v-html="link.content_html"></div>
 73 |       <p>
 74 |         <small>Tags: {{ link.tags | join(', ') }}</small>
 75 |       </p>
 76 |       <p>
 77 |         <small>{{ link.date_published | formatDate }}</small>
 78 |       </p>
 79 |     </li>
 80 |   </ul>
 81 | </div>
 82 | <!--boot js--><script id="jsbin-javascript" defer>new Vue({
 83 |   el: '#app',
 84 |   data: {
 85 |     links: []
 86 |   },
 87 |   filters: {
 88 |     formatDate(s) {
 89 |       return new Date(s).toString()
 90 |     },
 91 |     join(s, v) {
 92 |       return s.join(v)
 93 |     }
 94 |   },
 95 | 	mounted () {
 96 | 		fetch('https://feeds.remysharp.com/links.json')
 97 |       .then(res => res.json())
 98 |       .then(json => {
 99 |       	this.links = json;
100 |       console.log(json)
101 |       });
102 |   }
103 | })
104 | </script>
105 | </body>
106 | </html>


--------------------------------------------------------------------------------
/gentle-bonus-B7B/index.html:
--------------------------------------------------------------------------------
 1 | <style id="jsbin-css">
 2 | * {
 3 |   font-family: sans-serif;
 4 | }
 5 | </style>
 6 | <style>
 7 |   body {
 8 |     display: block;
 9 |     background: black;
10 |   }
11 |   
12 |   svg.root{
13 |     border: 1px solid rgba(0,0,0,0.5);
14 |     width:200px;
15 |     height:100px;
16 |     margin:0 10px;
17 |     transition:  1s ease-in-out 0s;
18 |   }
19 |   svg.root:hover{
20 |     width:600px;
21 |   }
22 |   
23 |   p {
24 |     color: #D4AF37;
25 |   }
26 | </style>
27 | <div>
28 | 
29 | <!-- this block of SVG was then inlined into a background image -->
30 | <svg class="root" xmlns="http://www.w3.org/2000/svg">
31 |   <style>
32 |     svg {
33 |       overflow: visible;
34 |     }
35 |   </style>
36 |   <g id="container" fill="#D4AF37" fill-rule="nonzero">
37 |     <svg class="bar" y="50%">
38 |       <rect y="-1" width="100%" height="2"/>
39 |     </svg>
40 |     <svg class="left" y="50%">
41 |       <rect x="0" y="-6" height="12" width="6" fill="black" />
42 |       <path d="M0,0 l6,-6 l6,6 l-6,6" />
43 |     </svg>
44 |     <svg class="right" y="50%" x="100%">
45 |       <rect x="-6" y="-6" height="12" width="6" fill="black" />
46 | 			<path d="M-12,0 l6,-6 l6,6 l-6,6" />
47 |     </svg>
48 | 	</g>
49 | </svg>
50 |   <p>
51 |     Hover the svg above to see it scale.
52 |   </p>
53 |   </div>
54 | 
55 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
56 | 
57 | </script>


--------------------------------------------------------------------------------
/gentle-lab-BC9/NqC2UNA3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/gentle-lab-BC9/NqC2UNA3.png


--------------------------------------------------------------------------------
/gentle-lab-BC9/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | body {
 9 |   padding: 0;
10 |   margin: 0;
11 |   background: black;
12 | }
13 | 
14 | * {
15 |   font-family: sans-serif;
16 | }
17 | 
18 | div {
19 |   background: url(NqC2UNA3.png);
20 |   background-size: 100%;
21 |   background-position-x: 0px;
22 |   width: 100vw;
23 |   height: 100vh;
24 |   animation: slide 1000s linear infinite;
25 | }
26 | 
27 | @keyframes slide {
28 |   from {
29 |     background-position-x: 0;
30 |   }
31 |   to {
32 |     background-position-x: 6176px;
33 |   }
34 | }
35 | 
36 | h1 {
37 |   color: transparent;
38 |   background: 
39 | }
40 | 
41 | 
42 | 
43 | </style>
44 | </head>
45 | <body>
46 | 	<div></div>
47 |   <h1>
48 |     ffconf
49 |   </h1>
50 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
51 | 
52 | </script>
53 | </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/gentle-sound-4E1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>dims</title>
 7 | <style id="jsbin-css">
 8 | pre {
 9 |   font-family: 'ubuntu mono', monospace, sans-serif;
10 | }
11 | 
12 | html {
13 |   height: 100vh;
14 | 	display: flex;
15 |   align-items: center;
16 |   justify-content: center;
17 |   font-size: 10vw;
18 |   background: #333;
19 |   color: #eee;
20 |   text-shadow: 1px -1px 0px #000;
21 | }
22 | 
23 | * {
24 |   margin: 0;
25 |   padding: 0;
26 | }
27 | </style>
28 | </head>
29 | <body>
30 | 
31 | <pre id="output"></pre>
32 | <!--boot js--><script id="jsbin-javascript" defer>const output = document.querySelector('#output');
33 | 
34 | const getDevicePixelRatio = function () {
35 |     var ratio = 1;
36 |     // To account for zoom, change to use deviceXDPI instead of systemXDPI
37 |     if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI       !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
38 |         // Only allow for values > 1
39 |         ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
40 |     }
41 |     else if (window.devicePixelRatio !== undefined) {
42 |         ratio = window.devicePixelRatio;
43 |     }
44 |     return ratio;
45 | };
46 | 
47 | function render() {
48 |   output.innerHTML = `
49 |  Width: ${window.innerWidth}px
50 | Height: ${window.innerHeight}px
51 |  Ratio: ${getDevicePixelRatio().toFixed(1)}
52 | `;
53 | }
54 | 
55 | window.addEventListener('resize', render)
56 | 
57 | render();
58 | 
59 | window.addEventListener("load", () => setTimeout(() => window.scrollTo(0, 1), 0));
60 | </script>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/green-waterfall-D5C/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>JS Bin</title>
  7 | <style id="jsbin-css">
  8 | * {
  9 |   font-family: sans-serif;
 10 | }
 11 | 
 12 | .card {
 13 | /*   display: none; */
 14 | }
 15 | 
 16 | img {
 17 |   height: 125px;
 18 |   position:relative;
 19 |   z-index:1 ;
 20 | }
 21 | 
 22 | body > img,
 23 | .card {
 24 |   margin: 2px;
 25 | }
 26 | 
 27 | body {
 28 |   --h: 19em;
 29 |   display: flex;
 30 |   flex-wrap: wrap;
 31 | }
 32 | 
 33 | .card {
 34 |   overflow: hidden;
 35 |   position: relative;
 36 |   height: 125px;
 37 |   width: 125px;
 38 | /*   margin: 20px; */
 39 |   background: linear-gradient(180deg, #de7226, #eee);
 40 | }
 41 | 
 42 | .card:before, .card:after {
 43 |   --p: 0;
 44 |   --s: calc(1 - 2*var(--p));
 45 |   position: absolute;
 46 |   top: 0;
 47 |   right: 0;
 48 |   bottom: 0;
 49 |   left: 0;
 50 |   -webkit-mask: var(--m);
 51 |   mask: var(--m);
 52 |   content: "";
 53 | }
 54 | .card:after {
 55 |   --p: 1 ;
 56 | }
 57 | .card:nth-child(1):before, .card:nth-child(1):after {
 58 |   background: linear-gradient(calc(var(--s)*45deg), transparent calc(50% - 1px), #4B384C 0, #4B384C calc(50% + 1px), transparent 0) 0 0/ 19px 19px;
 59 |   --m: linear-gradient(red 50%, transparent 50%)
 60 |   				0 calc(var(--p)*19px)/ 100% 38px;
 61 | }
 62 | .card:nth-child(2):before, .card:nth-child(2):after {
 63 |   --c0: hsla(0, 0%, 0%, var(--p));
 64 |   --c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
 65 |   background: repeating-linear-gradient(calc(var(--s)*45deg), #4B384C 0, #4B384C 3px, transparent 0, transparent 13px);
 66 |   --m: repeating-radial-gradient(circle,
 67 |   					var(--c0) 0, var(--c0) 2em,
 68 |   					var(--c1) 0, var(--c1) 4em)
 69 |   ;
 70 | }
 71 | .card:nth-child(3):before, .card:nth-child(3):after {
 72 |   background: repeating-radial-gradient(circle, #4B384C 0, #4B384C 1px, transparent 2px, transparent 7px, #4B384C 8px) calc(var(--p)*32px) 0/ 64px 64px;
 73 |   --m: linear-gradient(red 50%, transparent 50%)
 74 |   		0 calc(var(--p)*32px)/ 100% 64px
 75 |   ;
 76 | }
 77 | .card:nth-child(4):before, .card:nth-child(4):after {
 78 |   background: linear-gradient(calc(var(--s)*45deg), transparent calc(50% - 1px), #4B384C 0, #4B384C calc(50% + 1px), transparent 0) 0 0/ 0.5em 0.5em;
 79 |   --m:
 80 |   	linear-gradient(red 50%, transparent 0)
 81 |   			0 0/ 4em 4em,
 82 |   	linear-gradient(90deg, red 50%, transparent 0)
 83 |   	calc(var(--p)*2em) 0/ 4em 4em;
 84 |   -webkit-mask-composite: xor;
 85 |   mask-composite: exclude;
 86 | }
 87 | .card:nth-child(5):before, .card:nth-child(5):after {
 88 |   background: radial-gradient(circle at calc(var(--p)*100%) 50%, transparent calc(0.5em - 1px), #4B384C 0, #4B384C calc(0.5em + 1px), transparent 0) 0 0/ 1em 1em;
 89 |   --m: linear-gradient(red 50%, transparent 50%)
 90 |   				0 calc(var(--p)*1em)/ 100% 2em;
 91 | }
 92 | .card:nth-child(6):before, .card:nth-child(6):after {
 93 |   --c0: hsla(0, 0%, 0%, var(--p));
 94 |   --c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
 95 |   background: linear-gradient(calc(var(--s)*45deg), transparent calc(50% - 1px), #4B384C 0, #4B384C calc(50% + 1px), transparent 0) 50%/ 0.75em 0.75em;
 96 |   --m: repeating-conic-gradient(var(--c0) 0%, var(--c0) 45deg, var(--c1) 0%, var(--c1) 90deg)
 97 |   ;
 98 | }
 99 | .card:nth-child(7):before, .card:nth-child(7):after {
100 |   --c0: hsla(0, 0%, 0%, var(--p));
101 |   --c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
102 |   background: linear-gradient(calc(var(--s)*45deg), transparent calc(50% - 1px), #4B384C 0, #4B384C calc(50% + 1px), transparent 0) 50%/ 1em 1em;
103 |   --m: repeating-conic-gradient(var(--c0) 0%, var(--c0) 22.5deg, var(--c1) 0%, var(--c1) 45deg)
104 |   ;
105 | }
106 | .card:nth-child(8):before, .card:nth-child(8):after {
107 |   --c0: hsla(0, 0%, 0%, var(--p));
108 |   --c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
109 |   background: linear-gradient(calc(var(--p)*90deg), #4B384C 1px, transparent 0, transparent calc(100% - 1px), #4B384C 0) 50% 50%/ 0.35355em 0.35355em;
110 |   --m:
111 |   		repeating-linear-gradient(45deg,
112 |   				red 0, red 2.5em,
113 |   				transparent 0, transparent 5em),
114 |   		repeating-linear-gradient(-45deg,
115 |   				var(--c0) 0, var(--c0) 2.5em,
116 |   				var(--c1) 0, var(--c1) 5em)
117 |   ;
118 | }
119 | .card:nth-child(9):before, .card:nth-child(9):after {
120 |   --c0: hsla(0, 0%, 0%, var(--p));
121 |   --c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
122 |   background: repeating-conic-gradient(from calc(var(--p)*6deg), #4B384C 0%, #4B384C 2deg, transparent 0%, transparent 12deg);
123 |   --m: repeating-radial-gradient(circle,
124 |   					var(--c0) 0, var(--c0) 2em,
125 |   					var(--c1) 0, var(--c1) 4em)
126 |   ;
127 | }
128 | .card:nth-child(10):before, .card:nth-child(10):after {
129 |   --c0: hsla(0, 0%, 0%, var(--p));
130 |   --c1: hsla(0, 0%, 0%, calc(1 - var(--p)));
131 |   background: linear-gradient(calc(var(--p)*90deg), #4B384C 1px, transparent 0, transparent calc(100% - 1px), #4B384C 0) 50% 50%/ 0.28284em 0.28284em;
132 |   --m:
133 |   	repeating-linear-gradient(45deg,
134 |   			red 0, red 2em,
135 |   			transparent 0, transparent 4em),
136 |   	repeating-linear-gradient(-45deg,
137 |   			var(--c0) 0, var(--c0) 2em,
138 |   			var(--c1) 0, var(--c1) 4em);
139 |   -webkit-mask-composite: xor;
140 |   mask-composite: exclude;
141 | }
142 | 
143 | img._9 {
144 |   background: radial-gradient(circle at right, rgba(233, 241, 223, 0) 0.3333333333em, #E9F1DF 0.3333333333em, #E9F1DF 0.4888888889em, rgba(233, 241, 223, 0) 0.4888888889em, rgba(233, 241, 223, 0) 0.8222222222em, #E9F1DF 0.8222222222em, #E9F1DF 0.9777777778em, rgba(233, 241, 223, 0) 0.9777777778em, rgba(233, 241, 223, 0) 1.3111111111em, #E9F1DF 1.3111111111em, #E9F1DF 1.4666666667em, rgba(233, 241, 223, 0) 1.4666666667em) 0 0, radial-gradient(circle at left, rgba(233, 241, 223, 0) 0.5777777778em, #E9F1DF 0.5777777778em, #E9F1DF 0.7333333333em, rgba(233, 241, 223, 0) 0.7333333333em, rgba(233, 241, 223, 0) 1.0666666667em, #E9F1DF 1.0666666667em, #E9F1DF 1.2222222222em, rgba(233, 241, 223, 0) 1.2222222222em) 0 3.0514619883em, linear-gradient(to right top, #E9F1DF 0.1555555556em, rgba(233, 241, 223, 0) 0.1555555556em) 1.2222222222em 0.1555555556em, linear-gradient(to left top, #E9F1DF 0.1555555556em, rgba(233, 241, 223, 0) 0.1555555556em) 1.2222222222em 0.1555555556em, linear-gradient(to right bottom, #E9F1DF 0.1555555556em, rgba(233, 241, 223, 0) 0.1555555556em) 1.2222222222em 0.1555555556em, linear-gradient(to left bottom, #E9F1DF 0.1555555556em, rgba(233, 241, 223, 0) 0.1555555556em) 1.2222222222em 0.1555555556em;
145 |   background-size: 2.8em 2.8em;
146 |   background-color: lightblue;
147 | }
148 | 
149 | img._8 {
150 |   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 93%, rgba(192, 204, 171, 0.5) 93%, rgba(192, 204, 171, 0.5) 100%), linear-gradient(90deg, rgba(232, 222, 103, 0.4) 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0)), linear-gradient(rgba(232, 222, 103, 0.4) 5%, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0) 90%, rgba(229, 113, 82, 0.2) 90%, rgba(229, 113, 82, 0.2) 100%), linear-gradient(rgba(255, 255, 255, 0) 35%, rgba(255, 239, 195, 0.4) 35%, rgba(255, 239, 195, 0.4) 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(232, 222, 103, 0.4) 55%, rgba(232, 222, 103, 0.4) 70%, rgba(255, 255, 255, 0) 70%), linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, rgba(255, 239, 195, 0.4) 35%, rgba(255, 239, 195, 0.4) 45%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 55%, rgba(232, 222, 103, 0.4) 55%, rgba(232, 222, 103, 0.4) 70%, rgba(255, 255, 255, 0) 70%), linear-gradient(rgba(255, 255, 255, 0) 55%, rgba(255, 239, 195, 0.4) 55%, rgba(255, 239, 195, 0.4) 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, rgba(255, 255, 255, 0) 55%, rgba(255, 239, 195, 0.4) 55%, rgba(255, 239, 195, 0.4) 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(rgba(255, 255, 255, 0) 20%, rgba(192, 204, 171, 0.5) 20%, rgba(192, 204, 171, 0.5) 80%, rgba(255, 255, 255, 0) 80%), linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(229, 113, 82, 0.2) 20%, rgba(229, 113, 82, 0.2) 80%, rgba(255, 255, 255, 0) 80%), linear-gradient(rgba(255, 255, 255, 0) 10%, rgba(232, 222, 103, 0.4) 10%, rgba(232, 222, 103, 0.4) 35%, rgba(255, 255, 255, 0) 35%), linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgba(232, 222, 103, 0.4) 10%, rgba(232, 222, 103, 0.4) 35%, rgba(255, 255, 255, 0) 35%);
151 |   background-size: 14em 14em;
152 |   background-color: #FFEFC3;
153 | }
154 | 
155 | img._1 {
156 |     background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.6) 0, rgba(192, 235, 250, 0.2) 2em), repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.4) 0, rgba(192, 235, 250, 0.1) 2em), #FFF;
157 |   background-blend-mode: multiply;
158 | }
159 | 
160 | img._7 {
161 |   --c : rgba(255,255,255,0.7);
162 |   --t : transparent;
163 |   	background-image:
164 |   repeating-linear-gradient(45deg, var(--t) 0, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 0),
165 |   repeating-linear-gradient(-45deg, var(--t) 0, var(--t) 32px, var(--c) 32px, var(--c) 44px, var(--t) 44px, var(--t) 56px, var(--c) 56px, var(--c) 68px, var(--t) 0),
166 |   linear-gradient(to bottom left, #FC354C, #0ABFBC);
167 | }
168 | 
169 | img._6 {
170 |     background: linear-gradient(45deg, #dde 12%, transparent 0, transparent 88%, #dde 0), linear-gradient(135deg, transparent 37%, #aab 0, #aab 63%, transparent 0), linear-gradient(45deg, transparent 37%, #dde 0, #dde 63%, transparent 0), #335;
171 |   background-size: 20px 20px;
172 | }
173 | 
174 | img._5 {
175 |     background: 
176 |   linear-gradient(135deg, black 25%, transparent 25%) -50px 0,
177 |   linear-gradient(225deg, black 25%, transparent 25%) -50px 0,
178 |   linear-gradient(315deg, black 25%, transparent 25%),
179 |   linear-gradient(45deg, black 25%, transparent 25%);	
180 |   background-size: 2em 2em;
181 |   background-color: #232323;
182 | }
183 | 
184 | img._4 {
185 |     background: radial-gradient(circle at center 0, #B1C2B3 6.5%, #778691 6.5%, #778691 13%, #C7B773 14.3%, #C7B773 19.5%, #E3DB9A 20.8%, #E3DB9A 26%, #F5FCD0 27.3%, #F5FCD0 32.5%, #B1C2B3 33.8%, #B1C2B3 39%, #778691 40.3%, #778691 45.5%, rgba(119, 134, 145, 0) 46.8%) 0 0, radial-gradient(circle at center 0, #B1C2B3 6.5%, #778691 6.5%, #778691 13%, #C7B773 14.3%, #C7B773 19.5%, #E3DB9A 20.8%, #E3DB9A 26%, #F5FCD0 27.3%, #F5FCD0 32.5%, #B1C2B3 33.8%, #B1C2B3 39%, #778691 40.3%, #778691 45.5%, rgba(119, 134, 145, 0) 46.8%) 1.5em 1.5em, radial-gradient(circle at center 3em, #B1C2B3 6.5%, #778691 6.5%, #778691 13%, #C7B773 14.3%, #C7B773 19.5%, #E3DB9A 20.8%, #E3DB9A 26%, #F5FCD0 27.3%, #F5FCD0 32.5%, #B1C2B3 33.8%, #B1C2B3 39%, #778691 40.3%, #778691 45.5%, rgba(119, 134, 145, 0) 46.8%) 0 0, radial-gradient(circle at center 3em, #B1C2B3 6.5%, #778691 6.5%, #778691 13%, #C7B773 14.3%, #C7B773 19.5%, #E3DB9A 20.8%, #E3DB9A 26%, #F5FCD0 27.3%, #F5FCD0 32.5%, #B1C2B3 33.8%, #B1C2B3 39%, #778691 40.3%, #778691 45.5%, rgba(119, 134, 145, 0) 46.8%) 1.5em 1.5em;
186 |   background-color: #C7B773;
187 |   background-size: 3em 3em;
188 | }
189 | 
190 | img._3 {
191 |   background: radial-gradient(circle at right, rgba(255, 255, 255, 0) 1.5em, #FCF2D7 1.5em, #FCF2D7 1.74em, rgba(255, 255, 255, 0) 1.74em) 0 0, radial-gradient(circle at left, rgba(255, 255, 255, 0) 1.5em, #FCF2D7 1.5em, #FCF2D7 1.74em, rgba(255, 255, 255, 0) 1.74em) 0 3.26em, radial-gradient(circle at right, rgba(255, 255, 255, 0) 1.5em, #FDC536 1.5em, #FDC536 1.74em, rgba(255, 255, 255, 0) 1.74em) 1.56em 0, radial-gradient(circle at left, rgba(255, 255, 255, 0) 1.5em, #FDC536 1.5em, #FDC536 1.74em, rgba(255, 255, 255, 0) 1.74em) 1.56em 3.26em, radial-gradient(circle at right, rgba(255, 255, 255, 0) 1.5em, #E65848 1.5em, #E65848 1.74em, rgba(255, 255, 255, 0) 1.74em) 3.12em 0, radial-gradient(circle at left, rgba(255, 255, 255, 0) 1.5em, #E65848 1.5em, #E65848 1.74em, rgba(255, 255, 255, 0) 1.74em) 3.12em 3.26em, radial-gradient(circle at right, rgba(255, 255, 255, 0) 1.5em, #2AB69D 1.5em, #2AB69D 1.74em, rgba(255, 255, 255, 0) 1.74em) 4.68em 0, radial-gradient(circle at left, rgba(255, 255, 255, 0) 1.5em, #2AB69D 1.5em, #2AB69D 1.74em, rgba(255, 255, 255, 0) 1.74em) 3.68em 3.26em;
192 |   background-size: 4em 4em;
193 |   background-color: #343844;
194 |   background-repeat: repeat;
195 | }
196 | 
197 | img._2 {
198 |   background-image:
199 |     radial-gradient(
200 |       circle at 45% 30%,
201 |       #f06d06,
202 |       yellow
203 |     );
204 |   background: radial-gradient(circle, #B3CCA2 0.75em, rgba(255, 255, 255, 0) 0.75em, rgba(255, 255, 255, 0) 1.5em, rgba(204, 195, 148, 0.7) 1.5em, rgba(204, 195, 148, 0.7) 1.8em, rgba(255, 255, 255, 0) 1.8em) 0 0, radial-gradient(circle, #CCC394 0.75em, rgba(255, 255, 255, 0) 0.75em, rgba(255, 255, 255, 0) 1.5em, rgba(179, 204, 162, 0.7) 1.5em, rgba(179, 204, 162, 0.7) 1.8em, rgba(255, 255, 255, 0) 1.8em) 3em 3em, radial-gradient(circle, rgba(179, 204, 162, 0.7) 0.375em, rgba(255, 255, 255, 0) 0.375em) 3em 0, radial-gradient(circle, rgba(204, 195, 148, 0.7) 0.3em, rgba(255, 255, 255, 0) 0.3em) 0 3em;
205 |   background-size: 6em 6em;
206 |   background-color: #F2DBA5;
207 |   background-repeat: repeat;
208 | }
209 | </style>
210 | </head>
211 | <body>
212 | <div class="card">
213 |   
214 |   <img src="https://cloudup.com/cU5jihphrUc+"></div>
215 | <div class="card">
216 |   
217 |   <img src="https://cloudup.com/cU5jihphrUc+"></div>
218 | <div class="card">
219 |   
220 |   <img src="https://cloudup.com/cU5jihphrUc+"></div>
221 | <div class="card">
222 |   
223 |   <img src="https://cloudup.com/cU5jihphrUc+"></div>
224 | <div class="card">
225 |   
226 |   <img src="https://cloudup.com/cU5jihphrUc+"></div>
227 | <div class="card">
228 |   
229 |   <img src="https://cloudup.com/cU5jihphrUc+"></div>
230 | <div class="card">
231 |   
232 |   <img src="https://cloudup.com/cU5jihphrUc+">
233 |   </div>
234 |   <img class="_1" src="https://cloudup.com/cU5jihphrUc+">
235 |   <img class="_2" src="https://cloudup.com/cU5jihphrUc+">
236 |   <img class="_3" src="https://cloudup.com/cU5jihphrUc+">
237 |   <img class="_4" src="https://cloudup.com/cU5jihphrUc+">
238 |   <img class="_5" src="https://cloudup.com/cU5jihphrUc+">
239 |   <img class="_6" src="https://cloudup.com/cU5jihphrUc+">
240 |   <img class="_7" src="https://cloudup.com/cU5jihphrUc+">
241 |   <img class="_8" src="https://cloudup.com/cU5jihphrUc+">
242 |   <img class="_9" src="https://cloudup.com/cU5jihphrUc+">
243 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
244 | 
245 | </script>
246 | </body>
247 | </html>


--------------------------------------------------------------------------------
/holy-mouse-ACA/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>JS Bin</title>
  7 | <style id="jsbin-css">
  8 | * {
  9 |   font-family: sans-serif;
 10 |   box-sizing: border-box;
 11 |   font-size: 18px;
 12 | }
 13 | 
 14 | html {
 15 |   background: white;
 16 | }
 17 | 
 18 | #controls {
 19 |   margin: 0 auto;
 20 |   width: 80%;
 21 |   border: 2px solid black;
 22 | }
 23 | 
 24 | textarea {
 25 |   width: 100%;
 26 |   min-height: 10vh;
 27 | }
 28 | 
 29 | button {
 30 |   background: black;
 31 |   color: white;
 32 |   border: 3px solid black;
 33 |   padding: 4px 16px;
 34 | }
 35 | 
 36 | canvas {
 37 |   display: block;
 38 |   background: hotpink;
 39 |   margin: 40px auto;
 40 |   max-width: 100%;
 41 | /*   border: 2px solid black; */
 42 | }
 43 | 
 44 | label {
 45 |   display: block;
 46 |   margin: 20px;
 47 | }
 48 | </style>
 49 | </head>
 50 | <body>
 51 | <canvas width="640" height="480"></canvas>
 52 |   <div id="controls">
 53 |     <label>Upper bound: <input type="number" id="bound" value="10"></label>
 54 |     <label>Random function:<br>
 55 |     <textarea placeholder="export default …">export default () => Math.random() * 10 | 0</textarea>
 56 |       </label>
 57 |     <label><button>
 58 |       Run
 59 |       </button></label>
 60 |   </div>
 61 | <!--boot js--><script id="jsbin-javascript" defer>// noprotect
 62 | console.clear();
 63 | 
 64 | document.querySelector('button').onclick = render;
 65 | 
 66 | const searchParams = new URLSearchParams(window.location.search);
 67 | const code = searchParams.get('code');
 68 | const bound = searchParams.get('bound');
 69 | 
 70 | document.querySelector('#bound').oninput = render;
 71 | 
 72 | if (code) {
 73 |   document.querySelector('textarea').value = code;
 74 | }
 75 | 
 76 | if (bound) {
 77 |   document.querySelector('#bound').value = bound;
 78 | }
 79 | 
 80 | if (code && bound) {
 81 |   render();
 82 | }
 83 | 
 84 | function render() {
 85 |   const code = document.querySelector('textarea').value;
 86 |   const bound = parseInt(document.querySelector('#bound').value, 10);
 87 |   searchParams.set('code', encodeURIComponent(code));
 88 |   searchParams.set('bound', bound);
 89 |   
 90 |   window.history.replaceState(null, null, `?${searchParams.toString()}`);
 91 |   
 92 |   const blob = new Blob([code], {
 93 |     type: 'text/javascript'
 94 |   });
 95 |   
 96 |   const url = code.startsWith('https://') ? code.trim() : URL.createObjectURL(blob);
 97 |   
 98 |   import(url).then(module => {
 99 |     const ctx = document.querySelector('canvas').getContext('2d');
100 | 
101 |     const w = ctx.canvas.width = 640;
102 |     const h = ctx.canvas.height = 480;
103 | 
104 |     const img = ctx.getImageData(0, 0, w, h);
105 | 
106 |     const r = module.default;
107 | 
108 |     for (let i = 0; i < w * h * 4; i += 4) {
109 |       const offset = r(bound);
110 |       img.data[i] = 255 - (offset / bound * 255);
111 |       img.data[i+1] = 255 - (offset / bound * 255);
112 |       img.data[i+2] = 255 - (offset / bound * 255);
113 |       img.data[i+3] = 255; // solid
114 |     }
115 | 
116 |     ctx.putImageData(img, 0, 0);
117 |   })
118 | }
119 | 
120 | 
121 | </script>
122 | </body>
123 | </html>


--------------------------------------------------------------------------------
/holy-silence-A3A/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | 
12 | canvas {
13 |   background: #ccc;
14 | }
15 | </style>
16 | </head>
17 | <body>
18 | <canvas></canvas>
19 |   <pre id="debug"></pre>
20 | <!--boot js--><script id="jsbin-javascript" defer>const c = document.querySelector('canvas');
21 | const debug = document.querySelector('#debug');
22 | const ctx = c.getContext('2d');
23 | const root = document.documentElement;
24 | root.ondragover = () => false;
25 | root.ondragend = () => false;
26 | 
27 | root.ondrop = async (e) => {
28 |   e.preventDefault();
29 |   e.stopPropagation();
30 |   const droppedFile = e.dataTransfer.files[0];
31 | 	const reader = new FileReader();
32 |   reader.onload = (event) => {
33 |     load(
34 |       new Uint8Array(event.target.result),
35 |       droppedFile,
36 |       e.dataTransfer.files
37 |     );
38 |   };
39 |   reader.readAsArrayBuffer(droppedFile);
40 | }
41 | 
42 | function load(bytes, file) {
43 |   const url = URL.createObjectURL(file);
44 |   const img = new Image();
45 |   img.onload = () => {
46 |     document.body.appendChild(img);
47 |     ctx.drawImage(img, 0, 0, 1, 1, 0, 0, 100, 100);
48 |     const imageData = ctx.getImageData(0, 0, c.width, c.height);
49 |  	   
50 |   	const [r,g,b,a] = imageData.data;
51 |     debug.textContent = `Pixel top left:
52 | 
53 | R ${r}
54 | G ${g}
55 | B ${b}
56 | A ${a}
57 | `
58 |   }
59 |   img.src = url;
60 | }
61 | </script>
62 | </body>
63 | </html>


--------------------------------------------------------------------------------
/icy-feather-C74/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | div {
 9 |   display: grid;
10 |   grid-template-columns: 2fr 1fr;
11 |   grid-template-areas: "a c"
12 |     "b c";
13 |   gap: 16px;
14 | }
15 | 
16 | p {
17 |   border: dashed 1px green;
18 | }
19 | 
20 | .title {
21 |   grid-area: a;
22 | }
23 | 
24 | .sub {
25 |   grid-area: b;
26 | }
27 | 
28 | .action {
29 |   grid-area: c;
30 |   display: flex;
31 |   flex-wrap: wrap;
32 |   align-content: center;
33 | }
34 | 
35 | </style>
36 | </head>
37 | <body>
38 | 	<div>
39 | 		<p class="title">title</p>
40 |     <p class="sub">sub</p>
41 |     <p class="action">action</p>
42 |   </div>
43 | <!--boot js--><script id="jsbin-javascript" defer>const css = `
44 | * {
45 |   font-family: sans-serif;
46 |   margin: 0;
47 | }
48 | 
49 | html {
50 |   display: flex;
51 |   flex-direction: column-reverse;
52 | }
53 | 
54 | head {
55 |   display: block;
56 | }
57 | 
58 | style {
59 |   margin: 20px;
60 |   padding: 20px;
61 |   display: block !important;
62 |   font-family: monospace;
63 |   position: relative;
64 |   white-space: pre;
65 |   border: 1px solid #666;
66 | }
67 | 
68 | style:before {
69 |   content: "css";
70 |   position: absolute;
71 |   right: 0;
72 |   top: 0;
73 | 	background: #666;
74 |   padding: 2px;
75 |   color: white;
76 | }
77 | 
78 | body {
79 |   padding: 20px;
80 | }
81 | `
82 | 
83 | const link = document.createElement('link');
84 | const file = new File([css], "show.css", {
85 |   type: "text/css",
86 | });
87 | const url = URL.createObjectURL(file);
88 | link.href = url;
89 | link.rel = 'stylesheet';
90 | document.head.append(link);
91 | </script>
92 | </body>
93 | </html>


--------------------------------------------------------------------------------
/icy-feather-C76/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | <a href="https://bavatuesdays.com/hello-world/">Linking to the pingback test page.</a>
15 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
16 | 
17 | </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/icy-paper-08E/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | 
12 | button {
13 |   font-size: 18px;
14 |   border: 0;
15 |   border-radius: 2px;
16 |   background: #1c9ff3;
17 |   padding: 8px 16px;
18 |   color: white;
19 | }
20 | </style>
21 | </head>
22 | <body>
23 | <button>
24 |   Press me
25 |   </button>
26 | <!--boot js--><script id="jsbin-javascript" defer>console.clear()
27 | document.querySelector('button').onclick = () => {
28 |   navigator.vibrate([100, 100, 100, 2000, 100]);
29 | }
30 | </script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/icy-rice-F00/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | 
12 | textarea {
13 |   overflow: visible;
14 | }
15 | </style>
16 | </head>
17 | <body>
18 | <textarea>Lorem ipsum</textarea>
19 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
20 | </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/images/remy-2014-twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/images/remy-2014-twitter.png


--------------------------------------------------------------------------------
/late-paper-8F4/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>JS Bin</title>
  7 | <style id="jsbin-css">
  8 | * {
  9 |   font-family: monospace;
 10 |   box-sizing: border-box;
 11 | }
 12 | 
 13 | html, body {
 14 |   height: 100%;
 15 |   padding: 0;
 16 |   margin: 0;
 17 | }
 18 | 
 19 | body {
 20 |   display: flex;
 21 |   flex-direction: column;
 22 |   font-size: 16px;
 23 | }
 24 | 
 25 | textarea {
 26 |   font-size: 16px;
 27 |   display: block;
 28 |   padding: 8px;
 29 |   border: 0;
 30 |   width: 100%;
 31 |   height: 33%;
 32 |   outline: 0;
 33 | }
 34 | 
 35 | #output {
 36 |   border-top: 2px solid #ccc;
 37 |   margin: 0;
 38 |   padding: 8px;
 39 |   max-width: 100%;
 40 |   overflow: scroll;
 41 |   position: relative;
 42 |   background: #efefff;
 43 |   flex-grow: 1;
 44 | }
 45 | 
 46 | #output:before {
 47 |   content: '[result]';
 48 |   font-size: 12px;
 49 |   position: absolute;
 50 |   top: 8px;
 51 |   right: 8px;
 52 | }
 53 | </style>
 54 | </head>
 55 | <body>
 56 | <textarea autofocus spellcheck="false" id="input"># this file is generated via https://github.com/docker-library/httpd/blob/b3146c0dc0d3831077a28df82348c5afed4d9ea7/generate-stackbrew-library.sh
 57 | 
 58 | Maintainers: Tianon Gravi <admwiggin@gmail.com> (@tianon),
 59 |              Joseph Ferguson <yosifkit@gmail.com> (@yosifkit)
 60 | GitRepo: https://github.com/docker-library/httpd.git
 61 | 
 62 | Tags: 2.4.46, 2.4, 2, latest
 63 | Architectures: amd64, arm32v5, arm32v7, arm64v8, i386, mips64le, ppc64le, s390x
 64 | GitCommit: 077141ee37fca63972292c562ec0f632d0f831b1
 65 | Directory: 2.4
 66 | 
 67 | Tags: 2.4.46-alpine, 2.4-alpine, 2-alpine, alpine
 68 | Architectures: amd64, arm32v6, arm32v7, arm64v8, i386, ppc64le, s390x
 69 | GitCommit: 5bc2d71c4c1949d98a2e8671eadc5043b6c0b7f4
 70 | Directory: 2.4/alpine
 71 | </textarea>
 72 | <pre id="output"></pre>
 73 | <!--boot js--><script id="jsbin-javascript" defer>const ta = document.querySelector('#input');
 74 | const out = document.querySelector('#output');
 75 | 
 76 | ta.oninput = run;
 77 | 
 78 | function run() {
 79 |   const res = tagExtract(ta.value);
 80 |   out.textContent = JSON.stringify(res, 0, 2);
 81 | }
 82 | 
 83 | run();
 84 | 
 85 | 
 86 | 
 87 | /**
 88 |  * @param {string} line
 89 |  * @param {string} key
 90 |  * @returns {string[]}
 91 |  */
 92 | function stripAndSplit(line, key) {
 93 |   if (!key) {
 94 |     throw new Error('requires key');
 95 |   }
 96 |   return line
 97 |     .replace(new RegExp(`^${key}: `), '')
 98 |     .split(',')
 99 |     .map((_) => _.trim())
100 |     .filter(Boolean);
101 | }
102 | 
103 | /**
104 |  * @typedef {object} DockerTag
105 |  * @property {string} repo
106 |  * @property {string[]} maintainers
107 |  * @property {Image[]} images
108 |  */
109 | 
110 | /**
111 |  * @typedef {object} Image
112 |  * @property {string[]} tags
113 |  * @property {string} Dockerfile
114 |  * @property {string[]} arch
115 |  */
116 | 
117 | /**
118 |  * @param {string} source
119 |  * @returns {DockerTag}
120 |  */
121 | function tagExtract(source) {
122 |   const s = source.split('\n').map((_) => _.trim());
123 | 
124 |   const images = [];
125 |   let image = null;
126 |   let maintainers = [];
127 |   let repo = '';
128 | 
129 |   do {
130 |     let line = s.shift();
131 | 
132 |     if (line.startsWith('#')) {
133 |       continue;
134 |     }
135 | 
136 |     if (line.startsWith('Maintainers:')) {
137 |       maintainers.push(
138 |         ...stripAndSplit(line, 'Maintainers').map((_) =>
139 |           _.replace(/\s<.*$/, '')
140 |         )
141 |       );
142 |       while ((line = s.shift().trim()) && !line.startsWith('GitRepo')) {
143 |         maintainers.push(
144 |           ...line.split(',').map((_) => _.trim().replace(/\s<.*$/, ''))
145 |         );
146 |       }
147 |       if (line.startsWith('GitRepo:')) {
148 |         repo = stripAndSplit(line, 'GitRepo')[0].replace(/\.git$/, '');
149 |       }
150 | 
151 |       do {
152 |         line = s.shift();
153 |       } while (line !== '');
154 |     }
155 | 
156 |     // start of section
157 |     if (line.startsWith('Tags:')) {
158 |       if (image) {
159 |         images.push(Object.assign({}, image));
160 |       }
161 |       image = {};
162 |       image.tags = stripAndSplit(line, 'Tags');
163 |     }
164 | 
165 |     if (line.startsWith('SharedTags:')) {
166 |       image.tags.push(...stripAndSplit(line, 'SharedTags'));
167 |     }
168 | 
169 |     if (line.startsWith('Architectures:')) {
170 |       image.arch = stripAndSplit(line, 'Architectures');
171 |     }
172 | 
173 |     if (line.startsWith('GitCommit:')) {
174 |       image.commit = stripAndSplit(line, 'GitCommit')[0];
175 |     }
176 | 
177 |     if (line.startsWith('Directory:')) {
178 |       image.dir = stripAndSplit(line, 'Directory')[0];
179 |     }
180 | 
181 |     if (line === '') {
182 |       if (image) {
183 |         image.Dockerfile = [repo, 'blob', image.commit, image.dir, 'Dockerfile']
184 |           .filter(Boolean)
185 |           .join('/');
186 |       }
187 |     }
188 |   } while (s.length);
189 |   
190 |   if (image) {
191 |     images.push(Object.assign({}, image));
192 |   }
193 | 
194 |   return {
195 |     images,
196 |     repo,
197 |     maintainers,
198 |   };
199 | }
200 | </script>
201 | </body>
202 | </html>


--------------------------------------------------------------------------------
/lingering-snow-053/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <script src="https://unpkg.com/memfetch@1.1.2/dist/index.js"></script>
  7 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"> </script>
  8 |   <script src="https://unpkg.com/turndown/dist/turndown.js"></script>
  9 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/2.0.0-alpha0/date_fns.min.js"></script>
 10 | 	<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.js"></script>
 11 |   <title>Markdown reviews</title>
 12 | <style id="jsbin-css">
 13 | * {
 14 |   font-family: 'ubuntu mono';
 15 | }
 16 | </style>
 17 | </head>
 18 | <body>
 19 | <div id="app">
 20 |   <section v-if="errored">
 21 |     <p>We're sorry, we're not able to retrieve this information at the moment, please try back later.</p>
 22 |     <p>
 23 |       Message: <strong>{{ error }}</strong>
 24 |     </p>
 25 |   </section>
 26 | 
 27 |   <section v-else>
 28 |     <div v-if="loading">Loading...</div>
 29 | 
 30 |     <pre
 31 |       v-else
 32 |       v-for="review in info">&lt;hr class="review-break"&gt;
 33 | &lt;img width="98" class="review-image" src="{{ review.book.image }}"&gt;
 34 | 
 35 | ##### **[{{ review.book.title }}]({{ review.book.url }}) by {{ review.book.author }}**
 36 | 
 37 | {{ review.rating | asRating }}
 38 | <div v-if="review.spoiler == 'true' && review.review">
 39 | &lt;details&gt;&lt;summary&gt;Spoiler&lt;/summary&gt;
 40 | 
 41 | {{ review.review | turndown | marked }}
 42 | &lt;/details&gt;
 43 | </div>
 44 | <div v-else-if="review.review">
 45 | {{ review.review | turndown }}
 46 | </div>
 47 | &lt;small class="reading-metadata"&gt;
 48 | Read: {{ review.read | formatDate }}<span v-if="review.duration != 'unknown'">&lt;br&gt;Read in: {{ review | duration }}</span><span v-if="review.book.pages">
 49 | &lt;br&gt;Pages: {{ review.book.pages }}
 50 | </span>&lt;/small&gt;
 51 |     </pre>
 52 |   </section>
 53 | </div>
 54 | <!--boot js--><script id="jsbin-javascript" defer>const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IkFDQnlCczFhYVl4IiwicGF0aCI6IiIsImlhdCI6MTU3NzkxMzQxMywiZXhwIjoxNTc3OTE3MDEzfQ.sH36X-ATlyosb9jkheul_ulQJ2i5631PjB4O_PSGUaY';
 55 | 
 56 | var turndownService = new TurndownService();
 57 | Vue.filter('turndown', function (value) {
 58 |   return turndownService.turndown(value).replace(/\\([->])/g, '$1');
 59 | });
 60 | 
 61 | function asRating(value) {
 62 |   return `<span aria-label="${ value } stars out of 5">${ '★'.repeat(value) }${ '☆'.repeat(5 - value)}</span>`
 63 | }
 64 | 
 65 | Vue.filter('marked', value => marked(value.replace(/\\([->])/g, '$1')));
 66 | 
 67 | Vue.filter('asRating', asRating);
 68 | 
 69 | const months = 'Jan Fed Mar Apr May Jun Jul Aug Sep Oct Nov Dec'.split(' ');
 70 | 
 71 | fetch.seed = 5;
 72 | 
 73 | Vue.filter('formatDate', function (value) {
 74 |   const d = new Date(value);
 75 |   return `${d.getDate()}-${months[d.getMonth()]} ${d.getFullYear()}`;
 76 | });
 77 | 
 78 | 
 79 | const app = new Vue({
 80 |   el: '#app',
 81 |   data () {
 82 |     return {
 83 |       loading: true,
 84 |       info: null,
 85 |       errored: false,
 86 |     }
 87 |   },
 88 |   filters: {
 89 |     duration(review) {
 90 |       return dateFns.distanceInWordsStrict(review.started, review.read);
 91 |       return 1;
 92 |       
 93 |     }
 94 |   },
 95 |   async mounted () {
 96 |     try {
 97 |       const res = await fetch('https://jsonbin.org/me/reads/2019', {
 98 | 		    headers: {'authorization': `Bearer ${token}`}
 99 | 		  });
100 | 
101 |       if (res.status !== 200) {
102 |         fetch.seed++;
103 |         throw new Error(res.status);
104 |       }
105 |       const json = await res.json();
106 |       this.info = json;
107 |       this.info.sort((a, b) => {
108 |         return a.read < b.read ? -1 : 1
109 |       });
110 |       this.loading = false;
111 |     } catch (e) {
112 |       console.log(e);
113 |       this.errored = true;
114 |       this.error = e.message;
115 |     }
116 |   }
117 | })
118 | </script>
119 | </body>
120 | </html>


--------------------------------------------------------------------------------
/little-lake-A80/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | 
 9 | /* 👇 ignore this lot - it's just for demo */
10 | 
11 | * {
12 |   font-family: sans-serif;
13 |   margin: 0;
14 | }
15 | 
16 | html {
17 |   display: flex;
18 |   flex-direction: column-reverse;
19 | }
20 | 
21 | head {
22 |   display: block;
23 | }
24 | 
25 | style {
26 |   margin: 20px;
27 |   padding: 20px;
28 |   display: block !important;
29 |   font-family: monospace;
30 |   position: relative;
31 |   white-space: pre;
32 |   border: 1px solid #666;
33 | }
34 | 
35 | style:before {
36 |   content: "css";
37 |   position: absolute;
38 |   right: 0;
39 |   top: 0;
40 | 	background: #666;
41 |   padding: 2px;
42 |   color: white;
43 | }
44 | 
45 | body {
46 |   padding: 20px;
47 | }
48 | 
49 | </style>
50 | </head>
51 | <body>
52 | 
53 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
54 | 
55 | </script>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/lucky-cell-240/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>JS Bin</title>
  7 | <style id="jsbin-css">
  8 | * {
  9 |   font-family: 'ubuntu mono', monospace;
 10 |   font-size: 18px;
 11 |   box-sizing: border-box;
 12 | }
 13 | 
 14 | textarea {
 15 |   display: block;
 16 |   width: 100%;
 17 |   min-width: 100%;
 18 |   max-width: 100%;
 19 | }
 20 | 
 21 | #output {
 22 |   max-height: 90vh;
 23 |   overflow: scroll;
 24 | }
 25 | 
 26 | #output div {
 27 |   white-space: pre;
 28 |   opacity: 0.4;
 29 |   padding: 0px 8px;
 30 |   border: 3px solid transparent;
 31 | }
 32 | 
 33 | #output div.selected {
 34 |   opacity: 1;
 35 |   border: 3px solid red;
 36 |   border-radius: 4px;
 37 | }
 38 | 
 39 | </style>
 40 | </head>
 41 | <body>
 42 | <textarea>1010010001010100    00000000   a454  r 00
 43 | 0000000111101000    10100100   01e8  r a4
 44 | 0000000111100111    01010100   01e7  r 54
 45 | 0000000111100110    01010100   01e6  r 54
 46 | 1111111111111100    00000000   fffc  r 00
 47 | 1111111111111101    10000000   fffd  r 80
 48 | 1000000000000000    10101001   8000  r a9
 49 | 1000000000000001    11111111   8001  r ff
 50 | 1000000000000010    10001101   8002  r 8d
 51 | 1000000000000011    00000010   8003  r 02
 52 | 1000000000000100    01100000   8004  r 60
 53 | 1000000000000101    10101001   8005  r a9
 54 | 1000000000000110    11100000   8006  r e0
 55 | 1000000000000111    10001101   8007  r 8d
 56 | 1000000000001000    00000011   8008  r 03
 57 | 1000000000001001    01100000   8009  r 60
 58 | 0110000000000011    11100000   6003  W e0
 59 | 1000000000001010    10101001   800a  r a9
 60 | 1000000000001011    00111000   800b  r 38
 61 | 1000000000001100    10001101   800c  r 8d
 62 | 1000000000001101    00000000   800d  r 00
 63 | 1000000000001110    01100000   800e  r 60
 64 | 0110000000000000    00111000   6000  W 38
 65 | 1000000000001111    10101001   800f  r a9
 66 | 1000000000010000    00000000   8010  r 00
 67 | 1000000000010001    10001101   8011  r 8d
 68 | 1000000000010010    00000001   8012  r 01
 69 | 1000000000010011    01100000   8013  r 60
 70 | 0110000000000001    00000000   6001  W 00
 71 | 1000000000010100    10101001   8014  r a9
 72 | 1000000000010101    10000000   8015  r 80
 73 | 1000000000010110    10001101   8016  r 8d
 74 | 1000000000010111    00000001   8017  r 01
 75 | 1000000000011000    01100000   8018  r 60
 76 | 0110000000000001    10000000   6001  W 80
 77 | 1000000000011001    10101001   8019  r a9
 78 | 1000000000011010    00000000   801a  r 00
 79 | 1000000000011011    10001101   801b  r 8d
 80 | 1000000000011100    00000001   801c  r 01
 81 | 1000000000011101    01100000   801d  r 60
 82 | 0110000000000001    00000000   6001  W 00
 83 | 1000000000011110    10101001   801e  r a9
 84 | 1000000000011111    00001110   801f  r 0e
 85 | 1000000000100000    10001101   8020  r 8d
 86 | 1000000000100001    00000000   8021  r 00
 87 | 1000000000100010    01100000   8022  r 60
 88 | 1000000000100100    00000000   8024  r 00
 89 | 1000000000100101    10001101   8025  r 8d
 90 | 1000000000100110    00000001   8026  r 01
 91 | 1000000000100111    01100000   8027  r 60
 92 | 0110000000000001    00011100   6001  W 1c
 93 | 1000000000101000    10101001   8028  r a9
 94 | 1000000000101001    10000000   8029  r 80
 95 | 1000000000101010    10001101   802a  r 8d
 96 | 1000000000101011    00000001   802b  r 01
 97 | 1000000000101100    01100000   802c  r 60
 98 | 0110000000000001    10000000   6001  W 80
 99 | 1000000000101101    10101001   802d  r a9
100 | 1000000000101110    00000000   802e  r 00
101 | 1000000000101111    10001101   802f  r 8d
102 | 1000000000110000    00000001   8030  r 01
103 | 1000000000110001    01100000   8031  r 60
104 | 0110000000000001    00000000   6001  W 00
105 | 1000000000110010    10101001   8032  r a9
106 | 1000000000110011    00000110   8033  r 06
107 | 1000000000110100    10001101   8034  r 8d
108 | 1000000000110101    00000000   8035  r 00
109 | 1000000000110110    01100000   8036  r 60
110 | 0110000000000000    00000110   6000  W 06
111 | 1000000000110111    10101001   8037  r a9
112 | 1000000000111000    00000000   8038  r 00
113 | 1000000000111001    10001101   8039  r 8d
114 | 1000000000111010    00000001   803a  r 01
115 | 1000000000111011    01100000   803b  r 60
116 | 0110000000000001    00000000   6001  W 00
117 | 1000000000111100    10101001   803c  r a9
118 | 1000000000111101    10000000   803d  r 80
119 | 1000000000111110    10001101   803e  r 8d
120 | 1000000000111111    00000001   803f  r 01
121 | 1000000001000000    01100000   8040  r 60
122 | 0110000000000001    10000000   6001  W 80
123 | 1000000001000001    10101001   8041  r a9
124 | 1000000001000010    00000000   8042  r 00
125 | 1000000001000011    10001101   8043  r 8d
126 | 1000000001000100    00000001   8044  r 01
127 | 1000000001000101    01100000   8045  r 60
128 | 0110000000000001    00000000   6001  W 00
129 | 1000000001000110    10101001   8046  r a9
130 | 1000000001000111    01001000   8047  r 48
131 | 1000000001001000    10001101   8048  r 8d
132 | 1000000001001001    00000000   8049  r 00
133 | 1000000001001010    01100000   804a  r 60
134 | 1000000001001100    00100000   804c  r 20
135 | 0000000111100101    01001000   01e5  W 48
136 | 1000000001001100    00100000   804c  r 20
137 | 1000000001001101    10001101   804d  r 8d
138 | 1000000001001110    00000001   804e  r 01
139 | 1000000001001110    00000001   804e  r 01
140 | 0000000111100100    10000000   01e4  W 80
141 | 0000000110001101    11000000   018d  r c0
142 | 0000000110001110    01010001   018e  r 51
143 | 0000000110001111    00100000   018f  r 20
144 | 0000000110010000    00001000   0190  r 08
145 | 0000000110010001    10101000   0191  r a8
146 | 0000000110010001    10101000   0191  r a8
147 | 0000000111100010    00000001   01e2  W 01
148 | 1010100000001000    00000000   a808  r 00
149 | 1010100000001001    00000000   a809  r 00
150 | 0000000111011111    00001010   01df  W 0a
151 | 1111111111111111    00000000   ffff  r 00
152 | 1111111111111111    00000000   ffff  r 00
153 | 1111111111111111    00000000   ffff  r 00
154 | 1111111111111111    00000000   ffff  W 00
155 | 1010100000001010    00000000   a80a  r 00
156 | 1010100000001011    00000000   a80b  r 00
157 | 0000000111011111    00001100   01df  W 0c
158 | 0000000111011110    00000000   01de  W 00
159 | 1111111111111111    00000000   ffff  r 00
160 | 1010100000001100    00000000   a80c  r 00
161 | 1010100000001101    00000000   a80d  r 00
162 | 0000000111011111    00001110   01df  W 0e
163 | 0000000111011110    00000000   01de  W 00
164 | 1111111111111111    00000000   ffff  r 00
165 | 1010100000001110    00000000   a80e  r 00
166 | 1010100000001111    00000000   a80f  r 00
167 | 0000000111011111    00010000   01df  W 10
168 | </textarea>
169 |   
170 |   <div id="output">
171 |     
172 |   </div>
173 | <!--boot js--><script id="jsbin-javascript" defer>const $ = s => document.querySelector(s);
174 | 
175 | const input = $('textarea');
176 | const output = $('#output');
177 | let lines = [];
178 | let i = 0;
179 | 
180 | input.onchange = () => {
181 |   const eachLine = input.value.split('\n').filter(Boolean);
182 |   output.innerHTML = eachLine.map(_ => `<div>${_}</div>`).join('\n');
183 |   lines = Array.from(output.querySelectorAll('div'));
184 | }
185 | 
186 | function deselect() {
187 |   const line = lines.find((_, j) => {
188 |   	return i === j
189 |   });
190 | 
191 |   if (line) {
192 |     line.classList.remove('selected');
193 |   }
194 | }
195 | 
196 | function select() {
197 |   const line = lines.find((_, j) => {
198 |   	return i === j
199 |   });
200 | 
201 |   if (line) {
202 |     line.classList.add('selected');
203 |     if (line.scrollIntoViewIfNeeded) {
204 |       line.scrollIntoViewIfNeeded();
205 |     } else {
206 |     	line.scrollIntoView();
207 |     }
208 |   }
209 | }
210 | 
211 | input.onchange()
212 | 
213 | document.documentElement.addEventListener('keydown', e => {
214 |   if (e.key == 'ArrowDown' || e.key === 'ArrowUp') {
215 |     deselect();
216 |     i += e.key === 'ArrowDown' ? 1 : -1;
217 |     if (i < 0) i = 0;
218 |     if (i >= lines.length) i = lines.length - 1;
219 |     const selected = select();
220 |     e.preventDefault();
221 |   }
222 | })
223 | 
224 | select();
225 | </script>
226 | </body>
227 | </html>


--------------------------------------------------------------------------------
/marbles2/empty.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/empty.gif


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os-bold.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os-bold.eot


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os-bold.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os-bold.otf


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os-bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os-bold.ttf


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os-bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os-bold.woff


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os-large.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os-large.eot


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os-large.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os-large.otf


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os-large.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os-large.ttf


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os-large.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os-large.woff


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os.eot


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os.otf


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os.ttf


--------------------------------------------------------------------------------
/marbles2/fonts/palm-os.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/fonts/palm-os.woff


--------------------------------------------------------------------------------
/marbles2/four.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/four.gif


--------------------------------------------------------------------------------
/marbles2/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>Palm Portlet</title>
  7 | <style id="jsbin-css">
  8 | /* @font-face {
  9 | 	font-family: 'palm-os-bold';
 10 | 	src: local('☺'), url('fonts/palm-os-bold.woff') format('woff');
 11 | 	font-weight: normal;
 12 | 	font-style: normal;
 13 | }
 14 | 
 15 | @font-face {
 16 | 	font-family: 'palm-os-large';
 17 | 	src: local('☺'), url('fonts/palm-os-large.woff') format('woff');
 18 | 	font-weight: normal;
 19 | 	font-style: normal;
 20 | } */
 21 | 
 22 | @font-face {
 23 | 	font-family: 'palm-os';
 24 | 	src: local('☺'), url('fonts/palm-os.woff') format('woff');
 25 | 	font-weight: normal;
 26 | 	font-style: normal;
 27 | }
 28 | 
 29 | 
 30 |   body, html {
 31 |     font-family: 'palm-os';
 32 |     font-size: 11px;
 33 |     margin: 0;
 34 |     padding: 0;
 35 |   }
 36 | 
 37 | * {
 38 |   background: #7b8b5c;
 39 |   font-family: 'palm-os';
 40 | }
 41 | 
 42 | img {
 43 |   display: none;
 44 |   image-rendering: pixelated;
 45 | }
 46 | 
 47 | canvas {
 48 |   image-rendering: pixelated;
 49 |   display: block;
 50 |   border: 0px solid black;
 51 |   margin: 0 auto;
 52 |   width: 100%;
 53 |   object-fit: contain;
 54 | }
 55 | 
 56 | #grid {
 57 |   background: #7b8b5c;
 58 |   /* display: none; */
 59 | }
 60 | 
 61 | #text {
 62 |   position: absolute;
 63 |   background: none;
 64 |   top: 0;
 65 |   /* background: red; */
 66 | }
 67 | 
 68 | pre {
 69 |   /* margin-top: 42vh; */
 70 |   font-size: 24px;
 71 |   display: block;
 72 |   /* z-index: -1; */
 73 |   user-select: none !important;
 74 | }
 75 | 
 76 | [hidden] {
 77 |   /* display: none; */
 78 | }
 79 | 
 80 | html, body {
 81 |   height: 100%;
 82 | }
 83 | 
 84 | body {
 85 |   display: flex;
 86 |   justify-content: space-around;
 87 |   align-items: center;
 88 |   height: 100%;
 89 |   flex-direction: column;
 90 | }
 91 | 
 92 | #text {
 93 |   pointer-events: none;
 94 |   position: absolute;
 95 | }
 96 | </style>
 97 | </head>
 98 | <body>
 99 | <canvas id="grid"></canvas>
100 | <canvas id="text"></canvas>
101 |   <img id="one" src="data:image/gif;base64,R0lGODlhDwAPAKIAAFJaPAgICGt6THuLXENLMwAAAAAAAAAAACH5BAAAAAAALAAAAAAPAA8AAAM5GLrcASLKKYCqIOst7gbE1wVYRgyhNpbngKoe6M7pKs80FLe5Tmq8lK8kEw4/xuNHpIBQKBaHVJEAADs=">
102 |   <img id="two" src="data:image/gif;base64,R0lGODlhDwAPAKIAADpCKggICGt6THuLXFJaPAAAAAAAAAAAACH5BAAAAAAALAAAAAAPAA8AAAM1GLrcQSLKKYgSIOsNxOUD5wWYFobaWAIom37uhqox2MFtNsN1S5u1G8m2+XGKCgiFYnE4FQkAOw==">
103 |   <img id="three" src="data:image/gif;base64,R0lGODlhDwAPAJEAAAgICGt6TFJaPAAAACH5BAAAAAAALAAAAAAPAA8AAAIihI8JEu0fhAkqUXDr3JpnfX1V2HklxnVkuaopaDAQJJ1IAQA7">
104 |   <img id="four" src="data:image/gif;base64,R0lGODlhDwAPAJEAAHuLXAgICGt6TFJaPCH5BAAAAAAALAAAAAAPAA8AAAInjI8ZI+0vhhGg2gvExFwHyl0eGFZjaZ1otq0q+pZxOHcGA0GSwhsFADs=">
105 |   <img id="empty" src="data:image/gif;base64,R0lGODlhDwAPAIAAAHuLXAAAACH5BAAAAAAALAAAAAAPAA8AAAINhI+py+0Po5y02otnAQA7">
106 |   <img id="mask" src="data:image/gif;base64,R0lGODlhDwAPAIABAHuLXP///yH5BAEAAAEALAAAAAAPAA8AAAISRIynyesNn4x02oqvznz7Dn4FADs=">
107 |   <pre hidden>…</pre>
108 | <script>
109 | const ctx = document.querySelector('#grid').getContext('2d', { alpha: false});
110 | const ctxText = document.querySelector('#text').getContext('2d', { alpha: true});
111 | const size = 16;
112 | const marbleCount = 4;
113 | const length = 10;
114 | const grid = Array.from({ length: length * length });
115 | 
116 | const scale = ctx.canvas.offsetWidth / 160;
117 | 
118 | 
119 | const marbles = [];
120 | const EMPTY = 16;
121 | const MASK = 32;
122 | const gameState = {
123 |   blocked: false,
124 |   running: false,
125 |   score: 0,
126 |   level: 0,
127 |   tagged: [],
128 |   seed: '00000001',
129 | };
130 | let last = null;
131 | ctxText.canvas.width = ctxText.canvas.height = ctx.canvas.width = ctx.canvas.height = 160;
132 | ctxText.imageSmoothingEnabled = false;
133 | ctx.imageSmoothingEnabled = false;
134 | ctx.fillStyle = '#7b8b5c';
135 | ctx.fillRect(0, 0, 160, 160);
136 | 
137 | 
138 | function genMarble(name) {
139 |   const img = document.querySelector('#' + name);
140 |   const ctx = document.createElement('canvas').getContext('2d', { antialias: false});
141 |   ctx.canvas.width = ctx.canvas.height = size;
142 |   ctx.imageSmoothingEnabled = false;
143 |   ctx.drawImage(img, 1, 1);
144 |   return ctx;
145 | }
146 | 
147 | function mask({ x, y, i = null }) {
148 |   if (i === null) i = coordsToIndex({ x, y });
149 | 
150 |   if (i === -1) return;
151 | 
152 |   grid[i] ^= MASK; // bit flip
153 | 
154 |   draw({ x, y });
155 | }
156 | 
157 | function randomMarble() {
158 |   return (Math.random() * marbleCount) | 0;
159 | }
160 | 
161 | function getCoords(event) {
162 |   var totalOffsetX = 0;
163 |   var totalOffsetY = 0;
164 |   var canvasX = 0;
165 |   var canvasY = 0;
166 |   var currentElement = event.target;
167 | 
168 |   do {
169 |     totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
170 |     totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
171 |   } while ((currentElement = currentElement.offsetParent));
172 | 
173 |   canvasX = event.pageX - totalOffsetX;
174 |   canvasY = event.pageY - totalOffsetY;
175 |   return { x: (canvasX / scale) | 0, y: (canvasY / scale) | 0 };
176 | }
177 | 
178 | function log(args) {
179 |   document.querySelector('pre').innerHTML = args
180 | }
181 | 
182 | function coordsToIndex({ x, y }) {
183 |   const index = y * length + x;
184 | 
185 |   const edge = length - 1;
186 | 
187 |   if (x < 0 || x > edge) return -1;
188 |   if (y < 0 || y > edge) return -1;
189 | 
190 |   return index;
191 | }
192 | 
193 | function indexToCoords({ i }) {
194 |   const x = i % length;
195 |   const y = (i / length) | 0;
196 |   return { x, y };
197 | }
198 | 
199 | function handleClick(event) {
200 |   if (gameState.blocked) return;
201 | 
202 |   let { x, y } = getCoords(event);
203 |   x = (x / size) | 0;
204 |   y = (y / size) | 0;
205 | 
206 |   const i = coordsToIndex({ x, y });
207 |   const match = grid[i];
208 | 
209 |   if (gameState.tagged.length && !gameState.tagged.includes(i)) {
210 |     // un-tag
211 |     toggleTaggedTo(MASK, true);
212 |   }
213 | 
214 |   gameState.blocked = true;
215 |   if (match & MASK) {
216 |     gameState.score += gameState.tagged.length * (5 + gameState.tagged.length);
217 |     toggleTaggedTo(EMPTY, true);
218 |     fall();
219 |   } else {
220 |     gameState.tagged = tag({ x, y, match, expect: 0, bit: MASK });
221 |     // count tagged
222 |     if (gameState.tagged.length <= 1) {
223 |       gameState.tagged = [];
224 |     } else {
225 |       toggleTaggedTo(MASK);
226 |       frame('Possible: ' + gameState.tagged.length * (5 + gameState.tagged.length));
227 |     }
228 |   }
229 | 
230 |   gameState.blocked = false;
231 | 
232 |   log({
233 |     // tagged: gameState.tagged.length,
234 |     potential: gameState.tagged.length * (5 + gameState.tagged.length),
235 |     score: gameState.score,
236 |     canMove: canMove(),
237 |   });
238 | 
239 |   log('Possible: ' + gameState.tagged.length * (5 + gameState.tagged.length));
240 | }
241 | 
242 | const sleep = n => new Promise(resolve => setTimeout(resolve, n));
243 | 
244 | function hasWon() {
245 |   return !!(grid[coordsToIndex({ x: 0, y: length - 1 })] & EMPTY);
246 | }
247 | 
248 | // ctxText.translate(0.5, 0.5);
249 | function frame(text) {
250 |   return
251 |   ctxText.clearRect(0, 0, 160, 160);
252 |   ctxText.font = '16px "palm-os"';
253 |   const width = ctxText.measureText(text).width;
254 |   const x = ctxText.canvas.width - (width + 10);
255 |   const y = 24;
256 |   ctxText.fillStyle = '#7b8b5c';
257 |   ctxText.fillRect(x - 2, y - 11, width + 2, 14);
258 |   ctxText.strokeStyle =  ctxText.fillStyle = '#000';
259 |   ctxText.fillText(text, x, y);
260 |   ctxText.beginPath();
261 |   ctxText.moveTo(x - 2, .5 + y - 11);
262 |   ctxText.lineTo(x + width, .5 + y - 11);
263 |   ctxText.moveTo(x - 2, .5 + y - 11 + 14);
264 |   ctxText.lineTo(x + width + 1, .5 + y - 11 + 14);
265 | 
266 | 
267 |   ctxText.moveTo(x - 2, .5 + y - 10);
268 |   ctxText.lineTo(x -2, .5 + y - 11 + 14);
269 |   ctxText.closePath();
270 |   ctxText.stroke();
271 | }
272 | 
273 | function canMove() {
274 |   if (hasWon()) return false;
275 | 
276 |   const edge = length - 1;
277 | 
278 |   for (let x = 0; x < length; x++) {
279 |     for (let y = edge; y >= 0; y--) {
280 |       let i = coordsToIndex({ x, y });
281 |       const test = grid[i];
282 | 
283 |       if (test & EMPTY) {
284 |         continue;
285 |       }
286 | 
287 |       if (test === grid[coordsToIndex({ x: x - 1, y })]) {
288 |         return true;
289 |       }
290 |       if (test === grid[coordsToIndex({ x: x + 1, y })]) {
291 |         return true;
292 |       }
293 |       if (test === grid[coordsToIndex({ x: x, y: y - 1 })]) {
294 |         return true;
295 |       }
296 |       if (test === grid[coordsToIndex({ x: x, y: y + 1 })]) {
297 |         return true;
298 |       }
299 |     }
300 |   }
301 | 
302 |   return false;
303 | }
304 | 
305 | function toggleTaggedTo(bit, clear = false) {
306 |   gameState.tagged.forEach(i => {
307 |     toggle({ i, bit });
308 |   });
309 | 
310 |   if (clear) {
311 |     gameState.tagged = [];
312 |   }
313 | }
314 | 
315 | async function fall() {
316 |   const edge = length - 1;
317 |   for (var x = 0; x < length; x++) {
318 |     for (var y = edge; y >= 0; y--) {
319 |       let i = coordsToIndex({ x, y });
320 |       if (grid[i] & EMPTY) {
321 |         if (await clearColumn({ x, y, i })) {
322 |           y++; // go back and check the starting block
323 |         }
324 |       }
325 |     }
326 |   }
327 | 
328 |   // now go through the columns, and if there's any that stand empty, we need
329 |   // to shift the entire column to the left
330 |   for (var x = 0; x < length; x++) {
331 |     let i = coordsToIndex({ x, y: edge });
332 |     if (grid[i] & EMPTY) {
333 |       if (await shiftColumn({ x, y: edge, i, speed: 10 })) {
334 |         x -= 2; // go back and check the starting block
335 |       }
336 |     }
337 |   }
338 | }
339 | 
340 | async function shiftColumn({ x, y, i, speed }) {
341 |   const edge = length - 1;
342 |   const coords = { x, y };
343 |   let swapped = false;
344 | 
345 |   do {
346 |     i = coordsToIndex(coords);
347 |     const target = i + 1; // always to the right
348 |     coords.y--; // on the next iteration, go up one
349 | 
350 |     // if we hit the edge, stop searching
351 |     if (i === -1 || coords.x === edge) {
352 |       break;
353 |     }
354 | 
355 |     // if the block to the right is empty, do nothing
356 |     if (grid[target] & EMPTY) {
357 |       continue;
358 |     }
359 | 
360 |     // swap the block, draw and update
361 |     swapped = true;
362 |     const tmp = grid[i];
363 |     grid[i] = grid[target];
364 |     grid[target] = tmp;
365 |     draw(indexToCoords({ i }));
366 |     draw(indexToCoords({ i: target }));
367 |     await sleep(speed); // creates semblance of animation
368 |   } while (true);
369 | 
370 |   return swapped;
371 | }
372 | 
373 | async function clearColumn({ i, x, y, speed = 10 }) {
374 |   let swapped = false;
375 |   const coords = { x, y };
376 |   do {
377 |     coords.y--;
378 |     const target = coordsToIndex(coords);
379 | 
380 |     // if we hit the edge, stop searching
381 |     if (target === -1) {
382 |       break;
383 |     }
384 | 
385 |     // if we find an empty block, skip upwards
386 |     if (grid[target] & EMPTY) {
387 |       i = target;
388 |       continue;
389 |     }
390 | 
391 |     // swap the block, draw and update
392 |     swapped = true;
393 |     const tmp = grid[i];
394 |     grid[i] = grid[target];
395 |     grid[target] = tmp;
396 |     draw(indexToCoords({ i }));
397 |     draw(indexToCoords({ i: target }));
398 |     await sleep(speed); // creates semblance of animation
399 |     i = target;
400 |   } while (true);
401 | 
402 |   return swapped;
403 | }
404 | 
405 | function toggle({ i, bit }) {
406 |   grid[i] ^= bit;
407 |   const { x, y } = indexToCoords({ i });
408 |   draw({ x, y });
409 | }
410 | 
411 | function tag({ x, y, match, res = [] }) {
412 |   const i = coordsToIndex({ x, y });
413 |   if (!i) return;
414 | 
415 |   if (grid[i] === match && !res.includes(i)) {
416 |     res.push(i);
417 | 
418 |     tag({ res, match, x: x - 1, y }); // left
419 |     tag({ res, match, x: x + 1, y }); // right
420 |     tag({ res, match, x: x, y: y - 1 }); // up
421 |     tag({ res, match, x: x, y: y + 1 }); // down
422 |   }
423 | 
424 |   return res;
425 | }
426 | 
427 | function draw({ x, y }) {
428 |   const i = coordsToIndex({ x, y });
429 |   const state = grid[i];
430 |   if (state & EMPTY) {
431 |     ctx.drawImage(marbles[EMPTY].canvas, x * size, y * size);
432 |   } else {
433 |     const marble = state & 0x0f;
434 |     ctx.drawImage(marbles[marble].canvas, x * size, y * size);
435 | 
436 |     if (state & MASK) {
437 |       ctx.drawImage(marbles[MASK].canvas, x * size, y * size);
438 |     }
439 |   }
440 | }
441 | 
442 | function drawGrid() {
443 |   for (var x = 0; x < length; x++) {
444 |     for (var y = 0; y < length; y++) {
445 |       draw({ x, y });
446 |     }
447 |   }
448 | }
449 | 
450 | function newGame() {
451 |   gameState.running = true;
452 |   gameState.score = 0;
453 |   gameState.tagged = [];
454 |   gameState.level = 1;
455 | 
456 |   for (var i = 0; i < grid.length; i++) {
457 |     grid[i] = 1 << randomMarble();
458 |   }
459 | 
460 |   drawGrid();
461 | }
462 | 
463 | function main() {
464 |   Object.assign(marbles, {
465 |     1: genMarble('one'),
466 |     2: genMarble('two'),
467 |     4: genMarble('three'),
468 |     8: genMarble('four'),
469 |     [EMPTY]: genMarble('empty'),
470 |     [MASK]: genMarble('mask'),
471 |   });
472 | 
473 |   ctx.canvas.onmousedown = handleClick;
474 | 
475 |   newGame();
476 | 
477 | }
478 | window.onload = () => frame('Possible: 329');
479 | 
480 | // window.onload = main;
481 | main();
482 | 
483 | navigator.serviceWorker.register('sw.js');
484 | 
485 | </script>
486 | </body>
487 | </html>
488 | 


--------------------------------------------------------------------------------
/marbles2/mask.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/mask.gif


--------------------------------------------------------------------------------
/marbles2/one.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/one.gif


--------------------------------------------------------------------------------
/marbles2/sw.js:
--------------------------------------------------------------------------------
 1 | // we'll version our cache (and learn how to delete caches in
 2 | // some other post)
 3 | const cacheName = 'vC';
 4 | 
 5 | self.addEventListener('install', e => {
 6 |   // once the SW is installed, go ahead and fetch the resources
 7 |   // to make this work offline
 8 |   e.waitUntil(
 9 |     caches.open(cacheName).then(cache => {
10 |       return cache
11 |         .addAll(['', 'fonts/palm-os.woff'])
12 |         .then(() => self.skipWaiting());
13 |     })
14 |   );
15 | });
16 | 
17 | self.addEventListener('activate', event => {
18 |   event.waitUntil(
19 |     caches
20 |       .keys()
21 |       .then(names =>
22 |         Promise.all(
23 |           names
24 |             .filter(name => name !== cacheName)
25 |             .map(cache => caches.delete(cache))
26 |         )
27 |       )
28 |   );
29 | });
30 | // when the browser fetches a url, either response with
31 | // the cached object or go ahead and fetch the actual url
32 | self.addEventListener('fetch', event => {
33 |   event.respondWith(
34 |     // ensure we check the *right* cache to match against
35 |     caches.open(cacheName).then(cache => {
36 |       return cache.match(event.request).then(res => {
37 |         return res || fetch(event.request);
38 |       });
39 |     })
40 |   );
41 | });
42 | 


--------------------------------------------------------------------------------
/marbles2/three.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/three.gif


--------------------------------------------------------------------------------
/marbles2/two.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/remy/bins/a6b80ea2a34b99c2d38d568a378d3e965ee3b46b/marbles2/two.gif


--------------------------------------------------------------------------------
/morning-boat-FED/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>Max Böck's feeds</title>
  7 | <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
  8 | <style id="jsbin-css">
  9 | * {
 10 |   font-family: sans-serif;
 11 | }
 12 | 
 13 | li {
 14 |   margin: 20px 0;
 15 | }
 16 | </style>
 17 | </head>
 18 | <body>
 19 |   <div id="app">
 20 |     <ul>
 21 |       <li v-for="item in feeds">
 22 |       	<a target="_blank" :href="'https://twitter.com/' + item.twitter">{{item.title}}</a> <a :href="item.url">{{ item.url }}</a><br>
 23 |         {{ item.description }}
 24 |       </li>
 25 |     </ul>
 26 |   </div>
 27 | <script>const feeds = [
 28 |     {
 29 |         "title": "Manuel Matuzović",
 30 |         "url": "https://www.matuzo.at",
 31 |         "description": "Manuel is a developer, consultant, speaker and friend from Vienna who specializes in HTML, CSS and accessibility.",
 32 |         "twitter": "mmatuzo"
 33 |     },
 34 |     {
 35 |         "title": "Charlie Owen",
 36 |         "url": "https://www.sonniesedge.net",
 37 |         "description": "Charlie is a front-end developer and speaker based in Berlin. She is best known for her work with Springer Nature and offending tech-bros on twitter.",
 38 |         "twitter": "sonniesedge"
 39 |     },
 40 |     {
 41 |         "title": "Matthias Ott",
 42 |         "url": "https://matthiasott.com",
 43 |         "description": "Matthias is an UI designer and engineer based in Stuttgart. He teaches prototyping and writes about Front-End, Design and the IndieWeb.",
 44 |         "twitter": "m_ott"
 45 |     },
 46 |     {
 47 |         "title": "Ethan Marcotte",
 48 |         "url": "https://ethanmarcotte.com",
 49 |         "description": "Ethan wrote the book on responsive web design, but he's also a gifted blogger. His posts cover web culture, technology and life in general.",
 50 |         "twitter": "beep"
 51 |     },
 52 |     {
 53 |         "title": "Tobias Ahlin",
 54 |         "url": "https://tobiasahlin.com",
 55 |         "description": "Tobias is a designer, developer and teacher from Stockholm. He's worked for Spotify, Github and Minecraft and has a lot of interesting posts about CSS.",
 56 |         "twitter": "tobiasahlin"
 57 |     },
 58 |     {
 59 |         "title": "Michael Scharnagl",
 60 |         "url": "https://justmarkup.com",
 61 |         "description": "Michael is a front-end developer from Germany. His work is focused on accessibility, progressive enhancement and web performance.",
 62 |         "twitter": "justmarkup"
 63 |     },
 64 |     {
 65 |         "title": "Sarah Drasner",
 66 |         "url": "https://sarah.dev",
 67 |         "description": "Sarah really needs no introduction. She's an expert on SVG, core team member of Vue, award winning speaker and staff writer on CSS-Tricks.",
 68 |         "twitter": "sarah_edo"
 69 |     },
 70 |     {
 71 |         "title": "Heydon Pickering",
 72 |         "url": "http://www.heydonworks.com",
 73 |         "description": "Heydon is a designer and accessibility consultant based in the UK. He wrote 'Inclusive Design', edits for Smashing Magazine and is an excellent speaker on all things a11y.",
 74 |         "twitter": "heydonworks"
 75 |     },
 76 |     {
 77 |         "title": "Oliver Schöndorfer",
 78 |         "url": "https://www.zeichenschatz.net",
 79 |         "description": "Oliver loves good typography. He's part of a two-person design studio in Vienna and is a talented writer and speaker. He has some very interesting posts about web fonts.",
 80 |         "twitter": "glyphe"
 81 |     },
 82 |     {
 83 |         "title": "Lisi Linhart",
 84 |         "url": "https://lisilinhart.info",
 85 |         "description": "Lisi is a creative developer from Salzburg, blogging about CSS, JavaScript and Interface Design. She's an expert in the field of Web Animation and a lecturer for multimedia technology.",
 86 |         "twitter": "lisi_linhart"
 87 |     },
 88 |     {
 89 |         "title": "Marcus Herrmann",
 90 |         "url": "https://marcus.io",
 91 |         "description": "Marcus is a freelance web developer from Berlin. His blog covers accessibility techniques for modern JavaScript apps, progressive enhancement and the IndieWeb.",
 92 |         "twitter": "_marcusherrmann"
 93 |     },
 94 |     {
 95 |         "title": "Cathy Dutton",
 96 |         "url": "https://cathydutton.co.uk",
 97 |         "description": "Cathy is a designer from Cheshire in the UK. She designs and builds inclusive services focusing on usability, accessibility and information architecture.",
 98 |         "twitter": "cathy_dutton"
 99 |     },
100 |     {
101 |         "title": "Jeremy Wagner",
102 |         "url": "https://jeremy.codes",
103 |         "description": "Jeremy is a web developer, writer and speaker from Minnesota. His blog is an excellent resource on web performance techniques, as well as general best practices for development.",
104 |         "twitter": "malchata"
105 |     },
106 |     {
107 |         "title": "Zach Leatherman",
108 |         "url": "https://www.zachleat.com",
109 |         "description": "Zach is a web developer working with Filament Group. He's currently fixated on web fonts and making the static site generator Eleventy. His blog has interesting posts about a lot of different topics.",
110 |         "twitter": "zachleat"
111 |     },
112 |     {
113 |         "title": "Sara Soueidan",
114 |         "url": "https://www.sarasoueidan.com",
115 |         "description": "Sara is a developer who specializes in responsive web design, CSS, progressive enhancement, SVG and accessibility. She's an expert in many fields and regularly writes amazing posts for major publications. Topics on her blog range from SVG techniques to general web development.",
116 |         "twitter": "SaraSoueidan"
117 |     },
118 |     {
119 |         "title": "Bryan L. Robinson",
120 |         "url": "https://bryanlrobinson.com",
121 |         "description": "Bryan is a Developer based in Memphis and an Advocate for HTML, CSS, JavaScript and Static Sites. His blog features posts on CSS Layout, IndieWeb and the JAM Stack.",
122 |         "twitter": "brob"
123 |     },
124 |     {
125 |         "title": "Andy Bell",
126 |         "url": "https://andy-bell.design",
127 |         "description": "Andy is a freelance web designer from the UK trying to make everyone’s experience on the web better. His focus is on progressive enhancement, accessibility and design systems. He writes about CSS, web components and other interesting topics.",
128 |         "twitter": "andybelldesign"
129 |     },
130 |     {
131 |         "title": "Monica Dinculescu",
132 |         "url": "https://meowni.ca",
133 |         "description": "Monica is an engineer at Google who has previously worked on projects like Chrome and Polymer. Her blog is a very interesting resource for all kinds of stuff, including Machine Learning, Web Components and Emojis.",
134 |         "twitter": "notwaldorf"
135 |     },
136 |     {
137 |         "title": "Una Kravets",
138 |         "url": "https://una.im",
139 |         "description": "Una is a developer advocate at Google for their Material Design System. She writes about design and development, including great pieces about CSS, SVG and Service Worker.",
140 |         "twitter": "una"
141 |     },
142 |     {
143 |         "title": "Veerle Pieters",
144 |         "url": "https://veerle.duoh.com",
145 |         "description": "Veerle is a graphic/web designer from Belgium. Her blog is an invaluable source of insight into her design process, creativity, technology and life.",
146 |         "twitter": "vpieters"
147 |     },
148 |     {
149 |         "title": "Jonathan Snook",
150 |         "url": "https://snook.ca",
151 |         "description": "Snook is a web designer, developer, writer, speaker, sometimes angel investor, and hobbyist photographer. He writes about many facets of modern front-end development and his blog features interesting posts on a variety of topics.",
152 |         "twitter": "snookca"
153 |     },
154 |     {
155 |         "title": "Michelle Barker",
156 |         "url": "https://css-irl.info",
157 |         "description": "Michelle is a very talented developer based in the UK. She runs 'CSS In Real Life', a fantastic blog about -you guessed it- CSS. Bookmark it.",
158 |         "twitter": "MicheBarks"
159 |     },
160 |     {
161 |         "title": "Mina Markham",
162 |         "url": "http://mina.codes",
163 |         "description": "Mina is a front-end architect based in Brooklyn, New York. She's responsible for 'Pantsuit', the design system used in Hillary Clinton's presidential campaign. Her blog is a great resource on topics like Sass, Typography and Graphic Design.",
164 |         "twitter": "MinaMarkham"
165 |     },
166 |     {
167 |         "title": "Laura Kalbag",
168 |         "url": "https://laurakalbag.com",
169 |         "description": "Laura is a designer based in Ireland. She wrote the excellent 'Accessibility for Everyone' and is the co-founder of Ind.ie, a nonprofit working towards a better, more ethical web. Her blog is very much worth a read.",
170 |         "twitter": "laurakalbag"
171 |     },
172 |     {
173 |         "title": "Jeremy Keith",
174 |         "url": "https://adactio.com",
175 |         "description": "Jeremy is a developer and co-founder of the Brighton-based design studio Clearleft. He's a terrific speaker and has wirtten several books on web development, including 'HTML5 for Web Designers' and 'Going Offline'.",
176 |         "twitter": "adactio"
177 |     },
178 |     {
179 |         "title": "Hidde de Vries",
180 |         "url": "https://hiddedevries.nl/en",
181 |         "description": "Hidde is a front-end developer from the Netherlands. He specializes in CSS, accessibility and performance, and his blog features excellent posts on these topics.",
182 |         "twitter": "hdv"
183 |     }
184 | ]</script>
185 | <!--boot js--><script id="jsbin-javascript" defer>const vue = new Vue({
186 | 	el: '#app',
187 |   data: {
188 |     feeds
189 |   }
190 | });
191 | 
192 | 
193 | console.log(feeds)
194 | </script>
195 | </body>
196 | </html>


--------------------------------------------------------------------------------
/muddy-unit-6B8/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | 
12 | input {
13 |   font-size: 16px;
14 | }
15 | </style>
16 | </head>
17 | <body>
18 | <input value="1234">
19 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
20 | 
21 | </script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------
/noisy-heart-446/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | <a href="https://remysharp.com/2020/07/17/works-offline">click me</a>
15 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
16 | const a = document.querySelector('a');
17 | const url = 'https://remysharp.com/2020/07/15/a-px-is-not-a-px'
18 | 
19 | a.onclick = (e) => {
20 |   const isMobile = window.navigator.userAgent.indexOf('Mobile ') !== -1;
21 | 
22 |   if (isMobile) {
23 |     e.preventDefault();
24 |     const a = document.createElement('a')
25 | 
26 |     document.body.appendChild(a);
27 |     a.style = 'display: none';
28 | 
29 |     a.href = url;
30 |     a.target = '_blank';
31 |     a.click();
32 |     document.body.removeChild(a);
33 |   }
34 | }
35 | </script>
36 | </body>
37 | </html>


--------------------------------------------------------------------------------
/noisy-recipe-8DD/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | <p>
15 |   Demo time.
16 |   </p>
17 | <!--boot js--><script id="jsbin-javascript" defer>console.clear()
18 | console.log('wondering if this makes a difference?')
19 | </script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/old-voice-BBF/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 8 | <style id="jsbin-css">
 9 | *, input {
10 |   font-family: sans-serif;
11 |   font-size: 120%;
12 | }
13 | </style>
14 | </head>
15 | <body>
16 | 
17 | <h3 id="example">Example</h3>
18 | 
19 | Search web site: <input type="text" style="min-width: 25px; max-width: 250px" name="s" class="ctlTextGrowExample"/>
20 | <!--boot js--><script id="jsbin-javascript" defer>/*
21 | 	jQuery Plugin textGrow (leftlogic.com/info/articles/auto_grow_text)
22 | 	(c) 2006 Remy Sharp (leftlogic.com)
23 | 	$Id$
24 | 	
25 | 	Usage: jQuery('input').textGrow({ pad: 25 });
26 | 		- pad: trailing padding in pixels - default 25px
27 | 		- min_width: minimum width of the text box in pixels
28 | 		- max_width: maximum width of the text box in pixels
29 | 		
30 | 	If min and max width are not passed in, you can apply this
31 | 	via CSS using min-width and max-width attributes.
32 | 	
33 | 	See example at: leftlogic.com/info/articles/auto_grow_text	
34 | */
35 | jQuery.fn.textGrow = function(options) {
36 | 	if (!options.pad) options.pad = 25;
37 | 	return this.each(function(i){
38 | 		var e = jQuery(this);
39 | 		// create copy for each element
40 | 		var o = { pad: options.pad, min_limit: options.min_limit, max_limit: options.max_limit }; 
41 | 		if (e.attr('type') == 'text') {
42 | 			if (!o.min_limit) o.min_limit = parseInt(e.css('min-width'));
43 | 			if (!o.max_limit) o.max_limit = parseInt(e.css('max-width'));
44 | 			
45 | 			// Safari reads a non-existant value as -1 making our calcs a mess
46 | 			if (o.min_limit < 0 || isNaN(o.min_limit)) o.min_limit = 0;
47 | 			if (o.max_limit < 0 || isNaN(o.max_limit)) o.max_limit = 0;
48 | 
49 | 			var html = '<' + 'div style="position:absolute; top:0; visibility:hidden; left:0; padding:0 ' + o.pad + 'px 0 0!important; margin:0!important" id="_grow' + i + '"></' + 'div>';
50 | 			var c = jQuery('body').append(html);
51 | 			// adjust the style of the container to match the font of this element
52 | 			var ff = e.css('font-family');
53 | 			var fs = e.css('font-size');
54 | 
55 | 			jQuery('div#_grow' + i).css({ 'font-size': fs, 'font-family': ff });
56 | 
57 | 			resize = function(){
58 | 				var dl = jQuery('div#_grow' + i).html(e.val().replace(/ /g,'&nbsp;')).get(0).offsetWidth;
59 | 				if (o.max_limit && (dl + o.pad) > o.max_limit) {
60 | 					e.css('width', o.max_limit + 'px')
61 | 				} else if ((dl + o.pad) <= o.min_limit) {
62 | 					e.css('width', o.min_limit + 'px')
63 | 				} else { // resize
64 | 					e.css('width', dl + 'px')
65 | 				}
66 | 			}
67 | 
68 | 			// auto resize based on current content
69 | 			resize();
70 | 			e.keypress(resize);
71 | 		}
72 | 	})
73 | }
74 | 
75 | $(function(){ jQuery("input.ctlTextGrowExample").textGrow({ pad: 25 }); }) 
76 | </script>
77 | </body>
78 | </html>


--------------------------------------------------------------------------------
/orange-breeze-C85/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>caesar shift</title>
 7 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
 8 | <style id="jsbin-css">
 9 | * {
10 |   font-family: sans-serif;
11 |   font-size: 24px;
12 | }
13 | 
14 | html {
15 |   height: 100%;
16 |   display: flex;
17 |   align-items: center;
18 | }
19 | 
20 | body {
21 |   background: #222;
22 |   color: #fefefe;
23 |   width: 600px;
24 |   margin: 0 auto;
25 |   padding: 20px;
26 | }
27 | 
28 | #app > div {
29 |   display: flex;
30 |   flex-direction: row;
31 | }
32 | 
33 | input[type=text] {
34 |   margin-left: 8px;
35 |   flex: 1;
36 |   border: 1px solid #ccc;
37 |   border-radius: 4px;
38 |   padding: 0 10px;
39 | }
40 | 
41 | .output {
42 |   letter-spacing: 4px;
43 | }
44 | </style>
45 | </head>
46 | <body>
47 | <div id="app">
48 |   <h1>
49 |     Spy Text Encoder
50 |   </h1>
51 |   <div>
52 |     <select v-model="rotSelected">
53 |       <option v-for="i in rot">{{ i }}</option>
54 |     </select>
55 |     <input type="text" v-model="input">
56 |   </div>
57 |   <p class="output">
58 |     {{output}}
59 |   </p>
60 |   </div>
61 | <!--boot js--><script id="jsbin-javascript" defer>console.clear()
62 | const length = 26;
63 | const letters = Array.from({ length }, (_, i) => String.fromCharCode(65 + i));
64 | const rot = Array.from({ length }, (_, i) => i);
65 | let rotSelected = new Date().getDate();
66 | if (rotSelected > length - 1) rotSelected = 0;
67 | 
68 | const v = new Vue({
69 |   el: '#app',
70 |   data: {
71 |     rot,
72 |     input: 'Keep this secret',
73 |     rotSelected,
74 |   },
75 |   computed: {
76 |     output() { 
77 |     	const chrs = this.input.trim().split('');
78 |       const r = parseInt(this.rotSelected);
79 |       return chrs.map(_ => {
80 |         const code = _.toUpperCase();
81 |         const i = letters.indexOf(code);
82 |         if (i === -1) return ' ';
83 |         const index = (i + r) % length;
84 |         console.log({ _, i, $: letters[index], index, r })
85 |         return letters[index];
86 |       }).join('');
87 |     }
88 |   }
89 | });
90 | </script>
91 | </body>
92 | </html>


--------------------------------------------------------------------------------
/patient-credit-871/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | <a href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-dnt="true" data-show-count="false">Follow @Remy</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
15 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
16 | 
17 | </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/polished-waterfall-620/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | <p>
15 |   Another one, I hope....
16 |   </p>
17 | <!--boot js--><script id="jsbin-javascript" defer>console.clear()
18 | 
19 | </script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/quiet-dawn-956/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>ISS position</title>
 7 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 8 |   <script src="https://unpkg.com/memfetch"></script>
 9 | <style id="jsbin-css">
10 | * {
11 |   font-family: sans-serif;
12 | }
13 | </style>
14 | </head>
15 | <body>
16 | <ul id="isspass">
17 |   </ul>
18 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
19 | navigator.geolocation.getCurrentPosition(data => {
20 |   const { latitude, longitude } = data.coords;
21 | $.getJSON(`https://remysharp.com/api/iss/iss-pass.json?lat=${longitude}&lon=${latitude}&n=10&callback=?`, function(data) {
22 |   console.log(data);
23 |     data['response'].forEach(function (d) {
24 |         var date = new Date(d['risetime']*1000);
25 |          $('#isspass').append('<li>' + date.toString() + '</li>');
26 |     });
27 | });
28 | 
29 | });
30 | </script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/remy:restless-tooth-1B2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: 'ubuntu mono', monospace, sans-serif;
10 |   font-weight: bold;
11 |   font-size: 32px;
12 | }
13 | 
14 | ul {
15 |   list-style: none;
16 |   margin: 0;
17 |   padding: 0;
18 |   padding-top: 25vh;
19 | }
20 | 
21 | li {
22 |   line-height: 48px;
23 |   padding-right: 10vw;
24 |   text-align: right;
25 | }
26 | </style>
27 | </head>
28 | <body>
29 | 	<ul>
30 |   	<li id="days">?</li>
31 |   	<li id="hours">?</li>
32 |   	<li id="minutes">?</li>
33 |   	<li id="seconds">?</li>
34 |   	<li id="ms">?</li>
35 |   </ul>
36 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
37 | const oDays = document.querySelector('#days');
38 | const oHours = document.querySelector('#hours');
39 | const oMinutes = document.querySelector('#minutes');
40 | const oSeconds = document.querySelector('#seconds');
41 | const oMS = document.querySelector('#ms');
42 | 
43 | const xmas = new Date('2023-12-25 00:00:00').getTime();
44 | 
45 | function updateTime() {
46 |   let result = xmas - Date.now(); // milliseconds until Christmas
47 |   oMS.textContent = `Millseconds: ${result.toLocaleString()}`;
48 |   result = Math.floor(result / 1000); // bit of a cheat
49 |   oSeconds.textContent = `Seconds: ${result.toLocaleString()}`;
50 |   result = Math.ceil(result / 60);
51 |   oMinutes.textContent = `Minutes: ${result.toLocaleString()}`;
52 |   result = Math.ceil(result / 60);
53 |   oHours.textContent = `Hours: ${result.toLocaleString()}`;
54 |   result = Math.ceil(result / 24);
55 |   oDays.textContent = `Days: ${result.toLocaleString()}`;
56 |   requestAnimationFrame(updateTime);
57 | }
58 | 
59 | updateTime();
60 | </script>
61 | </body>
62 | </html>


--------------------------------------------------------------------------------
/remy:super-morning-1DA/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>Teselate</title>
  7 | <style id="jsbin-css">
  8 | html, body {
  9 |   height: 100%;
 10 |   margin: 0;
 11 |   padding: 0;
 12 | }
 13 | 
 14 | 
 15 | body {
 16 |   background-position: center;
 17 |   display: flex;
 18 |   align-items: center;
 19 |   justify-content: center;
 20 |   overflow: hidden;
 21 |   background: #fdfdfd;
 22 |   background-image: linear-gradient(to bottom, #cfd9df 0%, #e2ebf0 100%);
 23 |   image-rendering: pixelated;
 24 |   background-size: 200%;
 25 |   background-position-y: 46px;
 26 | }
 27 | 
 28 | canvas {
 29 |   border: 0px solid #cfd9df;
 30 |   display: block;
 31 | /*   transform: scale(2); */
 32 |   image-rendering: pixelated;
 33 |   opacity: 0;
 34 | /*   filter: invert(100%); */
 35 | }
 36 | 
 37 | header {
 38 |   z-index: 1;
 39 |   position: absolute;
 40 |   top: 0;
 41 |   width: 100%;
 42 |   display: flex;
 43 |   flex-direction: row;
 44 |   background: white;
 45 |   height: 46px;
 46 | }
 47 | 
 48 | #speed {
 49 |   border: 0;
 50 |   padding: 10px;
 51 |   right: 0;
 52 |   font-family: monospace;
 53 |   line-height: 2;
 54 |   display: flex;
 55 | }
 56 | 
 57 | #speed input {
 58 |   margin-right: 8px;
 59 | }
 60 | 
 61 | #shapes {
 62 |   z-index: 1;
 63 |   font-family: monospace;
 64 |   font-size: 16px;
 65 |   border: 0;
 66 |   padding: 10px;
 67 |   width: 100%;
 68 |   left: 0;
 69 | }
 70 | 
 71 | #shapes:focus {
 72 |   outline: 0px solid #000;
 73 |   background: black;
 74 |   color: white;
 75 | }
 76 | </style>
 77 | </head>
 78 | <body>
 79 |   <canvas></canvas>
 80 |   <header>
 81 |     <input type="text" id="shapes" placeholder="shapes '' .. ::">
 82 |     <span id="speed"><input type="range" value="20" min="1" max="99"> <span>20</span>ms</span>
 83 |   </header>
 84 |   
 85 | <!--boot js--><script id="jsbin-javascript" defer>const $ = s => document.querySelector(s);
 86 | const canvas = $('canvas');
 87 | const speedInput = $('#speed input');
 88 | const speedOutput = $('#speed span');
 89 | const input = $('#shapes');
 90 | 
 91 | const ctx = canvas.getContext('2d');
 92 | const full = true;
 93 | const scale = 0.5;
 94 | const dotOffset = 4 * scale;
 95 | const width = canvas.width = 256 * scale;
 96 | const height = canvas.height = 192 * scale;
 97 | 
 98 | let line = 0;
 99 | let col = -8 * scale;
100 | 
101 | let last = {};
102 | let speed = parseInt(speedInput.value, 10);
103 | 
104 | const ONE = 0x1;
105 | const TWO = 0x2;
106 | const THREE = 0x4;
107 | const FOUR = 0x8;
108 | 
109 | let j = 0;
110 | let shapes = [`'.`, `.: `, ' :', `'.`, `:.`];
111 | 
112 | // all shapes
113 | // shapes = [`' `, ` '`, `. `, ` .`, `: `, ` :`, `''`, `..`, `:'`, `':`, `.:`, `:.`]; //? 
114 | 
115 | document.body.style.backgroundSize = (256 * 4) + 'px';
116 | ctx.strokeStyle = '#000';
117 | ctx.lineWidth = 1 * scale;
118 | if (!full) canvas.style.opacity = 1;
119 | 
120 | readUrl();
121 | 
122 | function updateUrl() {
123 |   const query = new URLSearchParams();
124 | 	query.set('speed', speedInput.value);
125 |   query.set('shapes', input.value);
126 |   window.history.replaceState(null, "", `?${query.toString()}`);
127 | }
128 | 
129 | function readUrl() {
130 |   const query = new URLSearchParams(location.search);
131 |   for (let [key, value] of query.entries()) {
132 |   	if (key === 'speed') {
133 |       speedInput.value = value;
134 |     }
135 |     if (key === 'shapes') {
136 |       input.value = value;
137 |       shapes = value.split(',');
138 |     }
139 |   }
140 | }
141 | 
142 | const incLine = () => {
143 |   const inc = 8 * scale;
144 |   line += inc;
145 |   if (line < height) return;
146 |   // throw new Error('screen overflow');
147 |   
148 |   // when overflow - then
149 |   // capture all of screen except first line
150 |   // then paint into top, left;
151 |   const imageData = ctx.getImageData(0, inc, width, height - inc);
152 |   ctx.clearRect(0, 0, width, height);
153 |   ctx.putImageData(imageData, 0, 0);
154 |   line = height - inc;
155 |   col = 0;
156 | }
157 | 
158 | const incCol = () => {
159 |   col += (8 * scale);
160 |   if (col < width) return;
161 |   col = 0;
162 |   incLine();
163 | }
164 | 
165 | const draw = {
166 |   one() {
167 |     ctx.putImageData(dot, col, line);
168 |   },
169 |   
170 |   two() {
171 |     ctx.putImageData(dot, col + dotOffset, line);
172 |   },
173 |   
174 |   three() {
175 |     ctx.putImageData(dot, col, line + dotOffset);
176 |   },
177 | 
178 |   four() {
179 |     ctx.putImageData(dot, col + dotOffset, line + dotOffset);
180 |   },
181 |   
182 |   box(exclude = 0x0) {
183 |     exclude & ONE   || draw.one();
184 |     exclude & TWO   || draw.two();
185 |     exclude & THREE || draw.three();
186 |     exclude & FOUR  || draw.four();
187 |   },
188 |   
189 |   shape(s) {
190 |     const points = s.padEnd(2, ' ').split('');
191 | 
192 |     const include = points.reduce((acc, curr, i) => {
193 |       if (curr === ':') {
194 |         if (i === 0) {
195 |           acc += ONE + THREE;
196 |         } else {
197 |           acc += TWO + FOUR;
198 |         }
199 |       }
200 | 
201 |       if (curr === '.') {
202 |         if (i === 0) {
203 |           acc += THREE;
204 |         } else {
205 |           acc += FOUR;
206 |         }
207 |       }
208 | 
209 |       if (curr === "'") {
210 |         if (i === 0) {
211 |           acc += ONE;
212 |         } else {
213 |           acc += TWO;
214 |         }
215 |       }
216 | 
217 |       return acc;
218 |     }, 0); // ?
219 | 
220 |     draw.box(0xF - include);
221 |   },
222 | }
223 | 
224 | const dot = (() => {
225 |   const canvas = document.createElement('canvas');
226 |   const ctx = canvas.getContext('2d');
227 |   canvas.width = dotOffset;
228 |   canvas.height = dotOffset;
229 |   ctx.fillRect(0, 0, dotOffset, dotOffset);
230 |   return ctx.getImageData(0, 0, dotOffset, dotOffset);
231 | })();
232 | 
233 | const wait = n => new Promise(resolve => setTimeout(resolve, n));
234 | 
235 | const write = c => {
236 |   incCol();
237 |   draw.shape(c);
238 | }
239 | 
240 | async function main() {  
241 |   return new Promise(resolve => {
242 |     const bit = 8 * scale;
243 |     let todo = (width * height) / bit / bit;
244 |     const pop = () => {
245 |       if (full) document.body.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
246 |       if (todo) {
247 |         for (let i = 0; i < 32; i++) {
248 |           // write(shapes[Math.random() * shapes.length | 0]);
249 |           j += 1;
250 |           write(shapes[(j) % shapes.length]);
251 | 		      todo--;
252 |         }
253 |         requestAnimationFrame(pop);
254 |         pop();
255 |       } else {
256 |         resolve();
257 |       }
258 |     }
259 | 
260 |     pop();
261 |     
262 |   });  
263 | }
264 | 
265 | let direction = 1;
266 | 
267 | async function bigSleep() {
268 |   let f = 0;
269 |   // noprotect
270 |   while (true) {
271 |     await main();
272 |     await wait(speed);
273 |     f++;
274 |     // j += (f % 2) + 1;
275 |     // ctx.clearRect(0, 0, width, height);
276 |     // line = 0;
277 |     // col = -8;
278 |     // j++;
279 |     j += direction;
280 |   }
281 | }
282 | 
283 | document.body.onmousemove = event => {
284 |   if (!last.x) {
285 |     last.x = event.pageX;
286 |   	last.y = event.pageY;
287 |     return;
288 |   }
289 |   
290 |   if (event.pageY < window.innerHeight / 2) {
291 |     direction = -2;
292 |   } else {
293 |     direction = 2;
294 |   }
295 | }
296 | 
297 | bigSleep();
298 | 
299 | // single version
300 | // main();
301 | 
302 | // input.value = shapes;
303 | input.oninput = event => {
304 |   shapes = input.value.split(',');
305 |   if (!shapes.includes(' ')) {
306 |     shapes.push(' ');
307 |     shapes.push(' ');
308 |   }
309 |   updateUrl();
310 | }
311 | 
312 | speedInput.oninput = () => {
313 |   const x = parseInt(speedInput.value, 10) / 100; // 0 - 1
314 |   speed = Math.exp(0 - x * 5);
315 |   speed = speed * 1000 | 0;
316 |   speedOutput.innerHTML = (speed).toString().padStart(3, '0');
317 |   updateUrl();
318 | }
319 | 
320 | speedInput.oninput();
321 | </script>
322 | </body>
323 | </html>
324 | 


--------------------------------------------------------------------------------
/restless-tooth-1B2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: 'ubuntu mono', monospace, sans-serif;
10 |   font-weight: bold;
11 |   font-size: 32px;
12 | }
13 | 
14 | ul {
15 |   list-style: none;
16 |   margin: 0;
17 |   padding: 0;
18 |   padding-top: 25vh;
19 | }
20 | 
21 | li {
22 |   line-height: 48px;
23 |   text-align: center;
24 | }
25 | </style>
26 | </head>
27 | <body>
28 | 	<ul>
29 |   	<li id="days">?</li>
30 |   	<li id="hours">?</li>
31 |   	<li id="minutes">?</li>
32 |   	<li id="seconds">?</li>
33 |   	<li id="ms">?</li>
34 |   </ul>
35 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
36 | const oDays = document.querySelector('#days');
37 | const oHours = document.querySelector('#hours');
38 | const oMinutes = document.querySelector('#minutes');
39 | const oSeconds = document.querySelector('#seconds');
40 | const oMS = document.querySelector('#ms');
41 | 
42 | const xmas = new Date('2020-12-25 00:00:00').getTime();
43 | 
44 | function updateTime() {
45 |   let result = xmas - Date.now(); // milliseconds until Christmas
46 |   oMS.textContent = `Millseconds: ${result.toLocaleString()}`;
47 |   result = Math.floor(result / 1000); // bit of a cheat
48 |   oSeconds.textContent = `Seconds: ${result.toLocaleString()}`;
49 |   result = Math.ceil(result / 60);
50 |   oMinutes.textContent = `Minutes: ${result.toLocaleString()}`;
51 |   result = Math.ceil(result / 60);
52 |   oHours.textContent = `Hours: ${result.toLocaleString()}`;
53 |   result = Math.ceil(result / 24);
54 |   oDays.textContent = `Days: ${result.toLocaleString()}`;
55 |   requestAnimationFrame(updateTime);
56 | }
57 | 
58 | updateTime();
59 | </script>
60 | </body>
61 | </html>


--------------------------------------------------------------------------------
/round-leaf-025/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>Game pad</title>
  7 | <style id="jsbin-css">
  8 | * {
  9 |   font-family: sans-serif;
 10 | }
 11 | </style>
 12 | </head>
 13 | <body>
 14 | 
 15 | <!--boot js--><script id="jsbin-javascript" defer>var haveEvents = 'ongamepadconnected' in window;
 16 | var controllers = {};
 17 | 
 18 | function connecthandler(e) {
 19 |   addgamepad(e.gamepad);
 20 | }
 21 | 
 22 | function addgamepad(gamepad) {
 23 |   controllers[gamepad.index] = gamepad;
 24 | 
 25 |   var d = document.createElement("div");
 26 |   d.setAttribute("id", "controller" + gamepad.index);
 27 | 
 28 |   var t = document.createElement("h1");
 29 |   t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
 30 |   d.appendChild(t);
 31 | 
 32 |   var b = document.createElement("div");
 33 |   b.className = "buttons";
 34 |   for (var i = 0; i < gamepad.buttons.length; i++) {
 35 |     var e = document.createElement("span");
 36 |     e.className = "button";
 37 |     //e.id = "b" + i;
 38 |     e.innerHTML = i;
 39 |     b.appendChild(e);
 40 |   }
 41 | 
 42 |   d.appendChild(b);
 43 | 
 44 |   var a = document.createElement("div");
 45 |   a.className = "axes";
 46 | 
 47 |   for (var i = 0; i < gamepad.axes.length; i++) {
 48 |     var p = document.createElement("progress");
 49 |     p.className = "axis";
 50 |     //p.id = "a" + i;
 51 |     p.setAttribute("max", "2");
 52 |     p.setAttribute("value", "1");
 53 |     p.innerHTML = i;
 54 |     a.appendChild(p);
 55 |   }
 56 | 
 57 |   d.appendChild(a);
 58 | 
 59 |   // See https://github.com/luser/gamepadtest/blob/master/index.html
 60 |   var start = document.getElementById("start");
 61 |   if (start) {
 62 |     start.style.display = "none";
 63 |   }
 64 | 
 65 |   document.body.appendChild(d);
 66 |   requestAnimationFrame(updateStatus);
 67 | }
 68 | 
 69 | function disconnecthandler(e) {
 70 |   removegamepad(e.gamepad);
 71 | }
 72 | 
 73 | function removegamepad(gamepad) {
 74 |   var d = document.getElementById("controller" + gamepad.index);
 75 |   document.body.removeChild(d);
 76 |   delete controllers[gamepad.index];
 77 | }
 78 | 
 79 | function updateStatus() {
 80 |   if (!haveEvents) {
 81 |     scangamepads();
 82 |   }
 83 | 
 84 |   var i = 0;
 85 |   var j;
 86 | 
 87 |   for (j in controllers) {
 88 |     var controller = controllers[j];
 89 |     var d = document.getElementById("controller" + j);
 90 |     var buttons = d.getElementsByClassName("button");
 91 | 
 92 |     for (i = 0; i < controller.buttons.length; i++) {
 93 |       var b = buttons[i];
 94 |       var val = controller.buttons[i];
 95 |       var pressed = val == 1.0;
 96 |       if (typeof(val) == "object") {
 97 |         pressed = val.pressed;
 98 |         val = val.value;
 99 |       }
100 | 
101 |       var pct = Math.round(val * 100) + "%";
102 |       b.style.backgroundSize = pct + " " + pct;
103 | 
104 |       if (pressed) {
105 |         b.className = "button pressed";
106 |       } else {
107 |         b.className = "button";
108 |       }
109 |     }
110 | 
111 |     var axes = d.getElementsByClassName("axis");
112 |     for (i = 0; i < controller.axes.length; i++) {
113 |       var a = axes[i];
114 |       a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
115 |       a.setAttribute("value", controller.axes[i] + 1);
116 |     }
117 |   }
118 | 
119 |   requestAnimationFrame(updateStatus);
120 | }
121 | 
122 | function scangamepads() {
123 |   var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
124 |   for (var i = 0; i < gamepads.length; i++) {
125 |     if (gamepads[i]) {
126 |       if (gamepads[i].index in controllers) {
127 |         controllers[gamepads[i].index] = gamepads[i];
128 |       } else {
129 |         addgamepad(gamepads[i]);
130 |       }
131 |     }
132 |   }
133 | }
134 | 
135 | 
136 | window.addEventListener("gamepadconnected", connecthandler);
137 | window.addEventListener("gamepaddisconnected", disconnecthandler);
138 | 
139 | if (!haveEvents) {
140 |   setInterval(scangamepads, 500);
141 | }
142 | </script>
143 | </body>
144 | </html>


--------------------------------------------------------------------------------
/shrill-pine-3C5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>OSA score calc</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | 
15 | <!--boot js--><script id="jsbin-javascript" defer>console.clear()
16 | 
17 | const securityWeight = 0.3;
18 | const maintenanceWeight = 0.35;
19 | const communityWeight = 0.2;
20 | const popularityWeight = 0.15;
21 | 
22 | const p = 1;
23 | const m = 3;
24 | const c = 2;
25 | const s = 3;
26 | 
27 | const pMax = 6;
28 | const mMax = 4;
29 | const cMax = 6;
30 | const sMax = 4;
31 | 
32 | const health = (s / sMax) * securityWeight +
33 |   (m / mMax) * maintenanceWeight +
34 |   (c / cMax) * communityWeight +
35 |   (p / pMax) * popularityWeight;
36 | 
37 | console.log(health, {s: (s / sMax) * securityWeight * 100,
38 |   m: (m / mMax) * maintenanceWeight * 100,
39 |   c: (c / cMax) * communityWeight * 100,
40 |   p: (p / pMax) * popularityWeight * 100});
41 | 
42 | </script>
43 | </body>
44 | </html>


--------------------------------------------------------------------------------
/silent-frost-D3C/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>JS Bin</title>
  7 | <style id="jsbin-css">
  8 | body {
  9 |   background: #000;
 10 | }
 11 | 
 12 | code {
 13 |   font-family: 'ubuntu mono', courier;
 14 | }
 15 | 
 16 | pre {
 17 |   color: white;
 18 |   background-color: #2f383d;
 19 |   overflow-x: auto;
 20 | 	border-radius: 2px;
 21 | }
 22 | 
 23 | pre code {
 24 |   display: block;
 25 |   padding: 0.5em; }
 26 |   pre code .markdown .emphasis {
 27 |     font-style: italic; }
 28 |   pre code .nginx .built_in {
 29 |     font-weight: 300; }
 30 | 
 31 | pre code,
 32 | pre .subst,
 33 | pre .lisp .title,
 34 | pre .clojure .built_in,
 35 | pre .nginx .title {
 36 |   color: white; }
 37 | 
 38 | pre .string,
 39 | pre .title,
 40 | pre .constant,
 41 | pre .parent,
 42 | pre .tag .value,
 43 | pre .rules .value,
 44 | pre .rules .value .number,
 45 | pre .preprocessor,
 46 | pre .ruby .symbol,
 47 | pre .ruby .symbol .string,
 48 | pre .aggregate,
 49 | pre .template_tag,
 50 | pre .django .variable,
 51 | pre .smalltalk .class,
 52 | pre .addition,
 53 | pre .flow,
 54 | pre .stream,
 55 | pre .bash .variable,
 56 | pre .apache .tag,
 57 | pre .apache .cbracket,
 58 | pre .tex .command,
 59 | pre .tex .special,
 60 | pre .erlang_repl .function_or_atom,
 61 | pre .markdown .header {
 62 |   color: #00FCD4; }
 63 | 
 64 | pre .comment,
 65 | pre .annotation,
 66 | pre .template_comment,
 67 | pre .diff .header,
 68 | pre .chunk,
 69 | pre .markdown .blockquote {
 70 |   color: #969fa4; }
 71 | 
 72 | pre .number,
 73 | pre .title,
 74 | pre .date,
 75 | pre .regexp,
 76 | pre .literal,
 77 | pre .smalltalk .symbol,
 78 | pre .smalltalk .char,
 79 | pre .go .constant,
 80 | pre .change,
 81 | pre .markdown .bullet,
 82 | pre .markdown .link_url {
 83 |   color: #44C7F4; }
 84 | 
 85 | pre .label,
 86 | pre .tag,
 87 | pre .javadoc,
 88 | pre .ruby .string,
 89 | pre .decorator,
 90 | pre .filter .argument,
 91 | pre .localvars,
 92 | pre .array,
 93 | pre .attr_selector,
 94 | pre .important,
 95 | pre .pseudo,
 96 | pre .pi,
 97 | pre .doctype,
 98 | pre .deletion,
 99 | pre .envvar,
100 | pre .shebang,
101 | pre .apache .sqbracket,
102 | pre .nginx .built_in,
103 | pre .tex .formula,
104 | pre .erlang_repl .reserved,
105 | pre .prompt,
106 | pre .markdown .link_label,
107 | pre .vhdl .attribute,
108 | pre .clojure .attribute,
109 | pre .coffeescript .property {
110 |   color: #FF9CE3; }
111 | 
112 | pre .id,
113 | pre .phpdoc,
114 | pre .built_in,
115 | pre .aggregate,
116 | pre .css .tag,
117 | pre .javadoctag,
118 | pre .phpdoc,
119 | pre .yardoctag,
120 | pre .smalltalk .class,
121 | pre .winutils,
122 | pre .bash .variable,
123 | pre .apache .tag,
124 | pre .go .typename,
125 | pre .tex .command,
126 | pre .markdown .strong,
127 | pre .request,
128 | pre .status,
129 | pre .tag .title,
130 | pre .keyword {
131 |   color: #FF9A57; }
132 | 
133 | pre .coffeescript .javascript,
134 | pre .javascript .xml,
135 | pre .tex .formula,
136 | pre .xml .javascript,
137 | pre .xml .vbscript,
138 | pre .xml .css,
139 | pre .xml .cdata {
140 |   opacity: 1; }
141 | 
142 | </style>
143 | </head>
144 | <body>
145 | <pre><code class="js hljs javascript"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">'react'</span>;
146 | <span class="keyword">import</span> {Route} <span class="keyword">from</span> <span class="string">'react-router-dom'</span>;
147 | <span class="keyword">import</span> auth <span class="keyword">from</span> <span class="string">'../Auth'</span>;
148 | 
149 | <span class="function"><span class="keyword">function</span> <span class="title">GuardedRoute</span>(<span class="params">props</span>) </span>{
150 |   <span class="keyword">const</span> { component: Component, path} = props;
151 |   <span class="keyword">return</span> (
152 |     &lt;Route exact path={path} render={(props) =&gt; {
153 |      if (!auth.isAuthenticated()) return auth.login();
154 |       return &lt;Component {...props} /&gt;
155 |     }} /&gt;
156 |   );
157 | }
158 | 
159 | export default GuardedRoute;
160 | </code></pre>
161 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
162 | 
163 | </script>
164 | </body>
165 | </html>


--------------------------------------------------------------------------------
/speccy-bars/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>JS Bin</title>
  7 | <style id="jsbin-css">
  8 | * {
  9 |   font-family: sans-serif;
 10 | }
 11 | 
 12 | canvas {
 13 | /*   transform: scale(2); */
 14 |   transform-origin: 0 0;
 15 | /*   border: 1px solid red; */
 16 |   display: block;
 17 |   image-rendering: pixelated;
 18 | }
 19 | </style>
 20 | </head>
 21 | <body>
 22 | <canvas width="320" height="240"></canvas>
 23 | 
 24 | <!--boot js--><script id="jsbin-javascript" defer>console.clear()
 25 | 
 26 | const ctx = document.querySelector('canvas').getContext('2d');
 27 | 
 28 | let flag = 1;
 29 | let offset = 0;
 30 | 
 31 | // const blue = (() => {
 32 | //   const ctx = document.createElement('canvas').getContext('2d');
 33 | //   ctx.canvas.width = ctx.canvas.height = 1;
 34 | //   ctx.fillStyle = 'blue';
 35 | //   ctx.fillRect(0, 0, 1, 1);
 36 | //   return ctx.getImageData(0, 0, 1, 1);
 37 | // })();
 38 | 
 39 | // const yellow = (() => {
 40 | //   const ctx = document.createElement('canvas').getContext('2d');
 41 | //   ctx.canvas.width = ctx.canvas.height = 1;
 42 | //   ctx.fillStyle = 'yellow';
 43 | //   ctx.fillRect(0, 0, 1, 1);
 44 | //   return ctx.getImageData(0, 0, 1, 1);
 45 | // })();
 46 | 
 47 | const dot = ({ i, ctx, d }) => {
 48 |   const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
 49 |   for (let j = i; j < i + d; j += 1) {
 50 |     imageData.data[4 * j] = pixel[0];
 51 |     imageData.data[4 * j + 1] = pixel[1];
 52 |     imageData.data[4 * j + 2] = pixel[2];
 53 |     imageData.data[4 * j + 3] = 255;
 54 |   }
 55 |     // const x = j % ctx.canvas.width;
 56 |     // const y = j / ctx.canvas.width | 0;
 57 |   // console.log('paint %s', i + d)
 58 | 
 59 |   ctx.putImageData(imageData, 0, 0);
 60 | }
 61 | 
 62 | const sleep = t => new Promise(resolve => setTimeout(resolve, t));
 63 | 
 64 | const frameSize = () => [19, 23, 29, 31][Math.random() * 4 | 0];
 65 | 
 66 | async function draw() {
 67 |   const d = frameSize();
 68 |   // dot({ ctx, d, i: offset })
 69 |   if (false) {
 70 | 
 71 |   const imageData = ctx.getImageData(
 72 |     0,
 73 |     0,
 74 |     ctx.canvas.width,
 75 |     ctx.canvas.height
 76 |   );
 77 |   ctx.putImageData(imageData, 0, 10);
 78 | 
 79 | 	ctx.fillRect(20, 0, 10, 10);
 80 |   ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
 81 | 
 82 |   }
 83 | 
 84 |   offset += d;
 85 | 
 86 |   if (offset < ctx.canvas.width * ctx.canvas.height) {
 87 |   //   // console.log(offset)
 88 |     await sleep(0);
 89 |   	// requestAnimationFrame(draw)
 90 |     draw();
 91 |   }
 92 | }
 93 | 
 94 | // noprotect
 95 | 
 96 | c = 'yellow';
 97 | yellow = [255, 255, 0];
 98 | blue = [0, 0, 255];
 99 | pixel = yellow;
100 | 
101 | let i = 0;
102 | 
103 | const paint = () => {
104 |   pixel = c === 'yellow' ? yellow : blue;
105 |   c = c === 'blue' ? 'yellow' : 'blue';
106 |   dot({ ctx, i, d: offset });
107 |   i += offset;
108 |   // setTimeout(paint, frameSize());
109 |   requestAnimationFrame(paint);
110 |   if (i > (ctx.canvas.width * ctx.canvas.height)) {
111 |     i = 0;
112 |     offset = 0;
113 |     draw();
114 |   }
115 | }
116 | 
117 | draw();
118 | setTimeout(paint, frameSize())
119 | 
120 | 
121 | // let res = offset < (ctx.canvas.width * ctx.canvas.height);
122 | // while (res) {
123 | 	// draw();
124 |   // res = offset < (ctx.canvas.width);
125 | // }
126 | 
127 | console.log('fin %s', ctx.canvas.width * ctx.canvas.height)
128 | //# sourceURL=summer-frog-642.js
129 | </script>
130 | </body>
131 | </html>
132 | 


--------------------------------------------------------------------------------
/speccy-bars/readme.md:
--------------------------------------------------------------------------------
 1 | # ZX Spectrum screen
 2 | 
 3 | ## Visible screen
 4 | 
 5 | ### Horizontal
 6 | 
 7 | 352 pixels wide: 256 + 48 * 2 (border) = 352
 8 | Line to screen timing: 224T (2 pixels per T state)
 9 | 176T to put pixels + 96T for beam fly-back
10 | 
11 | ### Vertical
12 | 
13 | 192 + 48 + 16 + 56 = 312
14 | 
15 | Screen render time = 312 * 244 = 76128T = .021750857s = 21ms
16 | 
17 | ## Bits
18 | 
19 | 0 = 855T * 2 (2 pulses) = 1710T
20 | 1 = 1710 * 2 = 3420T
21 | 
22 | 1 byte = 13680T = 3ms
23 | 
24 | pixel dimensions: 76800p (based on bars.js)
25 | 
26 | ref: http://www.zxdesign.info/vidparam.shtml
27 | 


--------------------------------------------------------------------------------
/steep-night-D89/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <template>
 6 |     <p>
 7 |     in the template
 8 |     </p>
 9 |   </template>
10 |   <meta name="viewport" content="width=device-width">
11 |   <title>JS Bin</title>
12 | <style id="jsbin-css">
13 | * {
14 |   font-family: sans-serif;
15 | }
16 | </style>
17 | </head>
18 | <body>
19 | <pre></pre>
20 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
21 | document.querySelector('pre').innerText = document.documentElement.innerHTML;
22 | </script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/steep-rain-442/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 | <body>
14 | <p>
15 |   Oh dude, if this works…
16 |   </p>
17 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
18 | 
19 | </script>
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/sw.js:
--------------------------------------------------------------------------------
 1 | // we'll version our cache (and learn how to delete caches in
 2 | // some other post)
 3 | const cacheName = 'vB';
 4 | 
 5 | self.addEventListener('install', e => {
 6 |   // once the SW is installed, go ahead and fetch the resources
 7 |   // to make this work offline
 8 |   e.waitUntil(
 9 |     caches.open(cacheName).then(cache => {
10 |       return cache
11 |         .addAll(['/boggle/', '/marbles2/'])
12 |         .then(() => self.skipWaiting());
13 |     })
14 |   );
15 | });
16 | 
17 | self.addEventListener('activate', event => {
18 |   event.waitUntil(
19 |     caches
20 |       .keys()
21 |       .then(names =>
22 |         Promise.all(
23 |           names
24 |             .filter(name => name !== cacheName)
25 |             .map(cache => caches.delete(cache))
26 |         )
27 |       )
28 |   );
29 | });
30 | // when the browser fetches a url, either response with
31 | // the cached object or go ahead and fetch the actual url
32 | self.addEventListener('fetch', event => {
33 |   event.respondWith(
34 |     // ensure we check the *right* cache to match against
35 |     caches.open(cacheName).then(cache => {
36 |       return cache.match(event.request).then(res => {
37 |         return res || fetch(event.request);
38 |       });
39 |     })
40 |   );
41 | });
42 | 


--------------------------------------------------------------------------------
/throbbing-sun-D17/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>Photo effect</title>
 7 | <style id="jsbin-css">
 8 | /*
 9 | Original effect by Marco Buono
10 | https://marco.blog/en/2018/02/pure-css-halftone-effect/
11 | 
12 | Adapted for halftone b/w
13 | */
14 | 
15 | .halftone {
16 |   background: white;
17 |   position: relative;
18 |   filter: grayscale(1) contrast(25000%);
19 |   overflow: hidden;
20 |   transform: translateZ(0); /* force a HW accelerated layer */
21 | }
22 | 
23 | .halftone > * {
24 |   filter: contrast(200%) brightness(0.45) blur(4px);
25 | }
26 | 
27 | .halftone::after {
28 |   content: '';
29 |   position: absolute;
30 |   top: -100%;
31 |   left: -100%;
32 |   right: -100%;
33 |   bottom: -100%;
34 |   background-blend-mode: multiply;
35 |   background: radial-gradient(4px 4px, black, white);
36 |   background-size: 4px 4px;
37 |   background-position: 0 -3px, -2px 0, 2px 0;
38 |   mix-blend-mode: screen;
39 |   pointer-events: none;
40 |   transform: rotate(11.25deg);
41 |   z-index: 1;
42 | }
43 | 
44 | </style>
45 | </head>
46 | <body>
47 | 
48 |     <div class="halftone">
49 |       <img class="halftone" src="https://remy.jsbin.me/images/remy-2014-twitter.png" crossOrigin>    
50 |   </div>
51 | </body>
52 | </html>


--------------------------------------------------------------------------------
/tight-morning-279/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>2018 talks</title>
 7 |   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 8 | <style id="jsbin-css">
 9 | * {
10 |   font-family: sans-serif;
11 |   line-height: 1.4;
12 | }
13 | 
14 | li {
15 |   margin: 20px 0;
16 | }
17 | 
18 | .desc {
19 |   color: #444;
20 | }
21 | </style>
22 | </head>
23 | <body>
24 |   <ol id="app">
25 |     <li v-for="talk in talks">{{ talk.title }}<br><span class="desc">{{ talk.description }}</span></li>
26 |   </ol>
27 | <!--boot js--><script id="jsbin-javascript" defer>const vue = new Vue({
28 |   el: '#app',
29 |   data: {
30 |     talks: []
31 |   },
32 |   mounted() {
33 |   	fetch('https://2018.ffconf.org/api/event/2018').then(res => res.json()).then(res => {
34 |       this.talks = res;
35 |     })
36 |   }
37 | })
38 | </script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/tight-rice-9E8/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let seed = Date.now();
 3 | let ctr = 0;
 4 | 
 5 | function setSeed(s) {
 6 |   seed = s;
 7 | }
 8 | 
 9 | function pick(n) {
10 |   ctr++;
11 |   let index = random() >> 8; // high byte
12 |   index &= n;
13 |   index += ctr;
14 | 
15 |   return index % n;
16 | }
17 | 
18 | function random() {
19 |   const value = generate(seed);
20 |   seed = value;
21 |   return value;
22 | }
23 | 
24 | function generate(value) {
25 |   return ((((value >> 9) & 1) ^ ((value >> 1) & 1)) << 15) | (value >> 1);
26 | }
27 | 
28 | export default pick;
29 | 


--------------------------------------------------------------------------------
/tinygif/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>Tiny gif</title>
  7 |   
  8 | <script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
  9 | <style id="jsbin-css">
 10 | * {
 11 |   font-family: 'ubuntu mono';
 12 |   box-sizing: border-box;
 13 |   font-size: 18px;
 14 | }
 15 | 
 16 | h1 {
 17 |   font-size: 26px;
 18 | }
 19 | 
 20 | img {
 21 |   transform: scale(20);
 22 |   transform-origin: 0 0;
 23 |   margin: 0 auto;
 24 |   display: block;
 25 | }
 26 | 
 27 | main {
 28 |   display: flex;
 29 |   flex-direction: column;
 30 |   align-items: center;
 31 |   justify-content: center;
 32 | }
 33 | 
 34 | main > div {
 35 |   padding: 32px 0;
 36 |   overflow: scroll;
 37 | }
 38 | 
 39 | #result pre {
 40 |   max-width: 100vw;
 41 | }
 42 | 
 43 | @media screen and (min-width: 500px) {
 44 |   pre:before {
 45 |     color: #ccc;
 46 |     content: '<img src="';
 47 |   }
 48 | 
 49 |   pre:after {
 50 |     color: #ccc;
 51 |     content: '">';
 52 |   }
 53 | }
 54 | </style>
 55 | </head>
 56 | <body>
 57 |   <main>
 58 |     <h1>The teeniest colour gif</h1>
 59 |     <div id="result">
 60 |       <pre></pre>      
 61 |       <a target="_blank"><img title="click to download"></a>
 62 |     </div>
 63 |     <div>
 64 |       <div class="colorPicker"></div>
 65 |     </div>
 66 |   </main>
 67 | <!--boot js--><script id="jsbin-javascript" defer>console.clear()
 68 | 
 69 | const colorPicker = new iro.ColorPicker(".colorPicker", {
 70 |   // color picker options
 71 |   // Option guide: https://iro.js.org/guide.html#Color-Picker-Options
 72 |   width: 280,
 73 |   color: "rgb(255, 0, 0)",
 74 |   borderWidth: 1,
 75 |   borderColor: "#fff",
 76 | });
 77 | 
 78 | const img = document.querySelector('img');
 79 | const output = document.querySelector('pre');
 80 | 
 81 | const pixel = (rgb) => `47 49 46 38 39 61 01 00 01 00 80 01 00 ${rgb.join(' ')} 00 00 00 2C 00 00 00 00 01 00 01 00 00 02 02 44 01 00 3B`;
 82 | 
 83 | function update(hex) {
 84 |   const rgb = hex.match(/([a-f0-9]{2})/gi);
 85 |   const string = pixel(rgb).split(' ').filter(Boolean).map(_ => parseInt(_.trim(), 16));
 86 |   
 87 |   const dataurl = `data:image/gif;base64,${btoa(String.fromCharCode(...string))}`;
 88 |   
 89 | 	img.src = dataurl;
 90 |   img.parentNode.href = dataurl;
 91 |   img.parentNode.download = `1x1-${hex.substring(1)}.gif`
 92 |   output.innerHTML = dataurl;
 93 | }
 94 | 
 95 | colorPicker.on('color:change', colour => {
 96 |   update(colour.hexString);
 97 | });
 98 | 
 99 | update(colorPicker.color.hexString);
100 | </script>
101 | </body>
102 | </html>


--------------------------------------------------------------------------------
/tinytime/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 | 	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7 |   <title>JS Bin</title>
  8 | <style id="jsbin-css">
  9 | * {
 10 |   font-family: 'ubuntu mono', sans-serif;
 11 |   font-size: 18px;
 12 | }
 13 | </style>
 14 | </head>
 15 | <body>
 16 |   <main id="app">
 17 |   <p>
 18 |     Time: <strong>{{ time }}</strong>
 19 |   </p>
 20 |   <div>
 21 |     <p>
 22 |       Quarter
 23 |     </p>
 24 |     <input v-model="quarter" value="1" id="q1" type="checkbox">
 25 |     <input v-model="quarter" value="2" id="q2" type="checkbox">
 26 |     
 27 |     {{ q }}
 28 |   </div>
 29 |   <div>
 30 |     <p>
 31 |       Min
 32 |     </p>
 33 |     <input v-model="minute" value="1" id="m1" type="checkbox">
 34 |     <input v-model="minute" value="2" id="m2" type="checkbox">
 35 |     <input v-model="minute" value="4" id="m4" type="checkbox">
 36 |     <input v-model="minute" value="8" id="m8" type="checkbox">
 37 |     
 38 |     {{ m }}
 39 |   </div>
 40 |     <div>
 41 |   <p>
 42 |       Hour
 43 |     </p>
 44 |     <input v-model="hour" value="1" id="h1" type="checkbox">
 45 |     <input v-model="hour" value="2" id="h2" type="checkbox">
 46 |     <input v-model="hour" value="4" id="h4" type="checkbox">
 47 |     <input v-model="hour" value="8" id="h8" type="checkbox">
 48 |     
 49 |     {{ h }}
 50 |   </div>
 51 |     </main>
 52 | <!--boot js--><script id="jsbin-javascript" defer>var app = new Vue({
 53 |   el: '#app',
 54 |   data: {
 55 |     hour: [],
 56 |     quarter: [],
 57 |     minute: [],
 58 |     m: 0,
 59 |     h: 0,
 60 |     q: 0,
 61 |   },
 62 |   computed: {
 63 |     time: function () {
 64 |       const h = this.hour.map(_ => parseInt(_, 10)).reduce((acc, curr) => acc + curr, 0);
 65 |       this.h = h;
 66 |       const q = 15 * this.quarter.map(_ => parseInt(_, 10)).reduce((acc, curr) => acc + curr, 0);
 67 |       this.q = q;
 68 |       
 69 |       const m = this.minute.map(_ => parseInt(_, 10)).reduce((acc, curr) => acc + curr, 0);
 70 |       this.m = m;
 71 |       
 72 |       return `${h}:${(q + m + '').padStart(2, '0')}`;
 73 |     }
 74 |   }
 75 | });
 76 | 
 77 | 
 78 | const now = new Date();
 79 | const hour = now.getHours() % 12;
 80 | if (hour & 1) app.hour.push(1);
 81 | if (hour & 2) app.hour.push(2);
 82 | if (hour & 4) app.hour.push(2);
 83 | if (hour & 8) app.hour.push(2);
 84 | 
 85 | const minutes = now.getMinutes(); 
 86 | 
 87 | const q = (minutes / 15 | 0)
 88 | if (q & 1) app.quarter.push(1);
 89 | if (q & 2) app.quarter.push(2);
 90 | 
 91 | const delta = minutes - (q * 15);
 92 | if (delta & 1) app.minute.push(1);
 93 | if (delta & 2) app.minute.push(2);
 94 | if (delta & 4) app.minute.push(4);
 95 | if (delta & 8) app.minute.push(8);
 96 | 
 97 | //# sourceURL=restless-river-6D2.js
 98 | </script>
 99 | 
100 | 
101 | 
102 | <script id="jsbin-source-javascript" type="text/source-javascript">var app = new Vue({
103 |   el: '#app',
104 |   data: {
105 |     hour: [],
106 |     quarter: [],
107 |     minute: [],
108 |     m: 0,
109 |     h: 0,
110 |     q: 0,
111 |   },
112 |   computed: {
113 |     time: function () {
114 |       const h = this.hour.map(_ => parseInt(_, 10)).reduce((acc, curr) => acc + curr, 0);
115 |       this.h = h;
116 |       const q = 15 * this.quarter.map(_ => parseInt(_, 10)).reduce((acc, curr) => acc + curr, 0);
117 |       this.q = q;
118 |       
119 |       const m = this.minute.map(_ => parseInt(_, 10)).reduce((acc, curr) => acc + curr, 0);
120 |       this.m = m;
121 |       
122 |       return `${h}:${(q + m + '').padStart(2, '0')}`;
123 |     }
124 |   }
125 | });
126 | 
127 | 
128 | const now = new Date();
129 | const hour = now.getHours() % 12;
130 | if (hour & 1) app.hour.push(1);
131 | if (hour & 2) app.hour.push(2);
132 | if (hour & 4) app.hour.push(2);
133 | if (hour & 8) app.hour.push(2);
134 | 
135 | const minutes = now.getMinutes(); 
136 | 
137 | const q = (minutes / 15 | 0)
138 | if (q & 1) app.quarter.push(1);
139 | if (q & 2) app.quarter.push(2);
140 | 
141 | const delta = minutes - (q * 15);
142 | if (delta & 1) app.minute.push(1);
143 | if (delta & 2) app.minute.push(2);
144 | if (delta & 4) app.minute.push(4);
145 | if (delta & 8) app.minute.push(8);
146 | 
147 | </script></body>
148 | </html>


--------------------------------------------------------------------------------
/twilight-feather-7EF/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <title>JS Bin</title>
  7 | </head>
  8 | <body>
  9 |   <button>
 10 |     Query
 11 |   </button>
 12 |   <textarea></textarea>
 13 |   <script>
 14 | var body = `<!DOCTYPE html>
 15 | <html lang="en-ie">
 16 | <head>
 17 | <meta charset="utf-8" />
 18 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 19 | <meta name="theme-color" content="#ffffff" />
 20 | <title>Adactio: Journal—The Weight of the WWWorld is Up to Us by Patty Toland</title>
 21 | <meta name="description" content="A presentation at An Event Apart Chicago 2019." />
 22 | <meta name="author" content="Jeremy Keith" />
 23 | <meta name="robots" content="index,follow" />
 24 | <meta property="og:type" content="article" />
 25 | <meta property="article:author" content="Jeremy Keith" />
 26 | <meta name="twitter:card" content="summary" />
 27 | <meta name="twitter:image" property="og:image" content="https://adactio.com/images/photo-300.jpg" />
 28 | <meta name="twitter:site" content="@adactio" />
 29 | <meta name="twitter:site:id" content="11250" />
 30 | <meta name="twitter:creator" content="@adactio" />
 31 | <meta name="twitter:creator:id" content="11250" />
 32 | <meta name="twitter:url" property="og:url" content="https://adactio.com/journal/15740" />
 33 | <meta name="twitter:title" property="og:title" content="The Weight of the WWWorld is Up to Us by Patty Toland" />
 34 | <meta name="twitter:description" property="og:description" content="A presentation at An Event Apart Chicago 2019." />
 35 | <link rel="canonical" href="https://adactio.com/journal/15740">
 36 | <link rel="alternate amphtml" type="text/html" href="https://adactio.com/journal/15740/amp" />
 37 | <link rel="me" href="mailto:jeremy@adactio.com" />
 38 | <link rel="me" href="sms:+447792069292" />
 39 | <link rel="me" href="ni:///sha-256;y5LuBRUHdxOlutHxDS2OnyEHuyFDai-rTxWMTuauXlI?ct=application/x-x509-user-cert" />
 40 | <link rel="webmention" href="https://adactio.com/webmention" />
 41 | <link rel="authorization_endpoint" href="https://indieauth.com/auth" />
 42 | <link rel="token_endpoint" href="https://tokens.indieauth.com/token" />
 43 | <link rel="micropub" href="https://adactio.com/micropub" />
 44 | <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Adactio" />
 45 | <link rel="openid.server" href="https://indieauth.com/openid" />
 46 | <link rel="openid.delegate" href="https://adactio.com/" />
 47 | <link rel="microsub" href="https://aperture.p3k.io/microsub/152" />
 48 | <link rel="alternate" type="application/rss+xml" title="Journal RSS" href="/journal/rss" />
 49 | <link rel="alternate" type="application/rss+xml" title="Links RSS" href="/links/rss" />
 50 | <link rel="alternate" type="application/rss+xml" title="Articles RSS" href="/articles/rss" />
 51 | <link rel="alternate" type="application/rss+xml" title="Notes RSS" href="/notes/rss" />
 52 | <link rel="alternate" type="application/rss+xml" title="Journal, links, articles and notes RSS" href="/rss/" />
 53 | <link rel="alternate" type="application/json" title="Journal JSON Feed" href="/journal/feed.json" />
 54 | <link rel="alternate" type="application/json" title="Links JSON Feed" href="/links/feed.json" />
 55 | <link rel="alternate" type="application/json" title="Articles JSON Feed" href="/articles/feed.json" />
 56 | <link rel="alternate" type="application/json" title="Notes JSON Feed" href="/notes/feed.json" />
 57 | <link rel="author" href="/" title="About the author" />
 58 | <link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png" />
 59 | <link rel="shortcut icon" href="/icon.png" sizes="300x300" type="image/png" />
 60 | <link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png" />
 61 | <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png" />
 62 | <link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png" />
 63 | <link rel="manifest" href="/manifest.json" />
 64 | <link rel="stylesheet" href="/skins/default/global.css" />
 65 | <link rel="stylesheet" href="/includes/css/print.css" media="print" title="print" />
 66 | 
 67 | <!-- Ah, I see you want a peek at the source code. -->
 68 | <!-- That's the great thing about the web: -->
 69 | <!-- reverse engineering. -->
 70 | <!-- If you have any questions, feel free to write to me: -->
 71 | <!-- jeremy at adactio dot com -->
 72 | 
 73 | <style id="jsbin-css">
 74 | * {
 75 |   font-family: sans-serif;
 76 |   box-sizing: border-box;
 77 |   font-size: 16px;
 78 | }
 79 | 
 80 | textarea {
 81 |   margin: 20px 0;
 82 |   padding: 8px;
 83 |   display: block;
 84 |   width: 100%;
 85 | }
 86 | </style>
 87 | </head>
 88 | <body>
 89 | 
 90 | <!-- Begin with the logo -->
 91 | 
 92 | <div id="logo">
 93 | <a href="https://adactio.com" title="Home"><span>adactio</span></a>
 94 | </div>
 95 | 
 96 | <header role="banner">
 97 | 
 98 | <!-- Show any nice pictures here -->
 99 | 
100 | <div role="presentation">
101 | <div class="journal"></div>
102 | </div>
103 | 
104 | <!-- Now we have the navigation -->
105 | 
106 | <div role="navigation">
107 | 
108 | <nav>
109 | <ul>
110 | <li><a aria-current="location" class="here" href="/journal">Journal</a></li>
111 | <li><a href="/links">Links</a></li>
112 | <li><a href="/articles">Articles</a></li>
113 | <li><a href="/notes">Notes</a></li>
114 | <li><a href="/about">About</a></li>
115 | </ul>
116 | </nav>
117 | 
118 | </div>
119 | 
120 | </header>
121 | 
122 | <!-- Here's the main content -->
123 | 
124 | <main role="main">
125 | <article class="h-entry" itemscope itemtype="http://schema.org/BlogPosting">
126 | <!-- A presentation at An Event Apart Chicago 2019. -->
127 | 
128 | <h1 class="p-name" itemprop="headline">
129 | The Weight of the WWWorld is Up to Us by Patty Toland
130 | </h1>
131 | <h2>
132 | <time class="dt-published" datetime="2019-08-27T21:41:36"  itemprop="dateCreated pubdate datePublished">
133 | August 27th, 2019
134 | </time>
135 | </h2>
136 | 
137 | <div class="e-content" itemprop="articleBody">
138 | <p>It&#8217;s Patty Toland&#8217;s first time at <a href="https://aneventapart.com/event/chicago-2019">An Event Apart</a>! She&#8217;s from the fantabulous <a href="https://www.filamentgroup.com/">Filament Group</a>. They&#8217;re dedicated to making the web work for everyone.</p>
139 | 
140 | <p>A few years ago, a good friend of Patty&#8217;s had a medical diagnosis that required everyone to pull together. Another friend shared an article about how not to say the wrong thing. This is <a href="https://www.psychologytoday.com/us/blog/promoting-hope-preventing-suicide/201705/ring-theory-helps-us-bring-comfort-in">ring theory</a>. In a moment of crisis, the person involved is in the centre. You need to understand where you are in this ring structure, and only ever help and comfort <em>inwards</em> and dump concerns and problems <em>outwards</em>.</p>
141 | 
142 | <p>At the same time, Patty spent time with her family at the beach. Everyone reads the same books together. There was a book about a platoon leader in Vietnam. 80% of the story was literally a litany of stuff&mdash;what everyone was carrying. This was peppered with the psychic and emotional loads that they were carrying.</p>
143 | 
144 | <p>A month later there was a lot of coverage of Syrian refugees arriving in Europe. People were outraged to see refugees carrying smartphones as though that somehow showed they weren&#8217;t in a desperate situation. But smartphones are absolutely a necessity in that situation, and most of the phones were less expensive, lower-end devices. Refugeeinfo.eu was a useful site for people in crisis, but the navigation was designed to require JavaScript.</p>
145 | 
146 | <p>When people thing about mobile, they think about freedom and mobility. But with that JavaScript decision, the developers piled baggage on to the users.</p>
147 | 
148 | <p>There was a common assertion that slow networks were a third-world challenge. Remember Facebook&#8217;s network challenges? They always talked about new markets in India and Africa. The implication is that this isn&#8217;t <em>our</em> problem in, say, Omaha or New York.</p>
149 | 
150 | <p>Pew Research provided a lot of data back then that showed that this thinking was wrong. Use of cell phones, especially smartphones and tablets, escalated dramatically in the United States. There was a trend towards mobile-only usage. This was in low-income households&mdash;about one third of the population. Among 5,400 panelists, 15% did not have a JavaScript-enabled device.</p>
151 | 
152 | <p>Pew Research provided updated data this year. The research shows an increase in those trends. Half of the population access the web primarily on mobile. The cost of a broadband subscription is too expensive for many people. Sometimes broadband access simply isn&#8217;t available.</p>
153 | 
154 | <p>There&#8217;s a term called &#8220;the homework gap.&#8221; Two thirds of teachers assign broadband-dependent homework, while one third of students have no access to broadband.</p>
155 | 
156 | <p>At most 37% of people have unlimited data. Most people run out of data on a frequent basis.</p>
157 | 
158 | <p>Speed also varies wildly. 4G doesn&#8217;t really mean anything. The data is all over the place.</p>
159 | 
160 | <p>This shows that network issues are definitely not just a third world challenge.</p>
161 | 
162 | <p>On the 25th anniversary of the web, Tim Berners-Lee said the web&#8217;s potential was only just beginning to be glimpsed. Everyone has a role to play to ensure that the web serves all of humanity. In his contract for the web, Tim outlined what governments, companies, and users need to do. This reminded Patty of ring theory. The user is at the centre. Designers and developers are in the next circle out. Then there&#8217;s the circle of companies. Then there are platforms, browsers, and frameworks. Finally there&#8217;s the outer circle of governments.</p>
163 | 
164 | <p>Are we helping in or dumping in? If you look at the data for the average web page size (2 megabytes), we are definitely dumping in. The size of third-party JavaScript has octupled.</p>
165 | 
166 | <p>There&#8217;s no way for a user to know before clicking a link how big and bloated the page is going to be. Even if they abandon the page load, they&#8217;ve still used (and wasted) a lot of data.</p>
167 | 
168 | <p>Third party scripts&mdash;like ads&mdash;are really bad at dumping in (to use the ring theory model). The <em>best</em> practices for ads suggest that up to 100 additional HTTP requests is totally acceptable. Unbelievable! It doesn&#8217;t matter how performant you&#8217;ve made a site when this crap gets piled on top of it.</p>
169 | 
170 | <p>In 2018, the internet&#8217;s data centres alone may already have had the same carbon footprint as all global air travel. This will probably triple in the next seven years. The amount of carbon it takes to train a single AI algorithm is more than the entire life cycle of a car. Then there&#8217;s fucking Bitcoin. A single Bitcoin transaction could power 21 US households. It is <em>designed</em> to use&mdash;specifically, waste&mdash;more and more energy over time.</p>
171 | 
172 | <p>What should we be doing?</p>
173 | 
174 | <p>Accessibility should be at the heart of what we build. Plan, test, educate, and advocate. If advocacy doesn&#8217;t work, fear can be a motivator. There&#8217;s an increase in accessibility lawsuits.</p>
175 | 
176 | <p>Our websites should be as light as possible. Ask, measure, monitor, and optimise. <a href="http://requestmap.webperf.tools/">RequestMap</a> is a great tool for visualising requests. You can see the size and scale of third-party requests. You can also see when images are far, far bigger than they need to be.</p>
177 | 
178 | <p>Take a critical guide to everything and pare everything down. Set perforance budgets&mdash;file size budgets, for example. Optimise images, subset custom fonts, lazyload images and videos, get third-party tools out of the critical path (or out completely), and seek out lighter frameworks.</p>
179 | 
180 | <p>Test on real devices that real people are using. See Alex Russell&#8217;s data on the differences between the kind of devices <em>we</em> use and typical low-end devices. We literally need to stop people in JavaScript.</p>
181 | 
182 | <p>Push the boundaries. See the amazing work that Adrian Holovaty did with Soundslice. He had to make on-the-fly sheet music generation work on old iPads that musicians like to use. He recommends keeping old devices around to see how poorly your product is working on it.</p>
183 | 
184 | <blockquote>
185 |   <p>If you have some power, then your job is to empower somebody else.</p>
186 | </blockquote>
187 | 
188 | <p>&mdash;Toni Morrison</p>
189 | 
190 | </div>
191 | 
192 | <footer>
193 | <p class="meta">
194 | <time datetime="2019-08-27T21:41:36Z">
195 | 9:41pm
196 | </time>
197 | </p>
198 | <p class="meta">
199 | Tagged with
200 | <a rel="tag" href="/journal/tags/aeachi">aeachi</a>
201 | <a rel="tag" href="/journal/tags/aeachi2019">aeachi2019</a>
202 | <a rel="tag" href="/journal/tags/liveblogging">liveblogging</a>
203 | <a rel="tag" href="/journal/tags/conference">conference</a>
204 | <a rel="tag" href="/journal/tags/talk">talk</a>
205 | <a rel="tag" href="/journal/tags/presentation">presentation</a>
206 | <a rel="tag" href="/journal/tags/aneventapart">aneventapart</a>
207 | <a rel="tag" href="/journal/tags/performance">performance</a>
208 | <a rel="tag" href="/journal/tags/accessibility">accessibility</a>
209 | <a rel="tag" href="/journal/tags/networks">networks</a>
210 | <a rel="tag" href="/journal/tags/mobile">mobile</a>
211 | <a rel="tag" href="/journal/tags/bandwidth">bandwidth</a>
212 | <a rel="tag" href="/journal/tags/size">size</a>
213 | <a rel="tag" href="/journal/tags/speed">speed</a>
214 | <a rel="tag" href="/journal/tags/frontend">frontend</a>
215 | <a rel="tag" href="/journal/tags/development">development</a>
216 | <a rel="tag" href="/journal/tags/web">web</a>
217 | <a rel="tag" href="/journal/tags/humanity">humanity</a>
218 | </p>
219 | <p class="meta">
220 | Also on
221 | <a rel="syndication" class="u-syndication" href="https://medium.com/@adactio/4b7522fa0c60">Medium</a>
222 | </p>
223 | </footer>
224 | 
225 | <p>
226 | <a rel="next" href="/journal/15739" title="Web Forms: Now You See Them, Now You Don&rsquo;t! by Jason Grigsby">Older &raquo;</a>
227 | </p>
228 | 
229 | <form method="post" action="/webmention">
230 | <p>Have you published a response to this? <label for="webmention-source">Let me know the <abbr title="Uniform Resource Locator">URL</abbr></label>:</p>
231 | <input type="url" name="source" id="webmention-source" />
232 | <input type="hidden" name="target" value="https://adactio.com/journal/15740" />
233 | <button type="submit">Ping!</button>
234 | </form>
235 | 
236 | <section>
237 | <h2>Responses</h2>
238 | <article class="p-comment h-entry" id="comment74945">
239 | 
240 | <h3>
241 | <a class="p-name u-url" href="https://twitter.com/zachleat/status/1166754491561119745">
242 | Zach Leatherman
243 | </a>
244 | </h3>
245 | 
246 | <div class="e-content">
247 | <p>&ldquo;In 2018, the internet&rsquo;s data centers alone may already have had the same carbon footprint as all global air travel.&rdquo; &#128562;&#128562;&#128562; via <a href="https://adactio.com/journal/15740">adactio.com/journal/15740</a> <a href="https://twitter.com/adactio">@adactio</a>&rsquo;s summary of <a href="https://twitter.com/pattytoland">@pattytoland</a>&rsquo;s talk at <a href="https://twitter.com/search?q=%23aeachi">#aeachi</a></p>
248 | 
249 | </div>
250 | 
251 | <footer>
252 | <p class="meta">
253 | <a href="#comment74945" rel="bookmark">#</a>
254 | Posted by
255 | <cite class="h-card p-author">
256 | <a class="u-url p-name" href="https://twitter.com/zachleat/status/1166754491561119745">
257 | Zach Leatherman</a>
258 | </cite>
259 | on
260 | <abbr class="dt-published" title="2019-08-28T16:48:42">
261 | Wednesday,
262 | August 28th, 2019
263 | at
264 | 4:48pm
265 | </abbr>
266 | </p>
267 | </footer>
268 | 
269 | </article>
270 | <article class="p-comment h-entry" id="comment74947">
271 | 
272 | <h3>
273 | <a class="p-name u-url" href="https://twitter.com/scottjehl/status/1166756878229102593">
274 | Scott Jehl
275 | </a>
276 | </h3>
277 | 
278 | <div class="e-content">
279 | <p>Great notes/recap of <a href="https://twitter.com/pattytoland">@pattytoland</a>&#8217;s excellent talk at <a href="https://twitter.com/aneventapart">@aneventapart</a> Chicago yesterday by <a href="https://twitter.com/adactio">@adactio</a> <a href="https://twitter.com/search?q=%23aeachi">#aeachi</a> <a href="https://adactio.com/journal/15740">adactio.com/journal/15740</a></p>
280 | 
281 | </div>
282 | 
283 | <footer>
284 | <p class="meta">
285 | <a href="#comment74947" rel="bookmark">#</a>
286 | Posted by
287 | <cite class="h-card p-author">
288 | <a class="u-url p-name" href="https://twitter.com/scottjehl/status/1166756878229102593">
289 | Scott Jehl</a>
290 | </cite>
291 | on
292 | <abbr class="dt-published" title="2019-08-28T16:58:11">
293 | Wednesday,
294 | August 28th, 2019
295 | at
296 | 4:58pm
297 | </abbr>
298 | </p>
299 | </footer>
300 | 
301 | </article>
302 | <article class="p-comment h-entry" id="comment74946">
303 | 
304 | <h3>
305 | <a class="p-name u-url" href="https://twitter.com/nhoizey/status/1166759013813542912">
306 | Nicolas Hoizey
307 | </a>
308 | </h3>
309 | 
310 | <div class="e-content">
311 | <p>What if business air travel is reduced and replaced with conf calls? Even more carbon footprint for data centers, indeed. But I guess much more reduced carton footprint for air travel. (Not talking about air travel other than business here.)
312 | <a class="u-mention" href="https://adactio.com/journal/15740"></a></p>
313 | 
314 | </div>
315 | 
316 | <footer>
317 | <p class="meta">
318 | <a href="#comment74946" rel="bookmark">#</a>
319 | Posted by
320 | <cite class="h-card p-author">
321 | <a class="u-url p-name" href="https://twitter.com/nhoizey/status/1166759013813542912">
322 | Nicolas Hoizey</a>
323 | </cite>
324 | on
325 | <abbr class="dt-published" title="2019-08-28T17:06:40">
326 | Wednesday,
327 | August 28th, 2019
328 | at
329 | 5:06pm
330 | </abbr>
331 | </p>
332 | </footer>
333 | 
334 | </article>
335 | <article class="p-comment h-entry" id="comment74956">
336 | 
337 | <h3>
338 | <a class="p-name u-url" href="https://twitter.com/tkadlec/status/1166833933989928960">
339 | Tim Kadlec
340 | </a>
341 | </h3>
342 | 
343 | <div class="e-content">
344 | <p>It&#8217;s not the least bit surprising, but sounds like <a href="https://twitter.com/pattytoland">@pattytoland</a> gave a great talk at AEA! <a href="https://adactio.com/journal/15740">adactio.com/journal/15740</a></p>
345 | 
346 | </div>
347 | 
348 | <footer>
349 | <p class="meta">
350 | <a href="#comment74956" rel="bookmark">#</a>
351 | Posted by
352 | <cite class="h-card p-author">
353 | <a class="u-url p-name" href="https://twitter.com/tkadlec/status/1166833933989928960">
354 | Tim Kadlec</a>
355 | </cite>
356 | on
357 | <abbr class="dt-published" title="2019-08-28T22:04:23">
358 | Wednesday,
359 | August 28th, 2019
360 | at
361 | 10:04pm
362 | </abbr>
363 | </p>
364 | </footer>
365 | 
366 | </article>
367 | <article class="p-comment h-entry" id="comment74980">
368 | 
369 | <h3>
370 | <a class="p-name u-url" href="https://www.aaron-gustafson.com/notebook/links/the-weight-of-the-wwworld-is-up-to-us-by-patty-toland/">
371 | Aaron Gustafson
372 | </a>
373 | </h3>
374 | 
375 | <div class="e-content">
376 | <p>So much awesome content in Patty&rsquo;s talk. In particular&hellip;</p> <p>There was a common assertion that slow networks were a third-world challenge. Remember Facebook&rsquo;s network challenges? They always talked about new markets in India and Africa. The implication is that this isn&rsquo;t our problem in, say, Omaha or New York.</p> <p>Pew Research provided a lot of data back then that showed that this thinking was wrong. Use of cell phones, especially smartphones and tablets, escalated dramatically in the United States. There was a trend towards mobile-only usage. This was in low-income households&mdash;about one third of the population. Among 5,400 panelists, 15% did not have a JavaScript-enabled device.</p> <p class="read-on"> <a rel="original-article" href="https://adactio.com/journal/15740">Read on Adactio&rsquo;s Journal</a> </p>
377 | 
378 | </div>
379 | 
380 | <footer>
381 | <p class="meta">
382 | <a href="#comment74980" rel="bookmark">#</a>
383 | Posted by
384 | <cite class="h-card p-author">
385 | <a class="u-url p-name" href="https://www.aaron-gustafson.com/notebook/links/the-weight-of-the-wwworld-is-up-to-us-by-patty-toland/">
386 | Aaron Gustafson</a>
387 | </cite>
388 | on
389 | <abbr class="dt-published" title="2019-08-29T23:29:54">
390 | Thursday,
391 | August 29th, 2019
392 | at
393 | 11:29pm
394 | </abbr>
395 | </p>
396 | </footer>
397 | 
398 | </article>
399 | <article class="p-comment h-entry" id="comment74982">
400 | 
401 | <h3>
402 | <a class="p-name u-url" href="https://twitter.com/AaronGustafson/status/1167508031325822979">
403 | Aaron Gustafson
404 | </a>
405 | </h3>
406 | 
407 | <div class="e-content">
408 | <p>&#128278; The brilliant <a href="https://twitter.com/pattytoland">@pattytoland</a>&rsquo;s &ldquo;The Weight of the WWWorld is Up to Us&rdquo; talk as captured by <a href="https://twitter.com/adactio">@adactio</a>&rsquo;s furiously-typing fingers. <a href="https://twitter.com/search?q=%23AEACHI">#AEACHI</a> <a href="https://adactio.com/journal/15740">adactio.com/journal/15740</a></p>
409 | 
410 | </div>
411 | 
412 | <footer>
413 | <p class="meta">
414 | <a href="#comment74982" rel="bookmark">#</a>
415 | Posted by
416 | <cite class="h-card p-author">
417 | <a class="u-url p-name" href="https://twitter.com/AaronGustafson/status/1167508031325822979">
418 | Aaron Gustafson</a>
419 | </cite>
420 | on
421 | <abbr class="dt-published" title="2019-08-30T18:43:00">
422 | Friday,
423 | August 30th, 2019
424 | at
425 | 6:43pm
426 | </abbr>
427 | </p>
428 | </footer>
429 | 
430 | </article>
431 | <details class="p-comment h-entry">
432 | <summary><h3 class="p-name" style="display: inline">1 Like</h3></summary>
433 | <p class="meta" id="comment74933">
434 | <a href="#comment74933" rel="bookmark">#</a>
435 | Liked by
436 | <cite class="h-card p-author">
437 | <a class="u-url p-name" href="https://twitter.com/adactioJournal/status/1166478537395789826#favorited-by-19066088">
438 | Ivan Wilson</a>
439 | </cite>
440 | on
441 | <abbr class="dt-published" title="2019-08-28T01:13:09">
442 | Wednesday,
443 | August 28th, 2019
444 | at
445 | 1:13am
446 | </abbr>
447 | </p>
448 | </details>
449 | </section>
450 | 
451 | </article>
452 | 
453 | <script>
454 | <!--
455 | if (navigator.serviceWorker && navigator.serviceWorker.controller) {
456 |     window.addEventListener('load', function() {
457 |         var data = {
458 |             "title": "The Weight of the WWWorld is Up to Us by Patty Toland",
459 |             "description": "A presentation at An Event Apart Chicago 2019.",
460 |             "published": "August 27th, 2019",
461 |             "timestamp": "1566942096"
462 |         };
463 |         localStorage.setItem(
464 |             window.location.origin + window.location.pathname,
465 |             JSON.stringify(data)
466 |         );
467 |     });
468 | }
469 | //-->
470 | <\/script>
471 | </main>
472 | 
473 | <aside role="complementary">
474 | 
475 | <h2>More information</h2>
476 | 
477 | <!-- Begin the extra content -->
478 | 
479 | <div class="box">
480 | 
481 | <h3>About this site</h3>
482 | 
483 | <address class="vcard h-card">
484 | <a href="https://adactio.com/" class="url u-url" rel="me">Adactio</a> is the online home of <a href="mailto:jeremy@adactio.com" class="email fn p-name u-email">Jeremy Keith</a>, a <span class="role p-role">web developer</span> and <span class="title p-job-title">author</span> living and working in <span class="adr p-adr"><span class="locality p-locality">Brighton</span>, <span class="country-name p-country-name">England</span></span>.
485 | </address>
486 | <p><a href="/contact/">Get in touch</a></p>
487 | </div>
488 | 
489 | <div class="box">
490 | 
491 | <h3>Customise</h3>
492 | 
493 | <form method="get" action="/journal/15740" id="skinselection">
494 | <p>
495 | <label for="skin">Choose a theme&hellip;</label><br />
496 | <select name="skin" id="skin">
497 | <option value="default" selected="selected">default</option>
498 | <option value="tatemodern">tatemodern</option>
499 | <option value="seaside">seaside</option>
500 | <option value="zeldman">zeldman</option>
501 | <option value="adactizilla">adactizilla</option>
502 | <option value="sci-fi">sci-fi</option>
503 | <option value="renaissance">renaissance</option>
504 | <option value="hirnlego">hirnlego</option>
505 | </select>
506 | <input type="submit" value="Go!" id="submitskin" />
507 | <a href="/about/site/" title="what is this?">?</a>
508 | </p>
509 | </form>
510 | <p>This is the plain vanilla look.</p>
511 | 
512 | </div>
513 | 
514 | <div class="box" role="search">
515 | 
516 | <h3>Search</h3>
517 | 
518 | <form action="/journal/search/" method="get">
519 | <p><label for="query">Search the journal:</label><br /><input type="search" name="query" id="query" value="" />
520 | <button type="submit">Go!</button></p>
521 | </form>
522 | 
523 | <ul>
524 | <li>Peruse the <a rel="contents" href="/journal/archive/" title="chronologically ordered">archive</a></li>
525 | <li>Browse the <a href="/journal/tags/">tags</a></li>
526 | </ul>
527 | 
528 | </div>
529 | 
530 | <div class="box">
531 | 
532 | <h3>Subscribe</h3>
533 | 
534 | <p>You can subscribe to the <a href="/journal/rss" rel="alternate" type="application/rss+xml" title="Journal RSS">journal RSS feed</a> or you can follow <a href="https://twitter.com/adactioJournal">@adactioJournal</a> on Twitter.</p>
535 | 
536 | </div>
537 | 
538 | <div class="box">
539 | 
540 | <h3>Recommended reading</h3>
541 | <p>Hand-picked highlights from the archive.</p>
542 | <ul>
543 | <li>
544 | <h4><a href="/journal/15050">Split</a></h4>
545 | Materials and tools; client and server; declarative and imperative; inclusion and privilege.
546 | </li>
547 | <li>
548 | <h4><a href="/journal/9016">Web! What is it good for?</a></h4>
549 | Not absolutely nothing, but not absolutely everything either.
550 | </li>
551 | <li>
552 | <h4><a href="/journal/6786">Seams</a></h4>
553 | There is a crack, a crack in everything. That’s how the light gets in.
554 | </li>
555 | <li>
556 | <h4><a href="/journal/1283">Hyperdrive</a></h4>
557 | Last night in San Francisco.
558 | </li>
559 | <li>
560 | <h4><a href="/journal/1376">Design doing</a></h4>
561 | The opposite of design thinking.
562 | </li>
563 | <li>
564 | <h4><a href="/journal/1530">Iron Man and me</a></h4>
565 | The story of how one of my Flickr pictures came to be used in a Hollywood movie.
566 | </li>
567 | </ul>
568 | 
569 | </div>
570 | </aside>
571 | 
572 | 
573 | <!-- The large print giveth and the small print taketh away -->
574 | 
575 | <footer role="contentinfo">
576 | <p>&copy; 1998 - 2019 <a href="mailto:jeremy@adactio.com">Jeremy Keith</a>.</p>
577 | </footer>
578 | 
579 | <script src="/includes/javascript/global.js" defer="defer"><\/script>
580 | <script>
581 | <!--
582 | // Register our service-worker
583 | if (navigator.serviceWorker) {
584 |     window.addEventListener('load', function() {
585 |         navigator.serviceWorker.register('/serviceworker.js', {
586 |             scope: '/'
587 |         });
588 |         if (navigator.serviceWorker.controller) {
589 |             navigator.serviceWorker.controller.postMessage({'command': 'trimCaches'});
590 |         }
591 |     });
592 | }
593 | //-->
594 | <\/script>
595 | <script>
596 | <!--
597 | (function() {
598 |     // Generate a timestamp (in seconds) on the server. This won't change if the page is served from a cache.
599 |     var serverTimestamp = 1567254672;
600 |     // Create a new Date object from the local date and time on the client.
601 |     var localDate = new Date();
602 |     // Convert the local date time to Universal Time (same as the server).
603 |     var localUTCString = localDate.toUTCString();
604 |     // Create a new Date object from the UTC date and time on the client.
605 |     var UTCDate = new Date(localUTCString);
606 |     // Generate a timestamp (in seconds) from the UTC date and time on the client.
607 |     var clientTimestamp = UTCDate.getTime() / 1000;
608 |     // Compare the server-generated timestamp to the client-generated timestamp.
609 |     if (clientTimestamp - serverTimestamp > (60 * 5)) {
610 |         document.querySelector('main').insertAdjacentHTML('afterbegin',\`
611 |         <p class="box">
612 |         <button style="float: right" onclick="this.parentNode.remove()">dismiss</button>
613 |         This page might be out of date. You can try <a href="javascript:window.location=window.location.href">refreshing</a>.
614 |         </p>
615 |         \`);
616 |     }
617 | })()
618 | //-->
619 | <\/script>`
620 |   </script>
621 | <!--boot js--><script id="jsbin-javascript" defer>console.clear()
622 | 
623 | document.querySelector('textarea').value = body;
624 | 
625 | document.querySelector('button').onclick = () => {
626 |   const html = document.querySelector('textarea').value;
627 |   
628 |   const p = new DOMParser();
629 |   const dom = p.parseFromString(html, 'text/html');
630 |   
631 |   console.log(dom.querySelector('title').innerText);
632 |   console.log(dom.querySelector('time').getAttribute('datetime'));
633 | }
634 | </script>
635 | </body>
636 | </html>


--------------------------------------------------------------------------------
/wandering-bonus-846/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width">
  6 |   <meta name="description" content="DMG logo gen">
  7 |   <title>JS Bin</title>
  8 | <style id="jsbin-css">
  9 | html {
 10 |   background: #efefef;
 11 |   color: #111;
 12 | }
 13 | 
 14 | * {
 15 |   font-family: "ubuntu mono", "monaco";
 16 | 	background: inherit;
 17 |   color: inherit;
 18 |   box-sizing: border-box;
 19 | }
 20 | 
 21 | body {
 22 |   padding: 20px;
 23 |   max-width: 800px;
 24 |   margin: 0 auto;
 25 | }
 26 | 
 27 | textarea {
 28 |   border: 2px solid #333;
 29 |   padding: 8px;
 30 |   width: 100%;
 31 |   max-width: 100%;
 32 |   text-transform: uppercase;
 33 | }
 34 | 
 35 | textarea:focus {
 36 |   background: white;
 37 | }
 38 | 
 39 | canvas {
 40 |   cursor: pointer;
 41 |   image-rendering: pixelated;
 42 |   border: 0;
 43 |   display: block;
 44 |   margin: 20px auto;
 45 |   width: calc(48px * 12);
 46 | 	background: #fff;
 47 |   padding: 0px;
 48 | }
 49 | </style>
 50 | </head>
 51 | <body>
 52 | <textarea spellcheck="false" placeholder="hex values here" id="input">CE ED 66 66 CC 0D 00 0B 03 73 00 83 00 0C 00 0D 00 08 11 1F 88 89 00 0E
 53 | DC CC 6E E6 DD DD D9 99 BB BB 67 63 6E 0E EC CC DD DC 99 9F BB B9 33 3E</textarea>
 54 | <canvas></canvas>
 55 |   <p>
 56 |     Either draw on the canvas above, or enter hex values in the text field. Left click = black, right click (or shift + click) = white;
 57 |   </p>
 58 | <!--boot js--><script id="jsbin-javascript" defer>console.clear();
 59 | const ctx = document.querySelector('canvas').getContext('2d');
 60 | ctx.canvas.width = 48;
 61 | ctx.canvas.height = 8;
 62 | 
 63 | const black = new ImageData(1, 1);
 64 | black.data[3] = 255;
 65 | const white = new ImageData(1, 1);
 66 | 
 67 | const input = document.querySelector('#input');
 68 | input.oninput = render;
 69 | 
 70 | let drawing = false;
 71 | let shift = false;
 72 | 
 73 | ctx.canvas.onmousedown = down;
 74 | ctx.canvas.oncontextmenu = e => {
 75 |   shift = true;
 76 |   draw(e);
 77 | }
 78 | 
 79 | ctx.canvas.onmousemove = (event) => {
 80 |   if (drawing) draw(event);
 81 | }
 82 | 
 83 | document.body.onmouseup = () => {
 84 |   drawing = false;
 85 |   shift = false;
 86 | }
 87 | 
 88 | render();
 89 | 
 90 | function down(event) {
 91 |   drawing = true;
 92 |   draw(event);
 93 | }
 94 | 
 95 | function draw(e) {
 96 |   if (e.shiftKey) shift = true;
 97 |   e.preventDefault();
 98 |   
 99 |   const { x, y, index } = getCoords(e, 12, 12);
100 |   
101 |   const colour = shift ? white : black;
102 |   
103 |   ctx.putImageData(colour, x, y);
104 | 
105 |   
106 |   // serialise
107 |   const image = ctx.getImageData(0, 0, 48, 8);
108 |   const bits = Array.from({ length: 48 * 8 }, (_, i) => image.data[i * 4 + 3] > 0 ? 1 : 0);    
109 |   const serialised = Uint8Array.from({ length: 48 });
110 |   
111 |   for (let i = 0; i < bits.length; i++) {
112 |     const { byte, offset, i: j } = getBitPositionForI(i);
113 |     const bit = bits[j];
114 |     
115 |     let v = serialised[byte];
116 |     v = v & ~(1 << offset); // zero out our bit
117 |     if (bit) {
118 |       v = v | (1 << offset);
119 |     }
120 |     serialised[byte] = v;
121 | 
122 |   }
123 |   
124 |   const res = Array.from(serialised).map(toHex).join(" ");
125 |   input.value = res;
126 | }
127 | 
128 | function toHex(_) {
129 |   return _.toString(16).padStart(2, "0").toUpperCase();
130 | }
131 | 
132 | function getBitPositionForI(i) {
133 |   const x = i % 48;
134 |   const y = (i / 48) | 0;
135 |   let byte = (y / 2 | 0) + (x / 4 | 0) * 2;
136 |   if (y > 3) byte += 22; // FIXME unsure why it's 22!
137 |   
138 |   let offset = i % 4;
139 |   if (y % 2) offset += 4;
140 | 
141 |   return { byte, offset: 7 - offset, i }
142 | }
143 | 
144 | function getCoords(e, scale) {
145 |   let { clientX, clientY } = e;
146 | 
147 |   if (e.type.startsWith('touch')) {
148 |     clientX = e.touches[0].clientX;
149 |     clientY = e.touches[0].clientY;
150 |   }
151 | 
152 |   const rect = e.target.getBoundingClientRect();
153 |   const x = ((clientX - rect.left) / scale) | 0; //x position within the element.
154 |   const y = ((clientY - rect.top) / scale) | 0; //y position within the element.
155 |   const index = xyToIndex({ x, y, w: 48, h: 8 });
156 |   return { x, y, index };
157 | }
158 | 
159 | function xyToIndex({ x, y, w, h }) {
160 |   if (x < 0) {
161 |     return null;
162 |   }
163 | 
164 |   if (x >= w) {
165 |     return null;
166 |   }
167 | 
168 |   if (y >= h) {
169 |     return null;
170 |   }
171 | 
172 |   return w * y + x;
173 | }
174 | 
175 | function render() {
176 |   const values = input.value;
177 |   
178 |   ctx.clearRect(0, 0, 48, 8);
179 |   
180 |   // now paint
181 |   
182 |   const parsed = values.split(/[\s,\n]/).filter(Boolean).map(_ => parseInt('0x' + _, 16));
183 |   
184 |   const bits = parsed.map(toBin).join("").split("");
185 |   const image = new ImageData(48, 8);
186 |   
187 |   let pos = 0;
188 | 
189 |   // noprotect
190 |   for (let y = 0; y < 8; ++y) {
191 |     let i = ((Math.floor(y / 2) % 2) + Math.floor(y / 4) * 24);
192 |     for (let x = 0; x < 12; ++x, i += 2) {
193 |       const nibble = (y % 2) ? (parsed[i] & 0xF) : (parsed[i] >> 4);
194 |       for (let b = 4; b--; ) {
195 |         const res = ((nibble >> b) & 1);
196 |         
197 |         if (res) {
198 |           image.data[pos * 4 + 3] = 255;
199 |         }
200 |         
201 |         pos++;
202 |       }
203 |     }
204 |   }
205 |     
206 |   ctx.putImageData(image, 0, 0);
207 | }
208 | 
209 | function toBin(v) {
210 |   return v.toString(2).padStart(8, "0");
211 | }
212 | </script>
213 | </body>
214 | </html>


--------------------------------------------------------------------------------
/wild-queen-E4E/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width">
 6 |   <title>JS Bin</title>
 7 | <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 |   font-size: 40px;
11 | }
12 | 
13 | p:after {
14 |   content: ' desktop detected';
15 | }
16 | 
17 | 
18 | @media (max-width: 900px) and (hover: none), (max-width: 900px) and (pointer: coarse) {
19 |   p:after {
20 |     content: ' mobile detected';
21 |   }
22 | }
23 | </style>
24 | </head>
25 | <body>
26 | <p>
27 |   testing
28 |   </p>
29 | <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
30 | 
31 | </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/winter-butterfly-67F/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 | 		<meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width">
 6 |     <title>Remy's page</title>
 7 |   <style id="jsbin-css">
 8 | * {
 9 |   font-family: sans-serif;
10 | }
11 | </style>
12 | </head>
13 |   <body>
14 |     <h1>
15 |       Welcome to Remy's page
16 |     </h1>
17 |     <p>
18 |       This is a safe place to visit.
19 |     </p>
20 |     <p>
21 |       <img alt="Photo of Remy smiling at the camera" src="https://remysharp.com/images/remy.jpg">
22 |     </p>
23 |   <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
24 | 
25 | </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/wispy-meadow-453/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Parcel Sandbox</title>
 5 |     <meta charset="UTF-8" />
 6 |   <style id="jsbin-css">
 7 | * {
 8 |   font-family: sans-serif;
 9 | }
10 | 
11 | iframe {
12 |   display: block;
13 | }
14 | 
15 | div {
16 |   border: 5px solid #ccc;
17 |   padding: 16px;
18 |   margin: 12px;
19 |   display: inline-block;
20 | }
21 | 
22 | p {
23 |   margin-top: 0;
24 | }
25 | 
26 | </style>
27 | </head>
28 | 
29 |   <body>
30 |     <main>
31 |       <h1>Example of a lazy loaded YouTube embedded video</h1>
32 |       
33 |       <div class="both">
34 |         <p>
35 |         Both srcdoc &amp; src
36 |       </p>
37 |       <iframe
38 | 
39 |         width="280"
40 |         height="157.5"
41 | 				src="https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1"
42 |         srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{height:100%;width:100%;object-fit:cover}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'></a>"
43 |         frameborder="0"
44 |         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
45 |         allowfullscreen
46 |         title="Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
47 |       ></iframe>
48 |       </div>
49 |       
50 |       <div class="srcdoc">
51 |       <p>
52 |         Just srcdoc
53 |       </p>
54 | 
55 |       <iframe
56 |         width="280"
57 |         height="157.5"
58 |         srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{height:100%;width:100%;object-fit:cover}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'></a>"
59 |         frameborder="0"
60 |         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
61 |         allowfullscreen
62 |         title="Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
63 |       ></iframe>
64 |         </div>
65 |       
66 |       <div class="src">
67 |         
68 |       <p>
69 |         src with data:text/html…
70 |       </p>
71 |       <iframe
72 |         width="280"
73 |         height="157.5"
74 |         src="data:text/html;charset=UTF-8,<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{height:100%;width:100%;object-fit:cover}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'></a>"
75 |         frameborder="0"
76 |         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
77 |         allowfullscreen
78 |         title="Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
79 |       ></iframe>
80 |               </div>
81 |       
82 | 
83 |     </main>
84 |   <!--boot js--><script id="jsbin-javascript" defer>// console.clear()
85 | </script>
86 | </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------