Rekan Pendiri Alex Vazquez Membagikan Bagaimana Playground Pengembangan CodePen Membantu Tim Pengembang Frontend Membuat, Membagikan, dan Kode Debug

TL; DR: Ketika CodePen dimulai, ketiga teman di belakangnya mengira proyek sampingan mereka tidak akan bertahan lebih dari beberapa minggu. Sekarang, editor kode online menunjukkan preview langsung dari HTML, CSS, dan JavaScript untuk memberikan pengembang ruang responsif, bebas stres untuk bermain-main dengan teknologi baru, berbagi kreasi terbaru mereka, dan berkolaborasi dengan coders lain. Kami berbicara dengan Co-Founder Alex Vazquez tentang bagaimana semangat tim untuk desain, pengembangan, dan budaya startup telah berkembang menjadi platform layanan lengkap yang terus menambahkan fitur sebagai tanggapan terhadap umpan balik dari komunitas pengguna yang terlibat.


Tidak seorang pun bermaksud CodePen menjadi bisnis. Alex Vazquez, Tim Sabat, dan Chris Coyier bertemu suatu hari untuk mulai membuat situs web – atau seperti yang dikatakan Alex, untuk “melakukan apa yang dilakukan para kutu buku ketika mereka berkumpul.” Dia pikir proyek itu akan berlangsung selama seminggu, mungkin sebulan.

Ketiga teman tersebut adalah pengembang dan desainer pertama yang dipekerjakan di Wufoo, pembuat formulir HTML yang dijual ke SurveyMonkey pada 2011.

“SurveyMonkey adalah perusahaan yang hebat, tetapi kami juga tahu betapa kami senang bekerja di perusahaan kecil, betapa kami senang mengendalikan pengembangan hal-hal yang benar-benar kami pedulikan, dan bisa memilih cara Anda membangun perusahaan. ”

Chris Coyier, orang di belakang CSS-Tricks, ingin menciptakan cara yang ramah pengguna bagi pengembang frontend untuk memamerkan kode mereka. Lingkungan pengkodean langsung CodePen menampilkan editor kode dalam peramban tempat pengguna membuat proyek, yang disebut Pens. Dari sana, pengembang dapat berkolaborasi, mengkritik, dan menemukan inspirasi dari anggota lain.

Co-Founders awalnya menawarkan alat CodePen secara gratis tetapi perlahan-lahan berkembang menjadi model freemium saat ini. Fitur Pro meliputi pengujian lintas-browser, hosting aset, dan peningkatan kemampuan kolaboratif. Menurut Alex, tim CodePen menjaga keseimbangan yang kuat antara fitur berbayar dan gratis.

“CodePen cukup unik karena bukan hanya pengguna Pro yang membuat kita tetap bertahan,” katanya. “Ini komunitas secara keseluruhan. Pengguna kami membuat 99,9% konten di situs kami, dan itulah sebabnya orang-orang datang ke CodePen. Kami hanya berusaha menjadi penanggung jawab komunitas dan kontennya. ”

CodePen Menyediakan Semua Alat yang Anda Perlu Buat, Bagikan, dan Pelajari

Alex dengan gemar menyebut pencarian CodePen untuk bertemu dengan setiap pengguna membutuhkan “berkah dan kutukan yang aneh.” Dia kadang-kadang merasa cemburu pada seorang teman yang mata pencahariannya berkonsentrasi pada bagaimana artikel daring bergulir naik dan turun di Medium. Fleksibilitas, bagaimanapun, adalah pencapaian tanda tangan CodePen.

“Kami selalu melihat bagaimana orang menggunakan CodePen dan bagaimana kami dapat mendukungnya atau menjadikannya pengalaman yang lebih baik bagi mereka,” kata Alex. Dari kolaborasi hingga hosting aset, setiap fitur berbayar memiliki versi ringan dan gratis untuk seluruh komunitas.

