Search

podcastBadge

@vladimyr

Console DevTools devtools.fm

HTTP

return c.body(createBadge(badgeOptions));

export default app.fetch;

async function getBadgeOptions(rssUrl: string | URL): Promise<BadgenOptions> {

const label = BADGE_LABEL;

try {

getColor

@dctalbot

Get common or "dominant" color from an image given a source URL

Script

const IMG_URL = "https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg";

const PERCENT_COVERAGE = 10; // lower is faster, but higher is more accurate

function getPixelIndex(numToRound) {

// Each pixel is 4 units long: r,g,b,a

const remainder = numToRound % 4;

if (remainder == 0) return numToRound;

return numToRound + 4 - remainder;

export async function getColor(src: string = IMG_URL): Promise<string> {

return Jimp.read(src)

.then((image) => {

toPercentChange

@rwev

An interactive, runnable TypeScript val by rwev

Script

export function toPercentChange(initialValue, currentValue) {

return `${((currentValue / initialValue - 1) * 100).toPrecision(2)}%`;

msToIsoDate

@rwev

An interactive, runnable TypeScript val by rwev

Script

export function msToIsoDate(unixMs) {

return new Date(unixMs).toISOString().split("T")[0];

EnvironmentConfig

@emarref

Utility to retrieve typesafe environment variable configuration with Zod. const { DB_HOST } = config({ DB_HOST: z.string(), }); // DB_HOST is a string, or an error is thrown.

Script

import process from "node:process";

import { z } from "npm:zod";

export function config<T extends z.ZodRawShape>(schema: T) {

return z.object(schema).parse(process.env);

pollRSSFeeds

@kamalnrf

Poll RSS feeds This val periodically polls specified RSS feeds and send the author an email with new items. It checks each feed defined in rssFeeds for new content since the last run and sends an email with the details of the new items. Usage Fork @stevekrouse/rssFeeds and update it with your desired RSS feeds; Fork this val and replace the https://esm.town/v/stevekrouse/rssFeeds import with your newly forked val; Enjoy RSS updates on your email!

Cron

import { email } from "https://esm.town/v/std/email?v=9";

import { newRSSItems } from "https://esm.town/v/stevekrouse/newRSSItems";

export async function pollRSSFeeds({ lastRunAt }: Interval) {

return Promise.all(

Object.entries(rssFeeds).map(async ([name, url]) => {

sparklineEx2

@stevekrouse

Sparkline SVG Sparklines make with vanilla js via @stevekrouse.sparklineSVG Example usage: ![](https://stevekrouse-sparklineex2.express.val.run/) Contrast with @stevekrouse.sparklineEx which uses react-sparklines.

Express (deprecated)

import { sparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVG";

export let sparklineEx2 = function (req, res) {

res.set("content-type", "image/svg+xml");

res.end(sparklineSVG({

freshFetti

@all

@jsxImportSource https://esm.sh/react

HTTP

"Zing! Festive Burst!",

function App() {

const [clickCount, setClickCount] = useState(0);

const end = Date.now() + (5 * 1000);

(function frame() {

confetti({

const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };

function randomInRange(min: number, max: number) {

return Math.random() * (max - min) + min;

const interval = setInterval(function() {

const timeLeft = animationEnd - Date.now();

const animationEnd = Date.now() + duration;

function randomInRange(min: number, max: number) {

return Math.random() * (max - min) + min;

(function frame() {

const timeLeft = animationEnd - Date.now();

ticks: 300,

function fire(particleRatio: number, opts: any) {

confetti(Object.assign({}, defaults, opts, {

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

return new Response(

addDays

@vlad

An interactive, runnable TypeScript val by vlad

Script

export function addDays(date: Date, days: number) {

const result = new Date(date);

result.setDate(result.getDate() + days);

httpStatusBehavior

@maxm

HTTP Status Behavior In a bunch of iframes, how does Val Town (cloudflare) handle getting various HTTP status responses.

HTTP

400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 421, 422, 423, 424, 425, 426

500, 501, 502, 503, 504, 505, 506, 507, 508, 510, 511 // 5xx Server Error

export default async function(req: Request): Promise<Response> {

const url = new URL(req.url);

if (url.pathname === "/") {

ThankYouNoteGenerator

@prashamtrivedi

@jsxImportSource https://esm.sh/react

HTTP

import { createRoot } from "https://esm.sh/react-dom/client";

function ThankYouCard({ note, theme, font, recipientName, senderName }) {

const [firstHalf, secondHalf] = splitNote(note);

</div>

function splitNote(note) {

const words = note.split(" ");

words.slice(midpoint).join(" "),

function capitalizeName(name) {

if (!name) return "";

.join(" ");

function App() {

const [recipientName, setRecipientName] = useState("");

</div>

function client() {

createRoot(document.getElementById("root")).render(<App />);

client();

export default async function server(request: Request): Promise<Response> {

console.log(`Received ${request.method} request to ${request.url}`);

const { OpenAI } = await import("https://esm.town/v/std/openai");

const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");

const openai = new OpenAI();

const url = new URL(request.url);

console.log("Generated prompt:", prompt);

const completion = await openai.chat.completions.create({

messages: [{ role: "user", content: prompt }],

problemPython

@domingo1987

// Privacy policy template in Markdown

HTTP

export default api.serve();

function getRandomElement<T>(array: T[]): T {

const randomIndex = Math.floor(Math.random() * array.length);

const problemaKey = "problema-python";

async function getProblemas(): Promise<Problema[]> {

let problemas = await blob.getJSON(problemaKey) as Problema[];

return problemas;

async function setProblemas(problemas: Problema[]): Promise<void> {

await blob.setJSON(problemaKey, problemas);

dateMeRSS

@stevekrouse

Date Me Directory RSS Feed An RSS feed for the https://dateme.directory.

HTTP

import { dataToRSS } from "https://esm.town/v/stevekrouse/dataToRSS";

import { zip } from "npm:lodash-es";

export async function dateMeRSS(req: Request) {

let { columns, rows } = await sqlite.execute(`select * from datemedocs order by LastUpdated desc limit 20`);

const profiles = rows.map(row =>

expSumOfTheDay

@hodge

Exponential Sum Plot Generator An homage to John D. Cook's Exponential Sum of the Day The plot shows the partial sums of the exponential sum: Σ(n=0 to N) exp(2πi(n/m + n²/d + n³/y)) The real part of the sum is plotted on the x-axis, and the imaginary part of the sum is plotted on the y-axis.

HTTP

// Calculate exponential sum

function expSumData() {

let sum = { real: 0, imag: 0 };

// Render exponential sum plot

export async function expSumPlot(req) {

const d3 = await import("npm:d3");

const data = expSumData();

function render(data) {

const margin = { top: 20, right: 20, bottom: 20, left: 20 };

md_links_resolver

@argimko

I have some MD-text with links that does HTTP-redirects. I need app that replace all links with its origins.

HTTP

import { createApp, h, nextTick, onMounted, ref } from "https://esm.sh/vue@3.4.21";

function useMarkdownResolver() {

const markdown = ref("");

handlePaste,

function client() {

const RootComponent = {

if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {

// Handle link resolution endpoint

headers: { "content-type": "text/html" },

async function resolveRedirect(url: string): Promise<string> {

const fetchOptions = {

…

372 373

374

375 376

…

403