オブジェクトのプロパティをオブジェクトで設定する関数 - Qiita
text.x = 40 text.y = 140 text.size = 64 text.bold = true text.underline = true text.color = "yellow" text.rotation = -20 こんなことをするのがだるくなってきた話。 ※コードは全てCoffeeScriptで書いています オブジェクト名を何度も打つのは冗長だし他にもオブジェクトがあった時に使いまわせる設定があったら使いまわしたい。 そこでこんな関数を考えてみた allocate = (obj, configs...) -> for config in configs for key, value of config obj[key] = value
最適な見だしのフォントサイズを導き出すツール『Type Scale』
最適な見だしのフォントサイズを導き出すツール『Type Scale』 『Type Scale』は最適なフォントサイズを検討する際に役立つツール。 ベースとなるフォントサイズに対して見だしサイズの最適な比率を導き出すフォントサイズの計算機です。 通常、<h1>～<h6>までの見だしタグでは、ベースとなるフォントに対し一定の比率でフォントサイズが与えられています。 Tim Brown氏はこの比率をタイポグラフィーとしてもっと理論的に意味のあるものであるべきと、黄金比や音楽和声などを用いたスケールをフォントサイズに当てはめた『Modular Scale』というものを公開していましたが、こちらのType Scaleはその理論に基づいて作られた、プレビューしながら見比べられるビジュアルに優れたツールです。 左側のパネルでベースフォントのサイズを入力しリストボックスからスケールを選択すると、それぞれの
HTML5が切り開く未来のWeb 新しい価値の創造【セミナーメモ】 - Qiita
安部正幸 KDDI Web Communications勤務。ホスティングサービスCPI、SmartReleaseなどのプロダクトマネージャー HTML5&OSS-DB Festival ~2014 Spring~ 日時 2014年04月11日（金） 主催 LPI-Japan まずはじめに IE6サポート終了おめでとうございますｗ CPIのIEアクセス数をみるとIE6,IE7は0.4%、今後はIE8以上でOK 昨今の制作について クラウドワークスを見ると、好評価なデザイナーでさえ時給1,000円〜で仕事をしている。 オフショア開発などにより、制作単価の下落も発生している。 10年先、20年先生き残るためにはどうすれば良いのか？ →制作に加えて何か価値が必要。新しい価値を創造する。 普段の仕事 エバンジェリストなので、ブログを書いていたが、ブログ経由のサーバ系契約が1件/３ヶ月。 わかりやす
HTML5レベル1ポイント解説セミナー【セミナーメモ】 - Qiita
大阪裕香 インターネットアカデミー HTML5&OSS-DB Festival ~2014 Spring~ 日時 2014年04月11日（金） 主催 LPI-Japan 1.W3C標準の正しいマークアップを知ろう HTML5認定試験は広義のHTML5が範囲となる シンプルになった文字コード宣言 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet"href="style.css"> <script src="script.js"></script> </head> <body> <!-- THe rest is content --> </body> </html> <header>, <footer>, <nav>, <art
jade で IE の Conditional Comments(条件付きコメント)を効かせる - Qiita
<!--[if lt IE 9]> <script src="/javascripts/html5shiv.js"></script> <![endif]-->
HTML5でネイティブアプリを作ろう！「Windowsストアアプリ」開発入門
HTML5でネイティブアプリを作ろう！「Windowsストアアプリ」開発入門 物江 修（日本マイクロソフト株式会社 Webエバン...） これまでのHTMLはオンライン上のドキュメントを記述する目的に設計され、発展してきましたが、HTML5ではそれに加え、アプリケーションのプラットフォームとしての仕様も盛り込まれています。 HTML5のマークアップや API、CSS3、SVGなどの関連技術を使用すれば、Webブラウザの独自の拡張機能に頼らずとも、Web標準から外れることなく、高機能なWebアプリケーションを開発することができるようになりました。また、HTML5とその関連技術が提供するさまざまな標準化された仕様は、Webブラウザ内で動作するコンテンツにとどまらず、クロスプラットフォーム開発が必要とされるネイティブアプリの開発でも使用されるようになっています。 こういったクロスプラットフォーム
Node.js用データ通信モジュールを公開しました - Qiita
段々使える感じになってきたので、自宅でシコシコと開発しているNode.js用モジュール「Tikitaka」をGitHub 上に公開し、npmモジュールとして登録しました。 「Tikitaka」は、サーバー(Node.js)・クライアント(ブラウザ)上のオブジェクトやファンクションを、接続対象のクライアント・サーバから、 あたかもローカルにあるかのように 操作できるようにしてくれる、國村隼さん並に激渋なモジュールです。 例えば、こんなことができます。 サーバ(Node.js)側スクリプト function DBSample(){}; DBSample.prototype.get = function(key, client_func) { // keyからvalueを得る"db.get"というものがあるものとして・・・ db.get(key,function(val) { client_fu
脳筋で使えるjQueryプラグイン作った『waiwai-carousel』 - Qiita
仕事でjavascriptのコードを読んでいた時に自分も興味を持ってしまったので、勉強用に作ってみることにした。 紹介 名前 waiwai-carousel 【github】 色々機能を入れているので、賑やかなプラグインという意味でこの名前になった。 特徴 リスト要素に対して簡単な記述をするだけでカルーセルの動作を実装できる リスト毎のサイズは自由に設定できる 好きな要素をnext・prevボタンにできる 特に指定しなければ、親要素のサイズを見て自動的にカルーセルの範囲を調整してくれる 縦・横方向どちらにも対応 移動量変更可能 アニメーションの時間を変更可能 各イベントのコールバックを設定できる 使い方 javascriptの読み込み head内など任意の場所にjQueryとセットで読み込む <head> ... <script src="jquery-1.11.0.min.js"></s
知らないと損！ウェブデザインに特化したPhotoshopの効率的な89の時短テクニック -神速 Photoshop Webデザイン編
Photoshopを毎日使うウェブ制作者はぜひ目を通してほしい、Photoshopを自分の手足のように使えるようにするノウハウ、同じ結果でも遙かに時間が短縮されるテクニックが満載のオススメ本を紹介します。 同サイズの画像をスライスするのに5分かかっていたのが1分で！ 10px以下の小さな文字を鮮明にするのに10分以上かかっていたのが5分でよりキレイに！ など実用的な技が満載です。 「神速 Photoshop Webデザイン編」ではウェブデザインの現場でPhotoshopを使う時に役立つ情報が満載！ Webデザインに特化したPhotoshopの環境設定方法から、すばやいスライス、効率的なカンプの作成、デザインのバリエーションを楽につくるなど、実践的なテクニックや便利なツール、そしていざという時の「直し」に強いデータをつくる方法など、デザイナーの時間を大幅に短縮します。 神速デザインの5箇条
[JS]縦長のスクロールページに使いたい便利なスクリプト -isInViewport.js
Demo: Basic div要素が縦に並べてあるだけのページで、最初は背景のカラーが全てグレーです。スクロールするとビューポート内にある2番目のdivのみ明るいグレーになります。 アドバンスではビューポートを上から100px狭く設定し、適用しています。 ※ベーシックにもスクロールするとこの機能が発動します。 Demo: Advanced isInViewport.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="jquery.min.js"></script> <script src="isInViewport.min.js"></script> </head> Step 2: HTML HTMLは特に意識する必要はありません、通常通り実装します。 <div> ...
Google Grid Gallery | Codrops
A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google. This Blueprint is a responsive grid gallery based on the gallery by Google for the Chromebook Getting Started guide. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items. For smaller screens we have some example media qu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/ANTON072/items/ea5b95ae5b7f0f6186f7
IDEA * IDEA
IDEA * IDEA
JSで通知ポップアップを出すライブラリ「PNotify」 | Web活メモ帳
単一ページで作るHTML5製Webアプリ向けのフレームワーク・「BladeRunnerJS」
Apple、Google、Windowsストア用ボタンセット:phpspot開発日誌
SVGをアップロードしてフォント化できる・「Glyphter」
OSSとして公開されている、正規表現の動作テストをブラウザ上で行えるツール・「RegExr」
jshint でケツカンマを見つける - Qiita
