Chrome 79でアプリのデータが消えてしまうバグが発覚
by geralt 2019年12月11日にリリースされたChrome 79の安定版で、他のアプリのデータが消えてしまうバグの存在が判明しました。これを受けて、GoogleではAndroid向けChromeの配布を一時停止し、修正の検討を進めています。 Google pauses Chrome 79 rollout on Android after bug wipes data in some apps https://www.androidpolice.com/2019/12/15/google-pauses-chrome-79-rollout-on-android-after-bug-wipes-data-in-some-apps/ 1033655 - localstorage or websql unexpectedly cleared - chromium - An open-so
JSer.info #453 - Chrome 77がリリースされました。 New in Chrome 77 | Web | Google Developers Chrome 77では、PerformanceObserverの中でページ内の大きな要素の変更があったことを監視するLargest Contentful Paint(LCP)がサポートされました。 Largest Contentful Paint | web.dev その他にもformdataイベント、formAssociatedプロパティのサポートなどが含まれています。 また、アドレスバーに表示されていたEV証明書の情報が詳細パネルの方に移動しています。 Troy Hunt: Extended Validation Certificates are (Really, Really) Dead Upcoming Cha
こんにちは、開発本部でインターンをしている田中 湧大です。 今回は認証機能をPR TIMES上で実装し、企業・事業主ユーザーとメディアユーザーでログインするときにJWTを発行するようにしたのでその紹介をします。 JWT（JSON Web Token）とは JSON Web Tokenは以下のようなドットで結合された文字列です。${HEADER}.${PAYLOAD}.${SIGNATURE}で構成されており、それぞれbase64エンコードされています。 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IlRhbmFrYSIsInVybCI6InBydGltZXMuanAifQ. NVG3MT6djcCjv1Q39Q-QfdZafDA45YYzDiVeknO4KjM JWTはログインシステム、
Vue.js JWT Authentication with Vuex and Vue Router - BezKoder
Overview of Vue JWT Authentication example We will build a Vue application in that: There are Login/Logout, Signup pages. Form data will be validated by front-end before being sent to back-end. Depending on User’s roles (admin, moderator, user), Navigation Bar changes its items automatically. Screenshots – Signup Page: – Login Page & Profile Page (for successful Login): – Navigation Bar for Admin
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
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
ローカルファィルの読込
HTML5 以前は、JavaScriptでローカルファイルを読み込むことが出来ませんでしたが、HTML5では限定条件（ユーザーによる操作が必須）ながらFile API を使用して、読み込むことが出来ます。( 文字コードは原則 UTF-8 参考 ) [ファイルの書出しはこちら] ここでは、その具体的な例を見てみます。 参考１ 参考２ 参考３ 参考４ 参考５ 参考６ 注１. 同一サイト上にあるファイルの読込は html5以前から出来ます。 参考１ 参考２ 参考３ 参考４ 注２. 一般的に、ローカルファイルの読込には閲覧者側で何らかの操作が必要です。 注３. 便法として、js ファイルの配列などとしておくと、json 等も js ファイルとして読込むことができます ■ ローカルファイルを読込む ここでは、FileReader でファイルを読み込みます。 そのサンプルリストで見てみます。↓ <!
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」は、ブラウザだけで簡単に使えるクイズアプリです。クイズアプリといっても、一人で淡々と解いていくというよりも、友達やイベントなど大人数で同時にクイズを解いていける、クイズ大会をオンラインで実現するサービスになっています。 例えば、友達同士で通話してる時、ちょっと手軽なミニゲームしたくなった時や、 イベントでのアイスブレイクに使うと、会話をつなげるツールになります！ サービスを作るきっかけ 作業しながら雑談の生配信を見ていた際に、大勢の視聴者が手軽に参加できるミニゲームのようなサービスがないことを気づきました。コロナ禍で「オンライン＋娯楽」を提供できるツールが求められていましたし、自分も欲しかったのでその点をベースに考えはじめました。 そして、大勢のユーザーが気軽に参加でき、大人数で遊んだ時でも破綻せず、簡
この記事は先日リリースした個人開発アプリ『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
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のサイズがめちゃくちゃ大きい。
フロントエンドエンジニアじゃないけれど React を書きたい人のための実践入門（前編） #Zaim｜くふうAIスタジオ
こんにちは、Zaim でフロントエンドやサーバーサイドの開発を担当している takeshy です。 Zaim では Web 版を大幅に作り直す計画があり、そのための技術として Go, React, TypeScript などを採用することが決まっています。 Zaim は、iOS や Android といったアプリ開発者が比較的多く在籍している会社です。そうした「フロントエンド以外の開発担当者」や「これからフロントエンドを学びたいデザイナー」向けに、React と Redux に関する社内勉強会を開きました。 せっかくなので、その時に作成したスライドの資料を元に、note 記事として公開することにしました。 改めて React おさらい React は「コンポーネント指向の UI ライブラリ」です。コンポーネントとは、他から呼び出されることを前提にインターフェースが定められた、パーツとして独
Astro 4.0 Beta Release | Astro
Today we’ve released the first beta of Astro 4! Those feeling adventurous can install the new beta, review our in-progress upgrade docs, and report any bugs you find to the Astro discord. What to expect in Astro 4 We are releasing Astro 4 to stay up to date with Vite, our internal build tool. Astro 4 includes the latest version of Vite 5, which was just released last month. As Vite 5 is also a sma
これは何 個人開発中に経験した、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で呼ばれる処理を書く。 セッションを
サイトを訪れたときに時々表示される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
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標準という概念すらないときからフロントエンドの開発を続けてきた開発者にとっては、非常に感慨深いものがあるでしょう。当時は開発環境という言葉すら恥ずかしいほどに不毛な環境でしたが、現在流通している新しい技術と開発ツールを眺めてみると、まさに”豊かな時代”と言えるでしょう。 なかでも、特に有望なのは「テスト方法論とツールの発展」でしょう。この数年間、フロントエンドのテストは、はるか彼方にある幻想のようなものでした。従来のどのような方法を試してみても、フロントエンドのコードテストには適しておらず、テストコードを作成する努力に比べて、実際に得られる効果はわずかなものでした。しかし、最近登場したテストツールは、過
ダークモードの実装 | きるこの日記帳
Mac OS の Mojave(10.14 以降）には、ダークモード（Dark Mode)が搭載されている。 配色を暗めにして、ユーザーの目の負担を抑えたりする機能のこと。 従来の画面は、ライトモード（Light Mode)として区別される。 多くのネイティブアプリで対応が進んでいて、現在では一部の Web ページも対応している。 メディアクエリの 1 つで、ユーザーの操作などに応じて、CSS のスタイルを切り替えるもの。 ボタンでの実装 一部のページでは、トグル式、またはラジオボタンを用意して手動で切り替える。 また、localstorage に状態を保存するページもある。 How I added Dark Mode to my website 上記ページでは、.dark クラスの付け外しで対応している。 prefers-color-schemeでの実装 prefers-color-sc
初めて書いた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
デザイン部でフロントエンドエンジニアをしているkitoです。React.jsとVue.jsの登場で、JS界隈は一時期の混沌とした時代から落ち着いてきましたが、今や両者それぞれのエコシステムが豊かになるフェーズに移行しています。jQueryがデファクトスタンダードになり、盛んにプラグインが開発されていた頃を彷彿とさせます。 Vue.jsのエコシステムのなかでもNuxt.jsは、完成度の高さからVue.jsのサーバーサイドレンダリングのフレームワークとして広く利用されようとしています。 今回は、そんなNuxt.jsを実際のサービスで使うさいに欠かせないライフサイクルの知識について書きたいと思います。といっても、私自身、最近までNuxt.jsのライフサイクルついて十分に理解していたかというと、心もとないところがありました。公式サイトのライフサイクルダイアグラムをみてわかったようなわからないような
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のデータを削
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2019-09-17のJS: Chrome 77、TypeScript 3.7のロードマップ、Can I use and MDN
PR TIMESのログインシステムにJWTを導入しました | PR TIMES 開発者ブログ
Next.js + Firebaseでリアルタイムなクイズアプリ作った話
使い続けてもらえるアプリUX開発で気を付けた8つのユーザー心理【個人開発】
@auth0/nextjs-auth0 と @auth0/auth0-react の使い分け
Firebase Authentication の苦労話 - hokaccha memo
Deno 1.16 へのアップデートと変更事項まとめ - 虎の穴開発室ブログ
Flutter Webの現状と課題 (2021年11月時点) - Qiita
[MV3] Chrome Extension 開発の教訓 - Qiita
[SPA]脆弱性を潰して認証情報を扱う[アクセストークン] - Qiita
SSRなNuxtで認証情報をセッションに保存する - くらげになりたい。
【コピペで実装】Cookie使用同意のポップアップ3選 | IB-Note
Best Practices with React Hooks
Things not available when someone blocks all cookies
このブログをダークモードに対応する - SANOGRAPHIX Blog
実用的なフロントエンドのテスト戦略（1） | NHN Cloud Meetup
Nuxt.jsのライフサイクル覚書 - astamuse Lab
Using asynchronous web APIs from WebAssembly | Articles | web.dev
The File System API with Origin Private File System
「Firefox 91」公開、しつこい追跡も遮断するCookie消去強化