新しい日記

新しい日記

nvmを使ってnode.js

nvmとは? node version maneger 以下公式githubcreationix/nvmgithub.comこのリポジトリをcloneしてきて、以下のコマンドラインでnvmを有効化します。 $source ~/.nvm/nvm.shそうすると、nvmコマンドが使えるようになります。 $nvm -v次に、node.jsをインス…

vagrantのつかいかたチュートリアル

vagrantを覚えたので忘れないようにメモ ※私サーバの人じゃないし全然その辺のことよくわからないから間違ってることもいっぱい書いてあるかも!一応この手順で使えるというメモ程度の感覚で…これを使うと何が出来るの? 簡単に仮想サーバ環境が構築できるよ…

iPhotoライブラリの最適化

iPhoto異常に重いから後でやる Mac の iPhoto フォトライブラリ データを最適化(再構築)してディスク容量を節約する方法 Mac の iPhoto フォトライブラリ データを最適化(再構築)してディスク容量を節約する方法 | ゆめとちぼーとげんじつと それにしてもTim…

WCAG 2.0 - 1.4.3 最低限のコントラスト

1.4.3 最低限のコントラスト:テキストおよび画像化された文字の視覚的な表現には、少なくとも 4.5:1 のコントラスト比をもたせる。ただし、次に挙げる場合は除く (レベル AA): 大きな文字: サイズの大きなテキストおよびサイズの大きな画像化された文…

HTML5新要素

