新年、新しい始まり：スマッシングワークショップと監査

新年が沈み、皆の決意がまだ試されている中、私たちはゆっくりと日々のプロジェクトに戻っています。 そして、そうすることで、2021年の新しい目標に焦点を当てます。アクセシビリティ、コンバージョン、エンゲージメント、保持、そしてもちろんWebパフォーマンスの向上です。 今年は私たち全員が異なる個人的な目標を持っていますが、1つのことが私たち全員を結びつけています。それは、すべての人のWebを改善することです。

年の間の時間は常に落ち着くのに最適な時間です。 しかし、それはまた、いくつかの調査、思考、執筆、そしておそらく一方的なコーディングや設計を行うための素晴らしい時間でもあります。 そして、まるでそれが毎年恒例の伝統であるかのように（実際にはそうです）、Vitalyは2021年にフロントエンドで起こったすべてを読み、フロントエンドのパフォーマンスチェックリスト2021ですべてをもう一度編集しました。

このガイドでは、メトリクスからツール、フロントエンドの手法や戦略まで、今日のWebで高速なエクスペリエンスを構築するために必要なほとんどすべてをカバーしています。 過去数年間で多くの読者に非常に役立つことが証明されているので、あなたにも役立つことを願っています。 チェックリスト（PDF、MS Word Doc、Apple Pages）を編集して、個人のニーズに合わせて調整したり、組織で使用したりすることもできます。

さて、これ以上面倒なことはせずに、Smashingチームが今後数か月であなたのために用意しているものを見てみましょう。

オンラインワークショップで1年先の計画を立てましょう

私たちのワークショップの1つにもう参加しましたか？ 世界中から集まった素晴らしい参加者全員が集まって一緒に学ぶ実践的なオンラインワークショップを開催するたびに、私たちはわくわくしています。 世界中の人々とつながり、ライブで経験を共有する絶好の機会であることが証明されています。 ライブデザインとコーディングセッションのおかげで非常に多くのアイデアが実現し、新しい友達を見つけた人もたくさんいます！

さらに良くなりました。ワークショップバンドルが用意されており、現在進行中、今後、または将来開催されるワークショップのチケットを3、5、または10個選択できます。 あなた自身、あなたのチーム、またはあなたの代理店のために、あなたが選んだオンラインワークショップを-最高の価格と最高の日付で-選んでください。 ワークショップバンドルにジャンプします。

今年もプログラムに取り組んでおり、さらに多くのワークショップを発表する予定です。 実行したい場合は、Twitter DMに連絡してください。これを実現するために、最善を尽くすことをお約束します。 また、新しいワークショップが開催されたときに最初に通知を受け取りたい場合は、ここで購読してください。 さらに、アーリーバードチケットにもアクセスできます。

New：フロントエンドとUXでのオンライン監査のスマッシング

先週、私たちは新しい小さな製品であるオンライン監査を静かに立ち上げました。30〜60分のビデオレビューと調査結果の書面によるレポートです。 これは、アイデアを検証し、Webサイト、アプリ、またはモックアップのフロントエンドとUXについて、正直で公平なフィードバック（今のところVitalyから）を取得するための簡単で迅速な方法です。 さらに、より良いことをするためのガイドラインとアクションポイント。

選択した監査を予約し、Webサイト、アプリ、またはモックアップに関する詳細を共有してください。すぐに返信します。

スマッシングポッドキャスト：チューンインしてインスピレーションを得る

昨年、2週間ごとに新しいSmashing Podcastエピソードを公開しましたが、フィードバックは素晴らしいものでした。 56,000を超えるダウンロード（1週間に1,000をわずかに超え、増え続けています！）で、ポッドキャストにはさまざまな背景を持つ34人のゲストがいて、共有することがたくさんあります。

聞きたいトピックや詳細が見つからない場合は、いつでもホストのDrew McLellanに連絡するか、Twitterで連絡してください。ぜひご連絡ください。

1月26日に公開される次のエピソードにご期待ください！

スマッシングニュースレター：ベストピック

