DEV Community: alternativeboy

มาเล่น Tailwind CSS กับ Angular กัน

alternativeboy — Tue, 22 Feb 2022 07:56:07 +0000

Tailwind CSS คืออะไรกันนะ Tailwind คือ Utility-First CSS Framework ตัวนึงที่จะช่วยทำให้เรา styling element ได้อย่างรวดเร็วโดยที่เราไม่ต้องไม่ต้องไปเขียนคลาสเอง

ข้อดี

เพื่อป้องกัน ชื่อ class ซ้ำกันกับ parent component เป็นสาเหตุที่ทำให้เกิด style collision
การ Styling ในโปรเจกต์ก็จะไปในทิศทางเดียวกัน
ขนาดของ Css ที่ compile ออกมามีขนาดที่เล็กมากๆ ( เดี๋ยวจะเขียนบทความเพิ่มเติมเกี่ยวกับการ optimization ของ Tailwind ว่าเล็กตามคำโฆษณาที่เค้าโม้ไว้รึเปล่า 😂)

หลังจากที่เกริ่นมาสักพักเรามาเริ่มติดตั้ง Tailwind ใน Angular กัน

การติดตั้ง

ติดตั้ง Angular CLI ด้วย npm หรือ yarn

// NPM
npm install -g @angular/cli

// Yarn
yarn add @angular/cli

สร้างโปรเจกต์ Angular

ng new angular-tailwind
cd angular-tailwind

ติดตั้ง Tailwind Css ใน project

// NPM
npm install -D tailwindcss postcss autoprefixer

// Yarn
yarn add tailwindcss

// สร้างไฟล์ Tailwind config
npx tailwindcss init

ไปตั้งค่าใน tailwind.config.js ( อยู่ระดับเดียวกับ package.json ) เพิ่ม "./src/*/.{html,ts}", ใน content

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

เพิ่ม Tailwind ไปใน style ของเรา ( ตรงนี้อาจจะแตกต่างกันถ้าหากเลือก style config ตอนสร้างโปรเจ็ค Angular )

1.1 เลือก Style แบบ CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

1.2 เลือก Style แบบ SCSS หรืออย่างอื่น

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Start build process

ng serve

ลองเล่น Tailwind CSS กัน ให้ลอง copy code ด้านล่างนี้ไปแปะใน app.html ดูว่าออกมาสวยงามไหมถ้าใช่ ขอแสดงความยินดีด้วย เราได้ติดตั้ง Tailwind CSS เรียบร้อยแล้ว แต่ถ้าไม่ Comment มาได้เลยเดี๋ยวมาดูกันว่าติดตรงไหน

แต่เดี๋ยวก่อนนอกจากข้อดีแล้ว ยังก็ยังมีข้อเสียอยู่นะ

ข้อเสีย

ถ้าเราทำงานเป็นทีม อาจจะต้องมีการสื่อสารที่ดีว่าจะเปลี่ยนจากการ styling element แบบที่เคยทำมาเป็นการใช้ Tailwind
ฝั่ง html ลายตามาก เพราะ styling ทุกอย่างเราเอามาใส่ในฝั่ง html ไม่ได้เขียนแยกเป็น style file ( css, scss หรืออื่นๆ )
อาจจะต้องใช้เวลาเรียนรู้นิดนึงว่า Design system ของ Tailwind นั้นเป็นยังไงเช่น Color, Spacing, Sizing, Typography และอีกมากมาย

สรุป

Tailwind CSS ถือว่าเป็นอีกทางเลือกนึงที่เราจะกำจัดปัญหาเรื่อง Style collision แล้วลดเวลาเรื่อง Design system แถมยังลดเวลาในการ styling element อีกด้วย

แถม

ติดตั้ง Extension เสริมเพื่อให้ใช้ Tailwind ได้ง่ายขึ้น

InteliJ จริงๆ ฝั่ง Jetbrain support อยู่แล้ว แต่ถ้าอยากอ่านละเอียดไปที่ ลิ้งค์ ได้เลย
VSCode ตามลิ้งค์นี้ได้เลย

ตามไปดู Code ได้ที่

Repository : Github

Let's play Tailwind CSS with Angular

alternativeboy — Tue, 22 Feb 2022 07:46:22 +0000

