メモを揉め

お勉強の覚書。

Tips

Flowtype 導入メモ

結構な数のつまづきがあったのでメモしておきます。 なお、Flow は現在も活発に開発中のため、そこそこカジュアルにBreaking Changeする可能性があります。 この記事はあくまでつまづきやすかったポイントを残すにとどめているので、基本は公式のドキュメン…

Stylus の変数に JS からアクセスする方法を考える

transition 、animationが使えるようになり、擬似セレクタの種類も増えてきたことで、スタイル周りの多くのことがCSSだけ(あるいはclassListのadd、remove程度の操作)で書けるようになってきた気がする。 それでも、どうしても JavaScript で操作したい時…

flexbox-grow, flex-shrink, flex-basis について

flex-grow CSS プロパティは、flex アイテムの flex grow factor を指定します。これは、アイテムが flex コンテナ内のスペースをどれだけ占有するかを指定します。 MDN: flex-grow MDN の説明がシンプルすぎてよく分からなかったので、もう少し詳しく調べた…

Case Studies in Flexbox - flex-grow, flex-shrink, flex-basis

flexboxのプロパティの組み合わせを比較できるカタログが欲しいなーと思ったので作ってみました。 各プロパティーの値がどのように解釈されるか、ブラウザ間での違いなどが分かります。 あれもこれもと入れていたら無駄に長くなりました。 2017年8月17日追記…

CSSの先頭に書くやつ

// Stylus * position relative リセット系CSSと併用することを前提にしています。 使用するライブラリにbox-sizingの設定がない場合は以下も追加します。 // Stylus :root box-sizing border-box * box-sizing inherit box-sizingに関してはsanitaze.cssを…

flexアイテム内のスクロールを有効にする

やりたいこと display: flex内の各要素(以下flexアイテム)は、自分の中のコンテンツに合わせて大きさが変わります*1。 そのため、コンテンツが画面からはみ出すような大きさの時はスクロール表示になって欲しいなーって時でも、そのままではスクロール表示…

width、heightがautoの要素にtransitionを適用する

CSS3のtransition。 一般的なウェブアプリのUIで動きが必要になる時って、始点と終点がある程度決まっていて、animationの@keyframeを駆使するような動きは限定的なことが多いと思うのだけど。 このtransitionを使っていていつも悩ましいのが、widthやheight…

Stylusのあまり知られていない機能

というより、自分が最近知った機能。 ハッシュをCSSのプロパティ名と値に展開できる Stylusではハッシュが使えます。 シンタックスはJSのオブジェクトリテラルとほぼ同じですが、Stylusのnodeをそのまま値に使用できる点が違います。 以下のように、値に10px…

button要素にはflexboxを使わないほうが良さそうです

<button>要素にflexboxを適用したところ、Chrome、Safari、FireFoxでそれぞれ表示が違った。 IEではまだ試していない。 調べてみるとどうやらこういう事らしい。 stackoverflow: Flexbox not working on <button> element in some browsers The problem is that the <button> element</button></button></button>…

chokidarを使ってファイルの変更をwatchする

Riot.jsの話。 カスタムタグが増えるにつれ、Riot CLIによるコンパイル時間がバカにならなくなってきた。 特にwatchの立ち上げ時に時間がかかる。 コンパイルオプションとしてBabelとStylusを使用しているので、最初これらを疑ったが、buildのみだとさほどか…

CSSをStylusの構文にコンバートする

CSSをStylusの構文にコンバートするオプションがStylusに用意されていることに今日気づいた。 既存のプロジェクトでCSSからStylusに移行したい時とかにはいいかもしれない。 -Cもしくは--cssオプションを使用する。 $ stylus -C path/to/source.css ./source…

setTimeoutの挙動について

JavaScriptによるアニメーションの制御について調べていたところ、本筋から離れてしまいそうだったのでここに。 ここまでの流れをおおまかに書くと、 JavaScriptにはタスクのキューがあり、頭から順に登録されたタスクが処理される。 ここで言うタスクとはほ…

LightTableのプラグインを手動でアップデートする方法

LightTableは下記のディレクトリに各プラグインのフォルダが置いてある。(OS Xの場合)*1 ~/Library/Application\ Support/LightTable/plugins/ ここにプラグインのリポジトリをクローンして、LightTableを再起動すればアップデートは完了する。 下はRuby Ins…

HomebrewでYosemite(OSX 10.10.4)にインストールしたMySQLが起動しない時にやったこと

訳あってMySQLをインストールした。 Homebrewを整える。 $ brew doctor $ brew update MySQLをインストール。 $ brew install mysql ==> Downloading https://homebrew.bintray.com/bottles/mysql-5.6.25.yosemite.bottle.tar.gz Already downloaded: /Libra…

