ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (กุมภาพันธ์ 2018)
หลังจากที่ได้รับการคุ้มครองชุดนี้มานานหลายปีฉันได้เห็นเครื่องมือมาและไป เครื่องมือใหม่สองสามตัวถูกปล่อยออกมาเกือบทุกสัปดาห์. อย่างไรก็ตามในช่วงสองสามสัปดาห์ที่ผ่านมาฉันคิดว่ามันช้าลงเล็กน้อยฉันใช้เวลานานกว่าปกติเล็กน้อย ขุดลงไปที่ Github และแหล่งข้อมูลอื่น ๆ เพื่อค้นหาเครื่องมือใหม่ นั่นฟรีโอเพนซอร์สและควรพูดถึงซีรี่ส์นี้.
ในโพสต์วันนี้ฉันมีเครื่องมือหลายอย่างจากเฟรมเวิร์ก JavaScript, เครื่องมือทดสอบและอีกไม่กี่อย่างสำหรับการพัฒนาเว็บไซต์ WordPress ตรวจสอบพวกเขาออก.
Kutt
แอปพลิเคชั่นที่ย่อ URL ด้วยชื่อโดเมนของคุณเอง. มันถูกสร้างขึ้นบนสแต็คที่ทันสมัยชั้นนำอย่าง Node.js, React และ Redux พร้อมกับหยิบจำนวนหนึ่ง คุณสมบัติที่มีในตัวรวมถึง URL ป้องกันด้วยรหัสผ่าน RESTful API, และสถิติรายละเอียดแฟนซีเพื่อตรวจสอบ URL ของคุณ สิ่งที่ดีที่สุดคือฟรีและคุณสามารถโฮสต์บนเซิร์ฟเวอร์ของคุณเอง.

WordHat
WordHat คืออะไร เครื่องมือในการรวม Behat กับ WordPress. Behat เป็นกรอบการพัฒนาแบบโอเพนซอร์สที่ขับเคลื่อนด้วยพฤติกรรม (BDD) สำหรับ PHP ที่คุณสามารถทดสอบแอปพลิเคชัน PHP ของคุณได้อย่างชัดเจนยิ่งขึ้น.
คุณจะพบว่าเครื่องมือนี้มีประโยชน์อย่างยิ่งเนื่องจากธีมและปลั๊กอิน WordPress ของคุณมีความซับซ้อนมากขึ้นกับฟีเจอร์; WordHat และ Behat จะรับรองว่าธีมหรือปลั๊กอินของคุณจะทำงานตามที่คาดไว้ เมื่อผู้ใช้โต้ตอบกับมัน.

เบราว์เซอร์ WP
คล้ายกับ WordHat WP-Browser เป็นส่วนเสริมของ Codeception ออกแบบมาโดยเฉพาะสำหรับแอปพลิเคชั่นธีมและปลั๊กอินของ WordPress. Codeception เป็นเครื่องมือในการดำเนินการ การทดสอบ บนแอปพลิเคชันของคุณคล้ายกับ PHPUnit และ Behat แต่มันมาพร้อมกับอีกมากมาย ในที่ที่คุณสามารถทำได้ การทดสอบเบราว์เซอร์, BDD, การทดสอบการรวมหน่วยและการทดสอบ API.

โหนดสากล WP
ชื่อพูดสำหรับตัวเอง มันเป็นโมดูล NodeJS ที่จะทำสิ่งต่างๆให้เป็นอัตโนมัติเพื่อทำให้ธีมหรือปลั๊กอินของคุณเป็นสากล. ติดตั้งโมดูลและประเภท wpi18n makepot
เพื่อสร้างไฟล์ POT ข้อความที่แปลไม่ได้ในปลั๊กอินหรือธีม WordPress ของคุณ.

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

สร้าง Guten Block
Gutenberg ได้ยินและจะจัดส่งพร้อม WordPress 5.0 นี่คือ โมดูล NPM เพื่อสร้างแผ่นฐานการพัฒนาบล็อกกูเทนแบร์ก กับกองซ้อนที่ทันสมัยเช่น React, Webpack, Babel และ Sass เพียงแค่เรียกใช้บรรทัดคำสั่ง ,สร้าง-Guten บล็อก
, และคุณพร้อมแล้ว.

WP Vue
WP Vue เป็น เทมเพลตที่สร้างด้วย Vue เพื่อแสดงโพสต์ WordPress. เทมเพลตนี้เป็นจุดเริ่มต้นที่ดีหากคุณต้องการสร้างเว็บไซต์ WordPress ของคุณ หัวขาด. ดูว่ามันทำงานอย่างไรในหน้าตัวอย่าง. เปลี่ยน URL ของปลายทางของ WP-API URL จากเว็บไซต์ WordPress ใด ๆ; มันจะ repopulate โพสต์โดยอัตโนมัติกับโพสต์จาก URL ปลายทางใหม่.

