Съоснователят Алекс Васкес споделя как детската площадка за развитие на CodePen помага на екипите на Frontend Dev да създават, споделят и отстраняват грешки

TL; DR: Когато CodePen стартира, тримата приятели зад него смятаха, че страничният им проект няма да продължи повече от няколко седмици. Сега онлайн редакторът на кодове показва визуализации на живо, HTML, CSS и JavaScript, за да даде на разработчиците отзивчиво пространство без стрес, за да се занимават с нови технологии, да споделят най-новите си творения и да си сътрудничат с други кодери. Разговаряхме със съоснователя Алекс Васкес за това как страстта на екипа към културите за дизайн, разработка и стартиране се е превърнала в платформа за пълно обслужване, която продължава да добавя функции в отговор на обратна връзка от ангажирана потребителска общност.


Никой не е предвиждал CodePen да бъде бизнес. Алекс Васкес, Тим Сабат и Крис Койер се срещнаха един ден, за да започнат да правят уебсайт – или както го казва Алекс, „да правят това, което правят нервите, когато се съберат“. Той смяташе, че проектът ще продължи може би седмица, може би месец.

Тримата приятели бяха първите разработчици и дизайнери, наети в Wufoo, създател на HTML формуляри, който беше продаден на SurveyMonkey през 2011 г..

„SurveyMonkey беше страхотна компания, но също така знаехме колко много ни харесва да работим в малка компания, колко много ни харесва да контролираме развитието на нещата, които наистина ни интересуват, и да можем да изберем начина, по който ще създадете компания. “

Крис Койер, човекът, който стои зад CSS-Tricks, искаше да създаде удобен за потребителите начин на разработчиците на frontend да покажат кода си. Живата среда за кодиране на CodePen включва редактор на кодове в браузъра, в който потребителите създават проекти, наречени Pens. Оттам разработчиците могат да си сътрудничат, да критикуват и да намират вдъхновение от други членове.

Съоснователите първоначално предлагаха инструменти CodePen безплатно, но бавно са се развили до сегашния модел на freemium. Профузионните функции включват тестване между браузъри, хостинг на активи и увеличени възможности за сътрудничество. Според Алекс екипът на CodePen поддържа силен баланс между платените и безплатните функции.

„CodePen е доста уникален по това, че не само Pro потребителите ни поддържат в плаване“, каза той. „Това е общността като цяло. Нашите потребители създават 99,9% от съдържанието на нашия сайт и затова хората идват в CodePen. Ние просто се опитваме да бъдем отговорни управители на общността и тяхното съдържание. “

CodePen предоставя всички инструменти, които трябва да създадете, споделите и научите

Алекс с благосклонност призовава стремежа на CodePen да отговори на нуждите на всеки потребител „странна благословия и проклятие.“ Понякога изпитва ревност към приятел, чийто поминък е съсредоточен върху това как една онлайн статия се превърта нагоре и надолу върху Medium. Универсалността обаче е подписът на CodePen.

„Винаги сме гледали как хората използват CodePen и как можем да го подкрепим или да го направим по-добро изживяване за тях“, каза Алекс. От сътрудничество до хостинг на активи, всяка платена функция има лека, безплатна версия за останалата част от общността.

„Запазихме баланса в работата върху нещата, които общността би обичала, но в същото време създадохме достатъчно професионални функции, за да продължим да развиваме компанията“, каза той.

1. Изчистете редактиращия интерфейс с опции за HTML, CSS и JavaScript

Редакторът, базиран на браузъра на CodePen, дава регулируеми области за вашия код и визуализация. Кодирането е много удобно, като се има предвид синтаксиса на редактора и интегрирането на Emmet. Също така сериозно оценяваме бутона Tidy – начин с едно кликване за почистване на вдлъбнатините и форматирането.

Графика на функциите на редактора на CodePen

CodePen предоставя на разработчиците на фронтенд пространство без стрес за запис и преглед на код.

Когато сте готови да споделите писалката си, редакторът предоставя код за вграждане, копиране и поставяне, връзки за споделяне в социални медии или чрез текстово съобщение, заедно с експортиране в zip файл.

Други потребители на CodePen могат да открият работата ви и да изберат да разклонят кода или да го видят, за да проявят признателност. Членовете могат да следват един друг и да курират писалки в колекции, за да намерят полезни химикалки по-лесно.

2. Простата блог платформа ви позволява да пишете за кода и да споделяте своите писалки

Първите инструменти, които Съоснователите добавиха към интерфейса на CodePen, оптимизираха как разработчиците да споделят своите писалки.

„Видяхме, че хората пишат публикации в блогове и непрекъснато вграждат писалки, така че едно от първите неща, които направихме, беше да създадем наистина прост начин да вградите писалка във всеки уебсайт, който управлявате“, каза Алекс. „В същото време не всеки иска да настрои WordPress. Някои хора просто искат да напишат бърза статия и да покажат писалка. “

