3 ms·

I love long URLs and build them into my apps for sharing. You can have powerful apps that are 100% clientside and use just a dumb file web server. For example,

by breck 5y ago

I love long URLs and build them into my apps for sharing. You can have powerful apps that are 100% clientside and use just a dumb file web server. For example, here's a URL that contains both the grammar for a language that compiles to CSS and also example code. Works like a charm. https://jtree.treenotation.org/designer/#grammar%0A%20tooling%20onsave%20jtree%20build%20produceLang%20hakon%0A%20anyCell%0A%20keywordCell%0A%20commentKeywordCell%0A%20%20extends%20keywordCell%0A%20%20highlightScope%20comment%0A%20%20enum%20comment%0A%20extraCell%0A%20%20highlightScope%20invalid%0A%20cssValueCell%0A%20%20highlightScope%20constant.numeric%0A%20selectorCell%0A%20%20highlightScope%20keyword.control%0A%20%20examples%20body%20h1%0A%20%20todo%20add%20html%20tags%2C%20css%20and%20ids%20selector%20regexes%2C%20etc%0A%20propertyKeywordCell%0A%20%20highlightScope%20variable.function%0A%20%20extends%20keywordCell%0A%20%20todo%20Where%20are%20these%20coming%20from%3F%20Can%20we%20add%20a%20url%20link%0A%20%20enum%20align-content%20align-items%20align-self%20all%20animation%20animation-delay%20animation-direction%20animation-duration%20animation-fill-mode%20animation-iteration-count%20animation-name%20animation-play-state%20animation-timing-function%20backface-visibility%20background%20background-attachment%20background-blend-mode%20background-clip%20background-color%20background-image%20background-origin%20background-position%20background-repeat%20background-size%20border%20border-bottom%20border-bottom-color%20border-bottom-left-radius%20border-bottom-right-radius%20border-bottom-style%20border-bottom-width%20border-collapse%20border-color%20border-image%20border-image-outset%20border-image-repeat%20border-image-slice%20border-image-source%20border-image-width%20border-left%20border-left-color%20border-left-style%20border-left-width%20border-radius%20border-right%20border-right-color%20border-right-style%20border-right-width%20border-spacing%20border-style%20border-top%20border-top-color%20border-top-left-radius%20border-top-right-radius%20border-top-style%20border-top-width%20border-width%20bottom%20box-shadow%20box-sizing%20break-inside%20caption-side%20clear%20clip%20color%20column-count%20column-fill%20column-gap%20column-rule%20column-rule-color%20column-rule-style%20column-rule-width%20column-span%20column-width%20columns%20content%20counter-increment%20counter-reset%20cursor%20direction%20display%20empty-cells%20fill%20filter%20flex%20flex-basis%20flex-direction%20flex-flow%20flex-grow%20flex-shrink%20flex-wrap%20float%20font%20%40font-face%20font-family%20font-size%20font-size-adjust%20font-stretch%20font-style%20font-variant%20font-weight%20%20hanging-punctuation%20height%20hyphens%20justify-content%20%40keyframes%20left%20letter-spacing%20line-height%20list-style%20list-style-image%20list-style-position%20list-style-type%20margin%20margin-bottom%20margin-left%20margin-right%20margin-top%20max-height%20max-width%20%40media%20min-height%20min-width%20nav-down%20nav-index%20nav-left%20nav-right%20nav-up%20opacity%20order%20outline%20outline-color%20outline-offset%20outline-style%20outline-width%20overflow%20overflow-x%20overflow-y%20padding%20padding-bottom%20padding-left%20padding-right%20padding-top%20page-break-after%20page-break-before%20page-break-inside%20perspective%20perspective-origin%20position%20quotes%20resize%20right%20tab-size%20table-layout%20text-align%20text-align-last%20text-decoration%20text-decoration-color%20text-decoration-line%20text-decoration-style%20text-indent%20text-justify%20text-overflow%20text-shadow%20text-transform%20top%20transform%20transform-origin%20transform-style%20transition%20transition-delay%20transition-duration%20transition-property%20transition-timing-function%20unicode-bidi%20vertical-align%20visibility%20white-space%20width%20word-break%20word-spacing%20word-wrap%20z-index%20overscroll-behavior-x%20user-select%20-ms-touch-action%20-webkit-user-select%20-webkit-touch-callout%20-moz-user-select%20touch-action%20-ms-user-select%20-khtml-user-select%20gap%20grid-auto-flow%20grid-column%20grid-column-end%20grid-column-gap%20grid-column-start%20grid-gap%20grid-row%20grid-row-end%20grid-row-gap%20grid-row-start%20grid-template-columns%20grid-template-rows%20justify-items%20justify-self%0A%20errorCell%0A%20%20highlightScope%20invalid%0A%20commentCell%0A%20%20highlightScope%20comment%0A%20hakonNode%0A%20%20root%0A%20%20todo%20Add%20variables%3F%0A%20%20description%20A%20prefix%20Tree%20Language%20that%20compiles%20to%20CSS%0A%20%20compilesTo%20css%0A%20%20inScope%20commentNode%0A%20%20catchAllNodeType%20selectorNode%0A%20%20javascript%0A%20%20%20getSelector()%20%7B%0A%20%20%20%20return%20%22%22%0A%20%20%20%7D%0A%20%20%20compile()%20%7B%0A%20%20%20%20return%20this.getTopDownArray()%0A%20%20%20%20%20.filter(node%20%3D%3E%20node.isSelectorNode)%0A%20%20%20%20%20.map(child%20%3D%3E%20child.compile())%0A%20%20%20%20%20.join(%22%22)%0A%20%20%20%7D%0A%20%20example%20A%20basic%20example%0A%20%20%20body%0A%20%20%20%20font-size%2012px%0A%20%20%20%20h1%2Ch2%0A%20%20%20%20%20color%20red%0A%20%20%20a%0A%20%20%20%20%26%3Ahover%0A%20%20%20%20%20color%20blue%0A%20%20%20%20%20font-size%2017px%0A%20propertyNode%0A%20%20catchAllCellType%20cssValueCell%0A%20%20catchAllNodeType%20errorNode%0A%20%20javascript%0A%20%20%20compile(spaces)%20%7B%0A%20%20%20%20return%20%60%24%7Bspaces%7D%24%7Bthis.getFirstWord()%7D%3A%20%24%7Bthis.getContent()%7D%3B%60%0A%20%20%20%7D%0A%20%20cells%20propertyKeywordCell%0A%20variableNode%0A%20%20extends%20propertyNode%0A%20%20pattern%20--%0A%20errorNode%0A%20%20catchAllNodeType%20errorNode%0A%20%20catchAllCellType%20errorCell%0A%20%20baseNodeType%20errorNode%0A%20commentNode%0A%20%20cells%20commentKeywordCell%0A%20%20catchAllCellType%20commentCell%0A%20%20catchAllNodeType%20commentNode%0A%20selectorNode%0A%20%20inScope%20propertyNode%20variableNode%20commentNode%0A%20%20catchAllNodeType%20selectorNode%0A%20%20boolean%20isSelectorNode%20true%0A%20%20javascript%0A%20%20%20getSelector()%20%7B%0A%20%20%20%20const%20parentSelector%20%3D%20this.getParent().getSelector()%0A%20%20%20%20return%20this.getFirstWord()%0A%20%20%20%20%20.split(%22%2C%22)%0A%20%20%20%20%20.map(part%20%3D%3E%20%7B%0A%20%20%20%20%20%20if%20(part.startsWith(%22%26%22))%20return%20parentSelector%20%2B%20part.substr(1)%0A%20%20%20%20%20%20return%20parentSelector%20%3F%20parentSelector%20%2B%20%22%20%22%20%2B%20part%20%3A%20part%0A%20%20%20%20%20%7D)%0A%20%20%20%20%20.join(%22%2C%22)%0A%20%20%20%7D%0A%20%20%20compile()%20%7B%0A%20%20%20%20const%20propertyNodes%20%3D%20this.getChildren().filter(node%20%3D%3E%20node.doesExtend(%22propertyNode%22))%0A%20%20%20%20if%20(!propertyNodes.length)%20return%20%22%22%0A%20%20%20%20const%20spaces%20%3D%20%22%20%20%22%0A%20%20%20%20return%20%60%24%7Bthis.getSelector()%7D%20%7B%0A%20%20%20%24%7BpropertyNodes.map(child%20%3D%3E%20child.compile(spaces)).join(%22%5Cn%22)%7D%0A%20%20%20%7D%5Cn%60%0A%20%20%20%7D%0A%20%20cells%20selectorCell%0Asample%0A%20html%2Cbody%2Cdiv%2Cspan%0A%20%20margin%200%0A%20%20padding%200%0A%20%20border%200%0A%20%20font-size%20100%25%0A%20%20font%20inherit%0A%20%20vertical-align%20baseline%0A%20nav%2Csection%0A%20%20display%20block%0A%20body%0A%20%20line-height%201.3%0A%20%20overscroll-behavior-x%20none%0A%20%20h1%2Ch2%0A%20%20%20font-size%202em%0A%20ol%2Cul%0A%20%20list-style%20none%0A%20table%0A%20%20border-collapse%20collapse%0A%20%20border-spacing%200 https://jtree.treenotation.org/designer/#grammar%0A%20toolin...

