2015年 話題になった記事は？ はてなブログ 年間ブックマーク数ランキング トップ200を大発表！【修正あり】 - 週刊はてなブログ
はてなブログの2015年をふりかえる年末特集。第3弾は「はてなブックマーク年間ランキング」です。 週刊はてなブログでは毎週月曜に週間ランキングを更新していますが、今回はその総まとめとして2015年1月1日から本日までのブックマーク数を集計しました*1。はてなブログ（はてなダイアリー、はてな匿名ダイアリーを含む）の記事から、2015年のブックマーク数順にトップ200をピックアップ！ 2014年と比べると全体的にブックマーク数が増えているようです。それだけ良い記事が増えたのか、はてなブックマークの利用者が増えたのか。みなさんがブックマークしていた記事はどれくらい入っていたでしょうか？ この1年のブックマークをふりかえってみるのも良いですね。それではランキングを御覧ください。どうぞ！ ※集計したランキングから抜けていた対象記事が1つありましたので、修正いたしました。当初から、49位以降で順位が1
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
JavaScriptは移り変わりの早い言語です。 もう1年以上経っていますし、記事のメンテもちゃんとできていないので、消し線を入れることにしました。 参考程度のために記事は一応残しますが、より新しい情報を読まれることをお勧めいたします。 はじめに --- 最近では JavaScript の実行環境はブラウザに限りません。（node.js, Web Workers） また、旧来のような <script> 経由でのロードもとうに古くなっています。今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。 ですから、次のようなことは改める必要があります。 - var YourModule = {}; などとして、外部から YourModule.hoge(); などと呼び出す書き方 - this === window だと思うこと 今回は、
追記: このエントリを投稿してから3日後に Google から AMP が発表されました。AMP は 既存の HTML/CSS/JavaScript の機能を制限することで、ページの表示パフォーマンスを改善するものです。AMP で書かれたページは Google 検索ランキングにおける特典が受けられるといった情報もあります。AMPの実装方法
こんにちは、id:os0xこと太田昌吾です。今回から、クロスブラウザ対策を中心としたJavaScriptの初級から中級の方向けの連載を開始します。JavaScriptの基礎的な文法は理解されているという前提での解説となりますので、ご了承ください（間違いやすい、わかり難いと思われるところは適宜補足します）。初回である今回はJavaScriptやウェブブラウザの背景など盛りだくさんの内容でお届けします。 JavaScriptのイマ JavaScriptは2010年現在において、最も重要な言語となりつつあります。旧来はすべての処理をサーバーで行って、結果をウェブブラウザ上に表示するだけというのがウェブの一般的な姿でした。2005年に登場したGoogle Mapsを一つの契機として徐々にウェブブラウザ・クライアント側での処理が見直され始め、近年ではクラウドやSaas、そしてHTML5の流行によ
Internet Explorer の自動アップグレードについて | TechNet 長かった… 本当に長かった… やっと、IE 6, IE 7 が居なくなるのですね… uupaa.js ver 0.8 に埋まっている処理から情報を抜き出し IE 6, IE 7, IE 8 が居なくなった未来では何が可能になるのか抜粋してみました。 IE8 でやっと使えるようになる機能 一部は IE 6 や IE 7 でも使えるのですが、対応が限定的だったり不具合が多かったりと、安心して使えなかった機能も含まれています。 display: inline-block display: table, table-cell など position: fixed; E:active {...} E:focus {...} E::first-child {...} E:lang(C) {...} E::after
最近の小学校の先生はローマ字入力しか教えられないらしく、せっかく子供をかな打ちで育てても、学校でローマ字入力に矯正させられる。 もしくはそういう「ローマ字入力以外は認めない」といった教育要項があるのかもしれないが、ああいうのは今後止めてもらいたい。 ローマ字入力というのは、左利きの人が右利きに矯正させられる以上の生産性のロス(一説には30%のロス)が発生している。 日本が他国に比べて長時間労働をしているにもかかわらず、生産性が低くありつづける理由の一端が、ローマ字入力にあるのかもしれない。 できるプログラマーは「かな入力」を使っているという話 子供は見えている文字をタイプするとそのまま表示されるのが自然だと感じて育つ。ローマ字入力は打算から生まれた入力方法だし、直感に反する。 「キートップは大文字なのに、実際にタイプすると小文字が出るのは直感に反する」という理由から、ChromeBookの
日本のJavaScript界隈のブログを適当かつ詳細にまとめてみようと思って挫折したけど、もうちょっと頑張ってみた - ?D of K
あらすじ 僕は本無しにJavaScriptを覚え、その後も全く本を読まなかったため（今もまだJavaScript関連の本を持っていない）、友人の変態C++プログラマにJavaScriptを覚えるための本を聞かれて、答えることが出来ませんでした。しかし、そんな中、颯爽と助けてくれた某JavaScriptコーダーがおり、そんなことがあって、世間のJavaScriptコーダーってどういう人たちなんだろうと気になって、とある勉強会に参加して、なぜか最後、指名手配されて、いや、僕はそんな知られるほどのことはしていないと思っていたのだけど、まぁ、何かやり遂げてはいたのかもしれないと思ったので、JavaScript界隈の有名人を調べてみることにしました。 まとめ方 多くのJavaScript界隈の有名人はJavaScriptで有名なブログを持っているに違いないという発想の元でTopHatenarのJav
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
古いブラウザでもCSS3セレクタを使ってWebページをデザインできるようにしてみた - latest log
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
Webフロントエンドの人達(?)が次々と微妙なツールを導入して「流れが早過ぎる」とつぶやいているのを横目で見て感じている事 - latest log
自分の会社に「新ツール導入の際はCTOの許可が必要」というルールを生やして居心地を悪化させたり、後輩のやる気を削りたくなかったら、ツールの将来性を考えて行動したほうが… SI等のアレな現場にその手のルールが存在するのは何故なのか?という事と、自分達もその歴史の一節にならないように— コラーゲンたっぷりさん (@uupaa) November 20, 2015 必要な物は生まれる(創れば良い)ので、どんな問題がありどのような解決方法があり、状況の変化にどう対応するかなど、大人はツール導入前に織り込んでおくし、”勉強会の人が流行ってるって言ってたし”ですぐ廃れるツールを導入するなんて事を繰り返してると、あっという間にデストピアな職場に。な— コラーゲンたっぷりさん (@uupaa) November 20, 2015 “ツール導入で劇的に効率や抱えている問題が改善される”なら導入すればいいし、
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
技術者は要注意？！『2年間は同業他社に転職しないこと、また同業で起業しないこと』 という誓約書を書かされそうになったら監督機関に報告しましょう。
もう暑くってェ グッタリしちゃってェ…んじに🐈にゃーん🍓🫐🍅🌽🍈🍆🥒🍇🦝 @uupaa 退職時に『2年間は同業他社に転職しないこと、また同業で起業しないこと』 という誓約書を書かされそうになったら、遵法意識の高い一般人として、しかるべき監督機関に報告しましょう。 #学校で教えるべき 2013-11-08 12:02:50 ＼助けよや／𝕏𝕐†😱†𝕐𝕏 @yoya @uupaa #一般論 ですが、広く強い制約で真面目に守ったら何もプログラムを書けないレベルであったとするならば、その期間分の機会損失の保証を要求するべきですよね。ただ、企業がじゃぁ払うと応じてきたら2年間ホントにコードをかけなくなる諸刃の剣ですけど。 2013-11-08 12:15:08
Classの継承についてサンプルを追記しました。 jQuery の特徴的な構文を uupaa.js で表現する方法を追記しました。 デバッグ支援機能について追記しました。 特徴 uupaa.js jQuery 初版 version 0.1 (2008-06-07) version 1.0 (2006-10-27) 最新版 version 0.8 (2010年末を予定) version 1.4.2 (2010-02-19) ライブラリの目標 WebOSのフロントエンド 不明 本来の用途 WebOS / WebApp DOMの操作とサイトの装飾 使われ方 導入実績なし 小〜中規模サイト / ポータルサイト等 想定されるコアユーザ層 エンジニア デザイナー / コーダー / エンジニア 名前空間 uu (1つ) jQuery と $ (2つ) ライブラリによる識別子プリフィクスの予約 uu また
非同期プログラミングを驚きのシンプルさに (するかもしれない) Flow.js を公開しました。 - latest log
(ε・◇・)з o O ( (ミ・◇・ミ) o O ( あたし。ずっと思ってた… (ミ・◇・ミ) o O ( あたしの脳みそだと Deferred/Promises は、ちょっと難しすぎるって… (ミ・◇・ミ) o O ( jQuery.Deferred 解説記事をいくつかみたけど、すごく… モジモジしてて、ちょっと縦長すぎるんですもの… (ミ・◇・ミ) o O ( だから作っちゃった… ).done(); 非同期処理をシンプルに書ける、とても小さなライブラリをリリースしました。 Deferred/Promises は既存の構造や, そもそもの考え方を大きく改変する必要がありますが、 flow.js はあまり大きな違和感もなく、現在の流れを維持したまま導入できると思います。 使い方はこちらをごらんください http://www.slideshare.net/uupaa/flowjs リポジ
※最新版をこちらに作りました！対象ブログ数も多いので、是非。 こんにちは、らくからちゃです。 昨日一昨日と、研修で缶詰にされていました( ´Д｀)=3 なんでも、 会社：マネージャーは会社の規定上、上級職じゃないとしてはいけない。 ぼく：僕は初級職だからお仕事できないめう・・・。 会社：でも、君は優秀で、小規模案件なので特別に例外ということにする！ ぼく：特別に例外ということにする。 会社：これで君も、お給料は据え置きのままでマネージャーだ！おめでとう！ ぼく：やっためう！責任も残業も増えるめう！ （※弊社には何故か、優秀な社員と小規模な案件が溢れている模様） 会社：一応研修は受けてね。土曜日だけど。 ということで行ってきましたー。 それはさてき、帰りの電車でマイホットエントリーを眺めていて、こんな記事を見つけました。 はてなブログで読者登録数が多いブログってどんな記事なのかなーって気にな
amachang の 「一行で IE の JavaScript を高速化する方法」を掘り下げてみた - latest log
2009-11-12 ナビ子記法について追記しました 本文 今日は、amachangさんの記事 http://d.hatena.ne.jp/amachang/20071010/1192012056 を 1mm だけ掘り下げ、IE 以外のブラウザでも document へのアクセスを速くする方法がないか、色々試してみます。 # 記事自体はずいぶん前に書き上げてたけど、公開するの忘れてたんだな。 C系を追加しました。C系は「ネストしたスコープからグローバル変数にアクセスするとどうなるか?」がテーマです。 試したこと 以下は様々な方法で document へのアクセス速度を計測します。 A系では、非日常的な方法で測定し、B系では実際の用法に近い形で測定します。C系では何重にもネストしたスコープから、グローバル変数にアクセスするとどうなるかを測定します。 A系 A0 は、素の document に
大規模JSプロジェクトのための、モダンなjavascript/coffee-script の学習用資料まとめ - mizchi log
A社coffee-scriptエヴァンジェリストのmizchiです。今日は昨今の大規模JSの需要の高まりに応えるべく、お前が知ってる資料をまとめろとのお達しが下ったので、社内wiki面倒だしここに載せてますん。 前提 大規模JSをモジュール化する為にcoffee-scriptのシンタックスシュガーでOOPのパラダイムを持ち込む coffee-scriptの煩雑なコンパイル作業を避けるために、Rails/Nodeではアセットパイプラインを使って動的にコンパイルと圧縮を行う JSプロジェクトを部分的にnode化してTDDでサイクルを回す coffee-scriptに関しては、基本的には本家チュートリアルと The Little Book on CoffeeScript を読めばいい coffee-script チュートリアル 本家チュートリアル CoffeeScript little book
JavaScriptの業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ JavaScript の簡易スキルチェックのための調査表。印刷用。 レベルは，０から４までの５段階。 （０） 非 JavaScript開発者 （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の動くものを作れるようになった段階） （３） 中級者（開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/メンターとして，主設計を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 ※なお，下記URLでは10段階に細かく分ける方法が公開されているが，それだと細かすぎてレベルが前後する可能性があり，業務上のスキルチェックは難しいかもしれない。 javascriptプログラマのレベル10 http://tech.kayac.
"デバッグしてください", "パフォーマンスチューニングしてもらってもいいですか?" とJavaScriptが難読化された状態のページのURLを渡してくる人に、伝えなきゃならない事がある - latest log
webpackを使ったサイト、極端にデバッグしずらい (外部ライブラリが eval(文字列) の形で埋め込まれる)ので、はっきり言って大キライだったりする— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 見知らぬコードが minifyされ、さらに eval されているのをデバッグしろとか、暴力にも等しい要求なんだよね。そりゃキライになるよ— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 「環境Aの言語Bで書かれたコードを言語Fに変換した、環境C/D/Eで動くと思うのでデバッグしろ」というのも極端にデバッグしづらいという理由から避けるようにしている。 デバッガビリティに問題がある環境は、心がすり減るのでイヤ(時給1万円なら頑張る— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 js minifyあるある A「パフォーマンスに問題があるので
JavaScript で throw "" ではなく throw new Error() を使ったほうがよい(些細な)理由 - latest log
JavaScript で人為的に例外を発生させるには、大きく分けると以下の2種類があります。 throw new しない書き方 throw "ソフトウェアでエラーが発生しました。サポート担当者に連絡し、この問題を報告してください。"; o_o は String 扱いで、o_o.stack も undefined になっています。 throw new する書き方 throw new Error("一般的なエラーだよ"); throw new TypeError("型がちがうよ"); throw new SyntaxError("文法おかしいよ"); throw new URIError("URIちがうよ"); 他にも、RangeError, ReferenceError, MediaError, FileError, EvalError などがあります。 throw new した場合は、o_
UnitePlayer はモバイルとゲームに特化した HTML5 な音楽再生プレイヤー UnitePlayer は、モバイルブラウザ上で動作するゲームに音をもたらします。 扱いが難しい Mobile Safari や Android ブラウザの音周りをフォーマット化し、とっても扱いやすくします。 フィーチャーフォン用のソーシャルゲームが大流行な昨今ですが、 フィーチャーフォン用のゲームって音が無いですよね? そのゲームをそのままスマートフォン向けにコンバートしても、音がならずに寂しい感じですよね? 2012年は UnitePlayer で BGM も SE も鳴らしちゃいましょう。 そして没入感や色々なものを高めちゃいましょう! PCブラウザでもそのまま動くから、横展開もお手軽に! UnitePlayer なら iPhone でも BGM と SE を擬似的に同時再生できますよ。 Unit
新Edgeブラウザ登場に伴うIEサポート終了についてチームのコンセンサスを得るためのシンプルなテンプレ - Qiita
ポエムです。コードは一行もでてきません。 Chromiumベースの新Edgeブラウザもベータに突入し、いよいよ IE のサポートを切れるタイミングが見えてきました。 とはいえ、私が関わっている現場のように、既にリリースしているサービスの場合は IE のサポートを突然切るわけにも行かず… そのような場合は、まずはチーム内への根回しやコンセンサスからになるでしょうか。 かれこれ2年前(2017年)。 今のサービスがまだ設計段階だったころに、 「2年後の2019年にはIEシェア1%とかなんだから、あらかじめ IE 対応だけは切らせてくれぇぇ」 と訴えていたのですが、 ちょうどサービスのグロースや顧客層を最大化して考える時期(風呂敷を大きめに広げている時期)というタイミングの悪さもあり、 「今の段階でIE切るとか、事業というか、ビジネス的にありえないでしょ!!」 という、 なかなか強烈な拒否反応が
最近、こういう事例が増えてます ネイティブゲームアプリもグリグリアニメーションする昨今 🐤俺らもブラウザゲームの限界を目指そうぜ! 🐤盛るぜー盛るぜーー超盛るぜーー 数ヶ月後… 🐤来月リリースだけどカクカクします助けてーー 🐲きさまら何度やったらわかるんだ…そこに正座しろ…(ゴゴゴゴゴ) #こうですか?— コラーゲンたっぷりさん (@uupaa) 2014, 8月 19 🐲なぜ作ってる途中で実機で動作確認をしなかったんですか? 🐤え、あの、CreateJS なら大丈夫かとおもって… 確認してませんでした 🐲(イラッイラッ #こうですか— コラーゲンたっぷりさん (@uupaa) 2014, 8月 19 🐲(はぁ…)とりあえず実機動作とコードを見たいので開発サーバ名やログインする為の情報ください …2日後… 🐤…これで💦 🐲…動かない…あとminify解除してない状態な
世界のJavaScriptを読もう @ 2014
世界のJavaScriptを読もう @ 2014 ^目的: ウェブの世界は絶対変化するもの 変化する前提の行動が求める それをどうやって見ていくか、それを知ってどうするか ^ JavaScriptやブラウザ周りのリリースの状況はウェブの変化にあわせるように変化してきている。 どのように変化してきたか知り、どうやって変化を見ていくのか、そしてわたしたちはどう変化していくのかを考えよう。 アジェンダ 世界のJavaScriptを読もう @ 2012 の続編的なものです ブラウザやJavaScriptのリリースは変化してきている 私たちはどのように変化を知り見ていくのか そして私たちはどのように変化していくのか [fit] 世界のJavaScriptを見る話 [fit] JSer.info 開始 2011年〜 ^ JSer.infoを始めた2011年を一つの基準として考えて、 そこからブラウザや
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
uupaa's pure JavaScript module pattern - latest log
2013-08-19 uupaa's pure JavaScript module pattern pure JavaScript で記述し、Browser, WebWorker, Node.js で使えるモジュール定義パターンのご紹介。 uupaa 2013-08-19 18:05 前の記事
2011年1月30日に開催された「東京てら子」というFlashの勉強会で発表した内容ですが、HTML5出力可能な�Flash CS5拡張ツールを作ってみたので紹介します。 まずはこちらのビデオをご覧ください。実際に動作している様子をビデオに録画したものです。 タイトルのとおり、Adobe Flash Professional CS5 から HTML5 コンテンツを書き出すという拡張機能で、サイトのトップページで使うようなシンプルなムービー制作に適したツールとなっています。対象ブラウザですがメジャーなモダンブラウザだけではなく、Internet Explorer 6-8 にも対応しています。 生成手順は次のとおり ( ↑ ) Flashの編集画面 ( ↑ ) 拡張機能を［コマンド］から呼び出す。すると変換が自動的に行われる。 ( ↑ ) 変換されたJavaScriptコードを生成、これをHT
既に LEAP Motion を手に入れている人にはお馴染みかと思いますが、 JavaScript だけで、LEAP Motion を使いブラウザを操作することが可能です。 実際にChrome拡張で実装してみました (ε・◇・)з o O ( 未来キタ
Titaniumは使えません
えんじに🐈にゃーん🍓🫐🍅🌽🍈🍇🦝 @uupaa Ti.Media.VideoPlayer#url を string と比較すると、Stringじゃねーよエラーになるとか。バギーっすね
Flow.js
非同期プログラミングを驚きのシンプルさに ver 1.0.1 and more. http://uupaa.hatenablog.com/entry/2013/03/12/185555 http://uupaa.hatenablog.com/entry/2013/03/14/131556Read less
最近JavaScriptを個人的に勉強しているんですが、そんなJS初心者ながら色々試すなかで気が付いた開発とかTDDとかについて色々思うところをアウトプットしてみようかと思います。 一番多いのは、ClientSideJSで、使ってるのはjQueryとQunitが中心でした。 でもこれからは別のフレームワークや、ServerSideJSなんかも出てきますし、 今読んでる本が終わったら、こっちの本も見てみたいと思っているので、 Test-Driven JavaScript Development: Safari Books Online その前にこれを書いておこうという目的です。自分に付ける一つのTagという感じです。 あまり一貫性に拘らず、垂れ流したいと思います。 Ajax と API 以前こんな記事を書いたように、サーバ側がAPIでデータを提供し、ロジックをクライアント側に固めるタイプの開
この記事の賞味期限は2013年内です。10秒で読めます。 (ε・ ワ ・)з 勘違いがありまして、本文の趣旨が変わり Chrome の拡張 JSONView の機能紹介になりました JSONView をインストールした状態でhttp: や https: スキームで始まる JSONファイルを開くと、改行やスペースを含まない(圧縮された状態の)JSONも、適切に展開した状態で見ることができます。 この状態で、マウスを各要素にホバーさせると、画面下の薄い紫の部分に、要素にアクセスするためのパスが表示されます。 紫色の部分: tree[0].attrs.frame[3] xpath のようなこれは、json path とでも呼ぶのでしょうか? また、各ノードの左側にある - や + をクリックすると展開と折りたたみが行われます。 以下のパスを JSONView をインストールした状態で開くと、お試
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
脳内棚卸 Prototype.js と プロトタイプ汚染(昔話) jQuery が登場する以前、Prototype.js という JavaScript ライブラリがありました。 Prototype.js は、JavaScript OOP の普及期(2005～2007年頃)に多くのサイトで活用されました。 Prototype.js は Object.prototype や Array.prototype 以下に、Ruby 由来のメソッドを拡張することで、 JavaScript に Ruby 感をもたらし、ブームを起こしました。 当時の JavaScript(ES3: ECMAScript262-3rd) には、 言語仕様として Object.prototype を安全に拡張する方法が存在せず、 Prototype.js はしばらく後に 汚染(pollution) と呼ばれる問題を起こしてしま
理由がない限り、Array.join("") による文字列連結は使わないほうがいいみたい - latest log
JavaScript の勉強を開始したときに「文字列の連結には Array.join() を使え」といった記事を見た覚えがあります(ソース失念したけど、 Operaの技術文書だった気がする ⇒ IE の技術文書だったかも)。 一年ほど信じてて、念のためベンチとってみたら「うそやーん」でした。ってお話。 ベンチの条件は、 3種類の文字列連結方法を試す 1. + Operator 2. String.concat() 3. Array.join("") 文字列の要素数を 11個 と 55個で試す <!doctype html><html><head><title></title> </head><body> <script> window.onload = function() { var now = +new Date, lp = 100; while (lp--) { job(); } d
2008年のエントリ http://d.hatena.ne.jp/uupaa/20080413/1208067631 のリニューアル版です。 (ε・◇・)з o O ( 2018年頃にでも、もう一度調べて書きたいと思います。
+new Date を Date.now() に差し替えると200〜400% 高速化も - latest log
CSS を利用したアニメーションでは、必ず現在時刻を取得するコードが入ります。 var now = +new Date; ECMAScript-262 5th では Date.now() が新しく追加されました。 Date.now() は +new Date と同じ機能(現在時刻を数値で返す)を持ちながら、new の必要がないため速そうです。 ベンチ <!doctype html><html><head><title></title> </head><body> <script> window.onload = function() { Date.now || (Date.now = function() { // Date.now が実装されていないブラウザ用の実装 return +new Date; }); job1(); job2(); } function job1() { var
Future と Stream という同期/非同期処理の混在をシンプルにコード化できる車輪を再発明したよ - latest log
Script Junkie | Creating Responsive Applications Using jQuery Deferred and Promises (日本語訳: jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと… ) をみて、 (ε・◇・)з Deferred… Promise… お 覚えられん… (ε・◇・)з 脳みそちっちゃいので、もっと気軽に使えて、簡単に書けるのがいいなぁ～ って思ってました。 なので、自分なりに、 複数の同期/非同期処理を同時に実行し、処理の合流ができたり多少の失敗があっても前に進める Future 複数の同期/非同期処理を順番/同時に実行し、流れを直感的に記述できる Stream という2つの仕組みを考えました。 Stream は一本の流れを制御し Future は同時多発的な流れを制御するため、こ
[javascript][sprintf] で検索してたどり着く方が多いようなので、uupaa-0.7.js から切り出して張ってみます。 /*!{id:"uupaa.js",ver:0.7,license:"MIT",author:"uupaa.js@gmail.com"}*/ window.sprintf || (function() { var _BITS = { i: 0x8011, d: 0x8011, u: 0x8021, o: 0x8161, x: 0x8261, X: 0x9261, f: 0x92, c: 0x2800, s: 0x84 }, _PARSE = /%(?:(\d+)\$)?(#|0)?(\d+)?(?:\.(\d+))?(l)?([%iduoxXfcs])/g; window.sprintf = _sprintf; function _sprintf(fo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近の行儀のよい JavaScript の書き方 - Qiita
第三次ブラウザ戦争がそろそろ閉幕します - latest log
第1回 ウェブブラウザとJavaScriptの未来 | gihyo.jp
IE 6, IE 7, IE 8 が退場した未来 - latest log
タバコを嫌うエンジニアは多いが、同じようにローマ字入力も嫌うべきだ - latest log
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
uupaa.js と jQuery を機能を中心にざっくりと比較 - latest log
はてなブログ読者登録数ランキングベスト100を作ってみた - ゆとりずむ
UnitePlayer.js 作ったよ - latest log
スマフォブラウザゲームのパフォーマンスチューニング手遅れパターン - latest log
モバイルブラウザでもサクサクに動作する最適化6つのノウハウ
HTML5出力可能なFlash CS5拡張機能を作ってみた | ClockMaker Blog
LEAP Motion とブラウザを WebSocket で接続する - latest log
JavaScriptでのテストや開発についてのアウトプット - Block Rockin’ Codes
Chrome の拡張 JSONView が便利ですね - latest log
プロトタイプ汚染とループ - latest log
お手軽に画像の読み込みをハンドリングする、今どきな方法 - latest log
速くてコンパクトな JavaScript 用の sprintf の実装 - latest log