כלי פרודוקטיביות למפתחים: 40 אני באמת פותח בכל שבוע

אני שומר חלון דפדפן פתוח על הצג השני שלי שאינו אלא כרטיסיות שירות. JSON formatter, timestamp ממיר, regex בודק, hash מחולל.זה היה שם במשך שנים, דרך WP Adminify משחרר, דרך פרויקטים צדדיים Laravel, דרך כל לילה מאוחר ניפוי באגים הפעלה שבה מטען webhook מגיע ממוזער ואני צריך לראות מה & #39;s למעשה בו.

במשך זמן רב הכרטיסיות האלה הצביעו על שבעה אתרים שונים חלקם היו בסדר חלקם היו חוות מודעות שהעלו את המטען שלי לשרת I' מעולם לא שמעתי עליו. אחד מהם - I' אני לא מתכוון לתת לזה שם - הדבקתי JWT בימוי לפני שהמחשבה הדביקה אותי: האסימון הזה פשוט עבר על החוט למישהו אחר 's box. זה היה אסימון בימוי, שום דבר לא נשרף, אבל התחושה נתקעה בניתי Toolz.dev חלקית כי רציתי רצועת כרטיסיות משלי, וחלקית כי מעולם לא רציתי לעשות את הטעות המסוימת הזאת שוב.

אז זה 't רשימה של 500 כלים שנגרדו מספריה. It's הסט ש-'s למעשה חיים עליו Toolz.dev כרגע - 40-מתוכם - אירגנו את הדרך בה אני משתמש בהם: עד הרגע ביום העבודה בו אני מושיט יד לאחד כל אחד רץ בדפדפן שלך שום דבר לא מעלה אין חשבון.

TL;DR: החמישה שאני פותח הכי הרבה, בקילומטר: פורמט JSON לתגובות API בלתי קריאות, ממיר חותמת זמן לזיהוי פלילי ביומן, בודק רגקס לעבודת דפוס, ממיר Base64 עבור JWTs ו-URI נתונים, ו מחולל UUID עבור נתוני בדיקת זריעה הכל למטה פועל בצד הלקוח - המטען שלך לעולם לא עוזב את הכרטיסייה אם אתה מסמן רק דבר אחד, סמן את פורמט JSON.

למה לא פשוט להשתמש ב-CLI?

שאלה הוגנת, ואני כן משתמש ב-CLI. jq עדיף על כל כלי אינטרנט לסקריפטים. base64 -d הוא שתי הקשות אם משימה נכנסת לסקריפט מעטפת, היא שייכת לסקריפט מעטפת.

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

1. לולאות משוב ויזואלי. Regex הוא הברור מאליו. לראות 14 התאמות נדלקות בדוגמה של טקסט אמיתי בזמן שאתה מקליד זו פעילות שונה מהריצה grep -P וקבלת כן/לא. אותו דבר עבור שיפועים וצבעים - אתה לא יכול לגלגל עין קוד משושה.
2. המכונה היא 't שלך. מחשב נייד לקוח, מכונת עבודה נעולה, מישהו אחר's שולחן במהלך פגישת זיווג. לא jq, אין זכויות התקנה, אין זמן.
3. המשימה היא באמת חד פעמית. אני לא כותב סקריפט Python כדי להמיר CSV אחד ל-JSON. I' אני הולך להדביק את זה, ללחוץ ולהמשיך בחיי.

Here's ההשוואה הכנה I'd לתת dev זוטר שואל באיזה להשתמש:

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

אילו כלים אני פותח במהלך יום API גרוע?

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

JSON Formatter - זה I'd לשמור אם יכולתי לשמור רק אחד

JSON ממוזער אינו קריא, וחמור מכך, כאשר 's פסול שגיאת הדפדפן אומרת לך "Unexpected token" וקיזוז תווים שלא אומר כלום לאדם. ה פורמט JSON pretty-מדפיס אותו עם הזחה אמיתית ומצביע על הקו האמיתי ש-'s נשבר. תשעים אחוז מהזמן האשם הוא פסיק נגרר, שהוא חוקי במילולי אובייקט JavaScript ולא חוקי ב-JSON - הבחנה שעלתה לי יותר שעות ממה שאני רוצה להוסיף. צלילה עמוקה יותר: כיצד לעצב JSON באינטרנט.

