ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (กรกฎาคม 2017)
เวลาผ่านไปและตอนนี้เรากำลังอยู่ในช่วงกลางปี 2560 ในเดือนนี้เรามีห้องสมุด JavaScript ที่ยอดเยี่ยมและอีกไม่กี่อย่างเช่นปลั๊กอินเพื่อเปิดใช้งาน GraphQL ใน WordPress แอปพลิเคชันเดสก์ท็อปเพื่อแสดงข้อมูล CSV และเว็บไซต์บางแห่ง กรอบ ตรวจสอบพวกเขาออก.
HeroPatterns
คอลเลกชันของ รูปแบบการทำซ้ำได้ด้วย SVG ที่คุณสามารถใช้เป็นพื้นหลังในเว็บไซต์ของคุณ เว็บไซต์นี้มีการตั้งค่าที่สะดวก ปรับแต่งสีและความทึบของรูปแบบ และให้คุณคัดลอกและวางรหัสเพื่อเพิ่มใน CSS ของคุณ.

TestCafe
เทสกาแฟเป็น เครื่องมือทดสอบแบบ end-to-end (e2e) ที่ช่วยให้คุณทดสอบเว็บไซต์และแอพพลิเคชั่นเว็บของคุณราวกับว่ามันถูกใช้งานโดยผู้ใช้งานจริง มันจะทำให้หลายสิ่งโดยอัตโนมัติเมื่อทำการทดสอบรวมถึง เริ่มเบราว์เซอร์เรียกใช้หน่วยทดสอบที่ระบุสร้างรายงาน, ภาพหน้าจอเช่นเดียวกับ sourcemap เพื่อแก้ไขข้อผิดพลาดได้อย่างง่ายดาย.

SugarJS
SugarJS เป็นห้องสมุด JavaScript เพื่อ จัดการกับวัตถุอาร์เรย์และวันที่ ด้วย nicer และไวยากรณ์ที่อ่านได้มากกว่า ห้องสมุดยังมาพร้อมกับฟังก์ชันอรรถประโยชน์มากมาย, .escapeHTML ()
ซึ่งจะ แปลงองค์ประกอบ HTML เป็นรูปแบบนิติบุคคล.

นางสาว
ไลบรารี JavaScript ที่สะดวกต่อการ เปลี่ยนเวลาจำนวนและสตริงปกติถึงมิลลิวินาที. ms ('2 วัน')
, ตัวอย่างเช่นจะถูกแปลงเป็น 172800000
.

pa11y
ชุดเครื่องมือที่ยอดเยี่ยมที่ช่วยคุณ ปรับปรุงการเข้าถึงบนเว็บไซต์ของคุณ และเว็บแอพ pa11y ประกอบด้วย CLI สำหรับการทดสอบหน้าเว็บใด ๆ สำหรับปัญหาการเข้าถึงใด ๆ แผงควบคุมเพื่อแสดงรายงานข้อผิดพลาดและคำเตือนที่สร้างขึ้น, และ CLI ที่ออกแบบมาเป็นพิเศษสำหรับเครื่องมือ CI เช่น Codeship หรือ Travis.

ไอคอนขนนก
ชุดไอคอนที่มีกลิ่นอายความทันสมัย. ไอคอนเหล่านี้เหมาะสมอย่างยิ่งสำหรับเว็บไซต์และแอพที่ออกแบบมาสำหรับแพลตฟอร์มใด ๆ (iOS, Windows หรือ Ubuntu) ไอคอนเข้ามา SVG เช่นเดียวกับส่วนประกอบ React และ Angular.

ตอบโต้การบิน
โมดูลตอบโต้ถึง สร้างองค์ประกอบภาพเคลื่อนไหวในแอปพลิเคชันของคุณ. ห้องสมุดได้รับแรงบันดาลใจจาก Principle for Sketch ที่คุณสามารถทำได้ เพิ่มการโต้ตอบกับองค์ประกอบ UI อย่างรวดเร็วและง่ายดาย.

BounceJS
มีห้องสมุดให้ สร้างภาพเคลื่อนไหวด้วยเอฟเฟกต์ตีกลับ. แอนิเมชันนั้นใช้พลังงานจาก CSS3 และจำนวนอนิเมชั่นที่กำหนดไว้ล่วงหน้า คุณสามารถติดตั้งไลบรารี JavaScript ผ่านทาง npm, bower หรือ เพียงแค่คัดลอกภาพเคลื่อนไหว CSS สร้างขึ้นในเว็บไซต์.

Bojler
Bojler เป็น เฟรมเวิร์กอีเมลพร้อมแนวทางในการเขียนโค้ด HTML ที่จะแสดงผลอย่างถูกต้องบนไคลเอนต์อีเมลที่นิยมมากที่สุด คุณสามารถค้นหาเฟรมเวิร์กอีเมลเพิ่มเติมได้ในโพสต์ก่อนหน้าของเรา.

