Forem: Supaluck Singjan

My Rust Day 0

Supaluck Singjan — Sun, 29 Jun 2025 18:11:33 +0000

Hello. I am learning in Rust programming language. For this "Day 0", i will learn how to print "Hello, world" in Rust.

fn main() {
  print!("Hello, world!");
}

Result : Hello, world!

Ok. I can do it.

Type Assertions in TypeScript

Supaluck Singjan — Wed, 05 Mar 2025 14:19:15 +0000

Type Assertions is the process of manually specifying data types. There are two formats.

as
<data type>

Example 1: Using the as format.

let data1:unknown;
data1="Apple";

let fruit = (data1 as string).toLowerCase();

console.log(fruit);

Example 2: Using the <data type> format.

let data1:unknown;
data1="Apple";

let fruit = (<string>data1).toLowerCase();

console.log(fruit);

JavaScript Array Unshift, Push , Shift, Pop

Supaluck Singjan — Thu, 04 May 2023 08:33:55 +0000

Unshift, Push , Shift, Pop

Unshift is adding the first one of the array.
Push is adding the last one of the array.
Shift is deleting the first one of the array.
Pop is deleting the last one of the array.

Example

let customers = ['Eelyn', 'Ken', 'Mike'];

//Unshift 
customers.unshift('Winnie');
console.log(customers)

Result :
['Winnie', 'Eelyn', 'Ken', 'Mike']

//Push
customers.push('Melissa');
console.log(customers)

Result :
['Winnie', 'Eelyn', 'Ken', 'Mike', 'Melissa']

//Shift
customers.shift();
console.log(customers)

Result :
['Eelyn', 'Ken', 'Mike', 'Melissa']

//Pop
customers.pop();
console.log(customers)

Result :
['Eelyn', 'Ken', 'Mike']

Ternary Operator in JS

Supaluck Singjan — Mon, 19 Sep 2022 14:24:50 +0000

Ternary operator is a short-hand form in term of condition.

For example,


const score = 80;

if(score >= 80) {
console.log("Passed this step.");
} else {
console.log("Do it again.");
}

But re-write in term of the ternary operator.


score >= 80 ? console.log("Passed this step."): console.log("Do it again.");

การวนลูป array แบบ ForOf ของ JavaScript

Supaluck Singjan — Fri, 22 Apr 2022 17:31:35 +0000

สำหรับตัวอย่างเราจะมี datas = [1,2,3,4,5]

อยากจะให้ทำการวน loop แบบ forOf ก็ จะเขียนแบบนี้คือ

for(const ตัวแปรใหม่หรือตัวแปรเอกพจน์ of ตัวแปรตั้งต้นหรือตัวแปรพหูพจน์){
 \\ code
}

ดังนั้นหากจะแสดงค่าแต่ละตัวใน array ของตัวแปร datas จะเขียนแบบนี้

for(const data of datas){
 console.log(data)
}

ผลลัพท์จะเป็น

การใช้ join() ใน JavaScript

Supaluck Singjan — Wed, 20 Apr 2022 14:59:38 +0000

สำหรับ join() จะเกี่ยวข้องกับการแสดงผลของ array บน JS

มาดูตัวอย่างกัน

const data = [11,22,33,44];
console.log(data.join());

ผลลัพท์จะได้เป็น
11,22,33,44

จะสังเกตว่าไม่มีการแสดงเครื่องหมาย [] ปรากฏอยู่

สำหรับตัวอย่าง หากเราจะเปลี่ยนเครื่องหมาย จาก "," ไปเป็นอย่างอื่น เช่น "*"

สามารถเขียน code ได้เป็น

const data = [11,22,33,44];
console.log(data.join("*"));

ผลลัพท์จะได้เป็น
11*22*33*44

หรืออีกตัวอย่าง

const data = [11,22,33,44];
console.log(data.join("-"));

ผลลัพท์จะได้เป็น
11-22-33-44

มาดูตัวอย่างอื่น ๆ

let sumNum = (...numArr) => {
    let total = 0
    total = numArr.map((num) => total += num)
    return total
  }

console.log(sumNum(10,10).join())

ผลลัพท์
10,20

บันทึกการเรียน TypeScript [1 : พื้นฐานการติดตั้ง - ตัวแปร]

Supaluck Singjan — Sun, 17 Apr 2022 09:08:20 +0000

ส่วนนี้จะเป็นการบันทึกการเรียน TypeScript จากคลิปกับช่อง Programming with Mosh

https://www.youtube.com/watch?v=NjN00cM18Z4

