Firebase CLI 001 งูๆ ปลาๆ

ช่วงนี้ได้ลองศึกษาตัว Angular กับ Firebase ผมเลยลองสรุปคำสั่งที่งมๆแปะไว้ครับ คำสั่งสำหรับลง Lib ของ firebase ครับ npm install –save firebase คำสั่งลงตัว Command Line Tools npm install -g firebase-tools ลง Command Line Tools ก็ต้อง Login ก่อน ไม่งั้นจะทำอะไรไม่ได้เลย ถ้า Login ด้วย firebase สามารถใช้คำสั่ง firebase login โดยมันเปิดเว็บเบราเซอร์ให้ไปผูก Google App นะครับ ถ้าไม่ติดอะไร ขึ้นเป็นชื่อ Email ที่ login ครับ ถ้าต้องการใช้ Project เรารู้จักกับ Firebase สามารถใชำคำสั่ง firebase init ระบบมีถามไปเรื่อย ได้แก่ เอา App นี้ไปทำอะไร และกด Space เพื่อเลือกครับ การตั้งค่า firebase การตั้งค่า Folder สำหรับ Deploy ขึ้น Cloud การตั้งหน้า Default ในกรณีที่ใส่ path มาแล้วไม่มีข้อมูล สำหรับ File ที่เจ้า Firebase สร้างขึ้นมา มีดังนี้ .firebaserc – บอกว่าเรามี firebase อันไหนบ้าง เช่น มี Config ของ UAT กับ PROD หากจะเปลี่ยนชื่อ DB firebase use ชื่อ project //เช่น firebase…

บันทึกความทรงจำวันที่ 13 ตุลาคม พ.ศ. 2559

พอดีเหนกระทู้ Pantip อันนึง “ตอนมีแถลงการณ์สำนักพระราชวัง ของเย็นวันที่ 13 ตุลาคม พุทธศักราช 2559 ทุกคนกำลังทำอะไรกันอยู่หรือครับ” บันทึกไว้ใน Blog ดีกว่า ตอนนั้นกำลังเดินอยู่แถวศริราช เพราะรถติดมากก พอได้ยินเสียงคนเดินประกาศทั้งน้ำตา เรื่องข่าวการสวรรคต ผมเลยตัดสินใจเข้าไปในศิริราช ที่นั่งมีบรรยากาศที่เศร้ามาก นักข่าวก็ทำข่าวไป เศร้าไป ส่วนผมเองก็กลั้นน้ำตาไม่ไหวน้ำตาไหล จากไปตรงลานพ่อในหลวง(ไม่รู้ว่าลานนั้นชื่ออะไรนะ) ทำความเคารพพระองค์ท่านที่ลาน แล้วรีบกลับบ้านไปหาแม่ กลัวท่านช๊อกกับข่าว ปล. ตอนนั้นไม่มีอารมณ์จะถ่ายรูป บรรยากาศมันหดหู่มาก (รูปใน Blog ขอจาก FB เพื่อนมาใช้ประกอบครับ)

BARCAMP Bangkok 2016

