Search results for "react client side"

surfboardDemoSchedule2

@szymonator

// WELCOME TO THE API DEMO

0

HTTP (deprecated)

// DO NOT EDIT THE BELOW

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

import { useEffect, useState } from "https://esm.sh/react";

import { renderToString } from "npm:react-dom/server";

// BELOW ARE THE HOURLY RATES FOR AN ON CALL SHIFT, AND A REGULAR SHIFT. THE DEFAULT IS £24 AND £12.

// IF YOU DON'T WANT THIS DEFAULT, REMOVE THE TWO FORWARD SLASHES FROM THE TWO LINES OF CODE AND

// WRITE THE DATE IN THE FORMAT: "YYYY-MM-DD", INSIDE THE PROVIDED QUOTES. DO NOT CHANGE ANYTHING ELSE.

// PLEASE DO NOT SET THE START DATE TO BE LATER THAN THE END DATE, ALSO KEEP THE POSITIONING OF THE LINES THE SAME.

// if (typeof document !== "undefined") {

// const { hydrateRoot } = await import("https://esm.sh/react-dom/client");

// const scheduleData = await getSchedule();

const scheduleData = await getSchedule();

const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");

const stream = await renderToReadableStream(<App data={scheduleData} />, { bootstrapModules: [import.meta.url] });

AIDateInput

@ganeshkumartk

AI Date Input AI Date Input is a smart date detection React component. It uses natural language processing to interpret various date and time inputs, providing a seamless user experience for date entry. Features Real-time date and time detection as you type Supports a wide range of date and time formats Displays detected date in a formatted output Shows both the parsed date and the original input text Clean, minimalist UI with a clear input field One-click clear functionality How It Works The AI Date Input uses the chrono-node library to parse natural language date and time expressions. As the user types, the input is continuously analyzed, and when a valid date or time is detected, it's displayed below the input field. The detected date is shown in two formats: A formatted date and time (e.g., "09/09/2024 02:27 PM") The original text that was interpreted as a date (e.g., "5 days from now") Usage To use this component in Val Town: Create a new val or edit an existing one Copy and paste the entire code into the val Save the val Access the val's URL to see the AI Date Input in action Customization You can customize the appearance and behavior of the AI Date Input: Modify the Tailwind CSS classes in the HTML to change the styling Adjust the date formatting in the formatDate function Change the parsing behavior by modifying the detectDate function Dependencies React 18 chrono-node (for date parsing) Tailwind CSS (for styling) Technical Details The component uses server-side rendering for the initial HTML Client-side JavaScript handles the interactive features Date parsing is done in real-time on the client-side Contributing To contribute to this project: Fork the val in Val Town Make your changes Test thoroughly Submit a pull request or share your modified version License This project is open-source and available under the MIT License. ©️ Ganesh Kumar 2024

1

HTTP (deprecated)

AI Date Input is a smart date detection React component. It uses natural language processing to interpret various date and ti

- React 18

- The component uses server-side rendering for the initial HTML

- Client-side JavaScript handles the interactive features

- Date parsing is done in real-time on the client-side

/** @jsxImportSource npm:react */

import { renderToString } from "npm:react-dom@18/server";

import React from "npm:react@18";

const clientScript = `

${clientScript}

pinkPig

@stevekrouse

// render WebcamPage as a client side react component with fetch handler response object

0

HTTP (deprecated)

// render WebcamPage as a client side react component with fetch handler response object

const script = `

import WebcamPage from 'https://esm.sh/gh/fal-ai/fal-js@9cc7cf5456/apps/demo-nextjs-app-router/app/camera-turbo/page.tsx';

import React from 'https://esm.sh/react@17.0.2?dev';

import { render } from 'https://esm.sh/react-dom@17.0.2?dev';

render(React.createElement(WebcamPage), document.getElementById('root'));

export default (request: Request) =>

numbergame

@tnorthcutt

* This game implements a number chain puzzle where players drag between adjacent squares (including diagonals) with the same number to add up. * When a valid chain is selected, the last square in the chain holds the total value rounded up to the nearest power of two, * and the other squares get new random values. The player scores points based on the chain length and values. * We'll use React for the UI and manage game state on the client side. * The server will just serve the initial HTML and JavaScript. * * We've updated the color scheme to have a dark background with colored tiles. * Each number has its own color on a hue scale, cycling through hues for arbitrary powers of two. * Selected chain tiles now have a white border, and numbers are white for better visibility. * Non-bordered tiles now have a transparent border to maintain consistent size and prevent layout jumps. * New tiles fading in no longer show a white border. * New tiles now have a random power of two between the min and max numbers on the board. * Initial possible numbers are now between 2 and 32. * * Added error handling to prevent "TypeError: cell1 is not iterable" error.

1

0

HTTP

* and the other squares get new random values. The player scores points based on the chain length and values.

* We'll use React for the UI and manage game state on the client side.

* The server will just serve the initial HTML and JavaScript.

* Added error handling to prevent "TypeError: cell1 is not iterable" error.

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

import React, { useEffect, useRef, useState } from "https://esm.sh/react";

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