jstrieb 5y ago
Having written two apps that do this, I can confirm that it is an amazing technique, and criminally underutilized! My projects store and render entire pages from the URL and encrypt URLs (respectively): https://github.com/jstrieb/urlpages https://github.com/jstrieb/urlpages https://github.com/jstrieb/link-lock https://github.com/jstrieb/link-lock
- breck 5y ago
  Love it! Have you thought about having a non-obfuscated pretty version? In addition to this: https://jstrieb.github.io/urlpages/editor/#eyJjc3MiOiJ3aG9tIiwianMiOiJkb2N1bWVudC53cml0ZShcInRoaXMgd2FzIHdycml0ZW4gYnkgamF2YXNjcmlwdFwiKSIsImh0bWwiOiJiYW0ifQ== https://jstrieb.github.io/urlpages/editor/#eyJjc3MiOiJ3aG9tI... Offer a pretty version like: https://jstrieb.github.io/urlpages/editor/#html...html-here.~css...body;background:red;~javascript...document.write('this-was-written-by-javascript.')
  - jstrieb 5y ago
    I appreciate the kind words! Hadn't considered it originally because I was concerned about allowable characters in the URL, and jumped to base64 instead of leaning more heavily on the actual set of acceptable characters to make it readable. In hindsight, this is a great thing to add to my next project that (inevitably) uses this technique, thanks!

