<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: hambalee</title>
    <description>The latest articles on Forem by hambalee (@hambalee).</description>
    <link>https://forem.com/hambalee</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F361727%2Ff66ad079-e785-498c-b918-ea5f5b701f81.jpeg</url>
      <title>Forem: hambalee</title>
      <link>https://forem.com/hambalee</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/hambalee"/>
    <language>en</language>
    <item>
      <title>OpenShift คืออะไร? จุดเด่นและประโยชน์ของ OpenShift มีอะไรบ้าง</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Fri, 15 Nov 2024 03:37:17 +0000</pubDate>
      <link>https://forem.com/hambalee/openshift-khuueaair-cchudednaelapraoychnkhng-openshift-miiaairbaang-1bmc</link>
      <guid>https://forem.com/hambalee/openshift-khuueaair-cchudednaelapraoychnkhng-openshift-miiaairbaang-1bmc</guid>
      <description>&lt;p&gt;OpenShift เป็นแพลตฟอร์มที่ช่วยให้เราสามารถจัดการและปรับใช้แอปพลิเคชันได้ง่ายขึ้นโดยใช้ Kubernetes ซึ่งเป็นระบบจัดการคอนเทนเนอร์ที่ได้รับความนิยม OpenShift ถูกพัฒนาโดย Red Hat เพื่อช่วยให้องค์กรสามารถพัฒนา ทดสอบ และปรับใช้แอปได้อย่างสะดวกและรวดเร็ว ไม่ว่าจะอยู่บนคลาวด์หรือระบบภายในองค์กร&lt;/p&gt;

&lt;h3&gt;
  
  
  จุดเด่นของ OpenShift
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;จัดการ Kubernetes ได้ง่ายขึ้น&lt;/strong&gt;: OpenShift เพิ่มเครื่องมือและฟีเจอร์ที่ทำให้การใช้ Kubernetes เป็นเรื่องง่ายขึ้น เหมาะสำหรับองค์กรที่ต้องการนำ Kubernetes มาใช้งานจริง&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;รองรับการทำงานแบบ DevOps&lt;/strong&gt;: OpenShift มาพร้อมเครื่องมือช่วยสร้าง pipeline ของ CI/CD ที่ช่วยให้กระบวนการพัฒนาและปล่อยแอปเป็นไปอย่างต่อเนื่อง อัตโนมัติ และปลอดภัยยิ่งขึ้น&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;รองรับหลายแพลตฟอร์ม&lt;/strong&gt;: สามารถใช้งานได้ทั้งบนคลาวด์ เช่น AWS, Azure, Google Cloud หรือระบบภายในองค์กร (On-premises) ทำให้ยืดหยุ่นและสามารถปรับใช้ตามความต้องการได้&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;ความปลอดภัยสูง&lt;/strong&gt;: OpenShift มีระบบรักษาความปลอดภัยในตัว ไม่ว่าจะเป็นการควบคุมการเข้าถึง (access control) หรือการจัดการความปลอดภัยของคอนเทนเนอร์&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;เป็น Open Source&lt;/strong&gt;: OpenShift เป็นซอฟต์แวร์โอเพนซอร์สที่ทุกคนสามารถเข้าถึงและปรับแต่งได้ ทำให้องค์กรสามารถปรับใช้ให้เหมาะสมกับความต้องการเฉพาะได้อย่างอิสระ&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  ประโยชน์ที่ได้จากการใช้ OpenShift
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;ช่วยให้การทำงานร่วมกันง่ายขึ้น&lt;/strong&gt;: ทั้งนักพัฒนาและทีม DevOps สามารถทำงานร่วมกันได้สะดวกมากขึ้น&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ลดเวลาในการปรับใช้แอป&lt;/strong&gt;: ทำให้การพัฒนาและปรับใช้แอปเกิดขึ้นได้อย่างรวดเร็วและมีประสิทธิภาพ&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ลดภาระในการดูแลโครงสร้างพื้นฐาน&lt;/strong&gt;: ช่วยลดความซับซ้อนในการจัดการโครงสร้างพื้นฐานของระบบ&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>openshift</category>
    </item>
    <item>
      <title>OpenSearch คืออะไร? ทำความรู้จัก OpenSearch บน Red Hat</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Fri, 15 Nov 2024 03:33:01 +0000</pubDate>
      <link>https://forem.com/hambalee/opensearch-khuueaair-thamkhwaamruucchak-opensearch-bn-red-hat-13pg</link>
      <guid>https://forem.com/hambalee/opensearch-khuueaair-thamkhwaamruucchak-opensearch-bn-red-hat-13pg</guid>
      <description>&lt;p&gt;OpenSearch ใน Red Hat คือโซลูชันที่เกี่ยวข้องกับการจัดการและการค้นหาข้อมูลขนาดใหญ่ในลักษณะโอเพนซอร์ส โดย OpenSearch นั้นเป็นโครงการที่แยกตัวออกมาจาก Elasticsearch (Elasticsearch fork) ที่พัฒนาโดย AWS เพื่อเป็นทางเลือกสำหรับการทำงานคล้ายคลึงกับ Elasticsearch และ Kibana&lt;/p&gt;

