ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (กุมภาพันธ์ 2560)
Resouces Fresh สำหรับซีรี่ส์ Web Developers มี วิ่งมาประมาณ 4 ปีแล้ว, และการบำรุงรักษาซีรี่ส์นี้ทำให้ฉันมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับความคืบหน้าของเว็บในช่วงหลายปีที่ผ่านมา มี เครื่องมือใหม่ออกมาทุกเดือน เพื่อให้การพัฒนาเว็บง่ายขึ้น.
ในภาคนี้เราได้รวบรวม เครื่องมือใหม่จำนวนหนึ่ง, ซึ่งรวมถึงห้องสมุด JavaScript, สองสามไลบรารี CSS และการอ้างอิง เพื่อพัฒนาทักษะของคุณ ตรวจสอบพวกเขาออก.
คลิกเพื่อดูข้อมูลเพิ่มเติมคลิกเพื่อดูข้อมูลเพิ่มเติม
ค้นหาคอลเล็กชันทรัพยากรที่แนะนำทั้งหมดของเราและเครื่องมือออกแบบและพัฒนาเว็บที่ดีที่สุด.
คำบรรยายภาพ
JavaScript คือ การใช้งานบนเดสก์ท็อป เพื่อความสะดวกในการพกพาบนแพลตฟอร์มที่แตกต่างกันรวมถึงทำงานได้ดีเท่ากับแอพพื้นฐาน แอพนี้, คำบรรยายภาพ, เช่นเป็น สร้างขึ้นบนยอดของอิเล็กตรอน. มันเป็นแอพง่าย ๆ ที่ให้คุณค้นหาไฟล์คำบรรยาย (.srt
) เพื่อแนบกับวิดีโอที่คุณกำลังดูอยู่.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017.jpg)
บรรทัดคำสั่ง OSX ที่ยอดเยี่ยม
รายการบรรทัดคำสั่งที่มีประโยชน์และมีประโยชน์มากมายสำหรับ macOS. ที่นี่คุณอาจพบหลายสิ่งหลายอย่างที่สามารถทำได้ผ่าน CLI เช่น “การล้างคิวการพิมพ์”, “ซ่อนโฟลเดอร์ใน Finder”, และ “ป้องกันการนอนหลับของระบบ”.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_2.jpg)
เทรเวอร์
เทรเวอร์ เป็นเพียงการทำเทรวิส CI ออฟไลน์. เทรวิสเป็นบริการบูรณาการอย่างต่อเนื่อง ที่นักพัฒนาทดสอบซอฟต์แวร์ เพื่อดูว่าซอฟต์แวร์ทำงานอย่างถูกต้องหลายสภาพแวดล้อมหรือไม่. เทรเวอร์ยังอยู่ในช่วงเริ่มต้น; ปัจจุบันรองรับเท่านั้น “NodeJS”.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_3.jpg)
อย่างก้าวหน้า
จาวาสคริปต์ที่ดี ห้องสมุดเพื่อโหลดภาพอย่างต่อเนื่อง, ดังนั้นชื่อ รูปภาพขนาดเล็กจะแสดงและเบลอในขณะที่เบราว์เซอร์โหลดภาพเต็ม นี้ ช่วยให้เว็บไซต์ของคุณโหลดเร็วขึ้นมาก โดยเฉพาะอย่างยิ่งถ้ามันมีภาพขนาดใหญ่.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_4.jpg)
QartJS
นี่คือ JavaScript ที่ ทำให้รหัส QR น่าเบื่อน้อยลง. ด้วยวิธีนี้คุณสามารถวางซ้อนรหัส QR ไว้เหนือภาพเช่นภาพของคุณ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_5.jpg)
WP Docker
WP Docker เป็น สภาพแวดล้อม Docker ออกแบบมาเพื่อพัฒนา WordPress โดยเฉพาะ. สภาพแวดล้อมนั้นมีอยู่ในตัวเองและจะไม่ส่งผลกระทบต่อระบบคอมพิวเตอร์ของคุณในกรณีที่คุณทำการกำหนดค่า มันคือ ทางเลือกที่ดีสำหรับ Vagrant, Valet, Local และ MAMP.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_6.jpg)
Rellax
Rellax เป็นไลบรารี JavaScript สำหรับ สร้างผล Parallax ในการเลื่อนหน้า. มันมาพร้อมกับตัวเลือกน้อยและค่อนข้างง่ายต่อการกำหนดค่า มันมีน้ำหนักเบาทำงานเร็วสุดและ ไม่จำเป็นต้องพึ่งพา jQuery ดังนั้นจึงเป็นทางเลือกที่ดีสำหรับห้องสมุดอื่น ๆ ในหมวดหมู่นี้เช่น Parallax.js หรือ Scrollax.js.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_7.jpg)
ปล้อง
อีกหนึ่งห้องสมุด JavaScript ที่ยอดเยี่ยม ข้อต่อ เป็นการสังเคราะห์ เสียงไปยังเว็บไซต์ของคุณ มันคือ สามารถแยกวิเคราะห์และอ่านเว็บไซต์ของคุณ, ในที่สุดสามารถปรับปรุงความน่าเชื่อถือของเว็บไซต์ของคุณสำหรับผู้ใช้ที่มีการเปิดเผยที่บกพร่อง.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_8.jpg)
MonetizeJS
MonetizeJS เป็นไลบรารี JavaScript สำหรับ ใช้แถบได้อย่างง่ายดาย; ง่ายเหมือนกับการใช้ jQuery.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_9.jpg)
Vonic
Vonic เป็นชุดของ UI สำหรับ สร้างด้วยมือถือโดยใช้ Vue.js และ Ionic CSS. ประกอบด้วยส่วนประกอบ UI จำนวนมากที่พบได้ทั่วไปในมือถือรวมถึง ช่องทำเครื่องหมาย, ฟอร์มการค้นหา, Swiper และ Accordion ที่เรียกว่า. คุณสามารถใช้เพื่อสร้างแอพพลิเคชั่นมือถือ แบบเดิม ในเบราว์เซอร์.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_10.jpg)
ห้องสมุดส่วนประกอบ WordPress
10up หนึ่งในชื่อที่โดดเด่นใน WordPress ได้เปิดตัว UI Library ที่ได้รับการออกแบบ โดยเฉพาะสำหรับ WordPress. ซึ่งแตกต่างจากห้องสมุด UI อื่น ๆ ที่ให้รหัส CSS และ HTML เท่านั้น 10Up ยังมีตัวอย่างโค้ด PHP ที่คุณสามารถวางในธีมของคุณ องค์ประกอบประกอบด้วย การนำทางแท็บคำแนะนำทั่วไปและ Blogrol.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_11.jpg)
ประสิทธิภาพการเริ่มต้นใช้งาน JavaScript
ยอดเยี่ยมและ บทความโดยละเอียดจาก Addy Osmani, หนึ่งในวิศวกรของ Google เกี่ยวกับวิธีเขียนจาวาสคริปต์ที่ทำงานรวดเร็วเป็นพิเศษ ฉันแนะนำให้คุณอ่านเพื่อ เพิ่มทักษะ JavaScript ของคุณ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_12.jpg)
KuteJS
กูเตเป็น ไลบรารี JavaScript เพื่อแสดงภาพเคลื่อนไหว. มันโดดเด่นอย่างรวดเร็วและมีประสิทธิภาพสูงสุดในการใช้หน่วยความจำ มีส่วนขยายและเครื่องมือพิเศษเพื่ออนุญาตให้ใช้ภาพเคลื่อนไหวใน CSS, SVG และแม้แต่ปลั๊กอิน jQuery สำหรับไวยากรณ์ที่สะดวกมากขึ้น.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_13.jpg)
กปภ
Progressive Web Application (PWA) เป็นวิธีการที่ ช่วยให้เว็บไซต์ทำงานได้อย่างรวดเร็วและใช้งานออฟไลน์ได้. PWA Rocks นี้เป็นรายการที่ได้รับการอนุมัติจาก Google เป็น PWA ไปยัง เรียนรู้เพิ่มเติมเกี่ยวกับ PWA จาก Google ดูที่: เว็บแอปก้าวหน้า.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_14.jpg)
อัพเดทอัตโนมัติ Github
Github Auto-Updater คือ นักแต่งเพลงไลบรารีที่อนุญาตให้ปลั๊กอินของคุณได้รับการอัปเดตจาก Github. นี่เป็นสคริปต์ที่สะดวกสำหรับนักพัฒนาในการดูแลรักษาปลั๊กอินสำหรับลูกค้าของพวกเขาโดยไม่ต้อง จำเป็นต้องอัปโหลดไปยังที่เก็บ Github.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_15.jpg)
บัตร
การ์ดเป็นห้องสมุด JavaScript ที่ทำให้การป้อนข้อมูลบัตรเครดิตมีส่วนร่วมมากขึ้น และปรับปรุงประสบการณ์ผู้ใช้ของคุณในขณะที่ป้อนหมายเลขบัตรเครดิต มัน ทำงานได้ดีกับ jQuery, React, Angular และ Ember.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_16.jpg)
Graaf
Graaf ให้ภาพซ้อนทับบนหน้าเว็บของคุณเพื่อดูว่ามีการจัดวางตาราง - คอลัมน์แถวรางน้ำ - อย่างไร นอกจากนี้คุณยังสามารถ สร้างสเปคกริดของคุณเอง ใช้ API ที่มีให้.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_17.jpg)
Luxbar
ลักซ์บาร์คือ กรอบ CSS เพื่อสร้างการนำทางที่ตอบสนองได้ง่าย; เพียงเพิ่มสไตล์ชีทและเพิ่ม HTML อย่างถูกต้อง คุณสามารถติดตั้งไลบรารีนี้ผ่าน NPM, Bower หรือเชื่อมโยงสไตล์ชีทโดยตรงจาก CDN.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_18.jpg)
Contrast Grid
รายการของ ตารางแสดงความคมชัดของสีและเกรดความถูกต้องตาม WCAG 2.0. คุณสามารถเปลี่ยนค่าบนโต๊ะและทราบได้อย่างรวดเร็วว่าการผสมสีเป็นไปตามมาตรฐาน WCAG หรือไม่.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_19.jpg)
ToneJS
ToneJS เป็นห้องสมุด JavaScript เพื่อ สร้างเสียงหรือเสียงที่อาจชอบที่มาจากเครื่องดนตรี. ฉันเดาว่าห้องสมุดนี้จะมีประโยชน์สำหรับการสร้างอีมูเลเตอร์เครื่องดนตรีทางเว็บ หรือเอฟเฟกต์เสียงเกม.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-february-2017_20.jpg)