Giter VIP home page Giter VIP logo

denobyexample's Introduction

Deno by Example

This repository contains the source code for https://examples.deno.land/.

Deno by Example is a collection of small snippets showcasing various functions of the APIs implemented in Deno.

  • Examples are written in TypeScript
  • Each example should be a single file, no more than 50 lines
  • Each example should be a self-contained unit, and should depend on no dependencies other than Deno builtins and the standard library, unless a third-party library is strictly required.
  • Each example should be runnable without additional dependencies on all systems (exceptions can be made for platform specific functionality)
  • Examples should be introduce at most one (or in exceptional cases two or three) concepts in Deno / Web APIs. Existing concepts should be linked to.
  • Code should be kept really simple, and should be easy to read and understand by anyone. Do not use complicated code constructs, or hard to follow builtins like Array.reduce
  • Concepts introduced in an example should be explained

Contributing

Adding an example

To add an example, create a file in the data directory. The file name should be the id of the example, and the contents should be the code for the example. The file should be in the .ts format. The file should start with a JSDoc style multi line comment that describes the example:

/**
 * @title HTTP server: Hello World
 * @difficulty intermediate
 * @tags cli, deploy
 * @run --allow-net <url>
 *
 * An example of a HTTP server that serves a "Hello World" message.
 */

You should add a title, a difficulty level (beginner or intermediate), and a list of tags (cli, deploy, web depending on where an example is runnable). The @run tag should be included if the example can be run locally by just doing deno run <url>. If running requires permissions, add these:

/**
 * ...
 * @run --allow-net --allow-read <url>
 */

After the pragmas, you can add a description of the example. This is optional, but recommended for most examples. It should not be longer than one or two lines. The description shows up at the top of the example in the example page, and in search results.

After the JS Doc comment, you can write the code. Code can be prefixed with a comment that describes the code. The comment will be rendered next to the code in the example page.

Now add your example to the toc.js file. This will cause it to show up on the index page.

After you have added the example, run deno task fmt and deno task lint to format and lint the example.

Running the webserver locally

To run the webserver locally, open a terminal and run:

deno task start

You can then view the page at http://localhost:8000/

Before opening a PR with a change, make sure deno task fmt and deno task lint pass.

denobyexample's People

Contributors

ashishkujoy avatar ayame113 avatar barnabyc avatar bartlomieju avatar crowlkats avatar davidpesta avatar douglas-johnson avatar extremelylatebound avatar hashrock avatar ije avatar iuioiua avatar jlandowner avatar jpillora avatar kt3k avatar kwhinnery avatar lambtron avatar leodog896 avatar lino-levan avatar littledivy avatar load1n9 avatar lucacasonato avatar nukopy avatar radishmouse avatar rgbkrk avatar ry avatar shajanjp avatar ultirequiem avatar wingzer0o avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

denobyexample's Issues

Fix .serve() methods in examples

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.

Add copy button to code snippets

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.

Ideas for examples

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

Watching the filesystem example: debounce skips events

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

Incorrect URL for assert package in Writing Tests example

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

Import map diagnostics warning

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",

Fix scrolling

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:
image

Add GA

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.

Group articles

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?

Error in ReadableStream in http-requests.ts

$ 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.