&lt;p&gt;ใน OpenSearch คุณจะได้รับการทำงานที่ครอบคลุมตั้งแต่การจัดเก็บ จัดการ ค้นหา และวิเคราะห์ข้อมูลขนาดใหญ่ โดยเน้นการใช้งานในระบบที่มีข้อมูลปริมาณมาก ซึ่ง OpenSearch นั้นรองรับทั้งการค้นหาข้อความ (Full-text Search) และการค้นหาข้อมูลเชิงโครงสร้าง (Structured Search) เช่นเดียวกับ Elasticsearch&lt;/p&gt;

&lt;h3&gt;
  
  
  การทำงานของ OpenSearch ใน Red Hat
&lt;/h3&gt;

&lt;p&gt;Red Hat สามารถใช้งาน OpenSearch ผ่านแพลตฟอร์มที่รองรับการใช้งานโซลูชันโอเพนซอร์สที่เชื่อถือได้ เช่น &lt;strong&gt;Red Hat OpenShift&lt;/strong&gt; ซึ่งเป็นแพลตฟอร์มการจัดการคอนเทนเนอร์ที่ช่วยให้สามารถติดตั้งและจัดการ OpenSearch ได้สะดวก นอกจากนี้ OpenShift ยังช่วยให้คุณสามารถใช้งาน OpenSearch ได้บนสภาพแวดล้อมคอนเทนเนอร์แบบ Kubernetes ซึ่งจะช่วยให้การปรับแต่ง ขยายขนาด และการทำงานร่วมกับแอปพลิเคชันอื่น ๆ ทำได้ง่ายขึ้น&lt;/p&gt;

&lt;h3&gt;
  
  
  ประโยชน์ของการใช้งาน OpenSearch บน Red Hat
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;ความยืดหยุ่น&lt;/strong&gt;: สามารถปรับแต่งให้รองรับการใช้งานได้ตามความต้องการขององค์กร&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ความปลอดภัย&lt;/strong&gt;: Red Hat มีโซลูชันที่เน้นความปลอดภัยเป็นหลัก ทำให้สามารถจัดการสิทธิ์การเข้าถึงและข้อมูลได้อย่างมีประสิทธิภาพ&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;การรองรับและการสนับสนุน&lt;/strong&gt;: หากใช้ผ่าน Red Hat จะมีการสนับสนุนเชิงพาณิชย์ที่มั่นคง&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;การรวมระบบ&lt;/strong&gt;: OpenShift สามารถผสานการทำงานร่วมกับ OpenSearch ได้ดี ช่วยให้ง่ายต่อการบริหารจัดการและบำรุงรักษา&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>opensearch</category>
    </item>
    <item>
      <title>Unveiling DevOps: Bridging the Gap Between Development and Operations</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Thu, 08 Feb 2024 17:55:41 +0000</pubDate>
      <link>https://forem.com/hambalee/unveiling-devops-bridging-the-gap-between-development-and-operations-37oj</link>
      <guid>https://forem.com/hambalee/unveiling-devops-bridging-the-gap-between-development-and-operations-37oj</guid>
      <description>&lt;p&gt;In the dynamic world of software development, the term "DevOps" emerges as a beacon of efficiency, collaboration, and high-quality software delivery. But what exactly is DevOps, and why has it become such a critical element in the IT and software development industries? Let's dive deep into understanding DevOps, its importance, and how it revolutionizes the way teams work together to create and maintain software.&lt;/p&gt;

&lt;p&gt;Understanding DevOps&lt;/p&gt;

&lt;p&gt;DevOps is a compound of "Development" and "Operations," representing a culture, set of practices, and tools that aim to enhance an organization's ability to deliver applications and services at high velocity. This approach fosters a collaborative environment where building, testing, and releasing software can happen rapidly, frequently, and more reliably.&lt;/p&gt;

&lt;p&gt;The Development Side&lt;br&gt;
On the development front, we have developers or software engineers whose primary role is to innovate and create software that meets user requirements. This involves a series of steps including requirement gathering, planning, coding, and maintenance. The ultimate goal is to produce high-quality software that is aligned with user needs and market demands.&lt;/p&gt;

&lt;p&gt;The Operations Angle&lt;br&gt;
Operations, on the other hand, involves roles such as system administrators and system engineers who ensure that the application remains stable and efficient post-deployment. This includes tasks like system upgrades, backups, and restoration. Their main objective is to guarantee the software's running stability and handle the infrastructure that supports it.&lt;/p&gt;

&lt;p&gt;Why DevOps?&lt;/p&gt;

