Clever Geek Handbook

単玔なものはすべお再び耇雑になりたした

このパフォヌマンスは、2017幎10月12日にBragaポルトガルで開催されたMirror Confカンファレンスで、2018幎2月9日にベルリンで開催されたAwwwards Conferenceで開催されたした。



この倏、りェブ䌚議での講矩の埌、デゞタルデザむンを勉匷しおいる若い孊生ず魅力的な䌚話をしたした。 キャリアパスを比范するのは面癜かったです。 私はりェブクラむアントの蚭蚈に15幎の経隓があり、圌女には1幎の経隓がありたすが、どういうわけか同じような状況に陥りたした。 どのようなナンセンスが起こったのですか もちろん、これは修蟞的な質問です。



フラストレヌションず混乱を互いに告癜するこずは、私たち二人にずっお安心でした。 そしお、それは私にずっお興味深いものになりたした。これはある皮のばかげた状況なのでしょうか、それずも深刻なトピックがありたすか。 誰も答えはありたせんでしたが、しばらくしお、私たち二人が䜕をすべきかが明らかになりたした。 今日、私はこの䌚話を続け、この混乱ずそれが私たちにどれほどの費甚がかかるかに぀いおの私の芋解を定匏化したいず思いたす。



私の䞍圚は、混乱の䞻な原因ずなっおいたす。 3幎前、私はクラむアント向けのWebサむトの䜜成をやめ、䌚瀟の芁旚に集䞭したした。 䜜業は昚幎の初めに終了し、短い䌑憩の埌、以前のデザむンスタゞオを再開したした。



次に䜕が起こったのか掚枬できたす。 最初からすぐに、りェブサむトの泚文をいく぀か受け取りたした。 3幎の間に、倚くは倉化する可胜性があるため、最新のWeb開発の革新に粟通するこずにしたした。



ここで䜕が起こっおいたすか













すぐに耇雑さによっおがっかりしたす。 珟圚の䜜業方法を芋るこずで、りェブサむトの開発を始めたいかどうかさえわかりたせんでした。 最埌に、圌はただ泚文を取りたした。 才胜は、圌らの新しい耇雑なプロセス、ツヌル、および開発方法の倚くが完党にオプションであるこずを瀺唆したした。 これが私のスピヌチの2番目の重芁なポむントです。Webずナヌザヌにずっお最適なオプションずしお、シンプルなデザむンずシンプルな実装を控えめに守りたいず思いたす。



しかし、私は自分自身に先んじおいたす。 たず、私が誰であり、䜕をするかに぀いおもう少し話さなければなりたせん。









私は小さなWebスタゞオを運営しおおり、もし哀れなこずがなければ-それから小さな、倧文字の "K"で。 スタゞオは、曞籍、雑誌、ブランディング、そしおもちろんりェブサむトのすべおを行いたす。 今幎は蚘念日です。私たちはビゞネスで15幎を祝い、個人的にはWeb開発者ずしお20幎のキャリアを祝いたす。 どんな倧きな蚘念日でもそうであるように、あなたはそれがすべお始たった方法を感傷的に思い出し始めたす。



スタゞオは、アパヌトの隅のテヌブルにラップトップず玙の束を持った男の圢で2002幎にオヌプンしたした。



15幎埌、スタゞオはただアパヌトの隅にある机にラップトップず玙の束を持った男です。



過去15幎間でスタゞオがどれだけ倉化したかを評䟡するこずは困難です。 圓時、珟代的な意味での゜ヌシャルメディアはありたせんでした-Facebook、Instagram、スナップのいずれもありたせんでした。 今日のサむトのほずんどは圓時存圚しおいなかったし、それらのサむトのほずんどは珟圚存圚しおいなかった。 iPhoneはありたせんでした。 ルヌトを芋぀けお、ネアンデルタヌル人のように玙に印刷するために、あなたはオンラむンに行かなければなりたせんでした。 私たちは䞀石䞀石を叩き、グラフィックデザむンを詊みたした。



今、すべおが異なっおいたすが、私はただ私のテヌブルにいたす。





最初はスタゞオで目に芋える進歩がないこずに感銘を受けたしたが、それから私は気付きたした。圌を故意に止めたらどうなるでしょうか なぜ機胜を倉曎するのですか さたざたな角床からさたざたなプロゞェクトにアプロヌチできたす。倚くの堎合、うたく機胜しおいるこずがうれしいです。 時間ず緎習は本圓に決めたす。



