denoland / denobyexample Goto Github PK

deno task test says this:

Import map diagnostics:
  - Invalid top-level key "tasks". Only "imports" and "scopes" can be present.
  - Invalid top-level key "compilerOptions". Only "imports" and "scopes" can be present.

looks like importing www/deno.json from deno.jsonc caused this warning:

"importMap": "./www/deno.json",

Non fresh code looks very small, so I think we can merge these.

Makefiles are so last week (also it would act as an additional example of how to use the new task runner).

Adding server side GA so we can measure traffic on the examples page.

UA-property should match the same as deno.land. Shouldn't be an issue due to the same TLD.

I would like to have categories on the top page for readability. It would be easier to read if there are no more than 7 articles per category.

I asked Bing AI to classify them. Some of the classifications are wrong though.

[It seems like these articles are related to Deno, which is a runtime environment for JavaScript and TypeScript](https://deno.land/)[1](https://deno.land/)[2](https://ja.wikipedia.org/wiki/Deno). I can try to categorize and group them based on their topics. Here is one possible way:

- Introduction: Hello World
- Basics: Logging with colors, Importing & Exporting, Dependency Management, Benchmarking
- Data Formats: Importing JSON, Parsing and serializing JSON, Parsing and serializing TOML, Parsing and serializing YAML
- Encoding & Hashing: Hex and Base64 Encoding, Hashing
- Timers: Timeouts & Intervals
- User Interaction: Input Prompts
- Runtime Information: Getting the Deno version, Permission Management, Process Information, Handling OS Signals
- System Interaction: Environment Variables, Command Line Arguments
- File System: Reading Files, Writing Files, Moving/Renaming Files, Temporary Files & Directories, Creating & Removing Directories, Watching the filesystem, Walking directories, Checking for file existence
- Web Development: Web Workers, Web Assembly, Manipulating byte arrays, HTTP Requests, Running DNS Queries, Generating & Validating UUIDs, Subprocesses: Collecting Output, HTTP Server: Hello World, HTTP Server: Routing, HTTP Server: Streaming, HTTP Server: Serving Files, TCP Listener: Ping, TCP Connector: Ping

Is this what you were looking for?

I would add, "CLI" and "Network". Ideas?

The manual has a similar list of examples, including longer ones such as a chat app. Given this, why have both?

The debounce example here is somewhat misleading.
There is a chance that events get skipped, because debounce aborts prior function calls.

A better approach would be to collect the events:

import { debounce } from "https://deno.land/[email protected]/async/debounce.ts";

const collector: Deno.FsEvent[] = [];
const collectDebounce = debounce(() => {
  const events = collector.splice(0, Infinity);
  console.log(events);
}, 2000);
const collect = (event: Deno.FsEvent) => {
  collector.push(event);
  collectDebounce();
};

const watcher = Deno.watchFs("./");

for await (const event of watcher) {
  collect(event);
}

This affects the following examples:
https://examples.deno.land/watching-files
https://deno.land/[email protected]/async/debounce.ts?s=debounce#example_0

Some examples (eg. web worker) need more than 1 code block to describe the example, but currently that's not handled.

Add button "Edit this page" to contribute to examples.deno.land

See discussion on discord: https://discord.com/channels/684898665143206084/989436517518802945/1180685661389459636

$ deno run --allow-net https://examples.deno.land/http-requests.ts
... bunch of other output ...
error: Uncaught (in promise) TypeError: Failed to fetch: request body stream errored
resp = await fetch("https://example.com", {
       ^
    at mainFetch (ext:deno_fetch/26_fetch.js:283:13)
    at eventLoopTick (ext:core/01_core.js:183:11)
    at async fetch (ext:deno_fetch/26_fetch.js:501:7)
    at async https://examples.deno.land/http-requests.ts:52:8
Caused by: TypeError: Item in request body ReadableStream is not a Uint8Array
    at ext:deno_fetch/26_fetch.js:245:25
    at eventLoopTick (ext:core/01_core.js:183:11)

Minimal example:

const bodyStream = new ReadableStream({
  start(controller) {
    controller.enqueue("Hello, World!");
    controller.close();
  },
});
resp = await fetch("https://example.com", {
  method: "POST",
  body: bodyStream,
});

~/Dev/hobby/learn-deno 0.11s
❯ deno -V
deno 1.36.4

Example: https://examples.deno.land/hello-world

Run this example locally using the Deno CLI:
deno run https://examples.deno.land/hello-world.ts

In CLI we stick to underscore filenames, is there some reason why we shouldn't do it here?

@iuioiua @kt3k

when we add ULID to the deno_std, let's also add an example here

Currently, long individual lines of code are kind of broken. This is actually non-trivial to fix with the current setup and would probably require a major refactor on how we render a snippet. Looking at the code, this looks like a known issue and the bandaid fix is to just hide the overflow.

This is currently affecting the site a little bit, but it's not super major because copy/paste still works fine:

Observed:

$ deno run --allow-net https://examples.deno.land/websocket.ts
$

(no output)

Expected:

Logging about the socket readyState and a "ping" event echoed back.

Error

https://examples.deno.land/writing-tests

When running the example test via CLI, it exits with this error:

error: Module not found "https://deno.land/[email protected]/asserts/mod.ts".
    at https://examples.deno.land/writing-tests.ts:1:38

Potential Fix

https://github.com/denoland/denobyexample/blob/main/data/writing-tests.ts#L15

The example uses the plural /asserts/mod.ts but it should probably be the singular /assert/mod.ts based on the package available at deno.land: https://deno.land/[email protected]/assert/mod.ts

Currently, it's not easy to copy code snippet from the example. When I'm trying to copy code by selecting it with mouse, this copies both the description and the code snippet. I think it would be great to add copy button to the code snippets. As alternative solution, we can adjust layout to make copying code using mouse easier.

I think we should have the examples currently within std/testing be moved to this repo.

Related denoland/std#3822

ref denoland/docs#381

Deno.serve is not a function for some examples, I suppose that way is redundant, so just change it to import and use only serve() method, could someone please fix that? Thanks.

Would it be a bad idea to add JavaScript examples?

The API is now stable (https://deno.com/blog/v1.35#denoserve-is-now-stable) and we should update the example accordingly.

This is a list of examples we'd like to add. Before contributing an example, please read the instructions in the README.md file. Please also comment on this issue with the example you'd like to write up so we don't duplicate effort.

Ideas (in no particular order):

• Running a subprocess to completion #61
• Spawning a subprocess and interacting with it #65
• Handling OS signals
• Getting the Deno version (@ry, #14)
• Programatically request and query permissions
• Get current process information (pid, ppid, etc) (@ry, #14)
• Get list of current environment variables
• Logging with colors
• Connecting to a TCP server
• Starting a TCP listener
• Streaming HTTP server responses
• Serving local files using HTTP server #59
• Creating temporary files and directories
• Writing tests (including substeps, resource leakage, and std asserts) #79
• Getting a directory listing (including reccursive)
• Moving / renaming files
• Removing files / directories #67
• Checking for file existence (explain that you should just do the operation and catch errors)
• Handling WebSocket connections in a HTTP server #70
• Creating outbound WebSocket connections #69
• Watching the file system for changes (including how to debounce)
• Running DNS queries (@satyarohith)
• Sending UDP packets (@satyarohith) #80
• Listening for UDP packets (@satyarohith) #80
• Starting TLS connections (including custom CA certs, and other options) (@satyarohith)
• Start a TLS listener (@satyarohith)
• Piping streams
• How to do benchmarking
• Calculating cryptographic digests (hashing) (@littledivy)
• Manipulating byte buffers (read / write u8/u16/i32/i64 etc, concatenate buffers using std/bytes) (@littledivy)
• Generating UUIDs
• Manipulating fs paths (join, normalize, etc) #62
• Manipulating and parsing URLs #72
• Matching URLs with URLPattern
• Parsing flags
• Hex and base64 encoding
• Parsing / outputting TOML
• Parsing / outputting YAML
• Parsing / outputting CSV
• Parsing / outputting JSON (@lucacasonato)
• Using JSON modules with assert { type: "json" }
• Creating & Resolving Symlinks #68
• Using Web Workers
• Deno.File to Web Streams #71