Apa yang saya pelajari mengenai perkembangan front-end dari umur 12 hingga 22 tahun

Gambar oleh Teddy Kelley pada Unsplash

Kadang-kadang, kawan-kawan saya bertanya kepada saya bagaimana saya mendapat pembangunan front-end. Saya akan mengatakan saya agak tersandung ke dalamnya; tetapi sebenarnya, saya tidak tahu. Jadi pada minggu lepas, saya membuat menyelam jauh ke sudut gelap Internet untuk menggali setiap projek front-end yang saya kerjakan sejak saya berusia 12 tahun.

Dan budak lelaki, adakah ia menyelam.

Jadi di sini mereka. Setiap keputusan yang amat dahsyat, setiap laman web yang memalukan, setiap kesilapan dan pengajaran belajar yang menjadikan saya pemaju front-end saya hari ini. Di sini mereka, dalam kemuliaan yang tidak diisi sepenuhnya.

(Sekiranya anda baru memulakan perkembangan di hadapan, saya telah memasukkan ilmu pengetahuan yang telah saya pelajari sepanjang jalan yang saya harap akan menjimatkan masa anda dalam perjalanan anda Jika anda tangan lama ... Saya harap cerita ini memberi anda ketawa atau dua )

12 tahun

Biarkan saya menetapkan tempat kejadian. Ia adalah tahun 2007. Steve Jobs baru sahaja memperkenalkan iPhone. Semua orang menggunakan MSN Messenger. Tiada siapa yang menyukai Windows Vista. Ini adalah perkara yang saya ingat, tetapi saya tidak ingat apabila saya memutuskan untuk membuat laman web.

Saya suka idea bahawa sesuatu yang diletakkan di web boleh dilihat oleh sesiapa sahaja di seluruh dunia, seperti sihir. Pastinya tidak begitu sukar. Bolehkah ia?

Laman web pertama saya - perjalanan seribu langkah ... bermula dengan permandangan dan widget flash?

Saya salah. Ia sukar. Saya tidak tahu apa yang saya lakukan.

Pada satu ketika, saya tidak dapat memikirkan cara menggunakan tag
, yang mewujudkan garis putus. Saya bingung kenapa pemecahan barisan biasa dalam kod tidak memberikan rehat yang sama pada halaman web. Saya cuba menggunakan tag

yang mencipta perenggan, tetapi saya tidak memahami konsep membungkusnya. Saya juga cuba membuat jadual untuk memulakan barisan baru.

Untuk membuat perkara yang lebih teruk, walaupun semua kerja keras itu, ia masih mengerikan (walaupun untuk tahun 2000-an). Saya masih ingat rakan sekelas saya yang mengasyikkan apabila saya berkongsi pautan dengan mereka melalui MSN Messenger. Sekali lagi, bolehkah saya menyalahkan mereka? Ia mempunyai setiap kekejaman Web 1.0: gif, marquees, latar belakang buruk-ubin, widget Flash ... anda namakannya. Saya tidak digalakkan. Jadi, saya belajar pelajaran pertama saya.

Projek pertama anda akan menjadi buruk. Halaman HTML pertama saya amat dahsyat. Fail CSS pertama saya adalah sangat tidak kemas Marie Kondo tidak akan menyentuhnya. Apl mudah alih pertama saya diabaikan. Apl Reaktan pertama saya terhempas setiap minit. Pembelajaran front-end adalah sukar kerana ia adalah persimpangan banyak idea dari reka bentuk dan sains komputer, dan ia baik-baik saja untuk tidak mendapatkannya buat kali pertama.
Saya berjanji akan lebih mudah. Dari masa ke masa, anda akan menyedari bahawa anda telah membina satu set kemahiran yang boleh dipindahmilik (contohnya HTML, akan membantu anda dengan kedua-dua bangunan komponen Reaktik dan susun atur aktiviti Android). Menyedari bahawa anda buruk pada sesuatu adalah langkah pertama untuk menjadi baik di hadapan.

Saya tahu ia adalah buruk, tetapi saya juga tahu saya boleh melakukan yang lebih baik. Oleh itu untuk Halloween, dengan bantuan Gimp, saya memanjakan tapak dengan lapisan baru labu dan tipografi Evanescent. Hei, ia juga mempunyai permainan pengembaraan yang asal di mana pemain menyelamatkan dunia fantasi dengan sihir

Semasa reka bentuk semula, saya juga belajar silap mata. Saya sedar tidak ada bersembunyi di dunia HTML dan CSS. Setiap teknik, setiap rahsia hanya satu sumber Lihat jauh. Tidak pun Apple boleh menyembunyikan rahsia laman produk mereka yang cantik, dan saya akan menghabiskan berjam-jam di laman web mereka untuk membongkar misteri mereka.

