ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (ตุลาคม 2017)
เดือนนี้ Fresh Resouces จะแตกต่างจากเดือนก่อนเล็กน้อย พวกเราผู้พัฒนาเว็บกำลังอยู่ในอุตสาหกรรมที่เปลี่ยนแปลงอย่างรวดเร็วและฉันได้เห็นการประกาศจำนวนมากจาก บริษัท เทคโนโลยีที่ใหญ่ที่สุดเช่น Google, Microsoft, Firefox และ PHP ซึ่งจะเปลี่ยนวิธีที่เราสร้าง เว็บ.
ในงวดนี้ครึ่งหนึ่งของรายการของเราจะเกี่ยวกับประกาศเหล่านี้ ดังนั้นพร้อมที่จะทักทายอนาคต!
การปรับภาพให้มีความสำคัญ
มันคือ บทความหมดจดเพื่อเพิ่มประสิทธิภาพภาพสำหรับเว็บ เขียนโดย Addy Osmani มันไม่เหมือนการเขียนแบบอื่น ๆ ที่หมุนรอบวิธีการหรือสิ่งที่ต้องทำและไม่ควรทำ.
บทความนี้จะแนะนำคุณเกี่ยวกับรายละเอียดทางเทคนิคและ วิทยาศาสตร์ที่อยู่เบื้องหลังการเพิ่มประสิทธิภาพ. คุณจะพบข้อมูลอย่างละเอียดเกี่ยวกับวิธีการเพิ่มประสิทธิภาพและรูปแบบภาพที่หลากหลาย, เครื่องมือเคล็ดลับและตัวอย่างจริง ๆ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017.jpg)
PHP 7.2
ที่ครอบคลุม การอ้างอิงเกี่ยวกับสิ่งที่มากับ PHP 7.2. นอกเหนือจากการเพิ่มที่ปรับปรุงประสิทธิภาพการใช้งาน PHP, PHP 7.2 ยังมาพร้อมกับ ค่าเสื่อมราคาซึ่งจะถูกลบหลายสิ่ง และไม่ควรใช้อีกต่อไป.
ใน PHP 7.2 มีฟังก์ชันสองอย่างที่จะถูกยกเลิกคือ create_function ()
และ __autoload ()
. หากคุณเป็นนักพัฒนาเว็บ, ตรวจสอบรหัสของคุณและทำการเปลี่ยนแปลงที่จำเป็น. ฉันเห็นปลั๊กอิน WordPress จำนวนมากที่ยังคงใช้ฟังก์ชันทั้งสองอยู่.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_2.jpg)
API การแบ่งปันทางเว็บ
ฉันไม่เห็นว่า API นี้เข้ามาในเว็บโดยสุจริต อย่างไรก็ตามครึ่งหนึ่งของการโต้ตอบบนเว็บเป็นเรื่องเกี่ยวกับ “ใช้งานร่วมกัน”, API นี้จะทำสิ่งต่าง ๆ อย่างมาก ง่ายขึ้นสำหรับนักพัฒนาเว็บในการสร้างประสบการณ์การแบ่งปันแบบเนทีฟ, โดยเฉพาะอย่างยิ่งบนแพลตฟอร์มมือถือ.
API นี้มีให้บริการเฉพาะใน Google Chrome สำหรับเดสก์ท็อปและ Android ลองชมวิดีโอ Youtube นี้เพื่อดูการทำงาน.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_3.jpg)
แอตทริบิวต์ Async ของรูปภาพ
สิ่งที่จะปฏิวัติเว็บก็คือ async
คุณลักษณะสำหรับองค์ประกอบ img ในช่วงเวลาของการเขียนมีหลายวิธีที่จะ โหลดรูปภาพแบบอะซิงโครนัสที่เกี่ยวข้องกับเคล็ดลับเล็กน้อยของ JavaScript. ในไม่ช้าเราจะสามารถเพิ่มได้ async = บน
ลงบน img
ธาตุ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_4.jpg)
Quantum ของ Firefox
Mozilla ได้ผลักดันการอัปเดตไปยัง Firefox อย่างจริงจังด้วยการปรับปรุงบางอย่างชื่อรหัส “โครงการควอนตัม”. มันมี Quantum CSS - เอ็นจิ้นใหม่สำหรับ การแสดงผล CSS ที่เร็วมาก, UI ใหม่และ DevTools ใหม่.
การเปิดตัวคือ ดึงดูดนักพัฒนาเว็บ และบางคนได้เปลี่ยนเบราว์เซอร์หลักเป็น Firefox แล้ว มีอีกหลายโครงการที่เข้ามารวมถึง Quantum DOM และ WebRender พวกเราจะไปดูคู่แข่งของ Node.js จากเครื่องมือ Firefox Quantum หรือไม่? บางทีอาจจะใช่.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_5.jpg)
MS Edge สำหรับ iOS และ Android
Microsoft เพิ่งประกาศให้ ปล่อยเบราว์เซอร์ล่าสุด Edge ไปยัง iOS และ Android. ซึ่งหมายความว่ามีอีกหนึ่งเบราว์เซอร์สำหรับให้เว็บไซต์ของคุณทดสอบด้วย.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_6.jpg)
กูเทนเบิร์ก
WordPress กำลังอยู่ในโปรเจคที่ท้าทายความสามารถโดยใช้ชื่อว่า Gutenberg กูเทนเบิร์กเป็น facelift to WordPress editor ที่สร้างขึ้นเกือบทั้งหมดด้วย JavaScript.
ณ จุดนี้กูเทนแบร์กคือ สร้างด้วยปฏิกิริยา แต่โครงการกำลังพิจารณาเฟรมเวิร์กอื่นเช่น Preact, Vue หรืออย่างอื่น มันเป็นสถานการณ์ที่ซับซ้อนในตอนนี้ ดังนั้นสำหรับนักพัฒนา WordPress ที่สร้างธีมและปลั๊กอินให้จับตามองโครงการเป็นอย่างดี มันจะเปลี่ยนวิธีที่เราสร้าง WordPress ตลอดไป.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_7.jpg)
FoitFout
FoitFout เป็นเครื่องมือที่มีประโยชน์ในการเปรียบเทียบสองวิธีที่แตกต่างกันที่เรียกว่า FOIT และ FOUT โหลดแบบอักษรที่กำหนดเองบนเว็บ. ด้วยเครื่องมือนี้คุณสามารถจำลองทั้งสองวิธีและตัดสินใจว่าวิธีใดเหมาะสมที่สุดสำหรับไซต์ของคุณ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_8.jpg)
Vuera
Vuera เป็น ไลบรารี JavaScript ที่ให้คุณใช้ Vue และ React ร่วมกัน. คุณสามารถรวมองค์ประกอบ Vue จาก .vue
หรือใช้ส่วนประกอบ React ใน Vue ทีมของคุณสามารถเป็นได้แล้ว มีประสิทธิผลมากขึ้นด้วยกรอบงานใด ๆ ที่พวกเขาต้องการใช้.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_9.jpg)
ลาก
“ลาก” เป็นห้องสมุดที่ยอดเยี่ยมจาก Shopify มันถูกสร้างขึ้นบนเบราว์เซอร์ของพื้นเมือง Drag-n-Drop API และช่วยให้คุณใช้งาน API ได้อย่างกว้างขวาง. ในกรณีที่ไม่มีสิ่งที่คุณต้องการคุณสามารถเขียน โมดูลที่กำหนดเองเพื่อขยายฟังก์ชันการทำงาน. ลองดูตัวอย่างเพื่อดูว่ามันทำงานอย่างไร.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_10.jpg)
FlowchartJS
ตามความหมายของชื่อ FlowchartJS คือ ไลบรารีที่อนุญาตให้สร้างแผนผังลำดับงานเช่นใน PowerPoint. ในทำนองเดียวกันคุณสามารถสร้างรูปทรงต่าง ๆ ของแผนภูมิรวมถึงวงกลมวงรีสี่เหลี่ยมจตุรัสเพชรสามเหลี่ยม ฯลฯ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_11.jpg)
QuickBill
มีน้ำหนักเบาและ โปรแกรมประยุกต์บนเว็บที่ตรงไปตรงมาเพื่อสร้างใบแจ้งหนี้. มันใช้เทคโนโลยีเบราว์เซอร์ดั้งเดิมและ API เพื่อให้ทำงานดังนั้นไม่จำเป็นต้องมีบัญชี เพียงไปที่เว็บไซต์เพิ่มรายการลงในใบแจ้งหนี้และสร้างไฟล์ PDF แค่นั้นแหละ!
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_12.jpg)
Mocka
Mocka เป็น ตัวยึดเนื้อหาที่คุณสามารถใช้สำหรับเว็บไซต์ต้นแบบ. มันมีขนาดเพียง 500 ไบต์และสามารถปรับแต่งได้อย่างเต็มที่ คุณสามารถรวมไว้ในไฟล์ CSS ของโครงการของคุณได้โดยใช้ Sass mixin.
CSS มีคลาสจำนวนหนึ่ง รวมไปถึง mocka สื่อ
เพื่อสร้างตัวยึดตำแหน่งภาพ, mocka หัวข้อ
เพื่อสร้างหัวเรื่องและ mocka ข้อความ
เพื่อสร้างข้อความโดยพลการ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_13.jpg)
VueStar
VueStar เป็น องค์ประกอบ Vue เพื่อเพิ่มเอฟเฟกต์ประกายเมื่อคุณคลิกที่ไอคอน, คล้ายกับที่ Twitter ทำกับ “หัวใจ” ไอคอนในแอพมือถือ องค์ประกอบแนะนำองค์ประกอบใหม่ที่ชื่อว่า vue ดาว
ที่ซึ่งคุณสามารถเพิ่มได้ในยุคเว็บ และคุณทำเสร็จแล้ว!
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_14.jpg)
สนามเด็กเล่น Grid
CSS Grid นำเสนอแนวคิดใหม่บนเว็บเพื่อสร้างเลย์เอาต์และมันมีความซับซ้อนตั้งแต่แรกเห็นด้วยคุณสมบัติใหม่มากมายที่มันมี.
GridPlayground นั้นเป็น Mozilla ริเริ่มสอน CSS Grid และผลักดันการนำ CSS Grid ไปข้างหน้า. แม้แต่ Firefox ก็นำเครื่องมือใหม่มาสู่ DevTools เพื่อตรวจสอบโครงร่างของกริด.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_15.jpg)
ตัวอย่างผู้จัดการ
“ตัวอย่างผู้จัดการ” เป็นเรื่องง่าย แอพเพื่อจัดเก็บและจัดการข้อมูลโค้ด. คุณสามารถสร้างรายการใหม่วางรหัสและกำหนดจุด ณ จุดนี้ไม่มีอะไรแฟนซีเกินไปและให้รหัสแหล่งที่คุณจะต้องรวบรวมโดยใช้ NPM เท่านั้น.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_16.jpg)
อินเตอร์เฟสแบบแท็บ
ดี การสร้างการนำทางแท็บที่ก้าวหน้าและเข้าถึงได้โดยใช้ JavaScript น้อยที่สุด. แหล่งข้อมูลที่ดีสำหรับผู้ที่ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบที่สามารถเข้าถึงได้.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_17.jpg)
SwissInCSS
SwissInCSS จัดแสดงการออกแบบโปสเตอร์สวิสคลาสสิกหลายแบบโดยไม่ใช้ CSS ซอร์สโค้ดมีอยู่ใน CodePen.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-october-2017_18.jpg)