nbbaier

Sidebar.io Archiver Sidebar's been one of my biggest design resources for the last decade. Since sidebar.io's break announcement this morning (https://sidebar.io/break/) I've set out to mess around with using Val.town to archive sidebar. The Google Sheet can be found here: https://docs.google.com/spreadsheets/d/1RghvMfPTR5xvHMAk1pKYuH2pFYYKOJ6bH0LLkHNZiuc/edit?usp=sharing Initially I was just piping data to Google Sheets but that's slow, wasteful and kind of dumb... instead I just wrapped Hono around the code to provide a download the CSV to browser.

uploadImage uploads an image to val.town just like when you paste an image into a readme

Import a val script in the chrome console Say you're developing a chrome extension or some other little script and you're iterating in the chrome console. Over time you may write larger pieces of code that you want to save as a group. Or maybe you want to use TypeScript, which isn't supported in browsers natively. Val Town can provide a decent workflow here. Save your code in a Script val Ensure the val is Public or Unlisted In the chrome console, import your val's module url. For example, for this val it would look like this: let {test} = await import(`https://esm.town/v/stevekrouse/importValInChromeConsole?${Math.random()}`) I added a random number to the end of the string to prevent your browser from caching the import. So now you can save in Val Town and then re-run your import line in the Chrome console and the script will re-run in the Chrome console.

Simple CSS Vars library import { caviar } from "https://esm.town/v/jxnblk/caviar"; const vars = caviar({ dark: { text: "#000", bg: "#fff", }, light: { text: "#fff", bg: "#000", }, }); // JSX example <div style={vars.style.light}> <h1 style={{ color: vars.text, backgroundColor: vars.bg, }}> Hello </h1> </div> Can also be used for non-dynamic CSS vars import { caviar } from "https://esm.town/v/jxnblk/caviar"; const vars = caviar({ blue: "#0cf", }); // <div style={vars.style} /> Tests: https://www.val.town/v/jxnblk/caviar_tests TODO [ ] Fallback for missing mode keys

Forked from mxdvl/vals

Example

A minimal bookmarking tool This allows you to bookmark links and view them later. Completely powered by ValTown and SQLite. To set this up for yourself Fork the val From your ValTown settings page, add an environment variable named bookmarks_client_id and give it a value (you will be using this for saving) Add another environment variable named bookmarks_client_secret and give it a value (you will also be using this for saving) At first, the "bookmarks" table will not exist, so we need to save an article first, which will create the "bookmarks" table To do this, add a bookmarklet to your browser with this value (replace BOOKMARKS-CLIENT-ID and BOOKMARKS-CLIENT-SECRET with the values you added to the environment variables, and replace BOOKMARKS-URL with your VAL's URL): javascript:void(open('BOOKMARKS-URL/save?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title)+'&id=BOOKMARKS-CLIENT-ID&secret=BOOKMARKS-CLIENT-SECRET', 'Bookmark a link', 'width=400,height=450')) Click this bookmarklet to bookmark the URL of the current active tab Go to your VAL URL homepage to see the bookmark Demo Here are my bookmarks: https://ramkarthik-bookmark.web.val.run/ Note Make sure you don't share bookmarks_client_id and bookmarks_client_secret . It is used for authentication before saving a bookmark.

List things in a blob directory Blobs can be organised using "directories" e.g. /animals all-animals.txt /dogs sausage.txt /cats tom.txt is really only three files: /animals/all-animals.txt , /animals/dogs/sausage.txt and /animals/cats/tom.txt because directories don't really exist, we're just making longer filenames. When you want to list things only "in a directory" and none of the child "directories", you can use this val. import { blobDirList } from "https://esm.town/v/neverstew/blobDirList"; console.log(await blobDirList("/animals")); // returns only "/animals/all-animals.txt"

SQLite Migrate Table via cloning it into a new table example There are a lot of migrations that SQLite doesn't allow, such as adding a primary key on a table. The way to accomplish this is by creating a new table with the schema you desire and then copying the rows of the old table into it. This example shows how to: Get the schema for the existing table Create the new table Copy all rows from old to new Rename the old table to an archive (just in case) Rename the new table to the original table name This script shows me adding a primary key constraint to the Profile column of my DateMeDocs database. I would console and comment out various parts of it as I went. You can see everything I did in the version history. The main tricky part for me was removing the duplicate primary key entries before doing the migration step, which is a useful thing anyways, from a data cleaning perspective.

// borrowed from: https://github.com/benvinegar/counterscale/blob/main/app/analytics/query.ts#L24

@jsxImportSource npm:hono/jsx

An interactive, runnable TypeScript val by pomdtr

md A Markdown renderer written in Zig & C, compiled to WebAssymbly for val.town - https://github.com/ije/md4w import { render } from "https://esm.town/v/ije/md" render("Stay _foolish_, stay **hungry**!") // -> <p>Stay <em>foolish</em>, stay <strong>hungry</strong>!</p>

@jsxImportSource https://esm.sh/hono/jsx

Test Explorer Click on the play button next to list items to run them. Usage Fork this val Create new tests in any of vals (and export them) (see @pomdtr/example_test) import { assertEquals } from "https://deno.land/std@0.216.0/assert/mod.ts"; import { Test } from "https://esm.town/v/<account>/test_explorer"; export const exampleTestSuccess = new Test(() => { assertEquals(1 + 1, 2); }); export const exampleTestFailure = new Test(() => { assertEquals(1 + 1, 3); }); Go to https://<account>-test_explorer.web.val.run to run your test click on the val name to go to the val the tests are originating from click on the test name to run it ℹ️ You probably want to protect your test explorer behind an authentication middleware like @pomdtr/basicAuth Discovery mechanism In order to define a test, the user need to import the Test class from https://val.town/v/<account>/Test . So we can use the api to search for vals containing the https://val.town/v/<account>/Test string to locate the vals containing tests. Next, we need to extract the tests from the val exports. We use exported instanceof Test to filter them (at some point we will probably use static analysis for this). TODO [x] persist test results in sqlite [x] Improve styling (help welcome ❤️) [ ] View logs in a modal [ ] Batch http requests

Inspector to browser json data in HTTP vals Example: https://val.town/v/stevekrouse/weatherDescription Thanks @mmcgrana (https://markmcgranaghan.com/) for the idea!