ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (มิถุนายน 2558)
คุณเชื่อหรือไม่ว่าซีรี่ส์นี้เปิดฉายมาเกือบ 3 ปีแล้วหรือยัง? ในช่วงเวลาสั้น ๆ นั้นเราได้แนะนำแหล่งข้อมูลใหม่ล่าสุดอย่างน้อย 30 รายการสำหรับนักออกแบบและนักพัฒนาเว็บ และเราจะเก็บมันต่อไปด้วยการรวบรวมใหม่ในเดือนมิถุนายน.
ในการรวบรวมนี้เราจะดูที่ห้องสมุด JavaScript สองสามแห่งสำหรับการแสดงตัวเลื่อนการเลื่อนที่ราบรื่นกว่าสำหรับตารางข้อมูลเอฟเฟกต์ลิฟต์สุดเจ๋งสำหรับปุ่มแบบเลื่อนขึ้น - ลงและอื่น ๆ.
ตรวจสอบพวกเขาออก.
สไตล์กลางยืนยัน
Medium ได้รับการยกย่องสำหรับการออกแบบ เลย์เอาต์และ UI ดูเหมือนว่าจะคิดอย่างถี่ถ้วน ยิ่งไปกว่านั้นมันยังเป็นแรงบันดาลใจให้นักพัฒนาเว็บไซต์พัฒนา JavaScript หรือ CSS library เพื่อทำซ้ำ UI Medium Style Confirm เป็นไลบรารี JavaScript หนึ่งที่คล้ายกับป็อปอัพหรือกล่องโต้ตอบใน Medium.
เพนกวิน
Penguin เป็นเฟรมเวิร์กส่วนหน้าใหม่ที่คุณสามารถใช้เป็นรากฐานของเว็บไซต์ของคุณ ด้วยเครื่องมืออย่าง Grunt และ Sass คุณสามารถเพิ่มหรือลบไลบรารีหรือ CSS ที่คุณไม่ต้องการออกจากเฟรมเวิร์กทำให้มันเบาที่สุดเท่าที่จะทำได้ นอกจากนี้ยังเป็นทางเลือกที่ดีสำหรับ Bootstrap และมูลนิธิ.
Elevator.js
คุณเคยเห็นปุ่มนั้นในเว็บไซต์ที่ให้คุณเลื่อนขึ้นไปด้านบนของหน้าหรือไม่? ปุ่มส่วนใหญ่จะพาคุณขึ้นไปด้านบน แต่ด้วย Elevator.js คุณจะได้รับเอฟเฟกต์การเร่งความเร็วแบบเลื่อนเช่นเดียวกับลิฟท์เพลงและ “Ding!” ส่งเสียงเมื่อคุณมาถึงชั้นบนสุด ดีจริงๆ!
X-Instagram
X-Instagram เป็นองค์ประกอบที่กำหนดเองของโพลิเมอร์ซึ่งดึงและแสดงภาพจาก Instagram ตามแท็ก องค์ประกอบนี้ทำให้กระบวนการทั้งหมดง่ายขึ้นมาก เราเพียงแค่เพิ่มองค์ประกอบเช่นเดียวกับองค์ประกอบ HTML ปกติและระบุคำหลักแท็กเป็นแอตทริบิวต์องค์ประกอบ.
และปล่อยให้เวทมนตร์เริ่มต้น!
CamanJS
CamanJS เป็นไลบรารี JavaScript ที่ยอดเยี่ยมสำหรับการจัดการรูปภาพ มันมาพร้อมกับชุดคุณสมบัติที่คุณมักจะพบในโปรแกรมแก้ไขภาพ คุณสามารถเปลี่ยนภาพเบลอขาวดำและเพิ่มความคมชัดได้.
ClusterizeJS
Clusterize.js เป็นไลบรารี JavaScript ที่จะเพิ่มประสิทธิภาพเมื่อจัดการกับข้อมูลจำนวนมากในตาราง ในขณะที่คุณเลื่อนตารางลงไปด้วยพูดว่า 5000 ในรายการโดยปกติแล้วประสบการณ์จะเปลี่ยนไปเป็นความล่าช้าและกระตุก ไลบรารี JavaScript นี้จะจัดการกับปัญหานี้ทำให้การดำเนินการเลื่อนราบรื่นไปตลอดทาง.
นั่งทดสอบ
นั่งทดสอบ คือชุดคำถามเพื่อประเมินทักษะและความรู้ของคุณใน CSS3, HTML5 และ JavaScript การทดสอบแต่ละครั้งจะมีคำถามจำนวนหนึ่งและมีเวลา จำกัด ในการทำคำถามเหล่านี้ให้สมบูรณ์ เป็นแหล่งข้อมูลที่ดีในการค้นหาว่าเรามีภาษาเหล่านี้ดีเพียงใด.
HTML Arrows
นี่คือชุดของสัญลักษณ์ Unicode ดั้งเดิมที่คุณสามารถฝังใน HTML และ CSS อักขระเหล่านี้รวมถึงลูกศรสกุลเงินและเครื่องหมายวรรคตอน คุณจะพบว่าบางครั้งคุณไม่จำเป็นต้องมีไอคอนตัวอักษรเพื่อแสดงตัวอักษรเหล่านั้น.
Flickity
Flickity เป็นห้องสมุด JavaScript เพื่อแสดงภาพหมุนแกลเลอรี่หรือตัวเลื่อนบนเว็บไซต์ของคุณ มันเหมาะสำหรับหน้าจอสัมผัส; คุณสามารถสไลด์แบบหมุนได้อย่างง่ายดายด้วยนิ้วหรือแทร็คแพดหากคุณใช้แล็ปท็อป นอกจากนี้ยังมาพร้อมกับพวงของตัวเลือกที่ช่วยให้การปรับแต่งเต็มรูปแบบในแบบที่คุณชอบ.
Typeslab
Typeslab เป็นเครื่องมือที่มีประโยชน์ในการสร้างโปสเตอร์แบบพื้น เพียงเขียนเนื้อหาและเลือกแบบอักษร Typeslab จะสร้างโปสเตอร์ทันที จากนั้นคุณสามารถดาวน์โหลดหรือเผยแพร่ใน Imgur.
MatchMedia
Matchmedia เป็นห้องสมุดที่ทำซ้ำแบบสอบถามสื่อ CSS ห้องสมุดไม่ได้สดใหม่จริง ๆ แต่เป็นห้องสมุดที่มีประโยชน์มากที่ฉันตัดสินใจใส่ไว้ในรายการ หากคุณต้องการทำสคริปต์ตามขนาดวิวพอร์ตของผู้ใช้หรือประเภทสื่อนี่เป็นห้องสมุดที่คุณต้องการ.
ต่อไปนี้เป็นตัวอย่างที่ใช้เรียกใช้สคริปต์ในขนาดวิวพอร์ต 320px และต่ำกว่า:
if (matchMedia ('หน้าจอเท่านั้นและ (ความกว้างสูงสุด: 320px)'). ตรงกัน) 
Sass Burger
Sass Burger มาพร้อมกับ Mixin ที่ให้คุณสร้าง “แฮมเบอร์เกอร์” ไอคอนและเปลี่ยนเป็นเครื่องหมายกากบาทที่มีความยุ่งยากน้อยลง.
มาร์กซ์
Marx คือชุดของกฎสไตล์ CSS เพื่อให้สไตล์ขององค์ประกอบสอดคล้องกันมากขึ้น มันสามารถปรับแต่งได้ (กับ Sass), น้ำหนักเบาและทำงานนอกกรอบ ทางเลือกที่ดีสำหรับเครื่องมือรีเซ็ต CSS ที่เป็นที่นิยมอยู่แล้วเช่น Normalize.css.
CSS.js
CSS.js จะใช้ในการแยกไฟล์ CSS สำหรับการประกาศสไตล์ เริ่มแรกใช้ไลบรารีสำหรับทีมที่ Jotform เพื่อสร้างประสบการณ์แบบ WYSIWYG สำหรับการแก้ไขแบบฟอร์มด้วย CSS ตอนนี้พวกเขาได้เปิดแหล่งที่มาสำหรับเราทุกคนที่จะใช้ คุ้มค่ากับการออมในกรณีที่คุณต้องการในภายหลัง.
