ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (มีนาคม 2560)
ด้วย CLI (Command Line Interface) เราสามารถทำได้ ปรับปรุงและพัฒนาเวิร์กโฟลว์อัตโนมัติ. และนั่นเป็นสาเหตุที่ในภาคนี้เราได้รวม CLI จำนวนมากที่คุณสามารถติดตั้งบนเครื่องคอมพิวเตอร์ของคุณหรือเรียกใช้บางสิ่งบนเซิร์ฟเวอร์ ยิ่งไปกว่านั้นเรายังรวมถึงบางส่วน เครื่องมือ PHP, โปรแกรมเสริมของเบราว์เซอร์และไลบรารี JavaScript. ตรวจสอบพวกเขาออก.
คลิกเพื่อดูข้อมูลเพิ่มเติมคลิกเพื่อดูข้อมูลเพิ่มเติม
ค้นหาคอลเล็กชันทรัพยากรที่แนะนำทั้งหมดของเราและเครื่องมือออกแบบและพัฒนาเว็บที่ดีที่สุด.
Guetzli
เข้ารหัสใหม่จาก Google ที่ ช่วยให้การบีบอัดภาพลดลงสูงสุดถึง 35% จากขนาดเริ่มต้นในขณะที่รักษาคุณภาพ มันค่อนข้างเป็นความก้าวหน้าเนื่องจากตัวเข้ารหัสโอเพนซอร์สที่คล้ายกันเช่น JPEGOptim และ jpegtran ถูก จำกัด ไว้ที่ 20% เท่านั้นเมื่อใช้งาน avarage. ฉันเห็นได้ว่าจะมีแอพและปลั๊กอินจำนวนมากสำหรับแพลตฟอร์ม CMS ที่รวม Guetzli เพื่อเพิ่มประสิทธิภาพไฟล์ JPEG.

Roadmap สำหรับนักพัฒนา
ตามชื่อแสดงถึง Developer Roadmap คือ infographic การเดินทางสู่การเป็นนักพัฒนาเว็บ. มีสามหลักสูตร Front-end, Back-end และ DevOps แผนที่ถนนเหล่านี้เป็นเหมือนแผนที่ และมีการอ้างอิงที่ดีในการดู สิ่งที่เราอาจจะพลาดและที่ที่เรากำลังจะไปต่อไป.

Netlify CMS
SmashingMagazine เพิ่งสร้าง ตัวหนาย้ายไปยังคู WordPress และลองสิ่งใหม่ทั้งหมดด้วย CMS ใหม่ที่เรียกว่า Netlify CMS มันเป็น CMS ใหม่ที่สร้างขึ้นบน React.js และสามารถ ผสานรวมกับเครื่องมือสร้างเว็บไซต์แบบคงที่ใด ๆ เช่น Jekyll, Hugo และ MiddleMan.

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

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

AR.js
AR.js คือ ไลบรารี JavaScript ต่างจากที่อื่น. ห้องสมุดนี้ช่วยให้เราสามารถสร้างความเป็นจริงด้วยเทคโนโลยีเว็บและ วิ่งได้อย่างรวดเร็วบนโทรศัพท์มือถือ.

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

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

Goops
Goops เป็น handy CLI ที่จะวิเคราะห์ไดเรกทอรีโครงการของคุณ และกำหนดไดเรกทอรีและไฟล์ที่จะเพิ่มใน .gitignore
. CLI สามารถติดตั้งผ่าน NPM เมื่อติดตั้งแล้วให้พิมพ์ goops
และทำ.

แก้ไขข้อผิดพลาด CSS
DebugCSS คือ ยูทิลิตี้ดรอปดาวน์ CSS ที่ให้คุณวิเคราะห์และตรวจสอบความถูกต้องของเอาต์พุต CSS บนเบราว์เซอร์. มันทำงานคล้ายกับ Alix เมื่อคุณโหลดสไตล์ชีท debugCSS หรือใช้ bookmarklet ไฮไลต์องค์ประกอบบนหน้าเว็บที่มีข้อผิดพลาดหรือคำเตือน.

EagleJS
EagleJS เป็น ไลบรารี JavaScript เพื่อสร้างงานนำเสนอ คล้ายกับ RevealJS EagleJS มีความแตกต่างในบางวิธี; มันถูกสร้างขึ้นโดยใช้ Vue.js, กรอบงาน JavaScript MVC และใช้ปั๊ก เป็นระบบ templating เพื่อสร้างสไลด์.

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

อิฐ
อิฐนั้น ไลบรารี JavaScript ที่ออกแบบมาเพื่อสร้าง UI เว็บแอปพลิเคชัน. คุณจะพบบางสิ่งที่พบได้ทั่วไปเช่นปฏิทินเมนูและรูปแบบในองค์ประกอบที่รวมมาด้วยนอกจากนี้ยังมาพร้อมกับ "การจัดเก็บข้อมูล IndexedDB" องค์ประกอบที่จะช่วยให้คุณ เก็บข้อมูลบนฝั่งไคลเอ็นต์โดยใช้ IndexedDB.

OctoTree
OctoTree เป็นยูทิลิตี้ที่ดีที่ช่วยให้สามารถเรียกดูซอร์สโค้ดและไฟล์บน Github พร้อมโครงสร้างทรีเช่นเดียวกับใน IDEs หรือโปรแกรมแก้ไขโค้ด มันมาเป็นส่วนเสริมสำหรับ Chrome, Safari, Firefox และ Opera และมีอยู่ในที่เก็บอย่างเป็นทางการของพวกเขา Octotree สนับสนุนที่เก็บส่วนตัวและ Enterprise Github.

ประกาศ Github
อีกส่วนขยาย Github ที่มีประโยชน์สำหรับ Chrome เมื่อติดตั้งแล้วคุณจะสามารถรับการแจ้งเตือนได้แม้ว่าคุณจะไม่ได้อยู่ในหน้า Github ปลั๊กอินที่ยอดเยี่ยมหากคุณต้องการที่จะอยู่ในวงเดียวกับที่เก็บของคุณ.

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

PHPStan
CLI ที่สแกนไฟล์ PHP เพื่อค้นหาข้อผิดพลาดโดยไม่ต้องดำเนินการรันไทม์ ซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้สภาพแวดล้อม PHP แบบเต็มสแต็คเพื่อดีบักไฟล์ PHP ในโครงการของคุณ.

หม้อไอน้ำ NGINX
คอลเลกชันของการกำหนดค่า Nginx ทั่วไปซึ่งรวมถึงการแคชแบ็กเอนด์การเชื่อมต่อและการ จำกัด อัตราการร้องขอและแนวทางปฏิบัติที่ดีที่สุดอื่น ๆ เพื่อเพิ่มไซต์ของคุณเพื่อเพิ่มความเร็วและปรับแต่งเพื่อเร่งการจราจร.

ฟอง
Bubbly เป็นบรรทัดคำสั่งที่ยอดเยี่ยมที่คุณสามารถติดตั้งบนเซิร์ฟเวอร์ของคุณเพื่อสร้างจัดการและต่ออายุใบรับรองด้วย Let's Encrypt การใช้ SSL ตอนนี้เริ่มง่ายขึ้นมากแล้ว.

ตารางวาฟเฟิล
กระนั้นกรอบกริด CSS อีกอันที่สร้างขึ้นด้วย Flexbox ที่ฉันคิดว่าคุณควรพิจารณา.