ממיר Base64 - עבור JWTs ו-URI נתונים

JWT הוא שלושה מקטעי Base64url המופרדים על ידי נקודות. הדבק את האמצעי לתוך ממיר Base64 ואתה יכול לקרוא את התביעות - מנפיק, תפוגה, היקפים - מבלי לשלוח את האסימון למפענח של צד שלישי. (אני משתמש ב מפענח JWT כשאני רוצה את כל שלושת הקטעים מנותחים בבת אחת, אבל אני עדיין מושיט יד ל-Base64 גולמי כאשר מטען נראה מוזר ואני רוצה לראות את הבתים.) ה יוניקוד טוב, ולמה btoa() זורק על אימוג'י, נמצא ב מדריך קידוד Base64.

ממיר חותמת זמן - זיהוי פלילי ביומן

1752278400. האם זה אתמול או 2029? ה ממיר חותמת זמן הופך את יוניקס שניות, אלפיות שניות, ו ISO 8601 לתוך משהו שאדם יכול לנמק לגביו, באזור הזמן שאכפת לך ממנו. שני שלישים מניפוי הבאגים שלי באירועים הם עמידה בחותמות זמן משלושה שירותים שכל אחד מהם נכנס בפורמט אחר, ואחד מהם נמצא ב-UTC בעוד האחרים הם 't.

YAML Validator - כי הזחה נושאת עומס

Kubernetes מניפסטים, GitHub Actions, docker-compose. YAML הוא בעל משמעות לרווח לבן והוא יפרש מחדש בשקט את כוונתך במקום לטעות. ה מאמת יאמל תופס את ה-tab-vs-space ואת ה-unquoted no ש-YAML 1.1 מנתח בצורה מועילה כבוליאנית false. (כן, באמת. בעיית נורבגיה היא אמיתית: קוד המדינה NO הופך false אלא אם כן אתה מצטט את זה.)

JSON Diff - מה בעצם השתנה?

שתי תגובות API, אחת עובדת ואחת לא. לבהות בהם זה לצד זה בעורך טקסט זה משחק מפסיד. JSON Diff מראה לך את שלושת המפתחות השונים ומתעלמים מה-200 שעושים 't.

שאר מדף ניפוי הבאגים

• פורמט SQL- לשאילתה בת 90 השורות עם ארבע הצטרפות שמישהו כתב בשורה אחת.
• מְחוּגָה- MD5/SHA-1/SHA-256/SHA-512, בעיקר לאימות הורדה או מפתח מטמון.
• מנתח Cron- בגלל 0 */2 * * * ו */2 * * * * נבדלים בתו אחד ובערך פי שישים מהעומס.
• בטל סדרה- PHP serialize() פלט מתוך א wp_options שורה. אם אתה ' אי פעם ניפוי באגים בתוסף וורדפרס 's מאוחסנים הגדרות, אתה יודע בדיוק למה זה קיים.

במה אני משתמש כאשר I'm כותב קוד, לא מאתר באגים?

רגקס, בלי הניחושים

אני כותב regex ב בודק רגקס לפני שהוא אי פעם נוגע בבסיס קוד הדבק דוגמה מציאותית, כתוב את התבנית, צפה בהדגשת ההתאמות. ה בונה רגקס האם החצי השני של זה - it's עבור כאשר אתה יודע מה אתה רוצה באנגלית ויכול 't זוכר אם זה 's \b או \B. גיליון הצ'יטים המלא של הדפוס, בתוספת מלכודת המעקב הקטסטרופלית שיכולה להקפיא שרת עם מכמת מקונן אחד, נמצא ב- מדריך Regex Builder.

UUIDs לזריעה