// Game board size

</div>

function client() {

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

if (typeof document !== "undefined") {

client();

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

valwriter_react_clientside

@stevekrouse

[ ] streaming we can't stream into an actual val - we can only write a full piece of text, i guess we can stream back the code so we don't get bored while we wait [ ] send the code of the valwriter back to gpt only if it's related, might need some threads [ ] send errors, logs back to gpt [ ] get screenshots of the output back to gpt [ ] experiment with applying diffs instead of regenerating from scratch every time could also have it as a conversation as the main thing and only the diffs get applied or the whole code gets replaced, maybe tool use it the key here... which does make it seem like a custom gpt may be the better fit...

0

HTTP (deprecated)

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

import { updateValByName } from "https://esm.town/v/nbbaier/updateValByName?v=14";

import { App } from "${import.meta.url}";

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

import { jsx } from "https://esm.sh/react@18.2.0/jsx-runtime";

createRoot(document.body).render(jsx(App, { }));

user: "website that shows the current time",

content: `/** @jsxImportSource npm:react */

export default function() {

originalEmeraldPython

@movienerd

* This program creates a movie recommendation system based on moods. * It uses OpenAI to generate movie recommendations based on the user's selected mood and feedback. * The program uses React for the frontend and handles state management for user interactions. * It uses the Val Town OpenAI proxy for backend API calls. * A "More moods" button has been added to dynamically expand the list of available moods.

1

0

HTTP

* It uses OpenAI to generate movie recommendations based on the user's selected mood and feedback.

* The program uses React for the frontend and handles state management for user interactions.

* It uses the Val Town OpenAI proxy for backend API calls.

* A "More moods" button has been added to dynamically expand the list of available moods.

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

import React, { useState } from "https://esm.sh/react";

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

type Mood = string;

return moodEmojis[mood] || "🙂";

// Client-side only code

function client() {

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

if (typeof document !== "undefined") {

client();

// Server-side only code

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

cron_client_react_fork

@stevekrouse

CronGPT This is a minisite to help you create cron expressions, particularly for crons on Val Town. It was inspired by Cron Prompt , but also does the timezone conversion from wherever you are to UTC (typically the server timezone). Tech Hono for routing ( GET / and POST /compile .) Hono JSX HTML (probably overcomplicates things; should remove) @stevekrouse/openai, which is a light wrapper around @std/openai TODO [ ] simplify by removing HTMX (try doing the form as a GET request, manual JS script, or client side react) [ ] make the timezone picker better (fewer options, searchable) [ ] add a copy button?

0

HTTP (deprecated)

## TODO

- [ ] simplify by removing HTMX (try doing the form as a GET request, manual JS script, or client side react)

- [ ] make the timezone picker better (fewer options, searchable)

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

import cronstrue from "https://esm.sh/cronstrue";

import React, { useState } from "https://esm.sh/react@18.2.0";

import { chat } from "https://esm.town/v/stevekrouse/openai?v=19";

import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";

export default function(req: Request) {

if (req.method === "GET" && url.pathname === "/") {

return react_http({

component: App,

const [cron, setCron] = useState("0 16 * * 1-5");

const onSubmit: React.FormEventHandler<HTMLFormElement> = async function(e) {

e.preventDefault();

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

1

0

HTTP (deprecated)

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

import { renderToString } from "npm:react-dom/server";

export default async function(req: Request) {

A HTML file is all you need. Lot's of useful client side JavaScript examples including charts, Python and

SQLite.

</a>

Simple Hono JS val.town Template with client side JavaScript using html Helper

</a>

AIMovie

@movienerd

* This program creates a movie recommendation system based on moods. * It uses OpenAI to generate movie recommendations based on the user's selected mood and feedback. * The program uses React for the frontend and handles state management for user interactions. * It uses the Val Town OpenAI proxy for backend API calls. * Movies are saved in SQLite to prevent recommending the same movie twice. * The SQLite schema version has been updated to fix the 404 error. * A dancing popcorn emoji has been added to the loading message. * The color scheme has been updated to a monochrome look with a modern style and a nice font. * The "More moods" button text has been changed to "Ask the AI for different moods". * The mood generation now keeps track of previously generated moods to avoid repetition. * A list of movies that have been liked, disliked, or not seen is displayed at the bottom of the page. * The JSON parsing has been made more robust to handle non-standard responses.

0

HTTP

* It uses OpenAI to generate movie recommendations based on the user's selected mood and feedback.

* The program uses React for the frontend and handles state management for user interactions.

* It uses the Val Town OpenAI proxy for backend API calls.

* The JSON parsing has been made more robust to handle non-standard responses.

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

import React, { useState, useEffect } from "https://esm.sh/react";

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

type Mood = string;

return moodEmojis[mood] || "🎭";

// Client-side only code

function client() {

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

if (typeof document !== "undefined") {

client();

// Server-side only code

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

valledrawclient

@d3vobed

tldraw example with builder, for consistent React versions.

0

Script

tldraw example with builder, for consistent React versions.

/** @jsxImportSource https://esm.sh/react@18.3.1 **/

"react-dom": "18.3.1",

"react": "18.3.1",

"@reecelucas/react-use-hotkeys": "2.0.0",

export * as ReactDOM from "react-dom";

export * as React from "react";

import useHotkeys from "@reecelucas/react-use-hotkeys";

ReactDOM,

React,

const { useCallback, useRef, useEffect } = React;

todo_list

@stevekrouse

Example Full-stack Todo List App with React SSR + Client-side hydration & sqlite Requires you to put the React component in another val, in this case: https://www.val.town/v/stevekrouse/TodoApp

0

HTTP (deprecated)

# Example Full-stack Todo List App with React SSR + Client-side hydration & sqlite

Requires you to put the React component in another val, in this case: https://www.val.town/v/stevekrouse/TodoApp

import ssr_hydrate from "https://esm.town/v/stevekrouse/ssr_hydrate_react";

export default ssr_hydrate("stevekrouse", "TodoApp");

personalData

@iamseeley

An interactive, runnable TypeScript val by iamseeley

16

0

Script

"highlights": [

platform with secure authentication and full CRUD capabilities, streamlining client operations.",

"Crafted a website for a food truck that captures their unique branding and playful image. The site features a fun, u

eloped a responsive, accessibility-focused website for a law firm, improving client accessibility and increasing inquiries by

"company": "Mindpool",

"Integrated GPT-3.5 for prompt enhancement, significantly improving image and video quality.",

"Overcame the challenge of running FFmpeg client-side in Next.js, enabling real-time video processing in the browser.

"url": "https://github.com/iamseeley/falbulous-minimovie"

"name": "Web Development",

"keywords": ["HTML5", "CSS", "Tailwind CSS", "React", "Next.js", "Vite", "FastAPI", "Hono", "Framer Motion"]

"name": "Programming",

cron

@stevekrouse

CronGPT This is a minisite to help you create cron expressions, particularly for crons on Val Town. It was inspired by Cron Prompt , but also does the timezone conversion from wherever you are to UTC (typically the server timezone). Tech Hono for routing ( GET / and POST /compile .) Hono JSX HTMX (probably overcomplicates things; should remove) @stevekrouse/openai, which is a light wrapper around @std/openai I'm finding HTMX a bit overpowered for this, so I have two experimental forks without it: Vanilla client-side JavaScript: @stevekrouse/cron_client_side_script_fork Client-side ReactJS (no SSR): @stevekrouse/cron_client_react_fork I think (2) Client-side React without any SSR is the simplest architecture. Maybe will move to that.

2 1

3

HTTP

I'm finding HTMX a bit overpowered for this, so I have two experimental forks without it:

1. Vanilla client-side JavaScript: @stevekrouse/cron_client_side_script_fork

2. Client-side ReactJS (no SSR): @stevekrouse/cron_client_react_fork

I think (2) Client-side React without any SSR is the simplest architecture. Maybe will move to that.

resumeDetails

@iamseeley

💼 Thomas Seeley's resume in the JSON Resume standard

1 5

0

HTTP (deprecated)

"url": "https://tseeley.com",

applications, always ensuring development is business-oriented and based on client and user needs. I bring a unique blend of

"location": {

"highlights": [

platform with secure authentication and full CRUD capabilities, streamlining client operations",

"Crafted a website for a food truck that captures their unique branding and playful image. The site features a fun, u

eloped a responsive, accessibility-focused website for a law firm, improving client accessibility and increasing inquiries by

"name": "Mindpool",

"level": "",

"keywords": ["HTML5", "CSS", "Tailwind CSS", "React", "Next.js", "Vite", "FastAPI", "Hono", "Framer Motion"]

"name": "Programming",

"Integrated GPT-3.5 for prompt enhancement, significantly improving image and video quality",

"Overcame the challenge of running FFmpeg client-side in Next.js, enabling real-time video processing in the browser"

"keywords": ["TypeScript", "Next.js", "Tailwind CSS", "Fal.ai", "FFmpeg"],

resumeDetails

@siygle

💼 Thomas Seeley's resume in the JSON Resume standard

0

HTTP (deprecated)

"summary":

applications, always ensuring development is business-oriented and based on client and user needs. I bring a unique blend of

"location": {

"highlights": [

platform with secure authentication and full CRUD capabilities, streamlining client operations",

"Crafted a website for a food truck that captures their unique branding and playful image. The site features a fun,

eloped a responsive, accessibility-focused website for a law firm, improving client accessibility and increasing inquiries by

"name": "Mindpool",

"level": "",

"keywords": ["HTML5", "CSS", "Tailwind CSS", "React", "Next.js", "Vite", "FastAPI", "Hono", "Framer Motion"],

"name": "Programming",

"Integrated GPT-3.5 for prompt enhancement, significantly improving image and video quality",

"Overcame the challenge of running FFmpeg client-side in Next.js, enabling real-time video processing in the browse

"keywords": ["TypeScript", "Next.js", "Tailwind CSS", "Fal.ai", "FFmpeg"],