今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。 僕が1番時間を使うのがこの工程だ。 今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。 ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。 最近読んだ本だと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善

Sorry, JavaScript is required to view Global Stats charts.

私はコミットログの書き方に悩む英語の苦手な人間である。実際、似たような人は世の中に結構いるようで、頻出単語を集計したりまとめたものは既にあって役に立つのだけれど、これらはあくまで単語の話であり、具体的な文を構成する過程でやっぱり困る部分がかなりあった。 要するに、どういう時にどういう文が使われているのか、ということを示した例文集が欲しいのである。ググると他にも「例文集があればいいのに」みたいな声はあるくせして、しかし誰も作ろうとしない。何なんだお前ら。それじゃ私が楽できないじゃないか。 仕方なく自分でまとめたので、増田に垂れ流しておく。 はじめにここで挙げているコミットログは全て実際のコミットログからの転載である。当然ながら各コミットログの著作権はそれぞれの書き手にある。いずれも各英文でググれば出てくるし、フェアユースの範囲なら許してくれるだろうと考え名前とプロジェクト名は割愛したが、ここ

和風のWebデザインをするには、配色を日本の伝統色にしたり、和柄を使ったりといった工夫が考えられますが、そうした工夫のひとつが毛筆フォントの利用です。今回は、日本語対応の和風の毛筆フォントを18個、カッコイイ書体、かわいい書体、ユニークな書体の3タイプに分けて紹介します。 ※ご利用の際は、各配布サイトの利用規約を確認してください。 ＜この記事に関連する記事＞ ゴシック体のフリーフォント15選【商用利用可】 おしゃれ！明朝体フリーフォントのおすすめ16選【商用利用可】 見ているだけで楽しくなるフリーフォントまとめ カッコイイ書体の日本語毛筆フォント 10選 1.衡山毛筆フォント http://opentype.jp/kouzanmouhitufont.htm 手書きの雰囲気が魅力のカッコイイ毛筆フォントです。書家の青柳衡山先生が揮毫（きごう：毛筆で文字を書くこと）した文字をフォントにしていま

Web制作会社 シロクロ Web制作に関するブログ新人Webデザイナーへ向けた、考え方から実践までの話 新人Webデザイナーへ向けた、考え方から実践までの話 2016年6月15日 Webデザイナーとしての心構え、普段やるべきこと、実際にデザインするときの手順など、弊社の新人デザイナーに伝えていることをまとめました。学生や新人Webデザイナーの方に役立てていただければ幸いです。※ディレクターが打ち合わせやワイヤーフレーム制作などを担当し、デザイナーは純粋に画面を作る役割として話を進めます。 はじめに何のためのデザインか色んなWebサイトを見ることWebサイトを模写することデザインする前にWebサイトの目的／目標を理解する同業他社のWebサイトを調べるワイヤーフレームのままデザインしないデザイン作業時世界観（トーン&マナー）とレイアウトを決める文字、色、装飾、余白のルールを決める必要であれば構