עשרים שורות בדיקה, עשרים תעודות זהות ייחודיות, כרגע. מחולל UUID עושה את v1, v4 ו-v7 בכמויות גדולות. השתמש ב-v7 עבור מפתחות ראשיים חדשים - זה ' מסודר בזמן, כך שאינדקס עץ ה-B שלך יעשה 't ייגרס על ידי תוספות אקראיות. למדתי את זה בדרך היקרה וכתבתי את זה ב- מדריך מחולל UUID.

קידוד, שני הטעמים

מקודד URL למחרוזות שאילתות המכילות & ו = וחלל. ישויות HTML לרגע שאתה צריך להציג <script> בדף כטקסט ולא כדוח תקרית שני אלה משעממים ואני משתמש בהם ללא הרף.

פורמט מריבה

נתונים מגיעים בצורה לא נכונה בערך תמיד ערכת ההמרה מכסה את המהלכים שאני עושה בפועל:

• JSON ל-CSV- כאשר בעל עניין מבקש את " הנתונים" ופירושו גיליון אלקטרוני. אובייקטים מקוננים משוטחים לעמודות סימון נקודות. פרטים ב מדריך JSON ל-CSV.
• CSV ל-JSON- הפוך, לזריעה.
• JSON ל-YAML- על הפיכת כתם תצורה למשהו שאדם יערוך.
• XML ל-JSON- כל שילוב SOAP מדור קודם, לנצח.
• מתרגם בינארי- טקסט ↔ בינארי/הקס/עשרוני/אוקטלי. בעיקר להוראה ולבית הפרוטוקול האי-זוגי.

כל מדף הקידוד, עם ההיגיון מאחורי כל אחד מהם, נמצא ב- מדריך כלי קידוד.

באילו אני משתמש עבור טקסט ותוכן?

אני כותב הרבה - plugin docs, changelogs, הבלוג הזה אלה הכלים בין טיוטה לפרסום.

• מונה מילים- מילים, תווים, זמן קריאה כמו כן הדרך המהירה ביותר לבדוק מטא תיאור מול התקציב של 160 תווים לפני שגוגל תקצץ אותו. עוד ב מדריך Word Counter.
• מַגִישׁ- camelCase, snake_case, kebab-case, PascalCase. אני משנה את שמות המשתנים בכמויות גדולות בדרך זו לעתים קרובות יותר מאשר אני משתמש בכלי העורך שלי 's refactor, שהוא מביך מעט אבל נכון. מדריך Case Converter.
• מְרַגֵל- כותרת לכתובת URL, עם דיאקריטים מטופלים כראוי. Café Décor צריך להפוך cafe-decor, לא caf-dcor.
• הבדל טקסט- שני קבצי תצורה, או שתי גרסאות של פסקה, זה לצד זה.
• לורם איפסום- עותק מציין מיקום לפריסה שאין לה עדיין תוכן.
• חוט הפוך- נישה, אבל זה מופיע בהכנה לראיון ובבדיקות פלינדרום יותר ממה שאתה ' הייתי חושב.

ערכת הטקסט המלאה מכוסה ב- מדריך כלי טקסט.

מה לגבי עיצוב ועבודה חזיתית?

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

• בוחר צבעים- HEX ↔ RGB ↔ HSL, עם בדיקת ניגודיות כך שתעשה 't ship 3:1 body text. HSL הוא הפורמט שהופך מצבי ריחוף לחיסור במקום ניחוש טיפול מלא: בוחר צבעים ומגבר; מדריך ממיר.
• מחולל שיפוע- ליניארי, רדיאלי, חרוטי, עם תצוגה מקדימה חיה ו-CSS שניתן להעתיק. כְּתִיבָה conic-gradient() עיוור הוא סוג מיוחד של אומללות. מדריך מחולל שיפוע CSS.
• ממיר CSS ו ממיר HTML- כרגע אתה צריך להטביע משהו לתוך א <style> תג ורוצה את זה קטן.
• מחולל מטא תגים- כותרת, תיאור, פתח גרף, כרטיסי טוויטר, ו-JSON-LD במעבר אחד. בניתי את זה כי כתבתי ביד את אותם ארבע עשרה תגיות בכל פרויקט.

