High performance storage for your app: the Storage Foundation API | Web Platform | Chrome for Developers
The web platform increasingly offers developers the tools they need to build fined-tuned high-performance applications for the web. Most notably, WebAssembly (Wasm) has opened the door to fast and powerful web applications, while technologies like Emscripten now allow developers to reuse tried and tested code on the web. To truly leverage this potential, developers must have the same power and fle
A complete guide to the useEffect React Hook - LogRocket Blog
Editor’s note: This article was last updated on 12 October 2023 to add a comparison of the useState and useEffect Hooks, the relationship between the useEffect Hook and React Server Components, and more. Understanding how the useEffect Hook works is one of the most important concepts for mastering React today. Especially if you have been working with React for several years, it is crucial to under
TypeScript is terrible for library developers | Hacker News
This is a matter of opinion.I wrote a set of React components that gets 46,000 npm downloads a month and typescript is a godsend. My library is a bridge between two heavily popular projects, so my dependency tree is fairly intertwined. The library solves a real user problem and does it efficiently. It isn't totally perfect, but it covers 98% of the use cases. I wrote comprehensive tests as I devel
週刊Railsウォッチ（20191118前編）ActiveJob引数のログ抑制、RailsガイドProプランお試し、ファイルアップロードのレジュームgemほか｜TechRacho by BPS株式会社
2019.11.18 週刊Railsウォッチ（20191118前編）ActiveJob引数のログ抑制、RailsガイドProプランお試し、ファイルアップロードのレジュームgemほか こんにちは、hachi8833です。銀座Rails #15やっぱり行けばよかった😢。 銀座Rails 15で発表したスライドを公開しました。productionとかdevelopmentとかstagingみたいな環境に関するつらみみたいな話をしました: 出張！Railsウォッチ in 銀座Rails＃15 https://t.co/CK9BTxbu69 #ginzarails — Masato Mori (@morimorihoge) November 15, 2019 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラ
リアルタイムにクイズ大会を開けるアプリ「mondai」 今回作ったアプリ「mondai」は、ブラウザだけで簡単に使えるクイズアプリです。クイズアプリといっても、一人で淡々と解いていくというよりも、友達やイベントなど大人数で同時にクイズを解いていける、クイズ大会をオンラインで実現するサービスになっています。 例えば、友達同士で通話してる時、ちょっと手軽なミニゲームしたくなった時や、 イベントでのアイスブレイクに使うと、会話をつなげるツールになります！ サービスを作るきっかけ 作業しながら雑談の生配信を見ていた際に、大勢の視聴者が手軽に参加できるミニゲームのようなサービスがないことを気づきました。コロナ禍で「オンライン＋娯楽」を提供できるツールが求められていましたし、自分も欲しかったのでその点をベースに考えはじめました。 そして、大勢のユーザーが気軽に参加でき、大人数で遊んだ時でも破綻せず、簡
サイトを訪れたときに時々表示されるCookie使用同意のポップアップ。よくあるタイプのものを独自に作成してみました。 最小限のHTML/CSS, JavaScriptだけで構成しており、コピペで簡単に実装することができます。 ※本ポップアップは、あくまでサイトがCookieを使用していることをユーザに伝える簡易的なものです。GDPRに準拠しているわけではないのでご注意ください。 はじめに：Cookie使用同意に関して 最近は以前に比べ、Cookieをはじめとする個人情報の扱いが世界的に厳しくなっています。 背景には、EUで2018年5月に施行されたGDPR（一般データ保護規則）の項目のうち、Cookieの利用同意に関する要件が厳格化したことがあるようです。その影響でGoogleさんが5000万ユーロの制裁金を科せられたとか… 現在、日本ではCookieの利用同意に関して明確なガイドラインが
Today, the Trident Era Ends
When I was a child, I was always fascinated by stories about ancient civilizations. I devoured books about Atlantis, or the story of Heinrich Schliemann's discovery of Troy, stories about the Greek, the Romans, the Inca Empire, or Ancient Egypt. And I was always fascinated by the extent of their capabilities in the fields of astronomy, math, and medicine, their incredible achievements, like buildi
この記事は先日リリースした個人開発アプリ『3 Good Things!』を作る中でUI/UXについて考え、 講師もやっているWebデザイナーさんを含む周囲の意見を聞いてそれを改善していった過程についてをまとめた記事です この記事で紹介するユーザー心理はこちら👇 基本スクロールとタップしかしたくない 開いて即何をすれば良いか分からないとサヨナラ 少しでも「難しそう/面倒くさそう」と思わせたら負け 信用できないアプリに個人情報は渡せない 「徒労感」は絶対にNG 期待した通りの動作で動かないとストレス 「使ってて」嬉しい・キモチイイが欲しい 他者のとの繋がりで持続するモチベーション 最終イメージ 👇アプリの紹介/使用技術等についてはこちら⚛️ このアプリはポジティブ心理学の創設者セリグマン教授が提唱し、長年の実験で効果が実証されている “Three Good Things”メソッドを使い、毎
試したこと1 Next.jsを使っているので、Next.jsにより特化していそうな nextjs-auth0 から試してみる。 https://github.com/auth0/nextjs-auth0#getting-started をみながらAuth0側の設定を行う。 Application TypeにSingle Page ApplicationではなくRegular Web Applicationを選択するのがポイント。 ドキュメントどおりに進めると、ログイン機能ができた。 Cookieには多分SDK内部でセットされたappSessionという名前のセッションIDっぽいものがある。 LocalStorageは空でした。 試してみたこと2 nextjs-auth0 でのアクセストークンの取得。 サーバーサイドでのアクセストークンの取得 ドキュメントによると、getAccessToke
Adventarを支える技術 Advent Calendar 2019 の8日目です。 今日は Firebase Authentication で苦労した点や工夫した点について書きます。 ログインの判定が遅い問題 Firebase Authentication を使って、現在のセッションがログインしているかどうかを検出するには、firebase.auth().onAuthStateChanged ()を呼び出します。 https://firebase.google.com/docs/auth/web/manage-users firebase.auth().onAuthStateChanged(function(user) { if (user) { // User is signed in. } else { // No user is signed in. } }); しかし、この処理
A Dark Mode Toggle with React and ThemeProvider | CSS-Tricks
I like when websites have a dark mode option. Dark mode makes web pages easier for me to read and helps my eyes feel more relaxed. Many websites, including YouTube and Twitter, have implemented it already, and we’re starting to see it trickle onto many other sites as well. In this tutorial, we’re going to build a toggle that allows users to switch between light and dark modes, using a <ThemeProvid
iOS Hacking - A Beginner’s Guide to Hacking iOS Apps [2022 Edition]
H3ll0 fr13nds! My first post will be about iOS Hacking, a topic I’m currently working on, so this will be a kind of gathering of all information I have found in my research. It must be noted that I won’t be using any MacOS tools, since the computer used for this task will be a Linux host, specifically a Debian-based distribution, in this case, Kali Linux. I will also be using ‘checkra1n’ for the d
JSer.info #699 - esbuild v0.22.0 がリリースされました。 Release v0.22.0 · evanw/esbuild Release v0.23.0 · evanw/esbuild v0.22 では--platform=nodeを指定した時に--package=externalをデフォルトにする変更を行いましたが、AWS CDK などが0.xの最新をインストールする仕組みなっていて問題が起きたため 0.23.0 では元の挙動へと revert されています。(AWS CDK 側も修正されています) また、Windows7,8 など古い OS のサポート終了、es2024のサポート、@esbuild/wasi-preview1パッケージの公開など Node.js v22.4.0 がリリースされました。 Release 2024-07-02, Version
Cloudflare Web Analytics
Free Website AnalyticsPrivacy-first, lightweight, accurate web analytics—for free Analytics are essential to helping your website thrive. But many existing solutions require you to make a tradeoff between cost and your visitors’ privacy. At Cloudflare, our mission is to help build a better Internet — and part of that is to deliver essential web analytics to everyone with a website without compromi
皆さんこんにちは。最近、玄米生活を始めました、おっくんです。 去る 2021 年 11 月 9 日に Deno 1.16 がリリースされました。 今回も、リリースノートを参考に 変更事項の気になるところを紹介します。 実行環境 Docker イメージ denoland/deno:centos(確認時点では Deno 1.16.1 でした) Deno 1.16 Deno 1.16 での変更事項をDeno 1.16 リリースノートを元に確認します。 deno.com fetch API が、ファイル URL をサポートするようになりました これまで Deno では、 fetch を web 標準の API として、ネットワークリソースにアクセスするためのみに使用してきました。 また、ローカルファイルアクセスには、Deno.readfile()などのメソッドが使用されてきました。 このリリースで
先日、実験的にFlutter Webを使い数ヶ月かけて開発を進め、最終的に、結局パフォーマンスの問題からReactにすべて書き換えたことがあった。 同じ失敗をする人ができるだけ少ないように、現状のFlutter Webの課題点について、主に以下のIssueから引用して共有しておこうと思う。 前提として、Flutterはとても積極的に更新が行われているので、上記Issueで挙げられている問題点は徐々に解決すると思う。現状ではまだ関連IssueはOpenのままで、少なくともここ数ヶ月は変わりなく、執筆時点で最新版のFlutter 2.5.3ではまだ未解決な問題点を挙げていく。 初期読み込みが非常に重い 実際に flutter build web --releaseをしてアプリをデプロイしてみると分かるけれど、どんなに小さいアプリを作っても、main.dart.jsのサイズがめちゃくちゃ大きい。
これは何 個人開発中に経験した、chrome 拡張機能開発における教訓でございます。 Manifest のバージョンは MV3 です。 V3 特有の話と、よく嵌りやすい点についてまとめました。 icon が表示されないときは 参考：https://developer.chrome.com/docs/extensions/reference/action/#icon 次を確認してみてください。 pngを提供しているか pbg以外の拡張子、例えばsvgとかは無視されます 次の 3 つのサイズ(DIP: デバイスに依存しないピクセル)を提供しているか 128 * 128 インストール中および Chrome ウェブストアで使用されます 48 * 48 拡張機能管理ページ（chrome://extensions）で使用される 48x48 アイコンも提供する必要があります 16 * 16 拡張機能のペ
![[MV3] Chrome Extension 開発の教訓 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0ee57381e6a2fb95976386f598d40e300b99110a/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTVYzJTVEJTIwQ2hyb21lJTIwRXh0ZW5zaW9uJTIwJUU5JTk2JThCJUU3JTk5JUJBJUUzJTgxJUFFJUU2JTk1JTk5JUU4JUE4JTkzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xNDllZTI3MTM5OTIzNTE4YjU5MGFlYTdiMmVjOTU5Zg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpY2hpdG9zZSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGZkZGYzYjM0NDIwYTNiZWVjMTBhYTBiZDIzNTIwOWM%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D7aac00ad517d4ad94b97237e7a5095ad)
最近、新規事業で完全0-1のプロダクト開発をした際に Rails/Vue.jsのSPAでいかにセキュアに認証情報を扱うかについて調べた結果を書いていきます 「それおかしくない？」とか「脆弱性つぶせてなくない？」とかあればコメントで指摘していただけるととても助かります どう実装するか 実装の意図や詳細については下の方で解説します Rails側 認証情報をsecure属性とhttponly属性をつけたcookieでフロントエンドに返す domain属性はAPIのドメインのみにする（特に設定変えなければデフォルトでそうなってるはず) 独自ヘッダの有無のチェックを認証処理に組みこむ gemrack-corsを導入する originsをSPAのURLのみに制限する credentialsをtrueにしておく Vue.js側 withCredentialsオプションをtrueに設定する(axiosやx
![[SPA]脆弱性を潰して認証情報を扱う[アクセストークン] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ba42998b64e82603ece88a370a06085981679376/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-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCU1BBJTVEJUU4JTg0JTg2JUU1JUJDJUIxJUU2JTgwJUE3JUUzJTgyJTkyJUU2JUJEJUIwJUUzJTgxJTk3JUUzJTgxJUE2JUU4JUFBJThEJUU4JUE4JUJDJUU2JTgzJTg1JUU1JUEwJUIxJUUzJTgyJTkyJUU2JTg5JUIxJUUzJTgxJTg2JTVCJUUzJTgyJUEyJUUzJTgyJUFGJUUzJTgyJUJCJUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgzJUJDJUUzJTgyJUFGJUUzJTgzJUIzJTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz01MzUzNTVmZTE2MTFhOTZjMDgzMGQzOWM5OTZhZTU2Zg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDByaF90YXJvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYmM5YzU1ZGNlNDBmMjBmYzA3NWY1YzU3NzY4MDgyNA%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K_44Kk44Of44O8%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Db9b8cf014662d4c1d0b7c52a3adf1aad)
SSRなNuxt、リロードするとstoreから認証情報が消えてしまい、 認証状態で初期レンダリングできないのつらいなとおもっていたら、 Nuxtのサンプルがよさげだったので、自分用に再整理してみた。 認証ルート - Nuxt.js ざっくりの方針 認証情報をStoreに保存するときに、sessionにもいれておく sessionにいれるために、serverMiddlewareを使う serverMiddlewareではexpressを立てて、sessionに詰める/削除だけする 準備する。設定する。 ライブラリのインストール npm install --save express express-session body-parser whatwg-fetch serverMiddlewareの@/api/index.ts serverMiddlewareで呼ばれる処理を書く。 セッションを
React.jsで簡単なユーザー認証アプリを作ろう！初心者向けガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
はじめに プロジェクト作成 スタイリング 親コンポーネント 子コンポーネントの実装 ログイン状態の保持 ユーザー情報の保存 ログアウト処理 注意点 最後に はじめに 本日は、ユーザー登録、ログイン、ログアウトの機能を持つ認証アプリの基本的な構成を初心者向けに解説します。 Reactでは、ユーザーの認証状態を管理するためにReact ContextやReduxなどの状態管理ライブラリを使用するのが一般的です。 初心者には、Reactの状態管理やファイル構造、データフローに関する概念を理解することは初めての課題かもしれません。 そのため、React ContextやReduxのような状態管理ライブラリを使うことが一般的ですが、これらは初心者にとっては少し複雑に感じるかもしれません。 React Contextフックを使った状態管理では、通常よりもファイル構造が複雑になることがあります。 また、
Photo by Vishal Jadhav on UnsplashPreviously, React features such as state and lifecycle functions are available only for class-based components. Function-based components are referred to as dumb, skinny, or just presentational components because they can’t have access to state and lifecycle functions. But since the release of React Hooks, function-based components have been elevated into first-cl
Svelte Summit Fall 2021 まとめ
Svelteのコミュニティによるイベント「Svelte Summit」が2021/11/20(土)に開催されました。 前回からおよそ半年ぶりの開催となります。 各セッションの発表はYoutubeで配信されつつ、NewYorkではwatch partyも開催され、作者のRich Harris氏だけでなくVercelのCEOのGuillermo Rauch氏も出席されていました。また、ドイツでもwatch partyが開催されたようでその様子がたまに中継されていました。 Youtubeでアーカイブが視聴できます。 YouTubeのvideoIDが不正です 前回のまとめと同様、他の方に興味を持ってもらえるように、内容をざっくりまとめました。 ※英語が聞き取れなかったところはアブストで補完していますが、内容が違っている場合はお知らせいただけると助かります。 ※この日に全てのセッションの発表がされた
l'occasion f — Gelegenheit f, die ~ , der ~. bei Gelegenheit — à l'occasionI #StandWithUkraine 🇺🇦. The other day, I received a harmless-looking Issue for my app SVGcode (announcement blog post). The Issue read: Crash when opened with cookies blocked Hey I block cookies by default. Unfortunately your website doesn’t handle that nicely despite it not needing (IMO) cookies to operate. I'm getting t
なんとかは黒に染まれ、とかなんとか すでにお気づきの方もいらっしゃるかもしれないが、このブログにダークモードを追加した。ページ上部の🌓（または☀）ボタンで切り替えられるので試してみてください。 たぶんこんなかんじになってると思います（GIF） 作るものの概要 以下のようなものを作る。 OS側がダークモードであっても、初回訪問時（デフォルト）はライトモードで表示 記事上でダーク・ライトを切り替えられる 次回訪問時は前回切り替えた設定が有効になる 初回訪問時に一律ライトモードで表示する理由は、このブログを訪問する前に訪問者が開いていたページはおそらく白背景であろう、という予測から。個人的にはダークモードのほうが好きだけど、ウェブページ全般におけるダークモード対応状況は限定的といえるため、初回は馴染みのカラーリングで表示するのが無難だろうと判断した。デフォルトのモードは外的要因等で今後変えるか
現在はまさしく、JavaScriptの時代と言えるでしょう。最近の2〜3年で、JavaScriptは最も人気のある言語ランキング1位を維持しており、今も急速に成長しています。10年前、Web標準という概念すらないときからフロントエンドの開発を続けてきた開発者にとっては、非常に感慨深いものがあるでしょう。当時は開発環境という言葉すら恥ずかしいほどに不毛な環境でしたが、現在流通している新しい技術と開発ツールを眺めてみると、まさに”豊かな時代”と言えるでしょう。 なかでも、特に有望なのは「テスト方法論とツールの発展」でしょう。この数年間、フロントエンドのテストは、はるか彼方にある幻想のようなものでした。従来のどのような方法を試してみても、フロントエンドのコードテストには適しておらず、テストコードを作成する努力に比べて、実際に得られる効果はわずかなものでした。しかし、最近登場したテストツールは、過
初めて書いたReactを読んでみた
TypeScript じゃないんか！みたいな話になるが、普段は Elm を書いていてビルドには parcel を使っているような人間である。どうすれば TypeScript を使えるかなどわかるわけもない。 import React, { useReducer, useEffect } from "react"; import "./style/App.css"; import Form from "./components/Form.jsx"; import List from "./components/List.jsx"; import Filter from "./components/Filter"; import Reducer, { init, INPUT, POST, SELECT, CHECK, DELETE } from "./reducer/App"; const g
Client-side Authentication the Right Way (Cookies vs. Local Storage)
Client-side Authentication the Right Way (Cookies vs. Local Storage) The expectation When you log into an application, you have the expectation that the next time you open a new tab or window in the browser, you will still be logged into that application. This means that in some way, shape, or form, the client (browser) must maintain a reference to you in order to keep you logged in. Where can I p
Using asynchronous web APIs from WebAssembly Stay organized with collections Save and categorize content based on your preferences. The I/O APIs on the web are asynchronous, but they're synchronous in most system languages. When compiling code to WebAssembly, you need to bridge one kind of APIs to another—and this bridge is Asyncify. In this post, you'll learn when and how to use Asyncify and how
週刊Railsウォッチ: byebugからruby/debugへの移行ガイド、YJIT解説記事ほか（20220823後編）｜TechRacho by BPS株式会社
週刊Railsウォッチについて 各記事冒頭には🔗でパーマリンクを置いてあります: 社内やTwitterでの議論などにどうぞ 「つっつきボイス」はRailsウォッチ公開前ドラフトを（鍋のように）社内有志でつっついたときの会話の再構成です👄 お気づきの点がありましたら@hachi8833までメンションをいただければ確認・対応いたします🙏 TechRachoではRubyやRailsなどの最新情報記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます（例:週刊Railsウォッチタグ） 🔗Ruby 🔗 procとlambdaの違い（Ruby Weeklyより） 元記事: The difference between procs and l
新機能 — EC2 Auto Scaling と EC2 フリートの属性ベースのインスタンスタイプの選択 | Amazon Web Services
Amazon Web Services ブログ 新機能 — EC2 Auto Scaling と EC2 フリートの属性ベースのインスタンスタイプの選択 10 年以上前に私が最初に使用した AWS のサービスは、 Amazon Elastic Compute Cloud (Amazon EC2) でした。時間が経つにつれて、EC2 はさまざまなユースケースに合わせて最適化されたインスタンスタイプを幅広く追加しました。CPU/GPU、メモリ、ストレージ、ネットワーク容量のさまざまな組み合わせにより、アプリケーションに適したリソースの組み合わせを柔軟に選択できます。 クラウドの主な利点の 1 つは伸縮性です。EC2 フリートを使用すると、オンデマンド、リザーブド、スポットインスタンスを一緒に使用して、複数のインスタンスタイプと購入オプションにわたって容量を同期的にリクエストし、複数のアベイラビ
It is very common for an application to interact with local files. For example, a general workflow is opening a file, making some changes, and saving the file. For web apps, this might be hard to implement. It is possible to simulate the file operations using IndexedDB API, an HTML input element with “file” type, an HTML anchor element with the download attribute, etc, but that would require good
米Mozillaは8月10日 (現地時間)、Webブラウザ「Firefox 91」の安定版の提供を開始した。Total Cookie Protectionを拡張。「Enhanced Cookie Clearing」によって、再び追跡に利用されないようサイトのデータを漏らさず削除できるようになった。他にも、Windows SSO（single sign-on）のサポートが追加され、プライベート・ブラウジングにHTTPS-Firstポリシーが適用される。 Webサイトにアクセスした際に、追跡を試みるサイトはCookieやlocalStorage、site settingsやキャッシュ（HTTPキャッシュなど）などに様々な記録を残す。さらにFacebook.comのLikeボタンのような埋め込まれたサードパーティのリソースがデータ消去を複雑にする。例えば、comfypants.comのデータを削
【速報】【検証中】ITP2.3発表！もう我々はITPと戦わず共存するしかないのか：秋山大志のそれとりあえず作ってみようか。：オルタナティブ・ブログ
ITP2.3が発表になりましたね。 https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/ 今回のアップデートの大きなところは、「トラッカー判定」されたドメインからのフラグ付き（URLパラメタ）のアクセスについては、ローカルストレージに保管したデータも制限（１週間で削除）の対象になるということ。 ここまで来ると、もう、Safariという戦場でITPと戦うのは止めた方が賢明かと思います。 我々はITPを回避しました！ってトラッカー事業者がドヤ顔でリリース出したり、特許取ったりする度に、ITP親分が怒って口を閉じていく。。 "Unfortunately, we see continued abuse of link decoration, so ITP 2.3 takes two new steps to combat
「Google Chrome 122」安定版リリース、ストレージのバケットごとに永続化を選択する設定やメインスレッドのイベントの原因をトラッキングすることが可能に
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン122.0.6261.58がリリースされました。Storage Bucket APIにおいてバケットごとに永続化を選択できるようになったり、Clipboard APIでHTMLを読み取る際にサニタイズしない選択が可能になったりするなどAPIが更新されたほか、開発者ツールにおいてスタイルの再計算など一定のイベントについて原因となるイベントをさかのぼって追跡できるようになりました。 New in Chrome 122 | Blog | Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-122 New in Chrome 122: Storage Buckets API, DevTools Performance panel u
Cover image - Chrome DevTools In this article, you'll learn how to use Chrome DevTools to debug JavaScript code in an efficient manner. What are Chrome DevTools?The DevTools are internal developer tools that come with every version of the Google Chrome browser. The tools facilitate code debugging, allowing users to add breakpoints to detect issues and fix them directly in the browser. DevTools pan
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. React Storybook is a user interface development environment and playground for UI components. It allows developers to develop their components and showcase them interactively in an isolated environment. Storybook also allows the developer to provide code examples of component usage which may,
Vue/Jestテストのハマりどころ３選!! - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは。choreiiです。最近自チームで扱っている商材のフロントエンドのテストコードを大量に書く機会がありました。その中で大きくハマった３点について紹介します。 はじめに 環境 1. ライフサイクルフックをmock化（上書き）したい 2. テストによってcomputedを差し替えたい 3. localStorageをmock化したい まとめ 参考 環境 Vue：2.6.11 vue-test-utils：1.0.0-beta.29 Jest：23.6.0 1. ライフサイクルフックをmock化（上書き）したい 以下のようにbeforeMountで初期化処理を書いている場合、beforeMountをまるごとmock化（上書き）したくなる時があります。 <script> export default { beforeMount() { // コンポーネントで必要なデータの取得や
Version 1.88 is now available! Read about the new features and fixes from March. October 2022 (version 1.73) Update 1.73.1: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the October 2022 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highli
はじめに RubyのWebAssemblyビルドを使ってSPA(single page application)を構築するためのパッケージ"Bormaŝino"を開発し、TodoMVCを移植してみました。 本記事ではパッケージの紹介及び移植されたコードを解説します。 デモ TodoMVC 移植版 https://bormashino-todomvc.vercel.app/ テンプレートアプリケーション https://bormashino-app-template.vercel.app/ パッケージ"Bormaŝino"について コンセプト 伝統的な「フォームを表示し」「POSTされる内容でデータストアを更新し」「データストアに保持されている内容を元に画面を表示する」だけのアプリケーションを通信時間が0に近い状態で走らせれば、いわゆるSPA的な操作感が得られるのでは？ という考えに基づき、
Updates to Storage Policy
A website can store data on a user’s device using various storage APIs: localStorage, IndexedDB, File System, etc. It’s an important capability allowing websites to be functional offline with good performance by serving local resources. However, the storage capacity is not unlimited. In fact, it is usually much smaller than a device’s disk size. Bad things could happen when the capacity is full li
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js + Firebaseでリアルタイムなクイズアプリ作った話
【コピペで実装】Cookie使用同意のポップアップ3選 | IB-Note
使い続けてもらえるアプリUX開発で気を付けた8つのユーザー心理【個人開発】
@auth0/nextjs-auth0 と @auth0/auth0-react の使い分け
Firebase Authentication の苦労話 - hokaccha memo
2024-07-11のJS: esbuild v0.22/0.23、Node.js 22.4.0、pnpm 9.5 Catalogs
Deno 1.16 へのアップデートと変更事項まとめ - 虎の穴開発室ブログ
Flutter Webの現状と課題 (2021年11月時点) - Qiita
[MV3] Chrome Extension 開発の教訓 - Qiita
[SPA]脆弱性を潰して認証情報を扱う[アクセストークン] - Qiita
SSRなNuxtで認証情報をセッションに保存する - くらげになりたい。
Best Practices with React Hooks
Things not available when someone blocks all cookies
このブログをダークモードに対応する - SANOGRAPHIX Blog
実用的なフロントエンドのテスト戦略（1） | NHN Cloud Meetup
Using asynchronous web APIs from WebAssembly | Articles | web.dev
The File System API with Origin Private File System
「Firefox 91」公開、しつこい追跡も遮断するCookie消去強化
How to efficiently debug JavaScript with Chrome DevTools.
Alternatives to React Storybook - LogRocket Blog
Visual Studio Code October 2022
RubyでSPAを構築してみました - Qiita