💧 MistCSSCreate React, Vue or Astro components with 50% less code! CSS-in-JS? Nope! JS-from-CSS 💖 How does it work?Coding visual component by hand can be quickly repetitive and error-prone. With MistCSS, you write your component in CSS only.
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
Bun — A fast all-in-one JavaScript runtime
Develop, test, run, and bundle JavaScript & TypeScript projects—all with Bun. Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.
次の時代のCSS in JSはWeb Componentsを従える
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
CSS Architecture on Vue.js
Open standards for building event-driven applications in the cloud
The Front-End Tooling Survey 2019 - Results
Front-end development Blog and Portfolio for Ashley Watson-Nolan – Senior UI Engineer at Just Eat It's been a little while coming, but the results from the 2019 Front-End Tooling Survey are now here! This year, 3,005 developers answered 27 questions covering a wide range of front-end tools and methodologies. As always, a massive thank you from me to every single person that took the time to fill i
CSS in JS でメリットも。 window.matchMedia を使う - DeNA Design
実装の Demo が確認できます。 ソースコードを見ると、 matchMedia メソッドの引数には、CSS のメディアクエリと同じ記述が入ります。 var mql = window.matchMedia("(max-width: 600px)"); これは、CSS in JS の環境において、 変数として再利用できるメリット があり、ブレイクポイントの記述が一元管理できます。 Vue.js で実装してみましたのでご確認ください。 <style lang="postcss" module> @value breakpoint: (max-width: 600px); .hello { background: #ccc; } @media breakpoint { .hello { background: #f00; } } </style> <template> <div :class="
Webpackerを導入してから外すまでをふりかえる - 弥生開発者ブログ
こんにちは、@mugi_unoです。 MisocaでjQuery製のフロントエンドコードを書き換え続けていた結果、技術書典6に参加することになりました。現在必死で書いております。 farewell_webpacker さて、先日とあるブランチがmasterにマージされ、リリースされました。 farewell : ごきげんよう！、さらば！ farewellの意味・使い方・読み方 | Weblio英和辞書 farewell_webpacker です。 長い間フロントエンドのビルドにはRailsのGemであるWebpackerを使ってきましたが、現在は完全に依存を外しており、純粋なwebpackビルドを行う形に書き換えました。 正直なところ、フロントエンド界隈からは否定的な意見を聞くことも多いWebpackerですが、実際にある程度の期間プロダクションで利用してみて、良いところも辛いところも両方
CSSカスタムプロパティ( CSS variables )のIE11対応polyfill作ってみた – やぶみの開発メモ
IE対応の制作はもうほとんどしてないけど、おもしろそうだったので試しに作ってみました！CSSカスタムプロパティ( CSS variables )をIEでも反映できます。（ただし外部CSSファイルのみです） デモダウンロードダウンロード（圧縮版） ※直リンクは禁止しております。あらかじめご了承ください。 IE9～11まで動作は問題なく、パターンも一通り網羅できてるとは思いますが、予想外の記述には対応できない部分もあるかもしれません。正規表現でマッチさせて置換しているだけなので＾＾； カスタムプロパティで背景や画像を指定している場合は”絶対パス”で記述してください！ （※CSSファイルを圧縮した状態ではエラーになりました。いずれ対応しますが、現段階では圧縮せずに上記ファイルをお使いください。） ※ 2020/02/16 に圧縮CSSにも対応いたしました。ダウンロードリンクも最新のものに差し替え
BackstopJSではじめるビジュアルリグレッションテスト - astamuse Lab
こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。 今回は、BackstopJSを使ったビジュアルリグレッションテストについて書きたいと思います。 ビジュアルリグレッションテストとは視覚的な回帰テストのことで、具体的にはスクリーンショットを撮影して差分抽出して行うテストです。 近年のWebフロントエンド開発では、SassやWebpackのような開発環境が整うに従ってスタイルシートをモジュール化することが増えています。 それはスタイルの汎用性を高めることに大きく貢献していますが、一方で、あるパーツのスタイル修正が想定外の場所で悪影響を及ぼしてしまう可能性をもつようになりました。 この問題に対処するために、Enduring CSSのような新しいタイプの設計手法も考えられてはいますが、既存のサービスに導入するにはかなり敷居が高いでしょう。 そこで注目したいのが、ビジュアルリ
【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報｜TechRacho by BPS株式会社
こんにちは、hachi8833です。 Rails 5のWebpackerでつらみを踏まないために、公式のWebpackerドキュメントの要点をまとめてみました。追加情報がありましたら今後も更新したいと思います。 rails/webpackerより 公式のドキュメントが分散しているのと、mdファイル名から内容が推測しにくくて見通しがよくないので、ファイルの並びを再編成して概要を一覧できるようにしました（せめてファイル名の頭に番号でも振ってくれれば...）。具体的な設定方法についてはリンク先をご覧ください。 ⚓概要 ドキュメントリポジトリ: rails/webpacker/tree/master/docs -- mdが16ファイルあります。本記事ではこちらのみを扱います。 上のドキュメントリポジトリの最終更新日: 2018/04/23 更新や誤りにお気づきの方は@hachi8833までお知らせ
Web Components で 社内 UI ライブラリを作っている 話
WebComponents.kyoto Meetup #2 での発表資料です。 https://wc-kyoto.connpass.com/event/78690/
ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
Cacooチームエンジニアの川端です。普段はCacooのエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので娘の写真を親に共有するアプリを作ってみました。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Componentsとは？ Web Componentsとは、HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群です。ReactやVueやRiotでいうところのコンポーネントをライブラリを使うことなく素のJSだけで作ることができる技術になります。 Web Components | MDNによると次のように記されています。 Web Components は、オープンなウェブテクノロジーを
Shadow DOM v1: self-contained web components | Web Fundamentals - Google Developers
Shadow DOM v1 - 自己完結型のウェブ コンポーネント コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 まとめ Shadow DOM は、ウェブアプリ構築の脆弱さを解消します。脆弱な原因は、HTML、CSS、JS がグローバルであるという性質にあります。Google は長年にわたり、この問題を回避するために膨大な数のtoolsを考案してきました。たとえば、新しい HTML の ID またはクラスを使用すると、ページで使用されている既存の名前と競合するかどうかわかりません。微妙なバグが発生して、CSS の特異性が大きな問題になり（すべて !important）、スタイル セレクタが制御不能になり、パフォーマンスが低下する可能性があります。他にもたくさんあります。 Shadow DOM は、CSS と DOM を修正します。ウェブ プラットフォーム
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
20+ JavaScript Dropdown Select Box Examples - OnAirCode
Facebook CSS-in-JS Solution Stylex Introduced at React Finland 2021
cssModules localsConvention = 'camelCase' is not reflecting in nuxt app · Issue #7223 · nuxt/nuxt
画像の最適化 | Web | Google Developers
How to fix popup's scrolling on Safari
bera - npm