[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita [HTML5] 新要素まとめ【2014/2/14版勧告候補】 - QiitaHTML5新要素, article,section,header,footer,canvas...くらいしか把握してなかったけど それ以外にもいっぱいあるのでそれぞれの役割や使い方を…

リファクタリングとは

リファクタリングとは、ソフトウェアの外部的振る舞いを保ちつつ、理解や修正が簡単になるように、内部構造を改善することです。また、リファクタリングは非常に統制された方法でコードを洗練していくため、バグの入り込む余地が少なくなっています。 - リフ…

CodeSniffer

HTML_CodeSniffer このブックマークレットを入れてみて,自分のポートフォリオのコードをチェックしてみた.エラーいっぱい!!!!!!!レポートをみてみたところ,alt抜けとテキストと背景のコントラストが足りないというのがとても多かったです.あとは…

js置く場所

jsはの前に置くというの,慣習的に行っておりましたが,どうやらそうじゃないほうがいいときもあるとわかった.ssig33.com - JavaScript を最下段で読み込むのがあまり有効ではない理由慣習的にやっていたといったとおり,なぜ?ときかれると「jsを最後にい…

スタイルガイド

スタイルガイド,あとでよむWebデザインの勉強になる!有名ブランドサイトのスタイルガイドのまとめ -Brand Style Guide Example Webデザインの勉強になる!有名ブランドサイトのスタイルガイドのまとめ -Brand Style Guide Example | コリス

KSS

KSSとはスタイルガイドジェネレータというものの一種らしい.スタイルガイドとは? CSS設計におけるガイドラインをまとめたドキュメント的なもの.KSSはそのスタイルガイドのもととなるパラメータを生成してくださるようです. ただHTMLやCSSを自動生成して…

gifに変わる新しいアニメーション画像フォーマット「XNG」

http://blog.mecheye.net/2014/10/xng-gifs-but-better-and-also-magical/ XNG: GIFs, but better, and also magical | Clean Rinsegigazineでも紹介されてるから貼っとくついにGIFに変わる新しいアニメーション画像フォーマットが誕生 ついにGIFに変わる新…

通勤時間の長さによる不快感

幸せに生きるために知っておきたい心理学・脳科学の8つの研究データ - Literally 幸せに生きるために知っておきたい心理学・脳科学の8つの研究データ - Literally 逆に、通勤時間の長さによる不快感はいつまでも慣れないとのこと。 と書いてある。 私は大…

バナーは目に入らない

UI

バナーは目に入らないのか?~新旧の知見 バナーは目に入らないのか?~新旧の知見 - U-Site2007年の記事だし、検証してるのがブログなので今は少し違う考察が得られるかもしれないけど。そう考えると前に考察やった通販サイト(ほとんどがバナーばかり)のサ…

ピィ〜エイチピィ〜

PHP

PHPには三項演算子というものがあるのだって。始めて知りました。三項演算子 - 条件分岐 - PHP入門 三項演算子 - 条件分岐 - PHP入門 あと今日知って便利だなぁと思ったのが strstr(文字列A, 文字列B)文字列Aの中に文字列Bが含まれているかどうかをbooleanで…

UI

UI

UIわからなさすぎるUIの基本と、設計方法│UI改善で成果6倍! UIの基本と、設計方法│UI改善で成果6倍! これくらいは考えているつもりだけど出来てなかったらどうしようレスポンシブWebデザインで成功するUI/UXのポイント5つ レスポンシブWebデザインで成功…

カタログ通販サイトのトップページデザインを上から目線で比較してみた

UI

たくさんの商品写真やカテゴリをまとめるため基本的に情報量が多いベルメゾンネット 全体幅950px サイドバー200px メイン746px(画像間違えて964pxとかいてしまった)中盤のバナーが大量にあるところグリッド計るのも面倒なくらいいろんなサイズ混じってるけど…

SVGダイエット

svg

ポートフォリオのキービジュアルをsvg化したのはいいものの、ファイルサイズが大きく回線が遅いと読み込みに時間がかかるのが気にかかっていた。同じ画像をpngで書き出すと185KBだったのに対し、Illustratorからただ書き出しただけのsvgはなんと584KBと3倍以…

自動送りカルーセル

UI

ノートルダム大学にてwebコミュニケーション・web開発におけるディレクションを研究するErik Runyon氏による自動送りカルーセルのクリック率が公開されている。Carousel Interaction Stats - June 2013 Update | Erik Runyon Carousel Interaction Stats - J…

CSSグリッドシステムとドロップシャドウの使い方

CSS

CSSのグリッドシステムっていっぱいあるよね〜 これは1140pxで結構でかめのやつ1140px CSS Grid Retired — Andy Taylor 1140px CSS Grid Retired — Andy Taylor関係ないけどここのタイトルテキスト、 text-shadow: 1つめの影, 2つめの影;みたいにカンマで区…

CSS idea

CSS

CSSのアニメーションを使ってグリッチしたかのようなエフェクトをかけるテクGlitch Effect on Text / Images / SVG | CSS-Tricks Glitch Effect on Text / Images / SVG | CSS-Tricksアイデアだ

必ず読むこと

UI

Google Design の新しいガイドライン、特にmaterial design のpdfを必ず読むこと。 Google Designhttp://static.googleusercontent.com/media/www.google.com/ja//design/material-design.pdf

Sonic Pi

面白そうなものを発見しましたSonic Piコード書いてシンセサイザーの音を制御出来るということでしょうか。サンプルにアーメンある。 sample :loop_amen, ...刻んだりとか出来るんだろうか〜!freeだしチャレンジしたい。

Xcode のアップデートが原因でgitリポジトリが作れなかったり

gitで新しくリモートリポジトリを作ろうとした所、 Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.というように言われた。調べたら何でも出てくる。Agreeing to the Xcode/iOS license... のエラーがでた時…

illustratorの遠近グリッド使い方

箱にマッピングするときなどに使うIllustratorで遠近グリッドによる立体表現 Part-1 - デザイン雑学 Illustratorで遠近グリッドによる立体表現 Part-1 - デザイン雑学 細かい調整が必要で結構難しい

soundcloud の アートワーク読み込み時画像から考える UX

UX

最近のsoundcloud、アートワーク読み込み前のプレビュー画像がランダムなカラーのグラデーションになっているこんなかんじこれ、どれもsoundcloudのwebのカラートーン(オレンジ・チャコールグレー)と地味にマッチしてない色なのでこういうアートワークに見え…

今日のsvgその2

svg

今度はsvg+cssを使ったアニメを練習してみた。sampleたのしい。 コードは以下svg <svg> <path id="path" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> <text id="text" font-size="8" dx="0" dy="0"> <textPath xlink:href="#path"> testtesttesttest </textPath> </text> </svg> css #path { stroke:#808080; fill:none; stroke-width:1; …

今日のsvg

svg

<path id="textTest" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> このパスの上にテキストを描画しましたコードこんなかんじ <path id="textTest" d="M 0,40 Q 25,25 50,40" stroke="#808080" fill="none" /> <text font-size="8" dx="0" dy="0"> <textPath xlink:href="#textTest"> testtesttesttest </textPath> </text> strokeもnoneに…</path></path>

SVGは最高

svg

引き延ばしても大丈夫、アルファチャンネルを保持する、アニメーションも可能、いいとこだらけなSVG 基本は以下で学ぶ &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://www.atmarkit.co.jp/ait/articles/1206/01/news143.html" data-mce-href="…

Emmet参考

<a href="http://leko.jp/archives/442" data-mce-href="http://leko.jp/archives/442">Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫 | WEB EGG</a> Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫 | WEB EGG はじめてのEmmet with Sublime Text2 from Sadaaki HIRAI 【便利ツール】Emmetで、ちょっと気持ちいいコーディング…

いいかんじのweb参考

Blocks — Productivity tools for designers and developers 水彩画風の滲みの上に白の単純なラインだけでイラストが浮かんでいるのがかわいい。 イラスト画像はsvgだ。 あとレスポンシブでもある。 最初にも最後にもフォームがある構成もなんかしらの機会で…