What is Tailwind CSS Tailwind CSS is a utility-first CSS framework packed with classes for quickly custom user interfaces without creating our classes.

Pros

Prevent classes name of parent and child components are duplicate leads to a style collision problem.
Make styling elements direction in a project the same way.
Compile size of a CSS file is smaller than traditional styling ( I will write the articles about optimization Tailwind later, I hope files size are smaller following their advertisement 😂).

After talking about Tailwind, Let's start to install Tailwind to our project!.

Installation

Install Angular CLI with npm or yarn.

// NPM
npm install -g @angular/cli

// Yarn
yarn add @angular/cli

Create Angular project.

ng new angular-tailwind
cd angular-tailwind

Add Tailwind CSS into our project.

// NPM
npm install -D tailwindcss postcss autoprefixer

// Yarn
yarn add tailwindcss

// Create file Tailwind config
npx tailwindcss init

Add some settings in tailwind.config.js ( same level as package.json ) add "./src/**/*.{html,ts}", in content

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind in our main style sheet ( It is different when you select style config when creating Angular project ).

1.1 Select Style as CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

1.2 Select Style as SCSS or else

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Start build process

ng serve

Let's try to apply Tailwind to our HTML code. If you can run the code and its beautiful display on the website congratulations!, you are finished adding Tailwind to the project. But f you are stuck adding Tailwind to our project please let me know in the comment.

However, Tailwind CSS still has CONS.

CONS

We need to have good communication among the team. Because we change the way to style elements.
The styles are mixed in HTML code makes it hard to understand.
Take time for learning about utility classes of Tailwind such as Color, Spacing, Sizing, Typography, and so on.

Conclusion

Tailwind CSS is an alternative way to styling elements and helps eliminate the styling collision problems also reduces time to create a design system and styling elements.

Bonus

Install extensions for used Tailwind efficiencies.

InteliJ The JetBrains already supported Tailwind CSS. If you want to read more, I provided this link
VSCode link

My code.

Repository : Github

If something's wrong, incomplete or you want to share the experience. Please let me know in the comment.
Thank you for taking the time to read this😘.

Var vs Const vs Let what is different ?

alternativeboy — Mon, 21 Feb 2022 06:25:52 +0000

TL;DR The differences between these three are Scope, Declaration, Update Value and Re-declaration

These three are the way to declare variables in Javascript.

Before ES6 in Javascript, You can declare variables by using var, But the problem is var scope is global, It has a chance to occur Name collision.

Const and Let introduce in ES6, They come to solve to problem of var because of Block scope.

They are used in different scenarios, Const is used when we don't want to change the value of variables and Let we can change the value of variables depending on the event.

I think some of you are a little bit confusing because it has a lot of information, Let me show you the table to compare the differences between these three types of variables declaration. It will be easy to understand and apply to your implementations.

Declaration Type	Scope	Declaration	Update value	Re-declare
var	globally, function	Without initialize	Yes	Yes
const	block	Need initialize	No	No
let	block	Without initialize	Yes	No

I will explain what happens above giving a comparison table. First, start from Scope.

Scope

Scope determines the accessibility (visibility) of variables. Or the level of accessibility and visibility of variables.

Contains 3 levels

Block scope
Function scope
Global scope

before ES6 come, They have only Function scope and Global scope.

Declaration

You need to initialize the value of variables when you declare if you used const, But no need for var and let.

Update value

If we need to change the value of a variable, We need to use var or let only.

Tips

You have noticed each declaration has something different, You need to consider by a situation when to use var, const, or let. My suggestion is to use const or let for reduced the scope problem especially global scope from var, It will make a Name collision.

If something's wrong, incomplete or you want to share the experience. Please let me know in the comment.
Thank you for taking the time to read this😘.

Var vs Const vs Let มันต่างกันยังไงนะ ?

alternativeboy — Mon, 21 Feb 2022 05:40:35 +0000

TL;DR ความแตกต่างของทั้งสามตัวนี้คือ Scope, Declaration, Update แล้วก็ Re-declaration นั้นเอง

เนื้อหา

หลายคนเคยสงสัยไหมว่า เจ้า var, const, let นั้นมันต่างกันยังไงทั้งๆที่จริงแล้วทั้งสามอย่างที่กล่าวมาสามารถใช้ประกาศตัวแปรได้ทั้งนั้น

