メモを揉め

お勉強の覚書。

Flowtype 導入メモ

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

Stylus JavaScript API とプラグインの仕組みについて

先日 foovar という Stylus のライブラリを公開しました。 Stylus の変数を JS ファイルにエクスポートするためのライブラリです。 memowomome.hatenablog.com その時に調べた Stylus JavaScript API の詳細や、プラグイン作成の方法です。 仕様の変更などに…

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

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

swift_combination を Swift 3.0 に対応させました

Xcode 8.0 がリリースされていたので早速インストールして Swift 3.0 を試してみた。 拙作のライブラリ swift_combination を開いてみると既存のコードを Swift 3.0 のシンタックスにコンバートするか聞かれたので、とりあえずつっこんでみる。 memowomome.h…

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のみだとさほどか…

ライブカメラと時計のやつをElectronアプリにした

前の投稿で作ったデモをElectronで包んでアプリにしてみた。 memowomome.hatenablog.com Circle CIとGithub Releasesを連携させて、releaseブランチをプッシュするとリリースされるようになっている。 (超優秀な同僚が組んだ物を流用している) アカベコマ…

時計と世界各地のライブカメラの映像を組み合わせた何か

GWはこれを作ってました。 時計と世界各地のライブカメラの映像を組み合わせたものです。 YouTubeのiframe APIを使用しているので、モバイル環境だと自動再生が効かず映像が再生されません。 以下の操作が行えます。 時刻を表す文字のシルエットをShift+Kで…

decafjsを使ってappend-cssをアップデートしました

npmにappend-cssというパッケージを公開していたのですが、公開して以来ずっと触っていませんでした。 たまたまこのライブラリを使えそうな場面があったので、久しぶりにrequire('append-css')してみたら、自分が作ったと思っていたものと随分設計が違くてび…

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

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

プログラミングにおける略称のベストプラクティス(を誰か教えてください)

XML, DOM, JSON, APIなどの略称を変数の命名等で使う時のフォーマット統一したい(して欲しい)。 XMLHttpRequest XML、 Extensible Markup Language(エクステンシブル マークアップ ランゲージ) ウィキペディア: Extensible Markup Language Http、 Hyperte…

話題の五輪エンブレムをCSSで動かしてみた

今日もよく燃えてますね。 しかしそういった話は一切合切横に置かせてもらいまして、私はCSSで動かしたくなったので動かしてみることにします。 単純な図形とルール このエンブレムは非常に単純な図形とルールで出来ています。 大抵のタイポグラフィは一貫す…

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…

StylusでスキューモーフィックなCSS3ジェネレータを作った(続き)

前回のエントリー githubにアップしました。 github: all-user/stylus-skeuomorphic npm: @alluser/stylus-skeuomorphic Demo: Cassette Deck Controls 各ボタンの記号はFont Awesomeです。 このブログでも使用しています。 PlayとRecのボタンは<input type="checkbox" style="display: none;">と<label>を組み合わ</label>…

StylusでスキューモーフィックなCSS3ジェネレータを作った

ゴールデンウィーク中はずっとStylusを触ってた。 CSS3を使ったスキューモーフィックデザインで実用性を気にせず行けるとこまで行く、という実に連休らしい課題に取り組んでいた。 実際にページ内で使う事を考えると、全部画像にした方が結局出来ることも多…

タグを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…

append-cssというnpmモジュールを作った

CSSルールを追加するだけのモジュールです。 npm: append-css インストール Nodeがあってnpmが使える場合は、 npm install append-css npmがない場合はgithub: append-cssからダウンロード。 使い方 ブラウザの場合 browser/build.jsを読み込む。 <script src="browser/build.js"></script> <script> var appe</script>…

evaluable-tagというnpmモジュールを作った

htmlの中の任意の要素のdata-eval属性の値をJavaScriptとして実行するだけのモジュールです。 npm: evaluable-tag インストール Nodeがあってnpmが使える場合は、 npm install evaluable-tag npmがない場合はgithub: evaluable-tagからダウンロード。 使い方…

RoomMirrorというnpmモジュールを作った

RoomMirrorとは Markdownから生成したHTMLの中のコードブロックにCodeMirrorでシンタックスハイライトを行うために作ったもの。 npm: RoomMirror RoomMirror: ドキュメント この記事はドキュメントの内容に修正を加えつつまとめたものです。 インストール No…

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

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

はてなブログのシンタックスハイライトにCodeMirrorを使う

はてなブログのコードの表示に個人的になんとなく違和感があって、特にモバイル環境で見た時の折り返しが見難い。 どうにもこういうものは見た目をカスタマイズしたい願望があって、はてなブログはモバイルのデザインをカスタマイズできない*1のがどうにもつ…

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

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

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

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

RealDOM再入門

初Greasemonkey、初Tampermonkey、初ブックマークレット触ってみました。 生DOMいっぱいさわりました。 ブラウザで検索・置換 いくつかサンプルコードを見ているとDocument.body.innerHTMLを正規表現で検索・置換するものが多かった、 というのはつまり以下…

RubyのcombinationをSwiftでも使いたい

2016年9月15日追記 Swift 3.0 に対応させました。 memowomome.hatenablog.com めちゃくちゃ久しぶりに Swift 触ったわ。。。 追記ここまで。 --- 最近codeIQの問題にSwiftでもちょくちょく挑戦してます。 それまでRubyで解くことが多かったので、配列操作の…

Light Tableについて

Light Table使ってます。 Light Tableってどのくらい使われてるんだろう? twitterのタイムラインを見てるとSublime TextとかAtom関連のつぶやきは良く見かけるけど、Light Tableの事はほぼ見ない印象。 なのでLight Tableのいいところを紹介します。 Evalua…

Ruby, RSpec, CoffeeScript, Node.js, gulp, browserify

もろもろはじめました。 何を書いていいのか分からなくなるので、メモはこまめに取らないとダメですね。 ザクッとした感想(雑感) あれこれ悩んでいるより、とにかく触ってみるのが一番だなと思いました。 新しかったり、自分の知らない技術の紹介とかを見…

MacBook Pro Retinaに入れたWindows8を8.1 Update1まで上げたよ

以前の記事でインストールしたWindows8を、Windows 8.1 Update1にアップデートしました。 8.1も8.1 Update1もリリース後まもなくアップデートしましたが、特に問題なく成功しました。 一応気をつけた事として、Windowsのアップデートは完了までに何回か再起…

MVCとかMVVMの前の自分まとめ

MVC、MVVMに関する記事を色々読んでいると、 それなりに理解したつもりになっても、いざ具体的な事になるといまいちピンと来ない。 今感じている事、 大規模な開発を経験したことが無いから、必要性が実感できてない サンプルを見てもいまいちメリットが分か…

ビット演算で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ではあらかじめ読み込んでおきたいラ…

CSSスプライトによるアニメーションでプログレスバーを作ってみた

オライリーの書籍「javascriptグラフィックス」第2章「DHTML」より、CSSスプライトというテクニックを学んだ。 ダイナミックHTML - Wikipedia javascriptグラフィックス - デモページ HTML5Canvas、Adobe Flashを使わないので互換性が高いのもさることながら…

javascriptでjavascriptのシンタックスハイライト

このブログにコードを載せる際のシンタックスハイライトの為に作った。 基本的にはキーワードを正規表現で拾ってきて<span>タグで囲むだけのもの。 正規表現リテラルと文字列リテラルは複雑になったので分けて処理。 結局思い通りに動くまで2日か3日ぐらいかかっ</span>…

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()と…