タグ

ブックマーク / t32k.me (9)

  • 【翻訳】Web世代のデベロッパーのためのmake - MOL

    Original:Make for the Web Generation (2015-02-28)by Casper Beyer イントロ JavaScriptの普及に伴いビルドツールが盛んだ。人気なものをいくつか挙げれば、grunt、gulp、slush、broccoliやbrunchなどがあるが、結局、名前をつけただけにすぎない。 多かれ少なかれ、これらのツールはファイルコピーからzipファイル作成のようなシンプルなタスク処理でさえ、すべてプラグインに依存しているので、それらのタスクを実行するためにプラグインを必要とするだろう。 これらのツールは理想論的には大きな柔軟性をもたらすものとされているが、実際はUNIXのエコシステムをただ複製しているだけにすぎない。このために君のプロジェクトは早々に、大きな開発依存性のバンドルを持つことであろう、そして、やっているタスクは単なる普通のコピー、

    【翻訳】Web世代のデベロッパーのためのmake - MOL
    nilab
    nilab 2015/05/20
    【翻訳】Web世代のデベロッパーのためのmake - MOL
  • Wisteria:デザインツールとしてのCSS - MOL

    Wisteria.css: A class selectors based harmless CSS library. t32k/wisteria WisteriaというCSSライブラリ作った。基的な用途としてはモックアップや後方互換とかそこまで考えなくていい、小規模の個人用のページとかで使われることを想定している。 Skeletonという、すごくシンプルなCSSライブラリがあるのだが、僕はこれが好きで、ちょっとしたものとか作るときによく使用している。このブログもSkeletonをベースにしているくらいだ。 でも最近使ってて、なにかこう違和感というか、相容れないモノを感じたので、思い立って自分用のCSSライブラリを作ってみたのだ。 Harmless Wisteriaを作るにあたって、一番気をつけたことは無害であること。つまり要素にスタイリング(h2 { font-size: 24px }

    Wisteria:デザインツールとしてのCSS - MOL
    nilab
    nilab 2015/04/04
    Wisteria:デザインツールとしてのCSS - MOL
  • 【翻訳】ビジュアルデザインはつまらなくなってしまったのか? - MOL

    Original:HAS VISUAL DESIGN FALLEN FLAT? (2015-01-20)by Emmet Connolly 2013年から2014年の劇的なUIフラット化により無数のピクセルが流れ落ちていった それはビジュアルデザインにおいて非常に大きな変化だった。Microsoftの急進的でモダンなMetro UIはその前兆だった。iOS7のリリースよって大衆化し、UIのトレンドは2極化した。Google Material Designによって、おおかた完成した。 フラットデザイン(未完成であるけれど便利な表現)はスキューモーフィズム(同前)を駆逐するだけでなく、それの墓の上で踊り、すべてのべべル、影、墓石のテクスチャさえ消し去ってしまった。 上図のようなデザインである。 発展、変化、流行は避けられないものだ。このような最新スタイルもまた、いつの日か廃れていくだろう。未来

    【翻訳】ビジュアルデザインはつまらなくなってしまったのか? - MOL
    nilab
    nilab 2015/04/04
    【翻訳】ビジュアルデザインはつまらなくなってしまったのか? - MOL
  • 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

    Grunt/Gulpで憔悴したおっさんの話 | MOL
    nilab
    nilab 2015/04/04
    Grunt/Gulpで憔悴したおっさんの話 - MOL
  • HTTPリクエストを減らすために【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ - MOL

    このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 3日目は、スマホ環境であればHTTPリクエストを減らすためにWebフォントの採用を考慮しても、やぶさかではないだろう。 まずは下記の画像をご覧頂きたい。 これはプロジェクトで私が使用していたスプライト画像だが(実際は縦にして使用)、このような単純な形状、単色のアイコンであれば、Webフォント化したほうがなにかと都合がよい。 このスプライトであれば、カラー × 矢印の向き × シャドウの有無 パターンの可能性があり、スプ

    nilab
    nilab 2013/08/21
    HTTPリクエストを減らすために【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ | MOL
  • 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要素として読み込んでいるのに対して、右は1つの背景画像(CSSスプライト)として読み込んでいる。この場合、

    nilab
    nilab 2013/08/21
    HTTPリクエストを減らすために【CSS Sprite編】スプライト地獄からの解放 | MOL
  • HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL

    このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ(t32k.me)が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ

    nilab
    nilab 2013/08/21
    HTTPリクエストを減らすために【序章】HTTPリクエストは甘え | MOL
  • Titanium.UI.iPhone.SystemButton | MOL

    みなさん、タイタンやってまっかぁ?わい? わいタイタンやで(・∀・)イイ!! てことで、先週 Untitled!!!!!!!! で講演してきたわけですが、Twitterでの反響を見てますとTitanium Mobileやってみたい!って声もちらほら見受けられて、僕も話して良かったと感じていますです。で、皆さんはこれからTitanium勉強して僕におしえてくっさい! そんなわけで、今回は自分的にメモ的なメモ。Titanium Mobile はネィティブなUIが使えますので、それをフル活用していこうぜってのが今回のエントリの主旨。 ボタンとかアイコン作ったりするのめんどいので、システムボタン使おーぜってことす。そのほうが下記コードのような感じで、プロパティの部分が1行で定義できたり、組み込みのアプリと同じ振る舞いをするだろうとユーザーも理解しやすいだろうってことです。さて、そのシステムボタン、

    nilab
    nilab 2011/07/25
    システムボタンのキャプチャ画像、一覧。 / Titanium.UI.iPhone.SystemButton | MOL
  • Titanium MobileのKitchenSinkを実機(iPhone)にインストール | MOL

    KitchenSinkどうこうではなく、ほぼProvisioningに関するお話ですがお付き合いくださいませ。 あ、ちなみに私の環境はXcode 4 + Titanium Developer 1.2.2 + Titanium SDK 1.6.2です。 iPhoneアプリ公開で一番手をこまねいた作業といえばプログラミングでもなくデザインでもなく、プロビジョニングです。アプリを実機にインストールするのにもプロビジョニングファイルの作成が必須です。 iOS Provisioning Portal – Apple Developer 上記サイトから行うのですが、いやはや全く意味不明です。自分が何のために今どのような作業をしているのか分からず、Web上の記事を参考にとりあえず前に進んだという状況だったので、それじゃいかんじゃろということで自分なりにまとめて理解してみる。 まずは、ぷろびじょにんぐっ

    nilab
    nilab 2011/07/11
    Titanium MobileのKitchenSinkを実機(iPhone)にインストール | MOL
  • 1