מאחורי הקלעים
איך העמוד הזה נבנה.
העמוד של המיפוי לא מסביר מה זאת אוטומציה, הוא נותן לגרור אחת. כאן אני מפרק איך הצעצוע הזה עובד מבפנים. בלי ספריות, בלי קסמים, הכול קוד שרץ בדפדפן שלך.
01הרעיון בשורה אחת
העמוד כולו בנוי כמו לפני ואחרי של אוטומציה: למעלה ענן של משימות שרוחשות בלי סדר, למטה זרם כחול שקט שהכול זורם בו לבד. המרחק ביניהם הוא בדיוק גרירה אחת של אצבע. זה כל הפיץ׳.
המספרים בהדגמה מסומנים "הדגמה" בכוונה. הם להמחשה, לא הבטחה. את המספרים האמיתיים של עסק מגלים רק כשממפים אותו באמת.
02מכונת המצבים של משימה
כל כרטיס משימה נמצא בכל רגע באחד מארבעה מצבים. כל הלוגיקה של הסנדבוקס היא בסך הכול מעברים בין המצבים האלה:
המעבר המעניין הוא האחרון: ברגע שמשימה נכנסת לזרם היא מחליפה זהות. הכרטיס הלבן והעקום הופך לגלולה כחולה ישרה, נצמד למסילה, והשעות שלה נוספות למונה. משם היא לא חוזרת, וזאת בדיוק הפואנטה.
03הפיזיקה, בלי להסתבך
- הרחיפה בענן. אין כאן אקראיות אמיתית, יש שני גלי סינוס איטיים בפאזה שונה לכל כרטיס. זה נותן ריחוף שנראה חי אבל לא מעצבן. כרטיסים שמתקרבים דוחפים זה את זה בעדינות, והקירות דוחפים חזרה.
- הגרירה. הכרטיס לא נדבק לסמן, הוא רודף אחריו עם השהיה קטנה, כמו קפיץ. הטיה קלה לפי מהירות הגרירה גורמת לו להרגיש כמו חפץ עם משקל.
- הקליטה. בעזיבה מעל הזרם, או בלחיצה, הכרטיס טס אל נקודת הכניסה לאורך עקומת בזייה ריבועית שנקודת הביניים שלה מוגבהת. לכן זה נראה כמו קשת, לא כמו נפילה.
- הזרם. המסילה היא סינוס אחד רחב לכל רוחב המסך. כל גלולה שומרת מיקום אופקי משלה, נעה שמאלה במהירות קבועה, ומתגלגלת חזרה מצד ימין. שלוש נתיבים קטנים מונעים התנגשויות.
y(x) = baseY + A·sin(2πx/λ + φ) · drift: v ← lerp(v, noise(t), 0.04) · capture: B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂
המונה בעצמו לא קופץ למספר החדש, הוא מחליק אליו. חצי שנייה של אנימציית מספרים עושה יותר לתחושת "משהו חזר אליי" מכל טקסט שיווקי.
04שתי שכבות, שתי עבודות
הסצנה בנויה משתי שכבות שיושבות אחת על השנייה:
- קנבס מאחור. סרט הזרם, הקווים המקווקווים שנעים, החלקיקים הזוהרים, האדוות בקליטה, קו ההובלה בזמן גרירה. דברים שמצוירים מחדש שישים פעם בשנייה.
- DOM מקדימה. הכרטיסים עצמם הם כפתורים אמיתיים. טקסט עברי נשאר חד בכל רזולוציה, מקבל RTL בחינם, נגיש למקלדת ולקורא מסך, וקל לעצב אותו ב-CSS.
לצייר טקסט עברי על קנבס זה מתכון לכאב ראש של כיווניות וחדות. החלוקה הזאת נותנת לכל שכבה לעשות מה שהיא הכי טובה בו.
05הדמו האוטומטי ורגישות לתנועה
אם לא נוגעים בכלום, אחרי פחות משנייה מופיעה טבעת תכלת: רוח רפאים שמרימה משימה, גוררת אותה אל הזרם ומשחררת. היא מדגימה את המכניקה בדיוק בדרך שבה משתמש אמיתי היה עושה את זה, ונעלמת ברגע שנוגעים במשהו. ככה גם מי שרק גולל מבין את הרעיון בלי לקרוא הוראות.
ומי שביקש מהמערכת שלו פחות תנועה, מקבל פחות תנועה: עם prefers-reduced-motion הענן הופך לרשת מסודרת ושקטה, הרוח רפאים לא מופיעה, ולחיצה פשוטה שולחת משימה לזרם בלי אנימציה. אותו רעיון, אפס ריחוף.
06ההחלטות הקטנות
- אפס ספריות. אין פריימוורק, אין תלות חיצונית, אין CDN. קובץ HTML, קובץ CSS, קובץ JS, וארבעה קובצי פונט של IBM Plex שמאוחסנים כאן ליד.
- עברית קודם. המחירים כתובים בלי כפיית כיוון, נותנים לאלגוריתם הדו-כיווני של הדפדפן לסדר ₪ ומספרים כמו שעברית מסדרת אותם.
- העיגולים המצוירים. הטבעת סביב "מדמם זמן" וסביב האפס במחיר הם SVG עם pathLength אחד, שמצויר על ידי אנימציה של stroke-dashoffset. עיפרון של שרטט, בקוד.
- יושרה לפני אפקט. אין המלצות מומצאות ואין מספרים מהאוויר. איפה שההדגמה ממציאה מספרים, כתוב עליה שהיא הדגמה.
נבנה עם AI, כמובן. ככה נראית העבודה כשעובדים איתו באמת.
מדברים על מיפוי