Jojoee - สอนทำเว็บ ออกแบบ HTML5 CSS3 Wordpress Web Design

Category: Code

9 min read

Visual Studio Code extension: แชร์ประสบการณ์ในการพัฒนา

บทความนี้ถูก published ที่ Visual Studio Code extension: แชร์ประสบการณ์ในการพัฒนา เมื่อ 15 มีนาคม 2020 สวัสดีครับ 2 อาทิตย์ที่ผ่านมา ผมได้ทำ open source ตัวนึง ซึ่งคิดว่า ขั้นตอน, แนวคิด และตัวงาน อาจจะมีประโยชน์ไม่มากก็น้อยแก่ผู้อ่าน เลยอยากจะมาแชร์ให้ฟังครับ โดยจะเรียงลำดับ ตามนี้ครับ Code สำหรับ project นี้นะครับ: https://github.com/jojoee/vscode-conda-cheatsheet 1. แรงบัลดาลใจ ปัจจุบัน editor ที่ผมใช้อยู่เป็นหลักเลยคือ Visual Studio Code (มีใช้ตัวอื่นบ้างก็จะเป็นเครือของ Jetbrains) ด้วยความที่เป็น Editor ที่เร็ว, มี extension ให้เลือกใช้เยอะและใช้งานได้ดี เลยสนใจและอยากลองทำ extension ขึ้นมาบ้าง ซึ่งในเนื้อหาถัดๆไปจะขอใช้ตัวอักษร VSCode แทนคำว่า Visual Studio…

Read more...
10 min read

PWA Online hackathon: ประสบการณ์ การเข้าร่วม และ การพัฒนา

PWA Online hackathon logo

บทความนี้ถูก published ที่ PWA Online hackathon: ประสบการณ์ การเข้าร่วม และ การพัฒนา เมื่อ 26 มิถุนายน 2017 สวัสดีครับ อาทิตย์ที่ผ่านมา ได้เข้าร่วมงาน PWA Online hackathon จึงอยากมาแชร์ประสบการณ์ การแข่งขันให้ฟังกันครับ โดยมีหัวข้อดังนี้ 1. PWA Online hackathon: overview 2. การเตรียมตัว 3. Tool ที่ใช้ 4. Package และ service ที่ใช้ 4.1 Unit test 4.2 Lint tool 4.3 Development flow และ build flow 4.4 Source control และ commit…

Read more...
3 min read

DIY – Basic Cache System

Cache - basic

หลักการทำงานทั่วๆไปของ website ปัจจุบัน จะมีลำดับการทำงานแบบนี้ครับ 1. user เข้าหน้า website (user ส่ง request ไปที่ web server) 2. server ประมวลผล 3. server ดึงข้อมูลมาจาก database 4. server ได้รับข้อมูลจาก database แล้วนำมาประมวลผลอีกรอบ 5. server ประมวลผลเสร็จส่งไฟล์กลับไปให้ ซึ่งขั้นตอนทั้ง ก็จะให้ memory ในการทำงาน แต่เมื่อเราทำระบบ cache file, server ก็จะใช้ memory ในการทำงานน้อยลงมาก เช่น การ cache HTML ไฟล์จะช่วยลดได้ดังนี้ ข้อ “2” ก็ไม่ต้องแล้ว หา cache file ก็พอ ข้อ “3” ไม่ต้องไปดึงข้อมูลมาจาก…

Read more...
2 min read

ประเภทของ Programming Errors

Programming Errors

บทความนี้จะว่าถึงเรื่องประเภทของ error ที่เกิดขึ้นในการเขียน program ไม่ว่าจะเป็น programmer ที่มีประสบการณ์มากแค่ไหนยังไงก็ต้องมีพลาดกันบ้าง และนี่คือจุดสำคัญของ programming, คือการ debug program และหาทางแก้ไขมัน โดย programming errors จะแบ่งเป็น 3 หมวดคือ Compilation errors Run-time errors Logic errors 1. Compilation errors compilation errors หรือ complier errors เป็น error ที่เกิดจาก complier ทำการ compile โปรแกรมของเรา ส่วนใหญ่ error ประเภทนี้จะเกิดจากการ Syntax error เช่น สะกดผิด, ใช้ space ผิดที่, ผิดลำดับ (เช่นเรียกใช้ else ก่อน if)…

Read more...
3 min read

CSS Framework ชีวิตเราดีขึ้นเพราะนายเลยนะ

CSS Framework

CSS Framework นี่จะมีส่วนประกอบหลายๆอย่าง ครับแต่ สิ่งหนึ่งที่มีส่วนใหญ่ จะมีเลยคือ Grid Layout Grid Layout ปกติเวลาเราจะเขียน CSS เนี่ยเราก็ต้องวาง Layout กันก่อน ส่วนใหญ่จะเป็นแบบ Grid layout แบบนี้ สังเกตตรง แถบแดงๆ นะครับจะเป็นตัวแบ่งขอบเขตของ Layout, และจากรูปตัวอย่างจะบ่งบอกได้ชัดเจนเลยครับว่าเขาออกแบบตาม Grid ต่างๆ ดังนั้นเมื่อเราใช้บ่อยกันอย่างนี้ก็ทำเป็น Framework กันเลยดีกว่าจะได้สะดวกเวลาเริ่มทำ Website กันใหม่ขึ้นมา // 1 <div class=”row”> <div class=”col-md-4″>.col-md-4</div> <div class=”col-md-4″>.col-md-4</div> <div class=”col-md-4″>.col-md-4</div> </div> // 2 <div class=”row”> <div class=”col-md-3″>.col-md-3</div> <div class=”col-md-6″>.col-md-6</div> <div class=”col-md-3″>.col-md-3</div> </div> // 3…

