programLinks.scroll

authors Breck Yunits
 https://github.com/breck7 Breck Yunits
date 5/08/2023
tags All
title Introducing Program Links

header.scroll
printTitle
printAuthors

keyboardNav
copyButtons

mediumColumns 1

Some web apps are designed to load _entire programs_ from a link.
 dateline

But if a program contain certain characters, such as _newlines_, those links won't work as-is.

To create working links you have to run them through `encodeURIComponent`.

***

If you are creating blog content by hand this is annoying.

To update a program link you have to keep a copy of the program, update that, then run `encodeURIComponent`, then paste the result into your post.

Today's release of Scroll includes a small new addition that solves this problem. You can call them "Multline Links" or "Program Links".

***

## Here are two examples

Here is a program link to the Scroll web app.
 link https://try.scroll.pub/# program link
  program
   scroll
    # Testing Program Links
    It worked!
     style color:green; font-size: 100px;
aboveAsCode

If you click that link you should see "It worked!" in big green text.

***

Now let's show a complex real world example. The link below contains a 28 line program pasted verbatim from the Ohayo data science studio.

expander See code
belowAsCode 2

Discovery of the Elements
 link https://ohayo.breckyunits.com?filename=test.ohayo&data=
  program
   doc.title Discovery of the Elements
   doc.subtitle What is the growth in known elements over time?
   samples.periodicTable
    hidden
    fill.missing Year 1000
     hidden
     columns.keep Element Year
      hidden
      rows.sortBy Year
       hidden
     group.by Year
      hidden
      rows.sortBy Year
       hidden
       rows.runningTotal count
        hidden
        vega.bar Number of Elements Found Each Year
         xColumn Year
         yColumn count
        vega.line Cumulative Number of Elements
         xColumn Year
         yColumn total
    vega.scatter Year of Discovery by Atomic Number
     xColumn Year
     yColumn AtomicNumber
    tables.basic
     rowDisplayLimit 200
   doc.categories chemistry

If you click that link you should see a few data visualizations generated from that program.

Edit the source and the link will update accordingly. Scroll handles the `encodeURIComponent`.

***

# Why not use HTML directly?
Modern browsers do their best to make URLs well-formed and you will notice that they auto encode certain characters like <a href="https://www.google.com/search?q=Spaces are encoded">spaces</a>.

But by the HTML spec newlines are not a URL code point and generally are stripped and collapsed.
 https://url.spec.whatwg.org/#url-code-points URL code point
 https://infra.spec.whatwg.org/#strip-and-collapse-ascii-whitespace stripped and collapsed

Program Links in Scroll handle encoding newlines and any other special characters so you can focus on your content and not the encoding.

endColumns
footer.scroll