לפני שנים שלי "dev tools" לתיקיית הסימניות היו כעשרים ערכים, כל אחד אתר אינטרנט חד-תכליתי אחר, כל אחד עם פריסת מודעה משלו, באנר עוגיות משלו, ו - זה החלק שהטריד אותי לבסוף - שרת משלו שהנתונים שלי הועלו אליו בשקט. הדבקתי אסימון API לבימוי באחד מהם כדי לפענח אותו, ובאמצע הדרך חשבתי: אין לי מושג מה האתר הזה עושה עם המחרוזת הזו. זה היה היום שבו הפסקתי לסמוך על אתרי כלים אקראיים והתחלתי לבנות Toolz.dev, כאשר כל כלי פועל בדפדפן שלך ושום דבר שאתה מדביק לא עוזב את הכרטיסייה.
זה ערכת הכלים שיצאה מזה לא "top 600 tools" listicle - Toolz.dev יש קצת יותר מחמישים כלים כרגע, ואני מעדיף להראות לכם את אלה שמפתח אתרים עובד פותח כל שבוע מאשר לרפד את הספירה הם מקובצים כאן לפי העבודה שאתם עושים: עיצוב נתונים, התנצחויות טקסט, כתיבת CSS, הכנת תמונות, משלוח SEO, ומטלות האבטחה והקידוד שביניהם הכל בחינם, לא צריך חשבון, ותהליכים מקומיים.
TL;DR: שמור על קבוצת כרטיסיות דפדפן אחת פתוחה בזמן שאתה בונה. לנתונים: פורמט JSON, JSON Diff, מאמת יאמל, מציג CSV. עבור אסימוני ניפוי באגים: מפענח JWT, ממיר Base64, ממיר חותמת זמן. עבור regex: בודק רגקס. עבור CSS: מחולל שיפוע, בוחר צבעים, ממיר CSS. לתמונות: לשנות גודל, לִדחוֹס, ממיר פורמט. לקידום אתרים: מחולל מטא תגים, פתח תצוגה מקדימה של גרף. הכל בצד הלקוח, הכל בחינם.
למה להתעסק בכלי דפדפן כשיש לך מסוף?
שאלה הוגנת - גם אני גר בטרמינל התשובה הכנה היא שלמשימות חד פעמיות, הסתכלות על זה, כלי ויזואלי עם משוב מיידי מנצח לזכור את jq לחש או ה openssl דגל כאשר API מוסר לי כתם ממוזער ב-2 לפנות בוקר, אני לא רוצה לכתוב סקריפט עיצוב; אני רוצה להדביק את זה ולראות את זה. כשאני צריך לגלגל עין אם שתי תגובות JSON שונות, הבדל אדום/ירוק מהיר יותר מאשר לצנרר בכל דבר.
אבל הגורם המכריע הוא לא נוחות, הוא לאן הנתונים הולכים. מספר עצום של "חינם online" כלים מעלים כל מה שאתה מדביק לשרת כדי לעבד אותו. זה בסדר עבור מדגם ציבורי ובעיה אמיתית עבור אסימון ייצור, רשומת לקוח או נכס שלא שוחרר. כל כלי במדריך זה פועל כולו בדפדפן שלך - העיבוד מתרחש ב-JavaScript במחשב שלך, ואין שלב העלאה לדאוג לגביו. השילוב הזה, חזותי ומיידי בתוספת פרטי כברירת מחדל, הוא כל הסיבה לשמור אותם בקבוצת כרטיסיות במקום להפגיז.
נתוני עיצוב: JSON, YAML, CSV, XML
זו הקטגוריה שאני משתמש בה הכי הרבה, כי רוב פיתוח האינטרנט הוא העברת נתונים מובנים בין מערכות ופזילה אליהם כשהם נשברים.
ה פורמט JSON האם סוס העבודה - הדבק תגובת API ממוזערת וקבל פלט מחורץ וקריא עם שגיאת התחביר הממוקמת כאשר ה-JSON אינו חוקי. כשאתה צריך לדעת מה השתנה בין שני מטענים, ה JSON Diff משווה מבחינה מבנית ולא שורה אחר שורה, כך שמפתחות מסודרים מחדש אינם יוצרים הבדלי פנטום. עבור צד התצורה של העבודה, ה מאמת יאמל תופס את מלכודות YAML השקטות - כרטיסיות בהזחה, מקשים כפולים, והפתעות כפיה מסוג שמסתובבות version: 1.10 לתוך המספר 1.1 - לפני קובץ Kubernetes או CI מפוצץ פריסה.
נתונים רק לעתים רחוקות נשארים בצורה אחת. ה JSON ל-CSV ו CSV ל-JSON ממירים עוברים בין פלט API לגיליונות אלקטרוניים, ה מציג CSV מציג CSV מבולגן כטבלה אמיתית כך שתוכל לקרוא אותו, ואת XML ל-JSON ו JSON ל-YAML כלים לכסות את הופ הפורמט שאתה מכה עם APIs מדור קודם וקבצי config.אם אתה רוצה את הגרסה העמוקה יותר של קטגוריה זו, את מדריך מלא לכלי JSON עובר בכל זרימת העבודה.
איתור באגים באסימונים וזמן: JWT, Base64, חותמות זמן
Auth והזמן הם המקום שבו " הקוד נראה נכון" באגים באים להסתיר, והם כמעט תמיד נפתרים על ידי מסתכל על הנתונים במקום לקרוא שוב את ההיגיון.
ה מפענח JWT מפצל אסימון לכותרת, מטען וחתימה ומראה לך את הטענות - וכך אתה מגלה את זה exp נשבעת היה בסדר הוא למעשה בעבר. Reach עבור זה במקום מפענח גנרי, כי JWTs להשתמש base64url (RFC 4648 §5), לא Base64 סטנדרטי, ומישור ממיר Base64 הוא הכלי המתאים לכל השאר - כותרות אישור בסיסיות, URI נתונים, מטענים מקודדים. ה ממיר חותמת זמן הופך את שניות ואלפיות השניות של יוניקס לתאריכים אמיתיים (ערבוב השניות מול אלפיות השניות הוא באג האישור הנפוץ ביותר שאני רואה), וה ממיר אזור זמן ו הבדל תאריך כלים מטפלים ב-" באיזו שעה זה היה עבור המשתמש" ו-"כמה זמן בין שני האירועים הללו" שאלות. כתבתי את כל זרימת ניפוי הבאגים ב- מדריך כלים לניפוי באגים ב-API אם אתה רוצה את סיפורי המלחמה.
Regex ללא הניחושים
ביטויים רגולריים הם כתיבה-פעם אחת, ניפוי באגים-לנצח. ה בודק רגקס מאפשר לך לבנות דפוס מול טקסט לדוגמה עם הדגשה של התאמה חיה, כך שתראה מה תואם לרגע שאתה מקליד אותו במקום לפרוס מאמת ולקוות. אם אתה מעדיף להרכיב דפוס מאבני בניין, ה בונה רגקס מתקרב אליו מהכיוון השני כך או כך, הנקודה זהה: בדוק את התבנית מול מיתרים אמיתיים לפני שהיא שומרת על טופס או מנתחת יומן. ה מדריך בונה Regex מכסה את הדפוסים הנפוצים שכדאי לשנן.
טקסט מתפתל: ספירה, מעטפת, הבדל, מציין מיקום
מטלות המיתרים הלא זוהרות מצטברות. ה מונה מילים בודק תוכן מול מגבלות אורך (תיאורי מטא, ציוצים, כותרות). ה מַגִישׁ סיבובים בין camelCase, snake_case, kebab-case ו-PascalCase - לא יסולא בפז כאשר אתה מעביר שמות משתנים על פני בסיס קוד. ה הבדל טקסט משווה שני בלוקים ומדגיש כל שינוי, שהוא סקירת קוד מחוץ ל-Git וביקורת תצורה מגולגלת לאחד.
לבנייה ויצירת אב טיפוס ספציפית: ה מחולל Lorem Ipsum ממלא מוקאפים עם הזכות סכום של טקסט מציין מיקום (יש א מדריך מלא לגודל טקסט מציין מיקום), ה מְרַגֵל הופך כותרות לנתיבי URL נקיים, וה חוט הפוך הכלי מטפל בחד פעמי המוזר. ה מדריך כלי טקסט קושר את אלה יחד.
CSS וצבע
פוליש חזיתי גר כאן. ה מחולל שיפוע נותן לך עורך חזותי עבור שיפועים ליניאריים ורדיאליים ומחזיר CSS ייצור - ללא ניחוש בזוויות ועצירות (ה מדריך שיפוע הולך עמוק יותר). ה בוחר צבעים ממיר בין HEX, RGB ו-HSL ושם אני בודק ניגודיות לפני שצבע נכשל בביקורת נגישות; ה מדריך קוטף צבעים מכסה את מתמטיקה הניגודיות. when it is time to ship, the ממיר CSS ו ממיר HTML הסר רווחים והערות כדי לגלח בתים מהחוט.
תמונות לאינטרנט
תמונות הן בדרך כלל הדבר הכבד ביותר בדף, כך שהקטגוריה הזו משלמת את עצמה Core Web Vitals. ה שינוי גודל תמונה כלי קובע ממדים מדויקים (ויש מלכודת רשתית שווה לדעת על, מכוסה שלה מדריך), ה מדחס תמונה מכווץ את גודל הקובץ תוך שמירה על איכות, ואת ממיר פורמט תמונה נע בין PNG, JPG, ו WebP כך שאתה משרת את הפורמט הנכון עבור העבודה.The מסיר רקע הוא מסיר מפתחות צבע - מהיר ופרטי, נהדר על רקע שטוח, וכנה לגבי הגבולות שלו מדריך. ה מדריך כלי תמונה הוא העמוד לסט הזה.
משלוח: SEO, שיתוף ואבטחה
המייל האחרון לפני שדף עולה לאוויר. ה מחולל מטא תגים בונה את הכותרת, התיאור שלך, פתח גרף, ותגיות כרטיס טוויטר, וה פתח תצוגה מקדימה של גרף מראה כיצד הקישור ייראה כאשר הוא משותף לפני שתגלה בדרך הקשה על חברתי. ה מחולל robots.txt ו בונה UTM טפל בכללי סריקה ומעקב אחר קמפיינים, וה מחולל QR עושה קוד לסריקה להדפסה או שקופיות בצד האבטחה-היגיינה, ה מחולל סיסמא ו מְחוּגָה לכסות סודות חזקים ובדיקות יושרה, וה מחולל UUID יורק מזהים עבור נתוני בדיקה ומפתחות מסד נתונים.
כלים בצד הלקוח לעומת כלים מבוססי העלאה: ההשוואה שחשובה
| Toolz.dev (צד הלקוח) | טיפוסי "כלי מקוון בחינם" | |
|---|---|---|
| איפה עיבוד קורה | בדפדפן שלך | בשרת מרוחק |
| הנתונים שלך (אסימונים, קבצים, קוד) | אף פעם לא עוזב את הכרטיסייה | הועלה לצד שלישי |
| הרשמה / התחברות | אף אחד | נדרש לעתים קרובות עבור תכונות מלאות |
| מגבלות שימוש | אין על הכלים | לעתים קרובות מוגבל או חומת תשלום |
| מהירות | מיידי, אין נסיעה הלוך ושוב | תלוי בהעלאה + שרת |
| עובד עם נתונים רגישים | כן, לפי התכנון | ריסקי - אתה סומך על השרת שלהם |
| מספר כלים | קצת יותר מחמישים, אוצר | בדרך כלל כלי אחד לכל אתר |
השורה שהכי אכפת לי ממנה היא השנייה. עבור מדגם ציבורי זה לא משנה היכן מתרחש העיבוד; עבור סוד ייצור זה חשוב מאוד. בניית כל ערכת הכלים בצד הלקוח פירושה שלעולם לא אצטרך לשאול את " האם זה האתר הבטוח להדביק את זה ב-" - כולם כן.
איך אני באמת משתמש בזה: שרשרת את הכלים
רוב המשימות האמיתיות הן צינור קטן, לא קליק אחד:
איתור באגים בתגובת API: הדבק אותה ב- פורמט JSON, פענח כל אסימון עם מפענח JWT, להפוך את exp תביעה לדייט עם ה ממיר חותמת זמן, אז השווה את התגובה השבורה מול תגובה עובדת עם JSON Diff.
הכנת תמונת גיבור: מסיר רקע אם זה צריך גזרה, אז שינוי גודל תמונה למידות מדויקות, אז מדחס תמונה כדי להגיע לתקציב משקל הדף שלך, המרה ל-WebP עם ממיר פורמט בדרך החוצה.
משלוח דף חדש: צור תגיות עם מחולל מטא תגים, בדוק את כרטיס השיתוף ב- פתח תצוגה מקדימה של גרף, ואשר שהעותק שלך מתאים ל- מונה מילים.
שמור את החמישה או שש שאתה נוגע בהם מדי יום בקבוצת כרטיסיות מוצמדות השאר נמצאים במרחק חיפוש אחד בפלטת .K כאשר אתה צריך אותם.
שאלות נפוצות
האם הכלים האלה למפתחי אתרים באמת בחינם?
כן כל כלי בToolz.dev חופשי לשימוש ללא שכבת פרימיום, ללא שער תכונה, וללא מכסה שימוש על הכלים עצמם אין חשבון נדרש להשתמש בהם.
האם עלי ליצור חשבון או להיכנס?
מס 'פתח כלי ולהשתמש בו באופן מיידי אין הרשמה, ובגלל הכלים לרוץ בדפדפן שלך אין מה לסנכרן לפרופיל.
האם זה בטוח להדביק אסימונים, מפתחות או נתונים פרטיים?
כן, וזו החלטת הליבה העיצובית הכלים מעבדים הכל בצד הלקוח ב-JavaScript, אז מה שאתה מדביק - JWT, תגובת API, תמונה שלא פורסמה - מטופל במחשב שלך ולא מועלה לשרת זו הסיבה העיקרית להשתמש בהם על פני חלופות מבוססות העלאה.
כמה כלים יש ל-Toolz.dev?
קצת יותר מחמישים כרגע, המשתרעים על קטגוריות נתונים, טקסט, קידוד, CSS, צבע, תמונה, SEO, אבטחה ומחשבון. אני מעדיף להגדיל את הסט בכוונה מאשר לטעון למספר שהוא בעיקר חומר מילוי - כל כלי המופיע כאן קיים ועובד היום.
הכלים עובדים במובייל?
כן, הממשקים רספונסיביים ועובדים בדפדפנים ניידים עבודות כבדות יותר - עיבוד תמונה גדול במיוחד - מהירות ונוחות יותר בשולחן העבודה, אבל הכלים עצמם פועלים כך או כך.
האם הכלים האלה עובדים במצב לא מקוון?
בעיקר כן. מכיוון שכל כלי פועל ב-JavaScript בדפדפן שלך, כלי ממשיך לעבוד ללא חיבור לאחר שהדף שלו נטען - שימושי במטוס או ברשת מתקלפת. אתה רק צריך להיות מקוון כדי לפתוח כלי בפעם הראשונה; לאחר מכן העיבוד עצמו לא צריך שרת.
מה ההבדל בין כלים מקוונים בצד הלקוח ובצד השרת?
כלי בצד הלקוח עושה את עבודתו בדפדפן שלך, כך הנתונים שאתה להדביק לעולם לא עוזב את המכונה שלך כלי בצד השרת מעלה את הקלט שלך למחשב מרוחק כדי לעבד אותו ושולח את התוצאה בחזרה הפלט יכול להיראות זהה, אבל רק כלים בצד הלקוח לשמור אסימון ייצור, קובץ פרטי, או רשומת לקוח מחוץ למישהו אחר's שרת - וזו הסיבה שכל כלי כאן בנוי בצד הלקוח.
האם אוכל להשתמש באלה במקום במסוף או בכלי IDE שלי?
למשימות חד פעמיות, ויזואליות - עיצוב כתם, פענוח אסימון, גלגל עין, בניית שיפוע - הן לרוב מהירות יותר מאשר לזכור את המקבילה לשורת הפקודה. לעבודה עם סקריפטים שניתן לחזור עליהם עדיין תרצה את הטרמינל שלך. בפועל הם יושבים זה לצד זה: פטר את הבקשה בלקוח הרגיל שלך, ואז הדבק את הפלט לתוך אלה כדי לקרוא אותה.
אילו כלים עלי לסמן תחילה?
התחל עם אלה שתיגע בהם מדי יום: ה פורמט JSON, מפענח JWT, בודק רגקס, ממיר חותמת זמן, ואיזה מכלי CSS או תמונה תואם את העבודה שלך. הוסף את השאר תוך כדי פגיעה במשימות הזקוקות להן.
עוטף
מפתח אתרים מודרני's toolkit אינה אפליקציה אחת גדולה - היא תריסר כלים קטנים וחדים שאתה מושיט אליהם יד בלי לחשוב המלכודת מפזרת אותם על פני תריסר אתרים מעורפלים שמעלים את הנתונים שלך כדי לעבד אותם התיקון הוא שמירה על אלה שאתה סומך עליהם בקבוצת כרטיסיות אחת, כולם פועלים באופן מקומי, כולם בחינם, כולם במרחק הקשה אחת.
זה מה Toolz.dev הוא: קצת יותר מחמישים מהכלים האלה, שנבנו בצד הלקוח כך האסימונים והקבצים שלך להישאר שלך. הצמד את פורמט JSON, ה בודק רגקס, וה ממיר חותמת זמן היום, ולהוסיף את השאר כמו העבודה דורשת.Free לנצח, פרטי בעיצוב.
