WebデザイナーはまずGitHubから触ってみればいいんじゃないかな - MOL
Gitってのが便利！とよく聞くけど、実際問題、会社で導入しているわけでもない限り、個人で導入するのは気が引けるというか、よっぽどのリターンがあるのを最初から分かってないと、あんなよくわからない黒い画面をWebデザイナーが使うわけないと思う。 かくゆう、私もそうだった。Gitはよく分かんないけども、GitHubってのはカッコ良さそうだったから使ってみたい！んで、しょうがなしにGitコマンドをチョロチョロっと使い始めた（覚え始めた）って感じだ。 GitHubを使うって言っても僕の場合、最初は単純にファイルのホスティングだったり、Gistにメモ残したり、ちょっと慣れてきたらGitHub Pages使ってみたりとか、そうゆうふうに徐々に慣れてきたらこそ、会社のほうでGitLabやGitHub Enterpriseなどが導入された時も難なく対応できた経緯がある。 正直、コードのバージョン管理しなくて
Sketch3ハジメマシタ - MOL
こんちわ、無職のt32kさんだよ。今日は職を失ってお金もないのでAdobe Creative Suiteに代わるソフトを探そうって話だ。そうゆうことで、いま世間を騒がしているSketch.appを触ってみたよ。 Sketchってどんなソフトかはこもりさんの紹介動画を見てみるとよい。ついでに、こもりさんが書いている『Sketch 3 Book for Beginner』電子書籍も買っておくとスタートダッシュが決めれると思う。 Sketch 3 Book for Beginner w/ Video 電子書籍ならではというか、Sketch.app自体の更新も速いので、電子書籍も随時アップデートされているし、説明動画もついているので分かりやすい。 そうゆうわけで、5/13にこけむさズで行われたSketch3勉強会にも行ってきた。勉強会は最初こもりさんからSketch.appの概要を説明してもらって
開発効率をUPする Git逆引き入門 - MOL
松下 雅和,船ヶ山 慶,平木 聡,土橋 林太郎,三上 丈晴 シーアンドアール研究所 売り上げランキング: 366953 id:Layzieさんより本頂いた。なお著者は全員緑の会社の人である。この本はデザイナー・エンジニア両方をターゲットとしているみたいなので、僕からはどちらからと言えば、デザイナー側からのレビューをしたいと思う。 そもそも弊社某緑の会社ですが2年前くらいまではどのプロジェクトもSVNを使用していたが、1年前くらいにGitHub Enterpriseを全社的に導入する（CAに入るとGHE使えるんだよヽ(=´▽`=)ﾉ）にあたって、SVNからGitへバージョン管理システムを移行しなければならない状況になった。その時、今回の著者の方々が移行のための勉強会を何回も開催してくれたのだった。 全社的に導入するにあたって、当然デザイナーや、HTMLコーダーのような非エンジニアに対してもフ
バッジ駆動開発（2014:Node.js） - MOL
こんちわ！@t32kだよ。みんなバッジ好き？( ﾟ∀ﾟ)o彡ﾟバッジ！バッジ！バッジ！ 小学生の頃、自由勉強ノートってのがあって、勉強したページ分、先生からシールをもらってはそのノートに貼り付けていたのは良い思い出です。あのノスタルジーを再び！ ということで、大人の自由勉強ノートといえばGitHubレポジトリじゃないですか。OSSがんばります！私、気になります！そしたらシール欲しいじゃないですか？ あるよ、シールあるよ、シールってかバッジだけど。 上記は最近作ってるStyleStatsのReadmeだけど、なんか緑のバッジいっぱいですよね。それを説明していく！ Travis-CI Status Images Travis CI: Status Images まずは、この中のバッジの中では一番メジャーじゃないだろうか、Travisの Status Images。昔、@kyo_agoさんが『テ
StyleStats - MOL
スタイルシートの統計情報を出力するNode Packageを作った。 t32k/stylestats Node.js 0.10以上が必要で、CLIだとこんな感じの情報を出力してくれる。 $ npm install -g stylestats $ stylestats path/to/stylesheet.css StyleStats! ┌────────────────────────┬──────────┐ │Size │ 498.0B │ ├────────────────────────┼──────────┤ │Rules │ 7 │ ├────────────────────────┼──────────┤ │Selectors │ 11 │ ├────────────────────────┼──────────┤ │Simplicity │ 63.64% │ ├───────
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
HTTPリクエストを減らすために【終章】我々には1000msの猶予しか残されていない
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 最終日は、我々フロントエンドデベロッパーに課せられた理想と現実のはざまについて冷静と情熱のあいだらへんで考えていく。まずは下記のブログを読んでもらいたい。 Google ウェブマスター向け公式ブログ: スマートフォンサイトの読み込み速度を改善するために まぁ読まなくてもいいのだが、ここで述べられている重要なことは2つ。 モバイルの平均読み込み時間は7秒 しかし、ユーザーは1秒未満を求めている 平均読み込み時間の7秒とい
HTTPリクエストを減らすために【DataURI編】遅延ロードでレンダリングブロックを回避 - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 4日目は、本ブログでも何回か話題にしているインライン画像についてです。 データURIスキーム CSS Sprite画像はDataURI画像にすべきか？ Data URI画像のテスト結果について 以前の記事で私は以下のように述べましたが、これはいやらしい表現だ。 DataURIの画像は、通常の画像に比べて6倍遅いとかゆう記事もある このような『xxx倍高速化』、『xxx倍遅い』と言った表現は、わかりやすい反面、本質を見失
HTTPリクエストを減らすために【CSS Sprite編】スプライト地獄からの解放 - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 2日目は、HTTPリクエストを減らす最もポピュラーな手法、CSSスプライトについて説明する。 まずは動画をご覧頂きたい。 img要素読み込み | WebPagetest Test Result CSS Sprite読み込み | WebPagetest Test Result 左が30個のアイコン画像を一つ一つimg要素として読み込んでいるのに対して、右は１つの背景画像（CSSスプライト）として読み込んでいる。この場合、
HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 3日目は、スマホ環境であればHTTPリクエストを減らすためにWebフォントの採用を考慮しても、やぶさかではないだろう。 まずは下記の画像をご覧頂きたい。 これはプロジェクトで私が使用していたスプライト画像だが（実際は縦にして使用）、このような単純な形状、単色のアイコンであれば、Webフォント化したほうがなにかと都合がよい。 このスプライトであれば、カラー × 矢印の向き × シャドウの有無 パターンの可能性があり、スプ
CSS Sprite画像はDataURI画像にすべきか？ - MOL
最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya
HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
OOCSSをbuildする - MOL
ちょいーんっす！あたーんっす！ みなさん、OOCSSって知ってますか？僕は知らないです。嘘です。 @stubbornellaが、4,5年前に言い出したオブジェクト指向なCSSの考え方みたいなもんです。CSSでこんなもの表現できた！とかそうゆうTips系の話題は事欠かないのですが、CSSの設計についての話はそれ以前には（今もそうですが）あまりなかったので、個人的にはとても衝撃的でした。 ちゃんとCSSを書くために - CSS/Sass設計の話（あ、最近イカス資料見つけたぞ！） まぁそんなOOCSSですが、ここ一年は目立った更新はありませんでした。と思ってたら最近、GitHubのレポジトリ見たらなんかすごく変わってる！ 新しくなったドキュメントを読みたいのですが、Readmeを読むと、どうやらSassやらHandlebarsやら使っててbuildしなきゃいけないっぽいす。んで仮想環境をVagr
海外カンファレンスなるものに参加してきた！ - MOL
2013年の抱負にも掲げた『海外カンファレンスに参加する』を実行したのでここに報告する。 渡航前準備とか カンファレンス選び どんな海外カンファレンスに参加するのか、それが問題だ！ってことで、Velocity 2013 - Santa Clara, CA（米国）にした。VelocityはWebパフォーマンスに関するカンファレンスで、あのSteve Soudersが始めた、まさしくWebパフォーマンスの最先端のイベント。2,3年前からずーっと行きたいと思っていたのだ。 カンファレンスチケット代はEarly Price, 3-Day All-Access Passで$1975だった。20%オフコード使って、$1580になってだいたい16万円くらいだね… よく海外のカンファレンス代は高いとゆうけど、これはアメリカでも高い方だ… どのカンファレンスに行きたいのか分かんない！そもそも、どんなカンファ
サイトの速度 - MOL
Stopwatch | By wwarby Flickr! こんにちわ、あなたの@t32k、ごきげんいかがでしょう。みなさんはスマホWebアプリ作っていて、自分の作ったものは速いのか遅いのか気になりませんかね？僕は木に泣くりまくりすてぃです。 そうゆうわけなもんで、表示速度とか計測してみようって話になるじゃないですかー、まさかストップウォッチで計測しないとは思うんですけどー、一応どのようにスピードを計測、そのアプリの性能を評価すればよいのか一緒に考えてみましょう。 僕が昔、ゴメス・コンサルティング（現：コンピュウェア モーニングスター） のセミナーに行ってきた時の話ですが、ここの会社はサイトパフォーマンスの計測サービスを提供していて、計測で重要なのは『定期的かつ継続的かつ同手法にてパフォーマンス測定』と言っておられました。 サービスリリース時はスモールスタートなのでアプリもコンパクトですか
Backbone + Lo-Dash + Ender? | MOL
Backbone.js Advent Calendar 2012 Backbone.jsのTIPSとかパターンとか、他のライブラリとの連携などなど。 フルスタック感がない分、各自でいろいろ編み出しながら使いこなしていると思うので、そのあたりの共有がてら書きましょう！ ということで、Advent Calendarでは与えられたテーマから外れた内容で記事を書くことに定評のある@t32kが23日目をお贈りしてやんよ(o°3°b)b 私、恥ずかしながらBackbone.jsとは今のところ無縁な最下級HTMLコーダー(戦闘力・たったの５か・・ゴミめ・・・)でして、そんあ僕でもいつかはAPIとか使って情報とってきて面白いWebアプリケーション作りたいと思うわけです。そこでBackbone.jsなわけです。 そんなわけでわけの分からぬままBackbone.jsの公式サイトを読んでみると Backbon
パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite - MOL
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。― CSS Preprocessor Advent Calendar 2012 - Adventar パフォーマンスの勉強ができてなおかつSass/Compassのお勉強にもなるお得なシリーズまさかの2回目。Adventにぶつけてきた！ややもするとシリーズものの2作目というのは駄作になりがちだが、そんなプレッシャーはねのけて乱反射！やっていくYO! これまでの： パフォーマンスからみるSass/Compass 第1回：Nestingと@import - MOL パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL CSS Spriteの利点・欠点 『ハイパフォーマンスWebサイト』の書籍には「高速サイトを実現する14のルール」というものがある。その中
html5shim vs html5shiv - MOL
JavaScript Advent Calendar 2011 (オレ標準コース) 12 日目の id:t32k です。去年も参加しましたがなんでもありと聞いて今年も懲りずに参加！ はじめに言っておきますが、html5shim も html5shiv どっちもまったく同じです。違いなんて無いので、こんなことに頭を悩ませる暇があったらさっさとコードでも書いてろ！以上！うんこ(・∀・)! そんなこと言っても世の中結果じゃない、過程が大切だと思うんだ先生！ってことで今回は調べてみます。 html5shi(m|v)、めんどくさいので以下 html5.js は”HTML5 IE enabling script”の名の通り、IE8 以下でarticleなどの新要素が正しく認識されずスタイル(CSS)がうまく適用されない問題を解決しそれらのブラウザでも利用可能にしてくれます。 document.crea
JavaScript はやっとくべき！ | MOL
新年1発目にこれを持ってくるのは2011年の抱負ってことで。 原文：You Must Learn JavaScript — Article — The Nerdary 投稿日：2010-12-2 by Kenny Meyers もし君が3年前にどの言語を学ぶべきかと尋ねてきたのなら私はRubyと答えていただろう。もしそれが6年前だったならPHPだ。 君が新しくプログラミング言語を学ぼうとしているのであれば、JavaScriptを選べばよいだろう。 なんでやねん？ これは私の考えだが、あらゆるWebプログラマーはJavaScriptを学ぶべきである。この原則を刺激するような新技術がたくさん出てきている。その背景にはある一つの理由がある。それはユビキタス（「いつでも、どこでも、だれでも」が恩恵を受けることができるインタフェース、環境、技術のこと）だ。もし君がJavaScriptを使うのであれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
