מעקב אינסטגרם
כלי פנימי · תוסף כרום · JavaScript · IndexedDBבניתי לעצמי תוסף כרום לחשבון אינסטגרם אחד. הוא מסנכרן את רשימות העוקבים, שומר היסטוריה מקומית בדפדפן, ומאפשר להפסיק מעקב או להסיר עוקב מתוך הכלי, דרך תור שרץ לאט בכוונה. המשימה האמיתית לא הייתה סטטיסטיקה. היא הייתה לסרוק רשימה ולהחליט מי יוצא: מהר, בדיוק, ובשקט. הדמו כאן הוא אותו קוד בדיוק, עם חשבון בדוי.
נתונים מומצאים · נפתח בטאב חדש
3 דברים לנסות בדמו.
הדמו רץ בטאב רגיל, בלי להתקין כלום. החשבון והעוקבים מומצאים, שום דבר לא נשלח לאינסטגרם, ורענון מחזיר הכל להתחלה.
-
1
לחצו סנכרן בסרגל העליון
פס התקדמות מושך את רשימת העוקבים דף אחרי דף, ובסוף הכלי משווה אותה לסנכרון הקודם.
מה תראו: "6 עוקבים חדשים, 2 הפסיקו לעקוב", והמונים בסרגל הניווט מתעדכנים בהתאם. -
2
סמנו 3 שורות במסך לא עוקבים בחזרה, הוסיפו לתור ולחצו הפעל
סרגל הבחירה נצבע רק כשמשהו מסומן, ואישור אחד אומר כמה חשבונות ובאיזה קצב. התור מופיע כפס בתחתית המסך.
מה תראו: ספירה לאחור עד הפעולה הבאה, מונה יומי ושעתי, ושורות שעוברות למסך יומן פעולות. בדמו הקצב מואץ פי 10. -
3
פתחו את קצב ובטיחות, הקלידו השהיה של 5 שניות ולחצו שמור
אפשר לנסות גם תקרה שעתית של 200. השדה מקבל כל מספר, אבל הכלל נאכף בשמירה.
מה תראו: "נשמר, אבל חלק מהערכים תוקנו לגבולות הבטוחים", והשדות חוזרים ל-20 שניות ול-60 פעולות בשעה.
נתונים מומצאים · נפתח בטאב חדש
לסרוק רשימה, ולהחליט מי יוצא.
לפני שעיצבתי מסך אחד, כתבתי מסמך מוצר קצר: מי משתמש בכלי, מתי, ומה הוא בא לעשות. התשובה לא הייתה "לצפות בסטטיסטיקה". זו עבודת ניקיון חוזרת, קצת לא נעימה, שצריכה להיות מהירה ומדויקת. הכלי הוא פנקס יחסים לאורך זמן, לא רשת חברתית.
משתמש אחד, שיודע למה בא
הכלי נפתח פעם בשבוע או שבועיים, בערב, על מסך רחב, בדרך כלל מיד אחרי ביקור באינסטגרם. אין כאן "גילוי" של מוצר. המשתמש רוצה לראות את הרשימה ולסיים.
"הפסיק לעקוב" היא השערה
אין אירוע כזה שמגיע מאינסטגרם. הרשימה נבנית מהשוואה בין סנכרונים, ומי שמחק את החשבון, השבית אותו או חסם נראה בדיוק אותו דבר. הממשק צריך להגיד את זה, לא להעמיד פנים שהוא יודע.
מהירות היא סיכון
רצף פעולות מהיר מדי עלול להוביל לחסימת פעולות זמנית בחשבון. לכן הכלי צריך להיות איטי בכוונה, ולהסביר למה, במקום להציע כפתור "הסר הכל".
"כל שנייה שבה הוא גולל לפני שהוא רואה נתונים היא כישלון." כתבתי את המשפט הזה במסמך המוצר, והוא הפך למבחן של כל מסך בכלי.
חמישה עקרונות, לפני שורת קוד אחת.
כל החלטה בממשק נבדקה מול חמשת הכללים האלה. כשהיה ויכוח בין "נראה טוב" לבין "עוזר לסיים מהר", הכללים הכריעו.
הרשימה נראית בלי גלילה. בלי הירו, בלי טקסט שיווקי, בלי הסבר על מה שכבר ידוע.
"הפסק מעקב" לא מתחבא ב-hover ולא קורה בטעות, אבל גם לא דורש שלושה אישורים.
כשהוא רץ הוא נוכח על המסך כל הזמן, בלי לגנוב מקום מהרשימה.
"הפסיק לעקוב" יכול להיות גם מחיקה או חסימה. הממשק לא מתיימר לדעת.
הקצב האיטי מגן על החשבון. העיצוב מסביר את זה, ולא מתנצל עליו.
שלושה דברים שהכלי לא יהיה.
אפליקציית "מי ביטל לך מעקב"
מפחידות, צועקות, מלאות badges אדומים ו-upsell. הכלי הזה שקט: אדום מופיע רק ליד פעולה הרסנית או חסימה, ולכן כשהוא מופיע, שמים לב אליו.
דף נחיתה
הגרסה הקודמת של הדשבורד נראתה כמו אתר שיווקי של המוצר, ולא כמו המוצר עצמו, כולל כותרת בטקסט מדורג. בגרסה הנוכחית המסך הראשון הוא כבר הרשימה.
המדרג של אינסטגרם כזהות
כתום, ורוד וסגול הם התשובה הרפלקסיבית לכל כלי שקשור לאינסטגרם, והם הופכים כלי עבודה לתחפושת. גם "סגול־כחול SaaS" נפסל. נשארו דיו קר ומבטא ענבר אחד.
דיו קר, וענבר אחד.
פלטה (טוקני OKLCH, בקירוב HEX)
הנייטרלים מוטים קלות לכחול (גוון 265), כך שאין אפור מת ואין שחור או לבן טהורים. אין צבע "אזהרה" נפרד: ענבר אומר "פעיל", ואדום אומר "רע".
טיפוגרפיה ותנועה
משפחה אחת, שנותנת עברית טובה ב-Windows בלי להוריד פונט. סולם קבוע של שישה גדלים, בלי טיפוגרפיה נוזלית. תנועה של 160ms, רק בצבע, ברקע ובגבול, ושתי אנימציות בלבד: פעימת הנקודה כשהתור רץ, ושורות השלד בטעינה.
הניגודיות הנמוכה ביותר בממשק. מדדתי כל צמד של טקסט ורקע, וכולם עוברים WCAG AA. הנמוך הוא טקסט שלישוני על משטח הניווט, והגבוה מגיע ל-16.6:1. לכל כפתור אייקון יש aria-label, והודעות על סנכרון, תור וחסימה מוקראות בקורא מסך בלי להזיז את המיקוד.
כל החלטה, והסיבה שמאחוריה.
מהעיקרון לרכיב. אפשר לראות כל אחת מההחלטות האלה בדמו.
נתונים קודם: המונים עברו לניווט
אין שורת כרטיסי סטטיסטיקה. המספר יושב על פריט הניווט שמוביל אליו, ולכן אין צורך במסך סיכום נפרד. זה מה שהחזיר 13 שורות נתונים למסך הראשון, במקום 5.
הפעולה ההרסנית גלויה, אבל מכוונת
"הפסק מעקב" מופיע בכל שורה, לא רק ב-hover. סרגל הבחירה נשאר ניטרלי ושקט עד שמסמנים משהו, ורק אז הוא נצבע וחושף את כפתור התור. אחרי זה מגיע אישור אחד, שאומר כמה חשבונות ובאיזה קצב.
התור הוא מצב, לא עמוד
הפעולות לא מתבצעות מיד. הן נכנסות לתור שמופיע כפס בתחתית המסך, רק כשיש בו משהו: הבא בתור, ספירה לאחור, מונה יומי ושעתי. שורה שממתינה בתור נשארת ברשימה, באטימות של 55%.
אמירת אמת על חוסר ודאות
ב"הפסיקו לעקוב" יש תאריך לכל שורה ושתי תגיות: "אתה עדיין עוקב" ו"חזר לעקוב". פעולה שנכשלה לא נעלמת: היא נשארת ביומן, מחוקה בקו, עם השגיאה שחזרה.
איטיות כפיצ'ר שמגן על החשבון
מסך "קצב ובטיחות" מסביר למה התור איטי, לפני שמבקש לשנות משהו. יש גבולות שאי אפשר לעבור, גם בהקלדה ידנית: ערך חורג מתוקן בשמירה, ומופיעה הודעה שאומרת בדיוק מה תוקן.
שמות משתמש באנגלית, בממשק בעברית
שם משתמש מקבל כיווניות LTR כדי שה-@ יישב לפניו, ובכל זאת נצמד לקצה הימני של השורה. בלי שתי ההגדרות האלה יחד, השם או מתהפך או בורח שמאלה.
שלוש שורות מסומנות. רק עכשיו הסרגל נצבע ומופיע הכפתור האדום "הוסף לתור: הפסק מעקב".
השורות שבתור מעומעמות עם תגית "בתור", ובפס התחתון: הבא בתור, ספירה לאחור ומונים מול התקרות.
היסטוריה מקומית, ותור עם בלמים.
הכל נשמר בדפדפן, ב-IndexedDB של התוסף, ושום דבר לא נשלח לשרת. התוסף לא רואה את הסיסמה: הבקשות יוצאות מתוך טאב אינסטגרם שכבר מחובר, והדפדפן מצרף את הסשן בעצמו.
| הגדרה | ברירת מחדל | גבול שאי אפשר לעבור |
|---|---|---|
| השהיה בין פעולות | 28–55 שניות, באקראי | לפחות 20 שניות |
| הפסקה ארוכה | אחרי 15 פעולות, 6–12 דקות | אחרי 30 פעולות לכל היותר, לפחות 2 דקות |
| תקרה שעתית | 40 פעולות | עד 60 |
| תקרה יומית | 120 פעולות | עד 150 |
הגבולות מוגדרים במקום אחד בקוד, ונאכפים גם על ערך ישן שכבר שמור, לא רק על מה שמקלידים עכשיו.
ניסיתי לשמור השהיה של 5 שניות ותקרה שעתית של 200. הכלי שמר, תיקן ל-20 ול-60, ואמר מה תוקן.
בלמים נוספים
- טאב אחד. נעילה משותפת (
navigator.locks) מונעת משני טאבים להריץ את התור במקביל ולעקוף את התקרות. - החשבון הנכון. לפני כל פעולה התור בודק, בלי בקשת רשת, שהחשבון המחובר הוא החשבון שהתור שייך לו. אם לא, הוא נעצר.
- רק כשהכלי פתוח. סגירת הטאב עוצרת את התור. הפריטים נשמרים וממשיכים בלחיצה על "הפעל".
- סנכרון שלם או כלום. בהגבלת קצב הוא ממתין ומנסה שוב 3 פעמים (6, 18 ו-45 שניות), ואם נכשל, שום דבר לא נכתב.
sync.jsמושך את המצב החי ומשווה אותו לסנכרון הקודם. ההתאמה לפי מזהה, כך ששינוי שם משתמש לא נראה כמו ירידה.
queue.jsתור הפעולות: השהיות אקראיות, הפסקות ארוכות, תקרות, ועצירה מלאה בחסימה.
checks.jsכללים טהורים בלי תלויות: גבולות הקצב, בדיקת מזהים ושמות, CSV מוגן מנוסחאות ובדיקת קובץ גיבוי.
db.jsIndexedDB: רשימות, יומן שינויים, יומן פעולות, ושחזור מגיבוי בטרנזקציה אחת.
accounts.jsמאגר ותור נפרדים לכל חשבון, כך שהיסטוריה של חשבון אחד לא מתערבבת באחר.
dashboard.cssמערכת העיצוב: טוקנים ב-OKLCH, וכל הכיווניות בתכונות לוגיות, בלי מיקום קשיח לימין או לשמאל.
הנתונים שלי, אצלי
- ייצוא גיבוי JSON, ושחזור שנבדק לפני שמשהו מוחלף: מבנה, מזהים ושמות, סיכום ואישור.
- תזכורת לגבות, אם עבר חודש מהגיבוי האחרון.
- "העתק פרטי תקלה" מעתיק גרסה, דפדפן ושגיאות אחרונות, בלי שמות משתמש ובלי מזהים.
מה נבדק
- 17 בדיקות אוטומטיות, בלי תלויות, וכולן עוברות.
- הן מכסות את הכללים הטהורים ואת ההפרדה בין התוסף לדמו.
- התור, הסנכרון והמסך נבדקים ידנית בדפדפן, כולל מעבר מלא במקלדת.
מה לא מוצג כאן
- זה כלי פרטי לחשבון אחד, ואין לי נתוני שימוש להציג.
- אין כאן "תוצאות" של צמיחה, ואין המלצה להסיר אנשים בכמויות.
- הקוד שמדבר עם אינסטגרם לא מפורסם. מפורסם הדמו בלבד.
מקובץ ZIP לתוסף, בשבועיים.
השוואה חד־פעמית מקובץ
עמוד HTML עצמאי: גוררים אליו את קובץ ה-ZIP מ"הורדת המידע שלך" באינסטגרם ומקבלים השוואה. בלי התקנה ובלי גישה לחשבון, אבל גם בלי היסטוריה, ובלי דרך לפעול מתוך הכלי. הוא עדיין עובד, וה-ZIP שלו הוא גם קו בסיס שהתוסף יודע לייבא.
תוסף, מסמך מוצר ומערכת עיצוב
סנכרון ישיר מהחשבון, מסך "הפסיקו לעקוב" עם תאריכים, ותור איטי עם תקרות ועצירה בחסימה. באותה גרסה כתבתי גם את מסמך המוצר ואת מסמך העיצוב, והדשבורד עוצב מחדש לפיהם: מ"אתר שיווקי" לכלי עבודה.
בלמים, גיבוי ונגישות
כמה חשבונות באותו דפדפן, בדיקת חשבון לפני כל פעולה, תור בטאב אחד, גבולות קצב קשיחים, שחזור מגיבוי, פרטי תקלה בלי שמות, CSV מוגן מנוסחאות ותוויות נגישות. הסרתי גם שתי הרשאות שלא היו בשימוש.
דמו ציבורי, מאותו קוד
גרסה של הדשבורד שרצה בטאב רגיל, עם חשבון בדוי, כדי שאפשר יהיה לנסות את הכלי בלי להתקין כלום ובלי לגעת בחשבון אמיתי.
הכלי עצמו.
כל הצילומים מהדמו, עם החשבון הבדוי @studio.kadar.demo. לחצו על תמונה כדי להגדיל.
תאריך לכל שורה, ותגית "אתה עדיין עוקב" למי שירד כשאתה עדיין עוקב אחריו. כפתור "הפסק מעקב" מופיע רק בשורות שבהן הוא רלוונטי.
פס התקדמות שמופיע רק בזמן סנכרון, מתחת לסרגל העליון. הרשימה נשארת זמינה.
"6 עוקבים חדשים, 2 הפסיקו לעקוב." מספרים לפני מילים, והמונים בניווט מתעדכנים.
כל הפסקת מעקב והסרת עוקב, עם תאריך. פעולה שנכשלה נשארת ביומן, מחוקה בקו, עם השגיאה.
מה שמור, ממתי, ומתי היה הגיבוי האחרון. מחיקת ההיסטוריה היא הכפתור האדום היחיד במסך.
אותו כלי, ברוחב של טלפון.
רספונסיביות מבנית בלבד: מתחת ל-680px הניווט הופך לרצועה אופקית של אייקונים עם מונים, והפעולות יורדות לשורה משלהן.
אותו קוד. רק העוקבים מומצאים.
הדשבורד פונה לעולם החיצון דרך שני מודולים בלבד: המאגר והגשר לטאב אינסטגרם. זה התפר. הבנייה מעתיקה את כל שאר קובצי התוסף כמו שהם, ובמקום שני אלה מחברת גרסאות שעובדות בזיכרון. אין אף תנאי "אם זה דמו" בתוך קוד התוסף.
| נושא | בתוסף | בדמו |
|---|---|---|
| קצב התור | 28–55 שניות, והפסקות של דקות | אותן הגדרות, וההמתנה מחולקת ב-10 |
| קישור לפרופיל | פותח את הפרופיל באינסטגרם | מנוטרל ומציג הסבר, כי שם בדוי עלול להיות תפוס באמת |
| ייבוא ושחזור | קולטים קובץ | מציגים הסבר במקום |
| שמירה | IndexedDB, נשאר | זיכרון הטאב, מתאפס ברענון |
מה נבדק בכל בנייה
- אין בדמו אף קריאת רשת: לא fetch, לא XMLHttpRequest, לא WebSocket.
- אין שום פרט מזהה של בעל החשבון האמיתי, ואין כתובות של תמונות פרופיל אמיתיות.
- הקוד שמדבר עם אינסטגרם בכלל לא נכנס לתיקיית הדמו.
- הבדיקה מכניסה דליפה בכוונה ומוודאת שהיא נתפסת.
- הקבצים שהועתקו מהתוסף זהים למקור, והחבילה של התוסף נקייה מקובצי הדמו.
החשבון הבדוי
- "סטודיו קדר", סטודיו לקרמיקה, עם כ-1,230 עוקבים.
- בכל שם משתמש בדוי מופיעה המילה demo, בתחילתו או בסופו, כך שאי אפשר לטעות בו בחשבון אמיתי.
- התמונות הן ראשי תיבות שנוצרים בדפדפן, והתאריכים נגזרים מרגע הטעינה, כך שהדמו תמיד "סונכרן אתמול".
רוצים כלי שחוסך לכם עבודה ידנית?
אם יש לכם משימה שחוזרת כל שבוע ונעשית ידנית, אני יכול לאפיין, לעצב ולבנות לה כלי קטן ומדויק, שעושה רק את מה שצריך.
בואו נדבר →