りェブサむトを陀く。 圌らはすべおの䜜品の䞭で際立っおいたす。なぜなら、20幎埌、私はそれらを䜜成するのが良くなったずは感じおいないからです。 私の知識ずスキルは少し発達し、すべおが倉化したす-そしお蓄積された知識の半分は重荷になりたす。 これは、私が行う他の䜜業ではほずんど䞍可胜です。



私がサむトの䜜成に20幎の経隓を持っおいるか、実際には5幎の経隓を4回繰り返しおいおも、それはさらに興味深いものです。 しばらくITで働いおいた堎合、これがあなたに銎染みがあるかどうか教えおください。



そのような5幎サむクルの䟋を瀺したす。











私が蚀ったように、私が20幎前に開発した最初のサむト。 私はティヌン゚むゞャヌずしお神聖な仕事をしたので、これを間違いなく芚えおいたす私はOK Computer Radioheadのアルバムテキストを録音したした。 それは1997幎で、HTMLを孊習しおいたしたが、蚭蚈䞊の1぀の問題だけで混乱しおいたした。





2぀のオブゞェクトを䞊べお配眮する方法は





20幎埌も、この非垞に単玔な質問に取り組んでいたす。 



<table> <tr> <td>Hi</td> <td>Mom</td> </tr> </table>


その埌、1997幎に、スプレッドシヌトず透明な画像を䜿甚しおストラット...地獄からスプレッドシヌトでWebサむトを䜜成するようなものでした。 䜕らかの理由で、私はそれが奜きだった。 おそらく、私はあなたの郚屋に䜕かを集め、ボタンを抌しお、それを「そこに」移動する機䌚に魅了されたした。 



 { float: left; }


箄5幎埌、テヌブルはセマンティクスではないため、サむトはCSSでフロヌトを䜿甚し始めたした。 フェア それ以来、私は玄200時間かけお本を読み、フロヌトを習埗したした。 私はそれらを理解しおいるのかただわかりたせん私はclear: both



に入力clear: both



ず私は神にブロックモデルを祈りたす。 



 { display: flex; }


ランダムに5幎間働いた埌、私の愛するFlexboxは私を救った。 グラフィックデザむナヌずしお勉匷し、最終的にFlexboxで3行たたは4行のCSSを曞くこずができたす。2぀のブロックは基本レベルで䞊んでいたす。 ハレルダ。 これが珟れるたでたった10幎しか埅たなかった。 



 { display: grid; }


そしお、Flexboxでゲヌムをプレむした埌、CSSグリッドが登堎したした。レスポンシブWebデザむンをさらに混乱させる匷力な新機胜です。 もちろん、グリッドはレむアりト管理の倧きな改善であるため、冗談を蚀っおいたす。 しかし、CSSグリッドがどのように機胜するかを説明する図を芋るたびに...







1997幎に行ったテヌブルレむアりトが思い浮かびたす。 私の頭のどこかに、私たちがサむクルに入ったずいう声が聞こえたす-そしおそれは繰り返されたす。 私たちは1぀の革呜を完了したした、そしお今、私たちは垞に茪になりたす。 5幎埌、別のレむアりトアプロヌチが衚瀺されたす。 おそらく、それはフロヌトに䌌おいるでしょう-そしお、 clear



ルヌルの誀解が再び私に戻っおきたす、私のキャリアの2回目です。







Webデザむンの他の領域でも同様のサむクルが芋られたす。 䜕も静止しおいたせん。 15幎の経隓を持぀人が1幎の経隓を持぀のず同じように困惑するのは驚くこずではありたせん。 倚くの堎合、最新の技術は、珟圚の波の真ん䞭に成功した人だけが理解しおいたす。 ただ頂䞊に到達しおいない堎合、十分な経隓がなく、䜕も知りたせん。 もしあなたが波を远い抜いたなら、あなたはあたりにも倚くを知りすぎおいるので、この特定の働き方には圓おはたりたせん。 若者が愚かだずか、経隓の浅い人が無胜だず蚀っおいるのではありたせん。もちろんそうではありたせん。 ただし、業界で十分な長さがある堎合は、3぀の状況すべおを経隓するこずになりたす。



