12歳から22歳までのフロントエンド開発について学んだこと

Unsplashのテディ・ケリーによる写真

時々、私の友人が私にどのようにフロントエンド開発に着手したかを尋ねます。私はちょっとつまずいたと言うでしょう。しかし真実は、私は本当に知りませんでした。それで先週、私はインターネットの暗いコーナーを深く掘り下げて、12歳のときから取り組んできたすべてのフロントエンドプロジェクトを掘り下げました。

そして、少年、それは飛び込みでした。

ここにあります。すべての恐ろしい決断、すべての恥ずかしいウェブサイト、あらゆる間違いや教訓が、私を今日のフロントエンド開発者にした。ここに、彼らは完全なフィルターされていない栄光にあります。

(もしあなたがフロントエンド開発を始めたばかりなら、私はあなたがあなたの旅であなたの時間を節約することを望んでいる途中で私が学んだ知識のナゲットを含めました。あなたに笑いを与えます

12歳

シーンを設定しましょう。それは2007年でした。スティーブ・ジョブズはiPhoneを紹介したばかりです。全員がMSN Messengerを使用していました。誰もWindows Vistaが好きではありませんでした。これらは覚えていましたが、いつウェブサイトを作成することにしたのか正確には覚えていません。

私は、魔法のように、ウェブ上に置かれたものが世界中の誰でも見ることができるというアイデアが好きでした。確かにそんなに難しいことではありません。できますか?

私の最初のウェブサイト—千歩の旅…は、マーキーとフラッシュウィジェットから始まりますか?

私は間違っていた。大変でした。何をしているのか分かりませんでした。

ある時点で、改行を作成する
タグの使用方法さえ理解できませんでした。コードの通常の改行がウェブページに同様の改行をレンダリングしない理由を私は混乱させました。段落を作成する

タグを使用しようとしましたが、折り返しの概念がわかりませんでした。新しい行を開始するためだけにテーブルを設定することさえ試みました。

さらに悪いことに、そのような大変な作業にもかかわらず、それは恐ろしいものでした(2000年代であっても)。 MSN Messengerでリンクを共有したときに、クラスメートがそれをからかっていたことを覚えています。それから再び、私はそれらを責めることができますか? Web 1.0のあらゆる残虐行為がありました:gif、マーキー、タイルの粗末な背景、Flashウィジェットなど。がっかりしました。それで、最初のレッスンを学びました。

最初のプロジェクトは悪いでしょう。私の最初のHTMLページはひどいものでした。私の最初のCSSファイルは非常に面倒で、近藤マリーはそれに触れませんでした。最初のモバイルアプリは無視されました。私の最初のReactアプリは毎分クラッシュしました。フロントエンドの学習は、デザインとコンピューターサイエンスからの多くのアイデアの共通部分であるため困難であり、最初に学ばなくても大丈夫です。
もっと簡単になると約束します。時間が経つにつれて、一連の移転可能なスキルを構築していることに気付くでしょう(たとえば、HTMLは、ReactコンポーネントとAndroidアクティビティレイアウトの両方の作成に役立ちます)。あなたが何かに不得意であることを認識することは、フロントエンドで上手になるための最初のステップです。

私はそれが悪いことを知っていましたが、私はもっと良くできることも知っていました。そこで、ハロウィーンの場合、Gimpの助けを借りて、新鮮なカボチャのコートとエヴァネッセントタイポグラフィでサイトを盛り上げました。ちょっと、それはプレイヤーが魔法でファンタジーの世界を救ったオリジナルのアドベンチャーゲームさえ持っていました

再設計中に、きちんとしたトリックも学びました。 HTMLとCSSの世界には隠れていないことに気付きました。すべてのテクニック、すべての秘密は、1つのビューソースから離れていました。 Appleでさえ彼らの美しい製品ページの秘密を隠すことはできなかったし、彼らのサイトで何時間も謎を解き明かした。

他の誰かがそれを行うことができれば、私もできます。

途中、クラスメートは私をからかうのをやめました。

sourceソースを表示します。ウェブサイトで何か素晴らしいものを見つけたら、それを再現できるかどうか自問してください。 CSSだけでできますか? JavaScript?そうでない場合は、右クリックして[検査](Chrome)または[ツール]> [Web開発]> [検査](Firefox)をクリックし、コードのリバースエンジニアリングを試みます。いつか試してみたいクールなエフェクトのリストをブックマークするか、保存してください。

14歳

SnapchatとInstagramの前、子供たちはブログを持っていました。私の友達全員が持っていました。彼らの多くは、既製のテーマでブログをパーソナライズして喜んでいた。しかし、私ではなく、シリー。あらいやだ。

私は自分で既存のテーマを変更することから始めました。次に、友人の誕生日のプレゼントとしてテーマを作成します。他のクラスの子供たちがテーマを尋ねてきました。私はブログスキンの男になりました。

私は本当にストライプになった

そして、私の本当のHTMLへの進出を始めました。各テーマは、CSSが埋め込まれた単一ページのHTMLドキュメントでした。 <$ BlogItemTitle $>のような擬似タグを使用して、各要素を配置する方法と場所を制御できました。擬似タグは、後でサービスプロバイダーによって実際のコンテンツに置き換えられます。最後に、WYSIWYGエディターの範囲から解放されました!

とても長い、tripod.com!

CSSを使用して要素を移動し、表示タイプと位置タイプ、マージン、パディングの違いを学習したことを覚えています。特定のテーマの1つとして、透明なパターンを持つ白い前景の背後にある静的な背景として4色のストライプを使用しました。すべての要素を完全に揃える必要があったため、ユーザーがスクロールするとパターンが現れました。

水平スクロールサイト、とてもエッジの効いた!

テーマの開発が大好きでした。 Webページは2Dだけでなく、JavaScriptやCSSの擬似セレクター(:hoverや:activeなど)を使用してユーザーに応答することに気付きました。彼らは成長して縮み、衰退しました。

それは生きたインタラクティブな表面でした。

うまくできたとき、これらの相互作用は人々を喜ばせ、私は友人の新しいテーマに対する反応を見るのが大好きでした。私は、人々が何を楽しんでいるかを知るために、新しいアイデアとテクニックを試すように自分自身を押した。

️インタラクション用に開発する。優れたフロントエンド要素は発見可能であり(使用方法の手がかりを提供)、フィードバックを提供します(有益な方法で相互作用に反応します)。たとえば、ボタンはホバー時に背景色を変更し、クリックされると不透明度を上げることがあります。このテーマに関する優れたビデオと本です。

16歳

2013年7月、私は最初のドメインを適切なWebホストに登録しましたpassageようやく通過する儀式のように感じました。私は自分のポートフォリオを設定し、それ以来、プロジェクトと実験の拠点になりました。新しいスキルを身につけたとき、それは私のそばで成長し進化しました。

彼らはとても早く成長します

ドメインと優れたサーバーホストを持っていることが、私にとってどれほど便利だったかを誇張することはできません。ウェブ上で新しいフロントエンドのアイデアを試すことができました。私はcronジョブを実行して、人生を楽にしました。クライアントや学校の仕事に新しいスペースが必要なときはいつでも、新しいサブドメインを作成できます。

最初のウェブサイトを展開したとき、私は大きな男の子のように感じました。このようなことを生計を立てることができるように感じました。それはかなりクールだと思いました。

portfolioポートフォリオを設定します。これは、Webへのデプロイについて学ぶのに最適なプロジェクトです。単純なオプションにはFTPが含まれます。FTPを使用すると、ファイルをサーバーにコピーしてサーバーから提供できます。それに満足したら、継続的インテグレーションとGitをセットアップすることをお勧めします。 Dreamhostでの共有ホスティング(アフィリエイトリンク)で終わる前に、いくつかのプロバイダーを試しましたが、非常に満足しています。しかし、間違いなく無料の選択肢があります。

18歳

シンガポールでは、18歳の人が軍隊で2年間過ごす必要があります。幸運にも、私はモバイル開発者を探している陸軍部隊にポストされました。彼らは私が以前にこのようなことをしたかどうか尋ねました。私はそうではありませんでしたが、ウェブサイトの開発とどのように違うのでしょうか?だから私はイエスと言った。

判明した、私は間違っていた。でも、それまでに、経験や資格がないからといって、私を止めることはできませんでした。

JavaScriptを使用したことがありますが、アプリ開発で特に重要なオブジェクト指向プログラミングの概念はありませんでした。私の最初のタスクは、兵士が病気になった場合に使用できる既存のAPI用のAndroidアプリを開発することでした。 2番目は、教育的なゲームを作成することでした。

GoogleとStackOverflowに何日も費やし、「テキストフィールドを作成する方法」や「ボタンを機能させる方法」など、何百もの最も基本的な質問をしました。 NullPointerExceptionsでキーボードで頭を叩くのに何週間も費やしました。歯の皮で、私はなんとか中途半端なものをかき混ぜることができました。

アプリは魅力的に見えましたが、その背後にあるコードはそれ以外のものでした。スパゲッティコードの行と行があり、明確なアーキテクチャパターンはなく、ロジックはチェーンリンクフェンスよりも密に結合されていました。維持することは不可能であり、そのため、作成したアプリはどれも積極的に更新できませんでした。

スケーラブルでクリーンなフロントエンドコードの記述方法を読むまでに数年かかります。しかし、私がそうしたとき、なぜそれが重要なのか理解しました。

testsテストを書きます。テストを書くことは、おそらくより良いコードを書くために選んだ最も効果的な習慣です。コーディングの学習中に、いくつかのテストケースをパスしようとする関数を作成したことを覚えていますか?それはそのようなものですが、今はあなたもテストを書いている人です!各機能に適したテスト(ユニットテスト)を作成すると、コードベースの他の部分を変更する場合でもコードが機能することを確認できます。
✂責任を分離してください。複数のことを行う機能がありますか?それらを複数の機能に分割します。異なる機能を実装するメソッドのいくつかのチャンクを持つクラスがありますか?それらを複数のクラスに分割します。責任の分離は、おそらく最も重要な原則の中で最も重要です。コードを読みやすくスケーラブルにします。クリーンコード:ロバートマーティンによるアジャイルソフトウェアクラフツマンシップハンドブック(アフィリエイトリンク)は、すべてのフロントエンド開発者にとって必読です。

20歳

2016年6月に、Google Playストアにアプリを公開しました。学生が物理学について学ぶのに役立ちます。物理学は私がずっと愛していた科目でした。初日、3回のダウンロードがありました。 2日目は5でした。3日目は1,000でした。最初は気がつきませんでしたが、数は増え続けました。最初の1か月で、7,000回のダウンロードを受け取りました。 9月までに、月間インストール数は15,000に増加しました。

どうやって?私はまったくマーケティングをしていませんでした。

結局、誰かがRedditでアプリを共有し(2回!)、人々はそれを気に入っているようでした。いくつかのレビューサイトやブログで取り上げられました。人々はYouTubeでそれについてのビデオを作り始めました。この時点で、私は非常に興奮して動を感じていました。ある時点で泣いたと思う。私の努力がすべて報われたように感じました。

友達の誕生日のプレゼントとして友人のブログのテーマを作成したとき、私は戻ってきました。代わりに、今、私は世界中の何千人もの人々に贈り物を与えていました。私は突然、人々を助けることができるインターフェースの開発がどれほど大好きかを実感しました。人々が愛したこと。

この経験の最大の部分は、私のアプリを使用している人々を知ることでした。私はRedditに関するすべてのコメントに応答し、人々が持つかもしれない物理的な質問についてのメールを歓迎しました。時々、私はこのような素敵な小さなメッセージを受け取りました:

これは、この前に作成したアプリからの私のお気に入りのメールです
you気になるプロジェクトを選択します。あなたは本を読みました。 Codecademyコースを修了しました。 Hello Worldと再帰関数をマスターしました。それで?あなたが相対的な専門家である分野をよく考えてください。あなたは食通ですか?バードウォッチャー?トリビアマスター?使用するものについて考えてください。周囲の人や海から離れた人をどのように助けることができるかを考えてください。スマートフォンのアプリをスクロールします-改善できますか?
あなたが何かを見つけたと思うなら、すぐに飛び込んでください。準備ができるまで待ってはいけません。許可を待ってはいけません。深い端に身を投げます。フロントエンド開発の高低に乗る。それが違いを生む何かを作る方法です。

22歳

私は新しいアイデアやテクニックを探求し続け、情熱を感じているプロジェクトに取り組みました。これらのいくつかは非常に困難でしたが、私は自分が知っていることを活用することを学びました。フロントエンド開発には、譲渡可能なスキルがいっぱいです。

反応は啓示でした。ビューとロジックを何年も分離した後、HTML、データ、ロジックをエレガントに統合するフレームワークを見つけるのは新鮮な空気でした。何年もバターナイフで木を切っていて、誰かが私にチェーンソーを渡したようでした。

Androidを使用するのは楽しいことです。多くの問題点が解決されており、Kotlinは書くのが楽しみです。 React Native、Flutterなどを使用して、モバイルフロントエンドの開発を改善するために、世界で最も優れた人材の一部が取り組んでいます。

フロントエンドのデベロッパーになるのに最適な時期です。

数年前、私はキャッチフレーズ付きのランディングページを開発しました。あなたは想像以上に才能があります。私が12歳のときに、最初の失敗からあきらめようとしていたことを誰かに知らせてほしいと思います。

後に演技の先生は、才能は勤勉の合計に他ならないと私に言いました。そのように、私は非常に幸運だったので、イベントが私を早めに旅を始めさせてくれました。道に沿って出会った人々に感謝します。彼らは私を導いてくれました。それは長年孤独な趣味として始まりましたが、今では私の情熱を共有する友人がいます。

それは素晴らしい10年であり、次のことを待ちきれません。

communityコミュニティを見つけます。人は島ではなく、フロントエンドdevは孤立した浮動div要素ではありません。地元のフロントエンドの交流会に参加してください。会議に行く。使用しているgitリポジトリに従ってください。出版物に書き込みます。ポッドキャストを聴きます。いくつかのTwitter DMにスライドします。あなたに言う人を見つけてください:あなたは想像以上に才能があります。

この物語が好きですか?連絡を取りたいです!
Twitter、LinkedInで挨拶するか、私のウェブサイトをチェックしてください。