by breck 5y ago

jstrieb 5y ago

Having written two apps that do this, I can confirm that it is an amazing technique, and criminally underutilized! My projects store and render entire pages from the URL and encrypt URLs (respectively): https://github.com/jstrieb/urlpages https://github.com/jstrieb/urlpages https://github.com/jstrieb/link-lock https://github.com/jstrieb/link-lock

breck 5y ago
Love it! Have you thought about having a non-obfuscated pretty version? In addition to this: https://jstrieb.github.io/urlpages/editor/#eyJjc3MiOiJ3aG9tIiwianMiOiJkb2N1bWVudC53cml0ZShcInRoaXMgd2FzIHdycml0ZW4gYnkgamF2YXNjcmlwdFwiKSIsImh0bWwiOiJiYW0ifQ== https://jstrieb.github.io/urlpages/editor/#eyJjc3MiOiJ3aG9tI... Offer a pretty version like: https://jstrieb.github.io/urlpages/editor/#html...html-here.~css...body;background:red;~javascript...document.write('this-was-written-by-javascript.')
- jstrieb 5y ago
  I appreciate the kind words! Hadn't considered it originally because I was concerned about allowable characters in the URL, and jumped to base64 instead of leaning more heavily on the actual set of acceptable characters to make it readable. In hindsight, this is a great thing to add to my next project that (inevitably) uses this technique, thanks!