במה אני משתמש עבור קבצים - תמונות, קובצי PDF, כל השאר?

כלי התמונה כולם פועלים דרך הדפדפן 's Canvas API, כלומר PNG של 4 מגה-בייט לעולם לא עוזב את המכונה שלך. That's לא שיווק; it's בדיוק מה שקורה כשהעיבוד הוא א <canvas> ולא בקשת POST.

• קומפרס תמונה- מחוון איכות, קריאת גודל חי. רוב צילומי המסך שאני שולח יורדים ב-70–85% ללא הבדל גלוי. ראה את מדריך לדחיסת תמונה.
• שינוי גודל תמונה- מידות מדויקות או אחוז, יחס רוחב-גובה נעול.
• ממיר פורמט- PNG/JPEG/WebP/AVIF. WebP הוא ברירת המחדל שאני שולח עכשיו.
• מסיר רקע- מריץ את מודל הפילוח בדפדפן. It's הכלי האחד שבו אני מבחין בטעינה הראשונה.
• מחולל QR- כתובות URL, אישורי WiFi, vCards. כתבתי את המקודד ISO/IEC 18004 עבור זה ביד, תיקון שגיאות והכל, שהיה שימוש נהדר בסוף שבוע או נורא.
• מחולל סיסמא- שימושים crypto.getRandomValues(), לא Math.random(). ההבחנה הזו חשובה יותר ממה שעושה מחוון האורך.

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

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

איך השרשראות האלה ביחד בעבודה אמיתית?

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

1. העתק את הבקשה הכושלת 's Authorization כותרת. פיצול על הנקודות, הדבק קטע שני לתוך ממיר Base64. לקרוא exp.
2. exp הוא חותמת זמן של יוניקס. לתוך ה ממיר חותמת זמן. תוקפו פג 41 שניות לפני שהבקשה נורתה.
3. That's בעיית הטיית שעון, לא בעיית אישור. בדוק את מקורב הרענון עם מנתח Cron- זה היה מרענן את האסימון כל 60 דקות עבור אסימון עם TTL של 60 דקות. אין שוליים. מצב המירוץ.
4. שנה את המקורב ל-50 דקות. בוצע.

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

השרשרת השנייה שאני מפעיל כל הזמן היא התוכן: טיוטה → מונה מילים → מְרַגֵל → קומפרס תמונה לתמונת הכותרת → מחולל מטא תגים → לפרסם.

מדוע "Client-Side" בעצם משנה?

בגלל הסיפור של אסימון הבמה בראש הפוסט הזה, בעיקר. אבל הרשו לי לדייק לגבי הטענה ולא ביד, מאז "privacy-first" הוא ביטוי ש-' התרוקן מכל משמעות.

כאשר כלי הוא בצד הלקוח, הקובץ או המחרוזת שאתה מדביק מטופלים על ידי JavaScript פועל בכרטיסייה שלך. זה נכנס למשתנה בדפדפן שלך 's זיכרון וחוזר החוצה כתוצאה מכך. אין fetch(), לא FormData, אין העלאה אתה יכול לאמת זאת בעצמך תוך כעשר שניות: פתח את DevTools, עבור ללשונית רשת, הדבק משהו בכל כלי ב-Toolz.dev, וראה שום דבר לא קורה. That's כל ההוכחה. אם בקשת רשת נדלקת כאשר אתה לוחץ על " המר," הנתונים שלך נמצאים בשרת someone's.

מה זה קונה לך באופן קונקרטי:

• אפשר להדביק סודות. אסימוני בימוי, תגובות API פנימיות, לקוח's לקוח CSV. זה's לא הולך לשום מקום.
• It's מהר. אין הלוך ושוב. קובץ JSON בנפח 5 מגה-בייט פורמטים בזמן שלוקח לדפדפן לנתח אותו.
• אין תקרת גודל קובץ מעבר ל-RAM שלך.
• אין הגבלת תעריף, כי שם's אין שרת שיגביל אותך.

