css2stylus

あまりcssいじりは好きじゃないんだけど、やるんだったら楽をしたいのでcss2lessを入れてみた。

sudo wget https://raw.github.com/sickill/css2less/master/css2less.rb -O /usr/local/bin/css2less
sudo chmod a+x /usr/local/bin/css2less

個人的にはlessよりもstylusのほうが好み(インデントの表現のほうがわかりやすい)なんだけど、css2stylusがないんだよなぁとおもいつつコマンドヘルプを見たら-Cオプションでcssをstylに変換できるんだった。

というわけで自分の.bashrcに

alias css2stylus='stylus -C'

って書いて解決。less2stylusがやりたければlessからcssにコンパイルしてcssをstylにすればイイ。

Bootstrap2を利用したイイカンジのサイト

最近bootstrap2を使い始めていて、FlaskとかExpressとかのスケルトンとして使えたら便利だろう(職場のサイトでは必要十分な気がする)なーとbootstrap2を中途半端に利用していい感じに仕上げているサイトを探している

wordpressだといくらでもチュートリアルが見つかるんだけど、bootstrapはなかなか見つからないのはなんでじゃろかねーとか思いながらBuilt With Bootstrapを見ながらヨサゲなサイトを探していた。

bootstrapのテーマを売っているサイトもみつけた。

グリッドデザインに使えるツールいろいろも役に立ちそうな気がするが。

個人的にはFlask+bootstrap2+Brunchですぐに開発できるようにしておけば最高なんじゃないかなぁと思っているので、今度のつくる会ハングマンのサンプルをこの構成で書きなおしてみるっていうのも面白いかなと。

ProductName JavaScript Web Applications
Alex Maccaw
Oreilly & Associates Inc / 3020円 ( 2011-08-30 )


静岡Developers勉強会 第4回HTML5読書会

三島でやります。

ProductName HTML5&CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )


今回は、ローカルストレージ、websocket、History APIあたりなので、以下の話題に興味があれば参加すると面白いかもしれません。

次の本

入門Gitを推しておきます。GitHubでフォローしているShizudeverいないんだよね、増えたらいいなっていうのが理由の一つ(他のサービス使っているんだろうか?)。もうひとつはブランチの切り方がイマイチきちんと身についてないので、勉強会で人が集まれば複数人作業ってのを試すことができるかなと。

ProductName 入門Git
濱野 純(Junio C Hamano)
秀和システム / 2310円 ( 2009-09-19 )


サークルグラフをフジテレビ風ソースでCanvasに添えて

波線で棒グラフの印象操作をするのは既に古典中の古典だが、斬新すぎる円グラフの表現方法をみつけたのでCanvasでやりたくなった。ちょうどHTML5読書会でCanvasいじっているので黙々してみた。

タイトルは、懇親会がフレンチの店なので合わせてみた。

circle graph ftv

センターずらすメソッドかなぁと思いながら作ってみたら、アークじたいが嘘っぱちだったという、、、

もはやグラフですらなかった。斬新すぎ。たぶん司会者の人は「サイレントマジョリティを考慮してます」とか言っていたんじゃないかなぁ。

コードはGitHubです。

html2jadeでHTMLを読みやすくする

HTML5ベースのスライドつくる場合はJadeみたいなインデントでブロックを表現するような形式のほうが見やすいし書きやすい。

html2jadeを使えば、逆にhtmlをjadeに変換して読みやすく出来るのでオススメです。

impress.jsのindex.htmlをjadeに変換してみた。読みやすい。

impress

      #bored.step.slide(data-x='-1000', data-y='-1500')
        q
          | Aren't you just
          b bored
          | with all those slides-based presentations?

      .step.slide(data-x='0', data-y='-1500')
        q
          | Don't you think that presentations given strong in modern browsers
          | shouldn't strong copy the limits
          | of 'classic' slide decks?

      .step.slide(data-x='1000', data-y='-1500')
        q
          | Would you like to strong impress your audience
          | with strong stunning visualization
          | of your talk?

      #title.step(data-x='0', data-y='0', data-scale='4')
        span.try then you should try
        h1
          | impress.js
          sup *
        span.footnote
          sup *
          | no rhyme intended

      #its.step(data-x='850', data-y='3000', data-rotate='90', data-scale='5')
        p
          | It's a
          strong presentation tool
          br
          | inspired by the idea behind
          a(href='http://prezi.com') prezi.com
          br
          | and based on the
          strong power of CSS3 transforms and transitions
          | in modern browsers.

      #big.step(data-x='3500', data-y='2100', data-rotate='180', data-scale='6')
        p
          | visualize your
          b big
          span.thoughts thoughts

      #tiny.step(data-x='2825', data-y='2325', data-z='-3000', data-rotate='300', data-scale='1')
        p
          | and
          b tiny
          | ideas

