WebComponentsでデバイスピクセル比を表示するカスタム要素を作った - コンピュータクワガタ
Chrome 36でWeb ComponentsのHTML Importsが使えるようになり、Web Componentsのすべての要素が普通に使えるようになりました。そこで、Web Componentsのすべての要素（HTML Imports、Template、Shadow DOM、Cuntom Elements）を使ってデバイスピクセル比を表示するサンプルを作ってみました。 まず、コンポーネントの方です。 <template> <style> p { font-size: 3em; } </style> <div> <p>デバイスピクセル比: <span id="devicePixelRatio"></span></p> </div> </template> <script> var ScreenInfoProto = Object.create(HTMLElement.prototy
Instagramのような画像加工について調べました。 : コーヒーと本と甘いもの
コーヒーと本と甘いもの Rails, AngularJS, iOS, デザイン, CI, スタートアップ, 登山, バスケなどに興味があります。 今回は、iOSやAndroidのようなネイティブアプリではなく、JSでinstagramのような画像処理を行う方法を２つご紹介しまます。 Filtrr2.jsを使う方法 filtrr2.jsはJSによる画像加工ライブラリです。html5のcanvas要素に描画することで実現しています。使い方はとても簡単です。 ソースコードを以下からダウンロードします。 https://github.com/alexmic/filtrr/zipball/master 依存コードも含めて、filtrr2.jsをアプリケーション内に配置します。 以下のようにFiltrr2クラスにイメージ要素のIDと描画オプションを指定します。 var topImage = Filtr
25 Web development resources to help you create better websites - Developer Drive
25 Web development resources to help you create better websites As a developer I am always on the hunt for time saving resources, anything that can save me just a few minutes of time is a great help in an already hectic schedule. Compiled here is a list of 25 resources that are bound to make your life a little bit easier. I have added different CSS3 grid systems, as well as several code generators
HTML5, WebStorage, WebSQL memo - latest log
WebStorage, WebSQL の実装寄りの脳内ダンプ。乱文。あとで gist に移動して消す。 WebStorage(LocalStorage) は、IE8+, Chrome, Safari, Opera, Firefox で利用可能。 WebSQL は、MobileSafari, Chrome, Safari で利用可能。iOS 4.3.x では一部問題がある。 WebStorage の内部文字コードはUTF-16 *1。 WebSQLの内部文字コードはUTF-16 *2。 UTF-16で保存されている場合は1文字で2byte使用する。JavaScript の文字コードも内部は UTF-16。 WebStorage で保存する文字列にNULL文字(0x0000)が含まれていると、一見保存できているように見えるが、実は保存できていない。サスペンド/レジューム, キャッシュアウト,
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
canvasのlazyな描画 - ぶれすとつーる
ご無沙汰してます、nazomikanです。 最近、趣味でフラクタルとかで遊ぶことが多く、フラクタル特有な計算量の多さに日々ブラウザが悲鳴をあげています。 そんなこともあってUI-Blockをさせないようにあれこれやった手法を紹介 まず最初に何も考えずに描画するコード 描画コード (github) ディレクトリ構成 (github) 結果(ブラウザ落ちるかもしれないので新しいウィンドウで見ることをおすすめします) http://nazomikan.com/archive/20121007/001/ まぁ当然大きな画像で、かつ1pxごとに計算して色を決めてるわけなので940*940ともなると死ぬほど処理がブロックされてブラウザ固まります。 残念ですね、非常に残念ですね、もはやブラクラです。 昔から大きな処理をするときはasyncにしなさいというのでlazyLoop(非同期なループ処理)を適用さ
すごいぞ！HTML5で顔認識·HTML5 Face Detection MOONGIFT
HTML5 Face DetectionはHTML5を使って動画から顔をリアルタイム認識します。 HTML5はどこまで行くのか、それを改めて思い起こさせる凄いソフトウェアがHTML5 Face Detectionです。何と動画の顔認識をリアルタイムに行ってしまいます。 デモ動画です。上が動画、下がそれを解析して顔認識しているものです。 顔を動かしても付け目がね＋鼻が追いかけてきます。 筆者トライの図。Glassesをタップすると認識処理が開始されます。 デモ動画 HTML5 Face Detectionは動画のフレームを読み込み、JavaScriptで顔認識をした後、Canvasタグに鼻眼鏡とともにレンダリングしています。はっきり言ってかなり重たいのですが、技術的にはとても面白いソフトウェアです。 HTML5 Face DetectionはHTML5/JavaScript製のソフトウェア（
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Android4.0にはHTML5 History APIが実装されていない - 愛と勇気と缶ビール
（※このエントリーは、「Androidのブラウザは本当のクソAdvent Calendar」の一日目の記事として書いています） 12/2に発売予定のGalaxy Nexusにも搭載される予定のAndroid4.0ですが、なんと標準ブラウザにHTML5 history APIが「実装されていません」。 2.2系、2.3系にはあったのに、なぜかなくなっています。 http://caniuse.com/#search=pushState ここに書いてある通り、実際にAndroid4.0のemulatorでHistory APIが「ない」ことが確認されています。4.0はスマートフォン向けの2系とタブレット向けの3系の合流、という立ち位置らしいですが、ブラウザに関してはHistory APIのない3系に寄ってしまっているのでしょうか…。 「お前の好きなAPIがなくなったくらいで騒ぐなよ」という人もい
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
Lawnchair
Sorta like a couch except smaller and outside, also, a client side JSON document store. Perfect for webkit mobile apps that need a lightweight, simple and elegant persistence solution. Features micro tiny storage without the nasty SQL: pure and delicious JSON clean and simple oo design with one db table per store key/value store.. specifying a key is optional happily and handily will treat your st
CoderDeck Sample
http://github.com/cykod/CoderDeck The best way to teach the web is with the web. Create interactive live-coding presentations. Use the arrow-keys go between slides. Basic Code Editor Basic split code editor is created by adding a class of "coder-editor" to a textarea. Press run, then modify some code and press "run" again <header> <h1>My Site!</h1> <nav><ul> <li><a href='#'>Link 1</a></li> <li><a
The Developer's Guide To Writing Cross-Browser JavaScript Polyfills
The Developer's Guide To Writing Cross-Browser JavaScript Polyfills August 11, 2011 I believe it's one of our responsibilities as designers and developers to both advocate for best practices and encourage others to make the leap to using modern features for a modern web. At the same time, we need to do our best to avoid leaving users with older browsers behind. Polyfills - a term coined by Remy Sh
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
HTML5 + CSS3 で組む場合、IE8 以下では JavaScript 有効でないと表示が崩れる心配がある件を Media Queries で何とかしてみる
HTML5 + CSS3 で組む場合、IE8 以下では JavaScript 有効でないと表示が崩れる心配がある件を Media Queries で何とかしてみる 2011 年 5 月 14 日 IE9 も無事日本語版がリリースされ、HTML5 + CSS3 で全ての Web サイトを構築していけそうな環境も着々と整ってきているように感じる今日この頃ですが、当サイトへのアクセスログを見る限りまだまだ IE についてはヴァージョン7〜8が主流といったところ（5月以降に絞ってみても IE6 と IE9 のアクセスがほぼ同じという状況）ですので、さすがにもうしばらくの間は完全に無視する訳にはいかないのかな、と思っています。 しかし、HTML5 のセクショニング要素などもきちんと使って組んでいこうとなると、IE8 以下に関しては html5.js や IE9.js などをロードしない事には HTM
JavaScript最新動向 〜WebSocket編〜
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Yeoman RIAビルドツール超入門
Google Code Archive - Long-term storage for Google Code Project Hosting.
実践・ウェブアプリ高速化テクニック#Chrome+HTML5 Conference
The HTML5 logo - K3D demo in HTML5 Canvas and JavaScript (no Flash!)