ウェブ

CSSのグラデーションとアスペクト比を使用してレスポンシブな画像効果を作成します

CSSの典型的な問題は、カードなどの関連コンポーネント間で画像のアスペクト比を維持することです。 新しくサポートされた`aspect-ratio`プロパティと`object-fit`の組み合わせは、過去のこの頭痛の種に対する救済策を提供します。 余分なフレアのためのレスポンシブグラデーション画像効果を作成することに加えて、これらのプロパティの使用方法を学びましょう。

続きを読む

2021年のGDPRの状態:主要な更新とその意味

デジタルプラクティショナーとして、GDPRは私たちの職業的および個人的な生活のあらゆる側面に影響を与えてきました。 Instagramに夢中になっている、WhatsAppで家族にメッセージを送っている、EtsyやGoogleの情報から製品を購入しているなど、2018年に導入されたルールから逃れることはできません。

続きを読む

独自の個人学習カリキュラムの構築

開発者として、私たちは常に新しい言語とフレームワークを学んでいます。 しかし、この学習をどのように構成して、進歩しながら最大の利益を確保できるでしょうか。 正しい方向に進み続けるために、独自のカリキュラムを考案する方法は次のとおりです。

続きを読む

Hugo静的サイトジェネレーターのコンテキストと変数

この記事では、人気のある静的サイトジェネレーターであるHugoのコンテキストと変数のトピックを見ていきます。 Hugoテンプレートのグローバルコンテキスト、フロー制御、変数などの概念、およびコンテンツファイルからテンプレートを経由してパーシャルおよびベーステンプレートへのデータフローを理解します。

続きを読む

DevToolsのデバッグのヒントとショートカット(Chrome、Firefox、Edge)

DevToolsは非常に高度で便利ですが、非常に威圧的で圧倒されることもあります。 それを修正しましょう。 この記事では、VitalyがChrome、Firefox、Edge、Safariでデバッグするための便利な機能とショートカットを確認します。

続きを読む

サイズと品質のためのビデオの最適化

アプリケーションにビデオを追加すると、顧客エンゲージメントと満足度を高めることができます。 ただし、ビデオの再生に問題がある場合は、正反対のことが発生する可能性があります。ビデオのストールはイライラし、顧客を遠ざけます。 この記事では、Webサイトのビデオを最適化して、高速再生を確保し、ストールを減らすための手順を説明します。

続きを読む

スマッシングワークショップに期待すること:フォームデザインマスタークラス

数週間前、私たちは[Form Design Masterclass](https://smashingconf.com/online-workshops/workshops/adam-silver)を開催しました。これは、81人のフレンドリーで賢い人々と一緒にアダムシルバーとのオンラインワークショップです。 今日、アダムは、出席者としてのあなたがスマッシングワークショップに期待できることと、スマッシングワークショップを実行するときに留意すべきことを強調することによって、彼の経験と詳細を共有しています。

続きを読む

ソール・バスがWebデザインについて教えてくれること

映画のクレジット、ブランドのロゴ、ポスター…ソール・バスがすべてを行い、彼の作品に影響を与えた原則は、50年前と同じように今でも価値があります。

続きを読む

React、Redux、Sanity.ioを使用したWebアプリの構築

ヘッドレスCMSは、コンテンツを管理し、APIにアクセスするための強力で簡単な方法です。 React上に構築されたSanity.ioは、柔軟なコンテンツ管理のためのシームレスなツールです。 単純なアプリケーションから複雑なアプリケーションをゼロから構築するために使用できます。 この記事では、IfeanyiがSanity.ioとReactを使用して簡単なリストアプリを作成する方法を説明します。 グローバル状態はReduxで管理され、アプリケーションはstyled-componentsでスタイル設定されます。

続きを読む

TypeScriptでの動的静的入力

この記事では、共用体型、条件型、テンプレートリテラル型、ジェネリックスなど、TypeScriptのより高度な機能のいくつかを見ていきます。 ほとんどのバグが発生する前にキャッチできるように、最も動的なJavaScriptの動作を形式化したいと考えています。

続きを読む