สำหรับงาน BARCAMP Bangkok 2016 สำหรับปีนี้้จัดที่ TKPark ครับ งานนี้น่าจะเป็นครั้งแรกที่ผมเข้ามาเลย หลังจากพยายามไปเข้าฟังงาน Share Idea พวกนี้มาเกือบ 3 ปี ตั้งแต่เรียนจบมาครับ โดยรูปแบบงานคล้ายกับ Agile Thailand แต่เปิดกว้างมาอยากพูด หรือแชร์อะไรก็ได้ ไม่จำเป็นต้องเป็นหัวข้อด้าน IT ครับ โดยมี Concept ง่ายๆ 3  อย่างครับ เมื่อได้หัวข้อมาแล้วทางทีมงานก็จะมาจัดให้ลงตาม Slot เวลาที่มีครับ แต่ถ้ามีหัวข้อมากเกินกว่า Slot ก็จะให้ทำการ Vote ครับ โดยในปีนี้กำหนด Session ละ 40 นาทีครับ สำหรับ Hashtag ของงานนี้ คือ #BarcampBKK ก่อนเริ่มงานนี้ยืนสงบนิ่งไว้อาลัยถวายในหลวงรัชกาลที่9 พระมหากษัตริย์ผู้ทรงงานหนักที่สุดในโลก ครับ ผมชอบในงานนี้อย่างแรก update session ที่เว็บด้วย ผู้เข้างานได้ไม่ต้องไปวุ่นวายที่บอร์ดครับ และก็ที่บอกไปตอนต้น หัวข้อมันเปิดครับ พูดอะไรก็ได้ Become IT Pro | Speaker: iamSK เคยมีประเด็นที่แก้ง่ายๆ แต่ไปติดตรง Soft Skill ในเรื่องการสื่อสารทำให้แก้ไข ไม่ตรงจุด เสียเวลาไปเป็นปี Accessibility ไปทุกที่ที่ไม่มีทาง | Speaker: หนู + จิ ในเมืองไทย สิ่งอำนวยความสะดวกแก้ผู้ที่มีปัญหาด้านต่างๆ อาทิ เช่น ร่างกาย หรือ สายตา เป็นต้นมันเหมือนมี แต่ทำไม่สุด การก่อสร้างทำทางต่างๆ อย่างผมเองเจอจังๆ ที่อนุสาวรีย์เลย ระหว่างทำทาง วางท่อน้ำ และเก็บงานไม่เรียบร้อย ทำให้คนใช้ทางเท้า ต้องลงมาเดินบนถนนแทน ทำให้รถติด เสียอันตราย ทั้งที่จริงๆ ควรทำงานเป็นส่วนๆ วางแผนสำหรับคนเดินดิน ความเห็นส่วนตัว รัฐมองยานพาหนะเป็นหลัก มากกว่าจะมองคนเดินเท้าปกติ สำหรับตัว Speaker…

[CMMI] มาลองทำ OPM กับตัว jenkins และ dot net

หลังจากได้ซุ่มตัว Continuous Integration กับน้องที่ทำงาน โดยใช้ jenkins และ dot net มาสักระยะจนสามารถใช้งานได้แล้ว วันนี้ผมมาเขียนสรุปในแง่ของการทำงานกับ CMMI บ้าง ว่าต้องทำอะไร มีกระบวนการยังไงบ้างครับ โดยสิ่งที่ผมต้องทำ คือ ตัว OPM และ CAR มันเป็น Process หนึ่งใน CMMI ครับ ตอนนี้มองเฉพาะ CMMI LV5 คือ การ Optimizing / Continuous Process Improvement นำข้อมูลที่ได้มีวิเคราะห์หาสาเหตุ และปรับปรุงกระบวนการทำงานให้ดียิ่งขึ้น โดยจะมี Process หลัก 2 ตัว Causal Analysis and Resolution (CAR) – ทำเพื่อหาสาเหตุของปัญหา และป้องกันมัน โดยมีขั้นตอน ดังนี้ Brain Storm กันก่อน เพื่อแสดงปัญหาต่างๆ ของสิ่งที่เราสนใจ เมื่อมีปัญหามาแล้ว จัดกลุ่ม (Grouping) และ เลือก (Select) ปัญหาตามสำัญความสำคัญ โดยอาจจะใช้ทฤษฏี 80-20 เข้ามาเป็นเกณฑ์ในการคัดเลือก เอากลุ่มของปัญหาที่มัน Impact กับ Business เยอะ (80%) มาทำก่อน มาหา Root Cause ของปัญหากัน โดยสิ่งที่ได้ในขั้นตอนนี้ คือ Fishbone Diagram หรือ Ishikawa Diagram ที่ช่วยให้เราเห็นภาพของปัญหาได้ชัดเจนมาขึ้น ได้ Root Cause มาแล้ว มาทำ Action Plan ลงมือทำจริง จะมองว่าเป็น Implementation ของ Fishbone Diagram ก็น่าจะได้นะ  เตรียมแผนเสนอผู้บริหาร ทดสอบเอา Action Plan ไปใช้งาน…