&lt;p&gt;Before the advent of DevOps, a significant "wall of confusion" existed between the development and operations teams. This barrier led to silos, misunderstandings, and inefficiencies. DevOps aims to bridge this gap by promoting a culture of collaboration and shared responsibility. It ensures that developers and operations teams work together seamlessly from the inception of a project to its delivery.&lt;/p&gt;

&lt;p&gt;The Culture of DevOps&lt;br&gt;
At the heart of DevOps culture are collaboration, Infrastructure as Code (IaC), and Continuous Integration/Continuous Delivery (CI/CD). These practices ensure that the development and operations teams are not just working side by side but are integrated into a single, cohesive unit focused on delivering value to the end user.&lt;/p&gt;

&lt;p&gt;Collaboration&lt;/p&gt;

&lt;p&gt;DevOps emphasizes the importance of teamwork and communication. By breaking down the barriers between teams, DevOps encourages a more harmonious and productive work environment.&lt;/p&gt;

&lt;p&gt;Infrastructure as Code (IaC)&lt;/p&gt;

&lt;p&gt;IaC is a key practice in DevOps, allowing teams to manage their infrastructure through code. This approach leads to more efficient and reliable environments that can be updated with minimal risk.&lt;/p&gt;

&lt;p&gt;Continuous Integration and Continuous Delivery (CI/CD)&lt;/p&gt;

&lt;p&gt;CI/CD is a method of frequently delivering apps to customers by introducing automation into the stages of app development. The main concepts attributed to CI/CD are continuous integration, continuous delivery, and continuous deployment.&lt;/p&gt;

&lt;p&gt;DevOps Engineer: The Role&lt;br&gt;
A DevOps engineer is a professional who understands the software development lifecycle and possesses an arsenal of tools to resolve operational challenges. They are skilled in using tools for automating tasks and can seamlessly integrate various phases of development and deployment.&lt;/p&gt;

&lt;p&gt;The Evolution of DevOps&lt;/p&gt;

&lt;p&gt;As organizations close the gap between development and operations, the role of DevOps is evolving. From being a bridge to becoming an integral part of the team, DevOps is now about creating a culture where building, testing, and releasing software happens rapidly, reliably, and more efficiently.&lt;/p&gt;

&lt;p&gt;In conclusion, DevOps is not just a buzzword or a set of tools; it's a culture that changes how teams think about software development and delivery. By fostering collaboration between development and operations, DevOps enables faster deployment of features, more stable operating environments, and more time to innovate rather than fix or maintain. As we move forward, the principles of DevOps will continue to be a driving force in the journey towards more agile, responsive, and efficient software development processes.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://dev.to/hambalee/olkkhng-devops-phlikochmkaar-development-aela-operations-2c2"&gt;Translate from the original Thai version.&lt;/a&gt; &lt;/p&gt;

</description>
      <category>devops</category>
    </item>
    <item>
      <title>โลกของ DevOps: พลิกโฉมการ Development และ Operations</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Thu, 08 Feb 2024 17:54:48 +0000</pubDate>
      <link>https://forem.com/hambalee/olkkhng-devops-phlikochmkaar-development-aela-operations-2c2</link>
      <guid>https://forem.com/hambalee/olkkhng-devops-phlikochmkaar-development-aela-operations-2c2</guid>
      <description>&lt;p&gt;"DevOps" เป็นการผสานความสามารถในด้าน "Development" และ "Operations"  แต่ก่อนที่เราจะไปลึกกว่านี้  ไปเข้าใจกันก่อนว่าทั้งสองด้านนี้คืออะไรและทำไมถึงต้องมาผสมผสานกัน &lt;/p&gt;

&lt;p&gt;Development:&lt;/p&gt;

&lt;p&gt;เริ่มจากด้าน "Development" หรือที่เรารู้จักกันในฐานะ Developer หรือ Software Engineer  ความรับผิดชอบของพวกเขาคือการสร้าง Application หรือ Software ตามความต้องการของผู้ใช้  ซึ่งรวมถึงการวิเคราะห์ความต้องการ (Requirement), การวางแผน, การเขียนโค้ด (Coding), และการดูแลรักษาซอฟต์แวร์ (Maintain).&lt;/p&gt;

&lt;p&gt;Operations:&lt;/p&gt;

&lt;p&gt;ด้าน "Operations" มีตำแหน่ง System Administrator หรือ System Engineer ที่มีหน้าที่หลักในการให้แน่ใจว่า Application ทำงานได้อย่างเสถียร รวมถึงการอัปเกรด(Upgrade) สำรองข้อมูล(Backup) และคืนค่าข้อมูล (Restore)  พวกเขาคอยสร้างและดูแล Infrastruction รักษาความเสถียร อัปเกรดระบบและแก้ไขปัญหาต่างๆ&lt;/p&gt;

&lt;p&gt;ทำไม DevOps?&lt;/p&gt;

