15+ כלים מקדימים שעליכם לדעת עליהם: הממצאים המועדפים עלי לשנת 2020

15+ כלים מקדימים שעליכם לדעת עליהם: הממצאים המועדפים עלי לשנת 2020

15+ כלים מקדימים שעליכם לדעת עליהם: הממצאים המועדפים עלי לשנת 2020
СОДЕРЖАНИЕ
02 июня 2020

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


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

כלי הקידמה הטובים ביותר

מקש חם

כלים קדמיים: מקש חם

איתור הקשות באמצעות JavaScript אינו משימה מורכבת מדי, אך כלי השירות הקטן הזה מהצוות ב- GitHub הופך אותו לסופר פשוט ביותר.

בעזרתו תוכלו להפעיל פעולה על אלמנט באמצעות קיצור מקשים.

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

JavaScript הוא רק הצהרה אחת יחד עם יבוא:

יבוא {install} מ- ‘./hotkey.js’;

עבור (const el of document.querySelectorAll (‘[מקש נתונים מהיר]’)) {
התקן (אל)
}

ברגע שקוד זה נמצא במקום העבודה העיקרית נעשית ב- HTML. הנה רשימת קישורים שיצרתי להצגת תוכן בהתאם לקיצור הדרך ששימש:

  • דוגמא
  • דוגמא
  • דוגמא
  • דוגמא
  • דוגמא

שימו לב לתכונות מקשי-הנתונים המתווספים לכל אחד מהקישורים. אלה מאפשרים את מקשי הקיצור לפעולות הממוקדות (במקרה זה, מפעילים בורר יעד באמצעות CSS). מקשי קיצור מרובים מופרדים באמצעות פסיק; שילובי מקשים מופרדים על ידי סמל פלוס; ורצפי המפתח מופרדים על ידי רווח.

הנה הדגמה חיה:

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

כמובן שעם קיצורי מקשים, תרצה לשים לב לדאגות הנגישות, לכן הקפד לבדוק את README של ה- repo לקבלת מידע על כך..

Freezeframe.js

כלים קדמיים: Freezeframe.js

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

כלי עזר קטן זה מאפשר לך להוסיף פונקציונליות דמוית וידאו ל- GIF מונפשים המוטמעים ב- HTML שלך.

לאחר שתכלול את מקור Freezeframe.js בדף שלך, אתה צריך רק הצהרת JavaScript יחידה:

Freezeframe חדש (‘. freezeframe’, {
טריגר: ‘רחף’,
כיסוי: שקר
});

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

הנה הדגמה עם שלוש דוגמאות שונות:

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

ערכת כלים של ARC

כלים קדמיים: ערכת כלים ARC

הכלים המקדימים שלך אמורים לכלול שפע של אפשרויות נגישות.

זוהי תוסף Chrome שמוסיף כרטיסייה לכלי המפתחים שלך כדי לעזור לך למצוא שגיאות נגישות ואזהרות הקשורות להנחיות WCAG 2.1 רמת A ו- AA..

שתי סיבות לכך שהכלי הזה כל כך נהדר:

  • זה משתלב עם זרימת העבודה הקיימת שלך לבדיקה / ניפוי באגים בכלי המפתחים
  • זה נוצר על ידי קבוצת Paciello, המוכרים היטב בקהילת המפתחים בגלל תובנות הנגישות שלהם

תכונות ערכת כלים של ARC

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

ARC Toolkit כולל תכונות תרגיל למטה

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

Scene.js

כלים קדמיים: Scene.js

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

הבחירה שלי לשנה זו היא Scene.js.

זה לא כזה שאתה יכול פשוט להרים ולעבוד איתו תוך כמה דקות כמו האחרים שהופיעו עד כה.

יש עקומת למידה להתרגל לממשק ה- API שנראה כך:

תן לסצנה = סצינה חדשה ({
".תיבת חיפוש": {
"0%" : "רוחב: 50 פיקסלים",
"70%": "רוחב: 300 פיקסלים",
},
".קו": {
"30%" : "רוחב: 0%",
"100%": "רוחב: 100%",
}
}, {
משך: 1,
הקלה: סצנה. EASE_IN_OUT,
בורר: נכון,
}). exportCSS ();

scene.setTime (0);
בואו להחליף = שקר;

document.querySelector (".שלח") .addEventListener ("לחץ", פונקציה () {
toggle =! toggle;
סצינה.סט כיוון (החלף ? "רגיל" : "הפוך");
scene.play ();
});

זה הקוד עבור אחד מה- דוגמאות בדף הבית. זו תיבת חיפוש פשוטה ואנימציה. הנה הדגמת CodePen שלהם:

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

תגובה

כלים מקדימים: תגובה

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

אני אוהב את הפונקציונליות של משהו כמו Disqus (עדכונים / הערות למטה, הערות עליונות וכו ‘), אבל יש לו יותר מדי נפיחות.

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

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

כמו כן, למרות ש- Commento מאפשר לך לייבא מ- Disqus, לא תוכל לייבא את ה- "קולות" על הערות ישנות של דיסקוס או על הרשתות מהמשתמשים שפרסמו תגובות.

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

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

