<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Sitdh[ibong] - Medium]]></title>
        <description><![CDATA[Software Development and Software Engineering - Medium]]></description>
        <link>https://medium.com/sitdh?source=rss----47383d38a093---4</link>
        <image>
            <url>https://cdn-images-1.medium.com/proxy/1*TGH72Nnw24QL3iV9IOm4VA.png</url>
            <title>Sitdh[ibong] - Medium</title>
            <link>https://medium.com/sitdh?source=rss----47383d38a093---4</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Fri, 13 Nov 2026 04:10:51 GMT</lastBuildDate>
        <atom:link href="https://medium.com/feed/sitdh" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com/" rel="hub"/>
        <item>
            <title><![CDATA[Text Representation ด้วย Scikit Learn]]></title>
            <link>https://medium.com/sitdh/text-representation-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-scikit-learn-afab3f7d941a?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/afab3f7d941a</guid>
            <category><![CDATA[lda]]></category>
            <category><![CDATA[tf-idf]]></category>
            <category><![CDATA[text-analytics]]></category>
            <category><![CDATA[tfidf-vectorizer]]></category>
            <category><![CDATA[text-representation]]></category>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Wed, 20 Oct 2021 08:18:40 GMT</pubDate>
            <atom:updated>2021-10-20T08:18:40.292Z</atom:updated>
            <content:encoded><![CDATA[<h4>การแสดงผลข้อความในรูปแบบ Vector</h4><p>การวิเคราะห์ข้อความทางคอมพิวเตอร์นั้นสามารถทำได้หลากหลาย งานพื้นฐานเลยก็คือการตัดคำ การนับความถี่ การกรองที่ไม่ต้องการออกไป ซึ่งการทำงานก็ดูไม่ได้มีอะไรมากครับ แต่เท่าที่ลองทำดูกับข้อมูลขนาดใหญ่ ผลลัพธ์ที่ได้นั้นจะค่อนข้างไม่ค่อยน่าพอใจเท่าไหร่ เพราะใช้เวลานาน แถม Memory ที่ใช้นั้นยังไม่ Optimize เลยปรับมาใช้ Scikit Learn สาเหตุหนึ่งเพราะก่อนทำยังไม่ได้ค้นดูมากเท่าไหร่ เพราะคิดว่า Scikit Learn นั้นไม่สามารถตัดคำภาษาไทยได้เลย แต่พอค้นๆ ดูดีๆ แล้วเจอช่องทางเลยทำให้ชีวิตง่ายขึ้นเยอะมาก โดยที่ตอนนี้จะเขียนเฉพาะ TF-IDF และแถม LDA แบบยังไม่อธิบายวิธีการคำนวณก่อนนะครับ</p><blockquote>ก่อนอื่น ขอทำความเข้าใจก่อนว่าอาจจะเห็นสลับกันใช้ scikit-learn กับ sklearn บ้าง แต่ขอให้เข้าใจว่ามันคือสิ่งเดียวกันนะครับ เพราะ scikit-learn เป็นชื่อที่เป็นทางการบนเว็บไซต์ ส่วน sklearn เป็นชื่อ package ที่เรียกใช้งานในโปรแกรม และจะขอข้ามขั้นตอนการติดตั้ง libary ที่ใช้งานไปด้วยครับ</blockquote><h4>สร้างฟังก์ชันสำหรับตัดคำ</h4><p>ก่อนจะเริ่มต้นใช้เครื่องมือใน sklearn ให้เริ่มต้นสร้างฟังก์ชันที่ทำหน้าที่ตัดคำมาก่อน ในที่นี้ ถ้าเป็นภาษาอังกฤษนั้นก็จะไม่ต้องทำอะไรมานัก เพราะใส่เข้าไปก็ทำงานได้เลยทันทีไม่ต้องแก้ไขมาก โดยที่สร้างฟังก์ชันสำหรับตัดคำที่สนใจเฉพาะคำภาษาไทย ดังฟังก์ชันด้านล่างนี้</p><pre>def text_tokenizer(text: str) -&gt; list[str]:<br>  from pythainlp.tokenize import word_tokenize<br>  from pythainlp.util import isthai</pre><pre>  return [term for term in word_tokenize(text) if isthai(term)]</pre><p><strong><em>ข้อควรระวังอย่างหนึ่งคือ ทรัพยากรต่างๆ ที่ใช้ควรจะใช้แบบ local variable ภายใน ฟังก์ชันนั้นเลย</em></strong></p><h4>สร้างฟังก์ชันสำหรับเตรียมข้อความ</h4><p>โดยปรกติแล้ว การจัดการข้อความนั้นมีขั้นตอนก่อนที่จะนำเอาข้อความนั้นมาประมวลผลต่อหลายอย่างเดียวกัน เช่น ลบอักขระพิเศษ, เปลี่ยนให้เป็นตัวเล็ก (โดยเฉพาะในภาษาอังกฤษ), เปลี่ยนการเข้ารหัสตัวอักษร ซึ่งในขั้นตอนนี้ก็จะสร้างอีก 1 ฟังก์ชันออกมาทำหน้าที่นี้โดยเฉพาะ โดยฟังก์ชันที่จะเตรียมไว้นี้จะดึงเครื่องหมายขึ้นบรรทัดใหม่ออกจากข้อความ และลบเครื่องหมาย *, ?, !, และ &amp; ออกไปด้วย จะได้ฟังก์ชัน</p><pre>def text_preprocessor(text: str) -&gt; str:<br>  # omit ด้านล่างนี้ขี้เกียจเขียนนะครับ ถ้าให้ดีที่สุดคือ สร้าง dictionary ไว้เลย <br>  # การทำแบบด้านล่างจะทำให้ใช้ Resource ของเครื่องมากไปโดยไม่จำเป็น<br>  omit_key = [ord(c) for c in &#39;*?!&amp;&#39;]<br>  omit_value = [None] * len(omit_key)<br>  omit = dict(zip(omit_key, omit_value))<br> <br>  return &#39; &#39;.join([t.strip() \<br>    for t in text.translate(omit).split(&quot;\n&quot;) \<br>  ])</pre><h4>เตรียม Stop words</h4><p>สิ่งสำคัญอย่างหนึ่งในการจัดเตรียมข้อความ นั่นก็คือ การดึงเอาคำที่มีความถี่สูงๆ แต่ไม่ส่งผลกับความหมายออกไป เช่น a, an, the ในภาษาอังกฤษ หรือ ที่ ซึ่ง ก็ การ ในภาษาไทย รวมๆ จะเรียกว่า Stop words</p><pre>from pythainlp.corpus import thai_stopwords</pre><pre>stop_words = thai_stopwords()</pre><h4>สร้าง TF-IDF ของข้อความจาก scikit-learn</h4><p>ใน sklearn นั้นจะมีเครื่องมือสำหรับสร้าง Model และการวิเคราะห์ข้อมูล ที่เก่งมาก library หนึ่ง ซึ่งในการทำ TF-IDF ที่จะวิเคราะห์ความหมายระดับคำ (Terms) ที่ปรากฏอยู่ในเอกสารแต่ละชิ้น ซึ่งสามารถใช้เป็นตัวแทนความหมายอย่างใดอย่างหนึ่งได้ ซึ่งในทาง Data Science จะเรียกข้อมูลที่ใช้บ่งชี้ลักษณะของข้อมูลที่จะวิเคราะห์นี้ว่า Feature (โดยทั่วไปที่ไม่ใช้ใน Data Science จะเรียกจะเรียกว่า Metadata ก็ได้ แต่จะไม่ตรงกับความหมายที่จะทำในครั้งนี้เท่าไหร่นัก)</p><blockquote>เอกสาร หรือ Document คือ ระดับย่อยที่สุดของกลุ่มคำที่จะนำมาวิเคราะห์ เช่น การวิเคราะห์ทวีตที่เกี่ยวข้องกับสินค้าออกใหม่ของบริษัท แต่ละทวีตนั้นจะเรียกว่า document</blockquote><p>ดังนั้นเพื่อดึง Term ที่เป็น Feature ของแต่ละ Document ออกมา อย่างแรกที่ต้องทำก็คือการตัดคำออกมาก่อน ซึ่งเขียนไว้แล้วด้านบน โดยใช้ PyThaiNLP ในฟังก์ชันที่ชื่อว่า word_tokenize ที่จะรับข้อความยาวๆ ออกมาแล้วคืนกลับเป็นคำที่ตัดได้ออกไป (ใน word_tokenize จะมี Engine ให้เลือกด้วยลองปรับตามความเหมาะสมได้ครับ) ตัวอย่างผลลัพธ์ของ text_tokenizer จะเป็นดังตัวอย่างด้านล่าง</p><pre>terms = text_tokenizer(&#39;ไก่จิกเด็กdieบนปากโอ่ง&#39;)</pre><pre>print(terms)<br>[&#39;ไก่&#39;, &#39;จิก&#39;, &#39;เด็ก&#39;, &#39;บน&#39;, &#39;ปาก&#39;, &#39;โอ่ง&#39;]</pre><p>ก่อนเริ่มทำ TF-IDF ขออธิบายความหมายของมันคราวๆ ก่อนเพื่อให้เห็นภาพร่วมกันก่อนแล้วกัน TF-IDF นั้นประกอบด้วย 2 กิจกรรมคือ</p><ul><li><strong>TF (Term Frequency)</strong> ทำง่ายๆ ด้วยการหาความถี่ของคำในเอกสาร เมื่อทำเสร็จ จะเห็นคำที่เอกสารกลุ่มนั้นกล่าวถึงบ่อยๆ แต่มันจะมีความผิดปรกติบางอย่างเกิดขึ้นเพราะคำเราจะเห็นคำที่ไม่มีความหมายทั้งหลายเกิดขึ้น ซึ่งคำเหล่านั้นจะเรียกว่า Stop words ที่จำเป็นต้องเอาออกก่อน ดังที่เตรียมไว้แล้วด้านบน แต่ทั้งนี้ ในบาง Domain นั้นอาจะเพิ่มคำที่ไม่ต้องการเข้าไปอีกได้เพื่อให้การวิเคราะห์นั้นถูกต้องมากยิ่งขึ้น ซึ่ง Term Frequency นั้นจะเป็นกราฟแบบ Long tail ที่ความถี่มากๆ นั้นจะกองกันอยู่เพียงแค่ไม่กี่คำเท่านั้น</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*MLG0Gl-U16TRfWAK5W9rJw.png" /><figcaption>Term Frequency Distribution (Source: <a href="https://chart-studio.plotly.com/~wenwei/66.embed">plotly</a>)</figcaption></figure><ul><li><strong>IDF (Inverse Document Frequency)</strong> ที่จะนับจำนวนของ Document ที่มี Term นั้นปรากฏอยู่ แล้วหาค่า log ของค่าผกผันกับจำนวนเอกสารทั้งหมดซะ ความหมายคือ ยิ่ง Term นั้นปรากฏอยู่หลาย Document ความสำคัญของ Term ก็จะลดลงหรือไม่มีความสำคัญเลย</li></ul><p>จากความหมายของ TF และ IDF ด้านบนจะสรุปความหมายของ TF-IDF ด้านบน จะนำเอาค่าของ TF และ IDF มาคูณกัน ซึ่งจะหมายความว่า IDF จะช่วยลดความสำคัญของ TF สูงๆ ที่ปรากฏอยู่หลายๆ เอกสาร ลง ยกตัวอย่างเช่น jun ที่มี TF คือ 5, แต่ปรากฏอยู่ในเอกสารเพียง 1 เอกสาร จากทั้งหมด 4 เอกสาร ค่า IDF ก็คือ -log(1/4) = 0.6</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*jos7NU-Go9X3KwJxq4wMuw.jpeg" /></figure><p>ดังนั้น ค่า TF-IDF ของคำว่า jun จะคำนวณได้จาก</p><pre>TF-IDF(jun) = TF(jun) * IDF(jun) = 5 * (-log(1/4)) = 5 * 0.6 = 3.0</pre><p>เมื่อเทียบกับคำว่า kane ที่ปรากฏอยู่ในทุก ๆ เอกสารจะได้ว่า</p><pre>TF-IDF(kane) = TF(kane) * IDF(kane) = 6 * (-log(4/4)) = 6 * 0 = 0</pre><p>จะเห็นความต่างของ jun และ kane ว่า ถึง kane จะมีความถี่สูงที่สุด แต่ kane นั้นกระจายอยู่ทุกๆ เอกสาร TF-IDF จะมองว่า kane นั้นไม่มีความสำคัญเท่ากับ june ที่โผล่มาแค่เอกสารเดียว</p><p><strong>หมายเหตุ: การคำนวณด้านบนเน้นการคำนวณแบบง่ายเพื่อให้เข้าใจได้เร็วๆ นะครับ</strong></p><h4>คำนวณ TF-IDF ด้วย sklearn</h4><p>จากที่บอกว่าการทำ TF-IDF คือการทำ Feature Extraction ดังนั้น sklearn จะจัดเครื่องมือสำหรับทำ TF-IDF ไว้ใน sklearn.feature_extraction.text โดยมีให้ใช้ด้วยกัน 2 Class (เฉพาะที่เกี่ยวข้องกับ TF-IDF) ได้แก่ TfidfVectorizer และ TfidfTransformer ความแตกต่างคือ</p><ul><li>TfidfVectorizer ใช้เริ่มต้นวิเคราะห์จาก document ได้เลย</li><li>TfidfTransformer จะวิเคราะห์ข้อมูลจาก Matrix ที่ได้มาจากการทำงานอื่น เช่น CounterVectorizer</li></ul><p>ซึ่งผลลัพธ์การทำงานของทั้ง TfidfVectorizer และ TfidfTransformer นั้นจะให้ผลลัพธ์ออกมาเช่นเดียวกัน คือ ค่า TF-IDF นั่นเอง</p><p>เริ่มต้นด้วยการสร้าง Model ก่อน</p><pre>from sklearn.feature_extraction.text import TfidfVectorizer<br><br>tfidf_model = TfidfVectorizer(<br>  preprocessor=text_preprocessing, # ลบตัวอักษรที่ไม่ต้องการออก<br>  tokenizer=text_tokenizer,        # เพิ่ม Analyzer สำหรับตัดคำ<br>  stop_words=stop_words,           # ป้อนรายการคำ Stop words ที่เตรียมไว้<br>  ngram_range=(2, 3),              # อยากวิเคราะห์แบบ 2 และ 3 คำ ติดกัน<br>  min_df=5,                        # ขั้นต่ำของ Doc Freq ของ Term<br>  max_features=3_000               # ใช้แค่ 3,000 Term แรก<br>)</pre><figure><img alt="" src="https://cdn-images-1.medium.com/max/618/1*2v_yFuSm-uPnljld4f19iQ.png" /><figcaption>การใช้งานใน Jupyter Notebook (อธิบายโค้ดไปแล้วจากด้านบน)</figcaption></figure><p>ข้อมูลเพิ่มเติมดูได้จากเอกสาร <a href="https://scikit-learn.org/stable/modules/generated/sklearn.feature_extraction.text.TfidfVectorizer.html#sklearn.feature_extraction.text.TfidfVectorizer">TfidfVectorizer ของ Scikit-Learn</a></p><p>แต่ก่อนที่จะไป train นั้นก็จำเป็นจะต้องเตรียมข้อมูลก่อน โดยในที่นี้จะใช้ตัวอย่าง<a href="https://www.kaggle.com/rtatman/hse-thai-corpus?select=thai-government-corpus.csv">ข้อมูลข่าวสารของหน่วยงานราชการ จาก Kaggle</a> โดยอ่านมาเก็บไว้ใน Google Drive และประมวลผลข้อมูลทั้งหมดด้วย Google Colab ดังนี้</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/992/1*E7O3YrVRP3f9TM1Gr18V7g.png" /><figcaption>ตัวอย่างข้อมูลข่าวประกาศของรัฐ ทั้งสิ้น 265 เอกสาร อ่านเข้ามาเก็บไว้ใน DataFrame ของ Pandas</figcaption></figure><p>จากไฟล์ CSV ที่ได้จะประกอบด้วย 2 คอลัมน์หลักๆ คือ article และ text ที่เป็นรหัสเอกสาร และข้อความในเอกสารนั้นตามลำดับ ดังตัวอย่างด้านบน</p><p>ในโค้ดด้านล่างจะนำ model ที่เตรียมไว้มา train และคืนค่าที่คำนวณได้ออกมา (Fit &amp; Transform) โดยใช้ข้อมูลที่อยู่ใน text ทั้งหมดของ df ด้านบน ค่า TF-IDF จะเก็บไว้ในตัวแปร X แต่เพื่อความง่ายจะนำ matrix นี้มาสร้างเป็น DataFrame ที่ตัวแปร terms_tfidf ดังตัวอย่าง</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/767/1*Q6dV5n8f5yHulIawz4Z0ZQ.png" /><figcaption>สร้าง matrix ของคะแนน TF-IDF แยกตาม Term และ Document</figcaption></figure><p>จะเห็นจากรูปว่ามี Feature (หรือ Term) ที่เป็นค่าแปลกๆ อยู่ เช่น ( 2 ) หรือ ( รง.​​ ) แต่เพื่อให้เข้าใจมากขึ้นว่า Term ที่มีค่า TF-IDF มากสุด เรียงจากมากไปน้อย 20 คำแรก จะได้ว่า</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/580/1*gcMy1v0fcyGBrPQW0ozZ7w.png" /><figcaption>คำที่มีค่า TF-IDF เรียงจากมากไปน้อย</figcaption></figure><p>ถ้ามอกจากรายการของคำ อาจมองได้ว่าคำสำคัญในประกาศนี้เน้นไปที่คลองผดุงกรุงเกษม สุขภาพ และกีฬา แต่ปัญหาต่อมาคือ มีหัวข้อข่าวอยู่แค่นี้จริงๆ เหรอ ? ซึ่งการวิเคราะห์ข้อความนั้นมีวิธีการช่วยจัดหมวดหมู่ของข้อความที่สนใจเรียกว่า Topic Modeling อยู่ โดยใช้ Matrix ที่เป็นตัวแทนของข้อความนี้อยู่ ซึ่งวิธีการจัดกลุ่มวิธีการหนึ่งก็คือ Latent Dirichlet Allocation (LDA) สรุปเร็วๆ คือ เป็นการจัดกลุ่มข้อมูลที่จัดคำที่น่าจะอยู่ใน topic (component) เดียวกัน คล้ายๆ กับวิธีการจัดกลุ่ม (Clustering) อื่นๆ จะต่างกันตรงที่ด้านหลังจะใช้ Monte Carlo เพื่อหาความน่าจะเป็นเข้าร่วม โดยที่การทำ LDA นี้จะอยู่ในกลุ่ม decomposition (sklearn.decomposition) ของ Scikit learn ดังนี้</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/643/1*FNZ2BurJ4_6wowzlPsTj4g.png" /><figcaption>แบ่ง Component ของ Term ที่วิเคราะห์ได้โดยอาศัยค่า TF-IDF ที่อยู่ใน X</figcaption></figure><p>จากโค้ดด้านบน จะเห็นว่าระบุ n_components ไปเท่ากับ 5 (แน่นอนว่ามั่วมา) ซึ่งจะบอกว่าตัวเลขนี้ไม่สามารถบอกได้ว่าจะต้องกำหนดเป็นค่าเท่าไหร่ ต้องไป validate ด้วยวิธีการอื่นเพิ่ม เพื่อหาจำนวน Component ที่เหมาะสมกับเอกสารของเรามากที่สุด โดยในตัวอย่างจะเป็นการวิเคราะห์เพื่อจัดกลุ่มของ Term โดยอาศัยค่า TF-IDF ที่คำนวณได้ก่อนหน้านี้ ซึ่งใน fit_transform นั้นสามารถใช้ได้ทั้งจากตัวแปร X หรือ tfidf_terms ด้านบน จะได้ค่าเช่นเดียวกัน ผลลัพธ์ที่ได้ออกมาจะเป็นความน่าจะเป็นของแต่ละ Term ที่อาจจะอยู่ใน Topic นั้นๆ</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qZIEE3at71nhgIoEnvODog.png" /><figcaption>สร้าง DataFrame โดยอาศัยค่าจาก LDA ด้านบน และคำจาก terms_tfidf</figcaption></figure><p>เมื่อนำคำจาก Index ของ DataFrame ที่มีค่า LDA ที่เรียงจากมากไปน้อย จะได้กลุ่มของคำดังรูปด้านล่าง</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/872/1*XjriIzv-oTM4U7Q91x_YRA.png" /><figcaption>กลุ่มของคำเรียงตามความน่าจะเป็นในแต่ละ Topic</figcaption></figure><p>ด้วยวิธีของ LDA นี้จะไม่สามารถบอกได้ว่า Topic นั้นๆ หมายถึงอะไรบ้าง และยังไม่สามารถบอกว่าข้อมูลนั้นต้องแบ่งกี่ Topic ถึงจะเหมาะสมที่สุด จำเป็นต้องเอากลุ่มคำมากำหนดความหมายด้วยคนอีกที ยกตัวอย่างเช่น</p><ul><li><strong>Topic 1</strong> อาจจะเป็นเรื่องเกี่ยวกับการท่องเที่ยว และกีฬา</li><li><strong>Topic 2</strong> มีความเป็นไปได้ว่าจะเป็นข่าวเกี่ยวกับเศรษฐกิจและการลุงทุน</li><li><strong>Topic 3</strong> น่าจะเป็นประกาศเพื่อแต่งตั้งข้าราชการ</li><li><strong>Topic 4</strong> ขอความร่วมมือหรือรณรงค์บางอย่างกับประชาชน</li><li><strong>Topic 5 </strong>เป็นไปได้สูงว่าจะเกี่ยวข้องกับการต่างประเทศ</li></ul><h4>สรุป</h4><p>ในบทความนี้ได้พูดถึงการแสดงผลของข้อความในรูปของ Vector โดยเลือกเอา TF-IDF เข้ามาอธิบาย และยกตัวอย่าง Application หนึ่ง มาประกอบนั่นก็คือการทำ Topic Modeling ด้วย LDA ที่ช่วยแบ่งหมวดหมู่ของข้อความให้อัตโนมัติ หวังว่าจะพอได้แนวคิดการใช้งานไม่มากก็น้อยครับ</p><p>ทั้งนี้การทำ Text Representation นั้นยังมีอีกหลายวิธี ซึ่งเหมาะสมกับงานในรูปแบบต่างกันไป</p><p><a href="https://colab.research.google.com/drive/15Xu5w3RpvbipRqGvn-24EG7rXSY6Nbik?usp=sharing">Google Colaboratory</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=afab3f7d941a" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/text-representation-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-scikit-learn-afab3f7d941a">Text Representation ด้วย Scikit Learn</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Angular 6: Angular CLI]]></title>
            <link>https://medium.com/sitdh/angular-6-angular-cli-4fd2f81f3aac?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/4fd2f81f3aac</guid>
            <category><![CDATA[angular]]></category>
            <category><![CDATA[angular-cli]]></category>
            <category><![CDATA[material-design]]></category>
            <category><![CDATA[angular-6]]></category>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Fri, 18 May 2018 14:28:36 GMT</pubDate>
            <atom:updated>2018-05-18T14:28:35.156Z</atom:updated>
            <cc:license>https://creativecommons.org/licenses/by-nd/4.0/</cc:license>
            <content:encoded><![CDATA[<h4>Getting start with Angular 6 with Angular CLI</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/656/1*FJAR7XSLN8qJt-tU_Gcx-g.png" /><figcaption>รูปภาพจาก: <a href="https://vitalflux.com/upgrade-angular-5-app-angular-6/">https://vitalflux.com/upgrade-angular-5-app-angular-6/</a></figcaption></figure><p>Angular 6 พึ่งออกเปิดตัวได้ไม่นานเท่าไหร่ ถึงจะไม่ได้เปลี่ยนจากหน้ามือเป็นหลังมือเหมือนเวอร์ชันก่อนหน้านี้ แต่มีความสามารถหลายอย่างที่น่าสนใจ เช่น Schematic ที่ช่วยให้ลดการใช้ข้อมูลในขณะที่โหลดหน้าเพจได้ ได้ลองเขียน Angular 5 มาบ้างแล้ว และได้ลองอัพเกรดมาเป็น 5 แล้วเหมือนกัน ผลปรากฎว่า Angularfire2 ที่ใช้อยู่ยังติดปัญหา แถมเป็นปัญหาใหญ่ด้วย เลยละไว้ก่อน ตอน Angular CLI ก็มีปัญหากับโครงสร้างแบบเก่าด้วย เลยแก้ดึ้งๆ ด้วยการบังคับให้ Angular CLI ในโปรเจคนั้นเรียกเวอร์ชันเก่าของตัวเอง ส่วนด้านนอกก็ใช้เวอร์ชันใหม่ไปเลย</p><pre># package.json<br>{<br>    ...<br>    &quot;scripts&quot;: {<br>        &quot;ng&quot;: &quot;./node_module/.bin/ng&quot;,<br>        ...</pre><p>วันนี้เลยอยกลองของใหม่ด้วยการสร้างเว็บแอปพลิเคชันจาก Angular 6 ด้วย Angular CLI เลย ที่ตั้งใจไว้คงจะเป็นหน้าเพจคราวๆ ก่อน แล้วค่อยมาเติมส่วนประกอบกันทีหลังอีกที</p><h4>อัพเกรด Angular CLI</h4><ol><li>ยังไม่มี NPM: ให้ติดตั้ง NodeJS ก่อน เพื่อใช้ NPM ดาวน์โหลดได้จาก <a href="https://nodejs.org/en/">https://nodejs.org/en/</a> ขอให้ใช้ NodeJS 8 ก่อนนะครับ</li><li>ยังไม่มี Angular CLI: ติดตั้งด้วยคำสั่ง npm install -g @angular/cli@latest</li><li>มีแล้วแต่ไม่แน่ใจว่าเวอร์ชันไหน ใช้คำสั่งในข้อ 2 ได้เลย</li></ol><h4>สร้างโปรเจคใหม่</h4><p>อย่างแรกที่ต้องทำแน่นอนว่านั่นก็คือการสร้างโปรเจค ซึ่งสร้างผ่าน Angular CLI ก็ไม่ได้ยากอะไร ใช้คำสั่งด้านล่างได้เลยครับ</p><pre>$ ng new ag6 &amp;&amp; cd ag6</pre><p>ซึ่ง ng นี้ก็คือ Angular CLI ที่ว่า พอโปรแกรมทำงานเสร็จ ให้ใช้คำสั่ง npm start หรือ ng serve อย่างใดอย่างหนึ่ง แล้วเข้าเว็บ <a href="http://localhost:4200/">http://localhost:4200</a> จะเจอหน้าเพจข้างล่างนี้ครับ</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*uzaldDMcHg-UFu54oPtXzA.png" /><figcaption>Welcome to Angular 6</figcaption></figure><h4>ติดตั้ง Material มาในโปรเจค</h4><p>เพื่อความง่ายที่จะได้ไม่ต้องออกแบบเองมาเท่าไหร่ เราจะใช้ Material ซึ่งเป็นไลบรารี่กึ่งสำเร็จรูป โดยติดตั้งด้วยคำสั่ง</p><p>$ ng add @angular/material</p><p>จากนั้นจะเพิ่ม Navigation Bar ด้านบน ซึ่งเพิ่มด้วยคำสั่งด้านล่าง (เป็น Schematics)</p><p>$ ng generate @angular/material:material-nav --name=navigator</p><p>เสร็จแล้วให้แก้ไฟล์ชื่อ src/app/app.component.html ด้วยโค้ดด้านล่าง</p><pre>&lt;navigator&gt;&lt;/navigator&gt;</pre><p>ลองรีเฟรชหน้าเพจอีกเดิมอีกครั้งจะเห็นหน้าเพจเปลี่ยนไปเป็นรูปด้านล่าง</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*q95EDZ074P7xDnNT5Q_cfQ.png" /><figcaption>Navigation bar</figcaption></figure><p><em>ซึ่ง Navigation bar ด้านบน หากกดปุ่มแฮมเบอร์เกอร์ (ขีด 3 ขีดก่อนคำว่า Application Title) แล้วจะยังมีปัญหาอยู่ จะกลับมาแก้ให้อีกครั้งครับ</em></p><p>จากนั้นให้เพิ่ม Dashboard เข้าไปอีกทีด้วยคำสั่ง</p><pre>$ ng g @angular/material:material-dashboard --name=dashboard</pre><p>จะมี Component ชื่อ <strong>dashboard</strong> เพิ่มขึ้นมา แก้ไฟล์ app.component.html อีกครั้งเป็นไฟล์ด้านล่าง</p><pre>&lt;navigator&gt;&lt;/navigator&gt;<br>&lt;dashboard&gt;&lt;/dashboard&gt;</pre><p>จะได้หน้าเพจ</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*tLJDbWUsCAmQvIJ35woJTQ.png" /><figcaption>Dashboard</figcaption></figure><h4>กำหนดค่าเพิ่มเติม</h4><p>สุดท้ายจะแก้ไขโค้ดเพื่อเพิ่มชื่อของ App ไว้บน Navigation bar ด้วยชื่อแอปที่เก็บค่าไว้ที่ไฟล์ app.component.ts (ตัวแปรชื่อ title ที่มีอยู่แล้ว) เริ่มที่แก้ไขไฟล์ app.component.html เป็นโค้ดด้านล่าง</p><pre>&lt;navigator [title]=&quot;title&quot;&gt;&lt;/navigator&gt;<br>&lt;dashboard&gt;&lt;/dashboard&gt;</pre><p>title ใน [title] นั้นจะเป็นตัวแปรที่อยู่ใน navigator ส่วน &quot;title&quot; นั้นจะเป็นตัวแปรที่อยู่ใน app.component.ts ซึ่งตอนนี้ ให้แก้ไฟล์ navigator/navigator.component.ts อีกที เป็นโค้ดด้านล่าง (ตัวหนาคือส่วนที่เพิ่มเข้ามา)</p><pre>import { Component, <strong>Input</strong> } from &#39;@angular/core&#39;;</pre><pre>...</pre><pre>export class NavigatorComponent {<br>  <strong>@Input() title: string;</strong><br>  ...<br>}</pre><p>ส่วนที่เพิ่มเข้าไป จะบอกให้โค้ดรับค่าจาก attribute ชื่อ <strong>title</strong> เข้ามา</p><p>สุดท้ายให้แก้โค้ดในไฟล์ navigator/navigator.component.html บรรทัดที่ 26 (ให้ลบบรรทัดเดิมไปก่อน)</p><pre>      &lt;span&gt;<strong>{{ title }}</strong>&lt;/span&gt;<br>    &lt;/mat-toolbar&gt;<br>  &lt;/mat-sidenav-content&gt;<br>&lt;/mat-sidenav-container&gt;</pre><p>เราก็จะได้หน้าเว็บที่มีชื่อตามที่เราต้องการ (ให้เปลี่ยนค่าในตัวแปรไฟล์ชื่อ title ในไฟล์ app.component.ts เป็นค่าที่ต้องการก่อน)</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=4fd2f81f3aac" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/angular-6-angular-cli-4fd2f81f3aac">Angular 6: Angular CLI</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Vim: Multi-Buffers]]></title>
            <link>https://medium.com/sitdh/vim-multi-buffers-f46a61b2a1ad?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/f46a61b2a1ad</guid>
            <category><![CDATA[editor]]></category>
            <category><![CDATA[vim]]></category>
            <category><![CDATA[multi-buffer]]></category>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Mon, 14 May 2018 11:05:40 GMT</pubDate>
            <atom:updated>2018-05-14T11:36:12.798Z</atom:updated>
            <cc:license>http://creativecommons.org/licenses/by/4.0/</cc:license>
            <content:encoded><![CDATA[<h4>Working with Multi-Buffers</h4><p>NVIM v0.2.2</p><p>การทำงานโดยต้องเปิดหลายๆ ไฟล์เพื่อทำงานควบคู่กันไปนั้นไม่ใช่เรื่องแปลกอะไร editor หลายโปรแกรมต่างก็มีวิธีการช่วยให้โปรแกรมเมอร์เข้าถึงไฟล์ที่เปิดไว้เหล่านั้น ใน Vim เองก็มีเหมือนกัน</p><h4>เปิดไฟล์พร้อมกันหลายแท็บ</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*400XDRjQ-KTw5l3yF9puyA.png" /><figcaption>Project files</figcaption></figure><p>จากโฟลเดอร์ด้านบนมี 3 ไฟล์ คือ index.html, style.css และ script.js ถ้าลองเปิดไฟล์ index.html ก่อนด้วยการพิมพ์ $ vi index.html ก่อน จากนั้นค่อยพิพม์ :tabe script.js เพื่อเปิดไฟล์ script.js ในแท็บใหม่</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rrCHz7QLr-PuLNp6owTnww.png" /></figure><p>รวมคำสั่งสำหรับแท็บที่ใช้บ่อยๆ คือ</p><ul><li>:tabnew เปิดแท็บใหม่</li><li>:tabs แสดงรายการ แท็บที่เปิดอยู่ทั้งหมด</li><li>:tabm 0 ย้ายแท็บที่ทำงานอยู่ตอนนี้ไปอยู่ที่แท็บแรกสุด</li><li>:tabm ย้ายแท็บที่ทำงานอยู่ตอนนี้ไปแท็บสุดท้าย</li><li>gt เปลี่ยนไปทำงานที่แท็บถัดไป (ทางด้านซ้าย)</li><li>gT เปลี่ยนไปทำงานที่แท็บก่อนหน้า (ทางด้านซ้าย)</li><li>{i}gt เปลี่ยนแท็บไปทางด้านซ้ายตามจำนวน i ที่ต้องการ</li></ul><h4>เปิดไฟล์พร้อมกันด้วยการแบ่งหน้าจอ</h4><p>ซึ่งแต่นอนว่าเราแบ่งได้ 2 แบบ คือ แนวตั้งและแนวนอน โดยใช้ :vsp และ :sp ตามลำดับ</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DJxihFTFCI5-q6C8fzVtJA.png" /><figcaption>Horizontal split</figcaption></figure><p>ซึ่งการแบ่งนั้นจะนับจาก buffer ปัจจุบันที่กำลังทำงานอยู่ หากแบ่งตามแนวนอน ไฟล์ใหม่จะถูกเปิดขึ้นทางด้านบน ส่วนถ้าเป็นการแบ่งตามแนวตั้งไฟล์ ไฟล์ใหม่จะเปิดขึ้นมาทางด้านซ้ายมือ</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*x1ZGV6KoAwwqL25ljL_MHg.png" /><figcaption>Splited panel</figcaption></figure><p>เมื่ออยากจะสลับไฟล์ที่ทำงานให้กด Ctrl-w w (w 2 ตัว) กดแล้ว Cursor จะสลับ panel ทวนเข็มนาฬิกาไปเรื่อยๆ แต่ถ้าอยากระบุทิศทางให้กด h, j, k, หรือ l หลังจากกด Ctrl-w ไปแล้ว แต่ถ้าหากกด Ctrl-w T จะเปลี่ยนจากการแบ่งไฟล์แบบ Panel นี้เป็นแท็บ แต่การเปิดไฟล์แบบแบ่งหน้าจอนี้จะมีข้อเสียคือ ถ้าเกิดการเปลี่ยนขนาดของหน้าจอ (ผมใช้ iTerm) บาง panel จะมีขนาดต่างออกไป เล็กเกินไปบ้าง ไม่ก็ใหญ่เกินไปบ้าง ตามภาพด้านล่าง</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OUuIcA29u5eFYanh6xrZTQ.png" /><figcaption>Wrong size</figcaption></figure><p>ซึ่ง Panel ที่ขนาดเปลี่ยนไปนี้ก็ปรับได้ด้วย :resize {+/-}[number|percentage] ที่เป็นการปรับขนาดหน้าจอตามแนวตั้ง (ตามแกน Y) และ :vertical resize {+/-}[number|percentage] จะเป็นการปรับขนาดตามแนวนอน (ตามแกน X)</p><h4>รวมคำสั่ง</h4><ul><li>:resize -10 ปรับขนาด Panel ตามแกน Y โดยลดขนาดลงมา 10 หน่วย</li><li>:vertical resize +10% ปรับขนาดตามแกน X โดยเพิ่มขนาดเข้าไป 10%</li><li>Ctrl-w = กระจายขนาดของทุก Panel ให้เท่ากัน</li><li>Ctrl-w &lt; ลดขนาดตามแนวแกน X เข้ามา 1 หน่วย</li><li>Ctrl-w &gt; เพิ่มขนาดตามแนวแกน X ออกไป 1 หน่วย</li><li>Ctrl-w +ลดขนาดตามแนวแกน Y ออกไป 1 หน่วย</li><li>Ctrl-w - เพิ่มขนาดตามแนวแกน Y เข้ามา 1 หน่วย</li><li>Ctrl-w _ ปัดให้ Panel อื่นๆ ลดขนาดจนชิดขอบด้านล่างหรือด้านบน</li><li>Ctrl-w | ปัดให้ Panel อื่นๆ ลดขนาดจนชิดขอบด้านซ้ายหรือด้านขวา</li></ul><p>และสุดท้าย ถ้ามีการแก้ไขไฟล์อยู่พร้อมกันหลายไฟล์ (สังเกตเครื่องหมาย [+] ด้านหลังชื่อไฟล์) ไม่จำเป็นต้องไล่บันทึกทีละ Panel ให้กดที่ :wa ที่ Panel ไหนก็ได้ จะสั่งให้ Vim บันทึกทุกๆ ไฟล์ที่มีการแก้ไขอยู่ใน Buffer ทั้งหมด</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=f46a61b2a1ad" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/vim-multi-buffers-f46a61b2a1ad">Vim: Multi-Buffers</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Docker: Multi-stage builds #1]]></title>
            <link>https://medium.com/sitdh/docker-multi-stage-builds-1-cd04b641040a?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/cd04b641040a</guid>
            <category><![CDATA[docker]]></category>
            <category><![CDATA[microservices]]></category>
            <category><![CDATA[angular]]></category>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Sat, 05 May 2018 10:24:29 GMT</pubDate>
            <atom:updated>2018-05-05T10:44:33.417Z</atom:updated>
            <cc:license>http://creativecommons.org/licenses/by/4.0/</cc:license>
            <content:encoded><![CDATA[<h4>Docker play around</h4><p>เรื่องหนึ่งที่คนใช้ Docker มักจะพลาดกันคือขนาดของ Container ที่เผลอลง Software อื่นๆ เพิ่มเข้าไปหลาย Layer มากเกินไป ยกตัวอย่างเช่น เว็บไซต์ที่ใช้ NPM จัดการ package อาจจะแยก nginx ออกไปเป็น Container ต่างหากก็จริง แต่ก็มักจะติดตั้ง NPM ใน Container ของ App เพื่อติดตั้ง Package อื่นๆ ในไฟล์ package.json ซึ่ง NPM ก็จะมาทั้ง Cache และ Package ที่ติดตั้ง ทำให้ขนาดของ Container นั้นเพิ่มขึ้นโดยใช่เหตุ หรือแม้กระทั้งงานอื่นๆ ที่เราจำเป็นจะต้องติดตั้งซอฟต์แวร์อื่นๆ เพียงเพื่อต้องการผลลัพธ์ของการประมวลจากซอฟต์แวร์นั้นเท่านั้น ดังนั้น เพื่อให้ขนาดของ Container สุดท้ายที่จะใช้งานนั้นมีขนาดเล็กลง การใช้ Multi-stage builds จะช่วยได้มากขึ้น</p><p>คำจำกัดความของ Multi-stage builds สั้น (เท่าที่ใช้งานมา) ก็คือ เราจะสร้างสภาพแวดล้อมของการทำงานก่อนหน้าขึ้นมาก่อน สั่งประมวลผลแล้วนำผลลัพธ์ที่ได้มาใช้งานใน image สุดท้ายที่จะใช้งาน โดย image ก่อนหน้าที่สร้างขึ้นก็จะไม่ถูกนำมารวมใน image สุดท้ายที่จะนำไปใช้งาน เพื่อให้เห็นภาพชัดเจนยิ่งขึ้นจะขอยกตัวอย่างพัฒนาเว็บไซต์ด้วย Angular ที่ใช้ NPM ในการจัดการ Package</p><h4><strong>สิ่งที่จำเป็น</strong></h4><ul><li>Docker</li><li>Angular CLI</li></ul><h4><strong>สร้างโปรเจค Angular</strong></h4><p>สร้างโปรเจคด้วยคำสั่ง</p><pre>$ ng new my-angular-project</pre><p>เมื่อเสร็จแล้วให้เข้าไปยังโฟลเดอร์ด้วยคำสั่ง cd แล้วลองทดสอบการทำงานด้วยคำสั่ง ng serve</p><pre>$ cd my-angular-projecct &amp;&amp; ng serve</pre><p>หากไม่มีข้อผิดพลาด จะเห็นหน้าเว็บไซต์ด้านล่างด้วยการเข้าไปยัง <a href="http://localhost:4200/">http://localhost:4200</a></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*taBJfcEeh5f33qNF7sDfvw.png" /><figcaption>Welcome to Angular app</figcaption></figure><p>ให้กด Ctrl-C เพื่อยกเลิกการทำงานของคำสั่งข้างต้นก่อน</p><h4>เตรียมไฟล์กำหนดค่าของ NGINX</h4><p>ในโฟลเดอร์เดียวกันกับเว็บไซต์ ให้สร้างไฟล์สำหรับกำหนดค่าให้ NGINX ในที่นี้จะใช้ชื่อว่า nginx-custom.conf (ชื่ออื่นก็ได้เพราะไม่มีผล) โดยในไฟล์นั้นจะมีการกำหนดค่าต่างๆ ดังนี้</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/dbeeff49adff8d79919ad2a85b1de0dc/href">https://medium.com/media/dbeeff49adff8d79919ad2a85b1de0dc/href</a></iframe><p>โดยไฟล์นี้จะกำหนดให้รอรับ request จากพอร์ต 80 (บรรทัดที่ 2) มี DocumentRoot อยู่ที่ <em>/usr/share/nginx/html</em> (บรรทัดที่ 3) ให้เรียกไฟล์ index.html หรือ index.htm เป็นไฟล์แรก ในกรณีที่ไม่ระบุชื่อไฟล์ (บรรทัดที่ 4) และบอกให้ NGINX พยายามจับคู่ URI ที่เรียกเข้ามา แต่ถ้าไม่พบให้ส่งคือเป็นสถานะ 404 กลับไป</p><h4>สร้าง Image</h4><p>ตอนนี้อยู่ในโฟลเดอร์ของเว็บไซต์ที่สร้างขึ้นก่อนหน้านี้จากนั้นให้สร้างไฟล์ <em>.dockerignore</em> เพื่อบอกให้ Docker ไม่ต้องไปสนใจกับไฟล์ที่อยู่ในรายการ (จะเหมือนกับ <em>.gitignore</em>) ซึ่งในที่นี้ เราจะไม่สนใจ node_modules ซึ่งเป็นโฟลเดอร์ที่เกิดจากการติดตั้ง Package ผ่าน npm</p><pre># .dockerignore<br>node_modules/</pre><p>จากนั้นสร้าง Dockerfile โดยด้านในจะมีรายละเอียดดังไฟล์ด้านล่าง</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/a516fcb8ec09a8aa38d327f75b7ff462/href">https://medium.com/media/a516fcb8ec09a8aa38d327f75b7ff462/href</a></iframe><p>จาก Dockerfile ด้านบน จะเห็นได้ว่ามี Instruction <strong><em>FROM</em></strong> อยู่ 2 ที่ด้วยกัน โดย FROM ด้านบนสุด (stage ที่ 1 และกำหนดชื่อของ stage นี้ว่า builder) จะทำหน้าที่ดาวน์โหลด Package และ Compile โปรเจคให้พร้อมใช้งาน และเก็บไว้ภายในโฟลเดอร์ชื่อ app ส่วน FROM ถัดมา (Stage 2) จะสร้างจาก NGINX โดย Copy โค้ดที่ Compile เรียบร้อยแล้วจาก Stage 1 (/app/dist) มาเก็บไว้ที่ DocumentRoot (อ้างถึงโดยใช้ — from=builder ในบรรทัดที่ 9) บันทึกไฟล์ จากนั้นสร้าง Image ด้วยคำสั่ง</p><pre>$ docker build -t my-angular:prod .</pre><p>พอ Docker ทำงานเสร็จแล้วจะได้ Image ชื่อ my-angular ตรวจสอบด้วยการใช้คำสั่ง</p><pre>$ docker images</pre><p>จะได้ผลลัพธ์ดังรูปด้านล่าง</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XwLrKTnrAkmPqDoeJBu70A.png" /><figcaption>My Angular’s image</figcaption></figure><p>จะมี Image ชื่อ my-angular ขึ้นมา ด้วยขนาด 109MB และลองสังเกตในรูปบรรทัดสุดท้ายนะครับ จาก Dockerfile ข้างต้น เราใช้ Node เวอร์ชัน 9 หากเราติดตั้ง node เข้ามาใน Image สุดท้ายอีก 1 Layer ด้วย Image เราจะมีขนาดเกือบๆ 800MB (Node 9 = 673MB, my-angular = 109MB)</p><h4>เรียกใช้งาน</h4><p>ตอนนี้เราได้ Image ที่มี application ของเราเรียบร้อยแล้ว ถัดไปให้ลองเรียกใช้งานดูด้วยคำสั่ง</p><pre>$ docker run -p 80:80 my-angular:prod</pre><p>ซึ่งจะบอก Docker ว่า ให้เอา image ชื่อ <strong>my-angular</strong> ที่ติดแท็ก <strong>prod</strong> มาทำงาน (<strong>run</strong>) โดยใช้พอร์ต 80 ของเครื่อง โยงไปยังพอร์ต 80 ของ Container (<strong>[พอร์ตเครื่อง]:[พอร์ต Container]</strong>) พอใช้คำสั่งนี้แล้วจะไม่มีอะไรขึ้นมาบน Terminal นะครับ แต่ให้ลองเรียกเว็บไซต์ที่ <a href="http://localhost/">http://localhost</a> ดู จะเห็นข้อความขึ้นมาบน Terminal แบบรูปด้านล่าง และได้ผลลัพธ์ที่แสดงบนเบราว์เซอร์แบบการเรียกผ่าน <a href="http://localhost:4200/">http://localhost:4200</a> ก่อนหน้านี้</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GnTGQacS4pqpIxmR7CNUcQ.png" /><figcaption>Hello, World</figcaption></figure><h4>สรุป</h4><p>การใช้งาน Multi-stage builds ของ Docker นั้นช่วยลดขนาดของ Docker Container แถมยังช่วยลดการเพิ่ม Layer อื่นๆ ที่ไม่จำเป็นสำหรับการใช้งานใน Container ได้มากขึ้น แต่ในนี้พูดถึงเพียงแค่การ Image ต่อไปจะพูดถึงการนำไปใช้งานร่วมกันกับ Container อื่นๆ ผ่าน Docker Compose ครับ source code ดูได้จากลิงก์ด้านล่างครับ</p><p><a href="https://github.com/sitdh/docker-angular">sitdh/docker-angular</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=cd04b641040a" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/docker-multi-stage-builds-1-cd04b641040a">Docker: Multi-stage builds #1</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Goodbye 2017]]></title>
            <link>https://medium.com/sitdh/goodbye-2017-5d7f1b9ff0c7?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/5d7f1b9ff0c7</guid>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Tue, 02 Jan 2018 05:11:45 GMT</pubDate>
            <atom:updated>2018-01-02T05:11:45.407Z</atom:updated>
            <content:encoded><![CDATA[<h4>Annual Review</h4><ul><li><strong>เรียน</strong>: ยังไม่จบสักที ทำตัวเรื่อยเฉื่อยมากไปหน่อย งานไม่เดิน ต้องพยายามและตั้งใจมากกว่านี้หลายเท่าตัว เพื่อให้จบช่วงมีนาคมนี้ให้ได้ (ช้าสุดคือ พฤษภาคม)</li><li><strong>การลงทุน</strong>: ไม่ได้เข้าไปดูนานมาก จนทำให้ Steaming Pro ล็อคไป พึ่งอ่านเมลสรุปบัญชี แล้วพบว่ามาร์เปลี่ยนคนแล้ว</li><li><strong>การเงิน</strong>: ใช้เงินเกินตัวไปหลายเรื่อง วางแผนไม่ดี</li><li><strong>การเดินทาง</strong>: ปีที่แล้วขึ้นรถเมล์เยอะมาก แถมได้นั่งสายที่ไม่เคยนั่งไปสอนพิเศษมากขึ้น</li><li><strong>สุขภาพ</strong>: มารู้ตัวอีกทีตอนที่น้ำหนักขึ้นไปเยอะมาก 105kg แล้วตอนนี้ ขึ้นจากเดิมมา 20kg (ก่อนหน้าคือ 85kg) อย่างหนึ่งก็เพราะเอาเครื่องชั่งมาให้ที่บ้านใช้ แต่เขาไม่ค่อยใช้กัน เลยจะเอากลับแล้ว อยากลดน้ำหนักสัก 40kg ภายในปีนี้ เป็นหวัดบ่อยไปหน่อย อากาศเปลี่ยนแล้วหวัดมาเยี่ยมทันที แถมออกกำลังกายลดลงมาก</li></ul><p><strong>อื่นๆ</strong></p><ul><li>เขียนบล็อกน้อยลงไปเยอะ อยากเขียนให้ได้อย่างน้อยสัปดาห์ละ 1 บล็อก</li><li>อ่านหนังสือไม่เป็นไปตามเป้า 50 เล่ม อ่านจริงไปแค่ 41 เล่ม</li><li>ไม่ได้วิ่งสักทีทั้งๆ ที่เตรียมรองเท้าไว้แล้ว แต่พอเอาเข้าจริงๆ ก็ลืมพื้นรองเท้าไว้ที่อื่น</li><li>อ่าน Paper กับ Journal น้อยลงไปเยอะเหมือนกัน แถมรู้สึกว่าตัวเองขี้เกียจขึ้นด้วย</li></ul><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=5d7f1b9ff0c7" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/goodbye-2017-5d7f1b9ff0c7">Goodbye 2017</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[2018]]></title>
            <link>https://medium.com/sitdh/2018-4baa44fb4215?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/4baa44fb4215</guid>
            <category><![CDATA[annual-goal]]></category>
            <category><![CDATA[2018]]></category>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Mon, 01 Jan 2018 04:36:42 GMT</pubDate>
            <atom:updated>2018-01-01T04:36:42.512Z</atom:updated>
            <cc:license>http://creativecommons.org/licenses/by/4.0/</cc:license>
            <content:encoded><![CDATA[<h4>Annual Goal</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/300/1*j4V7Ya8jr1BwDle08McW2A.jpeg" /></figure><ul><li>ทวนภาษาอังกฤษ เตรียมสอบ TOEFL (TOEIC -&gt; CU-TEP -&gt; TOEFL) <br>Practise on English for TOEFL Test (TOEIC -&gt; CU-TEP -&gt; TOEFL)</li><li>เขียนบล็อกภาษาอังกฤษมากขึ้น<br>Blogging in English as much as I can</li><li>เรียนภาษาเขียนโปรแกรมเพิ่ม หลังจากที่ไม่ได้เรียนมานาน (React, React-Native, R, Angular)<br>Learn new Programming Languages after doesn’t learn for long time (React, React-Native, R, Angular)</li><li>ลงวิ่งมินิฮาร์ฟมาราธอนสักรายการช่วงสิ้นปี<br>Try 10K mini-half marathon</li><li>หาช่องทางเพิ่มรายได้ <br>More incomes</li></ul><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=4baa44fb4215" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/2018-4baa44fb4215">2018</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[[Bookshelf] หนังสือจิตวิทยา]]></title>
            <link>https://medium.com/sitdh/bookshelf-%E0%B8%AB%E0%B8%99%E0%B8%B1%E0%B8%87%E0%B8%AA%E0%B8%B7%E0%B8%AD%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2-126571d83f11?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/126571d83f11</guid>
            <category><![CDATA[psychology]]></category>
            <category><![CDATA[books]]></category>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Wed, 15 Nov 2017 09:12:31 GMT</pubDate>
            <atom:updated>2020-02-14T02:14:03.765Z</atom:updated>
            <cc:license>http://creativecommons.org/licenses/by/4.0/</cc:license>
            <content:encoded><![CDATA[<h4>รายการหนังสือจิตวิทยาที่ชอบ</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_K2iB1XiApI95JEfqgjCBg.jpeg" /><figcaption>Photo by <a href="https://www.pexels.com/photo/books-indoors-pages-paper-45717/">Dom J</a></figcaption></figure><p>จากคนที่ไม่เคยชอบหนังสือจิตวิทยา เริ่มอ่านเล่มแรกแบบไม่ทันตั้งตัวว่ามันคือหนังสือจิตวิทยา พอรู้ตัวก็อยากอ่านหนังสือที่เขาแนะนำไปแล้ว เลยอยากเอาหนังสือที่อ่านแล้วมาแนะนำกัน ไม่ได้ไล่ตามลำดับที่ได้อ่านนะครับ แต่ไล่จากระดับของเนื้อหาที่ควรจะอ่าน</p><h4>จิตวิทยา: ความรู้ฉบับพกพา</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/360/1*Fv4K2Swv6i73PvloQklSSA.png" /><figcaption>จิตวิทยา: ความรู้ฉบับพกพา</figcaption></figure><p>หนึ่งในหนังสือชุดความรู้ฉบับพกพา แปลมาจาก <em>“Psychology: A Very Short Description”</em> เป็นหนังสือที่ปูพื้นฐานความรู้เกี่ยวกับจิตวิทยา เล่มไม่ใหญ่มาก แต่เนื้อหาอัดแน่นมาก ในเล่มยกตัวอย่างที่น่าสนใจไว้เยอะดีครับ ทำให้รู้ว่า เด็กทารกไม่ได้ไร้เดียงสาอย่างที่เราคิด เขาใจอุบายได้ตั้งแต่ยังพูดไม่ได้เลยครับ</p><p>เล่มนี้แนะนำมากสำหรับคนที่กำลังจะเริ่มอื่นหนังสือแนวจิตวิทยา เพราะช่วยให้อ่านหนังสือจิตวิทยาเล่มถัดๆ ไปได้อย่างราบลื่นมายิ่งขึ้นครับ</p><h4>กล้าที่จะถูกเกลียด</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/831/1*SLvCY3spddHJEt4MdsDsSQ.png" /><figcaption>กล้าที่จะถูกเกลียด</figcaption></figure><p>หลายครั้งที่เคยแนะนำหนังสือเล่มนี้ให้กับคนรู้จัก เพราะส่วนตัวแล้วคิดว่ามันเป็นหนังสือเปลี่ยนชีวิตอีกเล่มหนึ่งที่เคยอ่าน เพราะหลังจากจบคืนที่ 5 แล้ว เราจะไม่ใช่คนเดิมอีกต่อไป หนังสือดำเนินเรื่องในลักษณะของบทสนทนาระหว่าง “ชายหนุ่ม” และ “นักปรัชญา” นัยว่าผู้อ่านคือ “ชายหนุ่ม” ได้มานั่งพูดคุยกับ Adler — นักปรัชญา — หลายวรรคอ่านแล้วทำให้ทึ่งไปหลายครั้ง เหมือนกับว่าที่เราจมปลักอยู่กับความเจ็บปวด หรือเรื่องแย่ๆ ที่แม้แต่เราเองก็ไม่ชอบนั้น เพราะเราเลือกที่จะทำเอง ไม่กล้าที่จะทำหลายเรื่องที่อยากทำเพราะเอาความคิดของคนอื่นมากำหนดชีวิตของตัวเอง เพียงแค่เรากล้าที่จะถูกคนรอบข้างเกลียด ชีวิตเราจะมีความสุขมากยิ่งขึ้น</p><blockquote>หลังจากจบคืนที่ 5 แล้ว เราจะไม่ใช่คนเดิมอีกต่อไป</blockquote><p>หนังสือนี้ไม่ได้บอกว่าเราต้องทำให้คนอื่นเกลียดชังเรานะครับ ไม่ใช่ว่าอยากทำอะไรก็ทำ แต่หนังสือเล่มนี้บอกว่าเราไม่ใช่จุดศูนย์กลางของโลก ไม่มีใครคาดหวังอะไรจากเรามากอย่างที่เราคิดเลย เราอาจจะกำลังเป็นทุกข์เพราะกลัวว่าคนอื่นจะมองเราไม่ดี ทั้งๆ ที่คนๆ นั้นที่เราคิดแทนเขานั้นกลับไม่ได้ได้สนใจพฤติกรรมของเรามากขนาดนั้น</p><blockquote>ทำไมเราไปดูหนัง กินบุฟเฟต์ หรือถีบเรือเป็ดคนเดียวไม่ได้</blockquote><p>ทำไมเราไปดูหนัง กินบุฟเฟต์ หรือถีบเรือเป็ดคนเดียวไม่ได้ เพราะเรากลัวว่าคนอื่นจะมองเหรอครับ เปล่าเลย ไม่มีใครสนใจเรามากขนาดนั้นครับ</p><h4>อะไรไม่จำเป็นก็ทิ้งไป</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/360/1*nnM5zSdvMkojNSx1QcbFxA.png" /><figcaption>อะไรไม่จำเป็นก็ทิ้งไป</figcaption></figure><p>เป็นหนังสือจัดแนวจัดห้องเล่มล่าสุดที่ซื้อมาอ่าน ไม่รู้ทำไมเหมือนกัน แค่เปิดบทก็ทำเอาทึ่งครับ (จากรูปด้านล่าง) คุณฟุมิโอะ พูดว่าตัวเองนั้นเคยเป็นพวกที่เก็บของในห้องเยอะมาก ทั้งแผ่นซีดี การ์ตูน หนังสือ และของอีกหลายอย่าง หลายอย่างซื้อมาเพราะอยากให้คนอื่นรู้ว่าเรามีรสนิยมอย่างไร เราเองก็ไม่ได้ตั้งใจแบบนั้นหรอกครับ พอหนักเข้าก็ไม่รู้ว่าจะจัดการกับของเหล่านั้นอย่างไร หลายอย่างเราไม่กล้าทิ้งเพราะกลัวคนให้เขาจะเสียใจ เช่น ของขวัญที่ได้จากเพื่อนรัก จดหมาย รูปถ่ายกับเพื่อนสมัยมัธยม ทั้งที่จริงแล้ว ของเหล่านั้นได้สิ้นสุดหน้าที่ของตัวเองไปตั้งแต่เรารับมาแล้ว คนให้และเราต่างมีความสุขในขณะที่เรารับมา การทิ้งไปจึงไม่ใช่การทำร้ายจิตใจของเพื่อนเลย แต่ถ้าเรายังอาลัยต่อสิ่งของเหล่านั้นก็ให้ถ่ายรูปเอาไว้</p><p>หลังอ่านเล่มนี้เสร็จ (เล่มนี้อ่านหลังจาก <em>“ชีวิตดีขึ้นทุกๆ ด้าน ด้วยการจัดบ้านแค่ครั้งเดียว”</em>) มองของในห้องแล้วจัดการเอาออกไปทิ้งมากกว่า 70% ครับ เสื้อผ้า หนังสือ ของขวัญ หลายอย่างหายวับไปกับตา หลายอย่างที่ซื้อมาด้วยความคิดที่ว่าน่าจะได้ใช้ แต่ไม่เคยแกะพลาสติกเลยตั้งแต่ซื้อมา</p><p>เล่มนี้ช่วยเรื่องจัดระเบียงความคิดดีมากครับ</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wxgp2_m-FPyJKuMikPXAbg.png" /><figcaption>Maximalist to Minimalist from ‘<a href="http://amzn.to/2iiPfZz">Goodbye, Things: The New Japanese Minimalism</a>’</figcaption></figure><h4>ชีวิตดีขึ้นทุกๆ ด้าน ด้วยการจัดบ้านแค่ครั้งเดียว</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*wkJEyN2E-uXPgLzUchklSg.png" /><figcaption>ชีวิตดึขึ้นทุกๆ ด้าน ด้วยการจัดบ้านแค่ครั้งเดียว</figcaption></figure><p>เป็นหนังสือเล่มแรกที่อ่านในหมวดจิตวิทยาครับ แต่ตอนนั้นไม่ได้เอะใจเลยว่าเป็นหนังสือแนวนี้ เรื่องของเรื่องคืออยากจัดห้องใหม่ เดินไปเลยสอยมาอ่าน เล่มนี้ไม่มีเทคนิคการจัดห้องเชิงพับเสื้อผ้า ทำของกระจุกกระจิกมาช่วยเก็บของให้เป็นระเบียบ แต่เป็นการจัดระบบความคิดของเรามากกว่า นอกจากจะใช้กับเรื่องจัดห้องแล้วก็สามารถนำมาปรับใช้ในชีวิตประจำวันของเราอีกด้วยครับ</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=126571d83f11" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/bookshelf-%E0%B8%AB%E0%B8%99%E0%B8%B1%E0%B8%87%E0%B8%AA%E0%B8%B7%E0%B8%AD%E0%B8%88%E0%B8%B4%E0%B8%95%E0%B8%A7%E0%B8%B4%E0%B8%97%E0%B8%A2%E0%B8%B2-126571d83f11">[Bookshelf] หนังสือจิตวิทยา</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[[Book log] อยู่อย่างไรให้สมองไม่แก่]]></title>
            <link>https://medium.com/sitdh/book-log-%E0%B8%AD%E0%B8%A2%E0%B8%B9%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%AA%E0%B8%A1%E0%B8%AD%E0%B8%87%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B9%81%E0%B8%81%E0%B9%88-8d36479b7e72?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/8d36479b7e72</guid>
            <category><![CDATA[book-review]]></category>
            <category><![CDATA[book-recommendations]]></category>
            <category><![CDATA[brain-training]]></category>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Sat, 28 Oct 2017 18:12:58 GMT</pubDate>
            <atom:updated>2017-10-28T18:12:58.272Z</atom:updated>
            <cc:license>http://creativecommons.org/licenses/by/4.0/</cc:license>
            <content:encoded><![CDATA[<h4>ภาพรวมหนังสือและสิ่งที่ได้</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aeb7PGgrwUqyAk3GzSvWIg.jpeg" /><figcaption>อยู่อย่างไรให้สมองไม่แก่</figcaption></figure><p>ชอบหนังสือเล่มนี้หลายส่วนครับ ผู้เขียนเป็นแพทย์เฉพาะทางด้านสมอง เลยทราบว่าโครงสร้างหนังสือควรจะเป็นแบบไหน หนังสือกำหนดโครงสร้าง 15 พฤติกรรมออกเป็น 3 ส่วน (อันนี้แบ่งเองนะครับ) คือ</p><ol><li><strong>ปรับรูปแบบการใช้ชีวิต</strong> ว่าเราควรจะมีพฤติกรรมอย่างไรบ้างเพื่อให้สมองเราได้มีพัฒนาการคงที่หรือเพิ่มขึ้น เช่น เราควรออกกำลังกายให้เลือดไหลเวียน วอร์มอัพสมองด้วยการออกกำลังกาย เดินให้เลือดไหลไปสู่สมองมากขึ้น (เป็นสาเหตุว่ามักจะคิดงานออกในช่วงที่เดิน) ทำงานจุกจิกเล็กน้อย นอนให้เร็ว หลายอย่างดูแล้วต้องเอามาปรับใช้จริงๆ ครับ คุณหมอรูปแบบการใช้ชีวิตแบบนี้ต้องค่อยๆ ปรับให้ชินจนเป็นนิสัย เราดื้อได้ แต่ไม่ใช่ว่าดื้อบ่อยจนเป็นนิสัย</li><li><strong>ฝึกพัฒนาการสมอง</strong> คุณหมอจะเน้นที่การพัฒนาสมองกลีบหน้ามากเป็นพิเศษ พัฒนาทั้งด้านความจำ การทำงาน การประมวลผลข้อมูลเพื่อสร้างความเชื่อมโยงของข้อมูลที่รับเข้ามา เช่น เราต้องท้าท้ายตัวเองอยู่เสอม กำหนดเส้นตายหรือกรอบการทำงานให้ตัวเองบ่อยๆ อย่างเช่น ต้องพูดหัวข้อ “xxx” ให้กับ “yyy” เข้าใจได้ภายในเวลา 15 นาที การทำแบบนี้จะช่วยให้เราจัดระเบียบความคิดเพื่อรีดเร้นเอาหัวข้อสำคัญและจำเป็นจริงๆ ที่คิดว่า “yyy” จะเข้าใจได้ในเวลาที่กำหนดนั้นออกมา ไม่พูดเยิ้นเย้อนอกเรื่อง หรือแม้กระทั่งการนอนที่จำเป็นมาก เพราะการนอนหลับนั้นจะทำให้สมองจัดระเบียบข้อมูลที่ได้รับมาทั้งวัน ให้ดีมากยิ่งขึ้น</li><li><strong>การดูแลรักษา</strong> อย่างหนึ่งที่คุณหมอพูดบ่อยมากคือการลดน้ำหนัก และความดันโลหิต ในแง่ของการบำรุงรักษาสมอง เพราะเมื่อความดันโลหิตสูงเท่าไหร่ สมองย่อมได้รับเลือดไปหล่อเลี้ยงลำบากมากยิ่งขึ้นเท่านั้น ทำให้ดูเฉื่อยชาหรือง่วงอยู่ตลอดเวลาทั้ง ๆ ที่พักผ่อนเพียงพอ</li></ol><p>ในส่วนท้าย คุณหมอได้พูดถึงเรื่องหนึ่งที่น่าสนใจมากครับ เพราะเป็นบ่อยๆ นั่นก็คือเรื่องของการลืมนั่นลืมนี่บ่อยๆ เรื่องนี้ไม่ได้มาจากความสะเพร่าอย่างเดียว แต่เป็นเพราะตอนที่ทำเรื่องนั้น เช่น วางกระเป๋าสตางค์ ขานรับเมื่อมีคนช่วยวานให้ทำงานให้ นั้นเราทำไปโดยอัตโนมัติ ข้อมูลนั้นไม่ผ่านเข้าสู่สมองการเรียกคืนความจำที่มีต่อเรื่องๆ นั้นจึงเป็นไปได้ยาก หรือไม่มีทางเป็นไปได้เลย วิธีการหนึ่งที่ช่วยได้คือการพูดออกเสียง เพราะการพูดออกเสียงนั้นช่วยเอาความคิดของเรามาเรียบเรียงเป็นคำเพื่อส่งไปแปลงเป็นคำพูด เพื่อพูดออกมา หูของเราจะได้ยินเสียง และส่งกลับมายังสมองอีกที ทั้งนี้การจดบันทึกด้วยมือยังเป็นใช้ได้เหมือนกันอีกด้วย นั่นเป็นสาเหตุที่ว่าทำไมเราจึงจำสิ่งที่เราเขียนได้มากกว่าสิ่งที่เราอ่านในใจ</p><p>โดยสรุปแล้ว หนังสือเล่มนี้เป็นเนื้อหาเบื้องต้นและข้อควรระวังสำหรับช่วยบริหารสมองให้มีพัฒนาการคงที่หรือไม่น้อยลงไปกว่าเดิม สนุกดีครับ</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=8d36479b7e72" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/book-log-%E0%B8%AD%E0%B8%A2%E0%B8%B9%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%AA%E0%B8%A1%E0%B8%AD%E0%B8%87%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B9%81%E0%B8%81%E0%B9%88-8d36479b7e72">[Book log] อยู่อย่างไรให้สมองไม่แก่</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[[Book Log] #1 อยู่อย่างไรให้สมองไม่แก่]]></title>
            <link>https://medium.com/sitdh/book-log-1-%E0%B8%AD%E0%B8%A2%E0%B8%B9%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%AA%E0%B8%A1%E0%B8%AD%E0%B8%87%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B9%81%E0%B8%81%E0%B9%88-afc4ea9a6ed?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/afc4ea9a6ed</guid>
            <category><![CDATA[logs]]></category>
            <category><![CDATA[books]]></category>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Wed, 18 Oct 2017 16:05:42 GMT</pubDate>
            <atom:updated>2017-10-18T16:05:41.904Z</atom:updated>
            <cc:license>http://creativecommons.org/licenses/by/4.0/</cc:license>
            <content:encoded><![CDATA[<h4>พฤติกรรมที่ 1–3: ปรับสมดุลย์ในชีวิต</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/720/1*pyTXmbymbXkdFUOqZ8DwiA.jpeg" /></figure><p>ซื้อหนังสือเล่มนี้เพราะว่าลองพลิกอ่านดูเล่นๆ แล้วชอบ ไม่ได้สนใจเรื่องที่บอกว่าเป็นหนังสือขายดีเท่าไหร่ อีกอย่างลดราคาอยู่ที่คิโนะคูนิยะด้วย ก่อนเริ่มอ่านก็ลองพลิกหน้าหลังสุดเพื่อดูประวัติผู้แต่ง พบว่าเป็นศัลยแพทย์ด้านสมองที่ญี่ปุ่น เป็นหนังสือเล่มที่สองที่หมอเป็นผู้แต่ง เล่มแรกที่อ่านคือ “<strong>เทคนิคไม่ให้ลืมที่จิตแพทย์อย่างบอกคุณ</strong>”</p><p>ตอนนี้อ่านถึงบทที่ 4 (หรือพฤติกรรมที่ 4) ซึ่งในเล่มจะแบ่งพฤติกรรมตามกลุ่มที่คุณหมอจัดไว้ โดยใน 3 พฤติกรรมแรกเป็นวิธีการปรับสมดุลย์การใช้ชีวิตของเรา สรุปได้ว่า</p><ul><li>เราต้องสร้างกิจวัตรประจำวันที่เป็นแบบแผน เช่น ตื่นมาแล้วต้องออกกำลังกายเล็กๆ น้อยๆ ไปเดินเล่นออกกำลังกาย แล้วจึงไปทำงาน แต่ควรปรับรายละเอียดหรือลำดับของกิจกรรมบ้างเพื่อไม่ให้คุ้นชินมากจนเกินไป</li><li>นอนดึกไม่เป็นไรแค่อย่าทำเป็นนิสัย แต่ควรตื่นแต่เช้าทุกวัน</li><li>เราควรนอนพักผ่อนให้เพียงพอ 6–7.5 ชั่วโมง เพราะในช่วงเวลาที่หลับนั้น ยังมีช่วงหนึ่งที่สมองยังคงประมวลผลข้อมูลที่ได้รับมาในวันนี้อยู่ แถมดีที่ว่าไม่มีข้อมูลจากประสาทสัมผัสอื่นมารบกวน จึงประมวลผลได้อย่างเต็มที่</li><li>สมองนั้นขี้เกียจเป็นทุนเดิม แต่จะมีช่วงหนึ่งของวันที่สมองทำงานได้มีประสิทธิภาพมากที่สุด ซึ่งแต่ละคนมีช่วงเวลาที่ว่านี้ไม่เหมือนกัน เรียนรู้ตัวเองแล้วเอางานสำคัญๆ มาไว้ในช่วงเวลาที่ว่า</li><li>การกำหนดเงื่อนไขการทำงานหรือเส้นตายให้กับการทำงาน จะช่วยเพิ่มประสิทธิภาพการทำงานให้ดีมากยิ่งขึ้น เพราะช่วยให้เราจัดลำดับก่อนหลังงานที่ต้องทำให้ดียิ่งขึ้นกว่าจะปล่อยให้ทำไปเรื่อยๆ</li><li>หอบงานมาทำที่บ้าน หรือทำงานล่วงเวลาบ่อยๆ ไม่ใช่เรื่องดี เพราะนั่นเหมือนเป็นการบอกตัวเองว่า งานนี้ไม่เสร็จก่อนห้าโมงเย็น เดี๋ยวเอากลับไปทำต่อที่บ้านก็ได้ งานที่ได้นั่นจะออกมาไม่ดีเท่าที่ควร</li><li>คนที่ทำงานดีไม่ใช่คนที่ทำงานทุกลมหายใจเข้าออก ทำงานทุกที่ทุกเวลา หากแต่เป็นคนที่จัดการกับงานในเวลาที่มีอย่างจำกัด (ในช่วงเวลางาน) ได้อย่างมีประสิทธิภาพ</li></ul><p>ยังเหลืออีก 11 พฤติกรรม ชักเริ่มติดใจหนังสือเล่มนี้แล้วครับ</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=afc4ea9a6ed" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/book-log-1-%E0%B8%AD%E0%B8%A2%E0%B8%B9%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%AA%E0%B8%A1%E0%B8%AD%E0%B8%87%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B9%81%E0%B8%81%E0%B9%88-afc4ea9a6ed">[Book Log] #1 อยู่อย่างไรให้สมองไม่แก่</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[.vimrc]]></title>
            <link>https://medium.com/sitdh/vimrc-d5b3c35abdc2?source=rss----47383d38a093---4</link>
            <guid isPermaLink="false">https://medium.com/p/d5b3c35abdc2</guid>
            <category><![CDATA[vim]]></category>
            <dc:creator><![CDATA[Sitdhibong]]></dc:creator>
            <pubDate>Thu, 27 Jul 2017 17:01:01 GMT</pubDate>
            <atom:updated>2017-07-27T17:01:00.895Z</atom:updated>
            <cc:license>http://creativecommons.org/licenses/by/4.0/</cc:license>
            <content:encoded><![CDATA[<h4>Vim config file</h4><p>ผมใช้ vim เป็น editor หลักมานานแล้วครับ เว้นเสียแต่ว่าจะเขียนภาษาเฉพาะทาง อย่างเช่น Objective-C, Swift, หรือ Java (ทั้งแบบปรกติ และ Java บน Android) ก็หนีไปใช้ IDE เฉพาะทาง พอใช้ไปนานเข้า แน่นอนครับว่าต้องมีการปรับแต่ง vim ให้เหมาะกับการใช้งานมากที่สุด ส่วนตัวผมไม่ค่อยชอบลง Plugin เยอะๆ เท่าไหร่นัก เน้นไปที่การปรับค่าที่ vim มีความสามารถอยู่แล้วดีกว่า ซึ่งก็ไม่ได้ปรับแต่งอะไรมากนักอยู่ดี ดังนั้นเพื่อให้ vim พร้อมใช้งานได้ทันทีที่ติดตั้ง หนทางที่ใช้แรงน้อยที่สุดคือ ผมเอาโฟลเดอร์ .vim ไปเก็บไว้บน github.com วิธีการจัดการคือ</p><ol><li>เก็บโฟลเดอร์ vim ไว้บน github.com</li><li>ปลั๊กอินที่จำเป็นจะติดตั้งเป็น module (git submodule)</li><li>เขียน Makefile เพื่อสร้างลิงก์ของไฟล์ .vimrc และดึง submodule มาติดตั้ง</li></ol><p>ดังนั้นเมื่อดึง repository ลงมาแล้ว ก็ใช้เพียงคำสั่งด้านล่าง เท่านี้ก็จะได้ vim ในสภาพแวดล้อมที่คุ้นเคย พร้อมใช้งานครับ</p><pre>$ make</pre><p><a href="https://github.com/sitdh/vim">sitdh/vim</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=d5b3c35abdc2" width="1" height="1" alt=""><hr><p><a href="https://medium.com/sitdh/vimrc-d5b3c35abdc2">.vimrc</a> was originally published in <a href="https://medium.com/sitdh">Sitdh[ibong]</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
    </channel>
</rss>