䞀぀の議論は、方法論の絶え間ない倉曎が有甚であり、正しいずいうこずです。 同意したす。 継続的な開発は、欠陥の修正に圹立ちたす。 䜕も倉わらなければひどいものになりたす。 しかし、私は別の議論に同意したす人々の忍耐は氞遠ではありたせん。 人は䜕呚走行できたすか 私は5呚目です-過去のパッケヌゞ化されたアむデアに偏芋を感じずに察凊するのは非垞に骚が折れるず蚀えたす。



以前はタブヌず芋なされおいたメ゜ッドがゲヌムに返されたす。 たずえば、先週、スタむルシヌトの代わりにすべおにむンラむンスタむルを蚭定するのがいかに䟿利かずいう蚘事を読みたした。 いく぀かの点で議論は説埗力があるように思えたしたが、そのようなアプロヌチは数幎前には想像できたせん。



倚くの点で、サむトず゜フトりェアを䜜成するための私たちのアプロヌチは、私たちの考え方に基づいおいたす。 ツヌル、方法、抜象化の倉曎は、むデオロギヌの倉曎も意味したす。 ツヌルを効果的に䜿甚するには、これらのツヌルの開発者ず同じ考え方を採甚する必芁がありたす。 ドラむバヌを脇に眮いお鍵をずるほど簡単ではありたせん。 男は思考システム党䜓を再考しなければなりたせん。 心を倉える。



䞀方で、タスクは初心者向けに簡玠化されおいたす。もはや関係のないものを勉匷する必芁はありたせん。 䞀方、経隓は2぀の困難を生み出したす。 たず、メモリから䞍必芁なスキルを特定しお消去したすこれも手間がかかりたす。 第二に、ずっず前に解決された問題の新しい解決策のように芋えおも、オヌプンで、忍耐匷く、革新を受け入れる準備ができおいるこず。







過去3幎間で䜕が倉わったのかを探ったずき、私はこの準備の粟神を持っおいたした。 私は最善の意志で始めたしたが、芋぀ければ知るほど䞍機嫌になりたした。 新しい方法のほずんどは、䜜業の個々の郚分を自動化する耇雑なシステムの䜜成を䌎うようです。 これは特に耇雑で倧芏暡なプロゞェクトには適しおいたすが、システムをむンストヌルしおその動䜜を維持するには、このシステムなしで䜜業するよりも、小芏暡プロゞェクトで経隓を積んだ人にずっおより倚くの努力が必芁ず思われたす。



私ず私の仕事にずっお完党に無関係な耇雑さのレベルを制埡するための新しい方法が発明されたした。 耇雑さを管理する別の方法があるこずに気付いたずき、これらの革新のほずんどを攟棄するのは簡単でした。 ツヌルやワヌクフロヌを倉曎する代わりに、デザむンを倉曎したす。 それは家のプロゞェクトのようなものです。簡単に構築でき、高局ビル甚のタワヌクレヌンを配眮する必芁はありたせん。





経隓が瀺すように、盎接性ず自発性が最も効​​果的です。 したがっお、倧きな写真、人目を匕くむラスト、人目を匕く衚珟が䜜品の䞻芁な郚分です。 さらに、空想的な実装は、クラむアントを本圓に奜きになりたせんでした。



私のりェブデザむン哲孊倧隒ぎしないでください。 私の仕事は、クラむアントがプロゞェクトたたは䌚瀟に぀いおの1぀たたは2぀のナニヌクな真のアむデアを識別および衚珟し、キャッチヌなデザむンを䜿甚しお軜くタッチするこずでそれらを磚くこずです。 耇雑さが生じた堎合、それを考慮し、パタヌンを定矩し、構造党䜓の蚭蚈を倉曎したす。 より良いツヌルやよりファッショナブルなプロセスを探す必芁はありたせん。 過去に、私は「りェブの本質」に぀いお話したした。 これらは、HTMLずCSSが簡単、䟿利、確実に䜜成するものず互換性のある蚭蚈オプションです。



毎幎、たすたす目立たないWebサむトがこのアプロヌチを取っおいるようです。 したがっお、耇雑さを克服するための最も簡単で安䟡な戊略は、このための特別なツヌルを発明するこずではなく、䞀般に、よりむンテリゞェントな蚈画による耇雑さを回避するこずであるこずを党員に思い出させるず圹立ちたす。



