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

เดือนนี้ Fresh Resouces จะแตกต่างจากเดือนก่อนเล็กน้อย พวกเราผู้พัฒนาเว็บกำลังอยู่ในอุตสาหกรรมที่เปลี่ยนแปลงอย่างรวดเร็วและฉันได้เห็นการประกาศจำนวนมากจาก บริษัท เทคโนโลยีที่ใหญ่ที่สุดเช่น Google, Microsoft, Firefox และ PHP ซึ่งจะเปลี่ยนวิธีที่เราสร้าง เว็บ.

ในงวดนี้ครึ่งหนึ่งของรายการของเราจะเกี่ยวกับประกาศเหล่านี้ ดังนั้นพร้อมที่จะทักทายอนาคต!

การปรับภาพให้มีความสำคัญ

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

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

PHP 7.2

ที่ครอบคลุม การอ้างอิงเกี่ยวกับสิ่งที่มากับ PHP 7.2. นอกเหนือจากการเพิ่มที่ปรับปรุงประสิทธิภาพการใช้งาน PHP, PHP 7.2 ยังมาพร้อมกับ ค่าเสื่อมราคาซึ่งจะถูกลบหลายสิ่ง และไม่ควรใช้อีกต่อไป.

ใน PHP 7.2 มีฟังก์ชันสองอย่างที่จะถูกยกเลิกคือ create_function () และ __autoload (). หากคุณเป็นนักพัฒนาเว็บ, ตรวจสอบรหัสของคุณและทำการเปลี่ยนแปลงที่จำเป็น. ฉันเห็นปลั๊กอิน WordPress จำนวนมากที่ยังคงใช้ฟังก์ชันทั้งสองอยู่.

API การแบ่งปันทางเว็บ

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

API นี้มีให้บริการเฉพาะใน Google Chrome สำหรับเดสก์ท็อปและ Android ลองชมวิดีโอ Youtube นี้เพื่อดูการทำงาน.

แอตทริบิวต์ Async ของรูปภาพ

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

Quantum ของ Firefox

Mozilla ได้ผลักดันการอัปเดตไปยัง Firefox อย่างจริงจังด้วยการปรับปรุงบางอย่างชื่อรหัส “โครงการควอนตัม”. มันมี Quantum CSS - เอ็นจิ้นใหม่สำหรับ การแสดงผล CSS ที่เร็วมาก, UI ใหม่และ DevTools ใหม่.

การเปิดตัวคือ ดึงดูดนักพัฒนาเว็บ และบางคนได้เปลี่ยนเบราว์เซอร์หลักเป็น Firefox แล้ว มีอีกหลายโครงการที่เข้ามารวมถึง Quantum DOM และ WebRender พวกเราจะไปดูคู่แข่งของ Node.js จากเครื่องมือ Firefox Quantum หรือไม่? บางทีอาจจะใช่.

MS Edge สำหรับ iOS และ Android

Microsoft เพิ่งประกาศให้ ปล่อยเบราว์เซอร์ล่าสุด Edge ไปยัง iOS และ Android. ซึ่งหมายความว่ามีอีกหนึ่งเบราว์เซอร์สำหรับให้เว็บไซต์ของคุณทดสอบด้วย.

กูเทนเบิร์ก

WordPress กำลังอยู่ในโปรเจคที่ท้าทายความสามารถโดยใช้ชื่อว่า Gutenberg กูเทนเบิร์กเป็น facelift to WordPress editor ที่สร้างขึ้นเกือบทั้งหมดด้วย JavaScript.

ณ จุดนี้กูเทนแบร์กคือ สร้างด้วยปฏิกิริยา แต่โครงการกำลังพิจารณาเฟรมเวิร์กอื่นเช่น Preact, Vue หรืออย่างอื่น มันเป็นสถานการณ์ที่ซับซ้อนในตอนนี้ ดังนั้นสำหรับนักพัฒนา WordPress ที่สร้างธีมและปลั๊กอินให้จับตามองโครงการเป็นอย่างดี มันจะเปลี่ยนวิธีที่เราสร้าง WordPress ตลอดไป.

FoitFout

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

Vuera

Vuera เป็น ไลบรารี JavaScript ที่ให้คุณใช้ Vue และ React ร่วมกัน. คุณสามารถรวมองค์ประกอบ Vue จาก .vue หรือใช้ส่วนประกอบ React ใน Vue ทีมของคุณสามารถเป็นได้แล้ว มีประสิทธิผลมากขึ้นด้วยกรอบงานใด ๆ ที่พวกเขาต้องการใช้.

ลาก

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

FlowchartJS

ตามความหมายของชื่อ FlowchartJS คือ ไลบรารีที่อนุญาตให้สร้างแผนผังลำดับงานเช่นใน PowerPoint. ในทำนองเดียวกันคุณสามารถสร้างรูปทรงต่าง ๆ ของแผนภูมิรวมถึงวงกลมวงรีสี่เหลี่ยมจตุรัสเพชรสามเหลี่ยม ฯลฯ.

QuickBill

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

Mocka

Mocka เป็น ตัวยึดเนื้อหาที่คุณสามารถใช้สำหรับเว็บไซต์ต้นแบบ. มันมีขนาดเพียง 500 ไบต์และสามารถปรับแต่งได้อย่างเต็มที่ คุณสามารถรวมไว้ในไฟล์ CSS ของโครงการของคุณได้โดยใช้ Sass mixin.

CSS มีคลาสจำนวนหนึ่ง รวมไปถึง mocka สื่อ เพื่อสร้างตัวยึดตำแหน่งภาพ, mocka หัวข้อ เพื่อสร้างหัวเรื่องและ mocka ข้อความ เพื่อสร้างข้อความโดยพลการ.

VueStar

VueStar เป็น องค์ประกอบ Vue เพื่อเพิ่มเอฟเฟกต์ประกายเมื่อคุณคลิกที่ไอคอน, คล้ายกับที่ Twitter ทำกับ “หัวใจ” ไอคอนในแอพมือถือ องค์ประกอบแนะนำองค์ประกอบใหม่ที่ชื่อว่า vue ดาว ที่ซึ่งคุณสามารถเพิ่มได้ในยุคเว็บ และคุณทำเสร็จแล้ว!

สนามเด็กเล่น Grid

CSS Grid นำเสนอแนวคิดใหม่บนเว็บเพื่อสร้างเลย์เอาต์และมันมีความซับซ้อนตั้งแต่แรกเห็นด้วยคุณสมบัติใหม่มากมายที่มันมี.

GridPlayground นั้นเป็น Mozilla ริเริ่มสอน CSS Grid และผลักดันการนำ CSS Grid ไปข้างหน้า. แม้แต่ Firefox ก็นำเครื่องมือใหม่มาสู่ DevTools เพื่อตรวจสอบโครงร่างของกริด.

ตัวอย่างผู้จัดการ

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

อินเตอร์เฟสแบบแท็บ

ดี การสร้างการนำทางแท็บที่ก้าวหน้าและเข้าถึงได้โดยใช้ JavaScript น้อยที่สุด. แหล่งข้อมูลที่ดีสำหรับผู้ที่ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบที่สามารถเข้าถึงได้.

SwissInCSS

SwissInCSS จัดแสดงการออกแบบโปสเตอร์สวิสคลาสสิกหลายแบบโดยไม่ใช้ CSS ซอร์สโค้ดมีอยู่ใน CodePen.