ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (ตุลาคม 2018)

แตกต่างจากการพัฒนาเว็บอุตสาหกรรมอื่น ๆ ที่มีการเปลี่ยนแปลงโดย leaps และขอบเขต มีเครื่องมือวิธีการและกรอบใหม่ ๆ ที่พัฒนาขึ้นเกือบทุกวันเพื่อรองรับ แนวโน้มใหม่และความก้าวหน้าทางเทคโนโลยี ในอุตสาหกรรมเว็บ.

ดังนั้นนี่คือรายการเครื่องมือและทรัพยากรล่าสุดรวมถึงกรอบการทำงานของ PHP ที่ใช้งานได้ง่าย การทดสอบ E2E สำหรับแอปพลิเคชัน PHP ของคุณ, เครื่องมือในการสร้างสีที่สอดคล้องกับมาตรฐานการเข้าถึง W3C และส่วนขยาย Vue.js จำนวนหนึ่ง กระโดดเข้ามาเพื่อดูรายการทั้งหมด.

แอพ Keyframes

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

Symfony Panther

“Symfony Panther” เป็นกรอบ PHP ที่น่าทึ่งจาก Symfony เพื่อทำการทดสอบ E2E (End-to-end) มันมาพร้อมกับมัน เว็บเซิร์ฟเวอร์ในตัว และสามารถใช้ประโยชน์จาก Chrome ที่ติดตั้งในคอมพิวเตอร์ของคุณเพื่อทำการทดสอบ E2E.

นอกจากนี้ยังรองรับ การประมวลผล JavaScript, การจับภาพหน้าจอ, ไดรเวอร์ Selenium ที่กำหนดเอง, Chrome และไคลเอนต์ Firefox เป็นเฟรมเวิร์กแบบสแตนด์อโลนคุณสามารถรวม Panther ในโครงการ PHP ใด ๆ เช่น WordPress, Joomla, เป็นต้น.

TrendyPalettes

คอลเลกชันของจานสีที่สวยงาม คอลเลกชันมีหลายพัน จานสีที่หยิบด้วยมือ. ผู้ใช้สามารถส่งจานสีใหม่ดังนั้นจึงมีจานสีใหม่เพิ่มเข้ามาทุกวัน TrendyPalettes ยังมีให้ใช้งานในฐานะส่วนขยายของ Chrome.

Eagle.js

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

Grape.js

GrapeJS เป็นผู้สร้างเว็บโอเพนซอร์ซที่ให้คุณสร้างเว็บเพจได้ง่ายๆ องค์ประกอบการลากและวาง. มันมีองค์ประกอบทั่วไปบางอย่างเช่น Text, Image, Vidoe, Column, Map, Quote เป็นต้นคุณสามารถส่งออกไปยัง HTML และ CSS และผลลัพธ์ก็เรียบร้อยน่าอัศจรรย์ซึ่งแตกต่างจากเครื่องมือที่คล้ายกันที่ฉันเคยลองมาก่อน ตรวจสอบตัวอย่าง.

น่าเบื่อ

Vapid เป็น CMS ใหม่ที่สร้างขึ้นด้วย Node.js ด้วยวิธีการที่น่าสนใจและไม่เหมือนใคร CMS ส่วนใหญ่สมมติว่าคุณต้องการรวมข้อมูลประเภทใหม่จะต้องกำหนดอินพุตที่กำหนดเองในพื้นที่ Dashboard / Admin ก่อน.

ด้วย Vapid เป็นสิ่งที่ตรงกันข้ามที่คุณสามารถกำหนดเทมเพลตและ Vapid จะสร้างอินพุตในพื้นที่ Dashboard / Admin โดยอัตโนมัติ มันเป็นแพคเกจ NPM.

การแจ้งเตือน WP CLI

ชื่อกล่าวมันทั้งหมด มันเป็นแพคเกจ WP-CLI ที่กำหนดเองเพื่อแสดงการแจ้งเตือนของระบบปฏิบัติการเมื่อ WP-CLI ดำเนินการเสร็จแล้ว ค่อนข้างแฟนซี.

CSSGr.id

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

เลื่อนคำแนะนำ

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

PristineJS