แรงบันดาลใจ
เฟรมเวิร์ก JavaScript ใหม่จาก Basecamp. ต่างจาก React หรือ Vue ซึ่งไม่ได้บังคับให้คุณเขียนแอปพลิเคชันทั้งหมดด้วย JavaScript หรือเพิ่มคุณสมบัติสังเคราะห์.
StimulusJS ทำงานใน HTML ธรรมดาที่เรารู้จักแล้ว ข้อมูล-
แอตทริบิวต์ นอกจากนี้ยังไม่จำเป็นต้องมีการกำหนดค่าการสร้างที่ซับซ้อน คุณสามารถ เพียงเพิ่มสคริปต์บนหน้าเว็บเช่นเดียวกับที่คุณทำกับ jQuery และนั่นคือ - เริ่มเขียนสคริปต์ทำให้แอปพลิเคชันของคุณมีชีวิตชีวา.

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

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

Piklist
Piklist เป็น WordPress พัฒนาที่ ช่วยให้คุณสร้างการตั้งค่าเว็บไซต์ที่ซับซ้อนด้วย WordPress พร้อมรหัสน้อย. มันมาพร้อมกับชุดฟังก์ชั่นตัวช่วยและ hooks เพื่อขยายเกือบทุกส่วนใน WordPress เช่นหน้าการตั้งค่า, ฟิลด์ที่กำหนดเอง, ประกาศของผู้ดูแลระบบ, รหัสย่อ, วิดเจ็ต, taxonomies, ผู้ใช้, และอีกมากมาย.

Strapi
เฟรมเวิร์ก CMS agnositic เพื่อสร้าง API เนื้อหา. ช่วยให้คุณสามารถออกแบบโครงสร้างเนื้อหาของคุณเองและ API รวมถึงให้แผงการดูแลระบบที่สวยงามในการจัดการพวกเขา อย่างไรก็ตามมันไม่ได้มีระบบการสร้างเทมเพลตในตัว มัน เสนอให้คุณเลือกห้องสมุดส่วนหน้าใด ๆ ที่คุณต้องการ เช่น React หรือ Vue.

ParcelJS
ParcelJS เป็น Bundler คล้ายกับ Webpack และ Browserify ยกเว้นว่าจะเร็วกว่าและต้องการการกำหนดค่าเป็นศูนย์ มัน รองรับ Bundler การพัฒนาทั่วไปสำหรับ HTML, JS, CSS และ transformers เช่น PostCSS และ Babel out-of-the-xbox ดังนั้นคุณสามารถมุ่งเน้นไปที่รหัสของคุณแทนที่จะเสียเวลากับการกำหนดค่า.

GoodShare
ไลบรารี JavaScript ไปที่ แสดงปุ่มโซเชียลมีเดียที่มีจำนวนแชร์สำหรับโซเชียลมีเดียสองสามตัว. รองรับโซเชียลมีเดียมากมายรวมถึงโซเชียลที่คุณไม่เคยได้ยินเช่น Vkontakte, Odnoklassniki, SurfingBird รวมถึงแพลตฟอร์ม messenging บางอย่างเช่น Skype, WhatsApp และ LINE GoodShare ยังมีอยู่ในองค์ประกอบ Vue.

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

Nerv
Nerv เป็นอีกเรื่องหนึ่ง ไลบรารี VirtualDOM ที่ตอบโต้; ทางเลือกเพื่อ ReactJS. มันนำไวยากรณ์ที่คุ้นเคย JSX ของ React แต่มีความแตกต่างที่โดดเด่นเล็กน้อย Nerv รองรับ Internet Explorer 8! และเป็นเพียงหนึ่งในสามของขนาดการตอบสนอง ยังคง, Nerv สามารถทำงานร่วมกับ React add-on ได้แม้ในกรณีที่ซับซ้อนที่สุด.

HyperappJS
อีกหนึ่งไลบรารี JavaScript ที่ควรค่าแก่การสร้างเว็บแอปพลิเคชัน มัน รวมการจัดการของรัฐเข้ากับเอ็นจิ้น DOM เสมือน ที่รองรับการอัพเดตที่สำคัญและเหตุการณ์รอบการทำงานทั้งหมดโดยไม่มีการขึ้นต่อกัน.

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

Koa11y
แอปพลิเคชันเดสก์ท็อปสำหรับ Windows, MacOS และ Linux เพื่อตรวจสอบปัญหาการเข้าถึงเว็บไซต์. Koa11y จะให้คำบอกกล่าวและคำเตือนว่าเว็บไซต์ของคุณละเมิดมาตรฐานการเข้าถึงหรือไม่.
นี่ควรเป็นเครื่องมือในกล่องเครื่องมือของนักพัฒนาเว็บทุกคน ลองใช้การนำทางเว็บไซต์ด้วยการใช้แป้นพิมพ์ของคุณเป็นเวลาหนึ่งวันเพื่อทำความเข้าใจว่าการช่วยสำหรับการเข้าถึงสำคัญอย่างไร.

TablePlus
ความจริง แอปพลิเคชั่น GUI ที่ดูดีเพื่อจัดการฐานข้อมูล. TablePlus รองรับเอ็นจิ้นฐานข้อมูลที่หลากหลายรวมถึง (แน่นอน) MySQL, SQLite, Redis, Postgres, MS SQL และอีกมากมาย TablePlus พร้อมใช้งานสำหรับ macOS และ Windows.
