ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (ธันวาคม 2017)
“CMS หัวขาด” ได้รับความสนใจมากในวันนี้ โดยสังเขป, “CMS หัวขาด” ไม่ได้จัดการกับส่วนหน้า; CMS เท่านั้น ตีแผ่เนื้อหา มักจะ ในรูปแบบของ RESTful API ในขณะที่นักพัฒนาอาจใช้สิ่งที่พวกเขาต้องการแสดงเนื้อหา ด้วยความนิยมที่เพิ่มขึ้นของการปฏิบัตินี้, กรอบใหม่เกิดขึ้นเพื่อตั้งค่าและทำงานได้อย่างรวดเร็ว.
ดังนั้นในรอบนี้ฉันได้รวบรวมเฟรมเวิร์กเหล่านี้พร้อมกับเครื่องมือที่เป็นประโยชน์อื่น ๆ ที่ควรค่าแก่การตรวจสอบ.
หัว WP เริ่มต้น
นี่เป็นธีมเริ่มต้น WordPress แต่ไม่เหมือนธีมอื่น ๆ ธีมเริ่มต้นนี้ใช้ประโยชน์จาก WP-API เพื่อรับเนื้อหาจากนั้นแสดงเป็น HTML แบบคงที่ ใช้ Node และทำเว็บไซต์ของคุณใหม่ “หัวขาด”.

VueStoreFront
VueStoreFront เป็นอีกหนึ่ง “CMS หัวขาด” กรอบ. สร้างขึ้นที่ด้านบนของ Vue.js และโหนด, VueStoreFront และถูกออกแบบมาสำหรับแพลตฟอร์ม e-Commerce อย่าง Magento, Prestashop และ Shopware ผ่านทาง API นอกจากนี้ยังรวมวิธีการ PWA ซึ่ง อนุญาตให้ไซต์ใช้งานได้ ออฟไลน์.

GatsbyJS
Gatsby เป็น กำเนิดเว็บไซต์คงที่ สร้างด้วย React.js คุณสามารถใช้ CMS กับ API เช่น WordPress, Markdown, JSON เพื่อฟีดเนื้อหา ในทำนองเดียวกันมันใช้เทคโนโลยีล่าสุดบางอย่างเช่น Node, PWA และ React ที่ให้โหลดได้อย่างรวดเร็วอย่างไม่น่าเชื่อ.

DustPress
DustPress เป็น WordPress ธีมเริ่มต้นด้วยวิธีการพัฒนาที่ทันสมัย. ใช้ประโยชน์จากภาษาแม่แบบ Dust.js, DustPress แยกเค้าโครงแม่แบบ HTML จากตรรกะ PHP ที่ช่วยให้นักพัฒนาสามารถสร้างรหัสทำความสะอาดมาก มันยังทำให้ การพัฒนาเร็วขึ้นบำรุงรักษาได้มากขึ้นและทำให้โครงสร้างมีการจัดการเป็นรูปแบบ.

ไอคอน VSCode
Visual Studio Code กลายเป็นหนึ่งในโปรแกรมแก้ไขโค้ดที่ได้รับความนิยมมากที่สุดอย่างรวดเร็ว มันคือ น้ำหนักเบามีปลั๊กอินมากมายและตอนนี้ก็มีไอคอนที่แตกต่างกันให้เลือก. หากคุณรู้สึกว่าไอคอนรหัส Visual Studio ที่เป็นค่าเริ่มต้นน่าเบื่อให้สลับไปที่ไอคอนเหล่านี้.

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

Traefik
ฉันกำลังทดลองกับ Docker และสงสัยว่าจะกำหนดเส้นทางชื่อโดเมนไปยังคอนเทนเนอร์อื่น ๆ ในเครื่องเดียวได้อย่างไร จากนั้นฉันก็พบทราฟิค HTTP reverse proxy และ load balancer สมัยใหม่. นอกเหนือจาก Docker แล้วยังรองรับบริการอื่น ๆ เช่น Kubernetes, Rancher และ Amazon Elastic Container.

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

อากาศ
Air เป็นธีมเริ่มต้น WordPress ที่น้อยที่สุด การขยาย _s, Air จะเพิ่มส่วนประกอบเพิ่มเติมบางอย่างเช่น สไลด์แถบนำทางเหนียวและพร้อม WooCommerce.

EmptyStates
EmptyStates คือ ชุดของหน้าสถานะที่ว่างเปล่าบนเว็บและแอพมือถือ สำหรับแรงบันดาลใจ หน้าสถานะว่างเปล่าเป็นประเภทของหน้าเว็บที่มักถูกมองข้าม.

การออกแบบทางลัด
เว็บไซต์นี้ให้ ทางลัดของแอพพลิเคชั่นยอดนิยม และเครื่องมือที่ใช้โดยนักพัฒนาและนักออกแบบ ที่นี่คุณจะพบทางลัดสำหรับ Sketch, Photoshop, InDesign, Sublime Text, WordPress และอีกมากมาย รายการปัจจุบันมีทางลัดสำหรับ macOS เท่านั้น, แต่มันจะเป็นการดีถ้าเห็นทางลัดของ Windows ที่จะเพิ่มเข้าไปด้วย.