Devicon
คอลเลกชันของ ไอคอนของภาษาโปรแกรมการออกแบบและเครื่องมือพัฒนา. ไอคอนมีให้ในรูปแบบ SVG และฟอนต์ บางอย่างโดยเฉพาะ ไอคอนต่างๆเช่น Firefox, AWS และ HTML5 นั้นมาพร้อมกับตัวแปรที่หลากหลาย. ค่อนข้างเท่ห์?

ตอนนี้ Kit Kit
อินเตอร์เฟสที่ตอบสนองต่อการรวบรวมตาม Bootstrap 4 คุณสมบัติ 50 องค์ประกอบและ 3 แม่แบบกำหนดเอง. นอกเหนือจากรุ่น HTML แล้ว UI ยังมีให้ในรูปแบบ PSD และ Sketch.

T-Scroll
T-Scroll คือ ไลบรารี JavaScript สำหรับการนำภาพเคลื่อนไหวไปใช้ เมื่อองค์ประกอบสามารถมองเห็นได้ในวิวพอร์ต มันมาพร้อมกับตัวเลือกมากมายและภาพเคลื่อนไหวที่ตั้งไว้ล่วงหน้า.

Ory Editor
ORY เป็นเครื่องมือแก้ไขเว็บที่ทันสมัยและเข้าถึงได้มากขึ้นบนเว็บ ตัวแก้ไข ORY คือ สร้างขึ้นบน React และ Flux. มันทำให้การแก้ไขง่ายขึ้นโดยอนุญาตให้ผู้ใช้แก้ไขเนื้อหาและดูผลลัพธ์ได้ทันที โดยไม่ต้องรู้ไวยากรณ์พิเศษเช่น HTML หรือ Markdown.

TadViewer
TadViewer มีประโยชน์ แอปเดสก์ท็อปเพื่อดู CSV และมันทำงานกับข้อมูลและไฟล์ขนาดใหญ่ แอพพร้อมใช้งานบน macOS, Windows และ Linux.

Smooth Scroll Polyfill
Smooth Scrolling ได้รับการพิสูจน์แล้วว่าให้ประสบการณ์การใช้งานที่น่าพอใจยิ่งขึ้น ตอนนี้มีการเสนอและร่างอย่างเป็นทางการใน W3C ในขณะนี้ใช้งานได้เฉพาะใน Chrome, Firefox และ Opera ใช้ไลบรารีนี้เพื่อ เลียนแบบพฤติกรรมการเลื่อนที่ราบรื่นใน Internet Explorer และ Safari.

Noty
ไลบรารี JavaScript สำหรับการแสดงการแจ้งเตือน, Noty ทำให้ง่ายต่อการแสดง Alart, สำเร็จ, ข้อผิดพลาด, คำเตือน, ข้อมูลหรือข้อความโต้ตอบ สามารถใช้พร้อมกับไลบรารีภาพเคลื่อนไหวเช่น mo.js และ bounce.js เพื่อให้สไลด์โชว์แจ้งเตือนเลื่อนเข้าและออกได้อย่างสวยงาม.

Hopscotch
Hopscotch เป็น โครงการโอเพนซอร์ซเริ่มต้นโดย LinkedIn. เป็นกรอบเพื่อให้ง่ายสำหรับนักพัฒนาเพื่อเพิ่มทัวร์ผลิตภัณฑ์ ตรวจสอบตัวอย่างสำหรับตัวอย่างสดและ API.

SurveyJS
SurveyJS เป็นอีกหนึ่งห้องสมุด JavaScript ที่ยอดเยี่ยม ตามที่ชื่อบอกเป็นนัยก็คือ ออกแบบมาเพื่อสร้างอินพุตแบบสำรวจ. มันมีประเภทของอินพุตที่หลากหลายเพื่อเติมเต็มคำตอบของแบบสำรวจและ ยังได้รับการย้ายไปยังเฟรมเวิร์ก JavaScript ยอดนิยมหลายรายการ รวมถึง AngularJS, VueJS และ React.

WP GraphQL
GraphQL กำลังเพิ่มขึ้นและอาจเป็น คู่แข่งที่แข็งแกร่งเพื่อแทนที่สถาปัตยกรรม REST ที่ให้พลังกับ API เว็บเกือบทั้งหมด นี่คือปลั๊กอินที่จะช่วยให้คุณ ดึงเนื้อหา WordPress ของคุณด้วย GraphQL. นี่เป็นข้อมูลอ้างอิงที่ดีว่า REST และ GraphQL แตกต่างกันอย่างไร.

โมนาโกบรรณาธิการ
โมนาโก Editor เป็นบรรณาธิการที่ อำนาจแก้ไขรหัส Visual. มันถูกสร้างโดย Microsoft และรองรับหลายภาษานอกกรอบรวมถึง HTML, CSS, LESS, CoffeeScript และ PHP พร้อมกับ Intellisense ที่ช่วยให้คุณเขียนโค้ดได้เร็วขึ้น.