ไลบรารี JavaScript เพื่อเพิ่มการตรวจสอบความถูกต้องให้กับอินพุต HTML5 มาพร้อมกับการตรวจสอบความถูกต้องบางประเภทแล้วพร้อมกับ “type = อีเมล”, และ “type = จำนวน” ตัวอย่างเช่น. แต่ถ้าคุณต้องการ เครื่องมือตรวจสอบความถูกต้องที่กำหนดเองที่ไม่ได้ใช้งานใน HTML5, ไลบรารี JavaScript นี้จะมีประโยชน์.

SelectionJS

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

Webdash

Webdash เป็นเครื่องมือที่สามารถ แสดงโครงการของคุณลงในส่วนต่อประสาน GUI. มันเชื่อมต่อผ่าน package.json ไฟล์ในคอมพิวเตอร์ของคุณ ดังนั้นจึงสามารถแสดงรายการของ แพ็กเกจ NPM, อัพเดตแพ็กเกจ, สคริปต์ที่ลงทะเบียน, รันสคริปต์, และดูตัวอย่างไฟล์ README ได้จาก Webdash น่ากลัวมาก!

CanJS

เฟรมเวิร์ก JavaScript เพื่อสร้างเว็บอินเตอร์เฟส คล้ายกับ React.js พร้อมกับคุณสมบัติเพิ่มเติมบางอย่างและมาพร้อมกับ เราเตอร์ฟังก์ชัน DOM Utilities และ AJAX ได้ทันทีที่ออกจากกล่อง. นอกจากนี้ยังมีการสนับสนุนชุมชนที่ใช้งานค่อนข้างให้ส่วนขยายบางส่วน.

CheerioJS

ไลบรารี JavaScript ที่ใช้ข้อมูลจำเพาะ jQuery Core สำหรับ DOM (Document Object Model) และได้รับการออกแบบให้ใช้บนฝั่งเซิร์ฟเวอร์ ถ้าคุณคือ ทำงานกับ Node.js ในขณะที่เพลิดเพลินกับไวยากรณ์ jQuery ชอบ addClass (), attr (), และ หา(), นี่คือ JavaScript ที่คุณต้องการ.

กล่องสี

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

คุณสมบัติที่พิมพ์ใน PHP 7.4

PHP7.3 ใกล้เข้ามาแล้วดังที่เราได้กล่าวถึงในตอนก่อนหน้า แต่ PHP7.4 อยู่ในแผนอยู่แล้ว หนึ่งในแผนคืออสังหาริมทรัพย์ประเภท ซึ่งหมายความว่าคุณจะสามารถ เขียนสิ่งที่ชอบ ประชาชน int $ id; ในคลาส PHP ของคุณ. เป็นการเปลี่ยนแปลงครั้งใหญ่ที่สามารถช่วยลดข้อบกพร่องของแอปพลิเคชัน PHP ได้อย่างมาก.

ลายฉลุ

คอมไพเลอร์ JavaScript ที่ทำให้การสร้าง Web Components ง่ายขึ้นด้วยมาตรฐานล่าสุด ยิ่งไปกว่านั้น StencilJS ยังเพิ่มวิธีการพัฒนาเว็บที่ทันสมัยในการผสมผสานรวมถึง การสนับสนุน JSX, ปฏิกิริยา, เราเตอร์และการจัดการสถานะ ใช้ปลั๊กอิน.

Vue Infinite Loading

ส่วนขยาย Vue เพื่อสร้างหน้าเลื่อนที่ไม่มีที่สิ้นสุด มันเป็นมิตรกับมือถือและ เข้ากันได้กับองค์ประกอบที่เลื่อนได้ใด ๆ. นอกจากนี้ยังรองรับการเลื่อนสองทิศทางและที่สำคัญที่สุดคือประหยัดเวลาได้มาก.

V คลิปบอร์ด

ส่วนขยาย Vue.js ที่กำหนดเองที่ทำเช่นนั้น ง่ายต่อการสร้าง “สำเนา” ปุ่ม. คุณสามารถเพิ่ม V-คลิปบอร์ด คุณลักษณะให้กับปุ่มและคุณพร้อมแล้ว ส่วนขยาย Vue.js นี้ใช้ได้กับทุกเบราว์เซอร์ที่ทันสมัยเช่นเดียวกับ IE11 และล่าสุด.

เลือก Vue

องค์ประกอบ Vue.js ที่มีฟังก์ชั่นคล้ายกับ Select2 มันถูกออกแบบมาสำหรับ Vue.js ที่อนุญาตให้เป็น เข้ากันได้กับ Vuex, Templating ที่กำหนดเอง, และความดีอื่น ๆ ของ Vue.js.