&lt;p&gt;ก่อน DevOps, มีสิ่งที่เรียกว่า "wall of confusion" ซึ่งคือกำแพงที่แยกด้าน Development และ Operations ออกจากกัน  DevOps ถูกสร้างขึ้นมาเพื่อ "ลดช่องว่าง" ระหว่างสองด้านนี้ ทำให้กระบวนการทำงานเป็นไปอย่างไหลลื่นและมีประสิทธิภาพมากขึ้น&lt;/p&gt;

&lt;p&gt;DevOps Culture: กุญแจสู่ความสำเร็จ&lt;br&gt;
วัฒนธรรม DevOps มุ่งเน้นที่การทำงานร่วมกัน(Collaboration)  Infrastructure as Code (IaC), และ Continuous Integration/Continuous Delivery (CI/CD) เป็นหัวใจหลัก&lt;br&gt;
การทำงานร่วมกันอย่างใกล้ชิดระหว่างทีม Development และ Operations เป็นสิ่งสำคัญที่สุด&lt;/p&gt;

&lt;p&gt;เครื่องมือของ DevOps Engineer&lt;br&gt;
DevOps Engineer ใช้เครื่องมือเช่น Terraform  Ansible สำหรับจัดการ Configurationและเครื่องมือ CI/CD เช่น Gitlab CI  Github Actions เพื่อช่วยให้กระบวนการ Development และ Operations เป็นไปอย่างราบรื่น&lt;/p&gt;

&lt;p&gt;การเปลี่ยนจาก DevOps ไปเป็น Platform Engineer &lt;br&gt;
เมื่อทุกคนสามารถทำงานร่วมกันได้อย่างมีประสิทธิภาพ สร้างผลลัพธ์ที่ดีขึ้นสำหรับทั้งทีมและผู้ใช้งาน DevOps Engineer ก็จะแปรเปลี่ยนไปเป็น Platform Engineer ซึ่งแสดงให้เห็นว่าการทำให้ช่องว่างระหว่างด้าน Development และ Operations หายไป&lt;/p&gt;

&lt;p&gt;ต่อไปนี้เมื่อคุณได้ยินคำว่า DevOps คุณจะรู้ว่ามันไม่เพียงแค่เกี่ยวข้องกับเทคโนโลยีหรือเครื่องมือ แต่มันคือวัฒนธรรมที่สร้างขึ้นเพื่อปรับปรุงและพัฒนาวิธีการทำงานให้ดียิ่งขึ้นในโลกของการ Development และ Operations.&lt;/p&gt;

&lt;p&gt;ถ้าหากสนใจเรื่อง DevOps Engineer และ Platform Engineer ไว้มีโอกาสจะมาเขียนเล่าอีกในครั้งถัดๆ ไป สามารถติดตามได้จะได้ไม่ให้พลาดข้อมูลความรู้ที่เป็นประโยชน์ในอาชีพและสามารถใช้ในการทำงานได้ต่อไป. Thankyou&lt;/p&gt;

</description>
      <category>devops</category>
    </item>
    <item>
      <title>Docker คืออะไร docker จำเป็นหรือไม่ docker มีประโยชน์อย่างไร</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Wed, 31 Jan 2024 03:08:05 +0000</pubDate>
      <link>https://forem.com/hambalee/docker-khuueaair-docker-cchamepnhruueaim-docker-miipraoychnyaangair-2fmj</link>
      <guid>https://forem.com/hambalee/docker-khuueaair-docker-cchamepnhruueaim-docker-miipraoychnyaangair-2fmj</guid>
      <description>&lt;p&gt;Docker เป็นเทคโนโลยีที่ช่วยให้สามารถรันแอปพลิเคชันหรือซอฟต์แวร์อื่นๆ ในคอนเทนเนอร์ (container) ซึ่งเป็นสภาพแวดล้อมการทำงานแบบแยกส่วนและอิสระจากสภาพแวดล้อมอื่นๆ บนระบบปฏิบัติการหลัก คอนเทนเนอร์จึงสามารถย้ายไปทำงานบนระบบปฏิบัติการใดๆ ก็ได้โดยไม่ต้องปรับแต่งอะไรเพิ่มเติม&lt;/p&gt;

