【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
Figma プラグインの作り方
リアルタイムコラボレーションデザインツール Figma のプラグインの作り方について解説します。なお、公式ドキュメント (英語) は https://www.figma.com/plugin-docs/ にあります。とても体系的に整備されていてわかりやすいが、やはり英語ということもあり、二の足を踏んでいる方も多いかも知れません。本記事はなるべく 簡潔に、汎用的に、手順どおりに 解説していきます。少しでも日本人開発者が増えればと思います。 Figma とは デザインツールとして XD や Sketch とよく比較されますが、両者と違い Figma はウェブベース (ブラウザ上で使えること) 、リアルタイムコラボレーションに重点を置いて開発されています。ウェブベースですが、デスクトップアプリもあります。プラグインの開発にはデスクトップアプリが必須です。ウェブベースなので、プラグインは基本的に
クライアント側のフォーム検証 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
スクロール連動アニメーションの実装例 ｜ TAKLOG
スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。
スムーススクロールの実装例 ｜ TAKLOG
html要素にscroll-behavior:smoothを指定するだけのコストの低さ、それでいて従来のアンカーリンクの機能を損ねないことから「スムーススクロールはCSSのみで十分」といった技術記事やポストが多く広まっています。 ただ、そういった技術記事やポストは「CSSのみで対応できる」「ワンライナーで実装できる」と言ったコストの低さばかりが先行していて、肝心のデメリットには触れていません。 実際、CSSのスムーススクロールには多くの問題点が孕んでいます。 全てのページ内リンクがスムーススクロールされるCSSのscroll-behavior:smoothを使用すると、ページ内の全てのアンカーリンクがスムーススクロールの対象となります。そのため、限定的にスムーススクロールを無効化したいと言った場合は別途JSでの対応が必要となります。 僕のブログではJS無効環境のフォールバックとしてhidd
文章の折り返し指定のCSS最新版 - ICS MEDIA
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？ この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
CSSのlight-dark()関数の実践的な使い方、ライトテーマとダークテーマの作成方法
Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。現在のところ、サポートブラウザはChrome, Firefoxですが、Safari TPに実装されており、次のバージョンでサポート予定となっています。 CSSのlight-dark()関数の基礎知識と実践的な使い方を紹介します。 CSS color-scheme-dependent colors with light-dark() by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSにおけるシステムカラー light-dark()関数の基礎知識 light-dark()関数の使い方 はじめに システムカラーには、現在使用され
CSSでボタンを実装するときに記述しておくと便利なスタイルのまとめ
Webサイトやスマホアプリの実装に、ボタンは欠かせない要素の一つです。そんなボタンの実装に設定しておくと便利なCSSのスタイルを紹介します。 スマホでボタンをタップした際にズームなどの誤動作が起きないようにするCSS、ボタンのテキストが選択されてハイライトにならないようにするCSS、フォーカス時のアウトラインをより見やすくするCSS、ボタンの論理サイズを設定するCSSなど、デフォルトのスタイルとして設定しておくと便利です。 CSS Button Styles You Might Not Know by David Bushell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スマホでボタンをタップした際の誤動作を防止 ボタンのテキストの意図しない選択 ファイル選択のボタン ボタンをフォーカス時の視覚的なアウトライン
Defensive CSSを書こう
はじめ はじめまして、チームラボ フロントエンド班のLIUです。中国四川出身で、CSSとホラー映画が大好きマンです。新卒でチームラボに入社し、現在フロントエンドエンジニアとして働いています。 この記事では、フロントエンド勉強会（チームラボ内で、隔週で開催しているフロントエンドに関するLT会）で発表したDefensive CSSについての内容を紹介します。 レスポンシブデザイン タイトルは「Defensive CSS」ですが、まずはレスポンシブデザインについて話したいと思います。 モバイル通信の発展や、スマホブラウザがPC並みのパフォーマンスを実現したことで、レスポンシブデザインが広く普及しました。これにより、フロントエンジニアはスマホ専用サイトの制作から脱却し、CSSを用いて簡単に画面サイズに応じたレイアウトを実装できるようになりました。 しかし、レスポンシブデザインにはメリットだけでなく
タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG
タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるuntil-foundはhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキストマークアップ言語 | MDN 従来のhidden属性とは違い、until-found"属性値を指定した場合はブラウザのページ内検索やページ内リンクでそのコンテンツが検出された場合、自動でhidden属性が取り除かれて表示することができます。 従来のdisplay:noneを使用した非表示ではコンテンツ内にページ内検索でマッチすべきワードがあったとしても検出できませんでしたが、hidden="until-found"を使
キーボードのフォーカス可能なスクローラー | Blog | Chrome for Developers
Chrome 124 以降、キーボードにフォーカス可能な子がない場合、スクローラーはデフォルトでキーボードをフォーカスできます。 背景 スクローラーは至るところに存在しています。[利用規約] ボックス内に利用規約が表示される場合がありますが、一番下までスクロールして [送信] ボタンをクリックする必要があります。垂直のメニューバーに多数のアイコンが表示され、そこから選択することもできます。 このようなケースでは、多くのウェブユーザーがマウスやタッチパッドを上下に動かして、要素をスクロールします。ただし、ユーザーがページを移動するには、ポインティング デバイス、トラックパッド、タッチスクリーンが最適な方法とは限りません。一部のユーザーは、キーボードのみを使用して HTML ページ間を移動し、フォーカス可能なすべての要素にアクセスすることがよくあります。これにはさまざまな理由が考えられます。振
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1） - 水底の血
ツイッターでアクセシビリティ向上日誌２【目視試験編】‐Akira Tsuda Portfolio and Blogというのを見かけて、そういえばアクセシビリティチェックって何をどうしているのかという話をウェブ上でほとんど見かけない（というか自分は知らない）ので、思い切ってチェックの過程や考え方を書いてみようかなと。 チェック対象のサイトを作った@HeldaForStudy氏に尋ねたところ、題材として使ってよいという返事をいただいたので、「アトリエ金工やまぐち」のサイト1ページをチェックしてみることにします。 対象ページはBasic認証がかかっているので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください。 @HeldaForStudy氏はレベルはA*1でチェックしたとのことなので、チェック基準はWCAG 2.1レベルAでチェックすることにしましょう。 わたしは普段はCOB-
Incomplete List of Mistakes in the Design of CSS [CSS Working Group Wiki]
That should be corrected if anyone invents a time machine. :P
フォーカスの分類 | アクセシビリティBlog | ミツエーリンクス
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの23日目の記事です。 私はWebページの検証やコンサルティングの業務を多々行っており、開発者とやり取りすることもあります。その際、開発者に「フォーカスを受け取れるように、要素のtabindex属性に-1を設定してください」と伝えると、高い確率で「tabindex属性に-1を設定するとフォーカスを受け取らなくなるのでは？」と返されます。実際のところ、tabindex="-1"はフォーカスを受け取ります。 なぜ、そのような認識の違いが起こるかというと、ある要素がフォーカスを受け取るかどうかや、受け取るかどうかを制御する方法が複雑なためだと考えています。この記事ではその複雑性と、複雑性がどう整理されようとしているかを述べます。 フォーカスを受け取る経路 Webページでは要素がフォーカスを受け取る経路は、ユーザーの利便性や歴史
Next.jsで素朴なフォームをシンプルに作る
素朴なフォームを作る この記事では、素朴なフォームをNext.jsを使って簡単に（？）作る方法を順を追って解説します。これを読むことでNext.js AppRouterの新しい機能であるServer ActionsやuseFormStateなどの使い方理解が進むはずです。たぶん。 また、今回解説するServer Actionsを中心とした機能を用いれば、従来Reactでフォームを作る時のフロントエンドとバックエンド処理が煩雑になりがちなところを少しはシンプルに作ることができるようなります。ただし「素朴なフォーム」という前提ですが。 前提 Next.js v14.1 Next.js以外の外部ライブラリは使用していません HTMLのモックから まず素朴なフォームをHTMLから組み立てます。これ以上ないくらい素朴ですね。 素朴だ…（CSSのスタイル情報は記事上では消してます） export de
【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita
Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることにより、実際に表示するHTMlをレンダリングします。 メリット サーバーとの通信が初期遷移時のみに抑えられる ページ遷移が高速 デメリット 初回読み込み時に全てのデータを一括して取得するので、ページが表示されるまでの時間が長い（アプリケーションの規模が大きくなればなるほど、時間が長くなる） JavaScriptはブラウザで実行されているので、ページ表示までの時間（JavaScriptの実行時間）が使用しているマシンスペックに依存して
Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）
export default async function Layout({ children }: { children: ReactNode }) { const supabaseClient = createSupabaseServerComponentClient(); const { data, error } = await supabaseClient.auth.getUser(); if (!data.user) { // This is unreachable because the user is authenticated // But we need to check for it anyway for TypeScript. return redirect('/login'); } else if (error) { return <p>Error: An err
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/tsuj/status/1770451844650918227?s=12&t=723NaLvhx3eOTN3yhiSZEw
あなたが教わってるそのCSSテクニックはもう古い ｜ TAKLOG
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
