<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Coding Lizard</title>
    <link>https://paper.wf/lizardwrite/</link>
    <description>一只学习前端开发的蜥蜴。</description>
    <pubDate>Fri, 01 May 2026 18:14:35 +0000</pubDate>
    <item>
      <title>爱岛2023年总结｜学习｜转码｜社会化</title>
      <link>https://paper.wf/lizardwrite/ai-dao-nian-zong-jie-xue-xi-zhuan-ma</link>
      <description>&lt;![CDATA[这篇文章包含了以下主题：过去一年个人经历的总结，包括留学经历、转码经验和找工作迷思。仅基于个人2022-2023年在欧洲国家的经历，可能不适用其他地区和年份。阅读时长大约4分钟。&#xA;#社会化 #学蜥 #揾工&#xA;&#xA;!--more--&#xA;水硕经历复盘&#xA;“水硕”转码？&#xA;英国、香港和爱尔兰的硕士学制是一年制，时间非常短。个人念的专业是类似信息系统的授课型硕士，课程偏理论，硬要说的话用户调研的部分对UI/UX岗位比较有帮助。&#xA;&#xA;仅“转码”而言，如果非科班CS又没多少工作经验，加之念的是与CS没有强相关的项目的话，尽早把求职目标缩小在graduate programme是比较合适的。能开毕业生项目的公司一般新人培训做的比较好，很多东西可以进去学。因此在留学之前最好自学到一定程度，包装好简历，当年入学的时候就可以开始投递简历。关于水硕应该很容易在小红书或一亩三分地等平台找到其他人的帖子，这里就不赘述了。&#xA;&#xA;在找工过程中逐渐感受到社会化的重要性，这一点在后面一点会详细写。&#xA;ADHD的学习困难&#xA;扯开一点话题，本人从四年前就怀疑自己有ADHD，因为种种原因暂时不会去诊断 ，但一直有阅读相关自助书籍和理论。想法是：既然暂时可以日常运作，就把得到诊断这件事往后排了。[诊断ADHD在找到工作以后要做的事列表上。]&#xA;&#xA;在本科和硕士的学习过程中的确遇到很多困难，一定程度上影响了学术表现和转码进度。但2023年开始做的事就是放低对自己的要求，即使做不好，但坚持了这么久也没有放弃已经很棒了。&#xA;&#xA;没有工作经验留学转码遇到的挑战主要是：适应新语言和文化习惯，平衡学校学术记录和自学进度，快速在新文化中提高社会化程度。&#xA;&#xA;我觉得对ADHDer比较重要的是按照自己规定的timeline逐步推进，如果目标变得模糊就回过头再检查一遍，接下来要做的事情，已经达成了的小目标，把这些都作为记号写下来。还有就是多鼓励自己，如有有担心的事情就积极寻找解决和替代方案，不要沉浸在担心却没有行动的状态中。&#xA;搭建支持系统&#xA;找个人一起学习吧！自闭如我也认识了为数不多的朋友，有人一起努力时会减少焦虑，别人找到工作了也能给自己增加信心，还能和熟悉的人询问经验。&#xA;&#xA;有关如何找到能支持自己的人，社恐的蜥蜴推荐一个笨办法：在偶然遇到的人当中(可能是同学、聚会上的人、朋友的朋友)，找到那些「感觉上」人很好的人们，对ta表示善意，如果对方善良的话，就有一定的概率会来领养您了。这个办法可能对社恐并且直觉很强的人比较适用。如果您觉得看清一个人的本意对您来说比较困难，出于安全考虑，建议还是谨慎一些比较好。&#xA;&#xA;虽然这么说了，但去年有一段时间完全没有和人交流的欲望，感觉和很多事情失去了connect，不管是社交还是转码学习都停滞不前。如果陷入这种情况的话就慢慢来，等待自行恢复吧。&#xA;&#xA;找工作与社会化迷思&#xA;转行以来听到的这样一种观点：找工作最重要的是networking。很多公司的岗位都是先在内部开放，能公开看到的岗位说不定已经提前被内定了。很多成功转码的经验谈中也会提到是社交带给自己入行的契机。&#xA;&#xA;给人一种感觉，即社会化程度低的人在求职中将会面临更多的困难，少了很多机会。然而性格并不是说改变就能立刻变化的东西，短期内外向的积极的性格应该是做不到了。&#xA;&#xA;但是即使不喜欢社交，每个人应该都有自己的舒适区，比如在网上和人一对一networking的话，我的精神压力就会小一些。文字可以编辑好再发送，也就不会大脑空白了。也确实找人内推了几次(虽然结果并不顺利)。所以networking这种事在自己感到舒服的范围内尽量尝试就好，不要勉强。&#xA;&#xA;大厂裁员浪潮&#xA;作为刚转行的newbie，在目睹行业裁员浪潮的情况下除了焦虑，也看了一些如何应对这种情况的文章。由于个人的目标并不是进大厂赚大钱，只想普通地拿工签攒永居，关注的点也是在这种情况下应届生如何找工作。在同学和华人圈里常常听到的“今天IT毕业生真的好难找”“今年形势不行呢”，虽然不能否认经济形势很差造成的求职困难，但是作为个人来说短期内只能想办法提高自己被聘用的概率，包括keep learning,找人看简历和做自己感兴趣的project。&#xA;&#xA;2024年短期计划&#xA;自觉学到能应聘Junior前端的水平还差一些，在查漏补缺的同时也积极做项目中。coding就像肌肉一样需要时常锻炼，尤其对ADHD来说。最近在观察找工市场和找人检查简历，要考虑和市面上工作经历丰富的Senior的竞争力的话，相较于科技公司，传统行业的IT岗位和IT Help Desk这种岗位也许也可以投一下。&#xA;&#xA;最近在学的东西&#xA;感觉到自学的缺乏系统性，很多东西都不了解，乍一看觉得要学的也太多了。最近在做JavaScript30天这个challenge当作练习，因为感觉写代码的时间太少了，做的同时也有尝试用Tailwind CSS。等这个完成之后打算用TypeScript写项目。（边学边写啦）&#xA;&#xA;还在断断续续学赫尔辛基大学的Full Stack Open。听说课程有些过时，但主要是有清晰的课程大纲方便查漏补缺。&#xA;Bootcamp&#xA;目前还不确定是否要报名软件开发的bootcamp。一方面是担心我能否适应“其他人制定的教学计划和速度”，另一方面是與其投入全职时间学习，还不如先找找无偿项目填充简历。如果有这方面的意见或评论欢迎在Mastodon私戳！&#xA;&#xA;p style=&#34;color:grey; font-size:18px&#34;「Paper.wf」没有内置评论系统，如果想要评论我的博客，或是与我互动，请不要大意地在Mastodon私戳@lizarddev@mastodon.social。/p]]&gt;</description>
      <content:encoded><![CDATA[<p>这篇文章包含了以下主题：过去一年个人经历的总结，包括留学经历、转码经验和找工作迷思。仅基于个人2022-2023年在欧洲国家的经历，可能不适用其他地区和年份。阅读时长大约4分钟。
<a href="/lizardwrite/tag:%E7%A4%BE%E4%BC%9A%E5%8C%96" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">社会化</span></a> <a href="/lizardwrite/tag:%E5%AD%A6%E8%9C%A5" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">学蜥</span></a> <a href="/lizardwrite/tag:%E6%8F%BE%E5%B7%A5" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">揾工</span></a></p>



<h2 id="水硕经历复盘">水硕经历复盘</h2>

<h3 id="水硕-转码" id="水硕-转码">“水硕”转码？</h3>

<p>英国、香港和爱尔兰的硕士学制是一年制，时间非常短。个人念的专业是类似信息系统的授课型硕士，课程偏理论，硬要说的话用户调研的部分对UI/UX岗位比较有帮助。</p>

<p>仅“转码”而言，如果非科班CS又没多少工作经验，加之念的是与CS没有强相关的项目的话，尽早把求职目标缩小在graduate programme是比较合适的。能开毕业生项目的公司一般新人培训做的比较好，很多东西可以进去学。因此在留学之前最好自学到一定程度，包装好简历，当年入学的时候就可以开始投递简历。关于水硕应该很容易在小红书或一亩三分地等平台找到其他人的帖子，这里就不赘述了。</p>

<p>在找工过程中逐渐感受到社会化的重要性，这一点在后面一点会详细写。</p>

<h3 id="adhd的学习困难" id="adhd的学习困难">ADHD的学习困难</h3>

<p>扯开一点话题，本人从四年前就怀疑自己有ADHD，因为种种原因暂时不会去诊断 ，但一直有阅读相关自助书籍和理论。想法是：既然暂时可以日常运作，就把得到诊断这件事往后排了。[诊断ADHD在找到工作以后要做的事列表上。]</p>

<p>在本科和硕士的学习过程中的确遇到很多困难，一定程度上影响了学术表现和转码进度。但2023年开始做的事就是放低对自己的要求，<em>即使做不好，但坚持了这么久也没有放弃已经很棒了</em>。</p>

<p>没有工作经验留学转码遇到的挑战主要是：适应新语言和文化习惯，平衡学校学术记录和自学进度，快速在新文化中提高社会化程度。</p>

<p>我觉得对ADHDer比较重要的是按照自己规定的timeline逐步推进，如果目标变得模糊就回过头再检查一遍，接下来要做的事情，已经达成了的小目标，把这些都作为记号写下来。还有就是多鼓励自己，如有有担心的事情就积极寻找解决和替代方案，不要沉浸在担心却没有行动的状态中。</p>

<h3 id="搭建支持系统">搭建支持系统</h3>

<p>找个人一起学习吧！自闭如我也认识了为数不多的朋友，有人一起努力时会减少焦虑，别人找到工作了也能给自己增加信心，还能和熟悉的人询问经验。</p>

<p>有关如何找到能支持自己的人，社恐的蜥蜴推荐一个笨办法：在偶然遇到的人当中(可能是同学、聚会上的人、朋友的朋友)，找到那些「感觉上」人很好的人们，对ta表示善意，如果对方善良的话，就有一定的概率会来领养您了。这个办法可能对社恐并且直觉很强的人比较适用。如果您觉得看清一个人的本意对您来说比较困难，出于安全考虑，建议还是谨慎一些比较好。</p>

<p>虽然这么说了，但去年有一段时间完全没有和人交流的欲望，感觉和很多事情失去了connect，不管是社交还是转码学习都停滞不前。如果陷入这种情况的话就慢慢来，等待自行恢复吧。</p>

<h3 id="找工作与社会化迷思">找工作与社会化迷思</h3>

<p>转行以来听到的这样一种观点：找工作最重要的是networking。很多公司的岗位都是先在内部开放，能公开看到的岗位说不定已经提前被内定了。很多成功转码的经验谈中也会提到是社交带给自己入行的契机。</p>

<p>给人一种感觉，即社会化程度低的人在求职中将会面临更多的困难，少了很多机会。然而性格并不是说改变就能立刻变化的东西，短期内外向的积极的性格应该是做不到了。</p>

<p>但是即使不喜欢社交，每个人应该都有自己的舒适区，比如在网上和人一对一networking的话，我的精神压力就会小一些。文字可以编辑好再发送，也就不会大脑空白了。也确实找人内推了几次(虽然结果并不顺利)。所以networking这种事在自己感到舒服的范围内尽量尝试就好，不要勉强。</p>

<h3 id="大厂裁员浪潮">大厂裁员浪潮</h3>

<p>作为刚转行的newbie，在目睹行业裁员浪潮的情况下除了焦虑，也看了一些如何应对这种情况的文章。由于个人的目标并不是进大厂赚大钱，只想普通地拿工签攒永居，关注的点也是在这种情况下应届生如何找工作。在同学和华人圈里常常听到的“今天IT毕业生真的好难找”“今年形势不行呢”，虽然不能否认经济形势很差造成的求职困难，但是作为个人来说短期内只能想办法提高自己被聘用的概率，包括keep learning,找人看简历和做自己感兴趣的project。</p>

<h2 id="2024年短期计划" id="2024年短期计划">2024年短期计划</h2>

<p>自觉学到能应聘Junior前端的水平还差一些，在查漏补缺的同时也积极做项目中。coding就像肌肉一样需要时常锻炼，尤其对ADHD来说。最近在观察找工市场和找人检查简历，要考虑和市面上工作经历丰富的Senior的竞争力的话，相较于科技公司，传统行业的IT岗位和IT Help Desk这种岗位也许也可以投一下。</p>

<h3 id="最近在学的东西">最近在学的东西</h3>

<p>感觉到自学的缺乏系统性，很多东西都不了解，乍一看觉得要学的也太多了。最近在做JavaScript30天这个challenge当作练习，因为感觉写代码的时间太少了，做的同时也有尝试用Tailwind CSS。等这个完成之后打算用TypeScript写项目。（边学边写啦）</p>

<p>还在断断续续学赫尔辛基大学的Full Stack Open。听说课程有些过时，但主要是有清晰的课程大纲方便查漏补缺。</p>

<h3 id="bootcamp" id="bootcamp">Bootcamp</h3>

<p>目前还不确定是否要报名软件开发的bootcamp。一方面是担心我能否适应“其他人制定的教学计划和速度”，另一方面是與其投入全职时间学习，还不如先找找无偿项目填充简历。如果有这方面的意见或评论欢迎在Mastodon私戳！</p>

<p style="color:grey; font-size:18px">「Paper.wf」没有内置评论系统，如果想要评论我的博客，或是与我互动，请不要大意地在Mastodon私戳<a href="https://paper.wf/@/lizarddev@mastodon.social" class="u-url mention" rel="nofollow">@<span>lizarddev@mastodon.social</span></a>。</p>
]]></content:encoded>
      <guid>https://paper.wf/lizardwrite/ai-dao-nian-zong-jie-xue-xi-zhuan-ma</guid>
      <pubDate>Mon, 12 Feb 2024 21:50:00 +0000</pubDate>
    </item>
    <item>
      <title>Full Stack Open學習筆記</title>
      <link>https://paper.wf/lizardwrite/full-stack-openxue-xi-bi-ji</link>
      <description>&lt;![CDATA[赫爾辛基大學的Full-stack Web Development網課，分為6個部分，完成多個exercise後可以獲得證書。&#xA;#CSS #JavaScript #React&#xA;!--more--&#xA;&#xA;Part 0&#xA;這部分是介紹這門課的運作和計分模式。使用Github登入自帶的submission system並提交作樂。&#xA;&#xA;如果想要獲得證書，需要完成exercie達到一定數量。如果想要獲得學分（ECTs），則需要註冊成為赫爾辛基大學的學生。完成課程後不管多久，想要學分都可以再申請。&#xA;&#xA;Fundamentals of web apps&#xA;在開發web app時，要時刻記得打開瀏覽器的dev tool。&#xA;HTTP Get&#xA;&#xA;![[Screenshot 2024-02-07 at 8.33.37 PM.png]]&#xA;Explain the network Headers&#xA;&#39;General&#39; shows the browser requested the address [] using the Get method, and that the request was successful, as the response had the code 304, meaning the cached version of the resource can be shown to users without a need to transfer it again.&#xA;&#xA;Sequence diagram&#xA;![[Pasted image 20240207204407.png]]&#xA;這張順序表顯示了browser and server 是怎樣交流的。時間順序從上到下，所以先處理第一個request，再是第二個。&#xA;&#xA;Traditional web application&#xA;傳統的web app是怎麼運作的呢？browser 只從server fetch數據，所有的app logic都在server中。A server can be created using Java Spring , Python Flask or Ruby on Rails to name just a few examples.&#xA;&#xA;Event Handles and Callback functions&#xA;Structure of the code:&#xA;var xhttp = new XMLHttpRequest()&#xA;&#xA;xhttp.onreadystatechange = function() {&#xA;  // code that takes care of the server response&#xA;}&#xA;&#xA;xhttp.open(&#39;GET&#39;, &#39;/data.json&#39;, true)&#xA;xhttp.send()&#xA;&#xA;On this line, an event handler for the event onreadystatechange is defined for the xhttp object doing the request. When the state of the object changes, the browser calls the event handler function.&#xA;`xhttp.onreadystatechange = function () {&#xA;&#xA;Document Object Model or DOM&#xA;Document Object Model, or DOM, is an Application Programming Interface (API) that enables programmatic modification of the element trees corresponding to web pages.&#xA;&#xA;The JavaScript code introduced in the previous chapter used the DOM-API to add a list of notes to the page.&#xA;&#xA;The following code creates a new node to the variable ul, and adds some child nodes to it:&#xA;&#xA;var ul = document.createElement(&#39;ul&#39;)&#xA;&#xA;data.forEach(function(note) {&#xA;  var li = document.createElement(&#39;li&#39;)&#xA;&#xA;  ul.appendChild(li)&#xA;  li.appendChild(document.createTextNode(note.content))&#xA;})&#xA;&#xA;Loading a page containing JS &#xA;![[Pasted image 20240207213542.png]]&#xA;&#xA;AJAX&#xA;&#xA;AJAX) (Asynchronous JavaScript and XML) is a term introduced in February 2005 on the back of advancements in browser technology to describe a new revolutionary approach that enabled the fetching of content to web pages using JavaScript included within the HTML, without the need to rerender the page.&#xA;&#xA;Nowadays URLs like these would not be considered acceptable, as they don&#39;t follow the generally acknowledged conventions of RESTful APIs, which we&#39;ll look into more in part 3.&#xA;&#xA;Single-paged application(SPA)&#xA;SPA程式不會分別fetch所有的頁面，而是包含一個fetched HTML page. 用同樣的架構重寫這個頁面，有一些區別：&#xA;&#xA;提交新note時，打開dev tool的network可以看到, 瀏覽器只會向服務器發送一個請求。在JS code中使用e.preventDefault()method防止默認的form submit handling. 這樣就不用重新渲染整個頁面。&#xA;&#xA;所以SPA和傳統web app的區別是什麼？==&#xA;大概是當event triggered, client side只更新部分UI, 提高網頁速度，從而提升用戶體驗。&#xA;&#xA;SPA在client side使用從服務器fetch的JS code. &#xA;JS code的例子：&#xA;var form = document.getElementById(&#39;notesform&#39;)&#xA;form.onsubmit = function(e) {&#xA;  e.preventDefault()&#xA;// To prevent the default handling of forms submit.&#xA;  var note = {&#xA;    content: e.target.elements[0].value,&#xA;    date: new Date(),&#xA;  }&#xA;&#xA;  notes.push(note)&#xA;  e.target.elements[0].value = &#39;&#39;&#xA;  redrawNotes()&#xA;  sendToServer(note)&#xA;}&#xA;&#xA;e.preventDefault() method is used to prevent the default handling of forms submit.&#xA;&#xA;The code for sending the note to the server is as follows:&#xA;var sendToServer = function(note) {&#xA;  var xhttpForPost = new XMLHttpRequest()&#xA;  // ...&#xA;&#xA;  xhttpForPost.open(&#39;POST&#39;, &#39;/newnotespa&#39;, true)&#xA;  xhttpForPost.setRequestHeader(&#39;Content-type&#39;, &#39;application/json&#39;)&#xA;  xhttpForPost.send(JSON.stringify(note))&#xA;}&#xA;上面的代碼決定數據be sent with an HTTP POST request and the data type is to be JSON。The data type is determined with a Content-type header. Then the data is sent as JSON string.&#xA;&#xA;p style=&#34;color:grey; font-size:18px&#34;「Paper.wf」没有内置评论系统，如果想要评论我的博客，或是与我互动，请不要大意地在Mastodon私戳@lizarddev@mastodon.social。/p]]&gt;</description>
      <content:encoded><![CDATA[<p>赫爾辛基大學的<a href="https://fullstackopen.com/en/" rel="nofollow">Full-stack Web Development</a>網課，分為6個部分，完成多個exercise後可以獲得證書。
<a href="/lizardwrite/tag:CSS" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">CSS</span></a> <a href="/lizardwrite/tag:JavaScript" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">JavaScript</span></a> <a href="/lizardwrite/tag:React" class="hashtag" rel="nofollow"><span>#</span><span class="p-category">React</span></a>
</p>

<h2 id="part-0" id="part-0">Part 0</h2>

<p>這部分是介紹這門課的運作和計分模式。使用Github登入自帶的submission system並<a href="https://studies.cs.helsinki.fi/stats/courses/fullstackopen/submissions" rel="nofollow">提交作樂</a>。</p>

<p>如果想要獲得證書，需要完成exercie達到一定數量。如果想要獲得學分（ECTs），則需要註冊成為赫爾辛基大學的學生。完成課程後不管多久，想要學分都可以再申請。</p>

<h3 id="fundamentals-of-web-apps" id="fundamentals-of-web-apps">Fundamentals of web apps</h3>

<p>在開發web app時，要時刻記得打開瀏覽器的dev tool。</p>

<h4 id="http-get" id="http-get">HTTP Get</h4>

<p>![[Screenshot 2024-02-07 at 8.33.37 PM.png]]
<strong>Explain the network Headers</strong>
&#39;General&#39; shows the browser requested the address [] using the Get method, and that the request was successful, as the response had the code 304, meaning the cached version of the resource can be shown to users without a need to transfer it again.</p>

<p><strong>Sequence diagram</strong>
![[Pasted image 20240207204407.png]]
這張順序表顯示了browser and server 是怎樣交流的。時間順序從上到下，所以先處理第一個request，再是第二個。</p>

<h4 id="traditional-web-application" id="traditional-web-application">Traditional web application</h4>

<p>傳統的web app是怎麼運作的呢？browser 只從server fetch數據，所有的app logic都在server中。A server can be created using <a href="https://spring.io/projects/spring-framework" rel="nofollow">Java Spring</a> , <a href="https://flask.palletsprojects.com/en/2.2.x/" rel="nofollow">Python Flask</a> or <a href="http://rubyonrails.org/" rel="nofollow">Ruby on Rails</a> to name just a few examples.</p>

<h4 id="event-handles-and-callback-functions" id="event-handles-and-callback-functions">Event Handles and Callback functions</h4>

<p>Structure of the code:</p>

<pre><code class="language-js">var xhttp = new XMLHttpRequest()

xhttp.onreadystatechange = function() {
  // code that takes care of the server response
}

xhttp.open(&#39;GET&#39;, &#39;/data.json&#39;, true)
xhttp.send()
</code></pre>

<p>On this line, an <em>event handler</em> for the event <em>onreadystatechange</em> is defined for the <em>xhttp</em> object doing the request. When the state of the object changes, the browser calls the event handler function.
`xhttp.onreadystatechange = function () {</p>

<h4 id="document-object-model-or-dom" id="document-object-model-or-dom">Document Object Model or DOM</h4>

<p>Document Object Model, or <a href="https://en.wikipedia.org/wiki/Document_Object_Model" rel="nofollow">DOM</a>, is an Application Programming Interface (<em>API</em>) that enables programmatic modification of the <em>element trees</em> corresponding to web pages.</p>

<p>The JavaScript code introduced in the previous chapter used the DOM-API to add a list of notes to the page.</p>

<p>The following code creates a new node to the variable <em>ul</em>, and adds some child nodes to it:</p>

<pre><code class="language-js">var ul = document.createElement(&#39;ul&#39;)

data.forEach(function(note) {
  var li = document.createElement(&#39;li&#39;)

  ul.appendChild(li)
  li.appendChild(document.createTextNode(note.content))
})
</code></pre>

<h4 id="loading-a-page-containing-js" id="loading-a-page-containing-js">Loading a page containing JS</h4>

<p>![[Pasted image 20240207213542.png]]</p>

<h4 id="ajax" id="ajax">AJAX</h4>

<p><a href="https://en.wikipedia.org/wiki/Ajax_(programming)" rel="nofollow">AJAX</a> (Asynchronous JavaScript and XML) is a term introduced in February 2005 on the back of advancements in browser technology to describe a new revolutionary approach that enabled the fetching of content to web pages using JavaScript included within the HTML, without the need to rerender the page.</p>

<p>Nowadays URLs like these would not be considered acceptable, as they don&#39;t follow the generally acknowledged conventions of RESTful APIs, which we&#39;ll look into more in part 3.</p>

<h3 id="single-paged-application-spa" id="single-paged-application-spa">Single-paged application(SPA)</h3>

<p>SPA程式不會分別fetch所有的頁面，而是包含一個fetched HTML page. 用同樣的架構重寫這個頁面，有一些區別：</p>

<p>提交新note時，打開dev tool的network可以看到, 瀏覽器只會向服務器發送一個請求。在JS code中使用<code>e.preventDefault()</code>method防止默認的form submit handling. 這樣就不用重新渲染整個頁面。</p>

<p>==所以SPA和傳統web app的區別是什麼？==
大概是當event triggered, client side只更新部分UI, 提高網頁速度，從而提升用戶體驗。</p>

<p>SPA在client side使用從服務器fetch的JS code.
– JS code的例子：</p>

<pre><code class="language-css">var form = document.getElementById(&#39;notes_form&#39;)
form.onsubmit = function(e) {
  e.preventDefault()
// To prevent the default handling of forms submit.
  var note = {
    content: e.target.elements[0].value,
    date: new Date(),
  }

  notes.push(note)
  e.target.elements[0].value = &#39;&#39;
  redrawNotes()
  sendToServer(note)
}
</code></pre>

<p><code>_e.preventDefault()_</code> method is used to prevent the default handling of forms submit.</p>

<p>The code for sending the note to the server is as follows:</p>

<pre><code class="language-css">var sendToServer = function(note) {
  var xhttpForPost = new XMLHttpRequest()
  // ...

  xhttpForPost.open(&#39;POST&#39;, &#39;/new_note_spa&#39;, true)
  xhttpForPost.setRequestHeader(&#39;Content-type&#39;, &#39;application/json&#39;)
  xhttpForPost.send(JSON.stringify(note))
}
</code></pre>

<p>上面的代碼決定數據be sent with an HTTP POST request and the data type is to be JSON。The data type is determined with a <em>Content-type</em> header. Then the data is sent as JSON string.</p>

<p style="color:grey; font-size:18px">「Paper.wf」没有内置评论系统，如果想要评论我的博客，或是与我互动，请不要大意地在Mastodon私戳<a href="https://paper.wf/@/lizarddev@mastodon.social" class="u-url mention" rel="nofollow">@<span>lizarddev@mastodon.social</span></a>。</p>
]]></content:encoded>
      <guid>https://paper.wf/lizardwrite/full-stack-openxue-xi-bi-ji</guid>
      <pubDate>Wed, 07 Feb 2024 23:53:26 +0000</pubDate>
    </item>
    <item>
      <title>My first post on paper.wf</title>
      <link>https://paper.wf/lizardwrite/my-first-post-on-paper-wf</link>
      <description>&lt;![CDATA[Hello! 以後會嘗試在這裡發佈博文。&#xA;&#xA;!--more--&#xA;&#xA;Write.freely是一個極簡主義的博客平台，與Fediverse互通，例如可以在Mastodon搜索關注這篇博客@lizardwrite@paper.wf。&#xA;&#xA;因為太懶惰，自建博客一直沒有開始，主要是也想不到有什麼好寫的。但是我很喜歡write.freely這種半公開的長條碎碎念博客平台，免去了一些自建博客因為標準太高反爾什麼都不想開始的困擾，所以想要試著發佈一些什麼。&#xA;&#xA;p style=&#34;color:grey; font-size:18px&#34;「Paper.wf」没有内置评论系统，如果想要评论我的博客，或是与我互动，请不要大意地在Mastodon私戳@lizarddev@mastodon.social。/p]]&gt;</description>
      <content:encoded><![CDATA[<p>Hello! 以後會嘗試在這裡發佈博文。</p>



<p>Write.freely是一個極簡主義的博客平台，與Fediverse互通，例如可以在Mastodon搜索關注這篇博客<a href="https://paper.wf/@/lizardwrite@paper.wf" class="u-url mention" rel="nofollow">@<span>lizardwrite@paper.wf</span></a>。</p>

<p>因為太懶惰，自建博客一直沒有開始，主要是也想不到有什麼好寫的。但是我很喜歡write.freely這種半公開的長條碎碎念博客平台，免去了一些自建博客因為標準太高反爾什麼都不想開始的困擾，所以想要試著發佈一些什麼。</p>

<p style="color:grey; font-size:18px">「Paper.wf」没有内置评论系统，如果想要评论我的博客，或是与我互动，请不要大意地在Mastodon私戳<a href="https://paper.wf/@/lizarddev@mastodon.social" class="u-url mention" rel="nofollow">@<span>lizarddev@mastodon.social</span></a>。</p>
]]></content:encoded>
      <guid>https://paper.wf/lizardwrite/my-first-post-on-paper-wf</guid>
      <pubDate>Mon, 05 Feb 2024 13:06:28 +0000</pubDate>
    </item>
  </channel>
</rss>