פורטפוליו

GatsbyJS

-

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

אופטימיזציה של תמונות

-

ע"י שימוש ב gatsby-image מושגות אופטימיזציות רבות לכל התמונות שמופיעות באתר.

כל תמונה שנמצאת באתר הוקטנה ונדחסה לגודל המתאים לה, נוצרו מספר תמונות קטנות לכל תמונה כדי שסמארטפונים וטאבלטים לא יורידו תמונות בגודל מחשב (ששוקלות יותר ממה שהם צריכים), שימוש בטכניקת "טשטוש" או SVG כדי להציג תצוגה מקדימה של התמונה בזמן שהיא נטענת, מניעה מהאתר ליצור קפיצה של העמוד בזמן שתמונות נטענות ובנוסף שימוש ב lazy-loading כדי לחסוך רוחב פס שתמנע מהמשתמש להוריד פרטים לא רלוונטיים ותביא להאצה של טעינת העמוד.

Contentful API

-

היא פלטפורמה לניהול תוכן. באמצעות שימוש ב API שלהם כל מידע שנמצא באתר (לדוגמה פרטים על עמוד של פרוייקט) מיובא מהמערכת אל האתר בצורה דינמית.

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

מהירות האתר וקידום אתרים

-

לפי GTMetrix (אתר שמנתח ביצועים של אתרי אינטרנט), האתר פורטפוליו הזה מגיע בדירוג שלו ל100/100% מבחינת ביצועים ומהירות. נעשו אופטימיזיות רבות כדי לממש זאת ולהגיע למהירות המיטבית ביותר.

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

שיפור חווית המשתמש ותמיכה בסוגי דפדפנים שונים

-

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

שימוש ב PostCSS, autoprefixer וה Polyfills שהם מציעים מספקים תמיכה טובה יותר ב CSS כך שכל הדפדפנים יוכלו "להבין" את הפיצ'רים שהם לא כוללים, ובכך לשמור על הפונקציונליות של האתר.

בנוסף לכך, הוספתי polyfill חיצוני ל Intersection Observer. בגלל שאין polyfill ל clip-path, אז חיקיתי שיטה משלי ע"י linear-gradient שהוא חצי שקוף שככה הוא בעצם מדמה clip-path לחלקים הרלוונטיים.

למרות המהירות המדהימה של האתר(100%), יצרתי תצוגת "שלד" של עמוד צפייה בפרטי הפרויקט למקרה שהעמוד עדיין נטען בשביל המשתמש, על מנת להבטיח את חווית המשתמש.

PWA (אתר שהוא גם אפליקציה) + Offline Mode

-

אופציה להתקין את האתר בתור PWA (לחצן הוסף לדף הבית כשפותחים את האתר), שימוש ב - Service Worker שבאמצעותו אפשר להריץ את האתר/אפליקציה גם ללא אינטרנט, באמצעותו מבצע Cache & precache של כל הפריטים הרלוונטים באתר, מה שגם מביא לטעינה מהירה יותר של האתר בפעם השנייה שתחזרו לאתר.

הגנה נגד התקפות XSS

-

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

רב לשוני

-

האתר כולו תומך בעברית (שפת RTL) ובאנגלית (שפת LTR), הוספת הקידומת '/he' תהפוך את האתר לעברית.

אנימציות

-

עם שימוש ב CSS וה - Intersection API כדי להשיג חוויה מקסימלית ויפה עבור המשתמש.

אתר רספונסיבי

-

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