FrontFest.Vyorstka:アクセシビリティ、トラフィックの節約、CSSの未来について話す





JavaScriptはそこにあり、JavaScriptはここにあり、JavaScriptはどこにでもありますが、Webがどのように始まり、今日では存在しないWebであるVYORSTKAと、その2つの主要コンポーネントであるHTMLとCSSを思い出しましょう。



FrontFestのVYORSTKAセクションでは、クールな企業のスピーカーを集めて、障害のある人がサイトを利用できるかどうか、画像を最適化してトラフィックを節約する最新の方法を理解し、スタイルの新しい仕様について議論し、標準化の代替アプローチを検討しました。



§アクセシビリティについて



レオニー・ワトソン 今年はちょうど20年を迎えます

LéonieWatsonはWeb開発者です。 ある時点で、彼女は活動の範囲を変更し、サイトの利用可能性を取り上げました。そうでない場合は、スクリーンアナウンサーの助けを借りて専らサイトを操作して、このトピックを完全に理解できます。 彼女のキャリアの中で、Léonieは英国政府のWebサイトであるSmashing MagazineのWebサイトの開発者に助言を行い、多数の記事を執筆し、W3C HTMLおよびSVGワーキンググループのメンバーにさえなりました。



長年、開発者はセマンティックマークアップを作成してきました。WAI-ARIAは誰にとっても文字のセットではありませんが、問題は何ですか? 問題はJavaScriptフレームワークの普及です。これにより、10年前に行われたすべての作業が先送りされます。マークアップも同じspanとdivで構成されています。 障害を持つ人々にとって、これはほとんど目に見えないサイトです。 この問題を解決する方法については、Léonieの「 アクセシビリティメカニクスの開発者ガイド 」から学びます




§画像の最適化について



通常、画像は最も「重い」静電気です。 しかし、何らかの理由で、フロントエンドベンダーは頻繁にそれらをバイパスします。



まず、開発者は、グラフィックを圧縮することにより、ダウンロードしたリソースのサイズを大幅に削減できることを忘れがちです。 スタイルやスクリプトを使用してバンドルのサイズを小さくすることに多大な労力を費やしています。



第二に、画面の解像度に応じて異なる画像を表示できる適応画像を常に使用するとは限りません。 さらに、グラフィックをロードする方法とタイミングは、サイトの速度にも影響します。



SpotifyのJose M. PerezとVkontakteのTim Chaptykovがこれらの問題に対処できます。


ホセ・M・ペレス Jose M. PerezはSpotifyのWeb開発者です。 同社では、open.spotify.comとSpotify Webプレーヤーに取り組んでいます。 彼はウェブサイトのパフォーマンスを最適化するのが好きです。



Jose 、有名なWebサイトで使用されているいくつかの画像最適化手法について説明します。 プレースホルダー、主要な色、ぼやけた画像、および遅延読み込みに基づく手法により、サイトのパフォーマンスを向上させます。 これらの手法は、CSS3、キャンバス、IntersectionObserver APIなどのさまざまなテクノロジーを使用します。


ティム・チャプティコフ Vkontakteメッセージセクションの開発者であるTim Chaptykovは、「 実際のグラフィックスの最適化 」というトピックについて話します。



ティムのレポートは、フォーマットを変更し、品質を損なうことなく最適化し、写真やキロバイトを節約するその他のより高度な方法を組み合わせて分割することについてです。






§CSSの将来について



CSSは、他のフロントエンドテクノロジーと同様に急成長しています。 新しい仕様は常に登場しており、すぐに導入されるか、いつか導入されるか、ドラフトで単に失われます。



セルゲイ・ポポフ Sergey Popov-フロントエンド、HTMLアカデミーのメンター、MoscowcssおよびMoscow Frontend Conferenceのオーガナイザーは、トピック「 私たちが飛んで、すべてがそこにあるとしたら? 「。



レポートでは、ドラフト仕様と開発中の新しいプロパティの両方を検討しますが、これらは日常生活でいつか使用します:CSSカスタムプロパティ、CSSグリッドレイアウト、CSSボックス配置4レベル、CSSセレクター4レベル、CSSオーバーフロー4レベルと他の多くの。




§宣言型テンプレートについて



スタイル設定にbgcolorなどのHTML属性を使用したときのことを覚えていますか? そして、宣言型CSSの発明でどれほどクールでしたか? コピーペーストをなくし、ルールを正確に再定義する機会を得ました。



ウラジミール・グリネンコ Vladimir Grinenkoは、彼の宣言的標準化レポートで、これらの機能をマークアップに組み込む方法を教えてくれます。



ウラジミールは、YandexのSimferopolオフィスの共通インターフェースコンポーネントグループの責任者です。 さまざまな時期に、彼はyandex.ruホームページ、内部サービス、およびポータルコンポーネントの開発に参加しました。 彼はBEMの開発に携わっており、開発者の方法論に関する質問に喜んで答えています。







ストリームをできる限り興味深いものにしました。.jsxファイルのみを使用する場合でも、時々テーブルを作成する場合でも、レポートのトピックはフロントエンドに接続している全員に関係します。 しかし、これだけではありません。VYORSTKAストリームと並行して、JSおよびMIXセクション(先週書いた )と、ハウスキーパーのストリームおよびワークショップのストリームがあります。 来月にそれらについてお話しますが、今のところは↓



番組



TwitterFacebookVKontakteフォローしてください。Instagramでもご覧 ください



All Articles