แนะนำแหล่งศึกษา JavaScript สมัยใหม่

สำหรับคนที่สนใจศึกษา JavaScript สมัยใหม่ แนะนำให้ลองอ่าน และเขียนโค้ดจากเว็บนี้นะครับ ค่อนข้างครบ สรุปได้ดี และน่าจะประหยัดเวลาในการเรียนรู้เยอะทีเดียว 🙂

.
รายละเอียด: https://javascript.info/

.
ลองดูครับ
โค้ชเอก

แนะนำ Howler.js ครับ

แนะนำ Howler.js ครับ เป็น Audio library สำหรับ modern web

สามารถควบคุมการเล่นเสียงทุกรูปแบบ และยังข้าม platforms ด้วย แน่นอนเราสามารถประยุกต์ใช้กับ Hybrid Mobile App ได้เหมือนกัน ตัวนี้ google, disney, NASA, EA ก็ใช้นะ ลองดูครับ

รายละเอียดและ DEMO: https://howlerjs.com/

แนะนำขั้นตอนการเรียนรู้ JavaScript Framework สมัยใหม่

ถ้าอยากศึกษา JavaScript framework สมัยใหม่ แน่นอนเราต้องเรียนรู้ JavaScript สมัยใหม่ด้วยครับ ปัจจุบัน JavaScript ได้เพิ่มคุณสมบัติต่างๆ เข้ามามากมายเลย

ถ้าให้ผมแนะนำ ขอแนะนำ ดังนี้

1. ศึกษา JavaScript พื้นฐานก่อนครับ ไม่ว่าเป็นเรื่องง่ายๆอย่าง ตัวแปร (variable) , Arrays, Objects, Functions และอื่นๆ ผมทำสอนไว้บ้างตามนี้ http://goo.gl/vXT9bC

2. จากนั้นต่อด้วย JavaScript ES6 ครับ ดูหัวข้อคร่าวๆได้ในภาพ (ตรงนี้อนาคตก็คงมี ES7 ,ES8 แต่ก็ไม่ต้องห่วงครับ ถ้าเรามีพื้นฐาน ES6 อยู่แล้ว ก็ให้ศึกษาคุณสมบัติที่มันเพิ่มเติมเข้ามา)