จริงๆแล้วมันมีที่มาเป็นอย่างงี้ครับ คือในช่วงแรกของ Javascript นั้นการประกาศตัวแปรจะมีแค่ var เท่านั้นแล้ว scope มันเป็น global ทำให้การ implement อะไรต่างๆค่อนข้างที่จำสับสนว่า ตัวแปรที่เรียกใช้นั้นเป็นของ file ที่เรากำลัง implement หรือเป็น file อื่นนั้นเอง

ทำให้ในยุคของ ES6 ได้เพิ่มการประกาศตัวแปรเพิ่มอีก 2 ชนิด คือ const กับ let เจ้าสองตัวนี้เข้าช่วยให้การ development ง่ายขึ้นเพราะ block scope ของทั้งสองตัวนี้เป็น local นั้นเอง แถมการเรียกใช้ก็แบ่งแยกชัดเจน const ใช้สำหรับตัวแปรที่หลังจากที่ initialize ค่าให้แล้วไม่อยากเปลี่ยนแปลงค่าของมันอีก ซึ่งแตกต่างกับ let ที่ เราอยากให้ค่ามันสามารถเปลี่ยนไปได้เรื่อยๆตาม usecase ที่เกิด

คราวนี้หลายๆคนเริ่มสับสนแล้วว่าเราควรที่จะใช้การประกาศตัวแปรแบบไหนดี เดี๋ยวผมจะเอาตารางเปรียบเทียบมาให้ดูนะครับเพิ่อที่จะให้ง่ายต่อการนำไปใช้

Declaration Type	Scope	Declaration	Update value	Re-declare
var	globally, function	Without initialize	Yes	Yes
const	block	Need initialize	No	No
let	block	Without initialize	Yes	No

ผมจะอธิบายตารางด้านบนให้นะครับเริิ่มจาก Scope ก่อน

Scope

Scope determines the accessibility (visibility) of variables. หรือก็คือการเข้าถึงของตัวแปรนั้นๆ ว่าสามารถเข้าถึงได้ระดับไหนนั้นเอง

จะประกอบไปด้วย 3 ระดับ

Block scope
Function scope
Global scope

ซึ่งเมื่อก่อน ES6 จะมามันมีแค่ Function scope กับ Global scope เท่านั้น

Declaration

การกำหนดค่าตัวแปรขณะที่ประกาศตัวแปร อย่าง var กับ let ไม่จำเป็นที่จะต้องกำหนดค่าตัวแปรตอนประกาศก็ได้ แต่ว่า const นั้นจำเป็นที่จะต้องกำหนดต่าตัวแปรให้มัน

Update value

ถ้าหากเราอยากเปลี่ยนค่าของตัวแปร เราสามารถใช้ var หรือ let เท่านั้น

Tips

จะสังเกตุได้ว่าแต่ละการประกาศตัวแปรจะมีบางอย่างที่แตกต่างกันขึ้นอยู่กับสถานการ์ที่เราจะนำไปใช้ แต่โดนส่วนตัวแล้วผมอยากแนะนำว่าใช้ const กับ let ดีกว่าเพื่อที่จะหมดปัญหาเรื่อง scope ที่บางทีชื่อตัวแปรของเราอาจจะซ้ำกันได้ทั้งใน file หรือ file อื่นๆ

สามารถพูดคุยกันได้นะครับ บางอย่างผมอาจจะพูดไม่เคลียร์, ไม่เข้าใจ หรืออาจจะผิดพลาดตรงไหนก็ขอโทษด้วยนะครับผม หรืออยากจะเสริมเนื้อหาตรงจุดไหนแชร์มาได้เลยนะครับอยากแลกเปลี่ยนประสบกาณ์กับเพื่อนๆ แล้วเจอกันใหม่ในโพสต์หน้าครับ

Let's create our snippets on VSCode

alternativeboy — Sun, 05 Sep 2021 10:30:14 +0000

Hello, my friend today I'm gonna show you how to create your snippet on VSCode to improve your productivity.
First of all, we need to understand what are "Code snippets"

Code snippets are templates that make it easier to enter repeating code patterns. Or generate a boilerplate template for you by typing a keyword
e.a if you typing clg and hit tab or enter to confirm using a snippet then it will generate console.log() immediately

