Skip to content

Commit

Permalink
post: added telegram bot post
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenyo-17
chenyo-17 committed Sep 8, 2024
1 parent f163207 commit b1cec8a
Show file tree
Hide file tree
Showing 27 changed files with 1,917 additions and 570 deletions.
57 changes: 30 additions & 27 deletions 2024-06-23-weblab-notes:-react-hooks.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,34 +41,37 @@ <h1><a href="https://chenyo.me">Chenyo's org-static-blog</a></h1>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#org915331c">1. What is a React hook</a>
<li><a href="#orga8c7ca9">1. What is a React hook</a>
<ul>
<li><a href="#org52d8924">1.1. <code>useState</code> is not enough</a></li>
<li><a href="#orgb8767ef">1.2. <code>useEffect</code> runs after specific variable change</a></li>
<li><a href="#org7146a36">1.1. <code>useState</code> is not enough</a></li>
<li><a href="#org800f295">1.2. <code>useEffect</code> runs after specific variable change</a></li>
</ul>
</li>
<li><a href="#org29c63d5">2. React hook patterns</a>
<li><a href="#org1a4306a">2. React hook patterns</a>
<ul>
<li><a href="#org723e882">2.1. Fetch and send data</a></li>
<li><a href="#org8e42c9c">2.2. Conditional rendering</a></li>
<li><a href="#org2d8bd1d">2.3. Render an array of Data</a></li>
<li><a href="#org6de65a1">2.1. Fetch and send data</a></li>
<li><a href="#org0543254">2.2. Conditional rendering</a></li>
<li><a href="#org8b46cf9">2.3. Render an array of Data</a></li>
</ul>
</li>
<li><a href="#org927a626">3. Example: Stopwatch</a></li>
<li><a href="#org12cbcee">4. DOM and component mounting</a></li>
<li><a href="#org696a40e">3. Example: Stopwatch</a></li>
<li><a href="#org047cf77">4. DOM and component mounting</a></li>
</ul>
</div>
</nav>
<div id="outline-container-org915331c" class="outline-2">
<h2 id="org915331c"><span class="section-number-2">1.</span> What is a React hook</h2>
<p>
This is a personal note for the <a href="https://docs.google.com/presentation/d/1n5RlpgBtXQ1OHvutx9TRLotWizyg2BPKv_780DD4-90/edit#slide=id.gb2bbafee77_1_66">web.lab lectures</a>.
</p>
<div id="outline-container-orga8c7ca9" class="outline-2">
<h2 id="orga8c7ca9"><span class="section-number-2">1.</span> What is a React hook</h2>
<div class="outline-text-2" id="text-1">
<ul class="org-ul">
<li>Special functions to access parts of the component lifestyle.</li>
<li>e.g., <code>useState</code></li>
</ul>
</div>
<div id="outline-container-org52d8924" class="outline-3">
<h3 id="org52d8924"><span class="section-number-3">1.1.</span> <code>useState</code> is not enough</h3>
<div id="outline-container-org7146a36" class="outline-3">
<h3 id="org7146a36"><span class="section-number-3">1.1.</span> <code>useState</code> is not enough</h3>
<div class="outline-text-3" id="text-1-1">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><span style="color: #51afef;">const</span> [<span style="color: #dcaeea;">persons</span>, <span style="color: #dcaeea;">setPersons</span>] = useState([]);
Expand All @@ -87,8 +90,8 @@ <h3 id="org52d8924"><span class="section-number-3">1.1.</span> <code>useState</c
</ul>
</div>
</div>
<div id="outline-container-orgb8767ef" class="outline-3">
<h3 id="orgb8767ef"><span class="section-number-3">1.2.</span> <code>useEffect</code> runs after specific variable change</h3>
<div id="outline-container-org800f295" class="outline-3">
<h3 id="org800f295"><span class="section-number-3">1.2.</span> <code>useEffect</code> runs after specific variable change</h3>
<div class="outline-text-3" id="text-1-2">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span>useEffect(() =&gt; {
Expand Down Expand Up @@ -116,12 +119,12 @@ <h3 id="orgb8767ef"><span class="section-number-3">1.2.</span> <code>useEffect</
</div>
</div>
</div>
<div id="outline-container-org29c63d5" class="outline-2">
<h2 id="org29c63d5"><span class="section-number-2">2.</span> React hook patterns</h2>
<div id="outline-container-org1a4306a" class="outline-2">
<h2 id="org1a4306a"><span class="section-number-2">2.</span> React hook patterns</h2>
<div class="outline-text-2" id="text-2">
</div>
<div id="outline-container-org723e882" class="outline-3">
<h3 id="org723e882"><span class="section-number-3">2.1.</span> Fetch and send data</h3>
<div id="outline-container-org6de65a1" class="outline-3">
<h3 id="org6de65a1"><span class="section-number-3">2.1.</span> Fetch and send data</h3>
<div class="outline-text-3" id="text-2-1">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><span style="color: #5B6268;">/* </span><span style="color: #5B6268;">fetch data on mount</span><span style="color: #5B6268;"> */</span>
Expand All @@ -146,8 +149,8 @@ <h3 id="org723e882"><span class="section-number-3">2.1.</span> Fetch and send da
</div>
</div>
</div>
<div id="outline-container-org8e42c9c" class="outline-3">
<h3 id="org8e42c9c"><span class="section-number-3">2.2.</span> Conditional rendering</h3>
<div id="outline-container-org0543254" class="outline-3">
<h3 id="org0543254"><span class="section-number-3">2.2.</span> Conditional rendering</h3>
<div class="outline-text-3" id="text-2-2">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><span style="color: #5B6268;">// </span><span style="color: #5B6268;">JSX is a way of writing HTML in js</span>
Expand All @@ -162,8 +165,8 @@ <h3 id="org8e42c9c"><span class="section-number-3">2.2.</span> Conditional rende
</div>
</div>
</div>
<div id="outline-container-org2d8bd1d" class="outline-3">
<h3 id="org2d8bd1d"><span class="section-number-3">2.3.</span> Render an array of Data</h3>
<div id="outline-container-org8b46cf9" class="outline-3">
<h3 id="org8b46cf9"><span class="section-number-3">2.3.</span> Render an array of Data</h3>
<div class="outline-text-3" id="text-2-3">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr">1: </span><span style="color: #51afef;">const</span> <span style="color: #dcaeea;">data</span> = [
Expand All @@ -182,8 +185,8 @@ <h3 id="org2d8bd1d"><span class="section-number-3">2.3.</span> Render an array o
</div>
</div>
</div>
<div id="outline-container-org927a626" class="outline-2">
<h2 id="org927a626"><span class="section-number-2">3.</span> Example: Stopwatch</h2>
<div id="outline-container-org696a40e" class="outline-2">
<h2 id="org696a40e"><span class="section-number-2">3.</span> Example: Stopwatch</h2>
<div class="outline-text-2" id="text-3">
<div class="org-src-container">
<pre class="src src-js"><span class="linenr"> 1: </span><span style="color: #51afef;">const</span> <span style="color: #dcaeea;">Stopwatch</span> = () =&gt; {
Expand All @@ -204,8 +207,8 @@ <h2 id="org927a626"><span class="section-number-2">3.</span> Example: Stopwatch<
</div>
</div>
</div>
<div id="outline-container-org12cbcee" class="outline-2">
<h2 id="org12cbcee"><span class="section-number-2">4.</span> DOM and component mounting</h2>
<div id="outline-container-org047cf77" class="outline-2">
<h2 id="org047cf77"><span class="section-number-2">4.</span> DOM and component mounting</h2>
<div class="outline-text-2" id="text-4">
<ul class="org-ul">
<li>DOM (Document Object Model): a programming interface for web documents; represents the structure of a document, e.g., HTML, as a tree of objects, where each object corresponds to a part of the document; it dynamically updates the document contents
Expand Down
47 changes: 25 additions & 22 deletions 2024-06-23-weblab-notes:-react-route.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,24 @@ <h1><a href="https://chenyo.me">Chenyo's org-static-blog</a></h1>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#orgd65c560">1. Router</a></li>
<li><a href="#org6a48dda">2. Link</a></li>
<li><a href="#orgcbf2ab4">3. Workshop 3</a>
<li><a href="#org4e3db74">1. Router</a></li>
<li><a href="#orge5eb930">2. Link</a></li>
<li><a href="#org632e312">3. Workshop 3</a>
<ul>
<li><a href="#orge01c1aa">3.1. Structure</a></li>
<li><a href="#org9bf22d6">3.2. States</a></li>
<li><a href="#orgdd04f10">3.3. Props</a></li>
<li><a href="#org3e5e356">3.4. Why passing down the update function in props 1, 4, 6?</a></li>
<li><a href="#org79e1d9b">3.1. Structure</a></li>
<li><a href="#org50d9c4d">3.2. States</a></li>
<li><a href="#orged81644">3.3. Props</a></li>
<li><a href="#org50e992e">3.4. Why passing down the update function in props 1, 4, 6?</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="outline-container-orgd65c560" class="outline-2">
<h2 id="orgd65c560"><span class="section-number-2">1.</span> Router</h2>
<p>
This is a personal note for the <a href="https://docs.google.com/presentation/d/1hrTjcB8GU4hWPHzS5lI17WALogP4biZ1UAtyxXfafkI/edit#slide=id.p">web.lab lectures</a>.
</p>
<div id="outline-container-org4e3db74" class="outline-2">
<h2 id="org4e3db74"><span class="section-number-2">1.</span> Router</h2>
<div class="outline-text-2" id="text-1">
<ul class="org-ul">
<li>use the Reach <a href="https://reach.tech/router/">Reach Router</a> library</li>
Expand All @@ -77,32 +80,32 @@ <h2 id="orgd65c560"><span class="section-number-2">1.</span> Router</h2>
</ul>
</div>
</div>
<div id="outline-container-org6a48dda" class="outline-2">
<h2 id="org6a48dda"><span class="section-number-2">2.</span> Link</h2>
<div id="outline-container-orge5eb930" class="outline-2">
<h2 id="orge5eb930"><span class="section-number-2">2.</span> Link</h2>
<div class="outline-text-2" id="text-2">
<ul class="org-ul">
<li>relative: <code class="src src-js">&lt;Link to=<span style="color: #98be65;">"newpage"</span>&gt;Click me&lt;/Link&gt;</code></li>
<li>absolute: <code class="src src-js">&lt;Link to=<span style="color: #98be65;">"/newpage"</span>&gt;Click me&lt;/Link&gt;</code></li>
</ul>
</div>
</div>
<div id="outline-container-orgcbf2ab4" class="outline-2">
<h2 id="orgcbf2ab4"><span class="section-number-2">3.</span> Workshop 3</h2>
<div id="outline-container-org632e312" class="outline-2">
<h2 id="org632e312"><span class="section-number-2">3.</span> Workshop 3</h2>
<div class="outline-text-2" id="text-3">
</div>
<div id="outline-container-orge01c1aa" class="outline-3">
<h3 id="orge01c1aa"><span class="section-number-3">3.1.</span> Structure</h3>
<div id="outline-container-org79e1d9b" class="outline-3">
<h3 id="org79e1d9b"><span class="section-number-3">3.1.</span> Structure</h3>
<div class="outline-text-3" id="text-3-1">

<figure id="org5976f5a">
<figure id="org9cf8e8a">
<img src="./static/workshop-3-structure.png" alt="workshop-3-structure.png" align="center" width="600px">

<figcaption><span class="figure-number">Figure 1: </span>The Catbook structure in workshop 3</figcaption>
</figure>
</div>
</div>
<div id="outline-container-org9bf22d6" class="outline-3">
<h3 id="org9bf22d6"><span class="section-number-3">3.2.</span> States</h3>
<div id="outline-container-org50d9c4d" class="outline-3">
<h3 id="org50d9c4d"><span class="section-number-3">3.2.</span> States</h3>
<div class="outline-text-3" id="text-3-2">
<table>

Expand Down Expand Up @@ -134,8 +137,8 @@ <h3 id="org9bf22d6"><span class="section-number-3">3.2.</span> States</h3>
</table>
</div>
</div>
<div id="outline-container-orgdd04f10" class="outline-3">
<h3 id="orgdd04f10"><span class="section-number-3">3.3.</span> Props</h3>
<div id="outline-container-orged81644" class="outline-3">
<h3 id="orged81644"><span class="section-number-3">3.3.</span> Props</h3>
<div class="outline-text-3" id="text-3-3">
<table>

Expand Down Expand Up @@ -187,8 +190,8 @@ <h3 id="orgdd04f10"><span class="section-number-3">3.3.</span> Props</h3>
</table>
</div>
</div>
<div id="outline-container-org3e5e356" class="outline-3">
<h3 id="org3e5e356"><span class="section-number-3">3.4.</span> Why passing down the update function in props 1, 4, 6?</h3>
<div id="outline-container-org50e992e" class="outline-3">
<h3 id="org50e992e"><span class="section-number-3">3.4.</span> Why passing down the update function in props 1, 4, 6?</h3>
<div class="outline-text-3" id="text-3-4">
<ul class="org-ul">
<li>To share the parent states, i.e., <code>stories</code> and <code>comments</code> to child component. Since the post action happens in the child component, we need a way to automatically update the states to see new contents immediately.</li>
Expand Down
18 changes: 9 additions & 9 deletions 2024-06-24-a-stupid-debugging-experience.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ <h1><a href="https://chenyo.me">Chenyo's org-static-blog</a></h1>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#org54331e1">1. What happended</a></li>
<li><a href="#orgcc86001">2. What did I do</a></li>
<li><a href="#org8c78942">3. Another issue of running RPC in docker</a></li>
<li><a href="#org7f8202e">1. What happened</a></li>
<li><a href="#org196d9c0">2. What did I do</a></li>
<li><a href="#org2a04b1e">3. Another issue of running RPC in docker</a></li>
</ul>
</div>
</nav>
<div id="outline-container-org54331e1" class="outline-2">
<h2 id="org54331e1"><span class="section-number-2">1.</span> What happended</h2>
<div id="outline-container-org7f8202e" class="outline-2">
<h2 id="org7f8202e"><span class="section-number-2">1.</span> What happened</h2>
<div class="outline-text-2" id="text-1">
<ul class="org-ul">
<li>Servers SA and SB have the same docker installation, and the same running container CA and CB.</li>
Expand All @@ -63,8 +63,8 @@ <h2 id="org54331e1"><span class="section-number-2">1.</span> What happended</h2>
</ul>
</div>
</div>
<div id="outline-container-orgcc86001" class="outline-2">
<h2 id="orgcc86001"><span class="section-number-2">2.</span> What did I do</h2>
<div id="outline-container-org196d9c0" class="outline-2">
<h2 id="org196d9c0"><span class="section-number-2">2.</span> What did I do</h2>
<div class="outline-text-2" id="text-2">
<ol class="org-ol">
<li>I compared any related configurations between SA and SB. and between CA and CB, e.g., <code class="src src-bash"><span style="color: #c678dd;">ulimit</span> -a</code>, <code class="src src-bash">/etc/security/limits.conf</code>. They all look the same.</li>
Expand All @@ -81,8 +81,8 @@ <h2 id="orgcc86001"><span class="section-number-2">2.</span> What did I do</h2>
</ol>
</div>
</div>
<div id="outline-container-org8c78942" class="outline-2">
<h2 id="org8c78942"><span class="section-number-2">3.</span> Another issue of running RPC in docker</h2>
<div id="outline-container-org2a04b1e" class="outline-2">
<h2 id="org2a04b1e"><span class="section-number-2">3.</span> Another issue of running RPC in docker</h2>
<div class="outline-text-2" id="text-3">
<ul class="org-ul">
<li>The other day, I also spent hours debugging a <code>route unreachable</code> error when I want to send a request from CA to SA.</li>
Expand Down
32 changes: 16 additions & 16 deletions 2024-08-29-my-blog-search-function.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,16 @@ <h1><a href="https://chenyo.me">Chenyo's org-static-blog</a></h1>
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#org0576ce6">1. What happens</a></li>
<li><a href="#org69894db">2. What is not enough with existing search functions?</a></li>
<li><a href="#orgb7274a3">3. What does the search function do in this blog?</a></li>
<li><a href="#org7a9cd23">4. How is it implemented?</a></li>
<li><a href="#org8278722">5. How can it be improved?</a></li>
<li><a href="#org7fc7b84">1. What happened</a></li>
<li><a href="#org4ace32e">2. What is not enough with existing search functions?</a></li>
<li><a href="#orgaed31e8">3. What does the search function do in this blog?</a></li>
<li><a href="#org0bc694f">4. How is it implemented?</a></li>
<li><a href="#orgde7ac7c">5. How can it be improved?</a></li>
</ul>
</div>
</nav>
<div id="outline-container-org0576ce6" class="outline-2">
<h2 id="org0576ce6"><span class="section-number-2">1.</span> What happens</h2>
<div id="outline-container-org7fc7b84" class="outline-2">
<h2 id="org7fc7b84"><span class="section-number-2">1.</span> What happened</h2>
<div class="outline-text-2" id="text-1">
<p>
Two months ago, I started to use the current blog to keep track of my study and personal notes.
Expand All @@ -70,8 +70,8 @@ <h2 id="org0576ce6"><span class="section-number-2">1.</span> What happens</h2>
</p>
</div>
</div>
<div id="outline-container-org69894db" class="outline-2">
<h2 id="org69894db"><span class="section-number-2">2.</span> What is not enough with existing search functions?</h2>
<div id="outline-container-org4ace32e" class="outline-2">
<h2 id="org4ace32e"><span class="section-number-2">2.</span> What is not enough with existing search functions?</h2>
<div class="outline-text-2" id="text-2">
<p>
Most default search tools provided by popular static website frameworks do not return complete search results and their context.
Expand All @@ -95,11 +95,11 @@ <h2 id="org69894db"><span class="section-number-2">2.</span> What is not enough
</p>
</div>
</div>
<div id="outline-container-orgb7274a3" class="outline-2">
<h2 id="orgb7274a3"><span class="section-number-2">3.</span> What does the search function do in this blog?</h2>
<div id="outline-container-orgaed31e8" class="outline-2">
<h2 id="orgaed31e8"><span class="section-number-2">3.</span> What does the search function do in this blog?</h2>
<div class="outline-text-2" id="text-3">

<figure id="orgb27dd29">
<figure id="orgf40cc85">
<img src="./static/blog-search.gif" alt="blog-search.gif" align="center" width="700px" style="border: 1px solid black;">

<figcaption><span class="figure-number">Figure 1: </span>A blog search example</figcaption>
Expand All @@ -116,8 +116,8 @@ <h2 id="orgb7274a3"><span class="section-number-2">3.</span> What does the searc
</p>
</div>
</div>
<div id="outline-container-org7a9cd23" class="outline-2">
<h2 id="org7a9cd23"><span class="section-number-2">4.</span> How is it implemented?</h2>
<div id="outline-container-org0bc694f" class="outline-2">
<h2 id="org0bc694f"><span class="section-number-2">4.</span> How is it implemented?</h2>
<div class="outline-text-2" id="text-4">
<p>
I implemented the search function along with all styling with the help of Cursor.
Expand All @@ -132,8 +132,8 @@ <h2 id="org7a9cd23"><span class="section-number-2">4.</span> How is it implement
</p>
</div>
</div>
<div id="outline-container-org8278722" class="outline-2">
<h2 id="org8278722"><span class="section-number-2">5.</span> How can it be improved?</h2>
<div id="outline-container-orgde7ac7c" class="outline-2">
<h2 id="orgde7ac7c"><span class="section-number-2">5.</span> How can it be improved?</h2>
<div class="outline-text-2" id="text-5">
<p>
The current search function is simple and sub-optimal.
Expand Down
Loading

0 comments on commit b1cec8a

Please sign in to comment.