2つのWebサイトの物語

ゆっくりとした進歩と自己反映の重要性

UnsplashのTanya Nevidomaによる写真

「ねえ、あなたはコーディングを学んでいるので、あなたは私をウェブサイトにすることができると思いますか?」

この質問を聞いたことがあると思います。 Web開発者であるという領域が付属しています。初めて聞いたのは2016年3月でした。私の妻は、UI / UXの分野に参入しようとしているグラフィックデザイナーでした。彼女は自分のスキルをオンラインポートフォリオに表示したかったのです。

私はその時点で3か月間だけWeb開発を学習していました(新年の抱負として始めました)。 HTML、CSS、およびJavaScriptのコースをいくつか終えたので、自分の歯をジューシーなプロジェクトに掘り下げたいと思いました。

「ええ、あなたのためにそれをすることができます。時間がかからないはずです。」

4か月かかりました。

噛みすぎだとすぐに気づきました。しかし、私はナイーブでしたが、決心もしました。私はそのウェブサイトに私が持っていたすべてを入れました。仕事で働いていなかったときは、Stack Overflowをコーディングまたは検索していました。

ほとんどがStack Overflowを検索しています。

このプロジェクトが私にもたらしたストレスと緊張にもかかわらず、私が自分のブラウザで初めてライブで見たとき、私はこれほど誇りに思うことができなかったでしょう。

それが私の仕事でした。やった

私の妻は新しいWebサイトを使用して、ニューヨーク市でUXデザイナーとしての役割を見つけることができました。私たちは両方とも仕事を辞め、シアトルから引っ越しました。これが私の頭からのプログラミングへの飛び込みの始まりです。

二年後

「ねえ、私のウェブサイトを更新できると思いますか?」

2018年6月で、かなりの数の変更がありました。短い2年間で、私の妻はUXデザイナーから製品デザイナーになり、スタートアップの設計責任者になりました。彼女はその成長を反映する新しいアップデートを望んでいました。

「ええ、それができます。」

できるだけ自信を持って発音しようとしましたが、ためらいました。彼女のウェブサイトを初めて構築するのにどれくらい時間がかかったかを思い出しました。 2回目の試合で持久力と精神的スタミナがあるかどうかはわかりませんでした。疲れ果てていました。

古いコードを掘り始めたとき、私の自信はさらに揺らぎました。私は2年もそれを見ていませんでした。熟成していませんでしたUIはまだ機能し、見栄えは良かったが、フロントエンドは混乱していた。ダクトテープでつながれているように見えました。

「コードの匂い」という点では、ゴミ箱のように臭いがしました。

妻は更新だけを望んでいましたが、そのコードベースをナビゲートするのは面倒でした。最初から簡単に始められるようになりました。私は新たに始めるというアイデアに興奮していませんでした。しかし、ここ数年で妻は大きく成長しましたが、私もそうでした。私はこれを機会に、学んだことを振り返りました。

新鮮な開始

妻の新しいウェブサイトの構築を始めた最初の日、3か月もかからないことを知りました。その最初の日には、以前の1週間よりも多くのことができました。最終的には、更新を完了するのに約1週間の時間しかかかりませんでした。

ここでライブで見ることができます:irissprague.co

irissprague.co

どれだけ早く構築できたかに感銘を受けましたが、なぜこれほど高速になったのか正確にはわかりませんでした。確かに、私はもう2年間ベルトの下で過ごしましたが、この2年間で正確に何を学びましたか?

レバレッジツール

私が最初に気づいたのは、ツールを活用する能力です。 2年前、私はオープンソースツールについてほとんど知りませんでした。私の妻の最初のウェブサイトは、生のHTML、CSS、JavaScript、およびわずかなPHPを使用して構築されました。それ自体は悪くありませんが、ビューテンプレートの概念はありませんでした。

各HTMLファイルをゼロから作成しました。一貫性を維持するために、繰り返し要素をコピーしました。残念ながら、それは1つのページを変更すると複数のページを変更することを意味しました。

2回目の試みでは、HAMLテンプレートとFlexboxを使用して、コピーとデバッグの時間をすべて避けました。

ありがとうFlexbox

ビルドプロセスの自動化

最初のWebサイトの構築に時間がかかったもう1つの理由は、構築プロセスの概念がなかったためです。 3か月間、妻の最初のポートフォリオサイトを構築していましたが、すべて自分のマシンでローカルに実行していました。

大きな変更を加えるたびに、私のラップトップの変更を精査するように妻にせがむ必要がありました。それが十分に悪くなければ、変更を運用サーバーにプッシュするときが来たとき、どこから始めればいいのかわかりませんでした。

私はウェブサイトを機能させることに集中していたので、インターネットにどのように組み込むかさえ考えていませんでした。 DigitalOcean、Docker、またはHerokuについて聞いたことがありません。