Естествено, Съоснователите добавиха ограничен интерфейс за блогове, който е включен във всеки акаунт на CodePen. Редакторът на блогове поддържа Markdown, подчертаване на синтаксис и персонализиран CSS за отделни публикации.

3. Презентационен режим Увеличава пространството на екрана за показване на писалки с проектор

CodePen предоставя няколко различни режима на гледане за различните начини за споделяне на вашите писалки: Режимът на колаж позволява на няколко хора да въвеждат и редактират код по едно и също време, докато професорският режим дава възможност на учениците да наблюдават работата на своя треньор, докато пишат.

Любимият изглед на Алекс, презентационният режим е насочен към демонстрации на конференции и показване на писалки на проектор.

Колаж от режим на презентация на CodePen

Демонстрациите с кодиране са по-лесни за взаимодействие с участниците чрез презентационен режим на CodePen.

„Много пъти ще отидете на конференция и за да накарате нечий пример да работи, трябва да изтеглите хранилищата и да инсталирате зависимостите, преди да можете да играете с нея“, каза Алекс. “Да, това е 10-минутна стъпка, която можете да направите, защото сте невероятен разработчик, но не би ли било страхотно, ако просто можете да го направите за няколко секунди?”

Потребителите могат да споделят писалки със съкратена връзка и да оразмерят редактора и визуализацията. Интелигентно CodePen премахна всички освен основните функции, така че платформата се зарежда бързо – дори използвайки стандартните ужасни wifi на конференции.

Характеристики Очаквайте през 2017 г. Обхват от практически до мистериозен

CodePen продължава да добавя и подобрява функции, до голяма степен обусловени от отзивите на потребителите. Въпреки че членовете на CodePen водят много подобрения на платформата, Алекс каза, че екипът предпочита да поддържа големи промени близо до жилетката, докато не са готови да излязат на живо.

„Не искаме да казваме на хората, че имаме нещо, докато не разберем, че можем да го освободим и наистина да ги впечатлим“, каза той. „Не сме в стелт режим. Става въпрос за това, че не искаме да разочароваме нашата общност. “

Най-търсеният инструмент най-накрая е по пътя след години на развитие

Една такава актуализация, която идва по-късно тази година, е причината Алекс да се присъедини към CodePen – с изключение на това, че той смяташе, че екипът ще може да го предложи през първата година на платформата.

Четири години по-късно CodePen се стеснява във възможността да „създадете MiniPens вътре в Pens, за да го кажа по наистина неясен начин“, каза Алекс. Новата функция ще позволи на разработчиците да се гмуркат по-дълбоко в Pens без сложността на контрола на версиите или локалната среда.

„Ще ви позволим да създавате по-сложни решения, но се опитваме да запазим верността в сърцето на CodePen“, каза той, като се позовава на простия интерфейс и мигновената обратна връзка. „Мисля, че ако използвате CodePen, ще бъде доста очевидно какво бихте искали да можете да направите.“

Процесът на плащане с Redone поддържа работата на компанията

От другата страна на актуализационния спектър, Алекс с радост ни даде „най-малко вълнуващата лъжичка, която някога сте чували“. Наскоро той насочи усилията си за развитие към възстановяване на процеса на разплащане и интеграция на CodePen с Stripe и Braintree.

„Всичко е много скучно, но е много необходимо да ни поддържаме да работим като компания“, каза той. „Първоначалното ни пробождане беше просто нещо, което да ни накара да работим и ние с годините просто сме се придържали към него.“

CodePen отдалечен екип се справя с управление на проекти със страст

Алекс, Тим и Крис бавно нараснаха екипа на CodePen до осем служители през последните пет години, като всички работеха дистанционно.

“Ние дори нямаме двама души в една и съща държава, още по-малко един и същи град”, каза Алекс. През последните няколко месеца екипът формализира комуникациите в спринтове за управление на проекти. Неформалните дискусии все още се случват на Slack, но те проследяват проблеми и време в GitLab.

Групова снимка на екипа на CodePen

Като отдалечен екип служителите на CodePen бяха сигурни, че щракнаха снимка по време на единствения път, когато се срещнаха лично.

„Ние бяхме невероятно неефективни, просто взехме проекти и забравихме, че някой друг вече работи по нея“, каза Алекс. „Разбрахме, че цялото това управление на проекти, което бяхме избягвали във всяка голяма компания, за която някога сме работили, имаше някаква цел. Ние не сме супер официални, но искаме да добавим най-малкото управление на проекти, което ни прави ефективни. “

Екипът на CodePen записва подкаст, който придава увлекателен и прозрачен поглед върху управлението на малък бизнес в уеб софтуера.

„Това е очевидно, защото създадохме сайт за разработчици, за да покажат работата си, но всички в CodePen наистина обичат технологията и позитивната общност“, каза Алекс. „Развитието е наш бизнес, но това е и нещо, от което се радваме отдавна.“

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