כלים אונליין שלמפתחים כדאי להכיר

רשימה של מספר כלים אונליין שלמפתחי WEB בהחלט כדאי להכיר.

BundlePhobia

אחד הכלים היותר פשוטים ונחמדים שיצא לי להכיר.
מפתחים פרוייקט ורוצים לקבל מידע מפורט על גודל תיקיית ה-node_modules שלכם ומה היא מכילה?
פשוט תטענו את קובץ ה-package.json שלכם ותקבלו פירוט של כל חבילה באופן נפרד ושורה שסוכמת הכל.

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

babeljs.io

אני מתאר לעצמי שאתם יודעים מה זה Babel אבל למקרה שלא- Bebel מאפשר להמיר קוד JavaScript שנכתב בתקנים חדשים לתקן שהדפדפן יתמוך בו (ECMAScript 2015).
ישנם כלים שעושים זאת באופן אוטומטי אבל למקרה שתרצו להמיר קוד באופן עצמאי ודי חד פעמי, תוכלו לעשות זאת באמצעות כלי האנליין המדהים הזה.

Prettier Playground

Prettier Playground הוא כלי מדהים שעושה לכם formatting לקוד ובכך הופך אותו לקריא יותר, אחיד יותר מבחינת ריווחים וטאבים, כמו שקוד צריך לעלות לפרודקשן.
את Prettier ניתן ומומלץ להתקין כהרחבה ל-Visual Studio Code (להרחבות נוספות: הרחבות ל-Visual Studio Code שכדאי להכיר) אך ניתן להשתמש גם בכלי האונליין הנפלא.
פשוט הדביקו את הקוד הלא מסודר שלכם ומיד תקבלו קוד קריא ומסודר.
אגב, כדאי לכם להתרגל לכתוב קוד קריא ומסודר כבר מלכתחילה! 🙂

JSONPlaceholder

לא פעם נרצה לבדוק את תקשורת ה-Front-End עם REST API על מנת לבדוק את תקינות תהליכי ה-HTTP בפרויקט.
JSONPlaceholder נותן לנו גישה ל-Fake REST API, אך שימו לב, אכן ניתן לעשות בקשות כמו POST או PUT ולקבל הודעת הצלחה (200) אבל הנתון לא באמת יישמר ב-DB שלהם כמובן.

caniuse

סביר להניח שלא פעם רציתם להשתמש בתגית או ב-layout module כדוגמת flexbox למשל ותהיתם באילו דפדפנים הדבר נתמך?
caniuse יראה לכם באופן מפורט באילו דפדפנים ובאילו גרסאות זה נתמך.

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

MxToolbox

רוצים לבדוק את רשומות ה-DNS שלכם? MxToolbox הוא כלי נהדר שבהחלט יסייע לכם.

minifier.org

minify הוא תהליך מומלץ לכל קובץ js או css שיש לכם באתר.
minify יגרום לכך שהקוד יתכווץ לגמרי, ללא רווחים וללא שבירת שורות ובכך גודלו יתכווץ באופן משמעותי.
כמובן שתהליך זה מתרחש רק לפני העלאת הקוד לפרודקשן.
נהוג שקובץ minified נכתב עם תוספת "min", לדוגמה: data.min.js

כך נראה קוד JavaScript לאחר minify
כך נראה קוד JavaScript לאחר minify

unminify.com

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

GTmetrix

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

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


4 תגובות בנושא “כלים אונליין שלמפתחים כדאי להכיר”

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *