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

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

origami is

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

Origami

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って…)
滑り込みで参加しといてなんだけど、逐次翻訳じゃなくて参加人数を減らしてレシーバーで同時通訳したらいいんじゃないかなって思った

by shigemk2

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