ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (กุมภาพันธ์ 2560)
Resouces Fresh สำหรับซีรี่ส์ Web Developers มี วิ่งมาประมาณ 4 ปีแล้ว, และการบำรุงรักษาซีรี่ส์นี้ทำให้ฉันมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับความคืบหน้าของเว็บในช่วงหลายปีที่ผ่านมา มี เครื่องมือใหม่ออกมาทุกเดือน เพื่อให้การพัฒนาเว็บง่ายขึ้น.
ในภาคนี้เราได้รวบรวม เครื่องมือใหม่จำนวนหนึ่ง, ซึ่งรวมถึงห้องสมุด JavaScript, สองสามไลบรารี CSS และการอ้างอิง เพื่อพัฒนาทักษะของคุณ ตรวจสอบพวกเขาออก.
คลิกเพื่อดูข้อมูลเพิ่มเติมคลิกเพื่อดูข้อมูลเพิ่มเติม
ค้นหาคอลเล็กชันทรัพยากรที่แนะนำทั้งหมดของเราและเครื่องมือออกแบบและพัฒนาเว็บที่ดีที่สุด.
คำบรรยายภาพ
JavaScript คือ การใช้งานบนเดสก์ท็อป เพื่อความสะดวกในการพกพาบนแพลตฟอร์มที่แตกต่างกันรวมถึงทำงานได้ดีเท่ากับแอพพื้นฐาน แอพนี้, คำบรรยายภาพ, เช่นเป็น สร้างขึ้นบนยอดของอิเล็กตรอน. มันเป็นแอพง่าย ๆ ที่ให้คุณค้นหาไฟล์คำบรรยาย (.srt
) เพื่อแนบกับวิดีโอที่คุณกำลังดูอยู่.

บรรทัดคำสั่ง OSX ที่ยอดเยี่ยม
รายการบรรทัดคำสั่งที่มีประโยชน์และมีประโยชน์มากมายสำหรับ macOS. ที่นี่คุณอาจพบหลายสิ่งหลายอย่างที่สามารถทำได้ผ่าน CLI เช่น “การล้างคิวการพิมพ์”, “ซ่อนโฟลเดอร์ใน Finder”, และ “ป้องกันการนอนหลับของระบบ”.

เทรเวอร์
เทรเวอร์ เป็นเพียงการทำเทรวิส CI ออฟไลน์. เทรวิสเป็นบริการบูรณาการอย่างต่อเนื่อง ที่นักพัฒนาทดสอบซอฟต์แวร์ เพื่อดูว่าซอฟต์แวร์ทำงานอย่างถูกต้องหลายสภาพแวดล้อมหรือไม่. เทรเวอร์ยังอยู่ในช่วงเริ่มต้น; ปัจจุบันรองรับเท่านั้น “NodeJS”.

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

QartJS
นี่คือ JavaScript ที่ ทำให้รหัส QR น่าเบื่อน้อยลง. ด้วยวิธีนี้คุณสามารถวางซ้อนรหัส QR ไว้เหนือภาพเช่นภาพของคุณ.

WP Docker
WP Docker เป็น สภาพแวดล้อม Docker ออกแบบมาเพื่อพัฒนา WordPress โดยเฉพาะ. สภาพแวดล้อมนั้นมีอยู่ในตัวเองและจะไม่ส่งผลกระทบต่อระบบคอมพิวเตอร์ของคุณในกรณีที่คุณทำการกำหนดค่า มันคือ ทางเลือกที่ดีสำหรับ Vagrant, Valet, Local และ MAMP.

Rellax
Rellax เป็นไลบรารี JavaScript สำหรับ สร้างผล Parallax ในการเลื่อนหน้า. มันมาพร้อมกับตัวเลือกน้อยและค่อนข้างง่ายต่อการกำหนดค่า มันมีน้ำหนักเบาทำงานเร็วสุดและ ไม่จำเป็นต้องพึ่งพา jQuery ดังนั้นจึงเป็นทางเลือกที่ดีสำหรับห้องสมุดอื่น ๆ ในหมวดหมู่นี้เช่น Parallax.js หรือ Scrollax.js.

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

MonetizeJS
MonetizeJS เป็นไลบรารี JavaScript สำหรับ ใช้แถบได้อย่างง่ายดาย; ง่ายเหมือนกับการใช้ jQuery.

Vonic
Vonic เป็นชุดของ UI สำหรับ สร้างด้วยมือถือโดยใช้ Vue.js และ Ionic CSS. ประกอบด้วยส่วนประกอบ UI จำนวนมากที่พบได้ทั่วไปในมือถือรวมถึง ช่องทำเครื่องหมาย, ฟอร์มการค้นหา, Swiper และ Accordion ที่เรียกว่า. คุณสามารถใช้เพื่อสร้างแอพพลิเคชั่นมือถือ แบบเดิม ในเบราว์เซอร์.