Jika orang lain boleh melakukannya, maka boleh jadi saya.

Di suatu tempat di sepanjang jalan, rakan sekelas saya berhenti membuat keseronokan saya.

Lihat sumbernya. Setiap kali anda melihat sesuatu yang sejuk di laman web, tanya diri anda jika anda boleh mengeluarkannya. Bolehkah anda melakukannya dengan hanya CSS? JavaScript? Jika tidak, klik kanan padanya> klik 'Periksa' (Chrome) atau Alat> Pembangun Web> Inspektor (Firefox) dan cuba untuk menterbalikkan-jurutera kod. Tandakan atau simpan senarai kesan sejuk yang anda ingin mencuba suatu hari nanti.

14 tahun

Sebelum Snapchat dan Instagram, kanak-kanak mempunyai blog. Semua kawan saya mempunyai satu. Ramai di antara mereka gembira untuk memperibadikan blog mereka dengan tema luar. Tetapi tiada siree, bukan saya. Oh tidak.

Saya mula dengan mengubah suai tema sedia ada untuk diri saya sendiri. Kemudian, saya akan membina tema sebagai hadiah untuk hari jadi kawan saya. Kanak-kanak dari kelas lain datang untuk bertanya kepada saya tentang tema. Saya menjadi lelaki blogskin.

Saya mendapat jahitan

Dan begitulah permulaan saya yang sebenar ke dalam HTML. Setiap tema adalah dokumen HTML satu halaman dengan CSS tertanam. Menggunakan tag palsu seperti <$ BlogItemTitle $>, saya dapat mengawal bagaimana dan di mana setiap elemen diletakkan. Tag pseudo akan digantikan oleh kandungan sebenar oleh pembekal perkhidmatan. Akhirnya, saya bebas daripada batasan editor WYSIWYG!

So long, tripod.com!

Saya ingat menghabiskan berjam-jam memindahkan elemen dengan CSS, mempelajari perbezaan antara paparan dan jenis kedudukan, margin dan paddings. Untuk satu tema tertentu, saya menggunakan jalur empat berwarna sebagai latar belakang statik di sebalik latar depan putih dengan corak telus. Setiap elemen perlu disejajarkan dengan sempurna, jadi corak mendedahkan diri apabila pengguna menatal:

Sebuah tapak menatal mendatar, jadi tegang!

Saya suka mengembangkan tema. Saya menyedari bahawa laman web bukan hanya 2D, tetapi memberi respons kepada orang dengan pemilih pseudo JavaScript dan CSS, seperti: hover dan: aktif. Mereka tumbuh dan menyusut, memudar masuk dan keluar.

Ia adalah permukaan yang hidup dan interaktif.

Apabila dilakukan dengan baik, interaksi ini menggembirakan orang dan saya suka menonton tindak balas rakan-rakan saya terhadap tema baru mereka. Saya mendorong diri saya untuk mencuba idea dan teknik baru untuk mengetahui apa yang dinikmati oleh orang.

D ​​Buat perkembangan untuk interaksi. Elemen depan yang baik dapat ditemui (memberikan petunjuk mengenai cara menggunakannya) dan memberi maklum balas (bertindak balas terhadap interaksi dengan cara yang bermaklumat). Contohnya, butang boleh menukar warna latar belakang pada hover dan meningkatkan kelegapan apabila diklik. Berikut adalah video dan buku yang baik mengenai subjek ini.

16 tahun

Pada bulan Julai 2013, saya mendaftarkan domain pertama saya dengan tuan rumah web yang betul Ia merasakan seperti ritus laluan, seperti saya akhirnya melakukan sesuatu yang nyata. Saya menyediakan portfolio saya dan sejak itu ia telah menjadi rumah kepada projek dan eksperimen saya. Ketika saya mengambil kemahiran baru, ia berkembang dan berkembang di samping saya.

Mereka membesar begitu cepat

Saya tidak boleh menegaskan betapa berguna mempunyai domain dan hos pelayan yang baik adalah untuk saya. Saya boleh bereksperimen dengan idea-idea front-end baru di web. Saya berlari pekerjaan cron yang menjadikan hidup saya lebih mudah. Setiap kali saya memerlukan ruang baru untuk kerja klien atau sekolah, saya boleh membuat subdomain baru.

Saya berasa seperti budak lelaki yang besar apabila saya menggunakan laman web pertama saya. Ia hampir merasakan seperti saya boleh melakukan perkara seperti ini untuk hidup. Itu agak keren, saya fikir sendiri.

