【翻訳】document.writeでSCRIPTを書き出すなやで！ - MOL
Original：Don’t docwrite scripts（2012-04-10）by Steve Souders 昨日のブログ記事のHTTP Archiveが速くなっている、大きな要因の一つとしてはスクリプトローダーを使用しないことです。そのスクリプトローダーとはスクリプトを動的に読み込むためにdocument.writeを使用しているものです。振り返れば、私は2009年4月のブロッキングなしのスクリプト読み込み、続・ハイパフォーマンスWebサイト(4章)において、document.writeテクニックについて記述していました。それは以下のようなものです。 document.write('<script src="' + src + '" type="text/javascript"><\/script>’); document.writeを使ったスクリプトローダーの問題点： 挿入し
【翻訳】Web世代のデベロッパーのためのmake - MOL
Original：Make for the Web Generation （2015-02-28）by Casper Beyer イントロ JavaScriptの普及に伴いビルドツールが盛んだ。人気なものをいくつか挙げれば、grunt、gulp、slush、broccoliやbrunchなどがあるが、結局、名前をつけただけにすぎない。 多かれ少なかれ、これらのツールはファイルコピーからzipファイル作成のようなシンプルなタスク処理でさえ、すべてプラグインに依存しているので、それらのタスクを実行するためにプラグインを必要とするだろう。 これらのツールは理想論的には大きな柔軟性をもたらすものとされているが、実際はUNIXのエコシステムをただ複製しているだけにすぎない。このために君のプロジェクトは早々に、大きな開発依存性のバンドルを持つことであろう、そして、やっているタスクは単なる普通のコピー、
Google Analytics トラッキング スニペット再考（2010） | MOL
アナリティクス公式ブログ: 成長し続ける Google Analytics のエコシステム 非同期トラッキングコードが公式に推奨されるようになったので、ようやく重い腰を上げて調べてみました。長文です。 なぜ、非同期トラッキングコードが推奨されるのか？ 今回のトラッキングコードはurcin.js、ga.jsに続く大きな変更となります。非同期トラッキングコードの恩恵を受けるためには、以前のトラッキングコードを使用されている方は、当然変更しなければなりません。しかし、大規模サイトの場合などはアクセス解析担当者とコード実装者は違うことも多く、エンジニアさんにお願いしなければなりません。「え〜、前変えたばっかじゃん！」などと言われるかもしれません。そんな時にアクセス解析担当者はトラッキングコード変更のメリットを提示しなければなりませんね。Analytics 公式ブログでは、非同期トラッキングコードの
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
若人へ - MOL
もう僕も30だ。ここで老害っぽくこれから新しい一歩を踏み出すニューカマーのために気の利いたことを言いたい衝動に駆られている。 これから社会に入って、いろいろうまく行かないことや八方塞がりな状態にもなるかと思う。しかし、そうゆうものは自分をうまくコントロールできれば大抵のことは解決できる（と思っている）。そんなことを話したいと思う。 選択 人間誰もが、毎日『選択』という行為をしている。選択という行為は、今日は何を食べようか？といったルーチン的な選択もあれば、どの会社に入社・転職しようか？といった重大な選択まで様々である。そして、その選択してきた結果が『今の自分』である。 どの大学に入るか、どの会社に入るかといった重大な選択は『選択』として皆が意識している（せざるを得ない）ことだろう。しかし、僕が重要だと思っているのは、毎日の比較的重要ではない選択の方だ。例えば、今僕が英語を喋れないのは、30
バッジ駆動開発（2014:Node.js） - MOL
こんちわ！@t32kだよ。みんなバッジ好き？( ﾟ∀ﾟ)o彡ﾟバッジ！バッジ！バッジ！ 小学生の頃、自由勉強ノートってのがあって、勉強したページ分、先生からシールをもらってはそのノートに貼り付けていたのは良い思い出です。あのノスタルジーを再び！ ということで、大人の自由勉強ノートといえばGitHubレポジトリじゃないですか。OSSがんばります！私、気になります！そしたらシール欲しいじゃないですか？ あるよ、シールあるよ、シールってかバッジだけど。 上記は最近作ってるStyleStatsのReadmeだけど、なんか緑のバッジいっぱいですよね。それを説明していく！ Travis-CI Status Images Travis CI: Status Images まずは、この中のバッジの中では一番メジャーじゃないだろうか、Travisの Status Images。昔、@kyo_agoさんが『テ
Sass/Compass徹底入門を監修しました - MOL
2014年3月18日に発売される、Sass and Compass in Actionの邦訳版である『Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために』を監修した。 Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Brandon Mathis, 石本 光司 (株式会社サイバーエージェント) 翔泳社 2014-03-18 Amazonで詳しく見る by G-Tools 監修の依頼を受けて音速でハイと答えたのだけど、監修って何するんだろうねって感じだった。いや、原書の『Sass and Compass in Action』は以前から購入していて、Sass/Compassの開発者であるNathan Weizenbaumや
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の使
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
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
サイトの速度 - MOL
Stopwatch | By wwarby Flickr! こんにちわ、あなたの@t32k、ごきげんいかがでしょう。みなさんはスマホWebアプリ作っていて、自分の作ったものは速いのか遅いのか気になりませんかね？僕は木に泣くりまくりすてぃです。 そうゆうわけなもんで、表示速度とか計測してみようって話になるじゃないですかー、まさかストップウォッチで計測しないとは思うんですけどー、一応どのようにスピードを計測、そのアプリの性能を評価すればよいのか一緒に考えてみましょう。 僕が昔、ゴメス・コンサルティング（現：コンピュウェア モーニングスター） のセミナーに行ってきた時の話ですが、ここの会社はサイトパフォーマンスの計測サービスを提供していて、計測で重要なのは『定期的かつ継続的かつ同手法にてパフォーマンス測定』と言っておられました。 サービスリリース時はスモールスタートなのでアプリもコンパクトですか
パフォーマンスからみるSass/Compass 番外編：MSは青かった - MOL
2回も続いてないのにまさかの番外編！ここぞ変化球！キエル消える魔球！！ ってことで、最近Androidの相手ばかりしていて、「IE… そんな女もいたよね」って感じでしたが、ちょっとハマったので忘備録。グラデーションを使ったデザインをCSSで再現しようとした話。ということでCSSグラデーションのスニペットをUltimate CSS Gradient Generatorで吐き出してみたんですわ。 /* CSS */ .gradient { background: -moz-linear-gradient(top, #000 0%, #595959 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#595959)); background
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
