Skip to content

Commit a05405b

Browse files
pearminipearmini
committed
Update README with lighter format (#148)
* Update README * Update introduction
1 parent 4e4412a commit a05405b

File tree

2 files changed

+97
-17
lines changed

2 files changed

+97
-17
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
> We want to live in the editor forever. — [Luyu Cheng](https://luyu.computer/)
66
7-
[**Recho**](https://recho.dev/) is a free, [open-source](/LICENCE), reactive notebook-like editor that echoes output inline with your code as comments—enabling beginners, developers, artists, and anyone curious to quickly learn and explore through text experiments/art. Built on the reactive model of [Observable Notebook Kit](https://github.com/observablehq/notebook-kit), Recho aims to make coding accessible, interactive, and playful, turning every manipulation into a creative, in-situ experience—discover the sketches of tomorrow.
7+
[**Recho**](https://recho.dev/) is a free, [open-source](/LICENCE), light environment for learning and exploration. It introduces a pure code format that combines the openness of code files with notebook-like interactivity, echoing output inline as comments to provide live, in-situ coding experiences with instant feedback. Built on vanilla JavaScript and the reactive model of [Observable Notebook Kit](https://observablehq.com/notebook-kit/), Recho lets developers, artists, and learners explore and create directly in code.
88

99
- [Editor](https://recho.dev/) 📝 - The quickest way to get started with Recho.
1010
- [Announcement](https://medium.com/@subairui/a-lighter-way-to-code-with-creativity-8c0ac739aa6f) 📢 - Read our initial release story to discovery the vision behind Recho.

‎app/docs/introduction.recho.js‎

Lines changed: 96 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,28 +21,108 @@
2121
*
2222
* > We want to live in the editor forever. — Luyu Cheng[1]
2323
*
24-
* **Recho**[2] is a free, open-source, reactive notebook-like editor that
25-
* echoes output inline with your code as comments — enabling beginners,
26-
* developers, artists, and anyone curious to quickly code and explore through
27-
* text experiments/art.
24+
* Recho[2] is a free, open-source, light environment for learning and
25+
* exploration. It combines the openness of standard code files with
26+
* notebook-like interactivity, echoing output inline as comments to provide
27+
* live, in-situ coding experiences with instant feedback. Built on vanilla
28+
* JavaScript and the reactive model of Observable Notebook Kit[3], Recho lets
29+
* developers, artists, and learners explore and create directly in code.
2830
*
29-
* Built on the reactive model of Observable Notebook Kit[3], Recho aims to
30-
* make coding accessible, interactive, and playful, turning every string
31-
* manipulation into a creative, in-situ experience - discover the sketches of
32-
* tomorrow!
33-
*
34-
* Here is a quick example[4] to showcase Recho. A block of code is written to
35-
* explore the algorithm behind Mandelbrot set[5], generating a string called
36-
* `output`. After calling `echo(output)`, the output appears above the code
37-
* block as comments. By tweaking the values of `cols`, `rows`, and `maxIter`,
38-
* the output updates reactively for further explorations. Check out more live
39-
* examples[6] to see what you can create with Recho.
31+
* Here is a word counting example to show the core feature of Recho: echoing
32+
* output inline as comments. By calling `echo(results)`, the results are
33+
* displayed as comments above the statement! Now we can better understand
34+
* this piece of code by better "seeing" every manipulation. Notice that there
35+
* is no need to switch to console to see the results, which results in an
36+
* in-situ experience. And of course, we can be a little creative at last:
37+
* writing a few lines of code to create a simple visualization!
38+
*/
39+
40+
const text = `The dog, cat, and mouse were playing in the yard. Dog barked loudly, while cat ran quickly.
41+
Mouse hid under the bench, but the dog kept looking. Cat jumped over a small fence; dog followed.
42+
Bird watched silently as dog, cat, and mouse moved around.`;
43+
44+
const ignoredWords = ["the", "was", "not", "over", "and", "in", "were", "a", "while", "but", "as", "around"];
45+
46+
//➜ the dog cat and mouse were playing in the yard dog barked loudly while cat ran quickly
47+
//➜ mouse hid under the bench but the dog kept looking cat jumped over a small fence dog followed
48+
//➜ bird watched silently as dog cat and mouse moved around
49+
const clean = echo(text.toLowerCase().replace(/[.,!?;]/g, ""));
50+
51+
//➜ [ "the", "dog", "cat", "and", "mouse", "were", "playing", "in", "the", "yard", "dog", "barked", "loudly", "while", "cat", "ran", "quickly", "mouse", "hid", "under", "the", "bench", "but", "the", "dog"…
52+
const words = echo(clean.split(/\s+/));
53+
54+
//➜ [ "dog", "cat", "mouse", "playing", "yard", "dog", "barked", "loudly", "cat", "ran", "quickly", "mouse", "hid", "under", "bench", "dog", "kept", "looking", "cat", "jumped", "small", "fence", "dog", "f…
55+
const filtered = echo(words.filter((w) => !ignoredWords.includes(w)));
56+
57+
//➜ { dog: 5, cat: 4, mouse: 3, playing: 1, yard: 1, barked: 1, loudly: 1, ran: 1, quickly: 1, hid: 1, under: 1, bench: 1, kept: 1, looking: 1, jumped: 1, small: 1, fence: 1, followed: 1, bird: 1, watched…
58+
const frequencies = echo(filtered.reduce((acc, w) => ((acc[w] = (acc[w] || 0) + 1), acc), {}));
59+
60+
//➜ 🟩🟩🟩🟩🟩 dog
61+
//➜ 🟩🟩🟩🟩 cat
62+
//➜ 🟩🟩🟩 mouse
63+
//➜ 🟩 playing
64+
//➜ 🟩 yard
65+
//➜ 🟩 barked
66+
//➜ 🟩 loudly
67+
//➜ 🟩 ran
68+
//➜ 🟩 quickly
69+
//➜ 🟩 hid
70+
//➜ 🟩 under
71+
//➜ 🟩 bench
72+
//➜ 🟩 kept
73+
//➜ 🟩 looking
74+
//➜ 🟩 jumped
75+
//➜ 🟩 small
76+
//➜ 🟩 fence
77+
//➜ 🟩 followed
78+
//➜ 🟩 bird
79+
//➜ 🟩 watched
80+
//➜ 🟩 silently
81+
//➜ 🟩 moved
82+
echo(
83+
Object.entries(frequencies)
84+
.map(([word, count]) => "🟩".repeat(count) + " " + word)
85+
.join("\n"),
86+
);
87+
88+
/**
89+
* You want to be more creative? Let's try to create a Mandelbrot set[4]!
4090
*/
4191

4292
const cols = 80;
4393
const rows = 30;
4494
const maxIter = 80;
4595

96+
//➜
97+
//➜
98+
//➜ 0
99+
//➜ 0000
100+
//➜ 0000
101+
//➜ 0 000
102+
//➜ 00 000000000000
103+
//➜ 00000000000000000000
104+
//➜ 0000000000000000000
105+
//➜ 0000000000000000000000
106+
//➜ 00000000000000000000000000
107+
//➜ 0 0 000000000000000000000000
108+
//➜ 00000000 00000000000000000000000000
109+
//➜ 0000000000 0000000000000000000000000
110+
//➜ 00000000000 000000000000000000000000
111+
//➜ 000000000000000000000000000000000000000000000000000
112+
//➜ 00000000000 000000000000000000000000
113+
//➜ 0000000000 0000000000000000000000000
114+
//➜ 00000000 00000000000000000000000000
115+
//➜ 0 0 000000000000000000000000
116+
//➜ 00000000000000000000000000
117+
//➜ 0000000000000000000000
118+
//➜ 0000000000000000000
119+
//➜ 00000000000000000000
120+
//➜ 00 000000000000
121+
//➜ 0 000
122+
//➜ 0000
123+
//➜ 0000
124+
//➜ 0
125+
//➜
46126
{
47127
let output = "";
48128
for (let y = 0; y < rows; y++) {
@@ -68,7 +148,7 @@ function map(x, d0, d1, r0, r1) {
68148

69149
/**
70150
* Please visit the GitHub repository for more details:
71-
*
151+
*
72152
* > https://github.com/recho-dev/recho
73153
*
74154
* - [1] https://luyu.computer/

0 commit comments

Comments
 (0)