วิธีย้าย npm project เดิมขึ้น yarn

ผมข้ามขั้นตอนการใช้สำหรับการสร้าง project ใหม่ไป  จะมาทดลองใช้ yarn กับ repository เดิมก่อน (เพราะเขาคุยว่าใช้กับ package.json เดิมได้นิ) basic workflow คือ Creating a new project Adding/updating/removing dependencies Installing/reinstalling your dependencies Working with version control (i.e. git) Continuous Integration 1. เข้าไปที่ project เดิม ตรงนี้ผมใช้ npm เพื่อติดตั้ง gulp (node_modules.rar นั่น zip ไว้กันพลาด) 2. RUN สำหรับคนใช้งาน windows 7 กด shift + right click จะมีเมนูชื่อ Open command …

วิธีติดตั้ง Yarn บน Windows 7/8/10

Yarn! A new package manager for JavaScript “ยาน” เปิดตัวเมื่อ ตุลาคม ปี 2016 ด้วยความร่วมมือจากตัวแทนของ Facebook, Google และ Tilde ซึ่ง Yarn เองคือ JavaScript package manager เช่นเดียวกับ  npm, bower, volo, แต่มันเจ๋งกว่าตรงที่ มันมาแก้ปัญหาโลกแตกของ npm ที่ทำให้เราจัดการ dependency ของ javascript ได้อย่างเยี่ยมยอด! เนื่องจากเจ้า npm มันจะมีปัญหาว่า แต่ละ library จะมีโฟลเดอร์ node_modules ของตัวเอง เพื่อใช้งานภายใน directory นั้น ไม่สามารถใช้ร่วมกับ library ตัวอื่นได้!! (จริงๆมันควรใช้ได้ แต่มันไม่ฉลาดพอที่จะใช้) ทำให้เกิด sub-directory ของ dependency ซ้อนไปเรื่อย ๆ จนถึงชื่อ path …

วิธีติดตั้ง Node.js บน Windows 7/8/10

Node.js คืออะไร? สรุปสั้นๆ ตามความเข้าใจของผม คือ มันเป็น platform หนึ่งที่ถูกสร้างขึ้นมาเพื่อทำให้เราสามารถเขียนโปรแกรมด้วย JavaScript บนฝั่งของ Server ได้ แทนที่จะเป็นการทำงานในฝั่ง Client ซึ่งตัวมันเอง “ไม่ใช่ภาษาใหม่” และ “ไม่ใช่ Compiler ใหม่” มันคือ “อะไรซักอย่าง” เป็น Envelopment ที่มี “ตัวช่วย” ต่าง ๆ ทำให้เราสามารถทำงานได้ง่าย สะดวก และรวดเร็ว บทความอธิบายเกี่ยวกับ Node.js มีเยอะครับ หาอ่านดู ข้ามมาติดตั้งแบบง่ายๆ ดีกว่า ไปหน้า Download https://nodejs.org/en/download/ เลือกแบบ Windows Installater (.msi) กด Next ตามสะดวก ยาว ๆ ไป ตรงนี้ ถ้าจะใช้สำหรับการศึกษาการใช้งานเบื้องต้นก็ติดตั้งให้ครบไปเลยจ้า ทดสอบว่าใช้ได้มั้ย เสร็จแล้ว ลองเปิด command prompt …

ทำไมผมถึงใช้ jQuery Validation Plugin

