GridGood – דו״ח מצב 1

מקווה שכבר בשבוע הבא אוכל להראות את העיצוב.

ובינתיים, חשבתי לעשות דו״ח מצב. אם יש משהו ספציפי שמעניין אתכם תנו סימן וארחיב עליו.

(דרך אגב, כאן אפשר לראות את הרשימה הכמעט מלאה)

Laravel

מי שקרא את הפוסט הזה, יודע שבחרתי ללכת על Laravel ולא על nodeJS. מסתבר שזאת הייתה בחירה מצוינת.

באתר שלהם הם רושמים במשפט הראשון:

Love beautiful code? We do too.

ואני יכול להעיד שזה אכן המצב.

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

אני אשמח לשמוע חוויות מ-nodeJS/Express מהבחינה של ארכיטקטורה וסדר של הקוד בפרויקטים גדולים.

הפרדה בין FE ל-BE

בשלב הזה העבודה מאוד נוחה בצורה הזאת כשכל צד עומד בפני עצמו. את היתרונות כתבתי כאן.

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

Cloudinary

The hard life of a cloud service

הייתה לי התלבטות אם לשמור את התמונות אצלי על השרת או אם להשתמש בשירות חיצוני.

ניסיתי את Cloudinary כי הוא נראה הכי טוב מכל האלטרנטיבות שחיפשתי.

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

ההטמעה שלו ממש סופר פשוטה וחלקה ויש להם תמיכה כמעט בכל שפה אפשרית.

אני השתמשתי רק ב-PHP ואולי בעתיד אם ארצה לתת למשתמשים לעשות מניפולציות על תמונות (פילטרים, חיתוכים וכו׳) אז אשתמש ב-JS שלהם.

הממשק שלהם נותן את כל מה שצריך (והאמת שלא צריך יותר מדי) וגם ה-API נוח למדי.

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

$ curl -X DELETE 'https://KEY:SECRET@api.cloudinary.com/v1_1/APP_NAME/resources/image/upload?all=true'

Angular Material

האמת שהיו לי ציפיות מהספריה. אבל כמו המשפט הלא כל כך מפורסם – כגודל הציפיות, גודל האכזבות.

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

Sorry Angular Material

Youtube

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

לפי חיפוש בפורומים מסתבר שכל סרטון מחפש את התוסף של Chromecast באופן אוטומטי ואם אין לך אותו, נזרקות שגיאות שהוא לא מוצא אותו. נראית כמו פאדיחה די רצינית, אבל מצד שני אולי זה קשור בכלל לפיתוח ב-Localhost בצורה כלשהי ול-Cross Origin של הסקריפטים.

הפתרון, שבכל מקרה הוא פתרון טוב מבחינת ביצועים הוא לא להטמיע אף סרטון עד שהמשתמש לא לוחץ Play. במקום כל סרטון יש תמונה עם Play ורק אם לוחצים על התמונה – הסרטון האמיתי נטען.

Map – Amcharts VS D3

בשלב הזה התחלתי כבר לעבוד על המפה. בהתחלה רציתי לקחת את הספריה של Ancharts. היא נראית מעולה וה-API שלה נראה פשוט וגמיש.

הבעיה היא שזה לא Open-source. מה שמשאיר לי ברירה אחת: לא להשתמש בה. לא כרגע לפחות. או אף פעם.

אז זה משאיר לי את d3js ואת DataMaps שמבוסס עליו. שזאת אופציה מעולה.

היא פשוט מצריכה יותר עבודה בהתחלה, אבל מבחינת אפשרויות בהמשך יש דברים מדהימים שאפשר לעשות.

או למשל הפרויקט המדהים הזה.

מה עוד?

אחד הדברים העיקריים חוץ מהתשתית עצמה הוא כמובן התוכן.

במקרה של GridGood בגלל שהעמוד הראשי הוא בעצם לופ של פוסטים יש שני אובייקטים עיקריים שעליהם נעשתה רוב העבודה:

  1. שליחת פוסט
  2. פוסט

 ככה זה נראה מתבנית ריקה עד לתבנית עובדת עם מידע אמיתי (אבל עדיין בלי העיצוב):

שליחת פוסט 1
Post Wizard - Stage 1
שליחת פוסט 2 (עם צירוף מדיה)Post Wizard - Stage 2

פוסט 1 (תבנית ריקה)
Post - Stage 1

פוסט 2 (רספונסבי)Post - Stage 2

פוסט 3 (עם תמונות)

Post - Stage 3

פוסט 4 (עם תמונות ויוטיוב)Post - Stage 4

פוסט 5 (עדכני לכרגע – מפה התחלתית, כפתור YouDidGood שיתופים, תגובות ודיווח)

Post - Stage 5

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

מבחינת המפה עצמה, היא כנראה הולכת להיות סגורה במידה ויהיו תמונות או וידאו כדי לא לתפוס עוד שטח נדל״ן בעמוד. אחרת הגלילה באמת תהיה ארוכה.

מה הלאה?

על המפה יש עוד עבודה מבחינת מיקומים ובכלל קוד נקי. d3 הוא לא ממש שיא היופי מאחורי הקלעים לצערי.

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

אני צריך עוד להוסיף רשימה לבנה שרק מי שנמצא בה יכול להכנס לאתר.
מעין הרשמה ממודרת רק למשתמשים שאושרו מראש (שזה נושא בפני עצמו – מי צריכה להיות הקבוצה הראשונה), כדי שיוכלו להשתמש בגרסת ה-Beta.

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


מה זה פה זה?

אני מלווה את הפרויקט שאני הולך לבנות. לשתף על הדרך תובנות, דילמות, הרהורים ולא פחות חשוב – ללמוד על הדרך.

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

Comments on this post

No comments.

Leave a Reply

Trackbacks and Pinbacks on this post

No trackbacks.

TrackBack URL