yohgaki's blog - 画像ファイルにJavaScriptを隠す
(Last Updated On: 2014年12月5日)前回のエントリでイメージファイルにスクリプトを埋め込んで攻撃する方法について記載しましたが、最近イメージファイルにスクリプトを埋め込む事例が話題になったためか ha.ckersにJavaScriptをイメージファイルに隠す方法が紹介されています。 http://ha.ckers.org/blog/20070623/hiding-js-in-valid-images/ <script src="http://cracked.example.com/cracked.gif"> などとXSS攻撃を拡張する手段に利用可能です。サンプルとしてFlickerにJavaScriptを埋め込んだイメージファイルがアップされています。 このイメージファイルは上手く細工しているので画像としても表示され、JavaScriptも実行できます。 Flicke
60 (フレーム・パー・) セカンズ：Pinterestの描画パフォーマンス最適化のケーススタディ | POSTD
今日はWebサイトやWebアプリの描画パフォーマンスをどう改善したらいいのか、ということについて取り上げようと思います。私たちWeb開発者にとって、この分野は比較的新しく注目し始めたエリアで、 ユーザエンゲージメントとユーザ体験 に影響があるため重要です。 フレームレートはWebにも影響がある フレームレートとは、 連続した イメージを端末がスクリーンに映し出すレートのことです。秒間フレーム数（FPS）が低ければ肉眼で個別のフレームを判別でき、FPSの数値が高ければユーザにとっては反応が速いと感じられます。ゲーム業界ではおなじみの概念となっているものですが、Webにも当てはまるのです。 長時間に及ぶイメージのデコード、不必要なイメージのリサイズ、重いアニメーションとデータ処理はすべてフレーム落ちを起こす可能性があり、結果としてフレームレートは下がり、jankが多いページになってしまいます。
TypeScript、台頭か | POSTD
JavaScriptのコミュニティがツールやフレームワークを統合する頻度は、ニコラス・ケイジがいい映画を作るのと同じくらいの頻度です。何が言いたいのかというと、 あることはある のですが、あったとしたら注目を集めるぐらい稀だということです。 だから私は、AngularのチームがAngular 2の開発に使用する言語を自社の AtScript から TypeScript に 切り換えるという決断をした のは非常に興味深いことだと思いました。これまでも、AngularのチームはTypeScriptのチームと共に開発を行ってきてはいますが、直接TypeScriptを使用するという決断は、TypeScriptのプロジェクトを強く支持しているということに他なりません。 また、TypeScriptを活用しているプロジェクトはAngularだけではありません。全くの偶然ですが、私たちTelerikはAn
JavaScript で全体のエラーを検知, 捕捉してハンドリングする方法 | tmlife
エラーが起きたい際に, 共通で何か処理をやりたい場面ってよくありますよね？ 例えば console 以外でエラーが起きた行を表示したい エラーの内容を日本語化したい エラーの内容をサーバーに送りたい などなど. 今回は JavaScript で起きたエラーを検知, 捕捉して ハンドリングする方法を紹介します. エラー時に必ず呼ばれる関数を登録しよう JavaScript ではエラーが起きると window オブジェクトの error イベントが発火します. なので下記のように error イベントを登録しておけば エラー時に何か処理を行うといったことを簡単で実現できます. window.onerror = function(msg, url, line, col, error) { console.log(msg); // エラーの内容 }; 引数は msg … エラーメッセージ u
メディアアート系で重要な数式・概念 & p5.jsで遊ぶ - Qiita
高校数学がボロボロでも大丈夫です。（ もともと個人的にインプットし貯めていたものですが、書きなおして公開します。 地味ですが、派手な動きはこの地味な数式・概念がベースになってきます。 また、メディアアートとは言ったものの、ゲーム制作などにも役立つでしょう。 「ラジアンとは？」「サイン波を描く」「円軌道を描く」「弾幕（2点間の距離系&角度系）」「多角形を描く」「フラクタル」といったテーマです。 また、そのプレイグラウンドとしてp5.js（Processingのjs版）をご紹介します。2014年にリリースされたものでまだマイナーですがCodePenのような海外サイトでは人気が出つつあります。またProcessing公式プロジェクトなので安心感もありますね。ちなみに、Processing.jsとは別プロジェクトです。 ラジアンとは？ ・ラジアンは単位 角度についてのもう一つの単位です。 角度とラ
【Visual Studio Code】1.0 GAリリース予定日、決定！ - 好きな技術を好きと言える幸せ - AYA TOKURA BLOG - Site Home - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
"note"がAngularJSでどうやってSEO, Open Graphの対応をしているか｜和田 晃一良｜note
noteはAngularJSを使って、ブラウザで描写しているこの"note"というサービスはAngularJSを使って、JavaScript側（つまりブラウザ側）でノートの中身を公開しているみたいなのです。 それはブラウザでソースを見てみるとわかります。 例えばhttps://note.mu/sadaaki/n/nd921f3f7c635のノートのソースをChromeで見てみると・・・ まずhtmlタグにng-appのプロパティがついています。これはAngularJSを使うならば必要なプロパティで、ここからnoteはAngularJSを使っているんだなあと分かります。 AngularJSは簡単に言うと、サーバー側ではなくブラウザ側でHTMLを描写する仕組みです。これを利用するとどんな利点があるのか。僕の理解している範囲内だと、サーバー側はベースとなるHTML（上のソース）と各ノートのJSO
あれ、いつも書いてるな～というJavaScript の小技集 | バシャログ。
いい加減髪を切りたいminamiです。 JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。 ※追記1： ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。 ※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。 ※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！ 45 Useful JavaScript Tips, Tricks and Best Practices 配列からランダムで値を取り出す v
[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita
JavaScript のオブジェクト作成においてクラス定義で継承を実装する方法はいくつかあります。 正しい継承はどうあるべきか、基本から検証しながら考えてみたいと思います。 ※正しくクラス定義がエコ楽にできる様に追加記事書きました。 [JavaScript] getter/setterも使えるエコ楽なクラス定義 - もちろん継承も - private変数も 一番簡単なオブジェクトの作成方法 典型的な JavaScript のオブジェクトを簡単に作成してみて、それらを確認してみましょう。 var obj1 = {x: 12, y: "ab"}; var obj2 = new Object; // または new Object() obj2.x = 34; obj2.y = "cd"; // obj < Object var obj3 = [12, "ab"]; var obj4 = new
![[JavaScript] そんな継承はイヤだ - クラス定義 - オブジェクト作成 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/41f59c9a4c5233d80d36d92d499f0102af401195/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MSU5RCVFMyU4MiU5MyVFMyU4MSVBQSVFNyVCNiU5OSVFNiU4OSVCRiVFMyU4MSVBRiVFMyU4MiVBNCVFMyU4MyVBNCVFMyU4MSVBMCUyMC0lMjAlRTMlODIlQUYlRTMlODMlQTklRTMlODIlQjklRTUlQUUlOUElRTclQkUlQTklMjAtJTIwJUUzJTgyJUFBJUUzJTgzJTk2JUUzJTgyJUI4JUUzJTgyJUE3JUUzJTgyJUFGJUUzJTgzJTg4JUU0JUJEJTlDJUU2JTg4JTkwJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05YmU1OWFiZTFhMWQ5OGU4YzNjNDEyZTcxZmZmZWM1NA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwTGlnaHRTcGVlZEMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTYzYzc5NWFkZTZlZDJmZTFhY2Q1MGM0Zjk0OTA4YzFm%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3De3ed084b4388f1f96f451ecce07646e4)
javascriptで直線を描画(非canvas) - alocoholic_babay's diary
javascriptで線を描画したい。 斜めにも描画したい。 しかし、諸事情でcanvasは使えない。 そんな時、どうしますか？ 1pxのDivを繋げて線を描画する手法もありますが、 なんかギザギザになるし・・・。 で、考えたのですがborder-topを指定したDivをrotateさせれば 斜めの線も引けるんじゃない？ 点1(x1, y1)と点2(x2, y2)の2点に線を描画しようと考える場合、 まず線の長さは、 Math.sqrt(Math.pow((param.x1 - param.x2) ,2) + Math.pow((param.y1 - param.y2) ,2))で求められます。 次に、2点間の角度ですが逆三角関数を使用することで求められます。 Math.atan(高さ / 底辺)求められる数値はラジアンなので、℃に変換すれば、 CSS3のtransform(deg) で傾
とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 ｜https://wp.yat-net.com/name
2013年 04月 05日 とりあえずJavaScriptを記述して動作を確認したいって時はFirefoxに搭載のスクラッチパッドが断然便利 カテゴリ： Firefox タグ：javascriptエディタデバッグ JavaScriptを記述出来るエディタは沢山あるんですが、「とりあえずソースを書いて試したい」って時はFirefoxに標準で付属しているScratchpad（スクラッチパッド）を使っています。 Scratchpad（スクラッチパッド） Firefox 6で搭載されたスクラッチパッド。使ってる人は結構居るかもしれませんが、まだ知らない人も居ると思うのでちょっと紹介しようと思いました。 Firefoxにはブラウジングする機能以外に開発者向けの機能が沢山備わっています。Scratchpad（スクラッチパッド）もその中の一つで、これはJavaScriptのソースを記述・実行・デバッグが
トップページを刷新した話 - pixiv engineering blog
こんにちは。Redmineのバックログ・プラグインが好きで「Redmine使いやすいですよね！」と言ったら「Redmineを使いやすいって言ってる人を初めて見た」と言われたedvakfです。今年はバックログの年にしたいです。 最近pixivのログイン前トップページが新しくなりましたね。イラストを全面に押し出したクールなデザインと、ウィンドウをリサイズしたりするとウニウニ動くアニメーションは新鮮だったのではないでしょうか。常にログインする設定の人も一度はログアウトして見てみてください。(アニメーションはCSSアニメーションに対応してるブラウザだけですが) 僕はその部分のリリースには関わってないんですが、コードを読んだりしてどんなことをしているのか解説したいと思います。 （注：2013年1月末時点での実装についての解説です） イラストデータ 使用するイラストは、現在は直近のランキングからランダ
WebブラウザでJavaScriptをテストする「js-test-driver」とQUnit、Jasmineを連携してテストするには
WebブラウザでJavaScriptをテストする「js-test-driver」とQUnit、Jasmineを連携してテストするには：フレームワークで実践！ JavaScriptテスト入門（4）（1/4 ページ） しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、js-test-driverの概要や基本的な使い方、非同期処理のテスト方法、QUnitやJasmineと連携したテスト方法などを紹介します 前回まではWebブラウザを使わないJavaScriptテスト 前回「QUnit＋PhantomJSでJavaScriptのヘッドレスなテスト」、前々回「PhantomJSとJasmineで振る舞い駆動開発なJavaScriptテスト」と、「PhantomJS」を軸としたJa
オシャレなスライドショーを簡単に作れちゃう reveal.js の使い方を reveal.js を使って解説してみた. | TM Life
昨日, コリスさんの記事で紹介されていた reveal.js に一目惚れしてしまったので使い方をまとめてみました. reveal.js の使い方を reveal.js を使って解説しています. 簡単にオシャレでシンプルなプレゼンを作れるのでぜひ遊んでみてください. 追記: 『reveal.jsベースのプレゼンをWeb上で作れちゃうオンラインエディタ『rvl.io』の使い方をrvl.ioを使って解説してみた』というエントリーを公開しました. とても便利なので, よかったらこちらも参考にしてくださいな♪ Sample reveal.js を解説しているサンプルはこちらです. また, 最小サンプルも作ってみました.(こちら) Download 今回制作したサンプルはこちらでダウンロードできます. index.html が 解説しているサンプル, sample.html が最小サンプルになります.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
C3.jsが実現する，学習不要のグラフ機能
http://www.hp-stylelink.com/news/2013/10/20131008.php
JavaScriptアプリケーションのためのデザインパターン
http://blk.jp/archives/765