ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (มิถุนายน 2561)
ในภาคใหม่นี้เรามีแหล่งข้อมูลที่หลากหลายในรายการ นอกเหนือจากบางส่วน เครื่องมือที่ใช้รหัส เช่นเดียวกับไลบรารี JavaScript และเฟรมเวิร์กใหม่ ๆ เราได้รวมเอาประโยชน์บางประการไว้ด้วย แอปพลิเคชัน GUI ฉันมั่นใจว่าทั้งนักพัฒนาและนักออกแบบจะประทับใจ.
ตรวจสอบรายละเอียดของรายการและแจ้งให้เราทราบว่ารายการใดที่คุณชื่นชอบในส่วนความเห็นด้านล่าง.
เป็นเอกลักษณ์
เครื่องมือในการ ค้นหาแบบอักษรที่ไม่ซ้ำ ที่อาจพบเห็นได้ยากในที่อื่นนั้น Unique มีประโยชน์สำหรับการสร้างโลโก้หรือเพียงแค่ค้นหาชุดแบบอักษรที่ไม่ซ้ำกันที่เหมาะสมสำหรับเอกสารของคุณได้อย่างง่ายดายเพียงแค่คลิกไม่กี่ครั้ง เมื่อคุณเลือกการตั้งค่าของคุณคุณสามารถ ดาวน์โหลดและตั้งชื่อแบบอักษรของคุณเอง. มันเจ๋งจริงๆ!
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018.jpg)
Duotones
แอพพลิเคชั่นบนเว็บที่ง่าย เปลี่ยนรูปภาพเป็น duotones; ภาพถ่ายสีเดียวประกอบด้วยสองสีที่ตัดกัน คุณสามารถอัปโหลดรูปถ่ายของคุณเองหรือเลือกรูปถ่ายที่เครื่องมือมีให้เพื่อแก้ไขและดาวน์โหลดผลลัพธ์ สิ่งที่ดี เครื่องมือสำหรับการสร้างภาพพื้นหลังที่โดดเด่นบนเว็บไซต์ของคุณ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_2.jpg)
MDX
MDX เป็นสเปคที่ รวม Markdown และ JSX. สิ่งนี้ทำให้คุณสามารถทำสิ่งที่บ้าคลั่งที่ไม่เคยทำมาก่อนเช่นการนำเข้าไฟล์ Markdown, ใช้ไฟล์ Markdown เป็นองค์ประกอบแบบสแตนด์อโลน เพื่อรวมไว้ในไฟล์อื่นและใช้ส่วนประกอบ React.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_3.jpg)
FontDrop
มีประโยชน์ เครื่องมือที่จะแสดงข้อมูลรายละเอียดเกี่ยวกับตัวอักษร. เพียงแค่วางแบบอักษรมันจะแสดงชื่อสไตล์เวอร์ชั่นข้อมูลลิขสิทธิ์ร่ายมนตร์ภาษาที่รองรับและอื่น ๆ.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_4.jpg)
ห้องสมุดทดสอบ DOM
ไลบรารี JavaScript เพื่อทดสอบ DOM (Document Object Model) คุณสามารถใช้สิ่งนี้เพื่อ เขียนหน่วยทดสอบสำหรับองค์ประกอบ UI บนเว็บของคุณ, ตรวจสอบให้แน่ใจว่า UI ทำงานเป็นผู้ใช้จริง สิ่งนี้ยังช่วยให้คุณรักษาการทำงานของ UI ของ UI ในระหว่างการสร้างรหัสใหม่.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_5.jpg)
เท
องค์ประกอบ React ง่ายๆ ถ่ายโอนข้อมูลหรือบันทึกผลลัพธ์ในเบราว์เซอร์แทนคอนโซลเบราว์เซอร์ กับ console.log
. เครื่องมือนี้สร้างขึ้นโดย Wes Bos หนึ่งในอาจารย์ที่ได้รับความนิยมมากที่สุดใน React.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_6.jpg)
นักแกะ
แอพที่มีประโยชน์สำหรับ กะพริบรูประบบปฏิบัติการไปยังดิสก์แฟลชที่ใช้บู๊ตได้. กระบวนการนี้เคยยากที่จะติดตาม ด้วย Etcher มันง่ายเหมือน 1-2-3 เครื่องมือนี้รองรับระบบปฏิบัติการหลักเกือบทั้งหมดรวมถึง Windows, Linux และ macOS.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_7.jpg)
Ni
ทางเลือกที่ดีกว่าในการติดตั้งแพคเกจ NPM Ni สามารถติดตั้งการพึ่งพาที่ขาดหายไปจาก package.json
ไฟล์, แสดงการอ้างอิงที่ไม่สอดคล้อง, และอินเทอร์เฟซที่ดีกว่าโดยรวม.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_8.jpg)
Cuttlebelle
ตัวสร้างไซต์แบบคงที่สำหรับ React.js, Cuttlebelle ให้ความสามารถในการขยายที่มากขึ้นในแบบที่คุณสามารถทำได้ ขยายเลย์เอาต์ของหน้าด้วย React based component. หากคุณคุ้นเคยกับ React.js แล้วคุณสามารถสร้างเลย์เอาต์ใหม่และใช้มันในไฟล์ Markdown ใด ๆ ที่เป็นไปได้.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_9.jpg)
ImgBlur
องค์ประกอบ JavaScript ง่ายๆในการโหลดภาพในแบบที่ทันสมัย ImgBlur มาพร้อมกับ CLI เพื่อสร้างภาพเบลอจากภาพต้นฉบับ. ภาพเบลอมีขนาดเล็กที่จะโหลดก่อนที่จะโหลดต้นฉบับ ลองชมการสาธิตเพื่อดูการทำงานขององค์ประกอบนี้.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_10.jpg)
Dinero.js
ไลบรารี JavaScript เพื่อสร้างคำนวณและจัดรูปแบบเงิน Dinero.s. รองรับสกุลเงินต่างประเทศทั้งหมดได้ทันที. คุณสามารถใช้ไลบรารีในสภาพแวดล้อม Node.js โหลดในเบราว์เซอร์ด้วย CommonJS หรือ EcmaScript 6.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_11.jpg)
WiredJS
WiredJS สร้างขึ้นด้วยภาษาพื้นเมือง “องค์ประกอบของเว็บ”. มันเป็นห้องสมุด UI ที่ไม่เหมือนใครพร้อมรูปลักษณ์แบบร่าง สิ่งที่เจ๋งจากห้องสมุดนี้ก็คือ การลากเส้นองค์ประกอบถูกสุ่มเลือกซึ่งหมายความว่าไม่มีสององค์ประกอบใดที่จะเหมือนกันทุกประการ. ห้องสมุดที่สมบูรณ์แบบสำหรับการสร้าง wireframes หรือ mockups.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_12.jpg)
Vuido
Vuido เป็นกรอบแอปพลิเคชันเดสก์ท็อปที่มีน้ำหนักเบาพร้อม Vue.js. คุณสามารถใช้ Vue.js API และส่วนเสริมเช่น Vuex ตัวอย่างเช่นถึง สร้างแอปพลิเคชันเดสก์ท็อปสำหรับ Windows, Linux และ macOS. มันเป็นทางเลือกที่ยอดเยี่ยมสำหรับอิเล็กตรอน.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_13.jpg)
ลูกผสม
ไลบรารี JavaScript เพื่อสร้างองค์ประกอบ HTML ที่กำหนดเองโดยใช้ Native Web Components กับ friendlier API ไลบรารีจัดเตรียม API ที่ง่ายกว่าซึ่งคล้ายกับ API ใน Vue.js หรือ React.js.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_14.jpg)
Saber.js
เครื่องมือสร้างเว็บไซต์สแตติกสร้างขึ้นสำหรับ Vue.js. Saber.js ไม่ได้มาพร้อมกับสิ่งแฟนซีเช่นใน Nuxt.js. ตัวเลือกและการกำหนดค่ามีน้อยซึ่งทำให้เป็นทางเลือกที่ดีถ้าคุณเพียงแค่ต้องการมีเว็บไซต์คงที่ที่จะง่ายต่อการบำรุงรักษา.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_15.jpg)
ลม
ผู้อ่าน RSS และ Podcast ที่ทันสมัย Winds สามารถใช้งานได้กับ Windows, macOSv และ Linux แอพพลิเคชั่นนี้ดูสวยงามและทันสมัยด้วยเงาของกล่องมุมโค้งมนการไล่ระดับสีและสิ่งอื่น ๆ นี่เป็นสิ่งที่ดี แอพเพื่อจัดการการสมัครสมาชิกเว็บไซต์ของคุณเพื่อให้ทันกับอุตสาหกรรมที่เปลี่ยนแปลงอย่างรวดเร็วนี้.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_16.jpg)
ผ่อนคลาย
ตัวแปลงที่จะเปลี่ยน HTML หรือปั๊กเป็น PDF คุณสามารถสร้าง เค้าโครงที่ซับซ้อนโดยใช้ HTML, CSS, JavaScript และใช้ Markdown เพื่อเขียนเนื้อหาหลัก ยิ่งไปกว่านั้นคุณยังสามารถใช้ไลบรารี JavaScript เช่น Chart.js เพื่อเพิ่มไดอะแกรมและ MathJax เพื่อเพิ่มการจัดรูปแบบคณิตศาสตร์.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_17.jpg)
เครื่องมือจับคู่แบบอักษร
เครื่องมือในการเลือกสองแบบอักษรของ Google และแบบอักษรดั้งเดิมที่ติดตั้งในคอมพิวเตอร์ด้วยรูปลักษณ์ที่เหมือนกัน นี่เป็นเครื่องมือที่มีประโยชน์สำหรับนักพัฒนาเว็บในการลดความน่าเกลียดของ FOUC (แฟลชของเนื้อหาที่ไม่มีการจัดรูป) เมื่อ Google Fonts ยังไม่โหลดเต็มที่.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_18.jpg)
PWA WP
ความคิดริเริ่มที่จะ นำ PWA (Progressive Web Application) มาสู่ WordPress Core. ในช่วงเวลาของการเขียนนี้โครงการนี้อยู่ในช่วงเริ่มต้น นี่เป็นโครงการที่น่าสนใจที่จะติดตามโดยเฉพาะอย่างยิ่งหากคุณทำงานเป็นหลักในระบบนิเวศของ WordPress.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_19.jpg)
Blueprint.js
Blueprint.js มีไลบรารี UI ที่ใช้ React ซึ่งประกอบด้วยรายการประจำมากมายเช่นปุ่มและแท็บและส่วนประกอบ UI อื่น ๆ ที่จำเป็นสำหรับการสร้างเว็บแอปพลิเคชันสมัยใหม่ Omnibar ช่องค้นหาลอยตัวเหมือนกับแอพ Spotlight หรือ Alfred ใน macOS.
![](http://savtec.org/img/images/fresh-resources-for-web-designers-and-developers-june-2018_20.jpg)