Sediakan portfolio. Ini adalah projek yang hebat untuk belajar tentang cara menggunakan web. Pilihan mudah termasuk FTP, yang membolehkan anda menyalin fail anda dan menyampaikannya dari pelayan. Sebaik sahaja anda selesa dengan itu, saya akan mengesyorkan menyediakan Integrasi Berterusan dan Git. Saya telah mencuba beberapa pembekal sebelum berakhir dengan hosting yang dikongsi di Dreamhost (link affiliate) yang saya sangat gembira dengan. Tetapi ada kemungkinan alternatif percuma di luar sana.

18 tahun

Di Singapura, kanak-kanak berusia 18 tahun perlu menghabiskan masa dua tahun dalam tentera. Dengan beberapa nasib, saya telah diposkan ke unit Tentera mencari pemaju mudah alih. Mereka bertanya sama ada saya telah melakukan apa-apa seperti ini sebelum ini. Saya tidak, tapi bagaimana pula dengan perkembangan laman web? Jadi saya katakan ya.

Ternyata, saya salah. Tetapi, pada masa itu, saya tidak boleh membiarkan kekurangan pengalaman atau kelayakan menghalang saya.

Mari kita katakan ini dengan mengatakan walaupun saya telah bekerja dengan beberapa JavaScript sebelum ini, saya tidak mempunyai konsep pemrograman berorientasikan objek, yang amat penting dalam pembangunan aplikasi. Tugas pertama saya adalah untuk membangunkan aplikasi Android untuk API sedia ada yang membolehkan para askar memanggilnya sakit. Kedua saya adalah untuk mencipta permainan pendidikan.

Saya menghabiskan hari di Google dan StackOverflow, meminta beratus-ratus soalan yang paling asas seperti "Bagaimana saya membuat medan teks" atau "Bagaimana saya membuat butang melakukan perkara". Saya menghabiskan berminggu-minggu memukul kepala saya di papan kekunci di atas NullPointerExceptions. Dengan kulit gigi saya, saya berjaya menghasilkan sesuatu yang sepatutnya baik.

Walaupun aplikasi kelihatan menarik, kod di sebalik apa-apa tetapi itu. Terdapat garis dan garisan kod spaghetti, tidak ada corak seni bina yang jelas, dan logiknya lebih rapat daripada pagar pautan rantai. Tidak mustahil untuk diselenggara dan atas sebab itu, tiada aplikasi yang saya buat dapat dikemas kini secara aktif.

Ia akan menjadi beberapa tahun sehingga saya membaca tentang bagaimana untuk menulis kod bersebelahan, bersih. Tetapi apabila saya melakukannya, saya faham mengapa ia penting.

🧪 Tulis ujian. Ujian penulisan mungkin kebiasaan paling berkesan yang saya ambil untuk menulis kod yang lebih baik. Ingat bagaimana apabila anda belajar kod, anda menulis fungsi yang cuba lulus beberapa kes ujian? Ia seperti itu, tetapi sekarang anda juga menulis ujian! Menulis ujian yang baik untuk setiap ciri (ujian unit) membolehkan anda memastikan kod anda berfungsi walaupun anda menukar bahagian lain kod asas.
Mengasingkan tanggungjawab anda. Adakah anda mempunyai fungsi yang melakukan pelbagai perkara? Pecahkan mereka kepada pelbagai fungsi. Adakah anda mempunyai kelas dengan beberapa kaedah yang melaksanakan ciri-ciri yang berbeza? Pecahkan mereka ke dalam pelbagai kelas. Pemisahan tanggungjawab mungkin adalah yang paling penting dari Prinsip SOLID. Ia menjadikan kod anda dapat dibaca dan berskala. Kod Bersih: Buku Panduan Pemasaran Perisian Agile (pautan afiliasi) oleh Robert Martin adalah mesti dibaca untuk mana-mana pembangun front-end.

20 tahun

Pada bulan Jun 2016, saya menerbitkan aplikasi ke gedung Google Play. Ia membantu pelajar mempelajari fizik, yang merupakan subjek yang saya sayangi. Pada hari pertama, ia mempunyai 3 muat turun. Hari kedua, ia mempunyai 5. Pada hari ketiga, ia mempunyai 1,000 orang. Saya tidak menyedarinya pada mulanya, tetapi angka-angka terus berkembang. Pada bulan pertama, ia menerima 7,000 muat turun. Menjelang September, pemasangan bulanan telah meningkat kepada 15,000.

Bagaimana? Saya tidak pernah melakukan apa-apa pemasaran.

Ternyata, seseorang berkongsi apl pada Reddit (dua kali!) Dan orang sepertinya menyukainya. Ia mendapat beberapa ulasan laman web dan blog. Orang ramai mula membuat video mengenainya di YouTube. Pada ketika ini, saya begitu teruja saya semakin berdebar-debar. Saya fikir saya menangis pada satu ketika. Rasanya seperti semua kerja keras saya akhirnya membuahkan hasil.