Why do we need to create our snippets?

Because of the snippets, we need sometimes they don't exist on Built-in Software or in the Marketplace. I decided to try to create, I found that it was easy to create. So I want to share this with you.

How to create Snippets on VSCode

Open Command Pallet and type Preferences: Configure User Snippets ( Shortcuts => Window: Ctrl + Shift + P, Mac: CMD + Shift + P )

We can select which file we want to add our snippet to. Today we gonna add to the javascript file.

Example of our javascript snippet

{
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log to the console"
    }
}

I'll explain what happens shows above. This snippet will generate 'console.log()' as you can see they have a JSON format.

the first line is the key of snippet
a prefix is a snippet keyword to trigger
the body is boilerplate we need, we can add a spacebar easily or write multiple lines.
a description is a description of the snippet. It will describe which snippet we going to use e. a Log to the console will be shown on the right-hand side.

When the snippet was successfully called the editor cursor will place inside a round bracket it will reduce our effort to move the cursor by ourselves. This is called Tabstops one of Snippet Syntax.

Snippet Syntax

Tabstops: a Tabstops is moving the cursor inside generated snippet code. A Tabstops is using by type $ following by number 1, 2, 3, ... and so on the last number is 0. We can use the same number to edit multiple lines.
Placeholder: a placeholder is a default value inside a generated snippet. A placeholder is using by typing ${} and a Tabstops number with semicolon and placeholder value like this ${1:placeholderValue}

        "body": [
            "const $1: ${2:string} = $3",
            "$0"
        ],

in the Tabstops two if we want 'string' we just skip this Tabstops by hit Tab. So this is the benefit of placeholder.

Choice: a choice is an option when we use inside a generated snippet

        "body": [
            "const $1: ${2|string, number, boolean|} = $3",
            "$0"
        ],

Variables: variables are built-in values to use inside a generated snippet. It using by type $VARIABLES_NAME on a snippet body.

        "body": [
            "const $1: ${2|string, number, boolean|} = $RANDOM",
            "$0"
        ],

Available variables on VSCode following this link

Summary

Pros

Reduce time to implement repetition code Good code style because code come from the same template snippet

Cons

Code snippet can be duplicate on multiple files such as Built-in, Marketplace, or our snippets. It takes time for writing good snippets for you because you need to refactor a snippet to fit in your situation.

Limitation

Code snippets cannot use when we're in the snippet editing process

Bonus

  These are some of the javascript snippets I'm using on my project.

First is generate an arrow function with a return value
"Create Arrow Function":{
      "prefix":"cf",
      "body":[
         "const $1 = (($2) => {",
         "",
         "\t $0",
         "\treturn",
         "})"
      ],
      "description":"Create Arrow function"
    },

The other snippet generates an arrow function without a return value

"Create Arrow Function without return": {
      "prefix":"cfn",
      "body":[
         "const $1 = (($2) => {",
         "",
         "\t $0",
         "})"
      ],
      "description":"Create Arrow function without return"
    },

This is my first writing blog in English. I want to apologize if make you guys confusing in this post with my gramma. I will improve my English skills. Please let me know your thoughts comments below, I'm glad to receive any suggestions. See you in the next post. : )

มาเขียน Snippet ใช้เองกัน!!

alternativeboy — Sun, 05 Sep 2021 09:27:29 +0000

สวัสดีครับ วันนี้ผมจะมาสอนการสร้าง code snippet บน VSCode ที่จะช่วยเพิ่ม Productivity ในการ Implement code นั้นเอง
ก่อนที่จะเริ่มเรามารู้จักเจ้า Code snippet กันก่อนดีกว่า

Code snippet คืออะไร Code snippet เป็นการสร้างชุดโค้ดจากการเขียนสั้นๆ
ยกตัวอย่างเช่น การพิมพ์ clg ถ้าหาก เรากด tab หรือ enter เพื่อ confirm ในการใช้ snippet นั้นจะเป็นการสร้าง console.log() ขึ้นมา

ทำไมเราถึงต้องเขียน snippet เอง เพราะว่า snippet ที่เราอยากได้นั้นมันอาจจะไม่มีใน Built-in หรือใน Marketplace หรือถึงจะมีก็ออกจะหายากไปหน่อย
เลยตัดสินใจว่า เขียนเองเลยดีกว่าพอตอนเขียนก็รู้สึกว่าไม่ยากเกินไปเลยอยากจะมาแชร์ให้เพื่อนๆ

