ใครที่กำลังมองหา datetime picker ที่ยืดหยุ่น มีขนาดเล็ก และใช้ง่าย ลองใช้ flatpickr ดูครับ
.
จุดเด่นคือ มีความสวยงาม ไม่ต้องการ dependencies ใดๆ สามารถใช้งานได้ทันที นอกจากนี้ ยังมี themes ให้เลือกถึง 8 แบบ ด้วยกัน
แน่นอน เราสามารถนำไปใช้กับ Angular, Vue หรือ React ได้ด้วยครับ
.
รายละเอียด: https://github.com/flatpickr/flatpickr
.
ลองดูครับ
โค้ชเอก
สำหรับคนที่เขียน React Native อยากทำรายงานแบบ Charts แนะนำลองใช้ตัวนี้ได้นะครับ ค่อนข้างยืดหยุ่น และสามารถ custom สไตล์ต่างๆ ได้ดี
.
รายละเอียด: http://bit.ly/2IsBRQ5
.
จริงๆ ตัวนี้ก็มีเวอร์ชันสำหรับเว็บด้วยนะ สำหรับคนที่เขียน React ก็ลองดูได้เลยครับ
.
โค้ชเอก
1. ใช้ TypeScript เวอร์ชัน 3.4 ล่าสุด
.
2. เปลี่ยนวิธีเขียน lazy-loading แบบใหม่ (Routing) เพื่อรองรับการใช้งาน Ivy จะแก้โค้ดเองก็ได้ครับ แต่แนะนำให้ใช้คำสั่งอัปเดตจะดีกว่า (ดูข้อ 10) เพราะว่าตัว Angular CLI จะอัปเดตโค้ดส่วนนี้ให้อัตโนมัติเลย
เดิม
{ path: ‘admin’, loadChildren: ‘./admin/admin.module#AdminModule’ }
แบบใหม่ แก้เป็น
{ path, ‘admin , loadChildren: () => import(‘./admin/admin.module’).then(m => m.AdminModule) }
.
3. Angular CLI 8 เปลี่ยนมาใช้ dart-sass แทน node-sass ทำให้การ build ไฟล์ Sass เร็วขึ้นอีกมาก ๆ
.
4. Angular CLI 8 จะ default build target เป็น es2015 แทน es5 เดิมแล้วนะครับ (ดูได้ที่ไฟล์ tsconfig.json)
ทำให้ต่อไปเวลาสั่ง ng build จะมีไฟล์ build เพิ่มมาอีก 2 เวอร์ชัน ครับ คือ es2015 และ es5 ถ้าโปรเจคเราเปิดด้วย Browsers สมัยใหม่ ก็จะเรียกไฟล์ build ที่่เป็น es2015 ครับ (ตอน runtime) แต่ถ้าเปิดด้วย IE 9-11 ก็จะเปลี่ยนมาใช้ไฟล์ build ที่เป็น es5 แทน (แน่นอนไฟล์ที่ build ด้วย es5 จะมีขนาดใหญ่กว่า es2015 ครับผม)
อีกประเด็นที่สำคัญคือเรื่องของ CSS ถ้าหากใครที่ใช้ IE 9-11 อยู่ ก่อนที่จะ build โปรเจค อย่าลืมไปเปิดใช้งาน autoprefixer ด้วยโดยลบคำว่า not ออกจากบรรทัด not IE 9-11 ที่ไฟล์ browserslist ครับผม
.
5. ใน Angular 8 รองรับการใช้งาน compiler (และ runtime) ตัวใหม่ที่ชื่อว่า Ivy ทำให้ประสิทธิภาพของโปรเจค Angular เราดีขึ้นมาก แนะนำให้ใช้ได้เลยนะครับ
สามารถทำได้ตอนสร้างโปรเจคใหม่ ด้วยคำสั่ง ดังนี้
ng new project –enable-ivy
ถ้าใครอัปเกรดมาจากเวอร์ชันก่อนหน้า ก็ไปตั้งค่าที่ไฟล์ tsconfig.app.json ได้ครับ ในส่วนของ compilerOptions เพิ่มคำสั่งดังนี้
“angularCompilerOptions”: {
“enableIvy”: true
}
*อนาคตตัวนี้จะถูกเปิดโดย default ใน Angular เวอร์ชัน 9 เลย
.
6. เพิ่ม method ชื่อว่า clear() ให้กับ FormArray คือ ไม่ต้อง loop ลบ controls เองเหมือนแต่ก่อน ตัวอย่าง
const products = fb.array([product1, product22]);
products.clear();
.
7. รองรับการเขียน Web Worker ซึ่งเป็นอีกทางที่จะทำให้โปรเจคเราเร็วขึ้นได้ ดูเพิ่มเติมได้ที่ => https://angular.io/guide/web-worker
.
8. จะมีเลิกใช้ @angular/platform-webworker เร็วๆนี้ครับ และเอา package @angular/http ออกเป็นที่เรียบร้อยแล้ว (ใช้ @angular/common/http แทน)
ใครอยากดูว่า Angular จะเอาอะไรออกบ้างในอนาคต ดูได้ตามลิงก์นี้ได้ครับจะเตรียมตัวไว้ => https://angular.io/guide/deprecations
.
9. มี CLI Builders เพิ่มเข้ามาใหม่ เผื่อใครอยาก custom คำสั่ง command line ต่างๆ ดูเพิ่มเติมได้ที่ => https://angular.io/guide/cli-builder
.
10. สำหรับคนที่เรียนคอร์สเรียนออนไลน์ไปแล้ว (ถ้าใช้ Angular เวอร์ชัน 7) สามารถอัปเดตเป็น Angular 8 ได้เลยนะครับ (อย่าลืม backup โปรเจคเดิมด้วยนะ) ด้วยคำสั่ง
ng update @angular/cli @angular/core
รันเลย! ยินดีด้วยโปรเจคของเราอัปเกรดเป็น Angular 8 เรียบร้อย ฮ่าๆ ง่ายมาก
.
ขอบคุณที่ติดตามอ่านครับ
โค้ชเอก
สำหรับคนที่สนใจศึกษา JavaScript สมัยใหม่ แนะนำให้ลองอ่าน และเขียนโค้ดจากเว็บนี้นะครับ ค่อนข้างครบ สรุปได้ดี และน่าจะประหยัดเวลาในการเรียนรู้เยอะทีเดียว 🙂
.
รายละเอียด: https://javascript.info/
.
ลองดูครับ
โค้ชเอก
เนื้อหาในเล่มนี้จะเน้นการเตรียมเครื่องมือ และการติดตั้งโปรแกรมต่างๆ แบบ step by step จนสามารถเริ่มเขียน React Native ได้ จุดประสงค์หลักๆ เพื่อให้ทุกคนสามารถเริ่มและต่อยอดศึกษา React Native ได้อย่างรวดเร็ว และประหยัดเวลาครับ
จากที่ได้ยินหลายคนจะมีปัญหาในการติดตั้ง React Native มากเลย บางคนใช้เวลา setup หลายชั่วโมง หรือบางคนหลายวันเลย ก็หวังว่าหนังสือเล่มนี้จะช่วยประหยัดเวลาตรงนี้ได้นะครับ
(หนังสือเป็น PDF จำนวน 35 หน้า A5)
ดูเนื้อหา และดาวน์โหลดหนังสือ ที่นี่ => http://bit.ly/2De8Zbj
โค้ชเอก
Laravel 5.8 เพิ่งออกมาครับ เป็น Laravel เวอร์ชันใหม่ล่าสุดที่ถูกพัฒนาและเพิ่ม features ต่างๆจากเวอร์ชัน 5.7 นั่นเอง โดยรวมแล้วมีการเพิ่ม features หลายอย่างด้วยกันยกตัวอย่างเช่น มีการเพิ่ม has-one-through ของ Eloquent relationships, ปรับปรุงเรื่อง validation ของ email รวมถึงอัปเกรดเวอร์ชัน packages ต่างๆ ยกตัวอย่างเช่น PHPUnit 8.0, Carbon 2.0, Pheanstalk 4.0, dotenv 3.0 เป็นต้น
มาดูเป็นข้อๆครับว่าในเวอร์ชันนี้ใหม่นี้มีอะไรบ้าง…
1. มีการเพิ่มคุณสมบัติ Auto-Discovery ให้กับ Model Policies สำหรับคนที่ใช้งาน Policy อยู่ก็ไม่ต้อง register ในไฟล์ AuthServiceProvider แล้วนะครับ แต่เราต้องตั้งชื่อ Model ให้ถูกหลักด้วย เช่น ถ้ามี Model ชื่อว่า Product ก็ให้ตั้งว่า ProductPolicy เก็บไว้ในโฟลเดอร์ app/Policies ครับ แค่นี้ก็ใช้ได้เลย
2. ใน Laravel 5.8 จะเปลี่ยนการระบุเวลาของ Cache จากนาทีเป็นหน่วยวินาทีนะครับ ตามมาตรฐานของ PSR-16 ยกตัวอย่างเช่น
// ใน Laravel 5.7 จากโค้ดด้านล่างนี้หมายถึง 30 นาที
Cache::put(‘foo’, ‘bar’, 30);
// ใน Laravel 5.8 จะหมายถึง 30 วินาที!!
Cache::put(‘foo’, ‘bar’, 30);
// ทั้ง Laravel 5.7 หรือ 5.8 อันนี้หมายถึงใช้วินาทีครับ เขียนแบบนี้จะเข้าใจง่ายกว่า
Cache::put(‘foo’, ‘bar’, now()->addSeconds(30));
**ใครที่ใช้ 5.7 อยู่ต้องระวังเรื่องนี้ด้วยนะครับจะกระทบกับโค้ดเก่าของเราโดยตรงเลยถ้าจะ upgrade มาใช้ 5.8
3. สำหรับคนที่เขียน APIs (ใช้ token guard) ตอนนี้ในส่วนของการสร้าง tokens สามารถ hash tokens ในรูปแบบของ SHA-256 ได้แล้วครับเพื่อความปลอดภัย โดยสามารถตั้งค่า hash เป็น true ได้ในที่ไฟล์ config/auth.php ในส่วนของ api guard ครับ
*ถึงแม้วิธีนี้จะง่าย แต่จริงๆ ถ้าให้ดีก็ควรใช้ Laravel Passport ไปเลยดีกว่าครับ
4. สามารถกำหนด Default Timezone ให้กับ scheduled task ได้แล้วนะครับ ทั้งในส่วนของแต่ละ method หรือจะกำหนด default timezone ให้กับทั้ง scheduled tasks ทั้งหมดก็ได้ เช่น
$schedule->command(‘inspire’)
->hourly()
->timezone(‘Asia/Bangkok’);
.
5. สามารถแสดง path เต็ม และชื่อไฟล์ original ของ Blade Template ที่ผ่านการ Compiled ได้แล้วครับ (แสดงส่วนบนของไฟล์) อันนี้ทำให้เวลา error สามารถดูชื่อ view ได้ง่ายขึ้น ดูภาพที่ http://bit.ly/2C4PRMx
6. เราสามารถใช้ driver เป็น DynamoDB ได้แล้ว เพื่อทำ cache และ session ในโปรเจคของเรา
7. กำลังจะยกเลิก global helpers ในส่วนของ array และ string แล้วครับ ใครที่ใช้อยู่ในเวอร์ชันต่อไป (5.9) จะเอาออกแล้วนะ ถ้าจะใช้ก็ให้ use คลาสมาใช้โดยตรง ยกตัวอย่างเช่น
use Illuminate\Support\Arr;
// จะยกเลิกแล้ว
array_add($array, $key, $value);
// ใช้แบบนี้แทน
Arr::add($array, $key, $value);
8. เปลี่ยนโฟลเดอร์ Markdown mail จาก /resources/views/vendor/mail/markdown ไปเป็น /resources/views/vendor/mail/text
ถ้าใครใช้ตัวนี้ ถ้าอัปเกรดอย่าลืมเปลี่ยนชื่อโฟลเดอร์ด้วยครับ
ส่วนเรื่องอื่นๆ สามารถอ่านเพิ่มเติมได้ที่นี่นะครับ => http://bit.ly/2NHfhnY
สำหรับคนที่อยากอัปเกรดดูได้ที่นี่ => http://bit.ly/2ELMGer
ขอบคุณที่ติดตามอ่านครับ
โค้ชเอก
“ESC/POS Print Driver for PHP” เป็น Library ที่เราสามารถเขียน PHP ติดต่อกับเครื่องพิมพ์ใบเสร็จได้ครับ แน่นอนเราสามารถนำไปเชื่อมกับระบบ POS (point-of-sale)ได้เลย
Library ตัวนี้รองรับ printers ได้หลายยี่ห้อครับ สามารถสั่งพิมพ์รูปภาพ บาร์โค้ด คิวอาร์โค้ด และยังสามารถสั่งตัดกระดาษได้อีกด้วย
สำหรับคนที่สนใจ หรือกำลังอยากพัฒนาระบบ POS อยู่ก็ลองดูได้นะครับ
รายละเอียด: http://bit.ly/2NbZ1ei
โค้ชเอก
สำหรับคนที่เพิ่งเขียน React หรือ React Native ใหม่ๆ เวลาอ่านเอกสารของ React เรื่อง React Lifecycle Methods อาจจะงงๆ เรื่องลำดับ และขั้นตอนการทำงานของ method แต่ละตัว แนะนำให้เข้าไปดูไดอะแกรมในเว็บนี้ได้ครับ เราสามารถคลิกเข้าไปดูรายละเอียดของแต่ละ method ได้เลย
.
รายละเอียด: http://bit.ly/2I4Ngax
โค้ชเอก
1. มี Apache, Nginx, PHP 7.2 (สลับเวอร์ชันได้), Redis, Memcached และรองรับฐานข้อมูลมีทั้ง MySQL/MariaDB, MongoDB และ Postgres ครับ
2. มี Pretty URLs (Auto Virutal Hosts) !! ไม่ต้อง set อะไรครับ เพียงแค่เราสร้างโฟลเดอร์โปรเจคก็จะได้ virutal hosts มาเลย ยกตัวอย่าง เช่น ถ้าสร้างโฟลเดอร์ project1 จะได้ url เป็น http://project1.test มาเลย!
3. มีฟีเจอร์ Quick create เราสามารถติดตั้ง Laravel, CakePHP, WordPress, Joomla, Prestashop และอื่นๆ ได้เพียงแค่คลิกเดียว!
4. เราสามารถแชร์โปรเจคที่อยู่ในเครื่องของเรา (localhost) ออกสู่สาธารณะได้ เช่น ให้ลูกค้าเข้ามาดูความคืบหน้าของโปรเจคเว็บที่เรากำลังเขียนอยู่ โดยใช้ Ngrok ครับ
5. Portable เราจะย้ายโฟลเดอร์ Laragon ไปที่ drive อื่นๆในเครื่อง บน Cloud หรือ usb ก็ได้
6. จัดการสร้าง SSL certificates อัตโนมัติ!
7. กินแรมน้อยมาก
ดูรายละเอียดได้ที่นี่ : http://bit.ly/2GZ8zdh
จริงๆ แล้ว Laragon ไม่ได้รองรับแค่ PHP เท่านั้นนะครับ ยังรองรับ Stacks อื่นๆ ด้วย เช่น Node.js/MEAN, Ruby on Rails, Python Django/Flask Java Spring/SpringBoot และ Golang
มีใครใช้อยู่มั้ยครับ เป็นอย่างไรบ้าง ต่อไปว่าจะเอามาใช้แทน XAMPP เลยดีกว่า 🙂
โค้ชเอก
1. มีการเพิ่ม APIs ใหม่ เกี่ยวกับ accessibility ที่ใช้งานง่ายขึ้น ได้แก่ accessibilityRole และ accessibilityStates
แน่นอนใช้ได้ทั้ง Android และ iOS ซึ่งเมื่อก่อนต้องเขียนแยกกัน คือ accessibilityComponentType (Android) และ accessibilityTraits (iOS)
APIs นี้จะช่วยบอก Talkback หรือ Voiceover ว่าเป็น UI ประเภทใด และมีสถานะใด App ของเราต้องเป็น App ที่ทุกคนเข้าถึงได้!
2. สำหรับ iOS ตัว WebView component จะเปลี่ยนมาใช้ WKWebView ครับ (ตัวเก่าใช้ UIWebViews ซึ่ง apple จะยกเลิกแล้ว!)
ซึ่งการใช้ WKWebView จะทำให้การรัน JavaScript ได้เร็วขึ้นกว่าเดิม และใช้ประโยชน์จาก multi-process architecture อีกด้วย
การใช้งานคือเพิ่ม useWebKit prop มีค่าเป็น true ดังนี้
<WebView useWebKit={true} source={{url: ‘https://codingthailand.com’}} />
3. สำหรับ Android ก็จะรองรับ SDK 27, gradle 4.4 แล้ว แนะนำให้ใช้ Android Studio 3.1 ก่อน เพราะจะมีปัญหากับการ build อยู่ครับ
4. รองรับ Babel 7 stable!
5. อัปเดต Flow และ React เวอร์ชันใหม่ (16.5.*) แน่นอนทำให้รองรับ React Profiler (เป็น React DevTools plugin สำหรับวัดพวกประสิทธิภาพ และอื่นๆ)
6. ใครที่ใช้ component NavigatorIOS จะกำลังจะถูกยกเลิก และเอาออกในเวอร์ชัน 0.58 ครับ
7. รองรับ Node.js 8.3 ขึ้นไป
8. สำหรับ Android การแสดงรูปภาพด้วย Image หากไม่มี uri จะ return เป็นค่า null
สำหรับคนที่ใช้เวอร์ชันก่อนหน้านี้ อย่างเช่น 0.56 แนะนำให้อัปเกรดเลยนะครับ เพราะแก้ bug ไปเยอะพอสมควรเลย
ดูรายละเอียดอื่นๆ และอัปเกรดกันได้ที่ => http://bit.ly/2xp0iXM