Val Town Code SearchReturn to Val Town

3View 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. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

178      "Common Lisp", "Computer Vision", "Coq", "Cordova", "Cryptography",
179      "C Shell", "CSS", "CUDA", "D", "Dart", "Data Analytics", "Data Modeling",
180      "Data Warehousing", "Deep Learning", "Device Drivers", "Distributed Systems", "Django", "Docker", "DynamoDB", "Eclipse", "Elasticsearch", "Elastic Stack (ELK)", "Elixir", "Emacs Lisp", "Embedded Linux", "Erlang", "Ethereum", "ETL", "Express", "F#", "Firebase", "Firmware", "Flask", "Flutter", "Fortran", "FoxPro", "Git", "GNU Octave", "Go", "Google App Engine", "Google Cloud", "Google Home", "Google Web Toolkit", "GPU Programming", "GraphQL", "Groovy", "gRPC", "Hack", "Hadoop", "Haskell", "HBase", "Heroku", "Hibernate", "Hive", "HTML", "Hyperledger", "IBM Cloud/Watson", "IBM Db2", "Idris", "IIS", "Image Processing", "Information Security", "Internet of Things (IoT)", "iOS", "Java", "JavaScript", "Jenkins", "jQuery", "Julia", "JUnit", "Kafka", "Keras", "Kibana", "Korn Shell", "Kotlin", "Kubernetes", "Less", "Linux", "Lisp", "Logstash", "Lua", "Lucene", "M4", "Machine Learning", "MacOS", "Maple", "MariaDB", "Mathematica", "MATLAB", "Maven", "Memcached", "Mercurial", "Microcontrollers", "Microservices", "Microsoft Azure", "ML", "MongoDB", "MS SQL", "MUMPS", "MySQL", "Natural Language Processing", "Neo4j", ".NET Core", "Next.js", "Nginx", "Node.js", "Objective-C", "OCaml", "Oculus", "OpenCL", "OpenCV", "OpenGL", "Oracle", "Pascal", "Perl", "PHP", "PL/SQL", "PostgreSQL", "PowerScript", "PowerShell", "Processing", "Protobuf", "Puppet", "Python", "R", "RabbitMQ", "Racket", "Raspberry Pi", "RDS/Aurora", "React", "React Native", "Redis", "Redshift", "Reinforcement learning (RL)", "Riak", "Ruby", "Ruby on Rails", "Rust", "SAS", "SASS", "Scala", "Scheme", "Scratch", "SCSS", "Search", "sed", "Serverless", "Smalltalk", "Smarty", "Software Architecture", "Software Security", "Solidity", "Solr", "Spark", "Spring", "Spring Framework", "SQL", "SQLite", "SQL Server", "Standard ML", "Stellar", "Svelte", "Swift", "Tcl", "TCP/IP", "TensorFlow", "Tex", "Theano", "Tomcat", "Torch/PyTorch", "TypeScript", "Unity", "Unix", "Unreal Engine", "VBScript", "Verilog", "VHDL", "Visual Basic", "Vue.js", "WebLogic", "WebVR", "Windows", "Xamarin", "XML", "XQuery", "XSLT", "yacc", "Z shell"];
181
182    const toggleFilter = (filter: string) => {

46    { label: "sticky header", prompt: "Implement a sticky header that remains visible while scrolling" },
47    { label: "tag cloud", prompt: "Develop a tag cloud component to display popular tags or categories" },
48    { label: "lazy loading images", prompt: "Implement lazy loading for images to improve page load times" },
49    {
50      label: "type",
71      prompt: "Create scrollspy navigation that highlights menu items based on the current scroll position",
72    },
73    { label: "image carousel", prompt: "Develop an image carousel with navigation controls and autoplay feature" },
74    { label: "hero section", prompt: "Create an engaging hero section with a background image and call-to-action" },
75    {
76      label: "custom cursors",
94      label: "Z-Layout",
95      prompt:
96        "Create a Z-Layout that guides the user's eye in a Z-shaped pattern across the page, strategically positioning important elements like headlines, images, and call-to-action buttons to enhance conversion rates",
97    },
98    {
114      label: "Magazine Layout",
115      prompt:
116        "Design a Magazine Layout that mimics the structure of a printed magazine, featuring multiple columns, diverse content blocks, and a dynamic arrangement of images and text to create an engaging and visually rich experience.",
117    },
118    {
124      label: "blog listing template",
125      prompt:
126        "Develop a blog listing template that displays recent posts with featured images, excerpts, categories, and pagination, ensuring a clean and readable layout optimized for content discovery.",
127    },
128    {
142    },
143    {
144      label: "CSS-only image hover effects",
145      prompt:
146        "Design various CSS-only image hover effects such as zoom, grayscale to color transition, and overlay captions using CSS transitions",
147    },
148    {
164    {
165      label: "CSS blend modes",
166      prompt: "Utilize CSS blend modes to create visually striking image and background overlays",
167    },
168    {
172    {
173      label: "CSS clip-path effects",
174      prompt: "Use CSS clip-path to create unique shapes and masking effects for images and containers",
175    },
176    {
194      label: "cards",
195      prompt:
196        "Design a modern, responsive CSS card layout for our website that includes an image, title, description, and call-to-action button",
197    },
198    {
199      label: "cards",
200      prompt:
201        "Design a modern, responsive CSS card layout for our website that includes an image, title, description, and call-to-action button, features subtle hover effects, uses a flexible grid system for consistent spacing, aligns with our brand’s color scheme and typography, ensures performance-optimized and maintainable modular styles, and provides various size and arrangement options to accommodate different content types and devices.",
202    },
203    { label: "breadcrumbs", prompt: "Implement breadcrumb navigation for improved user experience" },

39        <div class="container">
40          <div class="file-group" id="original">
41            <input type="file" id="fileInput" multiple accept="image/*">
42            <button id="addButton">+</button>
43          </div>
56                group.className = 'file-group';
57                
58                // Create image preview if it's an image file
59                if (file.type.startsWith('image/')) {
60                  const preview = document.createElement('img');
61                  preview.className = 'preview';

26    
27    const file = e.dataTransfer.files[0];
28    if (!file || !file.type.startsWith('image/png')) {
29      setError("Please drop a PNG image file");
30      setLoading(false);
31      return;
33
34    if (file.size > 5 * 1024 * 1024) { // 5MB limit
35      setError("Image is too large. Please use an image under 5MB.");
36      setLoading(false);
37      return;
48      // Get metadata from server
49      const formData = new FormData();
50      formData.append('image', file);
51      
52      const response = await fetch('?process=true', {
84        <div className="dropzone-content">
85          <span className="icon">📄</span>
86          <p>{loading ? 'Processing...' : 'Drag and drop a PNG image here'}</p>
87          <small>Maximum file size: 5MB</small>
88        </div>
131
132export default async function server(req: Request): Promise<Response> {
133  // Handle image processing
134  if (req.method === 'POST' && new URL(req.url).searchParams.get('process')) {
135    try {
136      const formData = await req.formData();
137      const imageFile = formData.get('image') as File;
138      
139      if (!imageFile) {
140        return new Response('No image provided', { status: 400 });
141      }
142
143      if (!imageFile.type.startsWith('image/png')) {
144        return new Response('Only PNG images are supported', { status: 400 });
145      }
146
147      const arrayBuffer = await imageFile.arrayBuffer();
148      const bytes = new Uint8Array(arrayBuffer);
149
162        height,
163        fileSize: bytes.length,
164        type: imageFile.type,
165        name: imageFile.name
166      }), {
167        headers: {
171
172    } catch (error) {
173      return new Response(`Failed to process image: ${error.message}`, { status: 500 });
174    }
175  }

480  <meta charset="UTF-8">
481  <meta name="viewport" content="width=device-width, initial-scale=1.0">
482  <link rel="icon" type="image/png" href="https://labspace.ai/ls2-circle.png" />
483  <title>Squishy Form Demo</title>
484  <meta property="og:title" content="Squishy Form Experiment" />
485  <meta property="og:description" content="A form that can parse free-form text, JSON, and table inputs" />
486  <meta property="og:image" content="https://yawnxyz-og.web.val.run/img?link=https://yawnxyz-squishyform.web.val.run&title=Squishy+Form+Demo&subtitle=A+form+that+can+parse+free-form+text,+JSON,+and+table+inputs" />
487  <meta property="og:url" content="https://yawnxyz-squishyform.web.val.run/" />
488  <meta property="og:type" content="website" />
489  <meta name="twitter:card" content="summary_large_image" />
490  <meta name="twitter:title" content="Squishy Form Experiment" />
491  <meta name="twitter:description" content="A form that can parse free-form text, JSON, and table inputs" />
492  <meta name="twitter:image" content="https://yawnxyz-og.web.val.run/img?link=https://yawnxyz-squishyform.web.val.run&title=Squishy+Form+Demo&subtitle=A+form+that+can+parse+free-form+text,+JSON,+and+table+inputs" />
493  <script src="https://cdn.tailwindcss.com"></script>
494  <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/loader.js"></script>

165    return new Response(svg, {
166      headers: {
167        "Content-Type": "image/svg+xml",
168      },
169    });

38    <meta property="og:description" content="A tool to help delete bacteria before sepsis deletes us. Part of the ms2 project collecting data on bacteria and mobile genetic elements over time.">
39    <meta name="twitter:description" content="A tool to help delete bacteria before sepsis deletes us. Part of the ms2 project collecting data on bacteria and mobile genetic elements over time.">
40    <link rel="icon" href="https://f2.phage.directory/blogalog/phageray.png" type="image/png">
41    <meta property="og:image" content="https://f2.phage.directory/blogalog/sepsis.png">
42    <meta name="twitter:image" content="https://f2.phage.directory/blogalog/sepsis.png">
43    <script src="https://cdn.tailwindcss.com" > </script>
44    <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>

5let logs: any[] = [];
6php.addEventListener("output", (event: any) => logs.push(...event.detail));
7const script = "<?php header('Content-Type: image/jpeg'); echo \"Hello, world!\"; ";
8const exitCode = await php.run(script);
9console.log({ script, exitCode, logs, foo });

5  let logs: any[] = [];
6  php.addEventListener("output", (event: any) => logs.push(...event.detail));
7  const script = "<?php echo \"Hello, world!\"; header('Content-Type: image/jpeg');";
8  const exitCode = await php.run(script);
9  return Response.json({ script, exitCode, logs });