Dev
昨日から引き続き HTML5 Canvas 読んでて、今日は「3.1 基本的なテキストの描画」をやってる。 テキストの中央揃えには measureText() メソッド を使うみたい。 measureText() メソッド - Canvasリファレンス - HTML5.JP 以下のものでは Canvas 幅の半分の位…
オライリーから出ている「HTML5 Canvas」読んでる。 線形グラデーション 線形グラデーションは createLinearGradient() メソッドを使って描画される。引数ではグラデーションの開始点（x, y）と終了点（x2, y2）を指定する。 createLinearGradient(x, y, x2,…
第52回HTML5とか勉強会に参加してきた。 勉強会の様子は動画で観れる。 第52回 HTML5とか勉強会 | YouTube 矢倉さんのセッションだけそれなりにメモを取っていたので載せておく。 これもスライドの内容そのままというわけではなく、自分の解釈を途中に挟みな…
ドットインストールの「HTML5 Canvas入門」レッスンをやってる。 15回、16回でランダムな大きさ・色の円を透過させて並べるというのをやったけど、これの色を暖色に限定して並べるようにしてみた。 それがこちら: 暖色の円をランダムに並べる | jsdo.it 色の…
はてなブログ、ソーシャルボタンのスタイルが変わったみたい。 PCでも、デフォルトのソーシャルボタンを大きく表示するようにしました - はてなブログ開発ブログ このブログでは、ソーシャルボタンのサイズを無理やり変更していたので見た目が崩れた。 なの…
今日は Vim Conf 2014 に参加した。 LT のスライドは「 Reports - VimConf 2014 」にまとめられている。 正直に言うと Vim スクリプトのテストや Java のプラグインに関する話にはついて行けず、LT の内容は半分近くわからなかった。けど、しゃべりがユニー…
Illustrator 以外も含めて、Adobe アプリケーションは今 CS5.1 使ってる。だからディレクトリパスは Adobe Illustrator CS5.1 になってる。 Illustrator ファイルをビットマップに書き出すときとかに線がにじんだりするのが嫌で、今日は「IllustratorでWeb向…
下の文章がなんか長くなったけど、結論は以下の 2つ。 エスケープしたいバッククォートよりも数が多いバッククォートでコードを囲むことで、インラインコードにバッククォートを含めることができる 先頭か末尾にバッククォートを含めたいときはコードを囲む…
今までは CTRL-D と CTRL-U でページの上下スクロールをしていた。そのときの画面には見えていないけど、見たい場所がわりと近くにあるときはこれまで通りこれらのコマンドを使うと良いだろう。 コードリーディングのときなど、ファイルの中身を網羅的に見た…
Vim でタグ機能を使おうと思って、ctags を Homebrew でインストールしようとすると次のエラーが出た。 $ brew install ctags /usr/local/bin/brew: /usr/local/Library/brew.rb: /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby: bad…
Vim でファイルを開いている状態で以下のコマンドを打つと検索結果がハイライトされる。 :set hlsearch ハイライトの指定を .vimrc に書いておくと便利。 set hlsearch 検索結果のハイライトは次に別の単語を検索するまでずっと光ってる。それが邪魔なときは…
Vim の基礎コマンドを覚えるぞ！シリーズの続き。 昨日まではファイル内の特定の位置や、列や行内の特定の位置など、自分が行きたい場所が想定できている（目に見えている）ときに使いそうなコマンドが多かったように思う。 今日は行きたい場所が不明確なと…
昨日の「Vim の移動関連のコマンドで使えたら便利そうなもの」の続き。 雑多な移動 H, M, L で大雑把に画面の上下を移動して、k や j （または - や + ）で細かな移動をすると良さそう。 H ... 画面上で最初の非空白文字の行に移動 M ... 画面上で真ん中の非…
Vim の基礎コマンドを覚えるぞ！シリーズの続き。 昨日まではファイル内の特定の位置や、列や行内の特定の位置など、自分が行きたい場所が想定できている（目に見えている）ときに使いそうなコマンドが多かったように思う。 今日は行きたい場所が不明確なと…
これを実行する場面としては、SSH で Git リポジトリを 落とすべきところを誤って HTTPS で落としてしまったときなど。 まずは現在の origin を確認（ git pull, git push 先）。 $ git remote -v origin https://github.com/... origin https://github.com/…
影付きのボックスに矢印を付けるにはどうしたら良いんだろうか。 ひとまず次のようなものを書いてみた。いつも矢印にボーダーを付けるために使う擬似要素に filter プロパティを当て、背景をぼかして影を表現してる。 確認したのは Chrome と Safari、 そし…
僕は昔から overflow: hidden 派 (?) だった。けど、最近 clearfix のアプローチも使うようになりだした。 clearfix のスタイル: .clearfix::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } そもそもこういったもの…
上記のように左に一つのボックス、右に左のものよりも大きいボックスを置くようなグループの命名に困ってる。 ボックスをまとめるグループの名前はそのまま group としていて、その下の 2つのボックスの名前付けに頭抱えてる。 場所を表す名前をつけると... …
リモートにローカルの変更をプッシュするとき、-u オプションをつけると便利っぽいです。 $ git push -u origin branch 最初に git push -u origin branch のようにすれば、次から git push だけで事済みます。origin branch の部分を毎回指定する必要はあり…
先日 Google DevTools について記事を書きましたが、今回のバージョンアップで早速変更がありましたね。 DevTools に Toggle Emulation ボタンが追加されたようです。相変わらず切り替えた後はリロードする必要がありますが、切り替えが容易になったことで使…
いつからか Google DevTools の Settings メニューの配置が大きく変わってますよね。 DevTools は機能が豊富なので、知らないことがまだまだ多く、なにか新しいことをやろうとするときはいつも Web で調べたりします。 自分が知りたい情報は案外簡単に見つか…
会社の人に貸してもらうことができたので、「インフラエンジニアの教科書」という本を読みました。 この本では、インフラの仕組みだけを説明しているわけではありません。コストや人と向き合いながら、サービスの未来を予測してインフラ運用を行うインフラエ…
一昨日、「フロントエンドデベロッパー面接時の質問事項」というのがあるのを知りました。 この中の「一般的な質問事項」に少し答えてみました。 プログレッシブ・エンハンスメントとかの用語の意味を普段あまり考えていないので、質問に答えにくいところが…
僕たちの目に普段触れることはありませんが、インターネットを使うときにはネットワークを介してクライアントとサーバーで通信が行われています。 HTTP は非常にシンプルで便利なプロトコルですが、このプロトコルを使っている通信にはセキュリティ面での問…
先週書いた「HTTPメッセージ」という記事でも少し触れましたが、今回は各ヘッダーフィールドの役割についてもう少し書いてみようと思います。 まず、ヘッダーフィールドとは、クライアントとサーバーの通信のなかで指示を出したり、指示に対する処理結果を示…
HTTPメッセージは、リクエストメッセージとレスポンスメッセージに分けられますが、どちらもメッセージの内部は次のような構成になっています。 メッセージヘッダー 空行（CR + LF） メッセージボディー それぞれのメッセージヘッダーをもう少し詳しく見てみ…
HTTPは、クライアント（ブラウザなど）とサーバー間で通信を行います。 クライアントはテキストや画像が欲しいときにリクエストメッセージをサーバーに向かって投げ、これを受け取ったサーバーはクライアントに向けてレスポンスメッセージを返します。 リク…
僕はこれまでパフォーマンスを考慮してコードを書くということをしていませんでした。 それに、Webサイトを表示するブラウザや、その周辺の仕組みの理解を深める動きをしてきませんでした。 しかし、一年ほど前にHTML5 ROCKSの「ブラウザの仕組み: 最新ウェ…
「Web制作者のためのCSS設計の教科書」という本を頂いたので、今週いっぱいかけて読んでました。 目次や書籍の情報については以下からご確認ください。 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 | Impress…
次のようなHTMLで新規タブを開いたとします。 <a href="/information/help" class="information-help" target="_blank">ヘルプ</a> この開いたタブの中に、以下のようなjQueryで「タブを閉じる」処理を行なうボタンを設置しました。 $(function() { $('.js-close-window').on('click', function() { window.close(); return false; }); …