โดยเจ้า Code snippet สามารถได้มาจาก 3 อย่างตามนี้

Built-in VS Code
VSCode snippets Marketplace ที่ได้มาจาก Plugin ที่เรา install นั้นเอง
Create own snippets หรือ snippet ที่เราเขียนขึ้นมาเองนั้นเอง

วิธีการสร้าง Snippet บน VSCode

เปิด Command Pallet ขึ้นแล้วพิมพ์คำว่า Preferences: Configure User Snippets ( Shortcuts => Window: Ctrl + Shift + P, Mac: CMD + Shift + P)

เราสามารถเลือกได้ว่าจะเพิ่ม snippet ลงไฟล์ที่เป็นของเราเลย หรือ จะเพิ่มลงใน snippet ของแต่ละภาษาของ VS Code วันนี้เราจะมาเพิ่ม snippet ลงในไฟล์ VS Code กัน

ตัวอย่างที่จะเราจะเขียน Snippet วันนี้ขอเป็น ภาษา javascript ก็แล้วกัน



    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log to the console"
    }

โดยผมจะอธิบายจากตัวอย่างด้านบนจะเป็น snippet การสร้าง console.log()
จะสังเกตว่า มันเป็นลักษณะของ Json file format

บรรดทัดแรกเป็น key ของ snippet
prefix คือ snippet ของเราว่าจะใช้ชื่ออะไร
body ตัวคือสำคัญมากเพราะมันคือสิ่งที่เราอยากได้นั้นเอง เราเพิ่ม spacebar เข้าไปง่ายๆ หรือ การสร้างหลายๆบรรทัดโดยไม่ต้องใช้สัญลักษณ์พิเศษ
description คือคำอธิบายว่า snippet ที่เรากำลังใช้งานนั้นเป็น snippet ของไฟล์ไหน อย่างเช่นตัวอย่างคือ Log to the console ที่จะอยู่ทางด้านขวามือ

โดยเมื่อเราเรียกใช้เสร็จแล้ว editor cursor จะถูกไปวางในวงเล็บ เพื่อที่หลังจากเรา สร้าง snippet เราสามารถพิมพ์ด้านในวงเล็บได้เลย
ทำให้เราไม่ต้องเลื่อน editor cursor เอง แล้วหลังจากที่เรากด Tab มันจะเป็นการเอา editor cursor ไปบรรทัดถัดนั้นเอง โดยสิ่งนี้เรียกว่า Tabstops หนึ่งใน Snippet Syntax

Snippet Syntax ของ body มีอยู่ 4 อย่าง ( เรียงจากความบ่อยในการเรียกใช้ )

Tabstops: tabstops คือการเลื่อนตัว editor cursor ใน snippet code ที่เราสร้างขึ้นมานั้นเอง โดยการใช้ tabstops นั้นจะต้องพิมพ์ $ แล้วตามด้วยตัวเลขอย่างเช่น $1, $2, ... tabstops จะเริ่มจากเลข 1 แล้ว ตัวสุดท้ายคือเลข 0
เราสามารถใข้ เลขเดียวซ้ำกันได้ ถ้าหากเราต้องการที่จะแก้ไขหลายๆจุดพร้อมกัน
Placeholder : placeholder คือค่าการแทนค่าใน tabstops ด้วยค่า Default ของมัน ( placeholder)
โดยการเขียน placehoder จะเป็น $ ตามด้วย ปีกกา {} ด้านในจะใส่ตัวเลขของ tabstops แล้วต่อด้วย placehoder คั้นด้วย : ( semi colon )
${1:placeholder} อย่างเช่นการสร้าง field ใน model เราอาจจะสร้าง snippet ขึ้นมาตัว body เราอาจจะเขียนแบบนี้
```
    "body": [
        "const $1: ${2:string} = $3",
        "$0"
    ],
```

ซึ่งถ้าหากใน tabstops $2 เราอยากให้เป็น string เราก็แค่กด tab ไปมันจะใส่คำว่า string ให้เราเองเลยนี้คือข้อดีของ placeholder