&lt;p&gt;Docker มีประโยชน์มากมาย เช่น&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;ช่วยให้การ deploy แอปพลิเคชันทำได้ง่ายและรวดเร็วขึ้น เนื่องจากคอนเทนเนอร์สามารถย้ายไปทำงานบนระบบปฏิบัติการใดๆ ก็ได้โดยไม่ต้องปรับแต่งอะไรเพิ่มเติม&lt;br&gt;
ช่วยให้การบำรุงรักษาแอปพลิเคชันทำได้ง่ายขึ้น เนื่องจากคอนเทนเนอร์สามารถแยกส่วนออกจากสภาพแวดล้อมอื่นๆ บนระบบปฏิบัติการหลัก ทำให้สามารถอัปเดตหรือแก้ไขคอนเทนเนอร์ได้โดยที่ไม่กระทบกับแอปพลิเคชันอื่นๆ&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;ช่วยให้การใช้ทรัพยากรฮาร์ดแวร์มีประสิทธิภาพมากขึ้น เนื่องจากคอนเทนเนอร์สามารถแชร์ทรัพยากรฮาร์ดแวร์ร่วมกันได้&lt;br&gt;
ดังนั้น Docker จึงอาจจำเป็นสำหรับองค์กรหรือบริษัทที่พัฒนาหรือใช้งานแอปพลิเคชันที่ต้อง deploy บนระบบปฏิบัติการต่างๆ บ่อยๆ หรือต้องการบำรุงรักษาแอปพลิเคชันได้ง่ายขึ้น หรือต้องการใช้ทรัพยากรฮาร์ดแวร์อย่างมีประสิทธิภาพมากขึ้น&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;อย่างไรก็ตาม Docker ไม่ได้จำเป็นสำหรับทุกคน องค์กรหรือบริษัทขนาดเล็กที่พัฒนาหรือใช้งานแอปพลิเคชันบนระบบปฏิบัติการเพียงระบบเดียวอาจไม่จำเป็นต้องใช้ Docker เนื่องจากสามารถ deploy แอปพลิเคชันได้โดยการปรับแต่งสภาพแวดล้อมบนระบบปฏิบัติการหลักให้เหมาะสมกับแอปพลิเคชันนั้นๆ&lt;/p&gt;

&lt;p&gt;สรุปแล้ว Docker จำเป็นหรือไม่นั้นขึ้นอยู่กับความต้องการและความเหมาะสมของแต่ละองค์กรหรือบริษัท หากองค์กรหรือบริษัทมีความต้องการหรือข้อจำกัดดังที่กล่าวมาข้างต้น Docker อาจเป็นเทคโนโลยีที่มีประโยชน์และจำเป็นสำหรับองค์กรหรือบริษัทนั้นๆ&lt;/p&gt;

</description>
      <category>docker</category>
    </item>
    <item>
      <title>What's new in Playwright 1.38</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Sun, 24 Sep 2023 05:22:10 +0000</pubDate>
      <link>https://forem.com/hambalee/whats-new-in-playwright-138-586h</link>
      <guid>https://forem.com/hambalee/whats-new-in-playwright-138-586h</guid>
      <description>&lt;ul&gt;
&lt;li&gt;Evergreen browsers&lt;/li&gt;
&lt;li&gt;Bug fixes&lt;/li&gt;
&lt;li&gt;New features&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://playwright.dev/docs/intro#updating-playwright"&gt;Updating Playwright&lt;/a&gt;&lt;br&gt;
&lt;code&gt;npm install -D @playwright/test@latest&lt;/code&gt; &lt;br&gt;
&lt;code&gt;npx playwright --version&lt;/code&gt; &lt;/p&gt;
&lt;h2&gt;
  
  
  UI Mode Updates
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;npx playwright test --ui&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2tmcqxo8ru5p7ki1d18p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2tmcqxo8ru5p7ki1d18p.png" alt="releases v1.38.0 image UI Mode" width="800" height="469"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Zoom into time range.&lt;/li&gt;
&lt;li&gt;Network panel redesign.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/YGJTeXaZDTM"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/microsoft/playwright/releases/tag/v1.38.0"&gt;releases v1.38.0&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://docs.google.com/presentation/d/1f25YSouChc2-UsU_1-GYJY_KWmL2w3FG6qGAXBxltMw/edit#slide=id.g11f345ce5b9_0_1"&gt;Slides&lt;/a&gt;:&lt;br&gt;
&lt;/p&gt;
&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
      &lt;div class="c-embed__cover"&gt;
        &lt;a href="https://docs.google.com/presentation/d/1f25YSouChc2-UsU_1-GYJY_KWmL2w3FG6qGAXBxltMw/edit#slide=id.g11f345ce5b9_0_1" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"&gt;
          &lt;img alt="" src="https://res.cloudinary.com/practicaldev/image/fetch/s--UgOuD6LR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://lh7-us.googleusercontent.com/docs/AHkbwyLMsbO8aKmTlvm83im77EGZfvuJ1KVJiwq2CZkTjjJiDMBAZZ98nuuwdbTYHIaVfmxaBs-8HukBLoiuJt6VgV5AptnS3Q_HQ1RMX0GIAnGPcAE%3Dw1200-h630-p" height="420" class="m-0" width="800"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;div class="c-embed__body"&gt;
      &lt;h2 class="fs-xl lh-tight"&gt;
        &lt;a href="https://docs.google.com/presentation/d/1f25YSouChc2-UsU_1-GYJY_KWmL2w3FG6qGAXBxltMw/edit#slide=id.g11f345ce5b9_0_1" rel="noopener noreferrer" class="c-link"&gt;
          Playwright 1.38 - Google Slides
        &lt;/a&gt;
      &lt;/h2&gt;
      &lt;div class="color-secondary fs-s flex items-center"&gt;
          &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://res.cloudinary.com/practicaldev/image/fetch/s--LIKqDDXx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://ssl.gstatic.com/docs/presentations/images/favicon-2023q4.ico" width="256" height="256"&gt;
        docs.google.com
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>testing</category>
      <category>playwright</category>
      <category>webdev</category>
      <category>news</category>
    </item>
    <item>
      <title>Install Playwright and Visual Studio Code</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Mon, 11 Sep 2023 14:53:46 +0000</pubDate>
      <link>https://forem.com/hambalee/install-playwright-and-visual-studio-code-37ep</link>
      <guid>https://forem.com/hambalee/install-playwright-and-visual-studio-code-37ep</guid>
      <description>&lt;p&gt;Playwright is a tool that can automate tasks on the web. It works with multiple browsers, so you can use it to test your website or app on different browsers. It can also be used to scrape data from websites or monitor website performance.&lt;/p&gt;

