Search
perf
@stevekrouse
Perf - a website performance tester I had Anthropic build this for me to show off the launch of HTTP (Preview) vals: https://blog.val.town/blog/http-preview/
HTTP
# Perf - a website performance tester
I had Anthropic build this for me to show off the launch of `HTTP (Preview)` vals: https://blog.val.town/blog/http-preview/
/** @jsxImportSource https://esm.sh/react */
// Utility functions
const performSingleRequest = async (url) => {
const start = performance.now();
try {
await fetch(url);
const end = performance.now();
multirouteHono
@ttodosi
🌐 Multi-Route Website with Hono
HTTP (deprecated)
🌐 Multi-Route Website with Hono
* @title Multi-Route Website with Hono in Val Town
* @description Create a personal portfolio website with multiple pages using Hono framework and JSX.
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
// JSX renderer middleware
app.use('*', jsxRenderer(({ children }) => {
return html`
<html lang="en">
<head>
tanChimpanzee
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
HTTP (deprecated)
import { html } from "https://esm.town/v/stevekrouse/html";
import { reloadOnSaveMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
export default reloadOnSaveMiddleware(async function(req: Request): Promise<Response> {
return html(`<h1>Hello 3!!</h1>`);
browserlessPuppeteerExample
@nbbaier
An interactive, runnable TypeScript val by nbbaier
Script
export const browserlessPuppeteerExample = (async () => {
const puppeteer = new PuppeteerDeno({
productName: "chrome",
const browser = await puppeteer.connect({
browserWSEndpoint: `wss://chrome.browserless.io?token=${process.env.browserlessKey}`,
const page = await browser.newPage();
await page.goto("https://en.wikipedia.org/wiki/OpenAI");
const intro = await page.evaluate(
`document.querySelector('p:nth-of-type(2)').innerText`,
await browser.close();
sqliteExplorerApp
@samwho
SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query
HTTP (deprecated)
# SQLite Explorer
View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.
## Install
Install the latest stable version (v86) by forking this val:
[)](https://www.val.town/v/nbbaier/sqlite_explorer/fork)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
sayHello
@maidang
An interactive, runnable TypeScript val by maidang
Script
export const sayHello = (name) => {
return "hello" + name;
stagingdailyschedule
@keenanzucker
@jsxImportSource npm:react
HTTP (deprecated)
/** @jsxImportSource npm:react **/
export default async function(req: Request): Promise<Response> {
// ============= Data Fetching =================
const today = new Date();
const tomorrow = addDays(today, 1);
const data = await fetch(
`https://api.stage.teamsurfboard.com/api/v1/schedule?start=${today.toISOString()}&end=${tomorrow.toISOString()}`,
headers: {
// ADD YOUR API TOKEN INTO THE ENV VARIABLES
"Authorization": `Bearer ${Deno.env.get("TEAMSURFBOARD_API_TOKEN")}`,
tahirsTil
@tfayyaz
Inspiration for having a blog and TIL/read taken from https://simonwillison.net/ https://bradfrost.com/blog/ https://geoffgraham.me/blog/ https://matthewstrom.com/ To-do: Buy tahirfayyaz.dev domain from iwantmyname.com Use SQLlite to store all the posts Create an editor to post to SQLlite maybe with live preview? Update site to use HTMX Active Search - https://htmx.org/examples/active-search/ Add dynamic tag to posts to show many years ago it was posted - Make sortable New posts: exa.ai similarly search https://exa.ai/search?c=all&q=https%3A%2F%2Fstripe.com%2Fblog%2Faccessible-color-systems&filters=%7B%22domainFilterType%22%3A%22exclude%22%2C%22excludeDomains%22%3A%5B%22stripe.com%22%5D%7D
HTTP (deprecated)
Inspiration for having a blog and TIL/read taken from
- https://simonwillison.net/
- https://bradfrost.com/blog/
- https://geoffgraham.me/blog/
- https://matthewstrom.com/
To-do:
/** @jsxImportSource https://esm.sh/react */
export default async function(req: Request) {
return new Response(
renderToString(
dataUriGenApp
@g
* This application creates a client-side data URI generator with the following features:
* - File upload through input and drag-and-drop
* - Automatic MIME type detection
* - Preview of the uploaded file (image, video, audio, or text)
* - Copy button to easily copy the generated data URI
*
* We'll use the FileReader API for file handling and data URI generation.
* The application will be built using HTML, CSS, and JavaScript, served by a Hono app.
HTTP
* This application creates a client-side data URI generator with the following features:
* - File upload through input and drag-and-drop
* - Automatic MIME type detection
* - Preview of the uploaded file (image, video, audio, or text)
* - Copy button to easily copy the generated data URI
* We'll use the FileReader API for file handling and data URI generation.
* The application will be built using HTML, CSS, and JavaScript, served by a Hono app.
function html() {
<!DOCTYPE html>
<html lang="en">
powderNotifyCron
@chet
An interactive, runnable TypeScript val by chet
Cron
import { powderNotify } from "https://esm.town/v/chet/powderNotify";
export default async function(interval: Interval) {
await Promise.all([
powderNotify("Truckee, CA"),
powderNotify("Kirkwood, CA"),
myspace
@jdan
Create your own Myspace profile, deployed to Val town. https://jdan-myspace.web.val.run Click "..." and select Fork to create your own. From there you can: Customize your own profile Or post on my wall by appending to messages and sending me a pull request
HTTP (deprecated)
Create your own Myspace profile, deployed to Val town. https://jdan-myspace.web.val.run
Click "..." and select Fork to create your own.
From there you can:
* Customize your own profile
// TODO: Fetch from key-value
const profile = {
displayName: "Jordan",
seo: {
valle_tmp_3281791973083323415470267124650072
@janpaul123
An interactive, runnable TypeScript val by janpaul123
HTTP (deprecated)
const SAMPLE_STORIES_KEY = "hn_realistic_sample_stories";
async function initializeSampleStories() {
const existingStories = await blob.getJSON(SAMPLE_STORIES_KEY);
if (!existingStories) {
const sampleStories = Array.from({ length: 30 }).map((_, idx) => ({
id: idx + 1,
title: faker.company.catchPhrase(),
url: faker.internet.url(),
votes: Math.floor(Math.random() * 100),
await blob.setJSON(SAMPLE_STORIES_KEY, sampleStories);
annoy
@ajax
An interactive, runnable TypeScript val by ajax
Script
export async function annoy() {
const resume = resume2;
// const boo = await import("https://esm.sh/@atproto/api");
const { default: BskyAgent } = await import("npm:@atproto/api");
console.log(BskyAgent);
const agent = new BskyAgent.BskyAgent({ service: "https://bsky.social" });
await agent.login({
identifier: process.env.BLUESKY_USERNAME!,
password: process.env.BLUESKY_PASSWORD!,
// const actor = await agent.getProfile();
loadPython
@yawnxyz
// Mocking necessary global objects to mimic browser environment in Deno
Script
// Import Pyodide
// Mocking necessary global objects to mimic browser environment in Deno
(globalThis as any).window = {};
(globalThis as any).document = { location: { href: "" }, currentScript: { src: "" } };
(globalThis as any).navigator = {};
// Function to load Pyodide and Python packages
export async function loadPython(params?: { packages: string[] }) {
const pyodide = await pyodideModule.loadPyodide();
for (const pkg of params?.packages || []) {
await pyodide.loadPackage(pkg);
apiProxy
@postpostscript
An interactive, runnable TypeScript val by postpostscript
HTTP (deprecated)
export const SCOPES = {
"request/*": "make an API request as you",
const app = new Hono();
app.use(
authMiddlewareToken(),
pathAsScope({
basePath: "/request",
log: true,
app.all("*", async (c) => {
const req = c.req.raw;