ห้องสมุดส่วนประกอบ WordPress
10up หนึ่งในชื่อที่โดดเด่นใน WordPress ได้เปิดตัว UI Library ที่ได้รับการออกแบบ โดยเฉพาะสำหรับ WordPress. ซึ่งแตกต่างจากห้องสมุด UI อื่น ๆ ที่ให้รหัส CSS และ HTML เท่านั้น 10Up ยังมีตัวอย่างโค้ด PHP ที่คุณสามารถวางในธีมของคุณ องค์ประกอบประกอบด้วย การนำทางแท็บคำแนะนำทั่วไปและ Blogrol.

ประสิทธิภาพการเริ่มต้นใช้งาน JavaScript
ยอดเยี่ยมและ บทความโดยละเอียดจาก Addy Osmani, หนึ่งในวิศวกรของ Google เกี่ยวกับวิธีเขียนจาวาสคริปต์ที่ทำงานรวดเร็วเป็นพิเศษ ฉันแนะนำให้คุณอ่านเพื่อ เพิ่มทักษะ JavaScript ของคุณ.

KuteJS
กูเตเป็น ไลบรารี JavaScript เพื่อแสดงภาพเคลื่อนไหว. มันโดดเด่นอย่างรวดเร็วและมีประสิทธิภาพสูงสุดในการใช้หน่วยความจำ มีส่วนขยายและเครื่องมือพิเศษเพื่ออนุญาตให้ใช้ภาพเคลื่อนไหวใน CSS, SVG และแม้แต่ปลั๊กอิน jQuery สำหรับไวยากรณ์ที่สะดวกมากขึ้น.

กปภ
Progressive Web Application (PWA) เป็นวิธีการที่ ช่วยให้เว็บไซต์ทำงานได้อย่างรวดเร็วและใช้งานออฟไลน์ได้. PWA Rocks นี้เป็นรายการที่ได้รับการอนุมัติจาก Google เป็น PWA ไปยัง เรียนรู้เพิ่มเติมเกี่ยวกับ PWA จาก Google ดูที่: เว็บแอปก้าวหน้า.

อัพเดทอัตโนมัติ Github
Github Auto-Updater คือ นักแต่งเพลงไลบรารีที่อนุญาตให้ปลั๊กอินของคุณได้รับการอัปเดตจาก Github. นี่เป็นสคริปต์ที่สะดวกสำหรับนักพัฒนาในการดูแลรักษาปลั๊กอินสำหรับลูกค้าของพวกเขาโดยไม่ต้อง จำเป็นต้องอัปโหลดไปยังที่เก็บ Github.

บัตร
การ์ดเป็นห้องสมุด JavaScript ที่ทำให้การป้อนข้อมูลบัตรเครดิตมีส่วนร่วมมากขึ้น และปรับปรุงประสบการณ์ผู้ใช้ของคุณในขณะที่ป้อนหมายเลขบัตรเครดิต มัน ทำงานได้ดีกับ jQuery, React, Angular และ Ember.

Graaf
Graaf ให้ภาพซ้อนทับบนหน้าเว็บของคุณเพื่อดูว่ามีการจัดวางตาราง - คอลัมน์แถวรางน้ำ - อย่างไร นอกจากนี้คุณยังสามารถ สร้างสเปคกริดของคุณเอง ใช้ API ที่มีให้.

Luxbar
ลักซ์บาร์คือ กรอบ CSS เพื่อสร้างการนำทางที่ตอบสนองได้ง่าย; เพียงเพิ่มสไตล์ชีทและเพิ่ม HTML อย่างถูกต้อง คุณสามารถติดตั้งไลบรารีนี้ผ่าน NPM, Bower หรือเชื่อมโยงสไตล์ชีทโดยตรงจาก CDN.

Contrast Grid
รายการของ ตารางแสดงความคมชัดของสีและเกรดความถูกต้องตาม WCAG 2.0. คุณสามารถเปลี่ยนค่าบนโต๊ะและทราบได้อย่างรวดเร็วว่าการผสมสีเป็นไปตามมาตรฐาน WCAG หรือไม่.

ToneJS
ToneJS เป็นห้องสมุด JavaScript เพื่อ สร้างเสียงหรือเสียงที่อาจชอบที่มาจากเครื่องดนตรี. ฉันเดาว่าห้องสมุดนี้จะมีประโยชน์สำหรับการสร้างอีมูเลเตอร์เครื่องดนตรีทางเว็บ หรือเอฟเฟกต์เสียงเกม.