毎週のニュースレターでは、役立つ実用的な情報をお届けし、人々がWeb業界で取り組んでいる役立つことのいくつかを共有することを目指しています。 素晴らしいプロジェクトに取り組んでいる才能のある人々がたくさんいます。あなたがその言葉を広め、彼らにふさわしい信用を与えるのを手伝っていただければ幸いです。

また、購読することで、サードパーティの郵送や隠された広告がなくなり、あなたのサポートは私たちが請求書を支払うのに本当に役立ちます。 ️

スポンサーに興味がありますか？ パートナーシップのオプションを確認して、いつでもチームに連絡してください。チームはできるだけ早くあなたに連絡します。

以下は、最近ニュースレターで共有した人気のニュースレターの一部です。

デフォルトのローカルフォントの互換性

デフォルトのフォントは、オペレーティングシステムによって大きく異なります。 システムのデフォルトフォント、特にCSS font-familyを通じて利用可能である必要があるフォントを簡単に検索する方法を提供するために、ZachLeathermanはFontFamilyReunionを構築しました。

互換性テーブルは、デフォルトのローカルフォントに使用できるように機能しますfont-familyを入力すると、サポートされているかどうかと、5つの標準CSSキーワードfont-families（ serif 、 sans-serif 、 monospace 、およびあまり知られていないfantasyとcursive ）は、各オペレーティングシステムでエイリアスされます。 ブックマーク用に1つ。

GoogleFontsのパフォーマンスの向上

セルフホスティングフォントは、Webフォントを使用する場合の最速のオプションとして広く受け入れられています。 ただし、Google Fontsも高速である可能性があります。特定のユーザーエージェントやプラットフォームに可能な限り小さなフォントファイルを提供する機能と、URLパラメータ&display=swapを介したfont-displayの比較的新しいサポートはすでに優れた基盤です。 そして、ハリー・ロバーツが示すように、パフォーマンスをさらに向上させ、GoogleFontsで一般的に知られている多くの問題を軽減するためにできることがかなりあります。

彼の記事「TheFastestGoogleFonts」で、ハリーはパフォーマンステストのうさぎの穴を掘り下げて、高速Googleフォントの最適な組み合わせを見つけました。CSSの非同期読み込み、フォントファイルの非同期読み込み、FOFTのオプトイン、非同期CSSファイルの高速フェッチ、ウォーミングアップです。外部ドメインをアップします。 これらのテクニックをすべて組み合わせると、最初は少し圧倒されるかもしれませんが、ハリーは、GoogleFontsを最大限に活用するのに役立つスリムで保守しやすいスニペットで彼の記事を締めくくっています。

レスポンシブメールを簡単に

すべての人気のある電子メールクライアントで確実なエクスペリエンスを提供する、クリーンで応答性の高い電子メールのコーディングは、時間のかかる課題になる可能性があります。 HEMLはそれを変えるためにここにあります。 オープンソースのマークアップ言語は、すべての電子メールの癖に対処する必要なしに、HTMLのネイティブパワーを提供します。 習得するための特別なルールやスタイル設定パラダイムはありません。したがって、HTMLとCSSを知っていれば、すぐに始めることができます。

MJMLは、レスポンシブメールを作成するプロセスを簡素化するという同じ考え方に基づいています。 マークアップ言語は、オープンソースエンジンが手間のかかる作業を行い、作成したMJMLをレスポンシブHTMLに変換する一方で、プロセスを単純化するセマンティック構文に基づいています。 標準コンポーネントのライブラリは、余分な時間を節約し、電子メールコードベースを軽量化します。 また、独自のテンプレートを作成する場合は、モジュラーテンプレートシステムガイドも役立つ場合があります。 有望な！

防弾HTMLメールテンプレート

HTMLメールをメールクライアント間で機能させるのは簡単な作業ではありません。 幸いなことに、作業を簡単に行えるようにするための信頼できるツール、テンプレート、フレームワークがたくさんあります。 たとえば、Maizzleは、TailwindCSSと高度な電子メール固有の後処理を使用してHTML電子メールをすばやく作成するのに役立つフレームワークです。 また、すぐに開始できるいくつかの既成のプロジェクト（Maizzle Starters）も提供します。

