読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

frontrend extend origami

f:id:shigemk2:20140501210559j:plain

Origamiって何

ボタンとかフォントとか、フロントエンドのこまごましたところをコンポーネント化して 自分の好きなように使うことができる。

Objectives(no-brainer design)

  • build a living style guide
  • more collaboration
  • more technical encapsulation
  • be forwards-compatible with web components
  • do responsive web design

going further origami

  • webdesign using paticular framework

rescue the old stuff

600 domain 800 sub domain

don't build a monolith

create another one!

raise the bar

good experience vs google

huge number of technologies

debugging design

progressive enhansement どこからエンハンスメントを始めるのか

make it easy

どこから、どのように簡単にしていくのか 1時間以内にOrigamiが使えるようにすることが重要

origami is

  • specification
  • tools registry build service
  • components modules (installable packages) web services(APIS)

Origami

|closure compiler | | |browserifly | saas | |commonjs | | | taskrunner (eg.grunt) | | bower |

decentralised and distributed

一枚岩のようなものは作りたくないので、 「コア」とか「コモン」的なものは作りたくない

  • だれでもコンポーネントを作れて、だれでも改造できるようにする。
  • 名前空間とカプセル化のルールを作る。

なんとなくのサンプル

<!DOCTYPE html>
<!--[if IE 7]>         <html class="no-js o-useragent-ie7"> <![endif]-->
<!--[if IE 8]>         <html class="no-js o-useragent-ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title>o-ft-buttons: individual demo</title>
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <style>
    body {
        margin: 0;
    }
    </style>
    <link rel="stylesheet" href="//build.origami.ft.com//build.origami.ft.com/bundles/css?modules=o-ft-buttons@1.4.1:/demos/src/demo.scss">
</head>
<body class="o-hoverable-on">
    
    <button class="o-ft-buttons">Standard</button><!--
--><button class="o-ft-buttons o-ft-buttons--selected">Selected</button><!--
--><button class="o-ft-buttons o-ft-buttons--disabled">Disabled</button>

<br>
<br>

<button class="o-ft-buttons o-ft-buttons--big">Standard</button><!--
--><button class="o-ft-buttons o-ft-buttons--big o-ft-buttons--selected">Selected</button><!--
--><button class="o-ft-buttons o-ft-buttons--big o-ft-buttons--disabled">Disabled</button>

    
    <script src="http://registry.origami.ft.com/embedapi?autoload=resize"></script>
</body>
</html>

サイトの読み込みが激遅…

noscriptタグ

簡単な感想

  • サイトのサーバー落ちとるやないかーい(504って…504って…)
  • 滑り込みで参加しといてなんだけど、逐次翻訳じゃなくて参加人数を減らしてレシーバーで同時通訳したらいいんじゃないかなって思った