我が神よ！かつて私は 21 個のネストされた callbacks_html/css_WEB-ITnose を書きました

約 21 か月前、まだコールバックが何なのかさえ分からないうちに、私は最初の Web ページを作成しました。これら 21 個のネストされたコールバックに敬意を表して、このページを見直す時期が来たと思いました。

当時の私には、文系の授業や家族旅行の際にノートに落書きをするという、ちょっと古いかもしれない習慣がありました。夏の旅行中に、とてもクールだと思った三角形のパターンのセットを作成しました。それで、電子版にすることはその夏に取り組む価値のあることだと思いました。また、このセットで Tumblr の画像をとてもクールに見せたいとも思いました。

私はコンピューターを専攻している友人を探し始め、何か指導してもらえないかと尋ねました。私が受け取った返信の多くは「Google で調べてください」と要約できますが、そのサブテキストは次のとおりです。「Google で調べても、何をすればよいかわからないなら、あなたは愚か者です。

「ページに三角形を作成すると思います...しかし、Google は良い答えをくれないようです。」

「いいえ、キーワードとして「CSS 三角形」を使用する必要があります。わかりますか? "

「申し訳ありませんが、CSS は三角形と何の関係があるのですか?」

通常、会話はそこで終わります。 HTML を装飾します。 "

(これらのやり取りから、私は次の結論に達しました。プログラマは、誰が最も多くのことを「シンプル」と言えるか常に競い合っています)

この会話の後、私はこう感じました。私が本当に最高のクズだったように。しかしその後、div (これはどういう意味ですか?) と数行の CSS を使用して三角形を作成する方法を発見しました。また、クールな色の変化効果を備えた Web サイトもいくつかあり、それをコピーして三角形のパターンに作成することができました。

私 (プログラミング初心者) がどのようにしてこれを組み立てたのか、興味があるはずです。

さて、これが私の HTML の概要です:

<div id="row1">  <div class="btri"></div>  <div class="tri"></div>  <div class="tri"></div>  <div class="tri"></div>  <div class="emp"></div>  <div class="tri"></div>  <div class="tri"></div></div><div id="row2">  <div class="tri"></div>  <div class="tri"></div>  <div class="tri"></div>  <div class="tri"></div>  <div class="tri"></div>   ...

悲しいことに、以下に同様の内容が 165 行あり、付随する JavaScript コードも重複していることを報告しなければなりません。は平行四辺形です。

後で、jQuery と呼ばれるものがあり、その「API」で「animate」と呼ばれるものを使用して、三角形のさまざまなプロパティを徐々に変更できることを知りました。 $('#something').animate({ ‘opacity’: ‘0’ }) を 1 回呼び出すと、三角形が消えることがわかりました。私の頭の中では、20 行の三角形を 1 つずつ消したい場合、このコードを 20 回記述する必要がありますが、これは論理的です。

内容をコピーして JavaScript ファイルの開始位置に貼り付けることで、jQuery を「インポート」しました。他のページでは別のファイルで記述されているのを見ましたが、意味があるかどうかに関係なく、すべての JavaScript を 1 つのファイルに入れることにしました。

冗談を言うなら、私は最も最適なプログラミング方法、つまり最も難しいスタイルを選択したと言えます。

