どうも、sakitoです。 本業や副業でもReactを使っているのですが、CSS-in-JSを実現するためのライブラリとして、emotionを採用しています。 今回はemotionの紹介も交えながら、採用している理由を投稿します。 emotionとは？ emotion - Introductionでも記載があるとおり、glam、glamor、styled-components、glamorousに触発された後発ライブラリです。 たとえばglamorousはpaypalが開発をしていたcss-in-jsのライブラリなのですが途中でメンテナンスが停止しました。 その理由については、glamorousのGitHubにこのような記載があります。 For details on the unmaintained status (and to help people with an automated
WeAreJavaScripters@15th https://wajs.connpass.com/event/76238/
フロントエンド開発においてトランジション、アニメーションの実装は比較的難しいものだと思いますが、心地の良い UI を作るためには必要不可欠です。Vue.js にはその実装を簡単にしてくれる機能があるので、デモを交えながらその使い方と、強力さを紹介します。 <transition> コンポーネント要素が挿入、削除される時のアニメーションは Vue.js デフォルトで用意されている <transition> コンポーネントを使用することで簡単に書くことができます。<transition> コンポーネントはただ一つの子要素を持ち、子要素の表示状態に応じてアニメーションに関する処理を行います。例えば、以下のようなコードになります。 <transition> <p v-if="isAppear">この要素はアニメーションの対象になります。</p> </transition> 上記の例では <tran
追記 最新の感想も合わせてご覧ください。 jinjor-labo.hatenablog.com React界隈では結構前から「CSS in JS」と言って、雑に言うと「CSSはイケてないからJSでインラインスタイルを書いてしまえ」という話がある。（ちゃんと知りたい人はこちら） 自分も前々からCSSは変数が使えないとか名前が被るとか諸々イケてないのは同意してたんだけど、じゃあJSで書くのが良いかと言われたら「いや流石にロジック汚れるんじゃね？」とか「CSSの便利機能を捨てて平気なの？」とか色々と懐疑的だったんだけど、１～２か月書いてみたら想像以上に良かったので感想を書くことにした。 まず一番に主張したい部分を先に言うと、こう。 （誤解）JSのコードがスタイル記述で汚れる （正解）JSのコードがスタイル記述から解放される 前提 実際に書いたのはJavaScriptではなくElmなので以下は全て
http://greensock.com/css-performance 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約3時間前 GreenSockが、「アニメーションのパフォーマンスは、CSSが常に優れているというわけでない。」という観点からベンチマーク調査した結果を公表。それに対して、GoogleのPaul Irishが反論。詳細やりとりはサイトを確認していただければと思いますが、ポイントはコメント欄で交わされている結論かと。 Paul Irish 独立したtransformコントロールを必要とする場合、CSSのみのアプローチではelementのカウントが膨れ上がるので、JavaScriptの方が相当よい結果を残す。それ以外のケースでは、理想的な実装がされているという前提に立てば、両者のパフォーマンスは同
Internet Explorer 7から対応したHTML/CSS/JS Internet Explorer 7はMicrosoft社から2006年10月18日（日本語版は11月2日）にリリースされたウェブブラウザ。 HTML 透過PNGフォーマット abbr要素 CSS 子供セレクタ（親要素 > 子要素 ） 隣接セレクタ（要素1 + 要素2） 間接セレクタ（要素1 ~ 要素2） 属性セレクタ（[属性名], [属性名="属性値"], [属性名~="属性値"], [属性名|="属性値"]） a要素以外をセレクタにした:hover擬似クラス, :active擬似クラス :first-child擬似クラス max-widthプロパティ, max-heightプロパティ min-widthプロパティ, min-heightプロパティ positionプロパティの fixed の値 border-c
JuicerはCSSやJavaScriptのマージや短縮化を行うRubyライブラリです。短縮にはYUI Compressorを使っています。 JavaScriptやCSSを使っている際に一緒に使ってほしいのがJuicerです。短縮化やファイルのマージなどをコマンド一つで行ってくれます。 インストールはRubygemsで行います。juicerのインストールコマンドでYUI Compressorなどもインストールします。 YUI CompressorとJS Lintをインストールしました。 CSSの記述例です。?embed=trueと書いてあるのがミソです。 コマンドを実行します。importに書かれている内容を取り込んだり、短縮化します。--embed-image dara_uriをつけて実行しています。 そうするとこんな感じにパスで指定した画像がData URIとして取り込まれます。 もち
スマートフォンにてソーシャルゲームを作ろうとすると、HTML5を中心にブラウザで動作するもの、もしくはネイティブアプリでの提供ということになります。モバゲータウンやグリーはその両方をサポートしています。ネイティブアプリの作り方は既に文献も多数なのですが、HTML5となるとまだ十分とは言えません。この資料は必見です。 「HTML5@iPhoneゲーム開発」はディー・エヌ・エーのスマートフォン開発グループの岸弘倫氏が「DeNA Technology Seminar #3」での講演用に作成したものになります。同社では北米のMiniNation向けにiPhone『Pirate Nation』(海賊トレジャー)をHTML、CSS、JavaScriptで開発して提供していて、そのノウハウを凝縮したものです。 『Pirate Nation』は冒頭の括りで分けるとブラウザで動作するアプリということにな
日経LinuxとITproは、総計約700項目のHTML／スクリプト言語リファレンスを公開しました。「HTML」（295項目）、「CSS」（73項目）、「Dynamic HTML」（98項目）、「JavaScript」（295項目）、「Perl」（125項目）あわせて698項目。各項目にサンプルコードを掲載しており、コピーし貼り付けてすぐにお使いいただけます。JavaScriptは「この用例を実行する」という文字をクリックすれば、その場でサンプルコードを実行してみることもできます。 ファンレンスを使いこなすための記事や、「JavaScript入門」「Perlの使い方入門」「CSSの基本」「Linuxコマンド道場」「シェル・スクリプト工房」といった入門記事もご用意しました。 これらのリファレンスはここ2～3年かけて作成してきたものです。そのため一部に内容の古いものもありますが、順次更新してい
Safari for developers Safari is the best way to experience the internet on iPhone, iPad, and Mac. Thanks to blazing-fast performance and industry-leading energy efficiency, millions of users enjoy exploring the web with Safari. Take advantage of powerful new features, advanced developer tools, and cutting-edge technologies in Safari to deliver best-in-class websites and apps. Spatial web in Safari
ReducisaurusはJava製/Google App Engine用のオープンソース・ソフトウェア。Webアプリケーションが隆盛になり、JavaScriptを多用したシステムやCSSによる凝ったデザインのサイトが増えてきた。それぞれフレームワークを使ったりして複数のファイルを扱うケースも多い。 設定方法 JavaScriptやCSSのファイルを複数読み込むにはその分だけコネクションを行う必要があり、負荷がかかってしまう。そこで使ってみたいのがReducisaurusだ。ローカルファイルやリモートのファイルを読み込んで一つにまとめてアクセスできるようになる。 ReducisaurusはGoogleのエンジニアでJaikuの開発にも関わっているプログラマによるソフトウェアだ。実行はGoogle App Engine上で可能になっている。自分でサーバを立てることもできるし、Reducisa
「ウェブリブログ」は 2023年1月31日 をもちましてサービス提供を終了いたしました。 2004年3月のサービス開始より19年近くもの間、沢山の皆さまにご愛用いただきましたことを心よりお礼申し上げます。今後とも、BIGLOBEをご愛顧賜りますよう、よろしくお願い申し上げます。 ※引っ越し先ブログへのリダイレクトサービスは2024年1月31日で終了いたしました。 ※10秒後にBIGLOBEのおすすめページに遷移します
HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。 私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。 今日作ったのは、HTML5+CSS3上で可能になる（ただし現在ではWebkit独自の拡張を含む）３つのアニメーション・テクニックの比較（左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ（ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか？））。 詳しくはソース（参照）を見ていただければ
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Justin Johnson氏がSmashing Magazineにおいて10 Useful CSS/JS-Coding Solutions For Web-Developersのタイトルのもと、WebデベロッパやWebデザイナ向けに役に立つ10のデザインソリューションを紹介している。デザインソリューションの紹介と、それを実現するためめのHTML、CSS、JavaScriptサンプルがまとめられている。 10 Useful CSS/JS-Coding Solutions For Web-Developersで紹介されているソリューションは次のとおり。 インラインコンテンツイメージ (画像をテキストコンテ
株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/4/30 ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部） 連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。 今回は、CSS・JavaScript・HTMLの工夫で速度を改善する下記5つの方法を紹介します。中にはYSlowの指摘に含まれないものもありますが、併せてチェックしていきましょう。 CSSはソースコードの上部に記述する JavaScriptはソースコードの下部に記述する CSSとJavaScriptを書く順番 JavaScriptを圧縮して読み込みを速くする 読み込みが遅いブログパーツには要注意 【1】CSSはソースコードの上部に記述する 連載第1回では、「CSSは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
