ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (สิงหาคม 2559)
ในบทความนี้เรานำเสนอกรอบรายการและเครื่องมือต่างๆ มุ่งสู่การพัฒนาเว็บ. น่าสนใจฉันได้พบเครื่องมือและกรอบการทำงานบางส่วนที่มาจากองค์กรขนาดใหญ่เช่น Microsoft และ Alibaba.
นี่เป็นสัญญาณที่ดีเนื่องจากมี บริษัท หลายแห่งที่ให้การสนับสนุนโอเพนซอร์สและช่วยสร้างเว็บให้ดีขึ้น ลองมาดูสิ่งที่อยู่ในร้านสำหรับการรวบรวมของเดือนนี้.
คลิกเพื่อดูข้อมูลเพิ่มเติมคลิกเพื่อดูข้อมูลเพิ่มเติม
ค้นหาคอลเล็กชันทรัพยากรที่แนะนำทั้งหมดของเราและเครื่องมือออกแบบและพัฒนาเว็บที่ดีที่สุด.
CuteStrap
เฟรมเวิร์ก UI ที่สร้างขึ้นบน Sass มันมาพร้อมกับเว็บอินเตอร์เฟสทั่วไปเช่นฟอร์มการนำทางและปุ่มซึ่งน่าจะเพียงพอในหลายกรณี หากคุณพบเฟรมเวิร์กยอดนิยมเช่น Bootstrap และ Foundation ที่ท่วมท้น, Cutestrap อาจเป็นทางเลือกที่ดีสำหรับคุณ.

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

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

Weex
Weex เป็นกรอบจากอาลีบาบาในการสร้างแอพมือถือด้วย HTML, CSS และ JavaScript มันมาพร้อมกับ Modules, UI components, DevTools และ CLI ของตัวเองที่ออกแบบมาสำหรับมือถือและการพัฒนาที่รวดเร็ว.

Microsoft Web Framework (MWF)
เฟรมเวิร์กจาก Microsoft ซึ่งเป็นองค์ประกอบ UI ใน MWF ถูกสร้างขึ้นตามภาษาการออกแบบของ Microsoft Modern: แบบเรียบสะอาดและเรียบง่าย เฟรมเวิร์กนี้นอกเหนือจากองค์ประกอบ UI ยังให้ทิศทางเกี่ยวกับการใช้ Colors, วิชาการพิมพ์และแอนิเมชัน ฉันคิดว่า Material Design Lite ได้พบกับคู่แข่งที่เท่าเทียมกันในที่สุด.

จำเป็น
จำเป็น เป็นเฟรมเวิร์กที่มีอินเตอร์เฟสน้อยที่สุดที่น่าพอใจ มันมีน้ำหนักเบา, ไม่มีจาวาสคริปต์, และ Rogue ดั้งเดิม, - ซินแท็กซ์ฮิกเกอร์ที่เน้นใช้ Ruby.

Fontea
Fontea เป็นส่วนเสริม Photoshop ฟรีสำหรับจัดการและใช้ Google Fonts นับร้อย ๆ คุณสามารถค้นหาแบบอักษรจากภายใน Photoshop ดูตัวอย่างและใช้แบบอักษรในการออกแบบของคุณได้โดยตรง - ปรับปรุงกระบวนการทำงานของคุณ.

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

Intercooler
InterCoolerJS เป็นไลบรารี JavaScript ที่ทำให้การใช้ AJAX บนเว็บไซต์ของคุณง่ายเหมือนกับการเพิ่มแอตทริบิวต์ HTML มันมาพร้อมกับคำแนะนำมากมายและตัวอย่างมากมายที่จะช่วยคุณเริ่มต้นใช้งานเครื่องมือ.

Picla
Picla เป็นปลั๊กอิน jQuery เพื่อแสดงป้ายกำกับภาพที่ดึงมาจากภาพ Alt
คุณลักษณะ มีตัวเลือกสองสามตัวเลือกเพื่อให้คุณเพิ่มสไตล์และการเคลื่อนไหวที่กำหนดเองลงบนฉลาก Picla สามารถติดตั้งเป็นการอ้างอิงเว็บไซต์ของคุณด้วย Bower.

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

MegaBoilerplate
MegaBoilerplate เป็นตัวกำเนิดการตั้งค่าการพัฒนาสแตกได้อย่างรวดเร็ว ไปที่เว็บไซต์และเลือกเครื่องมือและไลบรารี (Node.js, HTML5, Vanilla JavaScript และ Electron) ที่คุณจะใช้เป็นฐานเว็บไซต์ของคุณ มันจะรวบรวมและกำหนดค่าทุกสิ่งที่คุณต้องการในแพ็คเกจซิปพร้อมสำหรับการดาวน์โหลด.

บุคคลที่ร้องโหยหวน
ไลบรารี JavaScript เพื่อแสดงเครื่องเล่นเสียงที่ทันสมัยโดยใช้ Web Audio API, บุคคลที่ร้องโหยหวน ทำงานในเบราว์เซอร์ที่เก่าเท่ากับ IE9 และรองรับตัวแปลงสัญญาณเสียงมากมายเช่น MP3, WEBM, WAV คุณสมบัติมากมายโมดูลาร์และทำงานได้โดยไม่มีไลบรารี่ภายนอก.

SuperEmbed
SuperEmbed เป็นห้องสมุด JavaScript ขนาดเล็กที่ทำให้วัตถุฝังตัวตอบสนองในขณะที่ยังคงอัตราส่วนเดิมไว้ รองรับหลากหลายแหล่งรวมทั้ง Youtube, Flickr, Vine, VideoPress และ DailyMotion ดูตัวอย่าง.

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

พลิกทั่วไป
FlippingTypical ช่วยให้คุณดูแบบอักษรทั้งหมดที่ติดตั้งในระบบของคุณ ฉันพบว่าแอปนี้สะดวกกว่าการใช้ FontBook แอปใน macOS ฉันพิมพ์ข้อความแบบสุ่มและดูว่าแบบอักษรใดในระบบของฉันดูดีที่สุด.

LightTable
IDE ใหม่ที่ฉันคิดว่าคุ้มค่ากับการสำรวจ มันเริ่มเป็นโครงการ KickStarter ซึ่งได้รับการสนับสนุนโดย Matt Mullenweg (ผู้ก่อตั้ง WordPress) และในที่สุดก็กลายเป็นโอเพ่นซอร์ส คุณสามารถรับชมวิดีโอนี้เพื่อรับทราบว่า IDE นี้ยอดเยี่ยมเพียงใด.

คอมเพรสเซอร์
คอมเพรสเซอร์ เป็นเว็บแอปที่บีบอัดไฟล์ภาพให้มีขนาดเล็กที่สุดโดยไม่สูญเสียคุณภาพของภาพ รองรับ JPG, GIF, PNG และ SVG เช่นกัน แอพนี้ฟรี.

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

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