Uppy
Uppy เป็น เฟรมเวิร์ก JavaScript เพื่อสร้างอินเตอร์เฟสการอัพโหลดไฟล์. ด้วย Uppy คุณสามารถดึงไฟล์ได้ไม่เพียงจากไดรฟ์ในเครื่องเท่านั้น แต่ยังมาจากบริการจัดเก็บข้อมูลภายนอกเช่น Google Drive, Dropbox, Instagram และบริการอื่น ๆ มัน น้ำหนักเบาแบบแยกส่วนและขยายได้ด้วยปลั๊กอินที่กำหนดเอง.

VuetifyJS
VuetifyJS เป็นความคิดริเริ่มจาก John Leider ถึง สร้างการออกแบบวัสดุรอบ ๆ Vue.js. Google มีความคิดริเริ่มที่คล้ายกันกับ MDL หรือ Material Design Lite แต่ดูเหมือนว่าจะไม่ได้รับแรงดึงเพียงพอในชุมชนและ การพัฒนาดูเหมือนจะคืบหน้าช้ามากในสองสามเดือนที่ผ่านมาในขณะนี้. ดังนั้นหากคุณกำลังมองหาทางเลือก VuetifyJS อาจเป็นทางเลือกที่เหมาะสม.

WP ULike
WP Ulike เป็น ปลั๊กอิน WordPress ที่จะเพิ่ม “ชอบ” กับเนื้อหาของคุณ ไม่ว่าจะเป็นในประเภทโพสต์ WordPress, ประเภทโพสต์ที่กำหนดเองและ bbPress เช่นเดียวกับ BuddyPress นอกจากนี้ยังมาพร้อมกับคุณสมบัติที่ยอดเยี่ยมอื่น ๆ เช่น ระบบการแจ้งเตือนการวิเคราะห์และวิดเจ็ต ซึ่งทำให้มันเป็นหนึ่งในสิ่งที่น่าสนใจที่สุด “ชอบ” ระบบสำหรับเว็บไซต์ WordPress ของคุณ.

ตรวจสอบ Vee
Vee Validate เป็นห้องสมุด JavaScript สำหรับ เพิ่มฟิลด์อินพุตด้วยการตรวจสอบความถูกต้องภายใน. รองรับอินพุตหลายประเภทเช่นอีเมล, หมายเลข, วันที่, URL, ที่อยู่ IP ฯลฯ.

ตารางข้อมูล Vue
ปลั๊กอิน Vue.js ที่มีประโยชน์อีกตัว VueDataTables เป็นปลั๊กอินง่าย ๆ ในการสร้าง ปรับแต่งและหน้าตารางด้วย Vue.js. ปลั๊กอินสร้างด้วยมาตราส่วนในใจว่ามันสามารถแสดงผลข้อมูลขนาดใหญ่บนโต๊ะอย่างไม่มีที่ติ มันยังมาพร้อมกับ ส่วนประกอบพิเศษบางอย่างเพื่อเพิ่มประสิทธิภาพให้กับตารางของคุณเช่น Pagination, Searchbox และ Filter.

Googler
Googler เป็น CLI ที่ให้คุณทำการค้นหาใน Google ผ่านบรรทัดคำสั่ง. คล้ายกับอินเทอร์เฟซมันจะดึงชื่อคำอธิบาย URL และเลขหน้า มันเป็นเครื่องมือที่มีประโยชน์สำหรับผู้ใช้ macOS และ Linux.

Bolt CMS
Bolt เป็น CMS ที่สร้างขึ้นด้วย PHP มันคือ ติดตั้งอย่างรวดเร็วใช้ Twig เป็นเอ็นจิ้น templating รองรับ PHP7 อย่างเต็มที่ปรับแต่งง่าย ผ่านไฟล์ YAML แบบง่าย ๆ โดยรวมแล้วมันดูน่าสนใจสำหรับฉัน ฉันจะใช้เวลาสำรวจมันต่อไปเมื่อฉันมีโอกาส.

โทรพิมพ์
Teletype เป็นความคิดริเริ่มใหม่จาก Atom Editor คุณสมบัติใหม่นี้ช่วยให้คุณ ร่วมมือกับเพื่อนร่วมงานของคุณในการเขียนรหัส. ในการใช้งานคุณจะต้องติดตั้งปลั๊กอิน Teletype อย่างเป็นทางการ.

Plyr
Plyr (ออกเสียงในฐานะผู้เล่น) คือ ไลบรารีเครื่องเล่นสื่อที่ทันสมัยมีขนาดเพียง 10kb. ด้วยสิ่งนี้คุณจะสามารถปรับแต่งเครื่องเล่นวิดีโอและเสียง HTML, Youtube และ Vimeo และสื่อสตรีมสด มันอยู่ในการพัฒนาที่กระตือรือร้นพร้อมวางแผนมากกว่า คุณสมบัติที่จะเพิ่มการสนับสนุนอย่างต่อเนื่องสำหรับวิดีโอ Wistia และ Facebook แบบฝัง.