* Choice: choice อีก syntax ที่มีประโยชน์แต่อาจจะใช้ได้น้อยสถานการณ์ choice เหมือน dropdown ที่มีตัวเลือกให้เราเลือก ถ้าหากสิ่งที่เราต้องการไม่มีอยู่ในตัวเลือกเราสามารถพิมพ์ได้ แต่อาจจะต้องกดออกจาก snippet edit process ด้วยการกด esc ก่อน

    "body": [
        "const $1: ${2|string, number, boolean|} = $3",
        "$0"
    ],


* Variables: การใช้ variables นั้นเราสามารถใช้ได้ด้วยการ $variableName หรือ ${variableName:default}
ซึ่งถ้า default ไม่มีค่าจะแทนที่ด้วย empty string ตัวอย่างของเราจะใช้ variableName ที่ชื่่อว่า random
ไอ่ตัว random จะเป็นการสุ่ม เลข 6 หลัก ฐาน10 ขึ้นมาให้เรา
"const $1 = $RANDOM ",
variableตัวอื่นที่สามารถใช้ได้สามารถดูได้จาก [link](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables) นี้เลย

    "body": [
        "const $1: ${2|string, number, boolean|} = $RANDOM",
        "$0"
    ],


###สรุป

####ข้อดีของการเขียน Snippets เอง
* ทำให้เราสามารถลดเวลาจากการเขียนโค้ดที่มีหน้าตาเหมือนๆกันได้
* code style จะออกมาใกล้เคียงกันเพราะสร้างมาจาก template snippet เดียวกัน

####แล้วข้อเสียหละ
* Code snippet จะอาจจะซ้ำกันได้ในหลายไฟล์ อย่างเช่น log อาจจะมาจาก Built-in, Marketplace plugin หรือว่ามาจากที่เราเขียน
ดังนั้นเราต้องเขียน description ให้เข้าใจง่ายเพื่อที่จะสามารถเรียกใช้ snippet ที่ถูกต้อง
* ใช้เวลาเขียน snippet file เพราะถ้าอยากได้ snippet ดีๆอาจจะต้องมีการ refactor หลายรอบ

####ข้อจำกัด
* Code snippet ไม่สามารถใช้ในได้ใน Code snippet ถ้ายังอยู่ใน snippet edit process

####ของแถม

อันนี้เป็นตัวอย่าง Snippets ที่ผมใช้จริงๆในฝั่ง Javascript นะครับ
อันแรกจเป็นการสร้าง Arrow Function ขึ้นมาแบบมี Return value

"Create Arrow Function":{
"prefix":"cf",
"body":[
"const $1 = (($2) => {",
"",
"\t $0",
"\treturn",
"})"
],
"description":"Create Arrow function"
},


ส่วนอันที่สองก็เป็นการสร้าง Arrow Function เหมือนกันแต่ไม่มี Return value

"Create Arrow Function without return": {
"prefix":"cfn",
"body":[
"const $1 = (($2) =>{",
"",
"\t $0",
"})"
],
"description":"Create Arrow function without return"
},



ก่อนจากกันนี้ก็เป็นโพสต์แรกของผม ภาษาในการเขียนอาจจะยังเข้าใจยาก ถ้าหากมีตำแนะนำติชม คอมเมนต์กันมาเลยนะครับ แล้วเจอกันใหม่ในบทความหน้าครับผม : )

DEV Community: alternativeboy

มาเล่น Tailwind CSS กับ Angular กัน

ข้อดี

การติดตั้ง

ข้อเสีย

สรุป

แถม

Let's play Tailwind CSS with Angular

Pros

Installation

CONS

Conclusion

Bonus

Var vs Const vs Let what is different ?

Contents

Scope

Declaration

Update value

Tips

Var vs Const vs Let มันต่างกันยังไงนะ ?

เนื้อหา

Scope

Declaration

Update value

Tips

Let's create our snippets on VSCode

Why do we need to create our snippets?

How to create Snippets on VSCode

Snippet Syntax

Summary

Pros

Cons

Limitation

Bonus

มาเขียน Snippet ใช้เองกัน!!

วิธีการสร้าง Snippet บน VSCode

Snippet Syntax ของ body มีอยู่ 4 อย่าง ( เรียงจากความบ่อยในการเรียกใช้ )