dynatable

TOOL AND LIBRARY COLLECTION #2 ธันวาคม 2016

Tool And Library Collection #2 เป็นการรวบรวมเอา เครื่องมือในการทำเว็บต่างๆ ที่มีการแชร์ผ่านทางหน้าเพจ บน Facebook ของผมมารวบรวมเอาไว้ เพื่อให้สะดวก ต่อการค้นหา หลังจากกาลเวลา ล่วงเลยผ่านไป หวังว่าจะเป็นประโยชน์ สำหรับผู้ที่สนใจ

Tool And Library Collection #2 ประจำเดือนธันวาคม ปี 2016

1.Dynatable JS

dynatable js เป็นเครื่องมือที่จะเปลี่ยน table เดิมๆของคุณให้มีความสามารถครบครัน ทั้งค้นหา เรียงลำดับ แบ่งหน้า ความสามารถมากมายแถม option เสริมเพียบ ลองเสพกันดูก่อนแล้วคุณจะหลงรัก
Link:https://www.dynatable.com/

dynatable

dynatable

2.Umbrella JS

ใครๆก็ต่างพากันหันหลังให้กับ jQuery แต่อยากจะบอกว่า umbrella js ก็เป็นชุดรหัส Code Library ใน javascript ที่โคตรจะ Tiny เบาบางล่องลอยราวกับเม็ดฝน Performance และ Speed นี่ใกล้เคียงกันกับ jQuery เลย แต่ว่าเบากว่าเยอะ แค่ 3kb ในขณะที่พี่ใหญ่ปาไปตั้ง 32kb แต่ถ้าจะเทียบกันเลยตรงๆไม่แน่ใจว่า ความสามารถโหดๆที่มี จะเยอะเท่ากันไหม แต่ถ้าใช้แค่พื้นๆ แบบเวลาผมทำงานละก็ อันนี้ถือว่าครบเครื่องเลยทีเดียว เอาเป็นว่าอยากให้ลองเสพกันดูก่อน ถ้าไม่ติดเรื่อง plugin ไม่มีเสริมของพวกนี้คงไปได้ไกล
Link:http://umbrellajs.com/

umbrella

umbrella

3.Material Design for Bootstrap

อยากทำเว็บ Material แต่ก็อยากใช้งาน Bootstrap จะไปยากอะไร Material Design for Bootstrap มีของให้ใช้งานเพียบ มีทั้งแบบฟรีและเสียเงินด้วยนะ แต่ตัวฟรีๆก็สวย แถมเยอะจนพอใช้แล้ว เปลี่ยนความจำเจไปได้เยอะเลย ลองไปเสพกันเถอะ
Link:http://mdbootstrap.com/

mdbootstrap

mdbootstrap

4.Gitmoji

ใครต้องคอยไล่ดูงานใน git ทั้งวันอย่างทีมผมนี่ คงมีมึนๆหัวกันบ้าง สำหรับข้อความใน commit message ที่หลายๆครั้งก็ตันไม่รู้จะเขียนยังไง ก็ใส่กันมาตรงๆ ทื่อๆเลย แต่ดันอ่านแล้วเข้าใจแค่นิดเดียว ต้องมานั่งไล่ code ไล่ file กันต่อ ถึงจะถึงบางอ้อ แต่ตอนนี้มี Emoji มาให้เราสื่อความหมายแบบน่ารักๆ เพิ่มเติมไปอีกนิด แต่ก็ดูเข้าท่าไม่น้อย เพิ่มสีสันบน timeline git ได้ดี commit ครั้งหน้าเสพความน่ารักกันนะ
Link: https://gitmoji.carloscuesta.me/

gitmoji tool

gitmoji

5.CSS Pin

CSS Loaders สวยๆสำหรับโหลดข้อมูลหน้าเว็บ หน้าตาน่ารัก มุ้งมิ้ง ใช้งานง่ายเกินบรรยาย copy class มาวางเป็นอันจบ เติมความสดใสและมีชีวิตชีวาง่ายๆ ให้กับหน้าเพจของคุณ
Link:https://webkul.github.io/csspin/

csspin

csspin

6.Pull to refresh

Pull to refresh เป็น Javascript library ที่จะช่วยให้คุณ refresh หน้าจอได้ง่ายๆ แค่เพียงดึงหน้าจอลงมา หรือการ pull หน้าจอ ใช่เลยครับ มันเหมาะมากสำหรับ มือถือ เมื่อคุณต้องการให้ผู้ใช้งาน เรียกหน้าเว็บใหม่ได้อย่างสะดวกสบายเพียงปลายนิ้วสัมผัส กับความเบาแค่เพียง 8 kbs และยังใช้งานง่ายสุดๆ สนใจดึงหน้าจอก็ตามมาเสพกันได้ที่
Link:https://www.boxfactura.com/pulltorefresh.js/

pull to refresh

pull to refresh

7.Victory components

Victory components สำหรับ data visualization งามๆสำหรับชาว React เหมาะกับงานแบบ Cross Platform สร้าง Chart หน้าตางามๆ แบบมีชาติตระกลูตามแนวทาง React ได้สวยงาม ตามไปเสพกันได้ที่
Link: http://formidable.com/open-source/victory/

Victory

Victory

8.GitScrum

