[B! JavaScript][browser] clavierのブックマーク

clavier id:clavier

JavaScriptとbrowserに関するclavierのブックマーク (52)

Webブラウザ上で動作する帳票エンジンを作る話
NGK2022S発表資料です https://ngk2022s.connpass.com/event/233520/ yagisan-reportsのWebサイト https://www.denkiyagi.jp/yagisan-reports/Read less
clavier 2022/01/24
pdf

javascript

webservice

browser
リンク
WebAssembly: 「なぜ」と「どうやって」 [翻訳記事]
本記事は、以下の記事の翻訳です: WebAssembly: How and why by Milica Mihajlija on LogRocket * 執筆者に許諾を頂いた上で掲載しています。どのようにしてブラウザでネイティヴ・コードを実行するのかそこにはどのような背景があるのかそれは JavaScript にとって、さらには Web 開発にとって、いったい何を意味するのかすべてのブラウザにおいて、すなわち Chrome / Firefox / Edge / Safari いずれにおいても、コードは JavaScript エンジンによって解釈されて実行されます――ただ JavaScript が実行されるだけです。残念なことに、JavaScript は、実行したいあらゆる処理にとって理想的なものというわけではありません。ここに WebAssembly の入り込む余地があります。
clavier 2019/12/22
wasm

javascript

browser
リンク
ブラウザの「戻る」ボタンでキャッシュが表示されてしまう際の対策 - Qiita
はじめに各ブラウザの「戻る」ボタンを押すと、ブラウザのキャッシュをクリアしていても、 JavaScriptでリンク遷移時にローディングアイコンをページ全体に表示「戻る」ボタンを押すローディングアイコンが全体に表示されたページが読み込まれるといったことが発生する場合があります。これはキャッシュには下記の2種類あり、ブラウザバックの場合はbfcache用の対策が必要となるためです。通常のキャッシュ（ページや画像など、ブラウザの”キャッシュを削除”で削除できるもの） bfcache(戻る/進むボタン用のキャッシュ) 確認環境 IE11 iOS7 戻るボタンで不具合が起こる理由「戻る」ボタン用のキャッシュは、JavaScriptの処理が全て完了した状態をメモリ上に保持しています。キャッシュとしてメモリ上の情報を読み込むことで表示を高速化しているのですが、 JavaScriptの処理
clavier 2019/04/10
browser

javascript
リンク
JSerのためのブラウザコードリーディング（テスト編）
Meguro.es x Gotanda.js #1 in Drecom https://meguroes.connpass.com/event/49543/
clavier 2017/04/29
javascript

browser

codereading
リンク
9 JavaScript Libraries for Working with Local Storage — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. 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
clavier 2015/06/29
9 JavaScript Libraries for Working with Local Storage

JavaScript

browser
リンク
Redirecting…
Redirecting… Click here if you are not redirected.
clavier 2015/05/27
github

javascript

browser

monitoring

performance
リンク
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事やClearleftのJeremyさんの記事を参考に、フロントエンド
clavier 2015/05/06
javascript

performance

html

css

browser
リンク
ブラウザ拡張を用いた業務改善手法 - クックパッド開発者ブログ
買物情報事業部の根岸(@negipo)です。今回はブラウザ拡張を日常業務でどう使っているかについて紹介します。ブラウザ拡張とはブラウザ拡張は、ブラウザによるウェブとのインターフェースをJavaScriptやCSSを用いて自分好みにカスタマイズする機能です。Google Chromeを利用していればChromeウェブストアなどで公開されている拡張をインストールできるでしょう。一方で、開発したブラウザ拡張を自分で使うために、Chromeウェブストアによる公開と言うプロセスを踏むのは面倒です。日常的にウェブのインターフェースを改変する道具としてブラウザ拡張を使うためにはいくつかの手法がありますが、僕はGithubのdefunktさんが作ったdotjsを使っています。詳細は省きますが、今開いているページでalertを出すぐらいの機能であれば10秒で開発作業を終えることができると思います。また
clavier 2015/05/02
JavaScript

browser

chrome
リンク
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
clavier 2015/02/26
E2E

testing

screenshot

javascript

browser
リンク
テストできないコードを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
clavier 2015/01/25
javascript

browser

testing

E2E
リンク
Webmodules - JSConf.ar 2014
Djangoアプリケーション運用のリアル〜問題発生から可視化、最適化への道〜 #pyconshizu
clavier 2014/12/03
JavaScript

browser

module

node.js
リンク
そろそろ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禁止しち
clavier 2014/11/12
javascript

security

browser
リンク
【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と異なり、様々なブラウザでの動作が確認できたり、手元のブラウザと全く同じ見
clavier 2014/08/14
function

browser

casperjs

javascript

testing
リンク
Everything is broken, and I don't know why.
JSConf US May 28th 2014 Video: https://www.youtube.com/watch?v=e4eE5VeO1_o
clavier 2014/06/03
javascript

debug

browser
リンク
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
clavier 2014/04/13
javascript

browser

testing
リンク
NightwatchでEnd-to-Endテストを行う
Spring BootによるAPIバックエンド構築実践ガイド第2版何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
clavier 2014/03/06
browser

javascript

bdd

node.js
リンク
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 Probl eme. Und genau da setzt der Vortrag an: die verblüffenden Unterschiede von JavaScript zu anderen Sprachen,
clavier 2013/11/04
development

javascript

browser

security
リンク
ほんとにあったphantomjsのコワい話
現在私が開発中のunite.vimに関する紹介です。オマケとして、今までの発表をダイジェスト形式で御届けしています。
clavier 2013/10/12
browser

javascript

phantom.js
リンク
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
clavier 2013/10/08
browser

JavaScript
リンク
BrowserStack を用いたクライアントサイドのテスト
YAPC::Asia 2013 発表資料です。 JavaScript テスト事情の整理と、BrowserStack を用いたテストの紹介
clavier 2013/09/22
browser

javascript

selenium

testing
リンク
1 2 3 次のページ