TypeScript จัดเป็น Superset ของ JavaScript
การติดตั้ง : node install -g typescript
ตรวจสอบ version : tsc --version
การ declaring ตัวแปร ก็เหมือนกับ JS คือ let var const
การ compile เป็นไฟล์ .js : ตัวอย่างสร้างไฟล์ที่ main.ts วิธี compile ก็ใช้ tsc main.ts ซึ่งจะจะได้ main.js
การ run ไฟล์ .js ก็ใช้เป็น node ชื่อไฟล์ เช่น node main.js

วิธีการตรวจสอบ Username และ Password ใน phpmyadmin บน XAMPP

Supaluck Singjan — Thu, 08 Apr 2021 09:17:34 +0000

บทความนี้สำหรับผู้ใช้ Microsoft Windows นะคะ สำหรับที่มีปัญหาในการลืมรหัสผ่านสามารถไป check ได้โดย เข้าไปที่โฟล์เดอร์ "XAMPP" จากนั้นลองไล่หาโฟล์เดอร์ "phpmyadmin" หลังจากนั้นจะเห็นไฟล์ที่ชื่อว่า "config.inc.php" แล้วทำการเปิดไฟล์ขึ้นมา ประมาณบรรทัดที่ 20 ลงมาก็จะเห็นข้อมูล username และ password ดังรูปที่แสดงด้านล่าง

ซึ่ง username และ password เหล่านี้ ต้องไปใช้งานเช่น การเขียน connection เชื่อมฐานข้อมูล mysql นั่นเอง

หมายเหตุ :: ข้อมูล username และ password ในรูปเป็นแค่ตัวอย่างนะคะ

How to khow the "Username" & the "Password"of the phpmyadmin in XAMPP.

Supaluck Singjan — Thu, 08 Apr 2021 09:07:48 +0000

For my reader, my English is not well. but i hope that this content will help you.

In this case for Microsoft Windows OS.

In the "xampp" folder, and you will find out the folder is "phpmyadmin".
In the "phpmyadmin" folder, try to check the "config.inc.php" file, and open this file.
After open the "config.inc.php", you can see the "username" and the "password" as below code.

Note : The username and the password, i just show for the example. they are not use for the real life.

วิธีการใช้ Module ของ Node.js [ตอนที่ 2]

Supaluck Singjan — Tue, 02 Feb 2021 20:17:44 +0000

จาก ตอนที่ 1 ซึ่งได้รู้จักกับ Module และการ Export ตัว Module กันแล้ว ที่นี้เราจะทำการ Import ตัว Module มาใช้งานกัน ซึ่งจากตอนที่ 1 นั้น เราได้ทำการสร้างไฟล์ Module ขึ้นมา 2 ไฟล์คือ index.js และ someone.js โดยเราจะทำการ run ไฟล์ index.js

การ Import ตัว Module ที่สร้างไว้

โดยจะใช้คำสั่ง require('part/ชื่อ Module'); ดังเช่น เราได้สร้างไฟล์ someone.js กับ index.js ไว้ที่โฟลเดอร์เดียวกันก็ทำการ require('./someone.js'); จากตอนที่ 1 ที่ไฟล์ someone.js เราได้มีการ export ตัวฟังชั่นอยู่ 2 ตัวคือ cherry() และ nanny() ดังนั้นเราจะ import ฟังก์ชั่นเหล่านี้จาก Module ที่ชื่อ someone มาใช้งานดังตัวอย่าง

const someone = require('./someone.js');

someone.cherry();
someone.nanny();

จากนั้นทำการ run ไฟล์ index.js ด้วยคำสั่ง

node index.js

ผลลัพท์ที่ได้จะเป็น

Cherry
Nanny

หรืออาจจะเขียนในรูปแบบนี้ก็ได้ดังเช่น

const {cherry, nanny} = require('./someone.js');

cherry();
nanny();

เมื่อทำการ run ก็จะได้ผลลัพท์เช่นเดียวกัน
...
เอาล่ะตอนนี้เรามีความรู้เกี่ยวกับการ Export/Import ตัว Module กันแล้วนะคะหวังว่าจะเข้าใจกัน ในตอนที่ 3 จะแสดงอีกตัวอย่างการ Export และ Import ตัว Module

วิธีการใช้ Module ของ Node.js [ตอนที่ 1]

Supaluck Singjan — Tue, 02 Feb 2021 17:06:26 +0000