&lt;p&gt;Visual Studio Code is a code editor that makes it easy to write code for Playwright. It has a lot of features that can help you write code more efficiently, such as syntax highlighting and code completion.&lt;/p&gt;

&lt;p&gt;Install JavaScript Runtime&lt;br&gt;
&lt;a href="https://nodejs.org/en"&gt;Node.js&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Install Visual Studio Code&lt;br&gt;
&lt;a href="https://code.visualstudio.com"&gt;https://code.visualstudio.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;mkdir playwright&lt;/code&gt; to create a new directory&lt;/p&gt;

&lt;p&gt;Installing Playwright&lt;br&gt;
&lt;a href="https://playwright.dev/"&gt;https://playwright.dev/&lt;/a&gt;&lt;br&gt;
&lt;code&gt;npm init playwright@latest&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Running the Example Test&lt;br&gt;
&lt;code&gt;npx playwright test&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;or run with UI mode&lt;br&gt;
&lt;code&gt;npx playwright test --ui&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;HTML Test Reports&lt;br&gt;
&lt;code&gt;npx playwright show-report&lt;/code&gt;&lt;/p&gt;

</description>
      <category>testing</category>
      <category>playwright</category>
      <category>vscode</category>
    </item>
    <item>
      <title>Regular Expression Example</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Tue, 19 Apr 2022 11:19:40 +0000</pubDate>
      <link>https://forem.com/hambalee/regular-expression-example-4pp3</link>
      <guid>https://forem.com/hambalee/regular-expression-example-4pp3</guid>
      <description>&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello World!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/Hello/&lt;/span&gt;
&lt;span class="nx"&gt;myRegex&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myStr&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myRegex2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/hello/&lt;/span&gt; 
&lt;span class="nx"&gt;myRegex2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myStr&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// false&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myRegex3&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/hello/i&lt;/span&gt; 
&lt;span class="nx"&gt;myRegex3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myStr&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;