“Kami telah menjaga keseimbangan ini dalam mengerjakan hal-hal yang akan disukai masyarakat tetapi, pada saat yang sama, menciptakan fitur Pro yang cukup untuk terus mengembangkan perusahaan,” katanya.

1. Bersihkan Antarmuka Pengeditan yang Dilengkapi dengan Opsi untuk HTML, CSS, dan JavaScript

Editor berbasis browser CodePen memberikan area yang dapat disesuaikan untuk kode dan pratinjau Anda. Pengodean sangat nyaman, mengingat penyorotan editor dan integrasi Emmet. Kami juga sangat menghargai tombol Tidy – cara sekali klik untuk membersihkan lekukan dan pemformatan Anda.

Grafik fitur editor CodePen

CodePen memberi pengembang frontend ruang bebas stres untuk menulis dan mempratinjau kode.

Saat Anda siap untuk berbagi Pena, editor memberikan kode sematan tempel dan tempel, tautan untuk dibagikan di media sosial atau melalui pesan teks, bersama dengan ekspor ke file zip.

Pengguna CodePen lain dapat menemukan pekerjaan Anda dan memilih untuk garpu kode atau hati untuk menunjukkan penghargaan. Anggota dapat mengikuti satu sama lain dan membuat Pena ke dalam koleksi untuk menemukan Pena yang berguna dengan lebih mudah.

2. Platform Blogging Sederhana Memungkinkan Anda Menulis Tentang Kode dan Membagikan Pena Anda

Alat pertama yang ditambahkan oleh Co-Founder ke antarmuka CodePen merampingkan bagaimana pengembang dapat membagikan Pena mereka.

“Kami melihat bahwa orang-orang menulis posting blog dan terus-menerus menempelkan Pena, jadi salah satu hal pertama yang kami lakukan adalah menciptakan cara yang sangat sederhana bagi Anda untuk menyematkan Pena di dalam situs web yang Anda jalankan,” kata Alex. “Pada saat yang sama, tidak semua orang ingin mengatur WordPress. Beberapa orang hanya ingin menulis artikel singkat dan memamerkan Pena. “

Secara alami, Co-Founders menambahkan antarmuka blogging strip-down, yang disertakan dengan setiap akun CodePen. Editor blog mendukung penurunan harga, penyorotan sintaksis, dan CSS khusus untuk setiap posting.

3. Mode Presentasi Memaksimalkan Ruang Layar untuk Menampilkan Pena dengan Proyektor

CodePen menyediakan beberapa mode tampilan berbeda untuk berbagai cara untuk membagikan Pena Anda: Mode Collab memungkinkan banyak orang mengetik dan mengedit kode pada saat yang bersamaan, sementara Mode Profesor memungkinkan peserta didik menyaksikan kerja pelatih mereka saat mereka mengetik.

Tampilan favorit Alex, Mode Presentasi diarahkan pada demonstrasi konferensi dan menunjukkan Pena pada proyektor.

Kolase dari Mode Presentasi CodePen

Peragaan pengkodean lebih mudah bagi para peserta untuk berinteraksi dengan melalui Mode Presentasi CodePen.

“Sering kali, Anda akan pergi ke sebuah konferensi dan untuk menjalankan contoh seseorang, Anda harus mengunduh repositori dan menginstal dependensi sebelum Anda dapat bermain dengannya,” kata Alex. “Ya, itu adalah langkah 10 menit yang dapat Anda lakukan karena Anda adalah pengembang yang luar biasa, tetapi bukankah akan luar biasa jika Anda bisa melakukannya hanya dalam beberapa detik?”

Pengguna dapat berbagi Pena dengan tautan singkat dan mengubah ukuran tampilan editor dan pratinjau. Dengan cerdas, CodePen menghapus semua fitur penting kecuali platform dengan cepat – bahkan menggunakan wifi standar yang mengerikan di konferensi.

Fitur Datang pada 2017 Rentang Dari Praktis ke Misterius