הפשרה אמיתית ו-I' האם זה נקרא: עבודה כבדה (סרטון של 200 מגה-בייט, OCR עובר מעל 500 עמודים) היא באמת איטית יותר בדפדפן מאשר בשרת עם GPU. צד הלקוח הוא ברירת המחדל הנכונה, לא תשובה אוניברסלית.

שאלות נפוצות

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

כן - אין חשבון, אין מכסה שימוש, אין ניסיון שפג תוקפו הכלים פועלים על המכונה שלך, מה שאומר שהם עולים לי ביעילות כלום לכל שימוש, מה שאומר there's nothing to meter.

האם אני צריך חשבון כדי להשתמש בהם?

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

האם זה בטוח להדביק נתונים רגישים כמו מפתחות API או אסימונים?

עבור הכלים בצד הלקוח, כן - ואתה יכול לאשר את זה במקום לסמוך עליי. פתח את הדפדפן שלך #39;s DevTools Network כרטיסייה, הדבק וצפה בבקשות יוצאות. יש 't any. הדבר היחיד I'd עדיין להימנע מכל מקום, כולל כאן, הוא הדבקת א הפקה סוד שאתה יכול 't לסובב - לא בגלל הכלי, אלא בגלל לוחות כתיבה, שיתופי מסך, והרחבות דפדפן הם כל משטחי התקפה אמיתיים.

האם הכלים האלה עובדים במצב לא מקוון?

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

איך אלה בהשוואה לכלי CLI כמו jq או openssl?

עבודות שונות.CLI זוכה עבור כל דבר תסריטאי, חוזר, או בCI - it's composable and reproducible.כלי דפדפן לנצח עבור משימות חד פעמיות, כל דבר שמרוויח תצוגה מקדימה חזותית (regex, gradients, צבעים, איכות תמונה), ומכונות שבו אתה יכול & #39;t להתקין תוכנה.I להשתמש הן מדי יום ו don't חושב & #39;s תחרות.

אילו כלים עלי לסמן תחילה?

אם אתה כותב קוד: JSON Formatter, Timestamp Converter, Regex Tester, Base64 Converter.If you write content: Word Counter, Slug Generator, Image Compress.If you do frontend: Color Picker, Gradient Generator, Meta Tag Generator.סימני אותם כתיקיה ולחצי על התיקיה באמצע כדי לפתוח את כולם בבת אחת.

הכלים עובדים במובייל?

They're רספונסיבי והם מתפקדים, אבל I'll להיות כנה - עיצבתי אותם עבור מקלדת ו viewport רחב.Paste-and-copy משימות בסדר בטלפון כל דבר הכרוך בספקטרום צבעים או מדגם regex הולך להיות קרב.

האם יש API לכלים האלה?

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

מהם הכלים המקוונים החינמיים הטובים ביותר למפתחים?

זה תלוי בעבודה שלך, אבל ליבה מוצקה מכסה עיצוב ובדיקה (JSON Formatter, Base64 ממיר), זמן וטקסט (Timestamp ממיר, מונה מילים, מחולל שבלולים), דפוס עבודה (Regex Tester), ומדיה (דחיסת תמונה, בוחר צבע). Toolz.dev שומר 600+ מהם במקום אחד, כל חינם וצד הלקוח הכלי הטוב ביותר הוא בדרך כלל זה כבר פתוח בלשונית כאשר אתה מכה את החיכוך.

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

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

הגרסה הקצרה

פרודוקטיביות מפתחים היא 't פתיחה אחת גדולה. It's הסרת מאה חיכוכים קטנים: המטען שאתה יכול 't לקרוא, חותמת הזמן שאתה יכול 't לנתח, את regex you're מנחש ב, צילום המסך ש-'s 4 MB כאשר זה צריך להיות 400 KB. אף אחד מאלה בנפרד לא שווה פוסט בבלוג. ביחד הם ' הם רוב ההבדל בין יום שבו שלחת משהו ליום שבו היית עסוק.

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