Skip to content

Commit 7e6f846

Browse files
pearminipearmini
authored
Update example (#112)
* Update to word counting example * Update description * Fix grammar errors
1 parent 51c704d commit 7e6f846

File tree

1 file changed

+73
-60
lines changed

1 file changed

+73
-60
lines changed

‎README.md‎

Lines changed: 73 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
> We want to live in the editor forever. — [Luyu Cheng](https://luyu.computer/)
44
5-
[**Recho**](https://recho.dev/) is a free, [open-source](/LICENCE), reactive code scratchpad that echoes output inline with your code as comments—enabling beginners, developers, artists, and anyone curious to quickly code and explore through text experiments/art. Built on the reactive model of [Observable Notebook Kit](https://github.com/observablehq/notebook-kit), Recho makes coding accessible, interactive, and playful, turning every string output into a creative, in-situ experience—discover the sketches of tomorrow.
5+
[**Recho**](https://recho.dev/) is a free, [open-source](/LICENCE), reactive coding environment that echoes output inline with your code as comments—enabling beginners, developers, artists, and anyone curious to quickly code and explore through text experiments/art. Built on the reactive model of [Observable Notebook Kit](https://github.com/observablehq/notebook-kit), Recho makes coding accessible, interactive, and playful, turning every string output into a creative, in-situ experience—discover the sketches of tomorrow.
66

77
- [Editor](https://recho.dev/) 📝 - The quickest way to get started with Recho.
88
- [Documentation](https://recho.dev/docs/introduction) 📚 - Learn how to use Recho with our comprehensive guides.
@@ -12,7 +12,7 @@
1212

1313
## Why Recho 💡
1414

15-
We want to make code more accessible and hopefully, more playful. Inspired by [P5.js Editor](https://editor.p5js.org/) and [Observable Notebook](https://observablehq.com/), we realize that _well-designed libraries don't necessarily make code accessible—the code environment does_! So here is Recho: **a lighter way to code**. We offer you a lighter beginning:
15+
We want to make code more accessible and hopefully, more playful. Inspired by [P5.js Editor](https://editor.p5js.org/) and [Observable Notebook](https://observablehq.com/), we realize that _well-designed libraries don't necessarily make code accessible—the code environment does_! So here is Recho: **a lighter way to code with creativity**. We offer you a lighter beginning:
1616

1717
- **Lighter Input** - We use vanilla JavaScript, and you don't have to learn extra libraries or browser specific APIs to get started with. It can help you focus more on general coding concepts and algorithms themselves.
1818
- **Lighter Output** - We embrace text-based output—a universal and timeless interface. It's concise, intuitive, and efficient, which keeps your attention on the essence of code rather than the overhead of visuals.
@@ -28,7 +28,7 @@ Recho is still in its early stage. There are a lot of areas we want to explore a
2828
- **More Examples** - Examples attract users and shape tools. We would love to have examples in different areas ([text analysis](https://recho.dev/examples/word-count), [data viz](https://recho.dev/examples/phases-of-the-moon), [graphics](https://recho.dev/examples/cg-text-based-shaders), [concrete poetry](https://recho.dev/examples/fire!), [algorithms](https://recho.dev/examples/maze), etc.) and working with external libraries ([D3](https://d3js.org/), [Lodash](https://lodash.com/), [ml5](https://ml5js.org/), [Tone](https://tonejs.github.io/), etc.). They don't have to be complicated or perfect. One thing to share would be great. Follow the [instructions](/CONTRIBUTING.md#sharing-examples) to open a [pull request](https://github.com/recho-dev/recho/new/main/app/examples) to share yours today!
2929
- **Text-Based Libraries** - Best practices deserve to be seen by more people. If you find some algorithms you are using helpful for others, don't hesitate to package them into libraries. Remember, they can be light!
3030
- **Polyglot Programming** - Recho begins with JavaScript, but isn't limited to it—coding has no boundaries. As long as a programming language can be transpiled to JavaScript, it can be incorporated with Recho. It can be mainstream ([Python](https://www.python.org/), [Rust](https://www.rust-lang.org/)), academic ([MLscript](https://github.com/hkust-taco/mlscript)), or creative ([wenyan‑lang](https://wy-lang.org/)). The best part is that it doesn't have to be production-ready or have real-life usage. Just providing a different way to code or think is cool. Want to add your favorite language to Recho or share your "toys"? [Talk to us](https://github.com/recho-dev/recho/issues/109)!
31-
- **Explorations with LLMs** - Recho’s text-first approach is ideal for LLMs. Rather than letting the LLM write code directly, you can use code as input: fusing files, turning text into pixel outputs, and more. We want to [exploring the possibilities](https://github.com/recho-dev/recho/issues/110).
31+
- **Explorations with LLMs** - Recho's text-first approach is ideal for LLMs. Rather than letting the LLM write code directly, you can use code as input: fusing files, turning text into pixel outputs, and more. We want to [explore the possibilities](https://github.com/recho-dev/recho/issues/110).
3232

3333
Of course, there are a lot of editor related features on the way!
3434

@@ -41,65 +41,78 @@ Also, we have plans to provide [cloud storage services](https://github.com/recho
4141

4242
## A Quick Example 🚀
4343

44-
Here is a [quick example](https://recho.dev/examples/mandelbrot-set) to showcase Recho. A block of code is written to explore the algorithm behind [Mandelbrot set](https://en.wikipedia.org/wiki/Mandelbrot_set), generating a string called _output_. After calling _echo(output)_, the output appears above the code block as comments. By tweaking the values of _cols_, _rows_, and _maxIter_, the output updates reactively for further explorations. Check out more [live examples](https://recho.dev/examples) to see what you can create with Recho.
44+
Here is a [word counting](https://recho.dev/examples/word-count) example to showcase Recho. Bret Victor gives programming a concise [definition](https://www.youtube.com/watch?v=ef2jpjTEB5U&t=501s):
45+
46+
> Programming is blindly manipulating symbols.
47+
48+
By "blindly", he means we can't see the results of our manipulations. For example, given the piece of code counting word frequencies, we aren't able to see the results of each step. Implementing this transformation process largely relies on our imagination! If we accidentally imagine wrong, the code becomes buggy.
49+
50+
```js
51+
const text = `The dog, cat, and mouse were playing in the yard. Dog barked loudly, while cat ran quickly.
52+
Mouse hid under the bench, but the dog kept looking. Cat jumped over a small fence; dog followed.
53+
Bird watched silently as dog, cat, and mouse moved around.`;
54+
55+
const ignoredWords = ["the", "was", "not", "over", "and", "in", "were", "a", "while", "but", "as", "around"];
56+
57+
const clean = text.toLowerCase().replace(/[.,!?;]/g, "");
58+
59+
const words = clean.split(/\s+/);
60+
61+
const filtered = words.filter((w) => !ignoredWords.includes(w));
62+
63+
const frequencies = filtered.reduce((acc, w) => ((acc[w] = (acc[w] || 0) + 1), acc), {});
64+
```
65+
66+
However, we can see the results of each transformation in Recho. By calling `echo(results)`, the results are displayed as comments above the statement! Now we can better understand this piece of code by better "seeing" every manipulation. Notice that there is no need to switch to console to see the results, which results in an in-situ experience. And of course, we can be a little creative at last: writing a few lines of code to create a simple visualization!
4567

4668
```js
47-
const cols = 80;
48-
const rows = 30;
49-
const maxIter = 80;
50-
51-
//➜
52-
//➜
53-
//➜ 0
54-
//➜ 0000
55-
//➜ 0000
56-
//➜ 0 000
57-
//➜ 00 000000000000
58-
//➜ 00000000000000000000
59-
//➜ 0000000000000000000
60-
//➜ 0000000000000000000000
61-
//➜ 00000000000000000000000000
62-
//➜ 0 0 000000000000000000000000
63-
//➜ 00000000 00000000000000000000000000
64-
//➜ 0000000000 0000000000000000000000000
65-
//➜ 00000000000 000000000000000000000000
66-
//➜ 000000000000000000000000000000000000000000000000000
67-
//➜ 00000000000 000000000000000000000000
68-
//➜ 0000000000 0000000000000000000000000
69-
//➜ 00000000 00000000000000000000000000
70-
//➜ 0 0 000000000000000000000000
71-
//➜ 00000000000000000000000000
72-
//➜ 0000000000000000000000
73-
//➜ 0000000000000000000
74-
//➜ 00000000000000000000
75-
//➜ 00 000000000000
76-
//➜ 0 000
77-
//➜ 0000
78-
//➜ 0000
79-
//➜ 0
80-
//➜
81-
{
82-
let output = "";
83-
for (let y = 0; y < rows; y++) {
84-
for (let x = 0; x < cols; x++) {
85-
const re = map(x, 0, cols, -2.5, 1);
86-
const im = map(y, 0, rows, -1, 1);
87-
let [a, b, i] = [0, 0, 0];
88-
while (i < maxIter) {
89-
[a, b] = [a * a - b * b + re, 2 * a * b + im];
90-
if (a * a + b * b > 4) break;
91-
i++;
92-
}
93-
output += i === maxIter ? "0" : " ";
94-
}
95-
output += y === rows - 1 ? "" : "\n";
96-
}
97-
echo(output);
98-
}
99-
100-
function map(x, d0, d1, r0, r1) {
101-
return r0 + ((r1 - r0) * (x - d0)) / (d1 - d0);
102-
}
69+
const text = `The dog, cat, and mouse were playing in the yard. Dog barked loudly, while cat ran quickly.
70+
Mouse hid under the bench, but the dog kept looking. Cat jumped over a small fence; dog followed.
71+
Bird watched silently as dog, cat, and mouse moved around.`;
72+
73+
const ignoredWords = ["the", "was", "not", "over", "and", "in", "were", "a", "while", "but", "as", "around"];
74+
75+
//➜ the dog cat and mouse were playing in the yard dog barked loudly while cat ran quickly
76+
//➜ mouse hid under the bench but the dog kept looking cat jumped over a small fence dog followed
77+
//➜ bird watched silently as dog cat and mouse moved around
78+
const clean = echo(text.toLowerCase().replace(/[.,!?;]/g, ""));
79+
80+
//➜ [ "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"…
81+
const words = echo(clean.split(/\s+/));
82+
83+
//➜ [ "dog", "cat", "mouse", "playing", "yard", "dog", "barked", "loudly", "cat", "ran", "quickly", "mouse", "hid", "under", "bench", "dog", "kept", "looking", "cat", "jumped", "small", "fence", "dog", "f…
84+
const filtered = echo(words.filter((w) => !ignoredWords.includes(w)));
85+
86+
//➜ { 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…
87+
const frequencies = echo(filtered.reduce((acc, w) => ((acc[w] = (acc[w] || 0) + 1), acc), {}));
88+
89+
//➜ 🟩🟩🟩🟩🟩 dog
90+
//➜ 🟩🟩🟩🟩 cat
91+
//➜ 🟩🟩🟩 mouse
92+
//➜ 🟩 playing
93+
//➜ 🟩 yard
94+
//➜ 🟩 barked
95+
//➜ 🟩 loudly
96+
//➜ 🟩 ran
97+
//➜ 🟩 quickly
98+
//➜ 🟩 hid
99+
//➜ 🟩 under
100+
//➜ 🟩 bench
101+
//➜ 🟩 kept
102+
//➜ 🟩 looking
103+
//➜ 🟩 jumped
104+
//➜ 🟩 small
105+
//➜ 🟩 fence
106+
//➜ 🟩 followed
107+
//➜ 🟩 bird
108+
//➜ 🟩 watched
109+
//➜ 🟩 silently
110+
//➜ 🟩 moved
111+
echo(
112+
Object.entries(frequencies)
113+
.map(([word, count]) => "🟩".repeat(count) + " " + word)
114+
.join("\n"),
115+
);
103116
```
104117

105118
## License 📄

0 commit comments

Comments
 (0)