רשימת 11 התוספים הכי שימושיים בפיתוח אתרים

היי לכולם
ושנה אזרחית טובה לך [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


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

ואם אתם משתמשים בתוספים שעוזרים לכם ואינם ברשימה, אני אשמח שתשלחו לי, אפשר להגיב פשוט למייל הזה.

שלכם,
מיכאל


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

רוצים להצטרף לרשימה ולא לפספס אף ניוזלטר בעתיד?