ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (มีนาคม 2562)
เกิดขึ้นมากมายในช่วงไม่กี่เดือนที่ผ่านมาในโลกแห่งการพัฒนาเว็บ ประการแรกใหม่ เครื่องมือแก้ไขแบบใช้โค้ดบล็อกชื่อ Gutenberg, ในที่สุดก็ถูกรวมเข้ากับ WordPress 5.0 เป็นการเปลี่ยนแปลงครั้งใหญ่นับตั้งแต่ก่อตั้งขึ้นเนื่องจากมีการวางรากฐานใหม่สำหรับ WordPress เพื่อการพัฒนาในอนาคตและจะเปลี่ยนวิธีที่นักพัฒนาขยายการทำงานของ WordPress.
ประการที่สองนักพัฒนาของเราบางคนได้สร้างเครื่องมือที่มีประโยชน์จริง ๆ เช่นที่อนุญาต ดู JSON ในเทอร์มินัล และห้องสมุด React สองสามแห่งที่สามารถพิสูจน์ความช่วยเหลือที่ยอดเยี่ยมในการออกแบบเว็บและโครงการพัฒนา.
และสุดท้ายก็มีประสิทธิภาพมากที่สุด ทรัพยากรการอ้างอิงและปลั๊กอิน ได้เปิดตัวเพื่อช่วยคุณปรับปรุงโครงการตามแนวโน้มใหม่.
มาดูรายการทรัพยากรการพัฒนาเว็บที่ครอบคลุมที่สุด.
คู่มือกูเทนเบิร์ก
คู่มือ WordPress อย่างเป็นทางการที่คุณสามารถค้นหาการอ้างอิงสำหรับการออกแบบ, ตัวอย่างรหัสสำหรับการสร้างบล็อก และอื่น ๆ และแนวทางในการมีส่วนร่วมในโครงการ มันเป็นข้อมูลอ้างอิงครั้งแรกของคุณสำหรับการพัฒนากับ Gutenberg.

บล็อกนั่งร้าน
ด้วยตัวแก้ไขแบบบล็อกตอนนี้ WP-CLI ให้วิธีที่สะดวกในการเริ่มต้น การสร้าง Gutenberg Block ด้วยคำสั่ง CLI ใหม่, บล็อกนั่งร้าน wp
. คุณสามารถสร้างและรวมไว้ในปลั๊กอินและธีมที่มีอยู่ของคุณ.

CGB
อีกวิธีในการเริ่มบล็อก Gutenberg ได้อย่างง่ายดายคือ Create Guten Block (CGB) เป็นเครื่องมือในการ สร้างหม้อไอน้ำ เพื่อพัฒนาบล็อกกูเทนแบร์ก มันประกอบด้วยเครื่องมือที่ทันสมัยเช่น React.js, Webpack, ESLint, Babel เป็นต้นส่วนที่ดีที่สุดคือคุณ ไม่จำเป็นต้องกำหนดค่าเครื่องมือเหล่านี้ เพื่อให้คุณสามารถมุ่งเน้นการเขียนรหัสของคุณ.

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

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

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

CoBlocks
ชุดของบล็อกจากผู้เขียนคนเดียวกันที่พัฒนาบล็อกแกลเลอรี่ดังกล่าวข้างต้น CoBlocks ประกอบด้วยบล็อกจำนวนหนึ่งที่จะปรับปรุงเนื้อหาไซต์ของคุณด้วยเช่น หีบเพลง, ตารางราคา, Gif, Click-to-Tweet, และบล็อกเพิ่มเติมที่จะเพิ่ม.

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

บล็อกนาก
นอกจากนี้ยังมีการรวบรวม Gutenberg Blocks เช่น “บล็อก Google Maps” เพื่อแทรกแผนที่, “บล็อกบริการของเรา” ไปยัง แทรกรายการบริการด้วยปุ่มในมุมมองกริด, และ “บล็อกพื้นที่รับรอง” เพื่อแทรกรายการข้อความรับรอง Otter Block คือกลุ่มของ Gutenberg Blocks ที่ธุรกิจและผู้พัฒนาธีมจะชื่นชอบ.

