Skip to content

Commit

Permalink
post: added emacs wsl post
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenyo-17
chenyo-17 committed Sep 7, 2024
1 parent 3bb80f0 commit 2b11d14
Show file tree
Hide file tree
Showing 68 changed files with 6,906 additions and 5,085 deletions.
6 changes: 3 additions & 3 deletions 2024-06-23-hello-world.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,12 @@ <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="#org918fbfd">1. Hallo!</a></li>
<li><a href="#orgb274040">1. Hallo!</a></li>
</ul>
</div>
</nav>
<div id="outline-container-org918fbfd" class="outline-2">
<h2 id="org918fbfd"><span class="section-number-2">1.</span> Hallo!</h2>
<div id="outline-container-orgb274040" class="outline-2">
<h2 id="orgb274040"><span class="section-number-2">1.</span> Hallo!</h2>
<div class="outline-text-2" id="text-1">
<p>
This is the first blog with org-static-blog!
Expand Down
54 changes: 27 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,34 @@ <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="#orgf757b9a">1. What is a React hook</a>
<li><a href="#org915331c">1. What is a React hook</a>
<ul>
<li><a href="#org47ece2b">1.1. <code>useState</code> is not enough</a></li>
<li><a href="#org5181aae">1.2. <code>useEffect</code> runs after specific variable change</a></li>
<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>
</ul>
</li>
<li><a href="#orgbd46748">2. React hook patterns</a>
<li><a href="#org29c63d5">2. React hook patterns</a>
<ul>
<li><a href="#org1e849d1">2.1. Fetch and send data</a></li>
<li><a href="#org4f863fb">2.2. Conditional rendering</a></li>
<li><a href="#orgaadf161">2.3. Render an array of Data</a></li>
<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>
</ul>
</li>
<li><a href="#orgabef526">3. Example: Stopwatch</a></li>
<li><a href="#org76a4e33">4. DOM and component mounting</a></li>
<li><a href="#org927a626">3. Example: Stopwatch</a></li>
<li><a href="#org12cbcee">4. DOM and component mounting</a></li>
</ul>
</div>
</nav>
<div id="outline-container-orgf757b9a" class="outline-2">
<h2 id="orgf757b9a"><span class="section-number-2">1.</span> What is a React hook</h2>
<div id="outline-container-org915331c" class="outline-2">
<h2 id="org915331c"><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-org47ece2b" class="outline-3">
<h3 id="org47ece2b"><span class="section-number-3">1.1.</span> <code>useState</code> is not enough</h3>
<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 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 +87,8 @@ <h3 id="org47ece2b"><span class="section-number-3">1.1.</span> <code>useState</c
</ul>
</div>
</div>
<div id="outline-container-org5181aae" class="outline-3">
<h3 id="org5181aae"><span class="section-number-3">1.2.</span> <code>useEffect</code> runs after specific variable change</h3>
<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 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 +116,12 @@ <h3 id="org5181aae"><span class="section-number-3">1.2.</span> <code>useEffect</
</div>
</div>
</div>
<div id="outline-container-orgbd46748" class="outline-2">
<h2 id="orgbd46748"><span class="section-number-2">2.</span> React hook patterns</h2>
<div id="outline-container-org29c63d5" class="outline-2">
<h2 id="org29c63d5"><span class="section-number-2">2.</span> React hook patterns</h2>
<div class="outline-text-2" id="text-2">
</div>
<div id="outline-container-org1e849d1" class="outline-3">
<h3 id="org1e849d1"><span class="section-number-3">2.1.</span> Fetch and send data</h3>
<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 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 +146,8 @@ <h3 id="org1e849d1"><span class="section-number-3">2.1.</span> Fetch and send da
</div>
</div>
</div>
<div id="outline-container-org4f863fb" class="outline-3">
<h3 id="org4f863fb"><span class="section-number-3">2.2.</span> Conditional rendering</h3>
<div id="outline-container-org8e42c9c" class="outline-3">
<h3 id="org8e42c9c"><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 +162,8 @@ <h3 id="org4f863fb"><span class="section-number-3">2.2.</span> Conditional rende
</div>
</div>
</div>
<div id="outline-container-orgaadf161" class="outline-3">
<h3 id="orgaadf161"><span class="section-number-3">2.3.</span> Render an array of Data</h3>
<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 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 +182,8 @@ <h3 id="orgaadf161"><span class="section-number-3">2.3.</span> Render an array o
</div>
</div>
</div>
<div id="outline-container-orgabef526" class="outline-2">
<h2 id="orgabef526"><span class="section-number-2">3.</span> Example: Stopwatch</h2>
<div id="outline-container-org927a626" class="outline-2">
<h2 id="org927a626"><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 +204,8 @@ <h2 id="orgabef526"><span class="section-number-2">3.</span> Example: Stopwatch<
</div>
</div>
</div>
<div id="outline-container-org76a4e33" class="outline-2">
<h2 id="org76a4e33"><span class="section-number-2">4.</span> DOM and component mounting</h2>
<div id="outline-container-org12cbcee" class="outline-2">
<h2 id="org12cbcee"><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
44 changes: 22 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,21 @@ <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="#org492def5">1. Router</a></li>
<li><a href="#org5fdff10">2. Link</a></li>
<li><a href="#org36d198e">3. Workshop 3</a>
<li><a href="#orgd65c560">1. Router</a></li>
<li><a href="#org6a48dda">2. Link</a></li>
<li><a href="#orgcbf2ab4">3. Workshop 3</a>
<ul>
<li><a href="#org442934d">3.1. Structure</a></li>
<li><a href="#org70a4cf5">3.2. States</a></li>
<li><a href="#org5970791">3.3. Props</a></li>
<li><a href="#org8b3289a">3.4. Why passing down the update function in props 1, 4, 6?</a></li>
<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>
</ul>
</li>
</ul>
</div>
</nav>
<div id="outline-container-org492def5" class="outline-2">
<h2 id="org492def5"><span class="section-number-2">1.</span> Router</h2>
<div id="outline-container-orgd65c560" class="outline-2">
<h2 id="orgd65c560"><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 +77,32 @@ <h2 id="org492def5"><span class="section-number-2">1.</span> Router</h2>
</ul>
</div>
</div>
<div id="outline-container-org5fdff10" class="outline-2">
<h2 id="org5fdff10"><span class="section-number-2">2.</span> Link</h2>
<div id="outline-container-org6a48dda" class="outline-2">
<h2 id="org6a48dda"><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-org36d198e" class="outline-2">
<h2 id="org36d198e"><span class="section-number-2">3.</span> Workshop 3</h2>
<div id="outline-container-orgcbf2ab4" class="outline-2">
<h2 id="orgcbf2ab4"><span class="section-number-2">3.</span> Workshop 3</h2>
<div class="outline-text-2" id="text-3">
</div>
<div id="outline-container-org442934d" class="outline-3">
<h3 id="org442934d"><span class="section-number-3">3.1.</span> Structure</h3>
<div id="outline-container-orge01c1aa" class="outline-3">
<h3 id="orge01c1aa"><span class="section-number-3">3.1.</span> Structure</h3>
<div class="outline-text-3" id="text-3-1">

