はじめに こんにちは。Repro で Booster の開発をしている杉浦と申します。 最近は JavaScript の盛り上がりが凄いですね。今ではブラウザ内にとどまらず、サーバサイドでも活用される様になりました。 これには、言語仕様が整理されたり機能が強化されたり、非常に大きな発展があったという点が大きいです。 実は、言語としての JavaScript だけではなく、最近 HTML との境界インタフェースとしての JavaScript の仕様も最近かなり明確化されてきています。 自分も HTML5 の最初のあたりまでは把握していたのですが、Booster の開発に携わる中で久しぶりに確認したところ、随分と仕様が進化し複雑になっていました。 今回はそんな HTML 規格の変化部分の紹介と、過去からの HTML と JavaScript の流れを振り返る簡単なまとめです。 HTML 仕様と
コーダーができるサイトの高速化10選
はじめに この記事では「コーダーが対応できるサイトの表示速度向上」についての具体的な手法を紹介していきます。 サイトの表示速度はユーザー体験を大きく左右し、サイトの種類によってはUI（サイトの見た目）より重要視される場合もあります。 2017年にはGoogleが「ページの読み込み速度によって離脱率が変わる」と発表しました。 ・1〜3秒の離脱率：32% ・1〜5秒の離脱率：90% ・1〜6秒の離脱率：106% ・1〜10秒の離脱率：123% 引用：https://www.thinkwithgoogle.com/ このようにサイトの表示速度はとても重要な指標になります。 サイトの表示速度向上には様々な手法が存在して、効果が出やすいものもあれば出にくいものもあり、実際に本番反映してみないと結果が分からないものもあります。また、難易度や実務上で許可を貰いやすいかなども考えなくてはいけません。 これ
Notionでプログラミングノートを作って効率化しようNotionは、オールインワン・ワークスペースとして知られる文書管理ツールです。文書の作成や管理、共有に便利な様々な機能を持ち、情報管理の効率化に役立ちます。 Notionが持つ機能は、プログラミングノートの作成にも適しています。ページの階層構造やデータベースで情報を管理し、リンクブロックやコードブロックなどの便利なブロックにより、分かりやすく、見やすく情報をまとめることができます。 この記事では、プログラミングノートの作成に適したツールを探している方のため、Notionでプログラミングノートを作るメリットや、実際の作成方法を図解します。Notionでどのようなプログラミングノートが作れるかチェックしてみてください。 【参考】：Wiki、ドキュメント、プロジェクトがつながるコネクテッドワークスペース | Notion （ノーション）
2024-03-27に行われたFindy『フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~』の登壇資料です https://findy.connpass.com/event/312625/
コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズによるクエリだけではありません。親のスタイル値によるクエリ（スタイルクエリ）も可能です。スタイルクエリを使えるようになると、どんな風に便利になるかを紹介します。 Add Superpowers to Your CSS Variables with Style Queries by Jared White 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スタイルクエリを使えるようになると スタイルクエリは変数と組み合わせると、さらに強力 スタイルクエリを使えるようになると CSSはスタイルクエリの登場により、さらなる
CSSでこの機能を待ち望んでいた人もいると思います。 セレクタの適用範囲を設定できる@scopeがいよいよChromeでサポートされます。@scopeの基礎知識と使い方を紹介します。 たとえば、下記のHTMLにはimgが2つあります。@scopeを使用すると、1つ目の.media-object直下のimgにのみスタイルを適用できます。.content内のimgはターゲットにされません。 A quick introduction to CSS @scope by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS @scopeがなぜ必要なのか CSSカスケードの仕組み CSS @scopeの基本的な使い方 @scopeのさらに優れた使い方 はじめに CSSの@scopeについてご存じですか？ @sco
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience
開発者向けのツールを展開する企業「JetBrains」がドキュメント作成のためのツール「Writerside」を早期アクセスで公開しました。早期アクセスの期間中はWritersideを無料で利用できるとのことなので、実際に使って試してみました。 Writerside - JetBrains が提供する新しい技術文書作成環境。 https://www.jetbrains.com/ja-jp/writerside/ Writersideの公式ページを開き、「ダウンロード」をクリックします。 今回はスタンドアロンツールとして利用するので、「ダウンロード」をクリックします。JetBrains IDEを利用している人はプラグイン形式で導入することも可能とのこと。 インストーラーがダウンロードされるのでダブルクリックして起動します。 「Next」をクリック。 インストールには空き容量が1.0GB必要で
HTMLやCSSのデモページでコードを見ると、HTMLに自己終了タグ（/>）が使用されているのを見かけたことはありませんか？ HTMLにおける自己終了タグの使用、自己終了タグの歴史的背景、自己終了タグの使用に対する賛否両論について紹介します。 The case against self-closing tags in HTML by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに />の歴史的背景 />に対する賛否両論 Prettierには一貫性がない それとも、HTMLは閉じタグをどこでも使用できるのでしょうか？ はじめに />について話をしましょう。
便利なのが登場！ フロントエンドの開発に役立つ最新ツールがひとまとめに利用できる -HTML＆CSS Code Generator
HTMLやCSSをはじめとする、フロントエンドの開発に役立つ最新ツールがひとまとめに利用できるHTML & CSS code generatorを紹介します。 いろいろなツールをどこだっけなと探すときもあると思うので、ブックマークしておくと便利です。 HTML & CSS code generator HTML & CSS code generatorは、フロントエンドのデベロッパー向けに最新ツールがオールインワンで利用できるサイトです。ツールはすべて無料で利用でき、登録など面倒なことは一切不要です。
知っておくと便利なCSSの単位: ビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 前回はフォントに基づく相対単位でしたが、今回はビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を紹介します。 Relative length units based on the viewport -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: vwとは CSSの単位: vhとは CSSの単位: vbとviとは、ブロックとインライン CSSの単位: lvh, svh, dvhとは ビューポート単位の解説動画
Modern CSS For Dynamic Component-Based Architecture | Modern CSS Solutions
Modern CSS For Dynamic Component-Based Architecture Updated on: Jan 19, 2024 Written by Stephanie Eckles The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers. Today, we will
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
Tailwind CSS実践入門 ～まず作ってから、あとで共通化する Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ CSSフレームワークのTailwind CSSが注目を集めています。その特徴は、flex、pt-4、text-centerといったユーティリティクラスの組み合わせだけで、ほとんどすべてのスタイリングをしてしまおうという大胆なアプローチです。これまでのベストプラクティスと真っ向から対立するようなやり方ですが、だからこそ享受できるいくつもの強みがあります。本特集では、そうしたTailwind CSSの考え方や、具体的な使い方について紹介します。 お知らせ：本特集のサンプルコードは、GitHubの筆者リポジトリからダウンロードできます。https://github.com/yuheiy/wdpress133_
HTML HTMLの仕様策定には複雑な歴史があります。詳細は他の解説記事に譲りますが、簡単に述べるとW3CとWHATWGのダブルスタンダード状態が長い間続いていました。2022年現在はWHATWGによってLiving Standardとしてまとめられた仕様が実質的な標準となっています。Living Standardという名前が示す通り、バージョンはなくエディターによって随時更新されています。 CSS CSSの仕様はW3Cが策定しています。現在は、CSSとして1つの標準仕様があるわけではなく、数多くのモジュールに分かれて標準仕様の策定が進められています。草案、勧告候補などを経て勧告に至るプロセスと、Levelという概念で整理されたバージョン管理が特徴です。年に1度、SnapShotとしてその時点での標準化の概況が公開されています。 JavaScript JavaScriptは主にWebブラウ
フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。 HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメ
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
こんにちは。日頃は blockchain の記事ばかり書いていますが、たまには生成 AI についても書きたいと思います。テーマは生成 AI で出来るだけ思い通りにサイトの生成を行います。 前提 今回は以下条件のサイトを生成します。 Next.js Tailwind LP向け レスポンシブ向け また、検証で利用した GPT は ChatGPT 3.5 です。 Bing Copilot を使用する場合、可能であれば Web 検索との連動を OFF にすることをオススメします。また、自社独自の専門用語をプロンプトへ加える場合は適宜補足説明を手動、または RAG 等でプロンプトへ加えてください。 背景 この記事を書くに当たって感じていた課題と解決したことを記載します。 課題 普段は、GPT系を駆使して素早くコードを作成することを心がけています。バックエンドの生成にはそれほど問題はないのですが、フロ
2024年1月24日 CSS, Webサイト制作 制作時に「CSSファイルをこれ以上増やしたくない…」「クラス名を考えるのしんどい…」なんて思ったことはないでしょうか？私はあります！あれこれ試した結果、Tailwind CSSが使いやすかったので、導入時につまづいたポイントと解決方法をまとめてみます。 ↑私が10年以上利用している会計ソフト！ Tailwind CSSとは Tailwind CSSは、あらかじめ多くのクラスが用意されているCSSフレームワークです。Webサイトを制作する時に、HTMLの要素に直接、定義済みのクラスを付与して使用します。基本的に1つのクラスに1つのスタイルが当てられていて、例えば「m-0」というクラスをつけると margin: 0px; が、「w-full」というクラスをつけると width: 100%; が加えられます。 実際にどんなものか見たほうが早そうで
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、新規機能実装などに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか なぜ移行
半角スペースを表示したいなら ではなくwhite-space: pre;を使いましょうという話 - Qiita
はじめに 連続する複数の半角スペースは1つにまとめられたり、先頭末尾の半角スペースは省略される これははじめてHTMLに触れた人が戸惑う部分だと思います。 ではその半角スペース分の空白をどのようにして表示すればいいのかと調べれば、 などの特殊文字を紹介する記事が数多くヒットします。 HTMLでの半角スペースは なんだと強引に表現するサイトもありますが、半角スペースと が異なることは調べればすぐわかります。 もう文字コードから違います。 半角スペースと は別物なのに、半角スペースを表示するために を使っていいのでしょうか？ 答えはNoだと思います。 結論 半角スペースを半角スペースとして表示するにはwhite-space: pre;を使います。 preはおそらくpre要素のpreですね。 white-spaceはCSSプロパティです。 つまり
タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるuntil-foundはhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキストマークアップ言語 | MDN 従来のhidden属性とは違い、until-found"属性値を指定した場合はブラウザのページ内検索やページ内リンクでそのコンテンツが検出された場合、自動でhidden属性が取り除かれて表示することができます。 従来のdisplay:noneを使用した非表示ではコンテンツ内にページ内検索でマッチすべきワードがあったとしても検出できませんでしたが、hidden="until-found"を使
【HTML】dl, dt, ddで組みたくなる表、tableにするのがいいかもね（スクリーンリーダーと検索エンジンのために）
dl や ul で組むべきでないという主張ではありませんので誤解のなきよう！ dl で書くんだ！と思える人はそれがいいと思います😉👍 私自身は dl と table が HTML の使い方としてはどちらも正解で差がないように感じられて、どちらを使うべきか判断がつかず悩んだ末、具体的なメリットの部分を見て table にしたという話です。 同じように迷った人の参考になれば幸いです。 詳しくは以降で説明します。 想定する表の内容 この記事の議論では、名前と値の組が複数並んでいる、メタデータの表を想定します。 プログラミング言語でいうところの、連想配列 (Map, Dictionary, JS では Object) の構造に相当します。 具体的には以下のようなものです。 会社概要（「会社名：〇〇、所在地：〇〇、資本金：〇〇、…」） 商品の仕様表（「商品名：〇〇、価格：〇〇、サイズ：〇〇、…」
XDからFigmaへ移行したい人のためにFigmaの機能を紹介
XDからFigmaへ移行したい人のためにFigmaの機能を紹介 この記事では、XDからFigmaに移行しようとしている方、Figmaを使ったことのない方に向けて、Figmaの機能の中からよく使用するものを紹介しています。 この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 マスクとして使用 Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。 画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。 マスクの作成方法 マスクとして使用したい図形の前面に画像を配置します。 図形と画像の両方を選択した状態にし、上部ツールバーにある［マスクとして使用］アイコ
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
By all accounts, Figma has been an amazing tool for designers. We've used it extensively at 37signals, and I'm sure most every other software shop has too. Adobe didn't pay $20 billion for nothing. But we don't do the bulk of our design work with or in Figma when developing Basecamp or HEY for the web. That's all done directly in HTML and CSS, as it should be. Because no matter how good Figma is,
日本語の単語を適切な位置で区切って読みやすく改行してくれる軽量でオープンソースなライブラリ「BudouX」の機能＆採用例＆デモはこんな感じ、Chrome 119に実装予定で簡単に利用できる見込み
日本語のページをブラウザで見ているとおかしな位置で改行されることが多いのですが、単語と単語の間にスペースを入れる英語などと異なり、日本語では分かち書きがされていないのが原因。単語の途中で文章が折り返されてしまう原因になっています。BudouXは機械学習モデルを利用して容量を抑えつつ、サードパーティーのAPIやライブラリに依存せずに分かち書きを行ってくれるオープンソースライブラリなので、読みやすい改行が実現できます。 Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器 https://developers-jp.googleblog.com/2023/09/budoux-adobe.html BudouXの使用イメージは下図の通り。従来は画面幅によっては「最先端」や「テクノロジー」などの単語の途中で改行が行われてしまう事がありましたが、
CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスCSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 2024年4月24日 「NES.css」開発者 ダーシノ SIerでの業務アプリ開発や職業訓練校でのプログラミング講師を経て2015年にさくらインターネット株式会社にフロントエンドエンジニアとしてジョイン。2018年にファミコン風CSSフレームワーク「NES.css」を開発、公開する。人生の目標に「笑って死ぬ」を掲げている。柔道初段。 X ブログ GitHub ファミコン風のデザインのWebページをすぐにつくれる、オープンソースのCSSフレームワーク「NES.css」。フロントエンドエンジニアのダーシノさんが2018年にGitHu
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes
HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。 CSS Triangle Shapes CSSで三角形を実装する最近の方法 CSSで三角形を作成するジェネレター CSSで三角形を実装する最近の方法 まずは、三角形をCSSで実装する方法を見てましょう。 これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。
はじめに レスポンシブサイト構築の際に、何かと悩む（ちょっと煩わしい）のがfont-sizeの指定方法なのではないでしょうか？ 今回はそんな煩わしさがすこしでも減るように、レスポンシブデザインのためのfont-size指定方法テクをご紹介します☺︎ 目次 1. 単位のおさらい 2. テクニックたち（④が最もおすすめ！サクッと読みたい方は③（④の序章みたいな感じです）からどうぞ！） ① おすすめ度★★ px/rem × メディアクエリ ② おすすめ度★ vw ③ おすすめ度★★ calc × rem × vw ④ おすすめ度★★★ calc × rem × vw × clamp 単位のおさらい テクニックをご紹介する前に、押さえておきたい単位をまとめてみました。 単位
HTMLソースコードから個人情報が筒抜け？ Chromeなどのブラウザ拡張機能の多くで脆弱性 米研究者らが発見
HTMLソースコードから個人情報が筒抜け？ Chromeなどのブラウザ拡張機能の多くで脆弱性 米研究者らが発見：Innovative Tech 米ウィスコンシン大学マディソン校に所属する研究者らは、HTMLソースコードからのパスワード、クレジットカード情報などのユーザーデータを抽出可能なブラウザ拡張機能について、多数の人気Webサイトが脆弱であることを明らかにした研究報告を発表した。
会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ
Mamba UI
Kickstart your next website in minutes Mamba UI is a free, open-source collection of UI components and templates based on Tailwind CSS. Make the web your playground Easy to use UI elements based on Tailwind CSS Mamba UI is a toolkit for developers and designers to make creating interfaces easier. We have some of the most popularly used components to help you get started. Everything is modular and
ReactのUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常はbutton要素としてレンダリングされるButtonコンポーネントを使うときに、代わりにa要素を使ってレンダリングしたいというケース。 as prop そのような場合、一般的には、Buttonコンポーネントにas propを実装して対処することが多い。 function Button({ as: Component = 'button', ...props }) { return <Component {...props} />; } render( <> <Button type="button"> I’m a <code>button</code> element </Button> <Button as="a" href="
( 2022年、仕事中であった事例からいろいろまとめた資料を Qiita に記載 ) 私は自社開発の会社に勤めるサーバーサイドエンジニア。 去年(2022年)、フロントエンドエンジニアが書いてたHTMLを見てたら以下のようなコードを見つけた。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SCRIPT 要素の変遷から触れる Web の進化 - Repro Tech Blog
Notionでプログラミングノートを作ろう！図解で作成方法を解説
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
CSSでスタイルクエリ（@container style()）を使えるようになると、実装がいろいろ便利になる
CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方
コード開発と同じようにしてドキュメントが作成できるJetBrains製「Writerside」を使ってみた
HTMLにおける自己終了タグの使用、歴史的背景、使用に対する賛否両論
Tailwind CSS実践入門 第1章 ユーティリティファーストとは何か ──従来の課題を解決する大胆なアプローチ | gihyo.jp
HTML, CSS, JavaScriptの標準の仕様書はどこにあるのか
コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは - ICS MEDIA
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
生成AI で思い通りのサイトを出力しよう - Qiita
Tailwind CSSを使う時の疑問と解決方法
フロントエンドのディレクトリ設計を移行した話 | Atomic Design → Feature
タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG
Design for the web without Figma
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
【CSS】レスポンシブなfont-size指定テクニック4選 - Qiita
Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
登録不要・無料のPython学習環境「PyWeb」にWebアプリ（CGI）実行機能が追加／HTML/CSSでWebフォームを作って、Pythonプログラムと連携
ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン
imgタグの変化 - 気づいたら時代遅れなHTMLを書いてた - Qiita