บล็อก Gutenberg ขั้นสูง
ปลั๊กอินนี้มาพร้อมกับหยิบ บล็อกขั้นสูงเพื่อเพิ่มเนื้อหาของคุณ เช่นสารบัญที่สร้างขึ้นโดยอัตโนมัติ, “Giphy Blocks” เพื่อรวมภาพ GIF จาก Giphy.com, “บล็อก Unsplash” เพื่อแทรกภาพจาก Unsplash.com, “บล็อกโฆษณาแบนเนอร์”, WooCommerce “ปุ่มบล็อค Add-to-Cart”, และอีกมากมาย.

บล็อกแล็บ
Block Lab ทำให้ผู้พัฒนาสามารถสร้าง Gutenberg Block ได้ง่าย ปลั๊กอินช่วยให้คุณ ลงทะเบียนบล็อกใหม่ด้วย GUI ที่ใช้งานง่าย และเทมเพลตใน PHP คุณไม่จำเป็นต้องเรียนรู้ React.js.

บล็อก EDD
ปลั๊กอินที่ให้คุณแสดงผลผลิตภัณฑ์ Easy Digital Downloads ในเครื่องมือแก้ไข Gutenberg บล็อกจะแสดงมุมมองผลิตภัณฑ์ต่างจากการใช้รหัสย่อ.

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

Gutenberg Cloud
มันเหมือนกับ AppStore สำหรับ Gutenberg Blocks สถานที่ส่วนกลางที่คุณจะได้รับ Gutenberg Blocks ที่สามารถใช้ใน WordPress และ Drupal. ใช่ Drupal กำลังจะนำ Gutenberg editor มาใช้ในการแก้ไขด้วย.

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

GutenbergJS
Gutenberg รุ่นที่ใช้ JavaScript เท่านั้น มีให้ในรูปแบบแพ็คเกจ NPM ที่ให้คุณรวม Gutenberg เข้ากับแอปพลิเคชัน JavaScript ของคุณ.

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

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

ClassicPress
อีกทางเลือกหนึ่งคือการเปลี่ยนเป็น WordPress fork, ClassicPress ClassicPress เน้นอยู่ ธุรกิจความมั่นคงและความปลอดภัย. มันเข้ากันได้กับปลั๊กอินของ WordPress และมีแผนที่จะนำคุณสมบัติที่น่าสนใจใหม่ ๆ ออกมาในอนาคต ตรวจสอบโพสต์ของเรา: ClassicPress: ทางเลือกแทน WordPress โดยไม่มี Gutenberg & React.js

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

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

Bundlesize
การรวมกลุ่มเป็นเครื่องมือในการ เก็บไฟล์ JavaScript ของคุณ bundling ขนาดในการตรวจสอบ. คุณสามารถกำหนดขนาดสูงสุดของไฟล์ที่บันเดิลแต่ละไฟล์และมันจะแจ้งเตือนคุณเมื่อไฟล์นั้นมีขนาดหรือใหญ่เกินกำหนด การรวมกลุ่มสามารถรวมเข้ากับบริการ CI เช่น TravisCI และ CircleCI สำหรับการปรับใช้เวิร์กโฟลว์ในโครงการของคุณได้อย่างราบรื่น.

WP Emerge
ความทันสมัย เฟรมเวิร์กธีม WordPress ตามรูปแบบ MVC. หากคุณคุ้นเคยกับการทำงานกับเฟรมเวิร์ค PHP เช่น Laravel และ Slim ฉันมั่นใจว่าคุณจะประทับใจกับเฟรมเวิร์กนี้จริงๆ คุณสามารถใช้สิ่งต่าง ๆ เช่นเราเตอร์และตัวควบคุม DI คอนเทนเนอร์และ Middlerware.

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

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

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

มันเงา
ไลบรารี JavaScript ไปที่ จำลองแสงสะท้อนบนเว็บไซต์ของคุณเมื่อดูบนอุปกรณ์มือถือ. คุณสามารถดูการสาธิตได้ที่ https://pqina.nl/shiny/ เป็นที่น่าสังเกตว่ามันจะทำงานเฉพาะในอุปกรณ์มือถือเท่านั้นเนื่องจากใช้ API บางตัวที่มีอยู่ในอุปกรณ์มือถือเท่านั้น.