[.NET] แก้ปัญหา No EditorOptionDefinition Export Found Error ของตัว Visual Studio

หลังจากโดน Microsoft ให้ Update windows 10 anniversary update version 1607  ไปนะครับ สิ่งที่ผมเจอปัญหา คือ ตอนนี้เรามาสนใจที่ตัว Visual Studio ก่อน สำหรับปัญหาที่ผมเจอเป็นตามรูปเลยครับ ส่วนหนทางแก้ไข ลองทำตามดูเลยครับ ปัญหานี้ ผมเกิดกับตัว Visual Studio 2013 นะครับ แต่ส่วนตัวเริ่มอยากขยับไปใช้ Visual Studio 2015 เหมือนกัน แต่ขอ Format คอมก่อนนะครับ ตัว Visual Studio เวลามันลงชอบมีอะไรพ่วงมาเลยเอาออกยากกกกก  

[CSS] ปรับหน้าเว็บให้เป็นโทนขาวดำ

โพสนี้เนื่องจากมีเพื่อนถามมากันพอสมควรว่าเปลี่ยนเว็บ เป็นโทนสีขาวดำ เพื่อร่วมไว้อาลัยถวายแด่ “ในหลวง” ผมลองหาข้อมูลดู เนื่องจากไม่ได้ทำงานด้าน CSS มาก่อนเลย เลยมาของสรุปไว้นะครับ โดยถ้าเป็นเว็บที่ไม่ใช้ได้ CMS อะไรเลย สามารถนำ Code นี้ไปใช้งานได้เลยครับ body { /* IE */ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* Chrome, Safari */ -webkit-filter: grayscale(1); /* Firefox */ filter: grayscale(1); filter: grayscale(100%); filter: gray; -moz-filter: grayscale(100%); -webkit-filter: grayscale(100%); } สำหรับตัว WordPress สามารถเข้าไปที่ Theme >> Customize >> Theme Options จะมีส่วนของ Custom CSS สามารถเอา Code ไปใส่ได้เลยครับหรือ ถ้าขี้เกียจสามารถใช้ Plug-in ของคุณ tannysoft ได้ครับ หมายเหตุ พยายามปรับระดับ grayscale ให้เหมาะสมกับเนื้อหาของเว็บนะครับ จะได้ไม่สรางปัญหาให้กับผู้อ่าน และลด UX ของเว็บลงไป

[.NET] สรุปงาน DevRock #03 Rock Show

สำหรับงานนี้ ผมเพิ่งนึกว่ามีครั้งแรก 555 เพราะเข้ามาอยู่ในกลุ่ม Dev Rock Developer Group นานแล้ว (รู้สึกว่าชื่อเดิมเกี่ยวกับ ASP.NET MVC ครับ) ผมเพิ่งสังเกตุว่าตัว Event เพราะ เพื่อนใน FB หลายคนกด Like ไว้ใน Facebook ไว้นะครับ สำหรับงานครั้งนี้จัดเป็นครั้งที่ 3 และ โดยครั้งนี้จัดที่มหาวิทยาลัยหอการค้า คณะวิทยาศาสตร์ และเทคโนโลยี อาคาร 7 ชั้น 3 ครับ แต่วันนี้งานเริ่ม Late ไปนิดนึงนะครับ เนื่องจากฝนตกครับ โดยตัวงานเริ่มประมาณช่วง 09:30 ครับ โดยมีรายละเอียด ดังนี้ BDD with .NET Behave Speaker Peerapat Asoktummarungsri ฺBehavior-driven development หรือ BDD – เริ่มมาจากของฟากภาษา Ruby (RSpec) จากนั้นเริ่มแตกออกไปหลายๆ ภาษา เช่น Java, .NET หรือ PHP เป็นต้น ตัว BDD ทำหน้าที่เป็นตัวกลาง (Adapter) เชือมงานแต่ละชิ้น เข้าด้วยกัน ลองดูตัวอย่าง เช่น ทำเว็บหาราคาที่พัก แล้ว … งานมันแยกกันทำนี่ คนนึงอาจจะทำ Search คนนึงทำ Login แล้วถ้า Login ก่อน Search หรือ Search ก่อน login ผลลัพธ์มันจะเป็นอย่างไร ? BDD สำหรับในมุมของพี่เค้ามองว่าเป็น User Acceptance Test แบบ Coding ที่ Integrated หลายๆอย่างมารวมกัน…