היסטוריה של גיט

כלי חזית: היסטוריה של גיט

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

היסטוריית Git מאפשרת לך להציג את ההיסטוריה של כל קובץ ברפרטו Git ציבורי (GitHub, GitLab או Bitbucket).

לדוגמה, נניח שאתה רוצה להציג את ההיסטוריה של השינויים ב- קובץ מקור ל לנרמל .css. הקובץ ממוקם ב:

https://github.com/necolas/normalize.css/blob/master/normalize.css

כדי להציג את ההיסטוריה שלה, החלף את github.com בכתובת האתר ב- github.githistory.xyz:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

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

תכונת CSS מציגה

כלים מקדימים: תכונות CSS משתנות

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

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

בכרטיסייה תבחין ברשימה של תכונות CSS מודרניות.

תכונות CSS זמינות לניתוק

אתה יכול לעבור בין אלה כדי לראות באופן מיידי כיצד נראה הדף שלך כאשר משתמש מבקר בדף בדפדפן שאינו תומך באותה תכונה מסוימת. זוהי דרך נהדרת לקבל סקירה מהירה של האופן שבו פריסותיך משפילות בסביבות ישנות.

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

צור אפליקציה

כלים מקדימים: צור אפליקציה

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

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

צור אפשרויות תצורת אפליקציות

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

מאוד שימושי הן ללמידה והן ליצירת פרויקטים חדשים!

CSSJanus

כלים מקדימים: CSS יאנוס

בתחום הבינלאומי, זהו כלי מקוון המאפשר להמיר גיליונות סגנונות משמאל לימין לימין לשמאל ולהיפך..

זה מאפשר לך ליצור בקלות גיליונות סגנונות לשפות מימין לשמאל (rtl) כמו ערבית ועברית.

להלן דוגמא ל- CSS:

.דוגמא {
לצוף: שמאל;
יישור טקסט: שמאל;
ריפוד: 1px 2px 3px 4px;
שוליים-שמאל: 1em;
מיקום רקע: 5% 100 פיקסלים;
סמן: שינוי גודל;
רדיוס גבול: 1 פיקסלים 2 פיקסלים;
}

האמור לעיל יומר להמרות כדלקמן:

.דוגמא {
לצוף: מימין;
יישור טקסט: מימין;
ריפוד: 1px 4px 3px 2px;
שוליים מימין: 1em;
מיקום רקע: 95% 100 פיקסלים;
סמן: שינוי גודל גודל;
רדיוס גבול: 2 פיקסלים 1 פיקסלים;
}

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

ושימושי, אם אתה רוצה שהכלי יתעלם מחסימה של סגנון או הצהרה יחידה, אתה יכול להשתמש בהנחיית @noflip:

/ * @noflip * / .ignored {
לצוף: שמאל;
}

.לא מתעלמים {
לצוף: שמאל;
/ * @noflip * / רקע: #fff (poster-ltr.png);
}

גנב צבעוני

כלים קדמיים: גנב צבעוני

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

בעיקרון, באמצעות כלי זה תוכלו להשתמש ב- JavaScript כדי לתפוס לוח צבעים הכולל בין 2 ל -20 צבעים על סמך תמונה נתונה..

זה לא משהו שתשתמשו בו בכל אתר או יישום, אבל זה רעיון נחמד וככל הנראה קיים מזה זמן ועדכון במהלך השנה האחרונה..

באמצעות ממשק ה- API הפשוט, אתה יכול לתפוס לוח מתוך התמונה בשורה אחת:

תן ל- myPalette = colorThief.getPalette (img, 10);

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

myPalette.forEach (
אלמנט => צבעים .innerHTML + = ""
);

אני בונה את הצבעים באמצעות אלמנטים וסגנונות מוטבעים. הצבעים מוחזרים כערכי RGB.

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

RegexGuide

כלים קדמיים: RegexGuide

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

זה קצת מוזר לסובב את הראש בהתחלה מכיוון שהוא עובר צעדים אחד אחד, כמו מכשף.

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

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

כלים חזיתיים: אזכורים מכובדים

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

  • wehatecaptchas – אלטרנטיבה של captcha ללא פענוח תמונה או אותיות / מספרים, אפילו לא תיבת סימון "אשר שאיני רובוט"
  • פשוט פראלקס – דרך קלה לבצע אפקטים של פראלקס באמצעות JavaScript.
  • הטמע YouTube Lite – ככל הנראה 224X מהיר יותר מקוד ההטמעה המסורתי.
  • סגנונות ברירת מחדל של הדפדפן – הזן כל אלמנט HTML וכלי זה יגיד לך את ברירת המחדל של CSS של כל דפדפן עבור אותו אלמנט.
  • מי יכול להשתמש – הזן שילוב של שני צבעים וכלי זה יגיד לך אילו סוגים של לקויי ראייה יכולים להשתמש בשילוב זה לטקסט / רקע.

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 50-80%:

מתווה ומצגת מאת קרול ק.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector