היופי שבקוד פתוח – להשתמש בקודים קיימים שאחרים כתבו כדי ליצור משהו חדש משלך

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

חיפוש קל בגוגל יכול להוביל אותך אל הפתרון שאתה מחפש.

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

אתן דוגמא לזה, ממש מהיום.


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

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

אין כמו הוכחה חברתית כדי לדרבן אנשים, אז כחלק מדף הנחיתה, עיצבתי את הסקשן הבא:

מה אנשים אומרים על הסדרה? (מלא מלא תגובות וזה יוצר סקשן ארוך מדי)
מה אנשים אומרים על הסדרה? (מלא מלא תגובות וזה יוצר סקשן ארוך מדי)

הבעיה היא כמובן, זה ארוך מאוד!!!

אז פתרתי את זה כך (זו תמונה סטטית שעיצבתי, לא אנימציה):

מה אנשים אומרים על הסדרה? (3 תגובות וסוג של בועה שאומרת שזה בטעינה)
תמונה סטטית שעיצבתי, היא לא אמורה לזוז כי זו רק המחשה איך העיצוב יראה.

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

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

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

נחמד!

אז העבודה שלי בתור 'אלרון המעצב' הסתיימה כאן.

אקרא ל'אלרון המתכנת' עכשיו ונדבר על זה.


אלרון המעצב: "זה מה שאני רוצה בעיצוב! מה דעתך?"

אלרון המתכנת: "אוי! מה זה, אלרון המעצב? אי אפשר לעשות את זה! זה יפה והכל אבל זה לוקח זמן לתכנת את זה…"

אלרון המעצב: "כןן… אבל זה מגניב ממש לא?"

אלרון המתכנת: "טוב… נראה מה אוכל לעשות. צריך לעשות עבודת מחקר קטנה באינטרנט. אולי כן אוכל לעשות את זה אבל שוב, זה הרבה עבודה"


איזו עבודת מחקר?

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

האמת היא שעבודת המתכנת בשלב הזה דומה למשהו אחר:

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

ליקטתי שני דברים.

הדבר הראשון שמצאתי היה האנימציה הזו של הבועה עם שלושת הנקודות, ומצאתי משהו די מוצלח:

See the Pen Jumping dots animation by Mattonit (@mattonit) on CodePen.

הדבר השני שליקטתי היה איזשהו 'סליידר' שמוסיף כל פעם משהו לרשימה.

See the Pen jQuery Vertical Carousel by Marcus Burnette (@mburnette) on CodePen.

היו בזה שתי בעיות:

1. המטרה הייתה שזה יראה כמו צ'אט, ובצ'אט התגובה האחרונה צריכה להיות מיושרת למטה, אבל זה לא היה המצב: כרגע שהפריטים מתיישרים למעלה, ולא למטה…

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

עכשיו כשאני יודע מה הבעיות, אפשר לגשת לפתור אותן.

וכך עשיתי.

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

See the Pen jQuery Vertical Carousel – for fontips.com by Elron (@elron-the-typescripter) on CodePen.

עכשיו מן הסתם שבדף הנחיתה האמיתי תמונות האנשים יהיו אמיתיות… חחח. בשביל לבנות את הקוד בלי צורך לייצא כל תמונה ותמונה של הפרופילים האמיתיים, השתמשתי בשירות של pravatar.cc שמביא תמונות אקראיות של פרופילים לא אמיתיים. זה מאוד שימושי כשרוצים לגרום לקוד לעבוד בלי להתעסק בעיצוב. הכרתי את השירות הזה בזכות לאה מליקוטי שיבולים שכתבתה על זה איפשהו באתר שלה (רק שאני לא זוכר איפה). תודה לאה! (התווסף ב־3/12/19): לאה הגיבה לי כאן והאירה את תשומת ליבי שדיברה על שירות אחר שנקרא "האדם הזה לא קיים", שנחשפתי אליו לראשונה בבלוג שלה. ידעתי שזכרתי משהו כזה!


(התווסף ב־3/12/2019): אתמול סיימתי לתכנת את דף הנחיתה, אז אפשר לראות את העיצוב מתנוסס במקום הראוי שלו: טיפים בפונטים.


מסקנה? קוד פתוח זה דבר יפייפה.

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

או סתם לקבל מוטיבציה מהמאמר הזה ולשתף דברים בעצמכם!

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

4 מחשבות על “היופי שבקוד פתוח – להשתמש בקודים קיימים שאחרים כתבו כדי ליצור משהו חדש משלך

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

    ותודה רבה על הקרדיט – איזו הפתעה לקרוא פוסט ופתאום לראות את ליקוטי שיבולים מתנוסס שם! אבל אני חוששת שהאתר הספציפי הזה, pravatar, לא הוזכר אצלי. זה אכן נכון שדיברתי על שירות שמייצר פרצופים שלא קיימים, אבל זה היה אתר אחר.
    https://leketshibolim.ort.org.il/פרצופים-שלא-קיימים-עיצוב-של-ויזואליזצ/
    עם זאת, ברשותך אני אוסיף כעת את האתר הזה, הוא נראה אחלה.

    1. לאה כיף לראות אותך פה! תודה רבה.
      וואלה צודקת, זה מסביר למה לא מצאתי את הפוסט אצלך בבלוג: חיפשתי משהו שהיה לו שם אחר.
      אנו מחכימים יחד 🙂

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פוסט בהפתעה?