Search
hitCounter
@triptych
Create a simple hit counter that you can attach to any website via fetch . I created a web component to use this :
export class HitCounter extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.count = 0;
this.fetchCount();
}
fetchCount() {
fetch('https://triptych-hitcounter.web.val.run/')
.then(response => response.json())
.then(data => {
this.count = data.siteCount;
this.render();
})
.catch(error => console.error('Error fetching count:', error));
}
render() {
const container = document.createElement('div');
container.style.backgroundColor = 'black';
container.style.color = 'white';
container.style.border = '1px solid white';
container.style.padding = '10px';
container.style.display = 'inline-block'; // Add this line
container.textContent = `hit count: ${this.count}`;
this.shadowRoot.appendChild(container);
}
}
customElements.define('hit-counter', HitCounter);
HTTP
Create a simple hit counter that you can attach to any website via fetch .
I created a web component to use this :
export class HitCounter extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
const KEY = "site_count";
// let hitCount = await blob.getJSON(KEY);
const oldState = await blob.getJSON(KEY) ?? 0;
console.log("Old value", oldState);
web_P8gyKBQ5mq
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_P8gyKBQ5mq(req) {
return new Response(`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unhinged Mermaid Diagram</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<style>
body {
val_H5K9aSG5KY
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_H5K9aSG5KY(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const factorial = (n) => {
if (n === 0) return 1;
return n * factorial(n - 1);
try {
return factorial(10000);
} catch (error) {
expressHTMLExample
@octref
// View at https://api.val.town/v1/express/stevekrouse.expressHTMLExample?name=Steve
Script
import { myTestForm } from "https://esm.town/v/octref/myTestForm";
// View at https://api.val.town/v1/express/stevekrouse.expressHTMLExample?name=Steve
export async function expressHTMLExample(req: express.Request, res: express.Response) {
myTestForm.push(req.query.name || req.body.name);
return res.send(`<h1>Hi ${req.query.name || req.body.name}!</h1>`);
// Forked from @stevekrouse.expressHTMLExample
JxnblkCSS
@jxnblk
CSS for https://val.town/v/jxnblk/dotcom – https://jxnblk.com
Script
CSS for <https://val.town/v/jxnblk/dotcom> – <https://jxnblk.com>
// tuna-based generative css lib
export const colors = [
"light",
"foliage",
"paper",
"amber",
"tomato",
"brown reverse",
"dark reverse",
blocks
@tmcw
Unfancy blocks In the old days, there was a website called bl.ocks.org which re-hosted content on GitHub Gists and displayed visualizations made in those gists. It wasn't shiny but it was well-crafted and for the little community that used it, it was very nice. This is a much worse, but very small, version of the same kind of program. This also shows you stuff from blocks. It displays readmes, with Titus's lovely micromark . It uses Ian's collected search index of bl.ocks.org to show you examples and thumbnails. It uses Alpine to pull together a little interface. And, of course, Val Town to make it all work.
Express (deprecated)
# [Unfancy blocks](https://tmcw-blocks.express.val.run/)
[](https://tmcw-blocks.express.val.run/)
In the old days, there was a website called bl.ocks.org which re-hosted content on [GitHub Gists](https://gist.github.com/) and displayed visualizations made in those gists. It wasn't shiny but it was well-crafted and for the little community that used it, it was very nice.
This is a much worse, but very small, version of the same kind of program. This also shows you stuff from blocks. It displays readmes, with Titus's lovely [micromark](https://github.com/micromark/micromark). It uses Ian's [collected search index of bl.ocks.org](https://observablehq.com/@enjalot/blockbuilder-search-data) to show you examples and thumbnails. It uses [Alpine](https://alpinejs.dev/) to pull together a little interface. And, of course, [Val Town](https://www.val.town/) to make it all work.
export let blocks = async (req, res) => {
const { micromark } = await import("npm:micromark");
const [_, user, id, ...file] = req.path.split("/");
if (!user) {
return res.send(`
<html>
val_4r3qJnBh7d
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_4r3qJnBh7d(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
function probeComputationalLimits(depth = 0, maxDepth = 1000) {
if (depth >= maxDepth) {
return {
maxReached: depth,
limitDetected: true
try {
val_JhxcurPkrD
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_JhxcurPkrD(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const analyzeRandomness = (sampleSize) => { const results = { even: 0, odd: 0 }; for (let i = 0; i < sampleSize; i++) { const randomNum = Math.floor(Math.random() * 100); if (randomNum % 2 === 0) { results.even++; } else { results.odd++; } } return results; }; analyzeRandomness(10000);
// Return the result in a properly formatted response
return new Response(JSON.stringify({
result: result,
type: typeof result
headers: { 'Content-Type': 'application/json' }
val_8EcZC9Yvm9
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
return 100;
return Response.json({ success: true, result });
} catch (error) {
return Response.json({
success: false,
error: error.message
}, { status: 500 });
val_k0V90fkuAs
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_k0V90fkuAs(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const analyzeRandomness = (sampleSize) => { const results = { even: 0, odd: 0 }; for (let i = 0; i < sampleSize; i++) { const randomNum = Math.floor(Math.random() * 100); if (randomNum % 2 === 0) { results.even++; } else { results.odd++; } } return results; }; analyzeRandomness(10000);
// Return the result in a properly formatted response
return new Response(JSON.stringify({
result: result,
type: typeof result
headers: { 'Content-Type': 'application/json' }
vt_app_v3
@peterqliu
@jsxImportSource https://esm.sh/hono@4.0.8/jsx
HTTP
/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/
const app = new Hono();
app.use(
jsxRenderer((c) => {
const { children } = c;
return (
<html>
<head>
<link
rel="stylesheet"
arenaHelpers
@korede
An interactive, runnable TypeScript val by korede
Script
export const arenaHelpers = (async () => {
async function requestUserWithChannels(userId: number, opts: {
accessToken?: string;
authToken?: string;
}, params: {
page?: string;
per?: string;
console.log("DEBUG", "start request user w channels");
opts = opts || {};
const headers = {
valle_tmp_33233416150321853525734847298241
@janpaul123
// This val responds with an HTML form styled with CSS, allowing the user to input their name and receive a greeting upon submission
HTTP
// This val responds with an HTML form styled with CSS, allowing the user to input their name and receive a greeting upon submission
export default async function(req: Request): Promise<Response> {
if (req.method === "POST") {
const formData = new URLSearchParams(await req.text());
const name = formData.get("name") || "stranger";
const greeting = `Hello, ${name}!`;
const funFact = "Did you know that the first email was sent in 1971?";
const htmlResponse = `
<style>
body {