ส่วนนี้จะเป็นบันทึกสรุปความเข้าใจในเรื่องของ Module ของ Node.js (หัวข้อการเขียนบทความที่นี่อาจจะดูสะเปะสะปะไปหน่อย แต่เดี๋ยวเวปไซต์ส่วนตัวเสร็จจะเอาบทความบางส่วนที่เขียนที่นี่ไปเรียบเรียงใหม่และจัดหัวข้อให้เป็นระเบียบ)

มาทำความรู้จักกับ Module ของ Node.js กันก่อน

ในการเขียนโปรแกรมใด ๆ ก็มักจะมีการเขียนฟังก์ชั่นใช่ไหมล่ะ แต่ในการทำงานจริง ๆ ก็จะมีการเขียนฟังก์ชั่น ในการใช้งานขึ้นมาหลายตัว ดังนั้นเพื่อความเป็นระเบียบจึงทำการสร้าง Module ซึ่งก็เป็นไฟล์ในการเก็บตัวฟังก์ชั่น ต่าง ๆ ที่จะเอามาเรียกใช้ แต่ว่าทาง Node.js เองก็มองไฟล์แต่ละไฟล์เป็น Module อยู่แล้ว สำหรับ Node.js จะมี Built-in Module และ Module ที่เราสร้างมาใช้งานเอง ทีนี้ก็มาลองดูตัวอย่างการสร้าง Module มาใช้งานขึ้นมาเอง

สร้าง index.js ซึ่งจะเป็น Module หลักในการ Run ออกมา
สร้าง someone.js ซึ่งจะให้เป็น Module ที่เรียกฟังก์ชั่น ที่ทำการเรียกชื่อที่ต้องการออกมา
ที่ someone.js เราทำการสร้างฟังก์ชั่นง่าย ๆ สำหรับ Print ชื่อเล่นต่าง ๆ ดัง code ด้านล่าง

function cherry() {
 console.log('Cherry');
}

function nanny() {
 console.log('Nanny');
}

จาก code ด้านบนที่ Module someone.js เราจะมี 2 ฟังก์ชั่นที่สร้างขึ้นมา ดังนั้นจะมา export ฟังก์ชั่นเหล่านี้มาใช้งานที่ index.jsกัน

การ Export ตัว Module ซึ่งจะมี 3 แบบคือ

[ข้อแนะนำ : ควรเลือกวิธีการ export อย่างใดอย่างหนึ่ง]

module.exports = ชื่อฟังก์ชั่นที่ต้องการ export วิธีใช้งานก็โดย

function cherry() {
 console.log('Cherry');
}

function nanny() {
 console.log('Nanny');
}

//Export ฟังก์ชั่น
module.exports = cherry
module.exports = nanny

module.exports = {properties ซึ่งเป็นชื่อฟังก์ชั่นแต่ละตัวที่ต้องการ export นั่นเอง} ซึ่งการเขียนแบบนี้จะสะดวกต่อการใช้งานเวลาที่เรามีการสร้างหลาย ๆ ฟังก์ชั่นใน Module นั้น ๆ ต่อจากตัวอย่างด้านบน

function cherry() {
 console.log('Cherry');
}

function nanny() {
 console.log('Nanny');
}

//Export ฟังก์ชั่น
module.exports = {
 cherry: cherry,
 nanny: nanny
}

เราสามารถเขียนให้สั้นลงได้โดย

module.exports = {
 cherry,
 nanny
}

exports.NameOfFunction = function NameOfFunction() { ... } วิธีนี้ก็เป็นอีกวิธีที่สะดวกอย่างมาก เหมาะสำหรับฟังก์ชั่นที่ต้องการ export มีไม่กี่ฟังก์ชั่น วิธีการใช้งานดัง code ด้านล่าง

exports.cherry = function cherry() {
     console.log('Cherry');
 }

exports.nanny = function nanny() {
     console.log('Nanny');
 }

เอาล่ะตอนนี้เราก็มีความรู้และความเข้าใจเกี่ยวกับ Module และ การ Export ตัว Module เนื้อหายังไม่จบเพียงแค่นี้ยังมีตอนที่ 2 อีกค่ะ

วิธีการ include "fontawesome 5" ลงบน theme "understrap"

Supaluck Singjan — Wed, 25 Nov 2020 21:48:49 +0000

