少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
CodePen - Front End Developer Playground & Code Editor in the Browser
Build, share, and learn JavaScript, CSS, and HTML with our online code editor. Discover web applications and hire talent from the world’s largest community of front end developers and designers.
こんにちは、どうしようもないニート無職の@kami30kです。 ここ最近つくっていたサービスをようやくリリースしたので、作業ログ的な記事を書いてみます。 なにをつくったか 今回つくったのは、HIRAMEKI CAFEというサービスのアイデア共有サービスです。 KPT LOG、SHOMEI DESIGNにつづいて自身3つめのサービスとなります。 サービスのアイデア共有コミュニティ HIRAMEKI CAFE 簡単に説明すると、知っている人は多い（と思う）ideamiのようなサービスです。 ぼくはこのサービスがとても好きだったのですが、最近あまり使われていないようで、とはいえサービス自体のニーズはあると思うので、今回サクッとつくってみました。 機能自体はとてもシンプルで、 Twitterで認証する アイデアを投稿する グッド（いいね！のようなもの）、コメントなどをつけてもりあがる だけのサービ
元々DTPやってました 自分は大卒でとある広告メディア系の会社に入ったんですが、ずっとDTP（エディトリアルデザイナー）の仕事をしており、正式にWebデザイナーに転向したのは2012年頃の話です。 「このまま紙だけやっててもそのうち食えなくなっちゃうよなあ…」と思い、仕事のかたわらHTML/CSSをはじめとしたWebの勉強を始めました。一応HTMLかじったことはあるものの、知識は大学生の頃で完全にストップしており、floatって何？レベル。（テーブルレイアウト世代） 一念発起したはいいものの、いざ勉強をしようとすると色々と問題が生じるわけですね。 Photoshopでデザインなんてやったことない、Illustrator使いたい 呪文みたいなコードを延々と打つ作業がだるい うまく動かなくて一つのコード間違いで3時間潰れたりするのが辛い 本屋行けば技術書、入門書はいくらでもあるけど、逆に何選べ
なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を
フルスタックがウリのRails。そこまで必要ないよ。と、ERBでゴリゴリ。メンドクセー。やっぱ、Railsで。などと、陽はまたのぼりくりかえしてーゆく。RubyのWebフレームワークは他にもあるけど。。軽くていいんだ。PHPを使いたくないだけなんだ。 そんな悩ましさを解消してくれるフレームワークを発見してしまいました。「Sinatra」でございます。こいつは、軽そうだ。 Sinatra サイトのトップページに書かれているコード。これが、サクサク感をかもし出してくれています。 require 'rubygems' require 'sinatra' get '/hi' do "Hello World!" end 説明読まなくても解るよ、これ。 日本語の解説スライドがあります。よく解る解説ー。 公式サイトのREADMEを読めば、だいたいOK。 Sinatra: README パラメータを取得し
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
This page is also available in English. 始めよう SinatraはRubyで下記のような最小労力で手早くウェブアプリケーションを作成するためのDSLです。 # myapp.rb require 'rubygems' require 'sinatra' get '/' do 'Hello world!' end gemをインストールして動かしてみる。 sudo gem install sinatra ruby myapp.rb localhost:4567 を見る。 ルート Sinatraでは、ルートはHTTPメソッドとURLマッチングパターンがペアになっています。 ルートはブロックに結び付けられています。 get '/' do .. 何か見せる .. end post '/' do .. 何か生成する .. end put '/' do .. 何か更
インデントを綺麗に
怖話 | スマホで怖い話
人には視覚・聴覚・触覚・味覚・嗅覚の五感に加えて細かく分析すると20以上の感覚があるといわれています。なかでも五感を超える感覚として知られている第六感は、理屈では説明のできない鋭く本質をつかむ心の動きです。身近な人の命が危ないときに感じる「虫のしらせ」や何かが起こる前に感じる「嫌な予感」は、人が持つ野性的な感覚です。 この世の中には訪れてはいけない場所があります。そんな場所にそうとは知らずに立ち寄ったとき、忘れられないほど強烈な体験をすることがあります。恐怖を体験した人だけでなくその話を知った人にも怪奇現象が現れる恐ろしさ。知らなければそれほど恐怖を感じずに済んだのに、わかった瞬間に背筋が凍る恐ろしさ。いろいろな怖さがありますが、テレビや雑誌で公開されている話とはくらべものにならないような怖い体験をしたことがあなたはありますか？ 隣の空き部屋で深夜同じ時刻に必ずする物音や誰もいないはずのト
HTMLを書いていて、心がけていても時間に追われているとだんだんと乱れてきて、インデントされていなかったり、ルールがバラバラなソースになってしまうなんてことも多いと思いますが、今日紹介するのはHTMLのインデントをキレイにしてくれるWEBサービス「Ham Cutlet」です。 利用方法は非常に簡単で、WEB上で、HTMLをコピペ、その後設置されている「COOK!ボタン」をクリック。これだけです。 詳しくは以下 このサービスにはHamlというHTML/XHTMLを生成するためのマークアップ言語が使われているみたいで、「HTML → 一旦hamlにする → HTMLに戻す」という流れでインデントの整頓を実現しているとのこと。hamlに興味のある方は「日本Hamlの会」もどうぞ。 実際、インデントが無くても問題なく、動作しますし、整ったからと言ってオモテ面に影響があるわけでないのですが、メンテナ
Jade について。
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
プログラマブルなインフラ、Ruby、JavaScriptなどが重要なテクノロジと評価される。ThoughtWorksのレポート
プログラマブルなインフラ、Ruby、JavaScriptなどが重要なテクノロジと評価される。ThoughtWorksのレポート オブジェクト指向やアジャイル開発などを広めてきたMartin Fowler氏が所属し、アジャイル開発のコンサルティングなどを行っている企業としても知られているThoughtWorks。同社は、IT業界内のさまざまなテクノロジーの中から、重要性を増しつつあるテクノロジーや、逆に影響力を失いつつあるテクノロジーなどを紹介するレポート「Technology Radar」を不定期に公開しています。 そのTechnology Radarの2011年1月号が公開されました。いままでPDFバージョンしかなかったのですが、今回はHTML版も公開され、より見やすくなっています。 Technology Radarは、開発技法を対象とした「Techniques」、ツールを対象とした「T
Hamlコミッターになった RubyKaigi 2015で「Hamlは遅いしメンテされてないので使わない方がいい」と言ったところ、じゃあ自分でメンテして速くしろということになりコミッターになった*1。 当時から2年ごしなのは、当時のHamlのオーナーがあまりアクティブではなく、最近a_matsudaさんがオーナーになったため。 HamlのTemple化・高速化を行った Templeというのは、テンプレートエンジンをパイプライン的に構築するためのフレームワークで、テンプレートエンジン用の中間表現とその最適化エンジンを持つ。実装をTempleベースにすると、SlimやHamlitに使われているような中間表現を使った最適化を適用しやすくなる。 コミット権をもらったので、RubyKaigi 2015でマージされないと言っていたパッチを自分でマージし、コード生成とattributeのコンパイルをTe
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
!!! 5 html(lang="en") head title= pageTitle(car insurance montana) :javascript | if (foo) { | bar() | } body h1 Jade - node template engine #container - if (youAreUsingJade) You are amazing - else Get on it! Get on it! Get on it! Get on it! <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> //<![CDATA[ if (foo) { bar() } //]]> </script> </head> <body> <h1>J
インストール gem をインストールし, 新たに Middleman を使ったサイトを作成するために CLI から middleman init my_project を実行します。 インストール方法を参照する サイトのカスタマイズ cd my_project してください。 Middleman は細かい設定なしに動作します。各ディレクトリの意味や サイトのカスタマイズの行い方を理解するためにドキュメントを読んでください。 カスタマイズ方法を参照する
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
http://railsapi.com/
All the Cool Kids Compile Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF and JPEG right out of the box. Dead-Simple Configuration Want compressed CSS? Just check a box. Need to transpile JavaScript? Check a box. Every tool's options are available in a beautiful, clean UI. No more hacking build scripts. Bleeding-Edge Tools Autopref
doctype html html head title Slim Examples meta name="keywords" content="template language" meta name="author" content=author javascript: alert('Slim supports embedded javascript!') body h1 Markup examples #content p This example shows you what a basic Slim file looks like. == yield - unless items.empty? table - items.each do |item| tr td.name = item.name td.price = item.price - else p | No items
maedana SonicGarden SUG（SKIP User Group）／日本Hamlの会 2009/5/22 Railsを使ったWebアプリケーション開発で、プログラマやデザイナを悩ませるものの1つがスタイルシートの記述だろう。Sassを使って、“クールで構造化された”スタイルシートを記述してみよう（編集部） Sassとは、Syntactically Awesome StyleSheetsの頭文字を取ったものです。あえて日本語に訳すと、「かっこいい構文のスタイルシート」といった感じでしょうか。 もう少しシンプルに表現すると「クールなCSS（Cascading Style Sheets）」でもいいかもしれません。Sassはスタイルシートを簡潔に表現するためのメタ言語であり、同時にSassからCSSを生成するための便利なライブラリやコマンドラインツールを提供します。 Sassを使うと
日本 Haml の会
Haml/Sass の普及を目的としたユーザグループです。Rails 勉強会@東京の分科会のような位置付けで活動しています。略称は日本ハムです。 活動内容 Haml/Sass に関する情報交換 (Rails 勉強会@東京、または irc.freenode.net の #rails-tokyo チャンネル) 各種イベントにおける Haml/Sass の宣伝 オープンソースプロダクトに Haml 化パッチを投げる
UIデザイナー募集で困ってること | F's Garage
トレタCOOのkengochi氏がUIデザイナーについての記事を書いてた。 UIデザインの価値 | Parallelminds BASEでも、ずっとこの辺の職種も募集していて、来月１人入るんだけど、実はUIデザイナーの募集はすごく困っている。 というのも、今、BASEでほしいUIデザイナーとは、 ・いわゆるWebデザイナーではないし、 ・いわゆるフロントエンドエンジニア（JavaScript実装特化型）の人でもない。 というところ。まさしくkengochi氏が書いてる「のりしろ」重要 じゃぁコアスキルって何？ってのを、経験者採用の理想を言えば、 １．D.A.ノーマンの本ぐらいは読んだことがあって、ユーザインターフェースを意識しながらユーザビリティの高い設計ができて ２．ビジュアルデザインのスキルもあって、カッコいサイト、サービスが作れて、 ３．ちゃんとユーザーさんのことを意識できて（つまり
Installation Install the gem and run middleman init my_project to create a new Middleman site from the command line. See full install instructions Customize Your Site Check out the directory cd my_project. Middleman works right out of the box. Start reading the docs to find out what each directory is doing and how to customize your site. See advanced customizations Build and Deploy Running one com
はじめに 第7回はRails以外のWebフレームワークの簡単な紹介と、SinatraでHello Worldアプリケーションを動かすところまでを解説しました。今回はSinatraで実際のアプリケーションを作り、SequelとHamlという2つのライブラリを紹介します。 Sinatraの特徴は、CGIスクリプトのようにファイル一つからアプリケーションが書ける気軽さです。CGIスクリプトといえば、代表的なものは何と言っても掲示板（BBS）です。そこで、今回はSinatraで掲示板アプリを作ってみました。ソースコードが少し長めなので、githubにて全文を公開しています。適宜参照しながら読み進めて下さい。ファイル構成は以下のようになっています。 start.rb アプリケーションの本体。 model/comment.rb 掲示板の書き込みを表すモデルの定義。 view/index.haml トッ
Slimより高速なHaml実装「Hamlit」をリリースしました - k0kubun's blog
slim-template/slimのcompiled benchでオリジナルのhamlに比べ8倍高速に動作するhaml実装をリリースしました。 github.com なぜ高速なHaml実装を作ったのか 個人的にhamlのシンタックスのほうが好きなので、「hamlは遅いからslimを使う」みたいな人を減らしたかったから。以前slimの普及に貢献したんだけど、気が変わったのでhamlを応援することにした。 実は他にも既にeagletmt/famlという高速なHaml実装が存在していたんだけどベンチを走らせたらslimより遅かったので、slimを打倒するべく再実装した。 どのくらいHamlより速いのか 自分の実装に都合のいいベンチマークを作るのは簡単なので、公平性を期すためにslim-template/slimのcompiled benchと同じものを使い、誰でも同じ環境が使えるtravisで
Your Friendly Web Development Companion Prepros compiles your files, transpiles your JavaScript, reloads your browsers and makes it really easy to develop & test your websites so you can focus on making them perfect.
俺的フロントエンド開発
7. CSSプリプロセッサ • SASS • インデントベース • 記法が厳格 • {};が不要 • SCSS • インデント無視 • CSSを入れ子と変数に対応させ た感じ • CSSをそのままSCSSプリプロ セッサに わせてもエラーでな い • LESS • SCSSの記法違い、みたいな 感じ • 使ったこと無いので分から ない • Stylus • なんかもう自由にかけるや つっぽい • 使ったこと無いので分から ない 8. SASS @import “compass” body margin: 0 padding: 0 #main border: 1px solid #000 +border-radius( 4px ) ul &.list li display: inline-block body{ margin: 0px; padding: 0px; } #main{ bord
第６回は伊藤直也さん (@naoya_ito) をゲストに迎えて、Kindle 出版、GitHub、Google Reader などについて話しました。 ほぼ週一くらいで配信されている @miyagawa さんの Podcast、第6回目のゲストで出演しました。第1回目に続き、これで自分は2回目ですね。だんだん往年のいいともみたいになっていくのだろうか。 それはともかく、内容は先日だした Kindle の 入門 Chef Solo に絡めて KDP (Kindle Direct Publishing) の話、それから Google Reader にまつわる RSS の話に関して。二人とも KDP での出版経験があるのと、RSS に関しては昔二人で本を書いたりした当時のホットな話題でお互い良く知ってるしというので、面白く話せました。 Chef 本が実際 KDP でどのくらいダウンロードされて
Is Rails Slow?
Slides for Rails Israel 2014 talk "Is Rails Slow?" http://railsisrael2014.events.co.il/
マークアッパー的 Haml入門21の手引き - Web学び
2012年 4月 11日 HamlはHTMLを効率的に生成するための記法です。 むずかしいと思っている方も多そうなので、かいつまんでシンプルにまとめてみました。 Hamlを使えるようにする Macの場合は アプリケーション＞ユーティリティ＞ターミナルを開きます。 開いてすぐの位置に次の一行を入力します。 gem install haml 処理が数分ほどかかります。ターミナルはそのままにしてください。 HamlファイルをHTMLに変換する まずは書いたコードがどのようにHTMLとなるのか確認できるようにしましょう。 試しにデスクトップにtest.hamlというファイルを作ります。 HamlをHTMLにするため、先ほどのターミナルを開きます。ファイルを置いた階層までcdで移動します。 cd desktop これを入力しEnter(return)キーを押して haml test.haml tes
はてなブログ | 無料ブログを作成しよう
新米と秋刀魚のわた焼き お刺身用の秋刀魚を買いました。1尾250円です 3枚におろして、秋刀魚のわたに酒、味醂、醤油で調味して1時間ほど漬け込み、グリルで焼きました 秋刀魚のわた焼き わたの、苦味が程よくマイルドに調味され、クセになる味わいです 艶やかな新米と一緒に 自家製お漬物 土…
Nanoc © 2007–2024 Denis Defreyne. The content of the Nanoc website is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License, with exception of code examples, which are released into the public domain. Nanoc is licensed under the MIT license. Font Awesome licensed under SIL OFL 1.1. Subtle Patterns by Atle Mo. Deployed on Netlify, the hosting platform with native support for
LiveReload
LiveReload 2 proudly presents… The Web Developer Wonderland(a happy land where browsers don't need a Refresh button) CSS edits and image changes apply live.CoffeeScript, SASS, LESS and others just work. Citizenship is granted through the Mac App Store. Windows permanent residency issues are being worked out, temporary stay already allowed. What does LiveReload do?LiveReload monitors changes in the
KSSで作るパターンライブラリ
2013年9月21日大阪 #PmD01 で発表させていただいた資料です。 合わせて読みたい 【アイコンを200こ描いた振り返り！】アイコンから知るデザインのヒントby awayuki http://www.slideshare.net/awayukin/awayuki-pmd01-sha…
haml との互換性にはかなり気を使っているけど、一部意図的に非互換にしていたり、正確な仕様がわからず再現できていない箇所があったり、haml の奇妙な挙動が直っていたりして、完全に全く同じ動作にはなっていない。 先日 faml を本番に投入して今も動いている。faml 導入にあたって実際にはアプリケーション側のビューを一部書き換えたけど、大量のビューがある中での変更点は十分少なかったと思う。 なお、このエントリ内での「元々の haml」は haml 4.0.6 を指している。過去のバージョンは知らない。 どれくらい高速なのか 元々 faml を書き始めたきっかけは「haml と slim に文法的に大きな差があるわけではないんだし、slim と同程度高速な haml のレンダリングエンジンは書けるはず」という点だった。 なので、slim と同じくらい高速ではあるものの、slim 以上に高
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ニートが1週間でアイデア共有サービスをつくったときの記録 - kamiのサービス制作ログ
DTP→Webデザイナー転向時に、これやったら捗ったよリスト13
クックパッド流UIの作り方 - takeshi nagayama's blog
http://blog.monoweb.info/article/2012021823.html
Rubyの軽量Webフレームワーク「Sinatra」がステキ - このブログは証明できない。
Sass: Syntactically Awesome Style Sheets
Sinatra: README (Japanese)
Makes you HTML souce eautifully indented - Ham Cutlet
HTMLのインデントをキレイにしてくれるWEBサービス「Ham Cutlet」
Hamlを3倍速くした - k0kubun's blog
JADE LANGUAGE Node Template Engine
Middleman: 作業を効率化するフロントエンド開発ツール
GT Nitro: カーレーシング・ドラッグレーシングゲーム - Google Play のアプリ
CodeKit - THE Mac App for Web Developers
Slim - A Fast, Lightweight Template Engine for Ruby
SassでCSSの弱点を克服しよう （1/2）－ ＠IT
Middleman: Hand-crafted frontend development
第9回 SinatraとSequel・Hamlで掲示板アプリを作る | gihyo.jp
Your Friendly Web Development Companion
宮川さんPodcast ep6、KDP での本の作り方 - naoyaのはてなダイアリー
Nanoc: a static-site generator written in Ruby » home
Rails 4でHeroku Pushまでの詳細手順 [haml/bootstrap 3.0/postgresql or MySQL]
![Rails 4でHeroku Pushまでの詳細手順 [haml/bootstrap 3.0/postgresql or MySQL]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c2ea7e72d0d7f3ba6c237909f321e67ffbdaa24e/height=288;version=1;width=512/https%3A%2F%2Fmorizyun.github.io%2Fimg%2Fog_image.png)
haml の高速なレンダリングエンジン faml を書いた - eagletmt's blog