控えめなニヌズに耇雑さがどの皋床備わっおいるかをテストするために、Webデザむンの技術芁件を曞き留めたした。 これは最も長いリストではありたせん。



シンプルでレスポンシブなレむアりト

Webフォントず矎しく配眮されたテキスト

高品質でスケヌラブルな画像



これらはすべお、少なくずも過去5幎間は利甚できたせんでしたが、過去数幎間で、これらの非垞に基本的なニヌズでさえも実装する耇雑さが倩囜にたで成長したした。



たずえば、䞊蚘のように、2぀の芁玠を隣り合わせに配眮する4぀の異なる方法を瀺したした。 埌続のものはそれぞれ前のものを実質的に眮き換えるので、FlexboxずCSSグリッドで安定した状態を達成するこずを期埅しおいたす。 しかし、あず5幎で䜕が珟れるのか誰が知っおいたすか







Webフォント @font-face



ルヌルで数行曞くだけで十分だず思いたしたが、 A Book Apartはこれらのフォントをダりンロヌドする方法に関する90ペヌゞの電子曞籍を出版したした。 これはたったく驚くべきこずです。Webフォントの埋め蟌みは比范的簡単だず思いたしたが、そうではないようです。







画像の操䜜も耇雑になっおいたす。 ベクタヌ画像はSVG圢匏で衚瀺されたすが、SVGは基本的にメむンWebペヌゞに埋め蟌たれた独立したWebペヌゞであるため、深く掘り䞋げるず、目が額に䞊がりたす。 たた、ビットマップ画像では、各デバむスに最適なサむズの画像を生成する必芁性が非垞に耇雑であるため、これらの目的の有料サヌビスが登堎しおいたす。 画像の公開は、ビデオの公開ず同じくらい困難になりたした。





これを蚀いたいです。 珟圚、最も基本的なものは非垞に耇雑であるため、すべおをさらに耇雑にするのは愚かなこずです。 そしお、ここに最も簡単な䟋がありたす。JavaScript、アニメヌション、ラむブラリ、フレヌムワヌク、プリプロセッサ、パッケヌゞマネヌゞャ、自動化、テスト、および展開には觊れたせんでした。 そのように。



はい、react asdfjklでvue babelたたはbowerを䜿甚しお、うなり声でwebpackをnpmするだけです; lkdhgxdlciuhw



このキット党䜓は、2018幎の䞀般的な䜜業方法です。 しかし、このようなツヌルキットは、倖郚からはたったく理解できたせん。 始めるのも難しいです。 1か月前、パッケヌゞマネヌゞャヌをむンストヌルするために、パッケヌゞマネヌゞャヌをむンストヌルする必芁がありたした。 その埌、ラップトップを閉じ、ゆっくりずそこから離れたした。 はい、私が始めたZen Gardens CSSには皋遠いです。



䞊玚レベルの゜フトりェア開発者ず話をする堎合、スパゲッティコヌドに関する苊情を聞くこずになるでしょう。 これは、コヌドが混乱し、構造が䞍十分で、理解しにくく、䟝存関係に悩たされおいる堎合です。 初めおこの蚀葉を聞いたずき、私は萜ち着きたした。スパゲッティのコヌドはデザむナヌずしおは認識できたせんが、スパゲッティずスパゲッティツヌルの䜜業プロセスの地獄を知っおいるからです。 私たちは今、りェブ䞊にいるように感じたす。







なぜなら、以前はどのサむトのコヌドも芋やすく、理解しやすかったからです。 Webでの最初の数幎間は、これに倚くのこずが関連しおいたす。 情報源は芋えたしたが、毎幎他の人の仕事を研究する方法ずしおの有甚性は次第に䜎䞋しおいたす。 コンピュヌタヌはコンテキストを芋ずにマヌクアップを生成するため、マヌクアップのサむズが倧きくなり、刀読できなくなりたした。 スタむルは冗長で冗長になり、䞍名誉になりたした。 機胜は、圧瞮されたJavaScriptに隠れおいたす。



私の考えは蚘事の冒頭で述べた若いデザむナヌに向けられおいるので、状況は私を困らせたす。 結局のずころ、刀読可胜な䟋を持ちながら、私が芋たものを再珟するために私はいく぀の機䌚が必芁でしたか そしお、圌女の目から隠すこずによっおこの情報を難読化するこずはどれほど有害ですか 自ら話すために䜿甚されるWebサむト。 今、誰かがそれを理解するのを手䌝うべきです。



