ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (สิงหาคม 2561)
ดูเหมือนว่าชุมชนการพัฒนาจะมีการใช้งานมากขึ้นเมื่อเร็ว ๆ นี้เนื่องจากมีเครื่องมือใหม่ ๆ ออกมามากมายในช่วงไม่กี่เดือนที่ผ่านมา ในชุดนี้ฉันจะเน้นเครื่องมือบางอย่างที่ควรค่าแก่การกล่าวถึง.
ในบรรดารายการเครื่องมือมี ไลบรารี JavaScript เพื่อสร้างข้อมูลจำลองซึ่งเป็นเครื่องมือในการแชร์ไฟล์ภายในเครือข่ายท้องถิ่น, และอีกหนึ่งที่จะช่วยให้คุณสามารถบันทึกเซสชันเทอร์มินัลลงในภาพเคลื่อนไหว SVG ฟังดูดีนะ? ตรวจสอบรายการทั้งหมดด้านล่าง.
Pushbar.js
มันเป็นห้องสมุด JavaScript สำหรับการสร้างลิ้นชักเลื่อน โดยทั่วไปแล้วลิ้นชักเลื่อนจะใช้เพื่อแสดงการนำทางเมนูเว็บไซต์ แต่คุณสามารถใช้ห้องสมุดนี้เพื่อแสดงสิ่งที่เหมาะสมสำหรับเว็บไซต์ของคุณ Pushbar.js คือ ปรับแต่งได้อย่างเต็มที่และการพึ่งพาฟรี jQuery ไม่จำเป็นต้องใช้.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018.jpg)
Carbon Now CLI
Carbon CLI เป็นแพ็คเกจของ Node.js สร้างภาพหน้าจอของรหัส สวยงามผ่านอินเตอร์เฟสบรรทัดคำสั่ง เครื่องมือนี้ได้รับแรงบันดาลใจจาก carbon.now.sh ซึ่งคุณสามารถทำได้ผ่าน GUI ที่ดีบนเบราว์เซอร์.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018.gif)
Faker.js
ไลบรารี JavaScript ไปที่ สร้างข้อมูลจำลอง. รองรับการสร้างข้อมูลจำนวนมากเช่นชื่อที่อยู่ทางไปรษณีย์ชื่อ บริษัท หมายเลขโทรศัพท์วันที่และอื่น ๆ อีกมากมาย ข้อมูลทั้งหมดนี้มีประโยชน์มากสำหรับ ทดสอบแอปพลิเคชันเว็บของคุณ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_2.jpg)
TermToSVG
TermToSVG เป็น เครื่องบันทึก terminal Linux ที่ทำให้เซสชันบรรทัดคำสั่งของคุณเป็นภาพเคลื่อนไหว SVG มันเป็นเครื่องมือที่มีประโยชน์สำหรับนักพัฒนาสำหรับการเขียนบทช่วยสอน.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_3.jpg)
ตัวจัดการการสำรองฐานข้อมูล
มันเป็นห้องสมุด PHP และเป็นชื่อที่แสดงถึงมันมีชุดของฟังก์ชั่น จัดการฐานข้อมูลสำรองและคืนค่า. ไลบรารีสนับสนุนบริการต่าง ๆ เพื่อส่งหรือดึงข้อมูลสำรองรวมถึง Dropbox, Amazon S3, FTP และ SFTP และ Rackloud Cloud.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_4.jpg)
ตอบสนอง Bits
คอลเล็กชั่นเทคนิคและเคล็ดลับ React.js ที่มีขนาดใหญ่โต React Bits ครอบคลุมรูปแบบการออกแบบทั่วไปสไตล์และเคล็ดลับประสิทธิภาพ นี่คือสิ่งที่แท้จริง ทรัพยากรที่ยอดเยี่ยมในการยกระดับทักษะ React.js ของคุณ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_5.jpg)
ภาษา DSS
DSS หมายถึง StyleSheets ที่กำหนดได้ซึ่งเป็นเครื่องมือการเขียน CSS ใหม่ มันทำงานอย่างไรและมันสามารถนำไปใช้กับงานประจำวันได้อย่างไร ฉันไม่รู้จริง ๆ จนถึงตอนนี้ แต่มันดูเท่และมันใหม่อยู่ในรายชื่อ ขอบคุณ!
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_6.jpg)
PurgeCSS
PurgeCSS เป็นแพ็คเกจ NPM ที่อนุญาต เพิ่มประสิทธิภาพการส่งออก CSS ในเว็บแอปพลิเคชันของคุณโดยลบสิ่งที่ไม่ได้ใช้งานออก เครื่องมือนี้มีการสนับสนุนเครื่องมือในตัวที่หลากหลายซึ่งรวมถึง Gulp, Grunt, Grunt, Webpack และ PostCSS ดังนั้นคุณจึงสามารถ รวมเข้ากับโครงการของคุณ ทันที.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_7.jpg)
RFS
RFS ย่อมาจาก Responsive Font Size และเป็นโครงการที่น่าสนใจที่จะจัดการกับหนึ่งในสิ่งที่ยากที่สุดในเว็บนั่นคือการพูดเพื่อ ทำให้ขนาดตัวอักษรตอบสนอง, ในลักษณะที่ขนาดจะเป็นไปตามขนาดวิวพอร์ตของอุปกรณ์ RFS มีให้ในรูปแบบ NPM
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_8.jpg)
SimpleBar
ไลบรารี JavaScript เพื่อสร้างแถบเลื่อนแบบกำหนดเอง SimpleBar ช่วยให้คุณกำหนดสไตล์การเลื่อนได้ จับคู่สไตล์ไซต์ของคุณโดยใช้ CSS เหมือนกับองค์ประกอบ HTML อื่น ๆ บนเว็บไซต์ เนื่องจากข้อ จำกัด ของแพลตฟอร์มและเบราว์เซอร์การจัดแต่งแถบเลื่อนของเบราว์เซอร์ที่เคยซับซ้อน แต่ SimpleBar ทำให้มันง่ายมาก.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_9.jpg)
Larastan
Larastan เป็นเสื้อคลุมของ PHPStan สำหรับ Laravel. PHPStan เป็นเครื่องมือที่จะช่วยให้คุณตรวจสอบรหัสของคุณเพื่อหาข้อผิดพลาดที่อาจเกิดขึ้นโดยไม่จำเป็นต้องเขียนหน่วยทดสอบ มันตรวจสอบสิ่งต่าง ๆ มากมายรวมถึงการมีอยู่ของวิธีการที่เรียกว่าและฟังก์ชั่นประเภทที่กำหนดให้กับคุณสมบัติจำนวนและประเภทที่กำหนดให้กับตัวสร้างคลาสและตรวจสอบ phpDocs.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_10.jpg)
PWMetrics
PWMetrics เป็นเครื่องมือที่รวบรวมเมตริก Progressive Web Apps ผ่านอินเตอร์เฟสบรรทัดคำสั่งที่พัฒนาโดย Paul Irish เครื่องมือนี้ขับเคลื่อนโดย Lighthouse และมีให้ในรูปแบบแพ็คเกจ NPM มันมีตัวเลือกมากมายให้ กำหนดค่าการวัดประสิทธิภาพการทดสอบ, และความคาดหวังที่คุณต้องการจากการทดสอบ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_11.jpg)
สันติภาพ
Pax เป็นตัวรวม JavaScript เพื่อ รวบรวมโมดูล JavaScript เป็นไฟล์ที่ใช้งานได้สำหรับเบราว์เซอร์. Pax สัญญาความเร็ว มันรวบรวมได้เร็วกว่าผู้รวมกลุ่มอื่น รองรับ ES6 อย่างสมบูรณ์ นำเข้า
และ ส่งออก
ไวยากรณ์และไวยากรณ์ CommonJS นำเข้า
. แตกต่าง สันติภาพ
ถูกเขียนด้วย Rust และมีให้ใช้งานผ่านรีจิสตรีแพ็คเกจเรียกว่า Cargo.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_12.jpg)
SustyWP
SustyWP คือ ชุดรูปแบบ WordPress มีวัตถุประสงค์เพื่อให้ดีขึ้น; เพื่อลดปริมาณการปล่อยก๊าซคาร์บอนไดออกไซด์โดยลดขนาดให้เล็กที่สุดเท่าที่จะเป็นไปได้ มันมีน้ำหนักเพียง 7-6kb เมื่อโหลดบนเบราว์เซอร์ มัน รวดเร็วและเบา, และในทางกลับกันมันใช้ทรัพยากรน้อยลง (เช่นกระแสไฟฟ้า) ในการโหลดเว็บไซต์ ลองใช้ชุดรูปแบบ backstory ในโพสต์นี้โดย Jack Lenox.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_13.jpg)
ห้องสมุด Doodle
การรวบรวมภาพวาดเส้นขยุกขยิก, Doodle Library มีภาพวาดมากมายในคอลเลกชันและพวกเขาถูกจัดกลุ่มเป็นหลายประเภทใบหน้าสถานที่สัตว์ ฯลฯ. ภาพวาดมีให้ในรูปแบบ SVG และเผยแพร่ภายใต้ Creative Common Attribution 4.0
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_14.jpg)
Tilt.js
ปลั๊กอิน jQuery ถึง สร้างแฟนซี การเอียง ผล คล้ายกับภาพตัวอย่างขนาดย่อที่เราเห็นบน Apple TV มันไม่ต้องการ CSS เพิ่มเติม พวกเขายังให้ตัวอย่างของการใช้งานในหน้านี้เพื่อใช้มันค่อนข้างตรงไปตรงมา ทำให้แน่ใจว่าคุณ ตรวจสอบผลแสงจ้า; มันเจ๋งจริงๆ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_15.jpg)
Fileroom
Fileroom เป็นเว็บแอปพลิเคชันสำหรับ การแชร์ไฟล์แบบเพียร์ทูเพียร์ในเครือข่ายเดียวกัน. คุณสามารถแชร์ไฟล์กับเพื่อนร่วมงานของคุณได้ง่ายๆเพียงแค่ลาก -n-drop โดยไม่คำนึงถึงระบบปฏิบัติการ มันทำงานได้ใน Windows, macOS, Linux.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_16.jpg)
Coolhue
คอลเลกชันของการไล่ระดับสีที่เลือกด้วยมือ Coolhue ช่วยให้คุณสามารถคว้าชุดจานสีสำหรับแอพ Photoshop และ Sketch หรือ ติดตั้งลงในโครงการของคุณ การใช้ ซุ้มไม้ในสวน
หรือ NPM
. วิธีนี้จะช่วยคุณประหยัดเวลาในการเลือกสีสำหรับเว็บไซต์ที่กำลังจะมาถึง.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_17.jpg)
โขดหิน
ไลบรารี JavaScript ง่าย ๆ ในการสร้าง UI Reef ไม่มีระฆังและเสียงนกหวีดทั้งหมดจากไลบรารีขนาดใหญ่เช่น React.js หรือ Vue.js แต่ถ้าสิ่งที่คุณต้องการคือ แสดงผล UI เพียงป้อนข้อมูล และเทมเพลตแนวปะการังอาจเป็นทางเลือกที่ยอดเยี่ยม มันมีน้ำหนักเพียง 2Kb
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_18.jpg)
เขียวตลอดปี
คอลเลกชันขององค์ประกอบ UI จาก Segment.io ส่วนประกอบค่อนข้างหลากหลาย นอกเหนือจากองค์ประกอบปกติบางอย่างเช่นปุ่ม, ไอคอน, การป้อนข้อความมีบางอย่างที่ฉันคิดว่าเป็นเอกลักษณ์ของ Evergreen เช่น Toaster, Side Sheet และ Dial Dial.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-august-2018_19.jpg)