jadeを知る - LIFULL Creators Blog
こんにちは、@nazomikanです (この記事はNode.js Advent Calendar 2013の10日めの記事です) nodeでテンプレートエンジンといえばjade その一方で公式ドキュメントで書かれていることだけではだいたい痒い所に手が届かないのでissueから拾い集めたノウハウとか将来的な話とかを書きます 属性の存在が条件によって分かれるケースの書き方 urlが存在するときdata-url属性をつける //truthy: <p data-url="xxx"> //falsy: <p> in jade: p(data-url=(url ? url : false)) 属性の値が条件によって分かれるケースの書き方 boolがtruthyの時はclass="is-show"を、そうでない時はclass="is-hide"をつける //truthy: <p class="is-sh
とあるソシャゲのHTML/CSS設計話
【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから２年半…あっという間だった…。 関与したもの： スマホ版ピグ（リニューアルして面影無し） ピグファンタジア（11月末クローズ） 新規ゲーム ←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います： クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正
Unfolding the Box Model: Exploring CSS 3D Transforms
Use the ‹ and › keys to advance backward and forward. Here is our dear friend, the DOM element. For so long, we've had limited options: floats and positioning Web design is the ever-evolving art of placing DOM elements on the page Quinoa portland farm-to-table retro, put a bird on it mlkshk tattooed flannel actually high life carles semiotics iphone. Single-origin coffee blue bottle helvetica, neu
［翻訳］MCSS (Multilayer CSS)
これは「BEM Advent Calendar 2013」19日目の記事です。 タイトルに書いてある通り、Robert HaritonovによるMCSSのドキュメントを日本語訳しました。 ほぼ同内容のものをプルリクエストしてあるので、そのうち本家でも公開されると思います。 公式ページでも公開されました。 英語版があったので基本的には英語版から日本語訳したのですが、英語版で意味がよく分からない部分があって、そういうのはオリジナルのロシア語版を機械翻訳で英語にして、それを元にしたりしました。ので、英語版からの完全翻訳ではありません。 本当はロシア語できる人がオリジナルのドキュメント群を翻訳したほうがよいと思います。 MCSSは主にCSSの管理方法についての考え方で、読んでいて自分のやり方に一番向いているのではないかと思いました。 そこで、ちゃんと理解しておきたいということもあって翻訳してみまし
第4回 他人の著作物を安全に利用するために - MdN Design Interactive
アート・エンタテインメントの業務を多く扱う「骨董通り法律事務所For the Arts」の弁護士による、著作権とそれにまつわる法律関連の連載です。クリエイターが気になる法律問題についてわかりやすく解説しているので、ぜひ参考にしてください。 文：弁護士 永井幸輔（骨董通り法律事務所 for the Arts） ケース：クライアントからの依頼で、旅行情報誌の表紙のアートワークを制作することになった。メインビジュアルには紅葉の山の風景写真を使いたいが、手元に使える写真がなかったため、インターネットで探して利用することにした。著作権を侵害しないよう適法に写真を使うためには、どうすればよいだろうか。 今回は、著作物の「利用」の側面についてお話ししましょう。 自身で発表するかクライアント・ワークであるかを問わず、制作物に他人のアートワークを使用することも少なくないのではないでしょうか。既存の作品には、
お前のAngular.jsはもうMVCではない。と言われないためのTutorial - Qiita
JavaScriptフレームワークに興味あるし、Angular.jsを使ってみようかな・・・ そんな純真無垢なあなたを混沌の世紀末に引きずり込むのが、ほかでもないTutorialなのです。 TutorialではほぼControllerしか出てこないので、素直にこの通り書いているとまず間違いなく３カウントでControllerにコードが集中するいわゆるFat Controllerになり、せっかくMVCフレームワークも地獄の荒野になります。 実は、Angular.jsでまず目を通すべきなのはDeveloper GuideのConceptual Overviewです。これを読めばどう処理を分割するかがきちんと書かれていますが、以下ではそれ＋経験をもとにAngular.jsで正しくMVCを使用するためのポイントをまとめました。 Angular.jsの３原則 1.Controllerはイベントハンド
Perspective Page View Navigation | Codrops
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects. Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are
桜新町の主婦が教えるGrowth Hack
桜新町の主婦が教えるGrowth Hack Presentation Transcript 桜新町の主婦が教える Growth Hack １ 自己紹介 桜新町の主婦 私と一緒に、自然とユーザが増えるしくみを作りましょ∼！ ２ アジェンダ グロースハッカーって何かしら？ SNS で影響力を向上させましょ∼！ バズられる工夫をしましょ∼！ まとめよ∼！ ３ グロースハッカーって何かしら？ ４ 例えば…１ 入力項目を順に出す 登録画面の入力欄を３つから１つに変更してみましょ∼！ ５ 参考：1-800-DENTIST Boosts Sign-ups by 23.3% 例えば…１ 入力項目を順に出す 登録画面の入力欄を３つから１つに変更してみましょ∼！ 登録率 23％UP!! ６ 参考：1-800-DENTIST Boosts Sign-ups by 23.3% 例えば…2 すぐに使わせる 登録時に
Photoshop Generatorプラグインの作り方
改めてGeneratorとは 前回の冒頭では概念的にGeneratorの概要を書きましたが、端的に言うとGeneratorはiPhone/AndroidやPhotoshop以外のアプリケーションからTCP/IPを利用してPhotoshopへリモートアクセスを可能にするnode.jsサーバーです。 従って、Generatorプラグインはnode.jsアプリケーションということになります。Photoshopと接続して状態の変化をイベントとして探知できるので、夢が広がります。本稿では、プラグイン作成の基本的な作法を紹介していきたいと思います。 なお、本稿で使用するPhotoshop CCは、Adobe Creative Cloudの無償メンバーシップへの登録で30日間の体験版が利用可能です。 コアライブラリの準備 まず第一にnode.jsをインストールしている必要があります。まだインストールをさ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jade について。
Lightning Design System