stevekrouse

An interactive, runnable TypeScript val by stevekrouse

An interactive, runnable TypeScript val by stevekrouse

@jsxImportSource https://esm.sh/react@18.2.0

An interactive, runnable TypeScript val by stevekrouse

An interactive, runnable TypeScript val by stevekrouse

Request for vals Here's my personal list of things I want to see on Val Town. I may build them myself at some point, but to the glory goes the person who builds it first. If you want to collaborate or get clarification on any of these ideas, please drop me a comment or reach out on discord. Status Page Possibly the singular most popular thing to do on Val Town is to build a downtime detector for your website. This one from @healeycodes is super popular as well as this fork by @andreterron . Sites like cronitor do this and also seamlessly provide a status page as well, for example like this one: https://status.val.town/. It would be awesome if we built a fork of these downtime detectors that also stored historical uptime/downtime (and possibly latency) information in sqlite, and then provided an http interface to view the data as well. Free Stock API Proxy I have been working on a stock price api tool, initially for use within Google Sheets: https://www.val.town/v/stevekrouse/stockPrice It would be awesome to expand this to also be useful to other folks, ie folks within Val Town. For example, it could be used to build stock price trackers. Our BTC price tracker is pretty popular. I think one for stocks would be similarly popular, but it'd need someone to provide a good free stock API. Maybe one exists or maybe we need to proxy it.

One-click environment variable Copying and pasting secret API keys into your Val Town Environment Variables is annoying and error prone. Wouldn't it be nice if you could add an environment variable in one click? What could such a protocol look like for third-party API company to be able to safely pass their customer's API keys to their customer's Val Town account. A naive approach to this would be a link that looks like this: <a href="https://www.val.town/settings/environment-variables?name=OpenAI&value=sk-123..."> Add OpenAI key to Val Town </a> However it isn't safe to put API key values in URLs like that, but it would be great if we could still put it in the URL so it can act like a simple link. We need to encrypt the API key in such a way that nobody can read it except for the Val Town app. Val Town could provide a public key for API providers to encrypt their tokens with. We could add an extra layer of security by including the timestamp in the request as well as the Val Town username that the token is intended for. All that data should be included in the encrypted package. We can also ensure that each such link is used exactly once. This scheme does feel a bit ad hoc though, so it'd be nice if there existed another protocol for doing this that we could use.

file0 example https://www.file0.dev/ sets seem to take about 1s and gets about 200ms for a very small json object You'll need to set F0_SECRET_KEY in your environment variables for this to work. signup at https://www.file0.dev/ to get a key

@jsxImportSource npm:hono@3/jsx

An interactive, runnable TypeScript val by stevekrouse

Pipedream helpers Pipedream offers an Accounts API to handle OAuth for you, automatically, and for free. How to do it is covered in this guide . The helper functions below can make it easier to work with various Google API. For example, I used them like so to get all my free/busy times for this week from all my google calendars: import { pipeDreamGoogle } from "https://esm.town/v/stevekrouse/pipedream"; const accountId = "REPLACE_WITH_YOUR_GCAL_ACCOUNT_ID_FROM_PIPEDREAM"; const calendar = await pipeDreamGoogle("calendar", accountId); // Function to get free/busy information async function getFreeBusyTimes(calendarId: string) { const now = new Date(); const startOfWeek = new Date(now); startOfWeek.setDate(now.getDate() - now.getDay()); const endOfWeek = new Date(startOfWeek); endOfWeek.setDate(startOfWeek.getDate() + 6); const requestBody = { timeMin: startOfWeek.toISOString(), timeMax: endOfWeek.toISOString(), items: [{ id: calendarId }], }; const freeBusyResponse = await calendar.freebusy.query({ requestBody, }); return freeBusyResponse.data.calendars[calendarId].busy; } const calendars = (await calendar.calendarList.list()).data.items; const freeBusy = await Promise.all(calendars.map(calendar => getFreeBusyTimes(calendar.id))); console.log(freeBusy); In order for this to work you need to follow the instructions in this guide to save your pipedream API key into your Val Town Environment Variables under pipedream , then connect the google account you care about to Pipedream, and copy it's Pipedream "account id" into your val code. Let me know if you need any help by commenting on this val!

// let's ask openai's new gpt-4o model to tell us a joke

Clone of @maxm/staticChess but for Wordle. Every letter is a link. The game state is stored in the URL bar. You could do silly things like playing collaborative Wordle with your friends by trading links back and forth. Or undo any mistakes by clicking the back button. I also make it easy to generate a new game from any of your current game's guesses – to send to a friend. They key to these static games like this one and @maxm/staticChess is to figure out: a representation for your game state (the Game type ) how to encode/decode your game state into the URL ( base64-encoding JSON ) how to render your game state into HTML ( looping over guesses and making divs ) placing the links into your HTML in the right spots (on my on-screen keyboard ) prettify with CSS (for guesses and the keyboard )

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.

@jsxImportSource https://esm.sh/react

Client Side React Helper Example Usage /** @jsxImportSource https://esm.sh/react */ import { useState } from "https://esm.sh/react@18.2.0"; import react_http from "https://esm.town/v/stevekrouse/react_http?v=6"; export function App() { const [count, setCount] = useState(0); return ( <div> <h1>Example App</h1> <button onClick={() => setCount(count + 1)} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" > {count} </button> </div> ); } export default () => react_http({ component: App, sourceURL: import.meta.url, head: `<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <title>Example App</title>`, }); Gotchas Only use https imports The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.