読みにくくなるのは、明確さがないず耇雑になるためです。 ゜ヌスの読みやすさは、Webの最も重芁な品質の1぀であるず考えおいたす。 これは、ネットワヌクぞの独立した、仲介されない貢献のための扉を開いたたたにする䞻なものです。 マヌクアップを䜜成できる堎合は、Medium、Twitter、Instagramは必芁ありたせんただし、それらがあれば䟿利です。 そしお、誰かがマヌクアップを曞くのを助ける最良の方法は、マヌクアップの読み方を教えるこずです。



若いデザむナヌがこの耇雑な分野でどのように知識を埗るかずいう状況に぀いお考えるのは興味深いこずです。 コヌドが読めない堎合、どのように孊習できたすか おそらく、より経隓豊富な専門家がアクセスバヌを誇匵しおいるのでしょうか 20幎前、私はHTMLコヌドの䟋を芋お、それを読むこずができたので、私は自分のりェブサむトを䜜るこずにしたした。 私の仲間のデザむナヌの倚くは同じように始めたした。 サむトを䜜成するスキルを習埗したしたが、これで解決したした。 私たちはマヌクアップにこだわっおおり、すべおが読み取り可胜なたたである限り行きたいだけだったので、本栌的なプログラミングに切り替えたせんでした。



Webの知識がすぐに砎壊される堎合、倉化ず孊習に関連しお自分自身のために厳栌な原則を開発するこずは理にかなっおいたす。



シリコンバレヌはいく぀かを提案しようずしたした。 すべおは速床に基づいおいたす。 最も有名な原則は、「高速で動き、すべおを砎る[ハック]]」ずいう信念を持぀Facebookから来おいたす。 このマントラは繰り返しトむレに䞋げられおきたしたが、興味深いこずに、反察のこずを提案した人はほずんどいたせん。



スピヌドビデオを芋せおください。





これは、過去数か月間のむンタヌネットでの私のお気に入りの発芋です。 私は圌を反省するのに十分な回数芋たした。 ご存知のように、うさぎは疲れおいるので負けおいたせん。 圌は混乱しおいるので負けおおり、どの方向に進むべきか理解しおいたせん。 圌がどのように立ち止たっお呚りの矀衆を無力に芋始めたのか、そしおりサギが理解しおいないこずに぀いおみんなが倧声で叫んでいるこずに気付きたしたか これはTwitterの私です。



むンタヌネットで数十幎の経隓を持぀人ずしお、私は自分をカメず比范するこずを嫌いたすが、適切な堎合、それから適切です。 そのカメの䟋を芋おみたしょう私たちは勀勉で、盎接的で、目的を持っおなりたす。 Webのリヌチず匷床は成長し続けおいるため、Webにはある皋床の遅延ず思慮深さが必芁です。 私たちが䟝存するものは、適切に構築され、正しく圢成されなければなりたせん。 耇雑さの重芁な兄匟、繊现さ、ニュアンスのためのスペヌスを䜜る必芁がありたす。 スペヌスは、ニュアンスなしで愚かに陥っおいたす。 そしお、アメリカ人ずしお、私はあなたに蚀うこずができたすこの危険なカクテルがスピヌドず愚かさによっお匕き起こすこずができる損害の量に制限がありたせん。



たた、りェブは、りェブの抂念ずその䜜業をすべおの人に明確に䌝えるために、勀勉な人々を必芁ずしたす。 これは、Webが䜜成するシステムず瀟䌚環境を理解し、存圚するものず存圚しないものを知る胜力を指したす。 しかし、明快さを求めるずいう呌びかけは、その優雅さのおかげで、ほずんどすべおの人が簡単に理解できる読みやすいコヌドずシステムを曞くこずも控えめに蚀っおいたす。 この重芁な䜜業の䜙地もありたす。



仕事の明快さを保ちながら、次䞖代の同僚のためにドアを開けたたたにしたす。 あなたが孊校を卒業したか、20幎の経隓があるかに関わらず、あなたはりェブサむト開発の最初の1幎になるので、圌らのために働くものは私たちにずっおも圹立ちたす。


More articles:


All Articles