Webアプリケーションで 60fpsを(極力)目指すKMC 春合宿2017で発表したトークです。
JavaScriptのUIライブラリはどうあるべきかという話とOnsen UIのアーキテクチャ - id:anatooのブログ
Onsen UI Advent Calendar の12/9の記事です。 Onsen UIは、モバイルアプリのネイティブライクなUIをHTML + CSS + JavaScriptで簡単に構築することを目的としたUIライブラリです(UIフレームワークともたまに呼ばれます)。 ↓みたいなネイティブなモバイルアプリっぽい画面をサクッと作ることができます。 私は数年前から開発メンバーとしてOnsen UIの設計開発を行っています。この記事では、Onsen UIに求められるUIライブラリとしての要件とそれを解決するためにどのようなアーキテクチャを取っているのかについて解説します。 特定のフレームワークに依存しない jQuery UIやReactの上に乗っかっているUIライブラリなどのように特定のフレームワークの仕組みを使って実装されたUIライブラリというのはたくさんありますが、ある特定のフレームワ
Milligram - A minimalist CSS framework
Why it's awesomeMilligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy! Do you want to star it, tweet it, or share it with anyone? So do it! This means a lot to me ♥ Getting St
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
Is Houdini ready yet‽
Paint API in Google ChromeVersionChrome 65. Release date: March 6, 2018NotesFeature on ChromestatusDebugging (i.e. breakpoints) do not work.No support for `paint()` arguments prior to Chrome 78, due to the lack of support for Properties and Values API.Close Paint API in Microsoft EdgeVersionEdge 79. Release date: January 15, 2020NotesDebugging (i.e. breakpoints) do not work.Close Paint API in Oper
Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ
CSS in JS と CSS Modules // Speaker Deck
ng-kyoto 主催「ng-kyoto Angular Meetup #3」での発表資料です。 http://ng-kyoto.connpass.com/event/20512/
Wing | SLOT MACHINE GAME
จำเป็นอย่างมากที่ต้องหาตัวช่วยมาเสริมดวงอย่างเครื่องราง-ของขลัง ดังนั้นเมื่อ “มีทักษะที่ชาญฉลาดแล้ว ต้องมีสิ่งต่อไปนี้ช่วยล่ารางวัลด้วย” โดยทางเราหมายถึงอะไรบ้าง ตามมาดูกันได้เลย!!!
CSS Triggers List - What Kind of Changes You Can Make
• Layout • Paint • Composite align-content Changing align-content alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations. Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together. align-items Changi
Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap
Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons! The Freedom of CSS Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! Use In Graphic Apps Weather Icons come with OTF and TTF files
HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について | blog.jxck.io
Intro Chrome が予定している <link rel=stylesheet> の挙動の変更について、 Google Chrome チームの Jake が、興味深いブログを上げている。 The future of loading CSS この内容は、単に Chrome に対する変更だけではなく、 HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。 今回は、この内容を意訳+補足解説し、本サイトに適用していく。 HTTP/1.1 時代の CSS HTML 自体がコンポーネントを意識した作りになっている場合は、自然と CSS も class などを使いコンポーネント単位に作ることができるだろう。 しかし、 HTTP/1.1 では、リクエストの数を減らすために全ての CSS を 1 つ(もしくは少数個)に結合する最適化が主流だ
Bootflat
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. And, for the designers, we offer a free PSD Download. It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps. Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome. Download (Version 2.0.4) MIT Licensed - Version 2.0.4 Learn more Designed for e
サルでも分かるOOCSS（オブジェクト指向CSS）。未だにidを使っている愚かなフロントエンジニアへ
サルでも分かるOOCSS（オブジェクト指向CSS）。未だにidを使っている愚かなフロントエンジニアへ 2015.08.02 タイトル煽りすみません。idもidで使い方によっては大事です。。。 ただし実際のところ、CSSの設計でid（#）がかなり減ってるのをご存知でしょうか。近年のフロントエンドの流行ではidをちょいちょい使うよりも「めんどいから全部class（.）にしてしまおうぜ」っつー流れがあります。 ……とはいっても、「めんどいから」というのが唯一の理由なのではなく、まぁ色々理由はあるのですが、その中のひとつに「OOCSS（Object-Oriented CSS）の思想が普及してきたから」があって、今回はそのOOCSSについて どんなバカでも分かるように サワリをご紹介したいと思います。 よかったですね、OOCSSを知らなかった愚かなフロントエンジニアの皆さん！ ご紹介したいと思います
本当にCSSの詳細度は必要なのか | POSTD
(訳注：2016/01/05、頂いたフィードバックをもとに記事を修正いたしました。) まず、初めに言っておきたいことがあります。この記事は、私がどれほど詳細度を嫌っているのかを延々と書いたもの ではない ということです。もしそのような内容の記事を読みたいのであれば、インターネットで探してください。たくさんあるはずです。 この記事の目的はWeb開発コミュニティにただ質問を投げかけることですので、その答えを考えてもらえれば嬉しいです。 問題の核心を突くために、質問を言い換えてみましょう。「 カスケードに詳細度が追加されていない世界の方が良かったのでしょうか、悪かったのでしょうか。 」 もちろん、この質問を見て、 どうでも良いでしょうとか、詳細度は存在するのだから我慢するしかない、考える必要はないだろう と思う人がいることでしょう。 そう思っている人に、このような考えは正しくないということをお知
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - maxbeier/text-spinners: Pure text, CSS only, font independent, inline loading indicators
GitHub - Khan/aphrodite: Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
GitHub - krasimir/cssx: CSS in JavaScript
GitHub - axross/bemmer: :lollipop: BEM-like simple classname builder.
GitHub - MicheleBertoli/css-in-js: React: CSS in JS techniques comparison
Flexbox Froggy