$(".disappear").click(function(){  $("#row20").animate({ "opacity": "0" },    100,    function(){$("#row19").animate({ "opacity": "0" },      100,      function(){$("#row18").animate({ "opacity": "0" },        100,        function(){$("#row17").animate({ "opacity": "0" },          100,          function(){$("#row16").animate({ "opacity": "0" },            100,            function(){$("#row15").animate({ "opacity": "0" },              100,              function(){$("#row14").animate({ "opacity": "0" },                100,                function(){$("#row13").animate({ "opacity": "0" },                  100,                  function(){$("#row12").animate({ "opacity": "0" },                    100,                    function(){$("#row11").animate({ "opacity": "0" },                      100,                      function(){$("#row10").animate({ "opacity": "0" },                        100,                        function(){$("#row9").animate({ "opacity": "0" },                          100,                          function(){$("#row8").animate({ "opacity": "0" },                            100,                            function(){$("#row7").animate({ "opacity": "0" },                              100,                              function(){$("#row6").animate({ "opacity": "0" },                                100,                                function(){$("#row5").animate({ "opacity": "0" },                                  100,                                  function(){$("#row4").animate({ "opacity": "0" },                                    100,                                    function(){$("#row3").animate({ "opacity": "0" },                                      100,                                      function(){$("#row2").animate({ "opacity": "0" },                                        100,                                        function(){$("#row1").animate({ "opacity": "0" },                                          100)})})})})})})})})})})})})})})})})}

完全なソース コードと最終製品はここでご覧いただけます。

(各コールバック メソッドのインデントを揃えるという手間もかかりましたが、これは Windows メモ帳では簡単な作業ではありません)

上記の JavaScript の最後は壮観なセットであることに注意してください) })})})})})})})})})})})})})})})})})})}) 三角形が意図したとおりに消えたり、再び現れたりするのを見るのはとてもうれしかったです。コード自体は、ASCII の壮大な滝、または高度なスペイン語の教科書に登場するインカの灌漑システムのようなものです。コードは有効であり、Google ではコードが完全に間違っているとか、私のコードを見たプログラマーが私と私の子孫をインターネットから永久に追放するなどと言っている人は見かけません。

本物のソフトウェア エンジニアが私のトライアングル コードを見に来るまでに、私は SICP (コンピューター プログラムの構築と解釈) の資料を十分に見ていたので、私のコードが恐ろしく恐ろしいものであることがわかりました。 「でも、初心者ってこういう失敗するんですよね？」と恥ずかしそうに聞いてみた。

「いいえ、プログラマーはそんなことはしません。彼は皮肉のつもりで言ったわけではありません。」私はこの話題を分子細胞生物学に持ち込みたかったのです。しかし彼はさらに、「プログラマーはそんなコードを書くはずがない。彼らには忍耐力がないからだ。

彼の 2 番目の段落が真実であるかどうかに関係なく、私はこの全体に対して否定的な意見を持っている」気分が良くなりました。

とにかく、私は後で恥をかいて自分の三角を埋めました。月日が経つにつれて、それらはやがて無知の旅の始まりとなります。 「ねえ、CoffeeScript コードの空白問題のデバッグにここ 2 時間を費やしてきましたね? 21 個のネストされたコールバックと 200 行の同じ HTML を書くのに 1 日かかったのを覚えています。これはよくある話です。」 . 自虐的で面白い効果。

Triangle プロジェクト以来、私が書いたコードの各行は、「グーグル検索」、コードのデバッグ、およびさまざまなプログラミングのトピックを上達させただけであることに気づきました。一見愚かに見えるあらゆるプロジェクトを通して。

先週、私は三角形を簡単に書き直すことに時間を費やしました。ここで見ることができますが、当時は私が理解できなかった応答性と動的に生成されるエフェクトを誇っています (もちろん、古いバージョンの明白な利点を犠牲にすることしかできませんでした)。 div を使用して三角形を生成し、jQuery を使用してアニメーション効果を作成するという、元のデザインの本質を維持しました。

今、私はバークレーの木々に囲まれた安全な壁を出て、現実の世界に入ろうとしています（そしてできれば、暗号を使った過去の犯罪歴も解消したいと思っています）。私の三角形の角の 1 ～ 3 つを遺産として残します。

プログラミングは難しいです。 「Google it」で隣の人よりも優れていないからといって、決してイライラしないでください。ハッカソンを名乗る偽の専門家にだまされて、次の猫の Weibo や公衆トイレのレビュー サイトを作成する機会を放棄しないようにしてください。最も愚かなアイデア (ポリゴンが消えたり再び現れたりするアニメーションを試みるなど) であっても、プログラマーとして向上し続けるのに役立ちます。プログラミングを学ぶということは、主に学び方を学ぶことであり、学ぶための最良の方法は実際にやってみることです。

結局のところ、有能なプログラマーになることは、ハッカソンで何回優勝するか、どれだけ新しいアイデアを思いつくかとは何の関係もありません。それは、実行力、細部への注意力、献身的な努力に関係しています。創造と躍進への情熱。

自分のコードを恥ずかしいと思うなら、私のトライアングル プロジェクトの 21 個のネストされたコールバックを笑っても構いません。

記事の出典: Bole Online