ตอบสนองสุวิมล
ReactLucid เป็นเครื่องมือที่จะช่วยคุณ debug แอปพลิเคชัน React และ GraphQL ในวิธีการโต้ตอบมากขึ้น ช่วยให้คุณเห็นลำดับชั้นส่วนประกอบสถานะ / อุปกรณ์ประกอบฉากภายในแอปพลิเคชัน React ของคุณรวมถึงสกีมา GraphQL คิวรีและการกลายพันธุ์แบบเรียลไทม์.

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

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

ทำปฏิกิริยาธาตุ
คอลเล็กชันขององค์ประกอบการตอบสนองที่ใช้งานได้ทันที ไม่มี CSS ภายนอกที่จะนำเข้าหรือปรับแต่งการกำหนดค่าเพื่อเพิ่มใน Webpack มันมาพร้อมกับส่วนประกอบที่สำคัญเช่นปุ่มช่องทำเครื่องหมาย SelectList แท็บเคล็ดลับเครื่องมือและอื่น ๆ อีกมากมาย.

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

โมนิกา
โมนิกาค่อนข้างอยู่ในประเภทของตัวเอง มันเป็น CRM (ผู้จัดการลูกค้าสัมพันธ์) แต่ไม่ได้มีไว้สำหรับลูกค้าของคุณ แต่สำหรับคนที่คุณรักเช่นครอบครัวและเพื่อน ๆ ของคุณ.
เช่น CRM จะช่วยให้คุณสามารถติดตามสิ่งต่างๆเช่นกิจกรรมของคุณกับพวกเขาและเมื่อคุณโทรหาพวกเขาครั้งล่าสุด ฯลฯ ยิ่งไปกว่านั้นมันสามารถตั้งเตือนให้คุณโทรหาคนที่คุณไม่ได้คุยด้วย พวกเขาเรียกมันว่า PRM (ผู้จัดการความสัมพันธ์ส่วนตัว).

Ionic Framework
กรอบอิออนได้รับรอบจริงในขณะที่ แต่เมื่อเร็ว ๆ นี้มันได้กระโดดขนาดใหญ่ในการทำงานของมัน ตอนนี้ไม่เพียง แต่มันจะเร็วกว่า แต่ Ionic ก็ยังอยู่ในขณะนี้ เข้ากันได้กับกรอบรูปดาวสองอันที่เพิ่มขึ้น: React.js และ Vue.js.
สิ่งนี้วางลงบนพื้นเพื่อให้อิออนเป็น เครื่องมือที่ไม่เชื่อเรื่องพระเจ้าในกรอบ. ดังนั้นไม่เพียงทำงานได้กับเฟรมเวิร์กเฉพาะ แต่อาจทำงานกับเฟรมเวิร์กใหม่เนื่องจากการพัฒนาส่วนหน้าวิวัฒนาการในอนาคต.

เด่น
Notable เป็นแอปพลิเคชันเดสก์ท็อปจดบันทึก ต่างจากแอพอื่นที่คล้ายกัน แต่ไม่ได้มาพร้อมกับการจัดรูปแบบกรรมสิทธิ์ WYSIWYG หรือระฆังและนกหวีดทั่วไปอื่น ๆ ตัวแก้ไขแอปส่วนใหญ่ขับเคลื่อนโดย Markdown ที่มีรสชาติแบบ Github. โน้ตจะถูกเก็บไว้ในไฟล์แฟล็ต .เอ็มดี
ไฟล์รวมถึงเอกสารแนบ มันใช้งานได้ง่ายและเรียบง่าย.

TipTap
TipTap เป็นเครื่องมือแก้ไขแบบ WYSIWYG ที่สร้างขึ้นจาก ProseMirror พร้อม Vue.js นอกเหนือจากการรับฟังก์ชั่นตัวเลขจาก ProseMirror เช่นการสนับสนุนไวยากรณ์ Markdown ที่ยอดเยี่ยม TipTap ยังนำเสนอคุณสมบัติที่ทันสมัยไม่กี่อย่างเช่นเมนูฟองที่เมนูการจัดรูปแบบจะปรากฏเมื่อเน้นข้อความคุณลักษณะคำแนะนำที่คุณสามารถติดแท็ก บุคคลภายในเนื้อหาและส่งออก ความสามารถในการส่งออกเนื้อหาในการจัดรูปแบบ JSON.

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