บ่อยครั้งที่เราต้องการเขียน wordpress theme เพื่อปรับแต่งความต้องการของผู้ใช้งาน แต่ต้องมาเสียเวลาในการเขียนทีละส่วนต่าง ๆ ของ theme ไม่ว่าจะเป็น header.php ไปจนถึงการเขียน walker class และรวมไปถึงการ config ส่วนต่าง ๆ เช่น gulpfile.js จนบางครั้งต้องมาหา plugin ต่าง ๆ มาช่วยจนเกินความจำเป็น ดังนั้นแล้วจึงมักมี starter theme ซึ่งเปรียบเสมือน theme ต้นแบบที่มีส่วนต่าง ๆ มาให้อย่างเสร็จสรรพที่เหลือก็ไปปรับแต่งตามใจชอบ ซึ่งในที่นี่จะขอพูดถึงตัว starter theme ที่ชื่อว่า "Understrap"

สำหรับ Understrap เป็น theme ที่รองรับ bootsrap 4 และยังมี fontawesome 4 ติดตั้งมาให้ด้วย โดยจะใช้ scss ทำการปรับแต่ง style โดยใช้ gulp มาทำการ compile ให้ แต่ในปัจจุบัน (ปี 2020) ผู้เขียนต้องการให้ theme มี icon ของตัว "tiktok" เพิ่มขึ้นมาบน theme ที่ต้องการเขียน ปัญหาคือ ใน fontawesome 4 ที่อยู่ใน understrap เวอร์ชั่นนี้ยังไม่รองรับไอคอน tiktok นี้ จึงต้องการลงตัว fontawesome 5 ซึ่งรองรับไอคอน tiktok ตัวนี้ ดังนั้นวิธีการ include fontawesome 5 มีดังนี้

ก่อนอื่น
ควรมีความรู้ในการใช้คำสั่ง Node Package Manager มาบ้างและรวมถึงการใช้งาน gulpjs

มาเริ่มขั้นตอนกันเลย

*1. ทำการ

npm install

*2. จากนั้นติดตั้งตัว fontawesome 5 (ในที่นี่จะขอติดตั้งไว้ที่ส่วนของ devDependencies) โดยใช้คำสั่ง

npm install @fortawesome/fontawesome-free --save-dev

*3 เปิดไฟล์ gulpfile.js
ทำการดึง assets ต่าง ๆ ของ fontawesome 5 ใน node_modules มาไว้ที่ src/sass/fontaewsome และ fonts โดยทำการ

// Copy all Font Awesome Fonts
    var stream = gulp
        .src(paths.node + '/@fortawesome/fontawesome-free/webfonts/*.{ttf,woff,woff2,eof,svg}')
        .pipe(gulp.dest('./fonts'));

// Copy all Font Awesome SCSS files
    gulp.src(paths.node + '/@fortawesome/fontawesome-free/scss/*.scss')
    .pipe(gulp.dest(paths.dev + '/sass/fontawesome'));

มาวางหลังจากบรรทัด

////////////////// End Bootstrap 4 Assets /////////////////////////

โดยทำการ comment ตัวคำสั่งในการดึง assets ต่าง ๆ บน fontawesome เวอร์ชั่นเดิม (หวังว่าจะไม่งงนะคะ ^^)

*4. แล้วพิมพ์คำสั่ง

gulp copy-assets

ตอนนี้ assets ต่าง ๆ ที่ copy เข้ามาจะอยู่ในโฟล์เดอร์ดังรูป

*5. จากนั้นที่ sass/assets/font-awesome.scss ให้แทนที่ดังนี้

$fa-font-path: "../fonts" !default;

@import '../../src/sass/fontawesome/variables';
@import '../../src/sass/fontawesome/mixins';
@import '../../src/sass/fontawesome/core';
@import '../../src/sass/fontawesome/larger';
@import '../../src/sass/fontawesome/fixed-width';
@import '../../src/sass/fontawesome/list';
@import '../../src/sass/fontawesome/bordered-pulled';
@import '../../src/sass/fontawesome/animated';
@import '../../src/sass/fontawesome/rotated-flipped';
@import '../../src/sass/fontawesome/stacked';
@import '../../src/sass/fontawesome/icons';
@import '../../src/sass/fontawesome/screen-reader';
@import '../../src/sass/fontawesome/shims';
@import '../../src/sass/fontawesome/brands';
@import '../../src/sass/fontawesome/regular';
@import '../../src/sass/fontawesome/solid';

*6. ทำการ compile sass ด้วยคำสั่ง

gulp watch

โดยที่ sass/theme.scss จะเห็นไฟล์ font-awesome.scss

ลอง copy ส่วน font-awesome.scss แล้วลบแล้ววางใหม่ดู

*7. ลองทดสอบ icon สมมุติว่าเรียกใช้ icon "tiktok" ไว้ที่ส่วน footer.php

เอาล่ะ ตอนนี้เราก็ได้ไอคอน tiktok ตามที่เราต้องการแล้ว