CerberusとHTMLEmailは、Gmail、Outlook、Yahoo、AOLなどの50以上の電子メールクライアントで十分にテストされた、応答性の高いHTML電子メールの信頼できる堅実なパターンの小さなコレクションを提供します。 EmailFrame.workを使用すると、60を超える電子メールクライアントでサポートされている、事前に構築されたグリッドオプションと基本コンポーネントを備えたレスポンシブHTML電子メールテンプレートを構築できます。

Stripo、Chamaileon、Postcards、Topol.io、Bee Freeには無料のHTMLメールテンプレートがたくさんあり、Litmusにはニュースレター、製品の更新、領収書用のレスポンシブメールテンプレートがあり、CampaignMonitorにはドラッグアンドドロップ機能を備えた無料のHTMLメールテンプレートビルダーがあります。

CSSグラデーションから偽のデータまで

要素と疑似要素のCSS三角形スタイルを見つける必要があると想像してください。 または、特定の色の色合いと色合いを調べて、カラーパレットを少し洗練することもできます。 または、ページのセクションに対して線形および放射状のCSSグラデーションを生成することもできます。 すべてを手動で実行したり、Web全体でそれらのCSSスニペットを検索したりする必要はありません。 おまつりでいつでも見つけることができます。

おまつりは日本語でお祭りを意味し、このサイトは日常的に使用できるオープンソースのブラウザツールの素敵な小さなお祭りです。 このサイトには、三角形ジェネレーター、カラーシェードジェネレーター、グラデーションジェネレーター、ページディバイダー、SVGコンプレッサー、 SVG→JSXコンバーター、偽のデータジェネレーター、CSSカーソル、キーボードイベントコードがあります。 VitalyRtishchevとVladShilovによって設計および構築されました。 サイトのソースコードも利用できます。

CSSシャドウジェネレーター

本当に滑らかなレイヤードボックスシャドウのCSSコードを自動的に生成するツールをお探しですか？ さて、あなたはSmoothShadowを気に入るはずです。 Tobias Ahlin Bjerromeによって書かれた記事に触発されたこの気の利いたツールは、誰もが必要なコードをその場で生成できるように作成されました。

一度試してみると、使わないのは難しいでしょう。 この小さなツールを使用すると、レイヤー化された滑らかなボックスシャドウを視覚的にデザインできるだけでなく、個々のイージングカーブでアルファ、オフセット、ブラーを微調整することもできます。 さらに、ツールの作成者であるPhilipp BrummがSmoothShadowをFigmaプラグインとしてリリースしたので、いつものようにワークフローを最適化できます。

CSS変数を理解する

CSS変数は強力です。 それらは正常にカスケードし、継承し、コードの再利用を可能にし、非常に寛容です。 しかし、その可能性を最大限に活用するために、実際にCSS変数に何を入れることができますか？ いくつかのことはそれほど明白ではないので、WillBoydはブログ投稿で可能性を探りました。

単位値から事前定義されたキーワード、コンテンツ文字列、画像、さらには派手なアニメーション値まで、Willの要約は、CSS変数と組み合わせて使用​​する可能性のある最も一般的なものに光を当てます。 素晴らしい概要。

学習をやめないでください

学習は止まることはありません。 そして、多くの場合、最も役立つことが判明したのは、小さな洞察、コードのヒント、およびヒントであるため、StefanJudisは「TodayILearned」を開始しました。

SVGフィルターをCSSにインライン化できることを認識している場合でも、サイトが配色をサポートしていることをブラウザーに通知する方法でも、Stefanは、CSSだけでなく、アクセシビリティ、bash、git、 GraphQL、HTML、JavaScriptなど。 サマンサ・ミングのコードの一口は、あなたの生活をより簡単にするためにバインドされている、迅速でありながら貴重なWeb開発の知恵の宝箱でもあります。

そしてそれはラップです！

今年も本当に素晴らしい一年になりますように。笑い、思い出に残る瞬間、そして驚くほど素晴らしい経験に満ちています。 一つには、オンラインまたは直接お会いできるのを待ちきれませんが、確かなことが1つあります。それは、毎月毎月大破していることを心から感謝していることです。そのために、私たちは永遠に感謝しています。

スマッシングを続けてください！