10引用符HolyJS 2017モスクワ

HolyJS 2017会議がモスクワで2回以上開催されたことについては既に説明しました：Habréで、 Yevgeny Gusevはプログラム委員会のメンバーとしてすべてを説明し 、観客の印象はNoveoブログに登場し、私たちはHolyJS 2018 Piter 発表でモスクワの報告に言及しました



したがって、視聴者の評価を収集し、私たちが最も気に入ったレポートを特定したので、イベントの別の改作を書くのではなく、これらのレポートの小さな断片を共有することにしました。 視聴者から4.2以上の評価を受けた人のうち10人を取り上げ、それぞれが文脈から隔離されていても面白い場所を見つけました。 ほとんどの場合、断片は導入部から取られますが、新しいことを学び、会議の雰囲気を感じることができると思います。

Denis Radin-ピクセルシェーダーのUIコンポーネント、最初のシェーダーを書く

「聴衆への質問：ウェブ上でいくつの言語がうまくサポートされていますか？ [聴衆からの声：「単一ではない！」]さて、ブラウザの言語。 三？ HTML、CSS、JS、およびSVGという名前を付けることができるため、4つと仮定しましょう。 人々は「3」と言いますが、SVGは宣言型言語と考えることもできます...しかし、実際にはもっと多くの言語があります。 死んだVRMLがあります、私たちはそれを考慮しません。 そして、GLSLがあります。



GLSLは非常に特殊な言語です。 特にウェブ向け。 JavaScript、CSS、HTMLの残りすべてはWebから発生し、Webページから他のプラットフォームでの勝利行進を続けたため（たとえば、携帯電話でWebViewの使用を開始しました）。 しかし、GLSLは特別です。それはコンピューターグラフィックスの世界、C ++で始まり、そこからWebに登場しました。 GLSLの優れた点は次のとおりです。一度学習すれば、すべてのプラットフォームで使用できます。 Unity、Swift、Javaなどで。 つまり、GLSLは普遍的なものです。 これは、コンピューターゲームのすべてのクレイジーな特殊効果の背後にあるものです。」

---

Vitaliy Fridman-レスポンシブWebデザインの新しい冒険

「これがコントラストスワップテクニックです。 画像があり、そのサイズを小さくする必要がある場合、どの詳細がよく圧縮されているかを考えますか？ たとえば、コントラスト。 しかし、コントラストを大幅に下げてから、CSSとフィルターを使用して描画した場合、再度コントラストを上げるとどうなりますか？



確かに、誰かが自分でこの写真をダウンロードしたい場合...まあ、なぜですか？ たぶん違う？ そのような場合には、素晴らしい方法があります：画像のダウンロードを無効にします。 また、ライセンス画像やストックフォトを持っている場合、その上にロゴを描く必要さえありません。



そして実際、これは素晴らしい結果を達成することができます。 結果は同じですが、大きな画像を1メガバイト圧縮します。 今、誰かが立ち上がって、「しかし、レンダリングについては、ブラウザはフィルターを課さなければならない」と言うだろうと思いました。 これは実際には問題ではありません。なぜなら、27ミリ秒対23ミリ秒-まあ、正直、それほど怖くないからです。 また、Internet Explorerを除くすべての場所でフィルターがサポートされています。

---

アレクサンダー・コロタエフ-ブラウザでのヒーローズ・オブ・マイト・アンド・マジックのゲーム：長く、難しく、耐えられないほど面白い

「このエディターでマップを開くと、建物、オブジェクトを編集するための優れたビジュアルインターフェイスが表示され、何でも編集できます。直感的に誰にでもわかりやすく、何千ものマップがすでに作成されています。



しかし、開発者としてそれを読みたい場合は、読みにくいバイナリコードであることがわかります。 私はこのコードを黙想することから始め、そのコードの構造と内部の内容に関するいくつかの質の悪い仕様を見つけ、さらに時間をかけて読み始めました。 わずか2週間で私は彼を見て、いくつかのパターンを見始めました！



それから私は何かがおかしいことに気づき、掘り始めて、普通の人がテンプレートをサポートしているエディタでそれをまだ読んでいることがわかりました。 カードの場合、 010 Editorでテンプレートを解析できるテンプレートが既に作成されており、ブラウザのようにテンプレートが開きます。 実際、DevToolsに似たものが表示され、コードの特定のセクションをポイントすることができ、強調表示され、内部の内容が表示されます。 これは、以前に使用しようとしたものよりもはるかに便利です。」

---

Vitaliy Slobodin-ヘッドレスブラウザー：何、どのように、なぜ

「ヘッドレスブラウザーの動作を人に尋ねると、「たぶん、そこにはある種のウィンドウ、仮想フレームバッファーなどがあります...」



ここでは、おそらくブラウザを2つのタイプに分けることができます。 1つ目は「本物の」ヘッドレスで、フレームバッファなどは必要ありません。メモリ内のすべてを実行します。 LinuxなどではXサーバーは必要ありません。 そして、すべてを仮想フレームバッファにレンダリングする人がいます。 何も描画して表示する必要がないという事実のため、「実際の」ものはより速く動作し、はるかに少ないメモリを消費します。



当然、論理的な疑問が生じます。もし彼がボタンやボタンを備えたインターフェースを持っていないなら、それをどうやって管理するのでしょうか？ 簡単です。すべてのヘッドレスブラウザにはソフトウェアインターフェイスが必要です。

---

Alexey Bogachuk-セキュリティ：アプリケーションの脆弱性

レポートの終わり：「ありがとう！ ここにプレゼンテーションへのリンクがあります...ああ、いや、みんな、どうしてあなたは私に耳を傾けませんでした。 このリンクの写真を撮り始めていますか？ なじみのないリンクをクリックしたりクリックしたりしないでください！ これが実際のリンクです。 再びありがとう」