การ validate ข้อมูลใน form ก่อนที่จะ submit นั้น ข้อดีของมันก็คือ “ทำให้ user ไม่ต้องกรอกข้อมูลซ้ำอีก เมื่อเกิดข้อผิดพลาด” ยกตัวอย่างเช่น มีแบบฟอร์มให้กรอกข้อมูลบุคคล มี input ประมาณ 20 ตัว ที่ต้องกรอกให้ครบ แต่ userA เข้ามากรอกข้อมูลจากนั้นกด submit แต่ระบบแจ้งว่าข้อมูลที่กรอกไม่ถูกต้อง พอกด back หรือย้อนกลับไปหน้ากรอกข้อมูล พบว่าข้อมูลที่เคยกรอกไว้ มันหายไปหมด ต้องมานั่งหัวเสียกรอกซ้ำอีกรอบ เป็นแบบนี้ทำให้เกิดความยุ่งยากแก่ผู้ใช้บริการ จะดีกว่ามั้ยถ้ามีการตรวจสอบข้อมูลก่อนที่จะกด submit เพื่อให้ได้ข้อมูลที่ถูกต้องครบถ้วน ซึ่งนี่คือเรื่องราวของบทความนี้ ขอเกริ่นเกี่ยวกับอดีตที่ผ่านมาซักเล็กน้อย เพื่อให้ให้เข้าเหตุผลว่าทำไมผมถึงเลือกใช้ แต่ก่อนนั้น สมัยที่ใช้กันแต่ javascript เพียวๆ การที่เราจะทำการ validate ข้อมูลที่กรอกใน form input นั้น ทำได้ค่อนข้างยาก และสลับซับซ้อนมากกว่าจะได้เงื่อนไขที่ดักจับ Value ไม่ให้หลุดรอดไปได้ ผมขอยกตัวอย่างเช่น การสร้าง form …

Easy Installation Adding SyntaxHighlighter to your Blogger

ทำมาหลายครั้งแล้วก็ลืม การเอา SyntaxHighlighter มาใส่ใน blogger ไม่ได้ยากเย็นอะไร เพียงแต่ต้องไปแก้ไขที่ตัว HTML มันเท่านั้น ซึ่งหากมีการเลือก theme ใหม่ หรือ เปลี่ยนรูปแบบ เราก็ต้องทำแบบนี้ทุกครั้ง เพราะ code ที่ใส่เข้าไปมันจะถูกล้างออกและทับด้วย template รูปแบบใหม่ วิธีการง่ายๆ โดย copy code ในช่องนี้ จากนั้นเข้าไปที่ แม่แบบ -> แก้ไข HTML จากนั้นวาง code ดังกล่าวก่อนถึง tag </head> แล้วบันทึก สำหรับการใช้งานให้ใช้ <pre class=”brush:syntax”>you code here</pre> ศึกษาเพิ่มเติมได้ที่ http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ ปล. ตัวที่ผมใช้ เป็น version ล่าสุด 3.0.83 ณ วันที่ 7 มิถุนายน 2014

jQuery change input text to selectmenu when click and post update new data

ระบบเบิกจ่ายวัสดุ มีปัญหาของผู้ใช้งานอยู่ประเด็นหนึ่งที่หลีกเลี่ยงไม่ได้ เนื่องจากผู้ใช้บางคนไม่รู้่ว่าตัวเองต้องเบิกวัสดุประเภทไหน หมึกพิมพ์รุ่นไหน ยี่ห้ออะไร ทำให้ทำรายการผิดพลาด ซึ่งวิธีการแก้ไขก็คือให้ผู้ดูแลแก้ไขรายการให้ถูกต้อง เพราะผู้ดูแลจะทราบดีว่าแผนกไหน ใช้เครื่องพิมพ์อะไร ต้องใช้หมึกพิมพ์รุ่นไหน ดังนั้น หากจะทำการแก้ไขแบบธรรมดา มันก็ดูจะง่ายไป แค่ select และ update ใครก็ทำได้ ทีนี้เราต้องการลดระยะเวลาและขั้นตอนการเดินการของผู้ดูแล เช่นเดียวกับ facebook หรือเว็บอื่นที่ ให้เจ้าของกดที่ input และแก้ไขได้ทันที ไม่ต้องมีปุ่มอะไรให้วุ่นวาย ในทีนี้จะทำคล้ายกับ facebook edit มาดูตัวอย่างกันดังนี้ครับ     flow เขียนแบบรีบๆ ไม่ค่อยเป็นรูปร่างเท่าไหร่เพราะเอาไว้เข้าใจคนเดียว รูปแบบการทำงานก็จะเริ่มต้นจาก   เริ่มจากปุ่มแก้ไข ใส่ code ตัวอย่างของ html แก้ไข …. …. บันทึก ส่วนของ script ตรง function นี้ประกอบด้วย