Read more...
3 min read

Library VS Framework VS API VS Plugin

Library, Framework, API, Plugin

Library, Framework, Plugin, API ต่างเป็นคำที่เราได้ยินกันบ่อยมากครับ เรามาทำความเข้าใจของแต่ละชนิด และความแตกต่างกันครับ Library ปกติแต่ละ Library จะออกแบบมาเพื่อ 1 วัตถุประสงค์ครับ และมีลักษณะคือ เรามี Source code (Download ของเขามา สามารถปรับแต่งได้ตาม License) เราเรียกใช้เอง อย่างตัวอย่างจะเป็น PHPMailer ที่ใช้ในการส่งเมลครับ จะเห็นว่าเรา include ตัว library เข้ามาเอง ตั้งค่าและเรียกใช้เองครับ Framework ตัวนี้ค่อนข้างคลุมเครือครับ อาจจะเป็น Library ที่รวม / เก็บ Library หลายๆอย่าง ที่มีวัตถุประสงค์เดียวกัน ที่รวมส่วนๆหลายๆส่วนมารวมกัน ส่วนตัวผมให้น้ำหนักอันหลังสุด คือรวมส่วนต่างๆมารวมกัน และผมเพิ่มนิยามเข้าไปอีกด้วยว่า เราต้องทำตามระบบของเขา ยกตัวอย่างคือ PHP Framework ต่างๆครับไม่ว่าจะเป็น CodeIgniter, Laravel ซึ่งมีระบบ ที่รวมๆการทำงานต่างๆเบื่องต้นในการสร้าง Web…

Read more...
4 min read

LESS VS SASS

LESS VS SASS

เมื่อเราได้รู้จักความสุดยอด LESS กันไปแล้ว (Part 1 และ Part 2) และบางคนอาจเคยได้ลอง SASS กันมาแล้วคงมีคำถามว่า ใช้ LESS หรือ SASS ดี ซึ่งก็ค่อนข้างตอบยากเล็กน้อยเพราะ Featured พื้นฐานของทั้งคู่นี่ก็พอกันเลยครับ แต่ ยังไงก็ยังคงต่างครับ ลองชมกันเลย ในบทความนี้เราจะเปรียบเทียบในด้านการใช้งานเท่านั้น ไม่นับด้านอื่นๆที่ไม่ค่อยเกี่ยวข้องเช่น SASS สร้างมาจาก Ruby, LESS สร้างมาจาก Javascript หรืออะไรเล็กๆน้อยๆ อย่าง Document ก็จะไม่นำมาเปรียบเทียบนะครับ, ซึ่งจริงๆแล้ว LESS กับ SASS นี่โดยพื้นฐานแล้วแทบจะเหมือนกันจะหมดครับ แต่จุดความแตกต่างนั้น ก็มีนัยสำคัญเลยละครับ LESS แพ้ SASS Mixin ของ LESS ไม่มีแบบ return ค่า (SASS มี) LESS ไม่มี Selector…

Read more...
5 min read

LESS – ยุคใหม่ของ CSS – 2

LESS - CSS Preprocessor

จากความเดิมตอนที่แล้ว LESS – ยุคใหม่ของ CSS ไม่นึกว่าจะยาวขนาดนี้ เลยยกมาเป็น Part 2 ซะเลย มาเริ่มกันเลยดีกว่าครับ Get Started #2 4. Nested rules การเขียนเป็น ชั้นๆ Featured นี้สามารถทำให้เราเขียน CSS ได้ง่ายขึ้นมากครับ (แนะนำๆ) 5. Operations ก็เป็นการคำนวณคณิตศาสตร์ทั่วๆไปครับ 6. Color functions เป็น Function ที่ LESS มีมาให้นะครับเกี่ยวกับพวกสีต่างๆ นอกจากหมวดสีแล้วยังมี อย่างอื่นด้วยนะครับ ลองเข้าไปชมที่ Official LESS documentation ได้เลยครับ 7. Namespaces ทำไมต้องมี Namespace ด้วยสร้าง mixin แบบ ธรรมดาไม่ได้หรอ ? ประโยชน์ของ Namespace คือทำให้มันเปลี่ยนกลุ่มก้อนเดียวกันครับ จะได้เข้าใจได้ง่ายว่ามันอยู่ในหมวดอะไร…

Read more...
3 min read

LESS – ยุคใหม่ของ CSS

LESS - CSS Preprocessor

แนะนำง่ายๆเลยนะครับว่า LESS = CSS + Function + Variable ปกติเราจะเปลี่ยนแปลง CSS ของ Website เราเช่น Theme สี, สีของขอบ, ขนาดพื้นฐานของ Element ก็ต้องใช้ Search & Replace เอาและมาดูว่า อันที่ไหนเราหลุดไป ก็มานั่งเก็บกัน ยกตัวอย่างนะครับลองดูจากรูปนี้ (มาจาก Classic CV) ดูตรงส่วน highlight สีเหลืองๆนะครับ เวลาผมจะเปลี่ยนสีเนี่ย ผมก็ต้อง replace ปกติ แล้วก็มาไล่ดูใหม่ว่าผมพลาดอะไรรึเปล่า แต่ครั้งนี้ผมตั้งไว้แล้วโดยใช้ LESS ผมแค่เปลี่ยนค่าของตัวแปรเดียวมันก็จะเปลี่ยนสีทั้งหมดให้เลยครับ CSS Preprocessor ก็คือตัวช่วยในการเขียน CSS และ compile มาเป็น CSS อีกทีนั่นเองละครับ ซึ่งก็มีหลายตัวอยู่เหมือนกัน ดูเพิ่มเติมได้ที่นี่ ครับ ตัว Popular ก็มี…

Read more...