<figure id="org97029c7">
<figure id="org5976f5a">
<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-org70a4cf5" class="outline-3">
<h3 id="org70a4cf5"><span class="section-number-3">3.2.</span> States</h3>
<div id="outline-container-org9bf22d6" class="outline-3">
<h3 id="org9bf22d6"><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 +134,8 @@ <h3 id="org70a4cf5"><span class="section-number-3">3.2.</span> States</h3>
</table>
</div>
</div>
<div id="outline-container-org5970791" class="outline-3">
<h3 id="org5970791"><span class="section-number-3">3.3.</span> Props</h3>
<div id="outline-container-orgdd04f10" class="outline-3">
<h3 id="orgdd04f10"><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 +187,8 @@ <h3 id="org5970791"><span class="section-number-3">3.3.</span> Props</h3>
</table>
</div>
</div>
<div id="outline-container-org8b3289a" class="outline-3">
<h3 id="org8b3289a"><span class="section-number-3">3.4.</span> Why passing down the update function in props 1, 4, 6?</h3>
<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 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="#org7f093b0">1. What happended</a></li>
<li><a href="#org850dd7f">2. What did I do</a></li>
<li><a href="#org684414a">3. Another issue of running RPC in docker</a></li>
<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>
</ul>
</div>
</nav>
<div id="outline-container-org7f093b0" class="outline-2">
<h2 id="org7f093b0"><span class="section-number-2">1.</span> What happended</h2>
<div id="outline-container-org54331e1" class="outline-2">
<h2 id="org54331e1"><span class="section-number-2">1.</span> What happended</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="org7f093b0"><span class="section-number-2">1.</span> What happended</h2>
</ul>
</div>
</div>
<div id="outline-container-org850dd7f" class="outline-2">
<h2 id="org850dd7f"><span class="section-number-2">2.</span> What did I do</h2>
<div id="outline-container-orgcc86001" class="outline-2">
<h2 id="orgcc86001"><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="org850dd7f"><span class="section-number-2">2.</span> What did I do</h2>
</ol>
</div>
</div>
<div id="outline-container-org684414a" class="outline-2">
<h2 id="org684414a"><span class="section-number-2">3.</span> Another issue of running RPC in docker</h2>
<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 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
Loading

0 comments on commit 2b11d14

Please sign in to comment.