&lt;span class="nx"&gt;myStr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myRegex&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// "Hello"&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myStr2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello World! hello&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myRegex4&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/Hello/ig&lt;/span&gt;
&lt;span class="nx"&gt;myStr2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myRegex4&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="c1"&gt;// ["Hello,"hello"]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Match Anything with Wildcard Period
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;humStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;I'll hum a song&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;hugStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Bear hug&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;huRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/hu./&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;huRegex&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;humStr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;span class="nx"&gt;huRegex&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;test&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;hugStr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Match Single Character with Multiple Possibilities
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bigStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;big&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bagStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bag&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bugStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bug&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bogStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bgRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/b&lt;/span&gt;&lt;span class="se"&gt;[&lt;/span&gt;&lt;span class="sr"&gt;aiu&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;g/&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;bigStr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bgRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// ["big"]&lt;/span&gt;
&lt;span class="nx"&gt;bagStr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bgRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// ["bag"]&lt;/span&gt;
&lt;span class="nx"&gt;bugStr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bgRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// ["buig"]&lt;/span&gt;
&lt;span class="nx"&gt;bogStr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bgRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// null&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;quoteSample&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Beware of bugs in the above code; I have only proved it correct, not tried it.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;vowelRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[&lt;/span&gt;&lt;span class="sr"&gt;aeiou&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;/ig&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;quoteSample&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;vowelRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;// [ 'e',  'a',  'e',  'o',  'u',  'i',  'e',  'a',  'o',  'e',  'o',  'e',  'I',  'a',  'e',  'o',  'o',  'e',  'i',  'o',  'e',  'o',  'i',  'e',  'i' ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Match Letters of the Alphabet
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;catStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;cat&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;batStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bat&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;matStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mat&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;bgRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[&lt;/span&gt;&lt;span class="sr"&gt;a-e&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;at/&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;catStr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bgRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//["cat"]&lt;/span&gt;
&lt;span class="nx"&gt;batStr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bgRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//["bat"]&lt;/span&gt;
&lt;span class="nx"&gt;matStr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;bgRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;//null&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;quoteSample&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;alphabetRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[&lt;/span&gt;&lt;span class="sr"&gt;a-z&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;/ig&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;quoteSample&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;alphabetRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;&lt;span class="c1"&gt;//[ 'T',  'h',  'e', ... ,'d', 'o',  'g' ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Match Numbers and Letters of the Alphabet
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;jennyStr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jenny8675309&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[&lt;/span&gt;&lt;span class="sr"&gt;a-z0-9&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;/ig&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;jennyStr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;quoteSample&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Blueberry 3.141592653s are delicious.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[&lt;/span&gt;&lt;span class="sr"&gt;h-s2-6&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;/ig&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;quoteSample&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Match Single Characters Not Specified
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;quoteSample&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;3 blind mice.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="se"&gt;[^&lt;/span&gt;&lt;span class="sr"&gt;aeiou0-9&lt;/span&gt;&lt;span class="se"&gt;]&lt;/span&gt;&lt;span class="sr"&gt;/ig&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;quoteSample&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Match Characters that Occur One or More Times
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;difficultSpelling&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Mississippi&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;myRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/s+/g&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;difficultSpelling&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="c1"&gt;//[ 'ss', 'ss' ]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Match Characters that Occur Zero or More Times
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;chewieQuote&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Aaaaaaaaaaaaaaaarrrgh!&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;chewieRegex&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sr"&gt;/Aa*/&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;chewieQuote&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;match&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;chewieRegex&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// ['Aaaaaaaaaaaaaaaa']&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>regex</category>
    </item>
    <item>
      <title>How to Run Bitcoin Full Node on Linux Ubuntu Virtual Machine with Umbrel</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Thu, 28 Oct 2021 12:13:19 +0000</pubDate>
      <link>https://forem.com/hambalee/how-to-run-bitcoin-full-node-on-linux-ubuntu-virtual-machine-with-umbrel-167d</link>
      <guid>https://forem.com/hambalee/how-to-run-bitcoin-full-node-on-linux-ubuntu-virtual-machine-with-umbrel-167d</guid>
      <description>&lt;p&gt;Download Ubuntu &lt;br&gt;
&lt;a href="https://ubuntu.com/download"&gt;https://ubuntu.com/download&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Download VM VirtualBox &lt;br&gt;
&lt;a href="https://www.virtualbox.org/"&gt;https://www.virtualbox.org/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;VirtualBox&lt;br&gt;
Machine &amp;gt; New...&lt;br&gt;
Name: Umbrel&lt;br&gt;
Type: Linux&lt;br&gt;
Version: Ubuntu (64-bit)&lt;br&gt;
Memory size: 4096 MB&lt;/p&gt;

&lt;p&gt;Virtual Hard Disk&lt;br&gt;
Minimum for Bitcoin Blockchain is 600 GB&lt;br&gt;
VDI, Dynamically allocated&lt;br&gt;
Create&lt;/p&gt;

&lt;p&gt;Setting &amp;gt; System&lt;br&gt;
Processor(s): 4 CPU&lt;br&gt;
Setting &amp;gt; Storage&lt;br&gt;
Optical Drive: choose a disk file...&lt;br&gt;
select ubuntu .iso file&lt;br&gt;
OK&lt;/p&gt;

&lt;p&gt;Start&lt;br&gt;
...&lt;br&gt;
After installed Ubuntu&lt;br&gt;
go to getumbrel.com&lt;/p&gt;
&lt;h1&gt;
  
  
  Install Docker Engine
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://docs.docker.com/engine/install/"&gt;https://docs.docker.com/engine/install/&lt;/a&gt;&lt;br&gt;
&lt;a href="https://docs.docker.com/engine/install/ubuntu/"&gt;https://docs.docker.com/engine/install/ubuntu/&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; sudo apt-get update
 sudo apt-get install \
    ca-certificates \
    curl \
    gnupg \
    lsb-release
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
  $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list &amp;gt; /dev/null
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt-get update
 sudo apt-get install docker-ce docker-ce-cli containerd.io
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Install Docker Compose
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://docs.docker.com/compose/install/"&gt;https://docs.docker.com/compose/install/&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; sudo chmod +x /usr/local/bin/docker-compose
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Install fswatch, jq, rsync, curl
&lt;/h1&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;sudo apt-get install fswatch jq rsync curl
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>umbrel</category>
      <category>ubuntu</category>
      <category>linux</category>
    </item>
    <item>
      <title>VSCode Keyboard Shortcut</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Thu, 23 Jul 2020 05:58:51 +0000</pubDate>
      <link>https://forem.com/hambalee/vscode-keyboard-shortcut-2ao3</link>
      <guid>https://forem.com/hambalee/vscode-keyboard-shortcut-2ao3</guid>
      <description>&lt;p&gt;&lt;code&gt;ctrl + d&lt;/code&gt; select word, select next word เลือกคำ&lt;br&gt;
&lt;code&gt;ctrl + l&lt;/code&gt; select line เลือกทั้งบรรทัด&lt;br&gt;
&lt;code&gt;ctrl + shift + [&lt;/code&gt; or &lt;code&gt;ctrl + shift + ]&lt;/code&gt; fold/unfold พับเก็บ&lt;/p&gt;

&lt;p&gt;&lt;a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf"&gt;https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=QkewBB_HOh4"&gt;https://www.youtube.com/watch?v=QkewBB_HOh4&lt;/a&gt;&lt;/p&gt;

</description>
      <category>vscode</category>
    </item>
    <item>
      <title>JavaScript ความแตกต่างระหว่าง Primitive Type และ Reference Type</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Thu, 09 Jul 2020 14:13:58 +0000</pubDate>
      <link>https://forem.com/hambalee/javascript-primitive-type-reference-type-485</link>
      <guid>https://forem.com/hambalee/javascript-primitive-type-reference-type-485</guid>
      <description>&lt;h1&gt;
  
  
  Primitive Type คืออะไร ?
&lt;/h1&gt;

&lt;p&gt;คือเมื่อสร้างตัวแปรใหม่โดยอ้างอิงจากตัวแปรเก่า ค่าที่ได้จะเป็นการคัดลอก&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;num1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;num2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;num1&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;num2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="c1"&gt;//จะได้ผลลัพธ์เป็น 1 ทั้งสองตัวแปร&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;แต่ถ้าเปลี่ยนเป็น&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;num1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;num2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;num1&lt;/span&gt;
&lt;span class="nx"&gt;num1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;
&lt;span class="nx"&gt;num2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="c1"&gt;//จะได้ผลลัพธ์เป็น 3&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;num2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="c1"&gt;//จะได้ผลลัพธ์เป็น 4&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;เพราะตัวแปรจะใช้ค่าของแต่ละตัวโดยไม่เกี่ยวข้องกันถึงแม้ num2 จะอ้างอิงมาจาก num1 ก็ตาม&lt;/p&gt;

&lt;h1&gt;
  
  
  Reference Type คืออะไร ?
&lt;/h1&gt;

&lt;p&gt;คือเป็นการสร้างตัวแปรแบบอ้างอิง โดยที่เมื่อตัวแปรไหนเปลี่ยนตัวแปรอื่นก็จะเปลี่ยนตามด้วย จะใช้กับทั้ง Array และ Object&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;person1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;person2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;person1&lt;/span&gt;
&lt;span class="nx"&gt;person2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;B&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="c1"&gt;//จะได้ผลลัพธ์เป็น B&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;ทั้ง person1 และ person2 จะใช้ค่าเดียวกัน&lt;/p&gt;

&lt;p&gt;ถ้าต้องการคัดลอกเฉพาะค่าใน Object ให้สามารถใช้งานแยกออกจากกันสามารถทำได้โดยใช้ Spread Operator&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;person1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;person2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;person1&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;person2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;B&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;person1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="c1"&gt;//จะได้ผลลัพธ์เป็น A&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>thai</category>
      <category>beginners</category>
    </item>
    <item>
      <title>JavaScript Destructuring คืออะไร</title>
      <dc:creator>hambalee</dc:creator>
      <pubDate>Sat, 04 Jul 2020 08:31:41 +0000</pubDate>
      <link>https://forem.com/hambalee/javascript-destructuring-182</link>
      <guid>https://forem.com/hambalee/javascript-destructuring-182</guid>
      <description>&lt;p&gt;Destructuring ในภาษา JavaScript เป็นการเขียนโค้ดแบบย่อสำหรับใช้กับ Array&lt;br&gt;
&lt;em&gt;(การใช้กับ Object ก็จะคล้าย ๆ กัน)&lt;/em&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;B]
//เขียนบรรทัดเดียว เปรียบเสมือนว่า
a = &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="nx"&gt;A&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;
b = &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="nx"&gt;B&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;อีกตัวอย่าง&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;num1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;num2&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="c1"&gt;//จะได้ num1 = 1 ส่วน num2 = 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;num1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nx"&gt;num3&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;num&lt;/span&gt; &lt;span class="c1"&gt;//จะได้ num1 = 1 ส่วน num3 = 3&lt;/span&gt;
&lt;span class="c1"&gt;//ค่า 2 จะไม่ถูกนำไปใช้เพราะ มีการเว้นไว้เพื่อข้ามไปตัวถัดไป&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>thai</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