CodePen terus menambah dan meningkatkan fitur, sebagian besar didorong dari umpan balik pengguna. Meskipun anggota CodePen mendorong banyak peningkatan platform, Alex mengatakan tim lebih suka untuk menjaga perubahan besar dekat dengan rompi sampai mereka siap untuk ditayangkan.

“Kami tidak ingin memberi tahu orang-orang bahwa kami memiliki sesuatu sampai kami tahu kami dapat melepaskannya dan benar-benar mengesankan mereka,” katanya. “Kami tidak dalam mode sembunyi-sembunyi. Ini tentang tidak ingin mengecewakan komunitas kami. “

Alat yang Paling Diminta Akhirnya Dituju Setelah Bertahun-Tahun Berkembang

Satu pembaruan seperti itu datang akhir tahun ini adalah alasan Alex bergabung dengan CodePen – kecuali dia pikir tim akan dapat menawarkannya pada tahun pertama platform.

Empat tahun kemudian, CodePen mempersempit kemampuan untuk “membuat MiniPens di dalam Pens, untuk mengatakannya dengan cara yang benar-benar tidak jelas,” kata Alex. Fitur baru akan memungkinkan pengembang untuk menyelam lebih dalam ke Pena tanpa kompleksitas kontrol versi atau lingkungan lokal.

“Kami akan memungkinkan Anda untuk membuat solusi yang lebih rumit, tetapi kami berusaha untuk tetap setia pada jantung CodePen,” katanya, menyinggung antarmuka yang sederhana dan umpan balik instan. “Saya pikir jika Anda menggunakan CodePen, akan cukup jelas apa yang ingin Anda lakukan.”

Redone Payment Process Membuat Perusahaan Tetap Berjalan

Di ujung lain dari spektrum pembaruan, Alex dengan senang memberi kami “sendok paling tidak menarik yang pernah Anda dengar.” Dia baru-baru ini menggeser upaya pengembangannya untuk membangun kembali proses pembayaran CodePen dan integrasi dengan Stripe dan Braintree.

“Itu semua sangat membosankan, tapi itu semua sangat penting untuk membuat kita tetap berjalan sebagai sebuah perusahaan,” katanya. “Penikaman awal kita adalah sesuatu yang membuat kita berdiri dan berlari, dan kita sudah semacam menempel padanya selama bertahun-tahun.”

Tim Remote CodePen Menangani Manajemen Proyek Dengan Gairah

Alex, Tim, dan Chris perlahan-lahan mengembangkan tim CodePen menjadi delapan karyawan selama lima tahun terakhir, dengan semua orang bekerja dari jarak jauh.

“Kami bahkan tidak memiliki dua orang di negara bagian yang sama, apalagi kota yang sama,” kata Alex. Selama beberapa bulan terakhir, tim telah meresmikan komunikasi ke dalam sprint manajemen proyek. Diskusi informal masih terjadi di Slack, tetapi mereka melacak masalah dan waktu di GitLab.

Gambar grup tim CodePen

Sebagai tim jarak jauh, karyawan CodePen yakin untuk mengambil gambar selama satu-satunya saat mereka bertemu secara langsung.

“Kami sangat tidak efisien, hanya mengerjakan proyek dan lupa bahwa orang lain sudah mengerjakannya,” kata Alex. “Kami menyadari bahwa seluruh hal manajemen proyek yang kami hindari di setiap perusahaan besar yang pernah kami tangani memiliki tujuan. Kami tidak menjadi super formal, tetapi kami ingin menambahkan paling sedikit manajemen proyek yang membuat kami efisien. “

Tim CodePen merekam podcast yang memberikan tampilan yang menarik dan transparan dalam menjalankan bisnis perangkat lunak web kecil.

“Itu jelas karena kami telah membangun situs untuk pengembang untuk memamerkan pekerjaan mereka, tetapi semua orang di CodePen sangat menyukai teknologi dan komunitas positif,” kata Alex. “Pengembangan adalah bisnis kami, tetapi itu juga sesuatu yang telah kami nikmati untuk waktu yang lama.”

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