Meta Front-End DeveloperLaunch your career as a front-end developer. Build job-ready skills for an in-demand career and earn a credential from Meta. No degree or prior experience required to get started.
Type-Level TypeScript
Learn how to unleash the full potential of the Turing Complete type system of TypeScript! Introduction Type-level TypeScript is an online course to take your TypeScript skills from intermediate to advanced. It will give you a solid understanding of the type system's fundamentals and guide you through its most advanced features. You will find everything you need to become a TypeScript Expert — not
Penpot: The Design Tool for Design & Code Collaboration
Penpot is the web-based open-source design tool that bridges the gap between designers and developers.
ReactのSuspenseを使った非同期処理のエラーハンドリング
「フロントエンドLT会 - vol.8」で発表したスライドです。 https://rakus.connpass.com/event/255095/
CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック
スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロールチェーンとは 古い解決方法 今の解決方法: overscroll-behavior overscroll-behaviorの使用方法 終わりに はじめに posi
デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
JavaScript の undefined と null を完全に理解する
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません（仕様 7.2.14）。 console.log(undefined === null); // false console.log(undefined == null); // true 他の falsy な値（false とみなされる値）との比較は、ゆるい比較演算子であっても区別されます（仕様 同上）。 console.log(undefined == fa
レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説
CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を紹介します。 Use cases for CSS comparison functions by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 比較関数の使用例: 流動的なサイジングとポジショニング 比較関数の使用例: 装飾要素 比較関数の使用例: 流体ヒーローの高さ 比較関数の使用例: ローディングのバー 比較関数の使用例: コンテンツの区切り線 比
detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
ReactのSuspenseを使った非同期処理のエラーハンドリング
「フロントエンドLT会 - vol.8」で発表したスライドです。 https://rakus.connpass.com/event/255095/
モーダル要素の実装に便利なCSSの新機能「:modal疑似クラス」、主要ブラウザのすべてにサポートされました
先日リリースされたChrome 105, Edge 105でコンテナクエリ（@container）と:has()疑似クラスがサポートされ、モダンCSSの新機能がいよいよブラウザで使用できるようなりました。 そしてもう一つ、:modal疑似クラスもサポートされています。CSSでモーダル要素を検出できる新機能で、今までJavaScriptでしかできなかったことがCSSでできるようになります。 Is it :modal? by Jhey Tompkins コンテナクエリ（@container）と:has()疑似クラスについては、先日の記事をご覧ください。 レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 :modal疑似クラスがCh
useCallbackはとにかく使え！ 特にカスタムフックでは - uhyo/blog
Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo
21 Best Practices for a Clean React Project
Photo by Diana Polekhina on Unsplash.React is very unopinionated about how things should be structured. This is exactly why it’s our responsibility to keep our projects clean and maintainable. Today, we will discuss some best practices to improve your React application’s health. These rules are widely accepted. As such, having…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Coding Techniques for TypeScript in React
GitHub - 30-seconds/30-seconds-of-code: Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
MPA化するSPAとSPA化するMPA
Next.js 2022年度リクルート エンジニアコース新人研修講義資料 - Speaker Deck
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo
Alphredo — Alpha colors generator
Custom Forms with No Server Code | Formspree
