Webブラウザ上で動作する帳票エンジンを作る話NGK2022S発表資料です https://ngk2022s.connpass.com/event/233520/ yagisan-reportsのWebサイト https://www.denkiyagi.jp/yagisan-reports/Read less
WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]
本記事は、以下の記事の翻訳です: WebAssembly: How and why by Milica Mihajlija on LogRocket * 執筆者に許諾を頂いた上で掲載しています。 どのようにしてブラウザでネイティヴ・コードを実行するのか そこにはどのような背景があるのか それは JavaScript にとって、さらには Web 開発にとって、いったい何を意味するのか すべてのブラウザにおいて、すなわち Chrome / Firefox / Edge / Safari いずれにおいても、コードは JavaScript エンジンによって解釈されて実行されます――ただ JavaScript が実行されるだけです。 残念なことに、JavaScript は、実行したいあらゆる処理にとって理想的なものというわけではありません。 ここに WebAssembly の入り込む余地があります。
![WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f170847290d9525297fe9bf99fa9d784727b579/height=288;version=1;width=512/https%3A%2F%2Fdev.to%2Fsocial_previews%2Farticle%2F44293.png)
ブラウザの「戻る」ボタンでキャッシュが表示されてしまう際の対策 - Qiita
はじめに 各ブラウザの「戻る」ボタンを押すと、ブラウザのキャッシュをクリアしていても、 1) JavaScriptでリンク遷移時にローディングアイコンをページ全体に表示 2) 「戻る」ボタンを押す 3) ローディングアイコンが全体に表示されたページが読み込まれる といったことが発生する場合があります。 これはキャッシュには下記の2種類あり、ブラウザバックの場合はbfcache用の対策が必要となるためです。 - 通常のキャッシュ（ページや画像など、ブラウザの”キャッシュを削除”で削除できるもの） - bfcache(戻る/進むボタン用のキャッシュ) 確認環境 IE11 iOS7 戻るボタンで不具合が起こる理由 「戻る」ボタン用のキャッシュは、JavaScriptの処理が全て完了した状態をメモリ上に保持しています。 キャッシュとしてメモリ上の情報を読み込むことで表示を高速化しているのですが、
JSerのための ブラウザコードリーディング （テスト編）
Meguro.es x Gotanda.js #1 in Drecom https://meguroes.connpass.com/event/49543/
9 JavaScript Libraries for Working with Local Storage — SitePoint
The HTML5 Local Storage API (part of Web Storage) has excellent browser support and is being used in more and more applications. It has a simple API and certainly has its drawbacks, similar to cookies. Over the past year or so I’ve come across quite a few tools and libraries that use the localStorage API so I’ve compiled many of them together into this post with some code examples and discussion o
Browser Monitoring for GitHub.com
EngineeringBrowser Monitoring for GitHub.comMost large-scale web applications incorporate at least some browser monitoring, collecting metrics about the user experience with JavaScript in the browser, but, as a community, we don't talk much about… Most large-scale web applications incorporate at least some browser monitoring, collecting metrics about the user experience with JavaScript in the brow
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
ブラウザ拡張を用いた業務改善手法 - クックパッド開発者ブログ
買物情報事業部の根岸(@negipo)です。今回はブラウザ拡張を日常業務でどう使っているかについて紹介します。 ブラウザ拡張とは ブラウザ拡張は、ブラウザによるウェブとのインターフェースをJavaScriptやCSSを用いて自分好みにカスタマイズする機能です。Google Chromeを利用していればChromeウェブストアなどで公開されている拡張をインストールできるでしょう。一方で、開発したブラウザ拡張を自分で使うために、Chromeウェブストアによる公開と言うプロセスを踏むのは面倒です。日常的にウェブのインターフェースを改変する道具としてブラウザ拡張を使うためにはいくつかの手法がありますが、僕はGithubのdefunktさんが作ったdotjsを使っています。詳細は省きますが、今開いているページでalertを出すぐらいの機能であれば10秒で開発作業を終えることができると思います。 また
NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった - Qiita
最近またe2eを書いたりしてる。色々悩んだけど、やっぱNightmareを使うことにした。 Nightmareについては僕が前書いた記事を参考にしてください NightmareでE2E - Qiita Nightmareの良い点 Zero configuration というかただのスクレイパー 悪い点 プロセス立ちあげるのが遅い JSわかってないと読みづらい PrecepeterとかTestiumとかProtractor試したけどどれも走らせるだけでいっぱいいっぱいで、もう面倒臭い。 僕は行儀が悪いのでスクレイパーを走らせられればいいです。エビデンス() はスクリーンショットで確保する方向で。 連番のスクリーションショットを取りながらNightmareを走らせるサンプル Nightmare = require 'nightmare' class TestRunner extends Nig
テストできないコードをE2Eテストを使ってリファクタリングしよう
ユニットテストがしにくい状態となってるコードをTestiumを使ったE2Eテストを書いてリファクタリングしてみる話です。 例えば、以下のようなjQueryで書いたコードは外(テストコード)から取り出すポイントがないので、ユニットテストを書くのは難しいと思います。(そもそもViewのコードなので) 特定のバージョンでの変更点を簡単に確認できるよう、 「Aの列のラジオボタンを選ぶと同じ行より一つ下にあるBの列のラジオボタンを自動で選ぶ」 という補助機能 $(document).ready(function () { // seq: シーケンス番号 $.each(["new_version", "old_version"], function () { $("input[name='" + this + "']").each(function (idx, elem) { if (idx == 0
Webmodules - JSConf.ar 2014
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
そろそろCSP Lv.2 nonceやろう - teppeis blog
tl;dr CSP Lv.2のnonceを使うと意外と簡単にCSPの恩恵を受けれるよ Firefoxはunsafe-inlineとの挙動がおかしいので注意 サンプル実装としてExpressで簡単にnonce対応できるconnectプラグインを書いた（デモあり） Violation Reportもブラウザによって細かい挙動の差異があるよ CSP Lv.2 nonceの登場と背景 CSPの特にunsafe-inlineはXSSに対して最終防衛線的に強力な効果がある。 しかし特にサーバーからの値の受け渡し部分などでどうしてもinline scriptを使いたくなるところがあり、unsafe-inlineを禁止するとDOM data等を使わざるを得ず、つらい感じだった。 @kazuho ですね。かといってDOM dataかー、、という感じではあるんですが、CSPでinline script禁止しち
【Codepatch #03】Protractorを使ってスクリーンキャプチャを自動化！、他 | Goodpatch Blog
Goodpatchのフロントエンド定例より皆様へ情報を共有する場「Codepatch」第三回！ 初めまして、iOSデベロッパのseiyaです。 今回は前回の記事「【Codepatch #02】PhantomJSを使ってスクリーンキャプチャを自動化、他」で少し触れたProtractorを始め下記の項目でお送りします。 ・Protractorでテスト、スクショの撮影を自動化 ・MixinライブラリBourbon紹介 ・楽々Framer.js! shortcuts-for-framer ProtractorとはAngularJSのE2Eテストフレームワークです。WebDriverJSという、JavaScriptでブラウザを動かすための仕組みを元に作られています。 そのため前回のCodepatchで取り上げたCasperJSと異なり、様々なブラウザでの動作が確認できたり、手元のブラウザと全く同じ見
Everything is broken, and I don't know why.
JSConf US May 28th 2014 Video: https://www.youtube.com/watch?v=e4eE5VeO1_o
power-assertでJavaScriptのテストをする ブラウザ編
power-assertという単純なアサーションでも、テストが失敗した時に分かりやすい情報を出せるテストライブラリ/ツールについての記事です。 前回、power-assertの使い方 Node.js編 | Web scratchではpower-assertの動作やNode.jsプロジェクトでの簡単な導入方法について解説しました。 前回のpower-assert + gulpで紹介したプロジェクトをそのまま使っていくので、見ていない場合はそちらから見ていたほうがいいかと思います。 今回は、ブラウザでのpower-assertの動かし方とデバッグについて書いていきたいと思います。 今回扱う実行環境 Node.js ＜＝ 前回 ブラウザ Browserify 前回やったこと まずは前回紹介したgulp + power-assertのプロジェクトを元にやっていきます。 azu/power-asse
JavaScript Security
Wenn der größte Teil der Logik in JavaScript stattfindet, dann findet auch der größere Teil der Sicherheitsrisiken dort seine Heimat. Und Angreifer finden mit JavaScript eine interessante neue Umwelt, denn die Sprache selbst und auch ihre Heimat in Browser und Node.js bringen viele neue Probleme. Und genau da setzt der Vortrag an: die verblüffenden Unterschiede von JavaScript zu anderen Sprachen,
Node.js and the new web front-end - Human Who Codes
Posted at October 7, 2013 by Nicholas C. Zakas Tags: Architecture, JavaScript, Node.js, Web Server Front-end engineers have a rather long and complicated history in software engineering. For the longest time, that stuff you sent to the browser was “easy enough” that anyone could do it and there was no real need for specialization. Many claimed that so-called web developers were nothing more than g
BrowserStack を用いたクライアントサイドのテスト
YAPC::Asia 2013 発表資料です。 JavaScript テスト事情の整理と、BrowserStack を用いたテストの紹介
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NightwatchでEnd-to-Endテストを行う
ほんとにあったphantomjsのコワい話