---

Nikolay Matvienko-内部のNode.jsアプリケーションのトラブルシューティング

「現在、診断のどこにいるかを理解するために、歴史に目を向けることを提案します。



最初は、DTrace、Instruments（macOSでは同じDTraceのシェル）、Linuxではperfなどのツールです。これらはすべてシステムプロファイラーであり、Node.jsが登場するずっと前に登場し、現在でも使用されています。



Node.jsが登場した最初の段階-ノード指向ツールが表示されます。 ここでは、ノードインスペクタ、node-memwatch、node-heapdumpを強調する価値があります。 この期間を「トラブルの時間」と呼びます。 io.jsがNode.jsから分離されたコミュニティには分裂があり、コミュニティは次に進むべき場所と選択すべきものについての共通の理解を持っていなかったことを覚えています。



しかし、2015年から、Node.jsとio.js（より急速に開発されたフォーク）が再びマージされています。 Node.jsバージョン4.x Argonを入手し、コミュニティには明確な開発ベクトルがあります。



NodeはすでにAmazon、Netflix、Alibabaなどの大企業で本番環境で使用されており、生産のための効果的なツールが必要です。 そして、2017年から条件付きで3番目の段階を選び出しました。今では、すべてがNode.jsの内部部分のトレースの品質と改善に焦点を当てています。

---

Alexey Taktarov-州の世界のアニメーション

「アニメーションにsetTimeoutを使用することはできません。 setTimeoutは、指定された期間内に関数が実際に動作することを保証しないためです。 これにより、フレームオーバーレイなどの効果が生じる可能性があります。 つまり、アニメーションは16ミリ秒で来ると考えられます。これはおおよそ60フレーム/秒に相当しますが、実際にはさらに機能し、この負債は累積し、累積します。



幸いなことに、ブラウザにはこの問題に対処できる最新のAPIがあり、requestAnimationFrameと呼ばれます。 これは、ブラウザスケジューラにとって都合の良い時間にコールバックが機能することを保証する関数です。 ただし、不均等な間隔でも機能することに注意してください。 requestAnimationFrameを使用する場合は、ターゲットにしているブラウザーを確認することを強くお勧めします。

---

エゴール・マルケビッチ-（-盗む-）インターネットからデータを取得する

「私は6年間フロントエンドにいますが、最初はパーサーについて知っているいくつかのプロジェクトを例に挙げます。



飛行機。 おそらく誰もがAviasalesについて知っています。 2012年のどこかで「私たちの航空販売」も見ました。それが主流であり、そのようなプロジェクトがたくさんありました。 そしてそこのデータは非常に急速に古くなった。 航空会社のウェブサイトを一度解析してから、キャッシュからコンテンツを見せることはできませんでした。 価格が下落し、何かをどこかに移していたため、即座に解析する必要がありました。 <...>



車。 車をより安く購入し、より高価に販売する「アウトビッド」を誰もが知っています。 <...>今、彼らはブローカーのように、高頻度取引に移行しています。 一般ユーザーが車を売ることができる多くのサイトがあります。 そして、「アウトビッド」はあなたの車を他の誰よりも早く見たいと思っています。 彼らはページをスキャンし、新しい興味深いマシンを見つけて、おそらく自動的に素早く連絡するパーサーを書き始めました。」

---

Roman Dvornov-スクリーンショットを使用したユニットテスト：サウンドバリアの突破

「Yandex Geminiツールがあります-良いことですが、宇宙船のように見えます。開始、構成が非常に難しいため、多くのコードを書く必要があります。 これは問題ではないかもしれませんが、個人的に問題は、readmeから簡単なテストを実行し、100回コピーして、この結果を得たことです：282x200の解像度を持つ100個の画像が約2分間チェックされます。 これは短い時間のように見えますが、実際には非常に大きいため、後で表示されます。 その結果、彼らは彼ら自身のことをし始めました、そして、これはレポートで議論されます。



このような数字が得られました。800x600の2つのスクリーンショットを比較し、それらが等しい場合、比較には通常約0ミリ秒かかります。 スクリーンショットがわずかに異なり、異なるピクセル数を見つける必要がある場合、約100ミリ秒かかります。 スクリーンショットの更新-テストベースを初期化するだけで画像を取得-スクリーンショットあたり約25ミリ秒かかります。

---

リー・ベロウ-/ Reg（exp）{2} lained /：正規表現の分かりやすさ

Leah Veruは、正規表現に関する基調講演で会議を終了しました。彼女のプレゼンテーションはインタラクティブでした。時々、「 あれこれのように書いてください」と言って、1、2分を与え、彼女のサイトregexplained.comの助けを借りて、希望する人が Twitterに投稿できました。 それからリアはそれらを示し、正しいものを発表しました（そして後で、全体として参加者のどれが最も正確であると判明したかを計算しました）。



したがって、彼女の場合、引用する代わりに、同じことを提案します。 それがあなたにとってどれほど良いかを見たいなら、2分を見つけてネタバレを開いてください。





そして完了したら、2番目のネタバレの下に答えがあります：





正規表現と観客のオプションを比較したい（そして自転車でタヌキとビデオを楽しむ）場合は、適切なタイミングで放送を開き、リアがオプションを開く方法を確認できます。 そのため、イベントの雰囲気にさらに感銘を受けます。



5月にサンクトペテルブルクのHolyJSに個人的に参加したい場合は、よりよく理解できます。私たちは、すでに発表されていることを思い出させてくれます。



そして、この投稿全体を読んで、最初の写真で登場人物がどこから来たのかを見つけた場合、私たちはあなたに通知します。それは、スタンドで会議に出席したカスペルスキーに属します。