Saya telah dibawa kembali apabila saya membina tema untuk blog rakan-rakan saya sebagai hadiah untuk ulang tahun mereka. Sebaliknya, sekarang, saya memberi hadiah kepada beribu-ribu orang di seluruh dunia. Saya tiba-tiba menyedari betapa saya suka mengembangkan antaramuka yang boleh membantu orang ramai. Bahawa orang suka.

Bahagian terbaik pengalaman ini ialah mengenali orang yang menggunakan aplikasi saya. Saya membalas setiap komen mengenai e-mel Reddit dan mengalu-alukan tentang soalan fizik yang mungkin ada orang. Kadang-kadang, saya mendapat mesej kecil yang indah, seperti ini:

Ini adalah e-mel kegemaran saya, dari aplikasi yang saya buat sebelum ini
Pilih projek yang anda sayangi. Anda telah membaca buku. Anda telah mengikuti kursus Codecademy. Anda telah menguasai dunia halus dan fungsi rekursif. Bagaimana sekarang? Berfikirlah dengan lebih baik tentang bidang-bidang yang anda seorang ahli saudara dalam. Adakah anda foodie? Seorang penembak burung? Seorang trivia tuan? Pikirkan tentang sesuatu yang akan anda gunakan. Fikirkan bagaimana anda boleh membantu orang di sekeliling anda atau lautan. Tatal melalui aplikasi pada telefon anda - bolehkah anda memperbaikinya?
Jika anda fikir anda telah menemui sesuatu, menyelam masuk. Jangan tunggu sehingga anda sudah bersedia, jangan tunggu kebenaran. Buang diri anda ke arah yang mendalam; menaiki tertinggi dan rendah dari pembangunan hadapan. Itulah bagaimana anda membuat sesuatu yang membuat perbezaan.

22 tahun

Saya terus meneroka idea dan teknik baru, mengerjakan projek yang saya rasakan bersemangat. Ada yang sangat mencabar, tetapi saya belajar untuk memanfaatkan apa yang saya tahu. Pembangunan hadapan adalah penuh dengan kemahiran yang boleh dipindah milik.

Reaksi adalah wahyu. Selepas bertahun-tahun memisahkan pandangan dari logik, ia adalah semangat udara segar untuk mencari rangka kerja yang mengintegrasikan HTML, data, dan logik dengan elegan. Ia seperti saya memotong pokok dengan pisau mentega sepanjang tahun ini, dan seseorang telah menyerahkan saya satu gergaji.

Android kini menjadi kegembiraan untuk bekerjasama. Banyak perkara kesakitan telah dijaga dan Kotlin senang menulis. Sesetengah minda terbaik di dunia sedang berusaha untuk membuat pembangunan depan mudah alih lebih baik, dengan React Native, Flutter, dan banyak lagi.

Ia adalah masa yang tepat untuk menjadi pemaju front-end.

Beberapa tahun lalu, saya membangunkan halaman pendaratan dengan tagline: Anda lebih berbakat daripada yang anda bayangkan. Saya ingin seseorang memberitahu saya bahawa ketika berusia 12 tahun, ketika saya akan berhenti selepas kegagalan pertama saya.

Seorang guru bertindak kemudian memberitahu saya bahawa bakat adalah apa-apa tetapi jumlah kerja keras. Dengan cara itu, saya sangat bernasib baik kerana peristiwa membawa saya memulakan perjalanan saya lebih awal. Saya bersyukur kerana orang yang saya jumpa di sepanjang jalan yang membimbing saya dan mempercayai saya, seorang remaja yang lemah, dengan perniagaan dan idea mereka. Ia bermula sebagai hobi kesepian selama bertahun-tahun, tetapi sekarang saya mempunyai kawan yang berkongsi nafsu saya.

Ia telah menjadi 10 tahun yang hebat, dan saya tidak boleh menunggu apa yang akan datang.

Cari komuniti anda. Tiada orang adalah sebuah pulau, dan tidak ada front-end dev adalah unsur div terapung terpencil. Sertai pertemuan perseorangan tempatan anda. Pergi ke persidangan. Ikut repositori git yang anda gunakan. Tulis kepada penerbitan. Dengar podcast. Slaid ke beberapa DM twitter. Cari orang yang akan memberitahu anda: Anda lebih berbakat daripada yang anda bayangkan.

Menyukai cerita ini? Saya suka untuk menghubungi!
Katakanlah di Twitter, LinkedIn atau periksa laman web saya.