Suosnivač Alex Vazquez dijeli kako CodePen razvojno igralište pomaže Frontend Dev timovima u kreiranju, dijeljenju i uklanjanju pogrešaka kod

TL; DR: Kada je započeo CodePen, trojica prijatelja iza njega mislila su da njihov sporedni projekt neće trajati više od nekoliko tjedana. Sada internetski uređivač koda prikazuje pretpregled uživo HTML-a, CSS-a i JavaScript-a kako bi programerima pružio brzi prostor bez stresova da se isprepliću s novim tehnologijama, dijele najnovije kreacije i surađuju s drugim koderima. Razgovarali smo sa suosnivačem Aleksom Vazquezom o tome kako se strast tima prema kulturama za dizajn, razvoj i pokretanje razvoja pretvorila u platformu za cjelovite usluge koja i dalje dodaje značajke kao odgovor na povratne informacije angažirane zajednice korisnika.


Nitko nije namijenio CodePenu da bude posao. Alex Vazquez, Tim Sabat i Chris Coyier sastali su se jednog dana kako bi započeli s izradom web stranice – ili kako Alex to kaže, “raditi ono što rade dok se zajedno okupljaju.” Mislio je da će projekt trajati možda tjedan dana, možda i mjesec dana.

Trojica prijatelja bili su prvi programeri i dizajneri angažirani u Wufoo-u, graditelju HTML obrasca koji je prodat SurveyMonkey-u 2011. godine.

„SurveyMonkey je bila sjajna tvrtka, ali isto tako smo znali koliko nam se sviđa rad u maloj tvrtki, koliko nam se sviđa da imamo kontrolu nad razvojem stvari do kojih nam je zaista stalo i da možemo odabrati način na koji ćete graditi tvrtku. ”

Chris Coyier, čovjek koji stoji iza CSS-trikova, želio je stvoriti prilagođen način da programeri frontenda pokažu svoj kôd. Kod okruženja kodiranja uživo CodePen sadrži uređivač koda u pregledniku u kojem korisnici stvaraju projekte, nazvane Olovke. Od tamo programeri mogu surađivati, kritizirati i pronaći inspiraciju od drugih članova.

Suosnivači su izvorno nudili CodePen alate besplatno, ali polako su se razvili do trenutnog freemium modela. Pro značajke uključuju testiranje putem pretraživača, hosting hostinga i povećane mogućnosti suradnje. Prema Alexu, CodePen tim drži jaku ravnotežu između plaćenih i besplatnih značajki.

“CodePen je prilično jedinstven po tome što nas nisu samo korisnici Pro koji nas drže u pokretu”, rekao je. “To je zajednica u cjelini. Naši korisnici stvaraju 99,9% sadržaja na našoj web lokaciji i zato ljudi dolaze u CodePen. Mi samo pokušavamo biti odgovorni upravitelji zajednice i njihov sadržaj. “

CodePen nudi sve alate koji su vam potrebni za stvaranje, dijeljenje i učenje

Alex s ljubavlju zove potragu CodePena da zadovolji potrebe svakog korisnika “neobičan blagoslov i prokletstvo.” Povremeno osjeća ljubomoru na prijatelja čiji se životni put usredotočuje na način na koji se internetski članak pomiče po Medijumu. Svestranost je, međutim, potpis potpisa CodePena.

“Uvijek smo gledali kako ljudi koriste CodePen i kako to možemo podržati ili im pružiti bolji doživljaj”, rekao je Alex. Od suradnje do hostinga, svaka plaćena značajka ima laganu, besplatnu verziju za ostatak zajednice.

“Održali smo ravnotežu radeći na stvarima koje bi zajednica voljela, ali istovremeno, stvarajući upravo dovoljno Pro karakteristika da nastavimo s rastom tvrtke”, rekao je.

1. Čisto sučelje za uređivanje pakirano s opcijama za HTML, CSS i JavaScript

Uređivač preglednika CodePen daje podesiva područja za vaš kôd i pregled. Kodiranje je vrlo ugodno s obzirom na naglašavanje sintakse urednika i integraciju Emmeta. Također ozbiljno cijenimo gumb Tidy – način da jednim klikom očistite udubine i oblikovanje.

Grafika značajki uređivača CodePen

CodePen pruža programerima frontenda da bez stresa daju prostor za pisanje i pregled koda.

Kada ste spremni podijeliti olovku, uređivač daje ugrađeni kod za kopiranje i lijepljenje, veze za dijeljenje na društvenim mrežama ili putem tekstualne poruke, zajedno s izvozom u zip datoteku.

Ostali korisnici CodePen-a mogu otkriti vaš posao i izabrati da ga klope ili ga usreće kako bi pokazali svoju zahvalnost. Članovi mogu slijediti jedni druge i izrađivati ​​olovke u kolekcijama kako bi lakše pronašli korisne olovke.

2. Jednostavna platforma za pisanje blogova omogućava vam pisanje o kodu i dijeljenje olovki

Prvi alati koje su suosnivači dodali CodePen sučelju pojednostavili su kako programeri mogu dijeliti svoje olovke.

“Vidjeli smo da ljudi pišu postove na blogovima i stalno ugrađuju olovke, tako da je jedna od prvih stvari koju smo napravili bio stvoriti zaista jednostavan način da ugradite olovku u bilo koju web stranicu koju pokrenete”, rekao je Alex. “U isto vrijeme, ne žele svi postaviti WordPress. Neki samo žele napisati kratak članak i pokazati pero. “