ยกตัวอย่าง ถ้าเราต้องการศึกษา Angular 2 ซึ่งเขียนด้วย TypeScript (จริงๆเขียนด้วย ES6 ก็ได้) เราก็ศึกษาเพิ่มเติมอีกนิดหน่อย เพราะเราสามารถนำความรู้จาก JavaScript ES6 มาใช้ได้เลย (TypeScript เองเป็น superset ของ JS อยู่แล้ว

ส่วน JavaScript Framework อื่นๆ ที่ไม่ได้ใช้ TypeScript แน่นอนก็สามารถนำความรู้ JavaScript ES6 มาใช้ได้เลย 🙂

อย่าลืมครับ “การข้ามความรู้พื้นฐาน มักสร้างความยุ่งยากตามมาเสมอ และจะยุ่งยากมากขึ้นไปอีก ถ้าข้ามความรู้พื้นฐาน JavaScript 55+ ” มาลุยกัน!

แนะนำ Leaflet.js ไว้จัดการและทำแผนที่

แนะนำ Leaflet.js เป็น JavaScript library เกี่ยวกับการจัดการแผนที่อีกตัวที่น่าใช้มากๆครับ น้ำหนักเบาเพียง 33KB ฟีเจอร์เพียบ โค้ดสั้นกระชับ เหมาะกับมือถืออีกด้วย ลองใช้กันได้ครับ

รายละเอียด
http://leafletjs.com/

อันนี้ e-Book ฟรี (สมัครสมาชิก แล้วโหลด)
http://goo.gl/bU5Epg

วิดีโอสอนฟรี

https://sirensoft.github.io/#free

แนะนำ Sails.js MVC Framework สำหรับ Node.js

แนะนำ Sails.js MVC Framework สำหรับ Node.js ที่ครบเครื่อง ใช้งานง่าย และมี features ครบถ้วน ครับ

 

จุดเด่น
1. เหมาะสำหรับทำ RESTful APIs มาก เพราะมีตัว genereate โค้ดอัตโนมัติภายในบรรทัดเดียว!
2. เหมาะสำหรับงานแบบ Realtime โค้ดที่ใช้เขียนง่าย และสั้นมาก! (เขียนครอบ socket.io อีกที)
3. มี ORM ให้ใช้ สามารถติดต่อฐานข้อมูลได้หลายตัว เช่น MySQL, PostgreSQL, MongoDB, SQLite3, Redis เป็นต้น (ใช้ Waterline ORM)

————————
เว็บไซต์
http://sailsjs.org/

https://goo.gl/2Krndf

สอนใช้งานบน Youtube
https://goo.gl/OwtRIR

โค้ดตัวอย่าง
https://github.com/sails101

ใครที่เคยเขียนแนว MVC อยู่แล้วคงจะชอบมาก ลองใช้ดูได้ครับ

20 แนวทางการเขียน JavaScript ที่ดี

javascript-736400_640

1. ใช้เครื่องหมาย === และ !== แทนการใช้ == และ != เมื่อมีการเปรียบเทียบเสมอ

2. ปิดท้ายคำสั่งด้วยเครื่องหมาย ; ทุกครั้ง

3. ใช้ JSLint (http://www.jslint.com) ในการหาตรวจสอบคุณภาพโค้ด และตรวจดู errors ต่างๆ

4. ถ้ามีการเปิด blocks ของโค้ด ให้เขียนวงเล็บปีกกาในบรรทัดเดียวกัน เช่น

5. การประกาศตัวแปร (Variables) ให้ประกาศบรรทัดแรกทุกครั้งโดยเฉพาะฟังก์ชันเพื่อป้องกันปัญหาเรื่อง global variable เช่น

6. การประกาศตัวแปรให้ขึ้นต้นด้วย var ทุกครั้ง

7. ใช้วงเล็บปีกกา {} เสมอในกรณีที่ประกาศบล็อกมากกว่าหนึ่งบล็อก (blocks) ถ้ามี 1 บล็อกก็ให้อยู่บรรทัดเดียวกัน เช่น

8. การ embed โค้ด แทรกโค้ด javascript ให้แทรกด้านล่างของหน้าเว็บเสมอ (ก่อน tag body)

9. ประกาศตัวแปรต่างๆ ไว้นอกคำสั่ง for เสมอ เมื่อประกาศแล้ว ค่อยนำมาใช้ใน for เช่น

10. อย่าเอาคำสั่งที่เป็นตัวอักษร (String) ไปไว้ในคำสั่ง “SetInterval” หรือ “SetTimeOut” เช่น

ให้เขียนเป็นฟังก์ชันแล้วเรียกใช้ดีกว่า

11. ถ้าจะสร้าง Object ใหม่ให้ใช้ {} ปีกกา แทนการใช้ New Object() เช่น

12. Arrays ก็เช่นกันให้ใช้ [] แทน New Array()

13. ลบคำว่า “language” ออกจากคำสั่ง script เพราะมันไม่จำเป็นแล้ว
จาก

เขียนแค่นี้พอ

หรือ

14. ถ้าประกาศ Objects อย่าใช้คำสงวน เป็นคีย์ (key) เพราะมันจะใช้ไม่ได้ใน IE8

15. ใช้ฟังก์ชัน push ของ Array ในการกำหนดค่าเข้าไปในแทนการใส่ค่าโดยตรง เช่น

16. ใช้เครื่องหมาย Single quotes (‘) สำหรับสตริง (String) เช่น

17. ใช้เครื่องหมายจุด . ในการเข้าถึงพรอพเพอร์ตี้ (properties) ของ Objects เช่น

ตอนเข้าถึง properties ให้เรียกแบบนี้

18. ใช้หนึ่ง var หรือหนึ่ง let ต่อหนึ่งตัวแปร เพราะดูง่าย และป้องกันความผิดพลาด เช่น

19. ตัวแปรที่ยังไม่มีค่า ให้ประกาศไว้ข้างหลังสุดของการประกาศตัวแปรทั้งหมด เช่น

20. ใช้การเขียนโค้ดแบบ camelCase คือ ขึ้นต้นด้วยตัวเล็กและคำต่อไปขึ้นต้นด้วยตัวใหญ่ เมื่อต้องการตั้งชื่อออบเจ็กต์, ฟังก์ชัน, และ อินสแตนซ์ และ ใช้ PascalCase คือ ขึ้นต้นทุกคำด้วยตัวใหญ่ เมื่อต้องการตั้งชื่อ constructor หรือ คลาส

แน่นอนทั้ง 20 ข้อนี้บางข้อเป็นเพียงข้อแนะนำ ก็ลองปรับให้เข้ากับตัวเองดูนะครับ 🙂