היי לכולם
ושנה אזרחית טובה לך [FIRST NAME GOES HERE],
הרבה זמן עבר מאז הניוזלטר האחרון, ואני ממש מתרגש לשתף איתכם רשימה שרציתי לערוך כבר ממש מזמן, של התוספים שמקלים על החיים שלי ומאפשרים לי להבין ולהנדס לאחור כל אתר שאני רואה באינטרנט. או לשפר את הפרודוקטיביות שלי בזמן הבנייה.
אז מבלי להכביר במילים, הנה הרשימה:
01 DOM X-RAY
נכון שכל האינטרנט בנוי מקופסאות בתוך קופסאות? אז התוסף הזה חושף את כל השלד של העמוד בעזרת ריבועים ורודים. רוצים להבין איך הלייאוט הזה בנוי או איך הם עשו את האינטראקציה הזאת? עם התוסף הזה אין סודות. הכל מתגלה
https://chrome.google.com/webstore/detail/dom-x-ray/olfkgegmjhgehnakignkabhbdchkhnkj
02 WAPPALYZER
התוסף הזה מראה איזה טכנולוגיות מרכיבות את האתר: החל מהפריימוורקיפ /בילדים שהשתמשו בבניה שלו: למשל ריאקט / בסקוורספייס ועד כלי מרקטינג כמו אנליטיקס, וטאג מנג’ר, הוטג’אר וכו ועד לספריות השונות שמפעילות אותו. מאוד עוזר להבין מה קורה מאחורי הקלעים
https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg
03 BUILT IN WEBFLOW
התוסף שאני יצרתי, לא מפורט כמו וואפאלייזר, אבל כשהוא מותקן אצלכם בדפדפן, מספיק מבט חטוף בשביל להבין האם האתר נבנה בוובפלואו או לא.
https://chrome.google.com/webstore/detail/webflow-checker/nlmnmoaknkmoccpalblnpalimemlabja
04 Video speed Controller
תוסף מוצלח במיוחד לשנות מהירות לכל סרטון שאתם צופים בו ברשת, זה ממש נוח, אבל בהקשר של אתרים, התוסף הזה מוסיף אלמנט קטן מעל כל סרטון שיש בעמוד, כך שהתוצר לוואי הוא שאם נתקלתם באינטראקציה יפה - הוא יגלה לכם מיד אם מדובר בוידיאו או לא.
https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk
05 Image Downloader
תוסף שמאפשר להוריד את כל התמונות מהעמוד שאתם צופים בו. כמובן שזה שימושי באופן הזה, אבל, לפעמים, לראות את כל האסטים במקום אחד מסביר ממש טוב איך וממה מורכבות אינטראציות שונות. האם זה SVG מונפש או PNG סיקוונס? האם יש לכל פרצוף רקע מיוחד או שזה הגיע ככה מהפיגמה.
https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
06 Webflow code mode
תוסף קטן ומגניב לגישה מהירה לאיזורי קוד של העמוד, חוסך את ללכת לפאנל של העמודים, למצוא את העמוד, ללחוץ על הגלגל שיניים, ולגלול עד למטה. פעם הוא היה ממש מכסה את כל העמוד, אבל לאחרונה הוא פשוט חוסך את כל הקליקים ובלחיצת כפתור פותח את ההגדרות של העמוד
https://chrome.google.com/webstore/detail/codemode-for-webflow/mbgenamkihplkffggckaplhnancbojbk
07 Finsweet Extension
אוסף בלתי נגמר של ממתקים ושיפורים שהיו צריכים להיות שם קודם: לאחד קלאסים, למחוק נק' שבירה, לגשת לקוד הגלובלי בלי לעבור להגדרות של הפרוייקט, ועוד מלא קסם.
https://chrome.google.com/webstore/detail/webflow-checker/nlmnmoaknkmoccpalblnpalimemlabja
08 Fake filler
כשעובדים על טפסים, במיוחד טפסים עם הרבה שדות, יש את השלב המתיש של למלא את הטופס (שוב) ולראות שהכל עובד. התוסף הזה מאפשר למלא את כל השדות בתוכן דמה, הוא יודע לזהות מה שדה מייל ומה שדה מספר, בלחיצת כפתור הטופס מוכן לשליחה לפי הוולידציות שיצרתם בלי ההתשה של למלא אותו.
https://chrome.google.com/webstore/detail/fake-filler/bnjjngeaknajbdcgpfkgnonkmififhfo
09 Web Vitals
יש מלא מה לומר על כלי בדיקות המהירות של גוגל, שהוא מוטה והכל פוליטי, ובעיקר שלא מבינים את השימוש שלו. בהיותו כלי פשוט ופופולרי במיוחד, הרבה אנשים (ולקוחות) אוהבים לבדוק את האתרים שלהם בזה ולבוא להתלונן בעיקר על המובייל. התוסף הזה, מריץ בדיקה מהירה בזמן שהעמוד נטען ומדווח בעיות וההזדמנויות בלי לצאת מהקונטקסט.
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
10 Emmet Re:view
כלי שמראה פריוויו לנקודות שבירה שונות, הוא מראה גם גדלים ישנים של מכשירים קטנים, כמו אייפון 5, ואפשר לראות בקלות דברים כמו הטקסט של ההירו ארוך מדי, והכפתור נחתך מתחת לפולד וכו'. בגלל שיש הרבה משתנים שמשפיעים כל הנראות הסופית של האתר, בדיקה של מצבי קיצון מראה איפה דברים יכולים להשבר.
11 AI Alt text
כלי חדש ממש, שמייצר לבד אלט טקסט לתמונות שלנו היישר בתוך וובפלואו, הוא משתמש במודל שמזהה תמונות וממיר את מה שהוא רואה לטקסט, וזה פשוט ועובד ממש יפה.
https://chrome.google.com/webstore/detail/ai-alt-text-for-webflow-b/lkffhkdaodfkeddbhicfkigpnneidbfb
הנה פרקתי, אלה התוספים שאני משתמש בהם ביומיום שלי, אני מקווה שתמצאו ברשימה משהו שיעזור גם לכם. אם אתם חושבים שיש מישהו שהתוספים האלה יכולים לעזור לו, אני אשמח אם תעבירו לו את המייל הזה.
ואם אתם משתמשים בתוספים שעוזרים לכם ואינם ברשימה, אני אשמח שתשלחו לי, אפשר להגיב פשוט למייל הזה.
שלכם,
מיכאל
קיבלת את המייל הזה כי נרשמת לניוזלטר בעבר, או שנרשמת לאחד הטוטוריאלז שלי, למשל זה. או שלמדת אצלי בקורס וובפלואו בעבר. אני משתדל לשלוח תוכן מעניין ובעל ערך ומקווה שזה מתאים גם לך.
רוצים להצטרף לרשימה ולא לפספס אף ניוזלטר בעתיד?
