全要素にbackface-visibility: hiddenをかけるだけで、なんということでしょう。 Android2.3.Xにてフォームにテキスト入力するたびにガクガクとスクロールがとまりません。 是非ともおてもとのAndroid2.3.Xでご確認ください。 CSS * { -webkit-backface-visi…

動的に変更＆プレビューできることを知りました。便利ですね。

qiita.comhttps://bpush.net/早速 こちら を試してみました。 (function(d,s,ns){ var ns = d.createElement(s); ns.async=1;ns.src="//bpush.net/connect/button.js"; var s0=d.getElementsByTagName(s)[0]; s0.parentNode.insertBefore(ns, s0); })(docume…

JS Bin - Collaborative JavaScript Debugging いままでオンラインエディタは、 jsdo.it 、 CodePen をつかっていましたが、最近は JS Bin も併用しています。とにかくシンプルなのでさくっと検証したいときに便利です。http://jsdo.it/jsdo.ithttp://codepe…

シフォン主義 シフォン主義 - EP相対性理論J-Pop¥1069LOVEずっきゅん相対性理論J-Pop¥255provided courtesy of iTunes TOWN AGE TOWN AGE相対性理論J-Pop¥2139たまたまニュータウン相対性理論J-Pop¥255provided courtesy of iTunes シンクロニシティーン シ…

ソニッケアー ダイヤモンドクリーン 【2014年モデル】フィリップス ソニッケアー ダイヤモンドクリーン 電動歯ブラシ ブラック HX9302/51Philips(フィリップス)Amazonとにかく買って良かったです。毎日の歯磨きに革命が起こりました。 歯医者に行ったあとの…

jQuery の is をつかえば matches のようなことができることを教えてもらいました。 JavaScript (function(win, doc, $) { "use strict"; console.log(doc.getElementById("hello").matches(".world")); // => true console.log($("#hello").is(".world")); …

いま一番必要な音楽と出会えるサービスこと オンガクスリ 。 最近作業用BGMにつかわせていただいている悩みを紹介します。 テンションが上がってる時に聴きたい http://ongakusuri.com/topic/2911ongakusuri.com 自分なんて虫けらみたいな存在です。 http://…

先日Googleが「サイトがスマートフォンに最適化されているかどうかを検索順位に反映する」的な発表をしました。サイトがスマートフォンに最適化されているかどうかは こちら から簡単に調べることができます。Mobile-Friendly Test - Google Search Console …

いままでは、 $div = $("<div id='tohoho' class='tohohoho'>"); とか、 $div = $("<div>").attr({ id: "tohoho", class: "tohohoho" }); という感じで属性をセットしていたのですが、 $div = $("<div>", { id: "tohoho", class: "tohohohoho" }); とセットできることを教えてもらいました。 とても便利で</div></div></div>…

本日、うまれてはじめて background-attachment: fixed をつかってみたのですが、固定した画像が大きすぎたせいか、ページのスクロールが大変重たくなってしまい、急遽 position: fixed に差し替えました。 background-attachment: fixed; position: fixed; …

kimizuka.hatenablog.com以前ページの右にあるいいねボタンのダイアログ対策についてメモを残しました が、今回はページ下部用の対策です。方針はまったく一緒で、fb_iframe_widget_liftクラス がついたときの position を指定しています。 .fb_iframe_widge…

kimizuka.hatenablog.com以前、UAをチェックするコードを書きましたが、 前回の記事 にてiTunesAPIのつかいかたを調べたので、UA（ユーザーエージェント）と同時にUA（ウーア）の曲も確認できるように改修しました。 JavaScript (function(win, doc) { "use …

簡単に視聴出来ました。 太陽のkonachiエンジェルを視聴します。 ストア上に2曲あることは知っていて、2曲目の方がいい感じにクリップされているので2曲目を再生しています。 JavaScript (function(win, doc, $) { "use strict"; $.ajax({ url: "https://itu…

以前つくったクラス を改修しました。kimizuka.hatenablog.com 変更点 currentTImeを取得できるように変更しました。 (function(win) { "use strict"; win.App = {}; })(this); (function(win, doc, ns) { "use strict"; function EventDispatcher() { this.…

kimizuka.hatenablog.com以前、Twitterウィジェットのつくりかたをまとめました が、最近data-chrome属性でインターフェイスを変更できることがわかったので追記しておこうと思います。 インターフェース:data-chrome属性を使ってウィジェットのレイアウトや…

optionボタンと同時に 早送り / 早戻しボタンで0.1刻みで再生速度を調整できます。

表題のとおりです。 GPUレンダリングを有効にしたいからといって、 * { transform: translate3d(0, 0, 0); } 的なコードを書いているときに注意が必要です。 HTML <main id="main"> <div class="inner"> <div id="btn"></div> </div> </main> SCSS html, body { height: 100%; background: #a3a3a3; } #main { position: relative;…

Leap Motion 小型モーションコントローラー 3Dモーション キャプチャー システムLeap MotionAmazon Leap Motion を認識させる www.leapmotion.com Mac と Leap Motion を USB で接続します。 こちら からMac用のドライバをダウンロードします。 指示に従って…

最近のいいねボタンは押すとコメント投稿用のポップアップが表示されます。なので、いいねボタンがページの右側にあると「コメントする」ボタンが押せなくなったり、ページレイアウトがおかしくなったりしてしまいます。 右側にあるいいねボタン 上記ケース…

kimizuka.hatenablog.comこの記事 の検証を行っているときに気づきました。セレクタに * をつかうと効かない機種があるようです。（Android 2.3.4で確認）

Android2.3.4で確認しました。 clickイベントを振ったDOMをタップするとフォーカスが当たって縁が黄色くなります。 delegateをつかうときなどに注意が必要ですね。tap-highlight-color を rgba(0, 0, 0, 0) など透明にしておくと対策になります。

jQueryのtrigger的なことをJavaScriptでできないものかともろもろ調べていたらdispatchEventにたどり着きました。 引数がイベント名（String）ではなく、イベントオブジェクト（Object）なところがtriggerと違います。 JavaScript (function(win, doc) { "us…

DEMO 画面にファイルをドロップすると、コンソールにファイル名、最終更新日時、ファイルサイズなどの情報が表示されます。 dragoverイベントとdropイベントのデフォルト動作をとめて、ファイスの情報をコンソールに表示しています。 JavaScript (function(w…

レーザーカッターをつかえる機会に恵まれたので、昔からつくりたくてたまらなかった透明なパズルのピースをつくってみました。我ながら素晴らしい形で切り出せました。仮にこのピース自信も自分の形を気にいっているとしましょう。 しかし、このピース。 己…

pushStateをつかえば、サーバサイドに知られることなくフロントだけでURLを書き換えることができます。 JavaScript (function(win, doc) { "use strict"; var btnRed = doc.getElementById("red"), btnGreen = doc.getElementById("green"), btnBlue = doc.g…

こんな感じのminifyされたコードでも、左下の {} ボタン を押したら、なんということでしょう。とても見やすくなります。

JavaScript $("ol").find("li") .eq(0).text("荻野").end() .eq(1).text("鈴木").end() .eq(2).text("角中").end() .eq(3).text("今江").end() .eq(4).text("井口").end() .eq(5).text("クルーズ").end() .eq(6).text("根元").end() .eq(7).text("肘井").end…

Macだと、command + space で切り替えられます。 Windows 8 だと Alt + ~ で切り替えられます。

Web Componentsをつかって嘘をマークアップするためのlieタグをつくりました。 JavaScript (function(doc) { "use strict"; doc.registerElement('k-lie', { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: function() { if …