(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ

結論から言えばHTML 5.1が勧告になっても今のところ訳出する気は無いですし、HTMLに関して現行のW3C勧告プロセスが維持され続ける限り、将来のバージョンについても訳出する気はありません。すべてのウェブ開発者 *1 はWHATWG HTML Standardを参照すべきですし、筆者の可能な限りHTML Standardの訳出を更新し続けます。 Working on HTML5.1 | W3C Blog W3C、「HTML5.1」を今年9月に勧告とする計画。仕様はGitHubで公開 － Publickey W3C Web Platform Working Group (WPWG)のco-chairであるLéonie WatsonによるW3Cブログのエントリーが公開されたのが6日付けで、Publickeyの記事が14日付けという謎のタイムラグがありましたが、ともかく、にわかにHTML 5.

If you were looking for MSDN or TechNet blogs, please know that MSDN and TechNet blog sites have been retired, and blog content has been migrated and archived here. How to use this site Archived blogs are grouped alphabetically by the initial letter of the blog name. Select the initial letter from the TOC to see the full list of the blogs. You can also type the name of the blog or the title of the

はじめに こんにちは、中山です。 唐突ですがみなさんtmuxは使われていますか。そう、有名なターミナルの機能を拡張するツールですね。 この種のツールを使っていない方の中には、職場の先輩などに「ちょｗターミナル開きすぎｗブラクラかよｗ」などとドヤ顔で言われたことがある方もいらっしゃるのではないでしょうか。かく言う私もドヤ顔でこの種の発言を繰り返していました。 tmuxはデフォルトの機能がかなり豊富なのですが、tpmというプラグインマネージャを使うとさらに機能を拡張することができます。聞いたことがある方も多いのではないでしょうか。ググると検索結果に結構表示されますね。GitHubのtmux-pluginsというorganizationにはさまざまなプラグインがあります。便利なプラグインを紹介しているブログエントリも結構あります。 私はこのプラグインを今まで結構作ってきました。少しシェルスクリプ

いろんなサーバーにsshしてちょろっと設定を確認したりするときってあると思います。 ただその時にllがつかえなかったり、vimのタブが空白4つがいいのに8文字分の広さのtab文字だったりして、ちょっとずつストレスが溜まっていきます。 やっぱりserverfaultでもおなじ苦労をしている人がいました。 vim - How to bring .vimrc around when I SSH? - Server Fault http://serverfault.com/questions/33423/how-to-bring-vimrc-around-when-i-ssh ただここにあるようにdotfilesとして保存して先でcloneするのもとても面倒くさい。第一各サーバーへ変更を入れないといけないし。SSHの秘密鍵みたいに携えていきたい。 そこで探していたらsshrcというツールを見つけて

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

とりあえず mycli と aws-shell のスクリーンキャストを見てください。 prompt_toolkit はこのようなリッチコンソールアプリを作るためのライブラリです。 Windows でも動きます。 Jupyter (ipython notebook) を切り離した、コンソール版の ipython も次のメジャーバージョンでは readline ベースから prompt_toolkit ベースに作りなおされています。 ipython 以外にも ptpython というシェルもあり、 ipython の各種 magic が不要な場合はこちらで十分でしょう。 https://github.com/jonathanslenders/python-prompt-toolkit#projects-using-prompt-toolkit には、他にも prompt_toolkit を採用

「waifu2x」はアニメや写真、イラストなどの画像をAIを活用して高品質に拡大できるサービスです。 「waifu2x-multi」は「waifu2x」の派生サービスで、複数の画像をまとめて処理し、一括でダウンロードすることもできます。 実行例を表示 ご意見やご要望などはTwitterの @waifu2x_multi または お問い合わせ までお願いします。

Vimの<C-f>を押していくと、最後に一行だけになってしまいます。 おっと行き過ぎたと言ってわざわざ戻っている方も多いのではないでしょうか。 この世の中にはたくさんスクロールのUIがありますが、普通はこうなっていません。 ウェブブラウザーのスクロールも、PDFビューワのスクロールも、lessコマンドのスクロールも、ページの一番下が画面の下に見えたら止まってくれます。 この挙動は、<C-f>を次のようにマッピングすると直ります。 noremap <expr> <C-f> max([winheight(0) - 2, 1]) . "\<C-d>" . (line('.') > line('$') - winheight(0) ? 'L' : 'H') バッファーの最後の行がウィンドウの一番下になったらきちんと止まってくれます。 <C-d>はウィンドウをスクリーンの半分スクロールするマッピング

Vagrant 1.8 で、ansible_local という新しいプロビジョナが追加されました。 これは、Ansible をゲスト（VM）側にインストールして、ローカルコネクションで VM 内で実行するものです。これは、まさに待ち望んでいた機能ので紹介します。 Vagrant + Ansible で気を付けること 以前から、Vagrant + Ansible の組み合わせでローカルの開発環境を作るなら、ホスト側に Ansible を入れるのではなく、ゲスト（VM）側に Ansible を入れる方が良いと考えていました。勉強会などでも良く話していたのでお聞きになった方もいるかと思います :) ホスト側に Ansible を入れない理由は、3 つあります。 まず、ホストに Ansible をインストールする手間が増える点です。Vagrant と Virtualbox のインストール（あとコー

アルゴリズムの違いが速度に明確に表れるわかりやすい例のひとつであるフィボナッチ数列を使って速度比較。 気軽に多倍長が使える言語でないと、線形とlogの違いは見えづらい。 #!/usr/bin/ruby -Ku require 'matrix' def fib_recursive(n) case n when 0 return 0 when 1 return 1 else return fib_recursive(n-1)+fib_recursive(n-2) end end def fib_linear(n) a, b = 0, 1 n.times do a, b = b, a+b end return a end def fib_log(n) (Matrix[[1,1],[1,0]]**n)[0,1] end def omit_bignum(n, dig = 20) s = n.to_s

13inch MacBook Pro を購入したので、開発環境の構築を行いました。 以前は、brew bundleで自動構築していたのですが、今回は Ansible を使って構築を行いました。このエントリは、Ansible Advent Calendar 2015 の 9 日目です。 今回の構築にあたっては下記のエントリを参考にしました。ありがたや。 HomebrewとAnsibleでMacの開発環境構築を自動化する | mawatari.jp Mac の開発環境構築を自動化する (2015 年初旬編) - t-wadaのブログ Xcode / Homebrew のインストール Xcode と Homebrew をインストールします。 $ sudo xcodebuild -license $ ruby -e "$(curl -fsSL https://raw.githubuserconte