https://github.com/lukebatchelor/url-snake Skip to content Toggle navigation Sign up * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code + Explore + All features + Documentation + GitHub Skills + Blog * Solutions + For + Enterprise + Teams + Startups + Education + By Solution + CI/CD & Automation + DevOps + DevSecOps + Case Studies + Customer Stories + Resources * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles + Repositories + Topics + Trending + Collections * Pricing [ ] * # In this repository All GitHub | Jump to | * No suggested jump to results * # In this repository All GitHub | Jump to | * # In this user All GitHub | Jump to | * # In this repository All GitHub | Jump to | Sign in Sign up {{ message }} lukebatchelor / url-snake Public * Notifications * Fork 2 * Star 57 url-snake.netlify.app/ 57 stars 2 forks Star Notifications * Code * Issues 2 * Pull requests 1 * Actions * Projects 0 * Security * Insights More * Code * Issues * Pull requests * Actions * Projects * Security * Insights lukebatchelor/url-snake This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main Switch branches/tags [ ] Branches Tags Could not load branches Nothing to show {{ refName }} default View all branches Could not load tags Nothing to show {{ refName }} default View all tags Name already in use A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch? Cancel Create 1 branch 0 tags Code * Local * Codespaces * Clone HTTPS GitHub CLI [https://github.com/l] Use Git or checkout with SVN using the web URL. [gh repo clone lukeba] Work fast with our official CLI. Learn more. * Open with GitHub Desktop * Download ZIP Sign In Required Please sign in to use Codespaces. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching GitHub Desktop If nothing happens, download GitHub Desktop and try again. Launching Xcode If nothing happens, download Xcode and try again. Launching Visual Studio Code Your codespace will open once ready. There was a problem preparing your codespace, please try again. Latest commit @lukebatchelor lukebatchelor Down to 713 ... d62964f Jan 9, 2023 Down to 713 d62964f Git stats * 22 commits Files Permalink Failed to load latest commit information. Type Name Latest commit message Commit time .vscode Init commit Jan 7, 2023 golf Down to 713 Jan 9, 2023 .gitignore Adds basic mobile compatible version, updates readme with docs for bo... Jan 8, 2023 dev.html Adds footer to built dists with minified code and links Jan 8, 2023 index.html Adds footer to built dists with minified code and links Jan 8, 2023 package.json Updates build script to build new footers Jan 8, 2023 readme.md Down to 713 Jan 9, 2023 run.js Down to 713 Jan 9, 2023 snake1.jpg Updates readme screenshots Jan 8, 2023 snake2.jpg Updates readme screenshots Jan 8, 2023 yarn.lock Init commit Jan 7, 2023 View code URL Snake Result Code golfing Development Building a single file readme.md URL Snake A little experiement with seeing how complex of an app I can store entirely within a url. The basic idea revolves around the fact that a data urls can define their encoding as text/html. i.e data:text/html;charset=utf-8,hello%20world is a valid url (try pasting it in your url bar). So is data:text/html;charset= utf-8,%3Cstyle%3E%20*%20%7B%20color%3A%20red%3B%20%7D%3C%2Fstyle%3EHello%20world!. Aditionally, so is data:text/html;charset= utf-8,%3Cstyle%3E%20*%20%7B%20color%3A%20red%3B%20%7D%3C%2Fstyle%3EHello%20world! %3Cscript%3Ealert(%22hello%20again!%22)%3B%3C%2Fscript%3E. So, if we can put html, css and js in a url and have that render a valid html page, how much of a page could we create? Result I've come up with a [DEL:1033:DEL] [DEL:852:DEL] [DEL:799:DEL] 713 byte solution that is a fully playable game of snake. let e=document.body,t="Space: start/reset. Arrows: Move
",r= 40,n=400,o,d=[[4,3]],s=d[0],c="#000",p=(e="red",t=n,a=0,l=a)=>{C [f="fillStyle"]=e,C.fillRect(a*r,l*r,t,t)},h=(e,t=n/2,a=t,l= "center")=>{C[f]=c,C.textAlign=l,C.fillText(e,t,a)};e.innerHTML= t,C=a.getContext`2d`,a.height=a.width=n,C.font="30px f",e.onkeyup =({which:e})=>{36{if(o){let[e,t]=d[0],a=e+H%2,l=t+(H-1)%2,n= ([e,t])=>e==a&&t==l;if(d.pop(),a<0||9p(c,r,...e)),p(i,r,...s),h (S,9,30,"left")}},n); Encoded as a url it is 1152 bytes long: data:text/html;charset=utf-8,%3Cbody%3E%3Cscript%3Eeval(atob (%22bGV0IGU9ZG9jdW1lbnQuYm9keSx0PSJTcGFjZTogc3RhcnQvcmVzZXQuIEFycm93czogTW92ZTxkaXY+PGNhbnZhcyBpZD1hPjxzdHlsZT4jYXtib3JkZXI6c29saWR9KntiYWNrZ3JvdW5kOnRhbn08L3N0eWxlPiIscj00MCxuPTQwMCxvLGQ9W1s0LDNdXSxzPWRbMF0sYz0iIzAwMCIscD0oZT0icmVkIix0PW4sYT0wLGw9YSk9PntDW2Y9ImZpbGxTdHlsZSJdPWUsQy5maWxsUmVjdChhKnIsbCpyLHQsdCl9LGg9KGUsdD1uLzIsYT10LGw9ImNlbnRlciIpPT57Q1tmXT1jLEMudGV4dEFsaWduPWwsQy5maWxsVGV4dChlLHQsYSl9O2UuaW5uZXJIVE1MPXQsQz1hLmdldENvbnRleHRgMmRgLGEuaGVpZ2h0PWEud2lkdGg9bixDLmZvbnQ9IjMwcHggZiIsZS5vbmtleXVwPSh7d2hpY2g6ZX0pPT57MzY8ZSYmZTw0MT9IPWUtMzg6MzIhPWV8fG98fChvPTEsZD1bWzQsM11dLEg9MixTPTApfSxzZXRJbnRlcnZhbChpPT57aWYobyl7bGV0W2UsdF09ZFswXSxhPWUrSCUyLGw9dCsoSC0xKSUyLG49KFtlLHRdKT0+ZT09YSYmdD09bDtpZihkLnBvcCgpLGE8MHx8OTxhfHxsPDB8fDk8bHx8ZC5zb21lKG4pKXJldHVybiBvPTAscCgpLGhgOihgO2Q9W1thLGxdLC4uLmRdLG4ocykmJihkWysrU109ZFtTLTFdLHM9WyhEPW5ldyBEYXRlKSUxMCxEKlMlMTBdKSxwYHRhbmAsZC5tYXAoZT0+cChjLHIsLi4uZSkpLHAoaSxyLC4uLnMpLGgoUyw5LDMwLCJsZWZ0Iil9fSxuKTs =%22))%3C%2Fscript%3E [snake1] [snake2] You can paste that url into your browsers address bar, or checkout the minified html running here (or here for a mobile compatible version) Code golfing I'm super happy with some of the code golfing techniques I've used in this code and have tried to leave comments explaining most of them. I'm especially proud of: //... headings = {37:1,38:1,39:1,40:1}, // ... update = () => { if (!alive) return; let [headX, headY] = snake[0], nextX = headX + (heading)%2, nextY = headY + (heading-1)%2, collides = ([x,y])=> (x ==nextX&&y==nextY); //... d.onkeyup = ({ which: w }) => { headings[w] ? (heading=w-38) : w==32 && !alive && reset(); }; If you want to just see the annotated golf'd code, take a look at golf/dev.html Development This repo contains two sets of code, one for a mobile compatible version and one just for maximum code golfing / run.js - node script that generates minified files and outputs data urls dev.html - dev file for mobile snake index.html - minified version of mobile snake /golf dev.html - dev file for code golf'd snake index.html - minified version of golf'd snake To develop on either one you can run the yarn install to install the dev dependencies and then yarn build to build both versions. This will output a dist directory like so /dist index.html - minified version of compatible snake golf.html - minified version of golf'd snake and also update both index.html files. Building a single file If developing on a single file, use the run.js script directly from whichever dir you are working on. $ node run.js data:text/html;charset=utf-8,%3Cbody%3E%3Cscript%3Eeval(atob(%22bGV0IGU9ZG9jdW1lbnQsdD1lLmJvZHksbD1NYXRoLHI9IlNwYWNlOiBzdGFydC9yZXNldC4gQXJyb3dzOiB... $ cd golf $ node ../run.js data:text/html;charset=utf-8,%3Cbody%3E%3Cscript%3Eeval(atob(%22bGV0IGU9ZG9jdW1lbnQsdD1lLmJvZHksbD1NYXRoLHI9IlNwYWNlOiBzdGFydC9yZXNldC4gQXJyb3dzOiB... To get more debug information, add the DEBUG flag $DEBUG=1 node run.js { js: 'let e=document,t=e.body,l=Math,r="Space: start/reset. Arrows: Move
",n=40,o=400,i,d,f=[[3,3]],s= ...', jsLength: 852, minifiedLength: 852, encodedLength: 1136, minifySaved: 0, urlLength: 1220 } data:text/html;charset=utf-8,%3Cbody%3E%3Cscript%3Eeval(atob(%22bGV0IGU9ZG9jdW1lbnQsdD1lLmJvZHksbD1NYXRoLHI9IlNwYWNlOiBzdGFydC9yZXNldC4gQXJyb3dzOiBNb3ZlPGRpdj48Y2FudmFz ... To automatically open the data url in chrome, you can use xargs: $ node run.js | xargs open -a "Google Chrome" About url-snake.netlify.app/ Resources Readme Stars 57 stars Watchers 2 watching Forks 2 forks Releases No releases published Packages 0 No packages published Languages * HTML 78.5% * JavaScript 21.5% Footer (c) 2023 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact GitHub * Pricing * API * Training * Blog * About You can't perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.