ทำปฏิกิริยา Loader เนื้อหา
ทำปฏิกิริยา Loader เนื้อหา เป็นส่วนประกอบที่กำหนดเองของ React ที่ให้คุณแสดงตัวยึดเนื้อหาในขณะที่กำลังโหลดเนื้อหาจริง มันคล้ายกับประเภทของโหลดเดอร์ที่คุณเห็นบน Facebook และ Instagram .

เทพนิยาย
Mythic เป็นธีมเริ่มต้น WordPress พร้อมแนวปฏิบัติที่ดีที่สุดที่ทันสมัยเช่นการฉีดพึ่งพามุมมองและตัวควบคุมรวมถึงเครื่องมือที่ทันสมัยเช่นการใช้ Webpack, Sass, Linting, PHP7 ข้อกำหนดขั้นต่ำและ BEM เป็นธีมที่ยอดเยี่ยมในการยกระดับความสามารถของคุณในฐานะผู้พัฒนาธีม.

กลั่น Github
ส่วนขยายเบราว์เซอร์เพื่อปรับแต่งประสบการณ์ของคุณเมื่อใช้ Github มันเพิ่มปุ่มลัดที่มีประโยชน์หลายอย่างปรับแต่งเค้าโครงและ UIs บางส่วนเพิ่มลิงก์ไปยังปัญหาและ PRs โดยอัตโนมัติและอีกมากมาย.

เปิด WC
Open WC เป็นชุดเครื่องมือที่อนุญาตให้คุณสร้าง Custom Web Component มันมีห้องสมุดหลักเพื่อสร้าง Web Component, Yeoman generators เพื่อสร้างอย่างรวดเร็ว “เปิด WC” โครงการซึ่งรวมถึงโครงสำหรับการทดสอบ, linting, และบูรณาการอย่างต่อเนื่อง.
Open WC อาจเป็นทางเลือกที่ดีถ้าคุณต้องการ ต้องการใช้งานกับคุณสมบัติเว็บเนทีฟ แทนที่จะใช้เฟรมเวิร์กเช่น Vue.js หรือ React.js.

Gridsome
Gridsome เป็น เครื่องมือในการสร้างเว็บไซต์แบบคงที่และเว็บแอปพลิเคชันด้วย Vue.js และ GraphQL. สามารถจัดการกับสตรีมข้อมูลหลายรายการเช่นจาก CMS เช่น WordPress และ Drupal ไฟล์ภายในเครื่องเช่น Markdown หรือ Yaml หรือ API ภายนอกเช่น AirTable และ Contentful นี่เป็นทางเลือกที่ยอดเยี่ยมสำหรับ Gatsby.js โดยเฉพาะถ้าชอบ Vue.js มากกว่า React.js.

เบราว์เซอร์
นี่คือเบราว์เซอร์ที่จินตนาการโดยนักประดิษฐ์ World Wide Web เอง Tim Berners-Lee มันคือ เบราว์เซอร์ง่าย ๆ ในการแสดง HTML และไม่แสดงแถบที่อยู่เช่นเบราว์เซอร์ที่ทันสมัย แต่คุณสามารถดูได้โดยไปที่ เอกสาร> เปิดจากการอ้างอิงเอกสารแบบเต็ม และวาง URL แล้วคลิก เปิด. และคุณจะเห็นว่าไซต์ของคุณจะแสดงผลอย่างไรกับเบราว์เซอร์ดั้งเดิม.

raster
Raster เป็นเฟรมเวิร์กกริดที่ทันสมัยซึ่งสร้างขึ้นด้วยข้อมูลจำเพาะ HTML และ CSS ที่ทันสมัยเช่น CSS Grid, คุณสมบัติกำหนดเองของ CSS (ตัวแปร) และองค์ประกอบที่กำหนดเอง กรอบที่สมบูรณ์แบบสำหรับผู้ที่ชอบที่จะอยู่บนขอบ.

ฮูเปอร์
องค์ประกอบ Vue.js เพื่อเพิ่ม Carousel หรือ Slider สามารถเข้าถึงและใช้งานได้ผ่าน Touch, Keyboard, Mouse Wheel และระบบนำทางช่วยเหลืออื่น ๆ รองรับ RTL และทิศทางแนวตั้ง, ขยายได้และการตอบสนองของหลักสูตร.