Naravno, suosnivači su dodali uklopljeno sučelje za pisanje blogova koje je uključeno u svaki CodePen račun. Uređivač bloga podržava Markdown, isticanje sintakse i prilagođeni CSS za pojedinačne postove.

3. Način prezentacije maksimalno povećava prostor na zaslonu za olovke s projektorom

CodePen pruža nekoliko različitih načina pregledavanja na različite načine dijeljenja olovaka: način rada za kolabiranje omogućuje istodobno upisivanje i uređivanje koda više ljudi, dok način rada profesora omogućuje učenicima da gledaju kako trener trenira dok upisuju.

Aleksin omiljeni prikaz, Način prezentacije usmjeren je prema demonstracijama na konferencijama i prikazivanju olovaka na projektoru.

Kolaž načina prezentacije CodePen

Demonstracije kodiranja sudionicima je lakše komunicirati putem CodePen-ovog načina prezentacije.

„Puno puta ćete ići na konferenciju i da bi netko pokrenuo primjer, morate preuzeti spremišta i instalirati ovisnosti prije nego što se možete igrati s njim“, rekao je Alex. “Da, to je korak od 10 minuta koji možete učiniti jer ste nevjerojatan programer, ali zar ne bi bilo sjajno kada biste to mogli učiniti za nekoliko sekundi?”

Korisnici mogu dijeliti olovke skraćenom vezom i mijenjati veličinu izgleda uređivača i pregleda. SmartPen je pametno uklonio sve osim bitnih značajki pa se platforma brzo učitava – čak i koristeći standardni užasni wifi na konferencijama.

Značajke koje dolaze u 2017. kreću se od praktičnih do misterioznih

CodePen nastavlja dodavati i poboljšavati značajke, velikim dijelom potaknute povratnim informacijama korisnika. Iako članovi CodePen-a voze mnoga poboljšanja na platformi, Alex je rekao kako tim radije drži velike promjene blizu prsluka dok ne budu spremni ići uživo.

“Ne želimo ljudima govoriti da nešto imamo dok ne saznamo da možemo to objaviti i zaista impresionirati”, rekao je. “Nismo u prikrivenom načinu. Radi se o tome da ne želimo razočarati našu zajednicu. “

Alat s najviše traženja napokon je na putu nakon godina razvoja

Jedno od takvih ažuriranja koje će stići kasnije ove godine je razlog zašto se Alex pridružio CodePen-u – osim što je mislio da će ga tim moći ponuditi u prvoj godini platforme.

Četiri godine kasnije, CodePen se sužava na mogućnost “stvaranja MiniPensa unutar olovke, kako bi to izgovorio na zaista nejasan način”, rekao je Alex. Nova značajka omogućit će programerima da dublje ulaze u olovke bez složenosti kontrole verzija ili lokalnog okruženja.

“Dopustit ćemo vam da stvorite složenija rješenja, ali pokušavamo ostati vjerni srcu CodePen-a”, rekao je, aludirajući na jednostavno sučelje i trenutne povratne informacije. “Mislim da ako koristite CodePen, bit će prilično očito što biste željeli moći raditi.”

Postupak plaćanja Redonea održava tvrtku

Na drugom kraju spektra ažuriranja, Alex nam je rado dao “najmanje uzbudljivu brošuru koju ste ikad čuli.” Nedavno je svoje razvojne napore preusmjerio na obnovu procesa plaćanja i integracije CodePen-a sa kompanijom Stripe i Braintree.

“Sve je to vrlo dosadno, ali sve je neophodno da bi se održalo kao tvrtka”, rekao je. “Naš prvobitni ubod u njega bio je samo nešto što će nas podići i trčati, a mi smo godinama tek bili prikovani za to.”

CodePen daljinski tim bavi se upravljanjem projektima sa strašću

Alex, Tim i Chris polako su povećali tim CodePen-a na osam zaposlenika u posljednjih pet godina, a svi rade na daljinu.

“Mi čak nemamo dvoje ljudi u istoj državi, još manje u istom gradu”, rekao je Alex. U proteklih nekoliko mjeseci tim je formalizirao komunikaciju u sprintove upravljanja projektima. Neformalne rasprave i dalje se održavaju na Slacku, ali one prate probleme i vrijeme u GitLabu.

Grupna slika ekipe CodePen

Kao udaljeni tim, zaposlenici CodePen bili su sigurni da će slikati samo tijekom osobnog susreta.

“Bili smo nevjerojatno neučinkoviti, samo smo preuzeli projekte i zaboravili da netko drugi već radi na tome”, rekao je Alex. „Shvatili smo da je cijela stvar upravljanja projektom, koju smo izbjegavali u svakoj velikoj kompaniji za koju smo ikada radili, imala svrhu. Nismo super formalni, ali želimo dodati najmanju količinu upravljanja projektima koja nas čini učinkovitima. “

CodePen tim bilježi podcast koji pruža fascinantan i transparentan izgled vođenju malog posla s web softverom.

“To je očigledno zato što smo napravili web lokaciju za programere da pokažu svoj posao, ali svi u CodePen-u zaista vole tehnologiju i pozitivnu zajednicu”, rekao je Alex. “Razvoj je naš posao, ali to je i nešto u čemu već dugo uživamo.”

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