12 תוספי ה- Javascript הבלתי תלויים שאנחנו הכי אוהבים

ספריות Javascript כמו למשל jQuery הן דבר נהדר שמאפשר לנו להוסיף שלל פונקציות לאתר שלנו, אבל לפעמים אנחנו לא נזקקים לכל התכונות שלהן ויכולים להשתמש בתוספים פשוטים יותר שעושים את העבודה לא פחות מהר אם לא מהר יותר. שיטת העבודה הזו תורמת לתהליך פיתוח ונותנת לנו את היכולתלעצב אותו בצורה נוחה גם אם אין לנו ניסיון קודם עם ספריות JS.

אגב, למרות שלחלק מהתוספים שנציג כאן יש גם גרסאות ל – Jquery או Angular JS, אפשר להשתמש בהם באופן עצמאי (“Vanilla JS”).

Headroom – תפריט עליון דינאמי

Headroom הוא תוסף שמאפשר להסתיר ולהציג תפריטים עליונים באופן דינאמי. התפריט נעלם כאשר המשתמש גולל את העמוד למטה ומופיע שוב כאשר הוא גולל אותו למעלה. ניתן לראות את אופן הפעולה בדף התוסף.

הגדלת תמונות בלי חושך בעיניים -Drift

דריפט מאפשר להגדיל תמונות בזמן אמת כאשר עוברים עליהן עם העכבר בלי הצורך ללחוץ עליהן ולעבור לדף נפרד או לצפות בהן ב – Lightbox (פופאפ שמחשיך את המסך), אידאלי לחנויות וירטואליות ולגלריות. יש גם פונקציה נחמדה במיוחד שמגדילה חלקים מסוימים בתמונה בהתאם לאזור עליו נמצא הסמן של העכבר בתמונה המקורית.

דוגמאות נוספות אפשר לראות כאן

Baguette Box – כשאתם רוצים לראות את התמונה המלאה

למרות מה שכתבנו למעלה, ה-Lightbox הוא עדיין אלמנט פופולארי בהרבה מאוד אתרי אינטרנט. baguetteBox.js הוא אחד התוספים היותר משוכללים ומלבד האפקט הרגיל, הוא מתאים לאתרים סלולריים / רספונסיבים ותומך בג’סטות המוכרות לנו כמו משיכת התמונה בתנועת אצבע מהירה כדי לעבור לתמונה הבאה או הקודמת.

Tingle.js – חלון בדפדפן

טינגל מאפשר להציג כל סוג של תוכן (גם סרטוני יו-טיוב) בשכבת על ולהוסיף לו כפתורים, כך שהתוצאה המתקבלת דומה למדי לחלון רגיל של מערכת ההפעלה. יש גם אופציה להפוך את הכפתורים לדביקים כך שייצמדו לתחתית החלון, מה שהופך את התוסף לאידאלי לקריאה של מידע נוסף, תנאי שימוש וכו’.

Plyr – נגן וידאו מותאם אישית

רוב האתרים יסתפקו אמנם בנגן של יו-טיוב, אבל לפעמיים נגן מותאם אישית יכול להיות אלגנטי יותר ולבדל את האתר. Plyr הוא אחד הנגנים האסתטיים והמעוצבים ביותר שבנמצא ויש לו אפשרות להוספת כתובית, כמו גם דילוג בין מקטעים  שונים בסרטון (דומה למעבר בין סצינות בסרטים).

js1

Jump.js– קישורי עוגן כפי שמעולם לא ראיתם אותם

קישורי עוגן שמובילים אותנו לחלקים שונים בעמוד (נפוצים מאוד בויקיפדיה) נמצאים אתנו עוד מימי ה – Netscape, אבל הם לא מתאימים כל כך לאתרים עם אנימציות או אפקטים מיוחדים. Jump.js הוא תוסף פשוט מאוד שיוצר אנימציה של גלילה חלקה בין החלק של העמוד שאתם נמצאים בו כרגע לבין המקום אליו קישור העוגן מקשר.

Flatpicker– לוח שנה כמו שצריך

Flatpicker מאפשר ליצור לוחות שנה במגוון של עיצובים ועם פונקציות שונות (בחירת מספר תאריכים שונים, טווח של תאריכים וכך הלאה). החדשות הטובות הן שהוא אפילו תומך בעברית. הדגמה לכל אחת מהפונקציות אפשר לראות כאן.

js2

Dropzone – להעלות קבצים כמו ב –Gmail

Dropzone מאפשר ליצור משטחים להעלאת קבצים בצורת גרור ושחרר, ממש כמו ב – Gmail  על מנת לקצר תהליכים ולהפוך את הטופס לידידותי יותר למשתמש. התוסף ניתן להתאמה מלאה ולמעשה הוא מתפקד בעצמו כספריית JS עצמאית.

js3

Holems– לחפש כמו גדולים

כל מי שמכיר את פונקציית החיפוש הפנימית של הדפדפן (Ctrl+F) יודע שהיא לא כל כך נוחה ולפעמיים אנחנו מקבלים תוצאות לא רלוונטיות כמו למשל טקסטים או מילים שנמצאים בתפריטים של האתר, החלק התחתון (הפוטר) שלו וכך הלאה. הולמס נותן לנו את האפשרות להטמיע תיבת חיפוש פנימית בתוך הדף ולחפש רק באזורים מסוימים.

js4

Bideo  - רקעים דינמיים בקלות

Bideo יוצר רקעים דינאמיים שלמעשה מורכבים מסרטוני וידאו קצרים ויכולים לשדרג את המראה של האתר בכמה וכמה רמות (בדקו את הקישור כדי לראות דוגמה). בדרך כלל מדובר בפונקציה שקשה יחסית ליישם בלי ספרייתJS מלאה, ולכן זהו אחד התוספים העצמאיים היחידים שעושים את העבודה הזו.

Validate.js– לבדוק טפסים בלי כאב ראש

כל מי שהתחיל ללמודJavascript  יודע שאחד התרגילים הראשונים הוא בדיקת טפסים, משימה שיכולה להיות מעצבנת במיוחד, ואם לא עושים אותה בצורה מדויקת, עשויה לתסכל מאוד גם את המשתמשים.

Validate חוסך את כאב הראש הזה ומבצע את הבדיקות באופן אוטומטי בהתאם לסוג השדה (שדות חובה, סיסמאות, שדות עם אורך מינימאלי וכך הלאה). התוסף ניתן להתאמה מלאה ואפשר להוסיף לו בדיקות מותאמות אישית.

bLazy – לטעון בעצלנות, להציג במהירות…

BLazy הוא תוסף להאצת זמן עליית הדף אשר טוען חלקים שונים בדף באופן דינאמי רק כאשר הגולש מגיע אליהם. מלבד הצגת הדף באופן מהיר יותר, התוסף גם מפחית את נפח התעבורה של השרת מכיוון שלא כל הגולשים גוללים בהכרח את הדף עד למטה. כמובן שהתוסף הוא רספונסיבי ומתאים את גודל התמונות לרזולוציית המסך.

אלו היו 12 התוספים המוצלחים ביותר שלנו, אם אתם מכירים עוד תוספים שימושים, נשמח אם תשתפו אותם בתגובות…