<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>田徑 on 小M平碎碎念</title>
    <link>https://www.lilmp.com/tags/%E7%94%B0%E5%BE%91/</link>
    <description>Recent content in 田徑 on 小M平碎碎念</description>
    <image>
      <url>https://www.lilmp.com/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</url>
      <link>https://www.lilmp.com/%3Clink%20or%20path%20of%20image%20for%20opengraph,%20twitter-cards%3E</link>
    </image>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    <lastBuildDate>Wed, 18 Oct 2023 15:51:43 +0800</lastBuildDate><atom:link href="https://www.lilmp.com/tags/%E7%94%B0%E5%BE%91/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Pace朋朋-開發筆記</title>
      <link>https://www.lilmp.com/2023-10-18/work-paceponpon-note/</link>
      <pubDate>Wed, 18 Oct 2023 15:51:43 +0800</pubDate>
      
      <guid>https://www.lilmp.com/2023-10-18/work-paceponpon-note/</guid>
      <description>自己的玩具自己做，pace朋朋的開發筆記</description>
      <content:encoded><![CDATA[<h2 id="寫在前面">寫在前面</h2>
<p>這篇是寫給自己看的，紀錄從無到有開發過程中遇到的問題點之整理</p>
<h2 id="版本演進">版本演進</h2>
<ol>
<li>day1-v1
<figure>
       <img loading="lazy" src="/posts/work-paceponpon-note/day1_v1.gif" width="50%"/> 
   </figure>
</li>
<li>day2-v2
<figure>
       <img loading="lazy" src="/posts/work-paceponpon-note/day2_v2.gif" width="50%"/> 
   </figure>
</li>
<li>day2-v3
<figure>
       <img loading="lazy" src="/posts/work-paceponpon-note/day2_v3.gif" width="50%"/> 
   </figure>
</li>
</ol>
<!-- raw HTML omitted -->
<h2 id="htmlcss">html/css</h2>
<ol>
<li>取消input number預設的箭頭寫法: <sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* 取消數字欄位預設有的箭頭: 注意不同瀏覽器寫法不同 */</span>
</span></span><span class="line"><span class="cl"><span class="c">/* Chrome, Safari, Edge, Opera */</span>
</span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="p">::</span><span class="nd">-webkit-outer-spin-button</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="p">::</span><span class="nd">-webkit-inner-spin-button</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kp">-webkit-</span><span class="k">appearance</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">    <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="c">/* Firefox */</span>
</span></span><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="nt">number</span><span class="o">]</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="kp">-moz-</span><span class="k">appearance</span><span class="p">:</span> <span class="n">textfield</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div></li>
<li>改變input的寬度：用 <code>size</code> / 限制輸入字元長度 <code>maxlength</code> <sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup> </br>
只對以下type有用: text, search, tel, url, email, and password.<strong>(對number沒用)</strong>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;pin&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;pin&#34;</span> <span class="na">maxlength</span><span class="o">=</span><span class="s">&#34;4&#34;</span> <span class="na">size</span><span class="o">=</span><span class="s">&#34;4&#34;</span><span class="p">&gt;</span>
</span></span></code></pre></div></li>
<li>承上，如要更改number的寬度，可從用css改<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>:
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s1">&#39;number&#39;</span><span class="o">]</span><span class="p">{</span>
</span></span><span class="line"><span class="cl">     <span class="k">width</span><span class="p">:</span> <span class="mi">15</span><span class="kt">px</span><span class="p">;</span> <span class="c">/* 5em;*/</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span> 
</span></span></code></pre></div></li>
<li>將input的cursor置右(預設是左): <code>text-align: right</code>; <sup id="fnref:4"><a href="#fn:4" class="footnote-ref" role="doc-noteref">4</a></sup></li>
<li>載入網頁時自動&quot;get focus&quot;: <code>&lt;input type=&quot;text&quot; id=&quot;..&quot; name=&quot;..&quot; autofocus&gt;</code> <sup id="fnref:5"><a href="#fn:5" class="footnote-ref" role="doc-noteref">5</a></sup></li>
<li>reset focus: <code>document.getElementById(&quot;...&quot;).focus();</code> <sup id="fnref:6"><a href="#fn:6" class="footnote-ref" role="doc-noteref">6</a></sup></li>
</ol>
<h2 id="javascript">javascript</h2>
<ol>
<li>條件運算子寫法<sup id="fnref:7"><a href="#fn:7" class="footnote-ref" role="doc-noteref">7</a></sup>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl">     <span class="kd">function</span> <span class="nx">getFee</span><span class="p">(</span><span class="nx">isMember</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">         <span class="k">return</span> <span class="nx">isMember</span> <span class="o">?</span> <span class="s1">&#39;$2.00&#39;</span> <span class="o">:</span> <span class="s1">&#39;$10.00&#39;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">     <span class="p">}</span>
</span></span><span class="line"><span class="cl">     <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">getFee</span><span class="p">(</span><span class="kc">true</span><span class="p">));</span>
</span></span></code></pre></div></li>
<li>檢查NaN<sup id="fnref:8"><a href="#fn:8" class="footnote-ref" role="doc-noteref">8</a></sup>: <code>isNAN()</code>
**x1 == &ldquo;NaN&rdquo; is not checking if the value is NaN. isNaN(x1) is the preferred way to check if it is NaN.**</br>
(btw, 其實是想查如何捕捉 <code>The specified value &quot;NaN&quot; cannot be parsed, or is out of range.</code> 這個警告)</li>
<li>da</li>
</ol>
<h2 id="github-pages">github pages</h2>
<ol>
<li>上傳到<code>github pages</code>的網頁取名必須要是<code>index.html</code>或是<code>index.md</code>，否則github會自動抓README.md為顯示頁面。<sup id="fnref:9"><a href="#fn:9" class="footnote-ref" role="doc-noteref">9</a></sup></li>
</ol>
<h2 id="github-branchmerge">github branch/merge</h2>
<p>終於鼓起勇氣面對這東西了&hellip;</p>
<ol>
<li>要看merge tree可以搭配<code>sourcetree</code>這套軟體(大推這篇<sup id="fnref:10"><a href="#fn:10" class="footnote-ref" role="doc-noteref">10</a></sup>，搭配截圖很清楚)</li>
<li>我的work flow跟這篇<sup id="fnref:11"><a href="#fn:11" class="footnote-ref" role="doc-noteref">11</a></sup>還有這篇<sup id="fnref:12"><a href="#fn:12" class="footnote-ref" role="doc-noteref">12</a></sup>類似，以visual studio code開發跟內建github extension進行commit，搭配sourcetree看tree graph(想做的事情太多了,目前清單裡還沒有熟悉命令列模式這一條&hellip;)</li>
<li>merge 說明 <sup id="fnref:13"><a href="#fn:13" class="footnote-ref" role="doc-noteref">13</a></sup> <sup id="fnref:14"><a href="#fn:14" class="footnote-ref" role="doc-noteref">14</a></sup> <sup id="fnref:15"><a href="#fn:15" class="footnote-ref" role="doc-noteref">15</a></sup> <sup id="fnref:16"><a href="#fn:16" class="footnote-ref" role="doc-noteref">16</a></sup></li>
<li>先開新分支還是先修改? 參閱《git切换分支时，该分支的修改被带到另一个分支》 <sup id="fnref:17"><a href="#fn:17" class="footnote-ref" role="doc-noteref">17</a></sup>
結論：在當前master暫存分支、新增分支、將暫存分支放到新分支、push內容 <sup id="fnref:18"><a href="#fn:18" class="footnote-ref" role="doc-noteref">18</a></sup></li>
<li>ｄａｓｆ</li>
</ol>
<h2 id="ref">Ref</h2>
<h2 id="附錄">附錄</h2>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p><a href="https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp" target="_blank" >https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp</a>
&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:2">
<p><a href="https://www.w3schools.com/tags/att_input_size.asp" target="_blank" >https://www.w3schools.com/tags/att_input_size.asp</a>
&#160;<a href="#fnref:2" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:3">
<p><a href="https://stackoverflow.com/questions/22709792/input-type-number-wont-resize" target="_blank" >https://stackoverflow.com/questions/22709792/input-type-number-wont-resize</a>
&#160;<a href="#fnref:3" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:4">
<p><a href="https://codepen.io/code-and-pixels/pen/gJNGaL" target="_blank" >https://codepen.io/code-and-pixels/pen/gJNGaL</a>
&#160;<a href="#fnref:4" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:5">
<p><a href="https://www.w3schools.com/tags/att_input_autofocus.asp" target="_blank" >https://www.w3schools.com/tags/att_input_autofocus.asp</a>
&#160;<a href="#fnref:5" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:6">
<p><a href="https://www.w3schools.com/jsref/met_radio_focus.asp" target="_blank" >https://www.w3schools.com/jsref/met_radio_focus.asp</a>
&#160;<a href="#fnref:6" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:7">
<p><a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_operator" target="_blank" >https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_operator</a>
&#160;<a href="#fnref:7" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:8">
<p><a href="https://stackoverflow.com/questions/63797379/the-specified-value-nan-cannot-be-parsed-or-is-out-of-range" target="_blank" >https://stackoverflow.com/questions/63797379/the-specified-value-nan-cannot-be-parsed-or-is-out-of-range</a>
&#160;<a href="#fnref:8" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:9">
<p><a href="https://stackoverflow.com/questions/48919200/github-pages-only-showing-readme-file" target="_blank" >https://stackoverflow.com/questions/48919200/github-pages-only-showing-readme-file</a>
&#160;<a href="#fnref:9" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:10">
<p><a href="https://www.cythilya.tw/2019/12/03/git-detached-head-to-a-new-branch/" target="_blank" >https://www.cythilya.tw/2019/12/03/git-detached-head-to-a-new-branch/</a>
&#160;<a href="#fnref:10" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:11">
<p><a href="https://hackmd.io/@09oU3M6LTU-7M6MkSqRj1A/Bymbf3y2?type=view" target="_blank" >https://hackmd.io/@09oU3M6LTU-7M6MkSqRj1A/Bymbf3y2?type=view</a>
&#160;<a href="#fnref:11" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:12">
<p><a href="https://s81679.github.io/2020/04/09/start-sourcetree/" target="_blank" >https://s81679.github.io/2020/04/09/start-sourcetree/</a>
&#160;<a href="#fnref:12" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:13">
<p><a href="https://miahsuwork.medium.com/%E7%AC%AC%E4%BA%8C%E9%80%B1-git-%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8-branch-merge-a571cc0a95de" target="_blank" >https://miahsuwork.medium.com/%E7%AC%AC%E4%BA%8C%E9%80%B1-git-%E9%80%B2%E9%9A%8E%E4%BD%BF%E7%94%A8-branch-merge-a571cc0a95de</a>
&#160;<a href="#fnref:13" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:14">
<p><a href="https://kingofamani.gitbooks.io/git-teach/content/chapter_3_branch/git.html" target="_blank" >https://kingofamani.gitbooks.io/git-teach/content/chapter_3_branch/git.html</a>
&#160;<a href="#fnref:14" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:15">
<p><a href="https://june.monster/git-github-branch/" target="_blank" >https://june.monster/git-github-branch/</a>
&#160;<a href="#fnref:15" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:16">
<p><a href="https://myapollo.com.tw/blog/git-tutorial-collaboration/" target="_blank" >https://myapollo.com.tw/blog/git-tutorial-collaboration/</a>
&#160;<a href="#fnref:16" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:17">
<p><a href="https://blog.csdn.net/weixin_42436131/article/details/100043976" target="_blank" >https://blog.csdn.net/weixin_42436131/article/details/100043976</a>
&#160;<a href="#fnref:17" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:18">
<p><a href="https://blog.csdn.net/Oruizn/article/details/111294375" target="_blank" >https://blog.csdn.net/Oruizn/article/details/111294375</a>
&#160;<a href="#fnref:18" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
]]></content:encoded>
    </item>
    
  </channel>
</rss>
