You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
近々リリース予定の Sass 3.4.0 では、& が SassScript で使えるようになるほか、セレクター関連の関数が大きく充実する。SassMeister ではすでに使えるので いくつか試してみた けど、セレクターを置換するselector-replace() 関数がかなり便利そう。 使用例としてはまず、ネストしたセレクターで、ルートと直近のセレクターの間に別のセレクターを挿入する、というのが考えられる。 .outer { color: red; .inner { color: green; @at-root { #{ selector-replace(&, '.outer', '.outer .foo') } { color: blue; } } } } & で親セレクター .outer .inner を参照し、そのうち .outer を .outer .foo に置換することで
印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理?」といったご相談を受けることがよくあります。 今年に入って、HTML5&CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。 目次:段組み縦組み(縦書き)行末揃え(両端揃え)先頭文字スタイル(ドロップキャップ)段落先頭1字下げ2行目から1字下げ(ぶら下げインデント)行頭禁則文字ふりがな(ルビ)圏点(傍点、脇点)大文字と小文字の変更スモールキャップス(スモールキャピタル)長体、平体(水平比率、垂直比率)※IE以外のブラウザは、2014年7月4日現在の最新版にて
This summer I had the opportunity to attend NodeConf and it was a fantastic experience. I really appreciated how every session was a hands-on coding session: I felt like I walked away knowing how to put a bunch of advice directly into practice. One of my favorite sessions was the one run by James Halliday and Max Ogden exploring Node streams. Specifically they sat us down and had us run through th
リアルタイムアナリティクスのサービスを提供しているGoSquaredがエンジニアブログで紹介しているのは、サイトパフォーマンス向上の工夫。今回は、アセットのダウンロードやパースのところでなく、遅延をおこさずにスムーズに描画するかというポイントに絞っています。 典型的なスクリーンの描画フローでは、フレームごとにブラウザがJavaScriptを評価する。もしJavaScriptによって修正されていれば、エレメントのためのスタイルやレイアウトを再計算する。次に、ページをいくつかのレイヤに描いていき、レイヤをスクリーンにあてはめるのにGPUを使う。各ステージごとに、ウェブページやアプリが行うことが違い、それぞれにコストがかかる。スムーズな60fpsを目指したければ、ブラウザは全てを16msで完了させる必要がある。 JavaScriptがレイアウトを変更(margin, padding, width
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
追記 11/12/6 少し誤字脱字を修正、加筆 11/12/7 koichik さんにコメントで頂いたリンクと、その内容について追記 11/12/7 edvakf さんに頂いた指摘を修正 本文 この記事は、JavaScript Advent Calendar 2011 (Node.js/WebSocketsコース) の 4 日目の記事です。 Node.js には Stream という API があります。 Stream はとても重要な技術で、 「Stream を制するものは、 Node.js を制す」と言っても過言ではありません。 実際、 Stream は Node.js が得意とする I/O の部分を使いこなすために、 押さえておくべき技術なので、今回はこの Stream について紹介したいと思います。 参考 Jxck's OutPut - Node.js の Stream I/O のお
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Ben Edwards. I saw Ben tweet about a simple Sass @mixin that allowed you designate bits of CSS as being “critical” – the idea being to load that critical CSS first and defer the loading of the rest of the CSS until later. A clever idea, and one that is gettin
Tappy: A custom tap event handler Posted by Scott Jehl 07/14/2014 Tappy is a minimal, normalized “tap” event that works with touch, mouse, keyboard, and more. Tappy allows you to bind to a tap event like you would with other events like click. The advantage of using Tappy’s tap event over click is that it will allow you to execute code immediately on touch devices, eliminating the brief but notice
Many graphic effects that were previously only possible using a graphics editor are now feasible thanks to a combination of simple CSS rules. This trend is often referred to as “CSS Art”, a term that indicates the use of CSS for the creation of graphic experiments where the CSS bosses the show — whether it be images or real animations. A few beautiful examples of CSS art that you may have seen inc
This is pretty simple, let's dive in! Has someone already written this package? It might be worth saving yourself some time and doing a couple of searches for the package you are looking for. As of this writing there are ~86k packages in npm and there is a good chance someone has done something similar to what you are building. Some good places to search are: http://npmjs.org, http://node-modules.
CompanyEngineeringProductSunsetting AtomWe are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022. January 30, 2023 Update: Update to the previous version of Atom before February 2 On December 7, 2022, GitHub detected unauthorized access to a set of repositories used in the planning and development of Atom. After a thorough investigation, we hav
今朝TwitterのTLを見ていると、Sass 3.4に関する話題が目に入りました。Githubを見てみると、2014年7月12日にmasterブランチがBump VERSION to 3.4.0.rc.1されています。 doc-src/SASS_CHANGELOG.mdを見ると詳細が書かれていましたので、少し確認してみました。また、Sass Bites #44 - Sass 3.4 Preview という動画もありましたので、これも視聴してみました。 SassScriptで&が利用可能に Sass 3.3までは、&はセレクタ内でのみ利用可能でしたが、Sass 3.4ではSassScriptでも利用可能になったようです。 Sass Changelogにあるように$selectorに&を代入し、inspect($selector)とすると、.foo.bar .baz.bang, .bip.q
Elite Project-Based Learning School Learn fundamental and complex subjects with like-minded peers in a structured classroom environment, led by best-in-class instructors A Learner-Centered Methodology Hands-on learning, elevated Our programs are designed to ensure that your project is a work-in-progress from day one. Whether it's related to coding, writing or building a physical artifact, our prog
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く