タグをCSSで描く

カテゴリーで分類するアレです。 はじめに図解します。 元となる<a>要素 display: inline-blockを設定することで幅・高さを設定出来、なおかつ改行せずに親要素の幅に合わせて流れ込んでくれます。 inline-blockの要素は流れこむ inline-block inline-block inl</a>…

text-shadowで白抜き文字を作る

タイトルで使っています。 text-shadowをブラーを掛けずに8方向に落とすことで白抜きっぽくなります。 .outline-cha { color: white; text-shadow: black 1px 1px 0px, black -1px 1px 0px, black -1px -1px 0px, black 1px -1px 0px, black 1px 0px 0px, b…

はてなブログのカスタムCSSをローカルで編集する

はてなブログのCSSを編集する際、ブラウザの中のエディタで全てを完結させるのはちょっとつらいです。 編集したCSSをプレビューで見れますが、変更を保存するかゼロに戻すかしかないので大掛かりな改修は現実的でないです。 これをローカルでデザインを完成…

はてなブログでFont Awesomeを使う

Font Awesome 今回デザインをリニューアルするにあたって前々から気になっていたFont Awesomeを使った。 サイズ的に重くなり過ぎないか心配だったけど思ったより大丈夫そう。 文字コードやfont-familyを意識しなくても使える 前知識として「Web Fontでアイコ…

はてなブログのカスタムCSSをゼロから書き直した

疲れた。 ちなみにモバイルのデザインはProに入ってないので変わってないです。 個人的には、モバイルはデフォルトのデザインが気に入っているのでいいかなと思っています。 公式テーマから流用した部分 ほとんどはゼロから書きましたが、CSSリセット、セレ…

ビット演算でundefined、NaNを0に変換する

javascriptの算術演算子は(+が文字列連結の時を除いて)被演算子がundefined、NaNの時、結果はNaNになります。 undefined + 1 //NaN undefined - 1 //NaN undefined * 1 //NaN undefined / 1 //NaN undefined % 1 //NaN +undefined //NaN -undefined //NaN …

MacBook Pro Retina 13-inchにWindows8をインストールするのに、なぜかGR DIGITAL Ⅱが役に立ったという話

GR DIGITAL Ⅱといえばカメラですが、それがなぜかWindows8のインストールに役立ちました。 ネタばらししますと、必要だったのはカメラ本来の機能ではなく、SDHC規格のSDカードドライブとしての機能です。 結果的には何の問題もなくインストールメディアを作…

javascriptのオブジェクトリテラルは評価されるまでは、あくまでブロック文でしかない

よくよく考えたら普通のことでした。 評価せずに使われる場面も思いつかないのでわざわざ書くことでもないと思うのですが、何が役に立つか分からないこの世の中。 一応メモ。 そもそも何故気になったか 算術演算子の動作を調べるために色んな物同士を演算子…

EclipseのJSDTでユーザーライブラリを強制的に削除する方法

javascriptを書くときにEclipseを使用し始めてもうだいぶ立ちます。 最近になってMacBook Pro Retinaを購入してからも同じようにEclipseを導入したのですが、その移行作業中につまずいたのでメモ。 つまずいたところ JSDTではあらかじめ読み込んでおきたいラ…

undefinedを[ ]で囲んで+で連結すると空文字っぽくなる

[undefined] + [undefined] // "" 1 + [undefined] // "1" その他にも、 1 + [1]; // "11" 1 + ["1"]; // "11" 1 + [true]; // "1true" 1 + [0, 1, 2]; // "10,1,2" 1 + [undefined, false, NaN, null, 0]; // "1,false,NaN,,0" 数値、真偽値、NaNはそのまま…

1ずつ変化する数に/n&1すると、0と1をn回ずつトグルできる

0で初期化したaを1ずつ増やし、そのたびに割る2アンド1をする。 var a = 0; a / 2 & 1; // 0 a++; a / 2 & 1; // 0 a++; a / 2 & 1; // 1 a++; a / 2 & 1; // 1 a++; a / 2 & 1; // 0 a++; a / 2 & 1; // 0 a++; a / 2 & 1; // 1 a++; a / 2 & 1; // 1 0と1…

Math.floor()を短く書く

javascriptではビット演算をすると、自動的に整数に変換されるよ なので、 var x = 5, a = 3.98; とした時 Math.floor()を使うと、 x - Math.floor(a); // 2 となるところを x - (a | 0); // 2 と、ビット演算を使って短く書ける。(正確にはMath.floor()と…