วันนี้มาแนะนำ CSSPIN ครับ เป็น CSS สวยๆ ไว้แสดงสถานะระหว่างรอโหลด (Loading) ไม่ต้องเขียน js แค่เขียนโค้ด html บรรทัดเดียวก็ใช้ได้แล้ว
รายละเอียด: https://webkul.github.io/csspin/
—
โค้ชเอก
วันนี้มาแนะนำ CSSPIN ครับ เป็น CSS สวยๆ ไว้แสดงสถานะระหว่างรอโหลด (Loading) ไม่ต้องเขียน js แค่เขียนโค้ด html บรรทัดเดียวก็ใช้ได้แล้ว
รายละเอียด: https://webkul.github.io/csspin/
—
โค้ชเอก
สำหรับคนที่เขียน CSS แล้วไม่เข้าใจ ไม่เห็นภาพว่าโค้ดที่เขียนจะมีหน้าตาเป็นแบบไหน แนะนำให้ใช้เว็บนี้นะครับ เค้าจะมีภาพประกอบให้เราดูด้วย
รายละเอียด: http://cssreference.io/
แนะนำ Howler.js ครับ เป็น Audio library สำหรับ modern web
สามารถควบคุมการเล่นเสียงทุกรูปแบบ และยังข้าม platforms ด้วย แน่นอนเราสามารถประยุกต์ใช้กับ Hybrid Mobile App ได้เหมือนกัน ตัวนี้ google, disney, NASA, EA ก็ใช้นะ ลองดูครับ
รายละเอียดและ DEMO: https://howlerjs.com/
สำหรับคนที่เขียน Node.js หรือเขียน JavaScript วันนี้มาแนะนำ library เกี่ยวกับความปลอดภัย 2 ตัวครับ ได้แก่
1. retire.js เป็น Library ใช้สำหรับแสกนหาช่องโหว่ที่เป็นอันตรายต่อระบบของเราโดยจะเช็คว่า library ต่างๆที่เราใช้ในโปรเจคมีช่องโหว่อะไรหรือไม่ (เช็คจาก package.json ที่เราใช้)
รายละเอียด: https://goo.gl/Za9JmZ
.
2. ส่วนอีกตัวจะเป็น Node Security Platform ครับ คล้ายกันกับ retire.js ไว้คอยเช็คช่องโหว่และความปลอดภัยเหมือนกัน การใช้งานง่ายมากครับ แค่สั่งติดตั้ง npm install -g nsp และถ้าจะสแกนโปรเจคก็สั่ง nsp check แค่นี้
รายละเอียด: https://goo.gl/1dHH4e
ก่อนขึ้น production อย่าลืมตรวจสอบกันด้วยนะครับ 🙂
—
โค้ชเอก
Bootstrap 4 beta มาแล้ว!! มาอ่านสรุปสั้นๆเกี่ยวกับ Bootstrap 4 beta กันครับว่ามีอะไรใหม่ๆ หรือแตกต่างจากเวอร์ชัน 3 ยังไงบ้าง
.
1. เปลี่ยนจากใช้ Less มาเป็น Sass
2. ไม่มี thumbnails, wells และ panels แล้วนะครับ แต่จะมี Cards component ให้ใช้แทน (เขียนด้วย flexbox)
3. มีการใช้ HTML resets ชื่อว่า Reboot (cross-browser rendering) โดย forked จาก normalize.css อีกที
4. ไม่รองรับ IE8,IE9 แล้วนะครับ ถ้าใครจะใช้ก็ให้ไปใช้ Bootstrap เวอร์ชัน 3 แทน
5. สำหรับ javascript plugin เขียนใหม่ทั้งหมด ด้วย JavaScript ES6 ครับ
6. ใช้ Popper.js สำหรับช่วยทำ tooltips, popovers และ dropdowns ต่างๆ
7. build tools ตัวใหม่ ใช้ npm scripts แทน Grunt ครับ
8. เปลี่ยนขนาดฟอนต์แบบ global จาก 14px เป็น 16px
9. ไม่มี Glyphicons ติดมาให้แล้ว ถ้าอยากใช้ก็ให้นำเข้ามาใช้เอง
10. เปลี่ยน คลาสของปุ่ม จาก .btn-default ไปเป็น .btn-secondary
11. มีคลาส .table-inverse เพิ่มเข้ามาสำหรับตกแต่งตาราง
12. รองรับความกว้างของ .container 5 ขนาด (เพิ่มจาก bootstrap 3) ดังนี้
– Extra small
– Small
– Medium
– Large
– Extra large
13. ถ้าอยากได้ heading ที่ใหญ่และเด่นกว่าปกติ สามารถใช้ class display-* ได้ มี 4 ขนาด ดังนี้
<h1 class=”display-1″>Display 1</h1>
<h1 class=”display-2″>Display 2</h1>
<h1 class=”display-3″>Display 3</h1>
<h1 class=”display-4″>Display 4</h1>
14. การทำให้รูปภาพให้เป็น responsive ให้ใช้คลาส class=”img-fluid” (เดิมเป็น .img-responsive) ตัวอย่างเช่น
<img src=”myimage.jpg” class=”img-fluid” alt=”Responsive Image”>
เว็บของ Bootstrap 4 beta ถูกออกแบบใหม่เลยนะครับ เข้าไปดูได้ที่ : https://getbootstrap.com/
ส่วนใครอยากปรับจากเวอร์ชันเป็นตัวนี้ ก็ดูการเปลี่ยนแปลงต่างๆได้ที่ : https://getbootstrap.com/docs/4.0/migration/
.
—-
โค้ชเอก
Coding Mentor
1. Hosting หรือ Server ที่ใช้ต้องรองรับ PHP 7.0 ขึ้นไปครับ ส่วน MySQL ถ้าให้ดีแนะนำเวอร์ชัน 5.7+ เลยครับผม
.
2. เป็น LTS (Long Term Support) ครับสำหรับเวอร์ชันนี้ จะมีการดูแล bug ต่างๆให้ 2 ปี และดูแลเรื่องความปลอดภัยให้ 3 ปี
.
3. กลับมาใช้ Whoops ซึ่งเป็น framework สำหรับแสดงและจัดการ errors ต่างๆ (เคยมีใช้ใน Laravel 4)
.
4. หากเราใช้คำสั่ง php artisan vendor:publish จะมีเมนูให้เลือกครับว่าจะ publish provider หรือ tag ตัวไหน
.
5. มี Email Themes มาให้เลยครับ (ยืดหยุ่นกว่าเดิม) เขียนส่งเมล์ปุ๊บ ผู้รับเตรียมรับอีเมล์สวยๆได้เลย แถม custom จัดการ theme ได้ยืดหยุ่นกว่าเวอร์ชันก่อนหน้านี้
.
6. เราสามารถทดสอบการแสดงผลของ template mail ต่างๆ ได้บน Browser แล้วครับ
.
7. มีคำสั่ง migrate:fresh มาให้ครับ คือจะ drop table ทุกตัว และ migrate อีกครั้ง (สะดวกมาก)
.
8. มี Automatic Package Discovery ให้ใช้ครับ สำหรับคนที่เขียน Package เอง ตัว Laravel จะ register Service Provider และ Facade ให้เราอัตโนมัติเลยครับ โดยให้เราตั้งชื่อเล่น (aliases) และ providers ให้กับ package ของเราได้ในไฟล์ composer.json ส่วนคนใช้ก็สบายเลยครับ ติดตั้ง package เสร็จก็ใช้ได้ทันที ไม่ต้องเพิ่มเองแล้ว
.
9. เพิ่ม Frontend Presets มาให้ด้วยครับ เราสามารถเลือกได้ว่าจะใช้ frontend ตัวไหน ได้แก่ Bootstrap (css) , Vue, React หรือจะ custom เองก็ได้ ปกติ default จะเป็น Vue.js นะครับ แต่หากต้องการใช้ react ก็ใช้ได้ด้วยคำสั่ง php artisan preset react หรือไม่ต้องการใช้อะไรเลยก็ใช้คำสั่ง php artisan preset none
.
10. สามารถสร้างหรือตั้งกฏการตรวจสอบความถูกต้องของข้อมูลขึ้นมาเองได้ และกำหนด message ที่จะแสดงได้ด้วยครับ (Custom Validation Rules)
.
11. สามารถ debug พวก collection ต่างๆ ที่ซับซ้อนได้ ด้วยคำสั่ง dump() และ dd() (สามารถต่อคำสั่ง dump() ระหว่าง method ที่เชื่อมกันได้)
.
ตอนนี้ผมลองติดตั้งทดสอบดูแล้วครับ ถ้าใครอยากลองก็ลงผ่าน composer ได้นะครับ ด้วยคำสั่ง
composer create-project laravel/laravel <ชื่อโปรเจค> dev-develop
โค้ชเอก
Angular CLI เป็นเครื่องมือแบบ command line interface ช่วยให้เราเขียน Angular ได้ง่าย และยังช่วยจัดโครงสร้างและโค้ดให้ถูกต้องตามหลักของ Best Practices อีกด้วย ถ้าใครจะเริ่มเขียน Angular ก็แนะนำให้ใช้ และศึกษาได้เลยครับ 🙂
.
1. ติดตั้ง Angular CLI (แบบ global) ด้วยคำสั่ง
npm install -g @angular/cli
.
2. ดู help ทั้งหมดของ Angular CLI ด้วยคำสั่ง
ng help
.
3. ดูเวอร์ชัน Angular CLI ด้วยคำสั่ง
ng -v
.
4. เปิดดู doc และค้น keyword ในเว็บ angular.io ด้วยคำสั่ง
ng doc [คำที่ต้องการค้น]
.
5. สร้างโปรเจคใหม่ ด้วยคำสั่ง
ng new [ชื่อโปรเจค]
Options ที่น่าสนใจ
5.1 –skip-install หากยังไม่ต้องการติดตั้ง packages ต่างๆ
5.2 –skip-tests หากไม่ต้องการให้สร้างไฟล์ test (spec files)
5.3 –routing หากต้องการให้สร้าง routing module แยกต่างหาก
5.4 –prefix [ข้อความ prefix] ตั้ง default selector prefix ของทุก components
5.5 –skip-git หากไม่ต้องการเพิ่มโปรเจคเข้าไปใน git
ตัวอย่างการใช้
ng new MyProject –routing –style sass prefix hello –skip-git
.
6. หากต้องการ set ค่า config ต่างๆ ในภายหลัง (ในไฟล์ .angular-cli.json) ใช้คำสั่ง
ng set เช่น ng set defaults.styleExt sass
* ใช้ -g ต่อท้าย สำหรับ global set
.
7. ตรวจสอบความถูกต้อง และจัดการโค้ด typescript ที่เราเขียน ด้วยคำสั่ง
ng lint
.
8. สร้าง หรือ gen ไฟล์ blueprint ด้วยคำสั่ง
ng generate หรือ ng g
เช่น หากต้องการสร้าง component ก็ให้ใช้คำสั่ง ng generate component <ชื่อ component> หรือ ng g c <ชื่อ component>
หรือถ้าต้องการสร้าง module และ routing module ด้วย ก็ให้ใช้คำสั่ง ng g m <ชื่อ module> –routing
หรือต้องการสร้าง Routing Guard ก็ใช้คำสั่ง ng generate guard <ชื่อ guard>
.
9. Serve โปรเจค ด้วยคำสั่ง
ng serve
Options ที่น่าสนใจของ ng serve
9.1 –open หรือ -o ไว้เปิด default browser เช่น ng serve -o
9.2 –port หรือ -p ระบุ port ที่ต้องการ เช่น ng serve -p 8626
.
10. Build โปรเจค (Development Build) ด้วยคำสั่ง
ng build
.
11. Build โปรเจค (Production Build) ด้วยคำสั่ง
ng build –prod
.
12. Unit Tests (Karma) ด้วยคำสั่ง
ng test
.
13. End to End Tests (Protractor) ด้วยคำสั่ง
ng e2e
1. ต้อง Validate input หรือตรวจสอบความถูกต้องของข้อมูลทุกอย่างที่นำเข้ามา เช่น ต้องตรวจสอบว่ามีข้อมูล หรือใช่ข้อมูลที่เราต้องการจริงๆ หรือใหม่
เช่น การใช้ isset(), ?? operator, is_*() อาจเขียนเอง หรือใช้ ctype Extension หรือ ฟังก์ชัน filter_var, filter_input
ส่วนใน PHP 7 ให้ใช้ความสามารถของ Type Declarations โดยต้องประกาศคำสั่ง
declare(strict_types=1);
ไว้บนสุดของไฟล์ เพื่อ strict ชนิดของตัวแปรครับ
2. การป้องกัน Cross-site Scripting (XSS) ต้องมีการกรอง หรือ Filtering Input เสมอ เช่น
– ใช้คำสั่ง strip_tags($s) เพื่อเอาคำสั่ง HTML ออกไป
หรือจะใช้คำสั่ง filter_var($s, FILTER_SANITIZE_STRING) เพื่อเอาคำสั่ง HTML ออกก็ได้เหมือนกัน
– ใช้คำสั่ง preg_replace($, ‘/…/’, ”) เพื่อกรองและป้องกันด้วย regular expressions (เขียนเอง)
2.1 การป้องกัน Cross-site Scripting อีกอย่าง คือ การใช้ฟังก์ชัน htmlspecialchars($s) ยกตัวอย่างที่ควรทำ
เช่น
//ตัวอย่าง string
$s = ‘<p class=”c”>Let\’s go!™</p>’;
//วิธีการเขียนที่ดี
echo htmlspecialchars($s);
echo htmlspecialchars($s, ENT_QUOTES);
echo htmlentities($s, ENT_QUOTES);
echo filter_var($s,FILTER_SANITIZE_FULL_SPECIAL_CHARS);
2.2 การป้องกัน Cross-site Scripting ด้วยการส่งไฟล์ชนิด JSON เข้ามา
$data = [
‘term’ => $_GET[‘q’]
];
header(‘Content-type: application/json’);
echo json_encode(
$data,
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT |
JSON_HEX_AMP);
3. การป้องกัน SQL Injection
3.1 อย่างแรกให้ escape string ที่เข้ามา ยกตัวอย่าง เช่น
//สำหรับ MySQL/MariaDB
mysqli_real_escape_string($db, $value);
หรือ $db->real_escape_string($value);
//สำหรับ PostgreSQL
pg_escape_string($db, $value);
//สำหรับ SQLite
SQLITE3::escapeString($value);
3.2 ใช้ Prepared Statements ของ PDO (PHP Data Objects) ตัวอย่าง เช่น
$db = new PDO(…);
$sql = ‘INSERT INTO searches (term) VALUES (:term)’;
$cmd = $db->prepare($sql);
$cmd->bindParam(‘:term’, $term);
$cmd->execute();
3.3 ใช้ Prepared Statements ของ MySQLi
$db = new MySQLi(…); //mysqli_connect()
$sql = ‘INSERT INTO searches (term) VALUES (?)’;
$cmd = $db->prepare($sql); //mysqli_prepare()
$cmd->bind_param(‘s’, $term); //mysqli_stmt_bind_param()
$cmd->execute(); //mysqli_stmt_execute()
ป.ล. สำหรับคนที่ไม่ได้เขียนในแนว OOP ลองค้นเพิ่มได้ครับ วิธีการคำสั่งคล้ายกัน
4. เพิ่มความปลอดภัยให้กับ Cookies แนะนำให้ใช้ HTTPS และใช้ฟังก์ชัน setcookie ให้ถูกต้อง ด้วยการ set ค่าพารามิเตอร์ secure ให้เป็น true (กรณีใช้ https) และค่า httponly ให้เป็น true
ดูฟังก์ชัน setcokkieได้ที่นี่ http://goo.gl/4QulZg
ตัวอย่างการเขียน
//ปลอดภัย
setcookie(‘Cookie1’, rand(100, 999), 0, ‘/’, ”, true, true);
//ไม่ปลอดภัย
setcookie(‘Cookie2’, rand(100, 999), 0, ‘/’, ”, false, false);
5. การป้องกัน Cross-site Request Forgery (CSRF)
5.1 สร้างและเก็บค่า token โดยการสุ่มขึ้นมา
$name = ‘token-‘ . mt_rand();
$token = random_bytes(32);
$_SESSION[$name] = $token;
5.2 นำค่าตัวแปร token ไปใส่ไว้ในทุกๆฟอร์ม เช่น
<input type=”hidden” name=”_csrfname” value=”token-123456″>
<input type=”hidden” name=”_csrfvalue” name=”a1b2c3d4e5f6″>
5.3 จากฟอร์มข้อ 5.2 เมื่อผู้ใช้คลิก Submit ฟอร์มแล้วก็อย่าลืม isset เช็คตัวแปร และค่าด้วยนะครับว่าตรงกันกับที่ส่งมามั้ย
ป.ล. จากข้อ 5.2 นี้ถ้าใครเคยเขียน Framework จะเห็นว่าเกือบทุก Framework จะมีมาให้แล้ว
6. เข้ารหัส Password ด้วยวิธีที่ถูกต้อง
6.1 Hash passwords ทุกครั้ง
6.2 อย่าใช้ algorithms เช่น MD5 หรือ SHA1 (มันเก่าแล้ว และไม่ปลอดภัย)
6.3 ให้ใช้ Password Hashing API ของ PHP เช่น
password_hash(), password_get_info(), password_needs_rehash(), password_verify()
ใน Laravel 5.3 คร่าวๆ จะมี Features ใหม่ ที่น่าสนใจ ดังนี้
– Laravel Scout เป็นระบบค้นหา (รองรับ full-text search) สำหรับ Eloquent ไม่ต้องเขียนเองแล้ว และมาพร้อมกับ Pagination ด้วย
– Laravel Mailable เป็นคลาสใหม่ สำหรับใช้ส่งเมล แน่นอนง่ายกว่าเดิม
– Laravel Passport เป็น package สำหรับ OAuth 2 สำหรับทำล็อกอินเชื่อมต่อ facebook, twitter และอื่นๆ
– Laravel Notifications เป็นระบบแจ้งเตือน ไว้แจ้งเตือน SMS, Email หรือ Slack ก็ได้
– Rollback one migration สามารถ rollback migration ทีละ step ได้แล้ว
– Customize simple pagination สามารถ Custom View ของการแบ่งหน้าได้แล้ว
– Blade Loop Variable ทำให้เราเข้าถึงและเขียนเกี่ยวกับตัวแปรภายใน Loop ได้ง่ายขึ้น เช่น count, first, last เป็นต้น
– Storing Uploaded Files สามารถอัพโหลดไฟล์แบบง่ายๆได้เพียงบรรทัดเดียว!
ตัวอย่างโค้ด
$request->file(‘inputfile’)->store(‘images’);
และก็มี method storeAs() ให้เรา custom ได้ด้วย จะ save ลง disk หรือ Amazon S3 ก็ได้ ด้วยการเขียนโค้ดเพียง 2-3 บรรทัดครับ
ดู features ทั้งหมด ได้ที่นี่
https://laravel.com/docs/5.3/releases
สำหรับคนที่ใช้ Laravel 5.2 อยู่ ดูการอัปเกรดได้ที่นี่
https://laravel.com/docs/master/upgrade#upgrade-5.3.0
แนะนำ package CKEditor กับ File Manager (ใช้ร่วมกัน) สำหรับคนที่เขียน Laravel 5.2 ครับ เท่าที่ผมลองใช้ดู คิดว่ามือใหม่ติดตั้งได้ไม่ยากเลย🙂
1. ให้ติดตั้ง CKEditor ก่อน รายละเอียด
https://goo.gl/ZQBvN7
2. แล้วต่อด้วย File Manager ตามนี้
https://goo.gl/E05NBS
config ให้ดูตามคู่มือของแต่ละตัวนะครับ ไม่ยาก ลองดูครับผม