มาลองใช้ npm install มา Restore พวก Dependency ดีกว่า

หลังจากใช้ npm มาประมาณ 5-6 วัน มันมีเรื่องที่ว่าปกติ ผมมักจะ Copy งานที่ทำก่อนหน้า มาเริ่มต้นทำต่อในวันถัดไป แต่วันนี้ Copy ไม่ได้แล้ว Windows มันด่าว่า Path ยาวเกินไปนะ (จริงๆใช้พวก Git น่าจะดีกว่านะ) ไหนๆก็เจอปัญหาแล้ว ลองมา Restore พวก Dependency ดีกว่าครับ ก่อนอื่นมาดูกันก่อนตอนนี้มีแต่ Code ไม่มี Dependency  ต่างๆเลย มาดู package.json ที่เก็บรวบรวมความสัมพันธ์ของ Project และ Dependency ต่างๆไว้ ให้ npm จัดการต่อด้วย cd เข้าไปยัง path ที่มีเก็บ Code จากนั้นรันคำสั่ง npm install จากนั้นรอครับ ต้องต่อเนต และลง npm ด้วยนะครับ กลับไปสังเกตุดู npm ทีการสร้างโพลเดอร์ node_modules ไว้แล้วครับ

มาลองรัน webpack-dev-server โดยที่ไม่ต้องลงแบบ Global

ลองรัน webpage-dev-server โดยที่ไม่ต้องลงแบบ Global กัน สำหรับ Blog นี้เกิดจากความกลัวล้วนๆครับ ฮ่าๆ กลัวว่าไป Run คำสั่ง npm install -g webpack-dev-server มันจะไปโดนงานที่ทำอยู่ แต่ลองหาข้อมูลแล้วเจอแบบให้ลงแบบ Global เลยลองพิมพ์ตาม Pattern ของคำสั่งเวลาเรียกใช้ webpack ครับ โดยสำหรับสาย Windows อย่างผม cd ไปยัง Path ที่ต้องการครับ พิมพ์คำสั่ง node_modules\.bin\webpack-dev-server D:\01Knowledge\01MyTrain\2016\AngularJSandFireBase\Day3\webpack> node_modules\.bin\webpack-dev-server Start ได้ด้วย ไม่จำเป็นต้องลงแบบ Global ครับ เข้า http://localhost:8080/ ไปดู Code กากๆ ครับ มือใหม่หัดลองทำเว็บครับ  

[JS] ใช้ Library lodash จัดการกับข้อมูล

ช่วงนี้ผมได้ไปเรียน Course Online ที่จัดโดยสมาคมโปรแกรมเมอร์ไทยครับ เกี่ยวกับ JS+Angular+FireBase ครับ โดยระหว่างเรียนมีการบ้านให้จำนวน 4 ข้อ ก่อนจะไปลองโจทย์ มารู้วิธีการเล่นกับข้อมูลก่อน (Data Model) ว่าตัว Java Script มี function อะไรให้ใช้งานบ้างครับ map : จัดการกับข้อมูลแต่ละตัว ด้วยการทำงานที่เหมือนกัน เช่น ยกกำลังในตัวเลขทุกๆตัว ใน Array ครับ โดยผมมีตัวอย่างที่ใช้ for กับ map ครับ const arr = [1,2,3,4,5,6] const arr2 = [] for(let i = 0; i < arr.length; ++i){ arr2.push(arr[i] * arr[i]) } console.log(‘Source Data’) console.log(arr) console.log(‘Array Pow with loop’) console.log(arr2) /* Source Data [ 1 , 2, 3 , 4, 5 , 6] Array Pow with loop [ 1, 4, 9, 16, 25, 36 ] */ const power2 = (x) => x * x const arr3 = arr.map((x)…