当時知っていた唯一のホスティングサービスはGodaddyでした。 GodaddyはcPanelを使用して、サーバー自体にファイルをアップロードします。残念ながら、cPanelではファイルを一度に1つずつしかアップロードできませんでした。

何時間もかかりました。そして、アセットのいずれかを変更する必要があるときはいつでも、編集したファイルを手動で再アップロードする必要があります。

これらの間違いが私の記憶に焼き付けられたので、ビルドプロセスの改善に投資しました。 Docker Composeを使用してCI / CDワークフローを自動化しました。 1つのdocker-compose up -dコマンドで、サイト全体を運用環境に展開できました。

GitとDockerコマンドを一緒にバッチ処理する小さなbashスクリプトも作成しました。

私が行った変更は、1分以内に反映されます。 cPanelは過去のものです。

また、妻が自分の行った変更を確認できるように、DigitalOcean Dropletも使用しました。彼女は、DropletのIPアドレスにアクセスして、自分のマシンで編集内容を見ることができました。これ以上ローカルのみの開発はありません。

妻と私は、設計から開発までのパイプラインも改善しました。 2016年には、デザインは主にPhotoshopと口頭キューによって行われました。

「これを変更できますか?追加できますか?」

どちらもそれを楽しんでいませんでした。

今回は、妻と私はInvisionを使用してコラボレーションしました。彼女の設計変更をリアルタイムで確認し、数分で実装できました。

最高のパワーカップリング。

改善された問題解決

これは驚くことではありませんが、この2年間で、私はより良い、より速いプログラマーになりました。しかし、最も重要な改善は私の問題解決能力でした。

CSSでグリッドを作成する方法や、JavaScriptで画像カルーセルを作成する方法を調べる必要はありませんでした。これらの問題を自分で解決するために必要なツールと基盤がありました。フローでより多くの時間を費やすことができ、出会ったすべての問題をグーグルで過ごす時間を減らすことができました。

また、より少ないリソースでより多くのことを行う方法も知っていました。私の最初のサイトには、最も単純なアニメーションを実行するための何百行ものJavaScriptがありました。新しいサイトには70行しかありません。 CSSトランジションとキーフレームが残りを処理します。

JavaScriptよりもCSSを優先すると、DOMペインティングが減り、各ページのパフォーマンスが向上します。ただし、私が行った最適化はそれだけではありませんでした。

最適化

2年前は、パフォーマンスの高いウェブサイトを作成する方法がわかりませんでしたが、気にしませんでした。私はただいまいましいものが機能することを望んでいました。基礎を理解し、より高いレベルの抽象化で考えたので、より大きな問題の解決に集中できました。つまり、パフォーマンスとユーザーエクスペリエンス。

静的ファイルをコンパイルし、DigitalOcean CDNを介して提供し、ブラウザにキャッシュすることにより、更新されたサイトは高速でロードできます。

Pingdomのパフォーマンス評価

2016年には、その前の文は私にとっては意味不明なものに見えたでしょう。ああ、時代はどのように変わったか。

時間をかけて、どれだけ学んだかを理解してください

なぜ私はこれをすべて言っているのですか?ホーンを鳴らすには?たぶん少し。

本当の理由は、私は自己反省の重要性を強調したいです。妻のサイトを更新するのをためらいました。自分がどれほど成長したか気付いていなかったからです。日々の進捗状況を確認することは困難です。

知識はインチごとに蓄積されます。しかし、長い時間を振り返ることで、それらのインチは飛躍的になります。日本の文化では、この小さな日々の改善という考え方は「カイゼン」として知られています。

私にとっては、自分のキャリアの始めにいた場所を覚えておくことは重要です。進化を視覚化することで、高原に達したときにやる気が持続します。衰退と流れは避けられません。一度に1インチずつ前進することをコミットすることが、目標に向かって前進する方法です。

ですから、私の妻の最初のサイトは、マスターへの敬意と私のルーツを覚えて、私のウェブサイトのサブドメインとして生き続けます。 kaizen.sunli.coで確認できます。

習熟への遅い道の重要性を教えてくれたLaunch Schoolに特別な叫びをあげたい。それは私が追求し続ける目標です。

そして、妻のアイリス・スプラーグに、ただ驚くばかりだったという別の叫び声。

したがって、プログラミングを10か月、10年、またはそれ以上続けているかどうかにかかわらず、学んだことを振り返るには時間がかかります。時間が遅く感じるときのための燃料としてそれを使用してください。習熟への遅い道への投資は、結果を悪化させました。最初は徐々にですが、十分な時間があれば、ロケットのように高騰します。

この記事があなたの共感を呼んでいるなら、拍手leaveを残してくださいそして、あなた自身のキャリアの中でどのように成長したか教えてください。私はそれについて聞きたいです!

いつものように、幸せなコーディング!