GitScrum เป็น Opensource ที่พัฒนาขึ้นมาจาก Laravel PHP Framework ควบคู่กับฐานข้อมูล MySQL สำหรับทีมที่ทำงานสาย Scrum แถมยังใช้งาน Version Control กันอีกด้วย ระบบบริหารจัดการ เป็นแนว day-to-day task management คล้ายๆของ Trello อยู่ไม่น้อย แต่ตัวนี้ชัดเจนตรงเมนูอย่าง product backlog, sprint, issues, หรือจะเป็น stories แถมมี Docker Container ให้เรียบร้อยเลยด้วย ทีมงานไหนสนใจ มาเสพความสามารถแบบ Scrum ได้ที่นี่เลย
Link:https://github.com/renatomarinho/laravel-gitscrum

GitScrum

GitScrum

9.Super dom

Super dom เป็นเครื่องมือที่ช่วยจัดการ ES6 HTML dom ในรูปแบบ manipulate หน้าที่การทำงานเลยออกไปคล้ายๆกับที่ jQuery ทำไว้อ่ะครับ แต่ตัวนี้คือจะมีแค่ add, generate, select, delete, attribute อะไรทำนองนี้ เรียกได้ว่า ครบแหละสำหรับ จัดการกับ Dom ใครสนใจตามไปเสพกันได้ที่
Link: https://superdom.site/

Super dom

Super dom

10.Labelauty Check box

Check box กับ radio button หน้าตาสะสวยนี่ เป็นผลงานร่วมที่ต้องใช้งาน jQuery มาปลั๊กกันนะครับ แต่ขอบอกว่า หน้าตาดูดี มีชาติตระกูลมากแถมยัง lightweight เบาแบบสุดๆ ช่วยเสริมภาพลักษณ์ สถานะ form input ของคุณให้ดูดีขึ้นได้อย่างง่ายดาย เป็น item ที่ควรมีติดกระเป๋าไว้สำหรับผู้ใช้งาน jquery เลยทีเดียว เสพกันเถอะ
Link: http://labelauty.js.org/

Labelauty

Labelauty

11.Kakoune

Kakoune code editor ที่ได้รับแรงบันดาลใจมาจาก Vim สามารถพิมพ์ข้อคาวามต่างๆได้ง่ายดาย รวดเร็ว พัฒนาขึ้นมาให้เหมาะกับการเขียน code มากขึ้นทั้งการ Multiple selections, syntax highlighting ใครที่เคยใช้ Vim มาก่อน น่าจะชอบ เชิญเสพกันได้ที่
Link: http://kakoune.org/

Kakoune

Kakoune

12.Flexible boxes

Flexible boxes เป็นเครื่องมือสุดเจ๋ง ที่จะทำให้การจัด Layout หน้าเว็บด้วยการใช้งาน flex เป็นเรื่องที่ง่ายขึ้น สามารถเพิ่ม Box ตรงไหนก็ได้ ปรับขนาดง่ายตาม px จัดตำแหน่งได้ด้วย จบด้วยการได้ Code HTML กับ CSS ไป เชิญเสพความสามารถกันด้วยตนเอง
Link:http://ow.ly/RpD43078OBO

Flexible boxes

Flexible boxes

13.Voca JS

Strings library ก็มา กับงาน Voca JavaScript library สำหรับ manipulating strings ด้วยความสามารถมากมายทั้ง change case, trim, pad, slugifly, camel case และอื่นๆที่ขนกันมาเพียบ และใช้งานได้หลากหลาย environments ทั้ง Node.js, Rollup, Webpack, Browserify แถมใช้งานง่ายสุดๆ ชอบ function exposed ที่แค่เลือกว่าจะเอาตำแหน่งได้ กี่ตัวอักษร ลองไปเสพความสามารถของเค้ากันได้ที่นี่เลย
Link : https://vocajs.com

voca js

voca js

14.Siema

Slide รูปภาพแบบม้าหมุน Carousel ตัวนี้น่าสนใจดีครับ Lightweight มากแถมยังใช้งานง่ายมากอีก และที่สำคัญตัวนี้เค้า ทำมาเพื่อ Pure JS ไม่ได้ใช้ jQuery ด้วย โห…งานนี้มีเกิด มาดูวิธี ตัวอย่างกันได้ตามภาพ ส่วนใครสนใจเสพความงดงามของเค้าไปที่นี่เลย
Link: https://pawelgrzybek.com/siema/

Siema

Siema

15.Mini.css

Mini.css คืออีกหนึ่ง web components ที่เน้นไปที่ขนาดเล็กจิ๋ว เพื่อความรวดเร็วในการโหลด แต่รองรับการทำงานในรูปแบบของ Responsive ได้เป็นอย่างดี แถม Module ต่างๆที่มีมาก็เยอะครบครันทั้ง Grid, Form, Table, Card, Utility ลองไปเสพความสามารถกันได้ที่
Link: https://chalarangelo.github.io/mini.css/

Mini CSS

Mini CSS

16.Docsify js

Docsify js เป็นเครื่องมือสำหรับสร้างเอกสาร คู่มือของระบบหรือ Document นั้นแหละ แต่เป็นการใช้พลังจาก Node เข้ามาช่วย สามารถทำงานแล้ว up ขึ้น Git hub ได้เลย แถมเบาสุดๆอีกต่างหาก ใครมองหาตัวช่วย documentation site generator อยู่เสพนี่เถอะนะ
Link: https://docsify.js.org/

Docsify js

Docsify js