Canvasに富士山を描く関数

Canvasタグとflotを使って富士山を描いてみた。静岡県民だとこの関数は小学校高学年で習うのかな?

もしこの関数を知らない静岡県民がいたら、Canvasタグから勉強したほうがいいですね。タイミングよく来週HTML5読書会があります。しかもCanvasの章ですし、参加しないわけにはいけませんね。

$(function () {
    var f = function(x) { return Math.pow(x,4) - Math.pow(x,2) + 6 };
    var s = function(x) { return 12 / (Math.abs(x)+1) };
    var g = function(x) { return 1/2 * Math.cos(6*x) + 7/2 };

    var d1 = [];
    var d2 = [];
    var d3 = [];
    var d4 = [];

    for (var i = -1; i <= 1; i += 0.1)
        d1.push([i, f(i)]);

    for (var i = -7; i <= -1; i += 0.1)
        d2.push([i, s(i)]);

    for (var i = 1; i <= 7; i += 0.1)
        d3.push([i, s(i)]);

    for (var i = -2; i <= 2.1; i += 0.1)
        d4.push([i, g(i)]);

    $.plot($("#placeholder"), [ { data:d1, color: "rgb(0,0,255)" }
                  , { data:d2, color: "rgb(0,0,255)" }
                  , { data:d3, color: "rgb(0,0,255)" }
                  , { data:d4, color: "rgb(0,0,255)" }
    ]);
});

ProductName HTML5&CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )


第三回HTML5読書会をやります

今回は富士市のコミュニティfでやります。

ProductName HTML5&CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )


みんな大好きCanvasとAudioタグまわりを広く浅くな感じでざざっとやりますので、初心者でもわかりやすい安心安全な内容になると思います。

もちろんそろそろ発売される予定のHTML5 Canvasのウォーミングアップのために参加するのも良いでしょう。

ProductName HTML5 Canvas
Steve Fulton
オライリージャパン / 3360円 ( 2012-01-21 )


僕は原著読みましたが、Canvasを深く知りたいならおすすめです。

懇親会は今までの串エクスプレスや上腕二頭筋からは趣向を変えておしゃれ系の野村食堂でやります(富士駅から近いので帰りが楽)。懇親会だけ出たいというヒトがいたら、@kzfmまで連絡下さい。オシャレ要員としてカウントさせて頂きます。

追記 120113

それから、欲しい本があったらtweetしておいてください。

第2回HTML5読書会に参加した

4章のCSS3の入門と5章のWAI-AREAでした。資料はGitHubにおいておきました。ちなみにスライドはhtml5slides用のhtmlをJadeを使って書いたので超快適だった。

おやつの大福

1323559645

懇親会は静岡のIT勉強会合同忘年会

1323559647

それにしても今年は勉強会が増えたなぁと。静岡の土曜日は常になんかあるしな。まぁ、つくる会は土曜日外しているのでバッティングしなくて安全なんだが。

あと、言語のコミュニティが一つ欲しい。静岡pyが欲しいんだけどねー

  • Safari Books Onlineはよさげなサービスだ
  • HTML5読書会はあと3回くらいで終わりそうなのでそろそろ次も考え始めないと

最近成果物を出してないのでなんかつくろうと思った。あとつくる会の日程も決めよう。

Jadeとhtml5slidesでつくるプレゼン資料

最近はyaml+markdown(python)なluminescenceでスライドをつくることが多かったんだけど、今回はhtml5でスライドを作れるhtml5slidesを使っている。

sectionタグとかarticleタグがあるので意味的にわかりやすい構成になるのとJadeを使えばすっきりと書けて気持ちよかろうと。

追記 111207

pyjadeもできてた。

スタイル属性にcssセレクタを使うことはできないの?

Chrome15.0.874.121使っているが。

<table style="tr:nth-of-type(2){backgroud:red;}">

こんな風にセレクタを指定しても何も起きなかった。

ProductName HTML5&CSS3実践入門 最新Web標準を使いこなす (The Pragmatic Programmers)
ブライアンP.ホーガン
インプレスジャパン / 2940円 ( 2011-07-08 )


ちなみに週末にHTML5の読書会があるので興味がある方は是非