מייסד משותף, אלכס ווזקס, חולק כיצד מגרש המשחקים בפיתוח של CodePen מסייע לקבוצות Dev של Frontend ליצור, לשתף ולבצע באגים של קוד.

TL; ד”ר: כאשר קוד פן התחיל, שלושת החברים שמאחוריו חשבו שהפרויקט הצדדי שלהם לא יימשך יותר מכמה שבועות. כעת, עורך הקוד המקוון מציג תצוגה מקדימה חיה של HTML, CSS ו- JavaScript כדי לתת למפתחים מרחב נטול לחץ להתמודד עם טכנולוגיות חדשות, לשתף את היצירות האחרונות שלהם ולשתף פעולה עם קודאים אחרים. שוחחנו עם מייסד משותף אלכס ווזקס על האופן בו התשוקה של הצוות לתרבויות עיצוב, פיתוח וסטארט-אפ התפתחה לפלטפורמה בשירות מלא שממשיכה להוסיף תכונות בתגובה למשוב של קהילת משתמשים מעורבת..


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

שלושת החברים היו המפתחים והמעצבים הראשונים שנשכרו ב- Wufoo, בונה צורות HTML שנמכר ל- SurveyMonkey בשנת 2011.

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

כריס קויייר, האיש שעומד מאחורי CSS-Tricks, רצה ליצור דרך ידידותית למשתמש למפתחי חזיתות כדי להשוויץ בקוד שלהם. בסביבת הקידוד החי של CodePen מופיע עורך קוד בדפדפן בו משתמשים יוצרים פרויקטים, הנקראים Pens. משם, מפתחים יכולים לשתף פעולה, לבקר ולמצוא השראה מחברים אחרים.

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

“קוד פן די ייחודי בכך שלא רק משתמשי המקצוענים שומרים עלינו מעל הצף,” אמר. “זו הקהילה כולה. המשתמשים שלנו יוצרים 99.9% מהתכנים באתר שלנו, וזו הסיבה שאנשים מגיעים ל- CodePen. אנחנו רק מנסים להיות דיילים אחראיים של הקהילה ותוכנם. “

CodePen מספק את כל הכלים הדרושים לך כדי ליצור, לשתף וללמוד

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

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

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

1. ממשק עריכה נקי עמוס אפשרויות HTML, CSS ו- JavaScript

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

גרפיקה של התכונות של עורך CodePen

CodePen מעניק למפתחי Frontend מרחב נטול מאמץ לכתוב קוד תצוגה מקדימה.

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

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

2. פלטפורמת בלוגים פשוטה מאפשרת לך לכתוב על קוד ולשתף את העטים שלך

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

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

באופן טבעי, המייסדים המשותפים הוסיפו ממשק בלוגים מופשט, הכלול בכל חשבון CodePen. עורך הבלוגים תומך ב- Markdown, הדגשת תחביר, ו- CSS מותאם אישית עבור פוסטים בודדים.

3. מצגת מצגת ממקסמת את שטח המסך להצגת עטים עם מקרן

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

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

קולאז 'של מצגת CodePen

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

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

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

תכונות המגיעות בשנת 2017 נעות מעשיות למיסטריות

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

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

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

עדכון כזה בא אחר כך השנה הוא הסיבה שאלכס הצטרף ל- CodePen – אלא שהוא חשב שהצוות יוכל להציע אותו בשנה הראשונה לפלטפורמה..

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

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

תהליך תשלום שנערך מחדש שומר על הפעלת החברה

בצד השני של קשת העדכונים, אלכס שמח לתת לנו את “הסקופ הכי פחות מרגש ששמעת אי פעם.” לאחרונה הוא העביר את מאמצי הפיתוח שלו לבנייה מחדש של תהליך התשלומים והאינטגרציות של CodePen עם Stripe ו- Braintree.

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

הצוות המרוחק של CodePen מתמודד עם ניהול פרויקטים בתשוקה

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

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

תמונה קבוצתית של צוות CodePen

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

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me