多要素認証におけるワンタイムパスワードの入力欄 | Accessible & Usable
公開日 : 2022年10月17日 カテゴリー : アクセシビリティ / ユーザビリティ 各種サービスへのログイン、インターネットバンキングなどの取引実行前の本人確認、といったシチュエーションで、多要素認証としてワンタイムパスワード (†) の入力が求められることが珍しくなくなってきました。従来の認証方法であるユーザー ID とパスワードの組み合わせに加えて、都度、動的に生成される一定の桁数の数字の並びをユーザーに入力させることで、セキュリティをより強固なものにしています。 † ワンタイムパスコード、確認コード、認証コード、などと呼ばれることもあります。 ところで、このワンタイムパスワードの入力欄の実装には、<input type="password"> が用いられているケースを時折見かけます (個人的な感覚としては、インターネットバンキングでこのような実装が比較的多く見られる印象です)。
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
Object.groupBy で作られるオブジェクトの prototype は null - Object.create(null)
おさらい: prototype JavaScript のオブジェクトはみんな prototype というのを持っていて, この prototype からプロパティを継承, より正確には, プロパティアクセス時にそのプロパティがオブジェクトに存在しなければ prototype を辿って見つけにいくことになっている. あるオブジェクトを prototype とした別のオブジェクトを作るには Object.create を使う (あるいは new 演算子や __proto__ を使っても良い). const x = {}; x.foo = "foo"; const y = Object.create(x); y.bar = "bar"; const z = Object.create(y); z.baz = "baz"; console.log(z.foo); // => "foo" conso
検索システムのフロントを SSR・Remix で作り直した - Unyablog.
かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
いまさら聞けないNode.js | さくらのナレッジ
こんにちは！小田島です。さくらのナレッジで初めて記事を書きます。よろしくお願いします！ 先日5月13日、Deno 1.0がリリースされました。Denoについては後日記事を書きますが、今回はDenoが生まれるきっかけとなったNode.jsについて、いまさら聞けないことを色々書いていきます。 対象者 本記事は、Node.jsについて以下のような疑問を持っている人が対象です。 Node.jsって何？ Node.jsを使うと何がうれしいの？ Node.jsを使うときに何を注意すればいいの？ なお、本記事はNode.jsのイメージを掴んでもらうのが目的であり、ハンズオンではありません。そのためコードは1行も出てきませんのでご了承ください。 そもそもNode.jsとは？ 超ざっくり説明すると、JavaScriptの実行環境です。 それまではJavaScriptといえばウェブブラウザー上で動かすのが普通
scrollIntoView()では不可能な位置へと要素をスクロールさせたいときはscrollBy()を使うテクがある - Lambdaカクテル
ブラウザ上の要素を視認可能な位置へとスクロールする設計について調べて実装する機会があったのでメモ。 tl;dr const offsetPercentage = 25; const [parentRect, targetRect] = [ parent.getBoundingClientRect(), target.getBoundingClientRect(), ]; const offset = parentRect.height * offsetPercentage * 0.01; const diff = targetRect.top - parentRect.top - offset; parent.scrollBy({ left: 0, top: diff, behavior: 'smooth' }); 背景と課題 大前提として、element.scrollIntoViewを利
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
Scala.js で ｢import で副作用を起こすライブラリ｣ と戦った話 - Qiita
この記事は Scala Advent Calendar 2023 13 日目の記事です。 はじめに 私的には Scala.js の利点として JavaScript / TypeScript 向けのライブラリを利用しつつ Scala の書き心地を得られる。 純粋関数型プログラミングを容易にできる。 という二点が特に大きいと考えています。 しかし、せっかく Scala で副作用を隔離して気持ちよくコードを書いていても、JS / TS 向けライブラリの中には import するだけで環境変数読み込みや HTTP リクエスト等の副作用が発生するような危険なライブラリが存在します。1 この記事では、そのような ｢import で副作用を起こすライブラリ｣ をどのように副作用を起こさずに扱うかを書き記したいと思います。 また、この記事では副作用の隔離について Effect runtime として Ca
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
ESBuildでビルドしてGoogle Cloud Functionで実行するまで
TypeScript/JavaScriptESBuildでビルドしてGoogle Cloud Functionで実行するまで作成日: 2020/06/23(火) 更新日: 2020/06/23(火) ハローワールド。 ESBuildはここ最近で注目されているバンドラー[1]の1つです。 Go製のバンドラーであり、特に高速であることを特徴にしています。上記Githubの公式ページから画像を引用しますが、他と比べると100倍以上のスピードでビルドされることがわかります。 2020/6/23の時点で「v0.5.11」と、まだ発展途上のライブラリですが、今回はGoogle Cloud FunctionでESBuildでビルドしたものを実行してみました。 セットアップ今回はESBuild × TypeScriptでやってみます。特に設定をせずともTypeScriptが動くのが嬉しいですね（とは言って
Github Actionsで簡単にPuppeteerを使えるaction-puppeteer-scriptを作りました - The Third Law
maku693です。 Github ActionsでPuppeteerを簡単に使えるCustom Actionを作りました。 github.com 最近Github Actions上でブラウザを動かしたくなったのですが、いちいち実行環境を整えるのも面倒なので、サクッとできないものかと調べたところ、意外とPuppeteerをそのまま使えるactionというのは存在しないようだったので、自分で作りました。 使い方はREADMEに書いてありますが、ここでも軽く紹介します。 以下のjobでは、ページのタイトルを取ってきて、それを後続のstepで利用しています。 - id: get-title uses: maku693/action-puppeteer-script@v0 with: script: | const page = await browser.newPage(); await pag
AWS Lambda FunctionをScala.jsで書いて爆速Scalaを満喫しよう - Lambdaカクテル
この記事は、Scala Advent Calendar 2023の5日目の記事です。 qiita.com 大遅刻してしまいましたが、Scalaは遅延評価できるのでモーマンタイですね。 この記事では、Scalaをクラウドネイティブな環境で使う例の紹介として、ScalaをJavaScriptコードにトランスパイルしてAWS Lambdaで動作させる方法を紹介します。 愉快な遠足の始まりだ!!! Scalaプラットフォームの発展 Scalaはクラウドネイティブ時代に乗り遅れている？(いえいえ) 想定環境 Scala.jsで快適にLambda関数を書いてみよう 最低限のScala.jsを実装する 設定 トランスパイル Scala.jsコードをLambda関数の呼び出し規約に合わせる 規約を実装する Lambda関数を作成する イベントなどの入力 ここまでのまとめ Scala.jsでライブラリを利用
Stream Node.js v0.10.28 Manual & Documentation
stream <Stream> | <ReadableStream> | <WritableStream> A readable and/or writable stream/webstream. options <Object> error <boolean> | <undefined> readable <boolean> | <undefined> writable <boolean> | <undefined> signal <AbortSignal> | <undefined> cleanup <boolean> | <undefined> If true, removes the listeners registered by this function before the promise is fulfilled. Default: false. Returns: <Pro
【受験生が作る】リアルタイム性を重視した新感覚チャットアプリ「のーろぐちゃっと」 | Next.js + WebSocket
きっかけ 受験勉強に疲れて開発に飢えていたその時、閃いてしまったのです、このアプリのアイデアを...！開発あんまめんどくなさそうだし作るっきゃねぇなという思いでサクっと作りました。 ちなみにというかタイトルに書いてますが自分は受験生です。この記事が公開される3日後ぐらいに共通テストを控えてます。ホントなにやってんでしょうね。 作ったもの 「のーろぐちゃっと」というリアルタイムチャットアプリを作りました！！ 普通のチャットアプリとは違ってログが直近3件までしか残らないという仕様で、リアルタイムさを追及した設計になっています。オープンチャットなので思いがけない人と会えるかも...？ 技術的な話 技術の選定 サクっと作りたかったのでフロントエンドは自分が慣れてるNext.jsで作りました。ただUIは目新しいのが好きなのでMantine UIを使って、React Contextがちょい使いづらかっ
刮目せよ!! 2023年秋、TS連携もファイルサイズもUIもイケるようになった最近のScala.js事情の紹介 - Lambdaカクテル
最近Scala.jsの話をすると結構な人がRTしてくれる。TypeScriptの他にAltJSには今どんなのがあるのかな、という話に引用RTでScala.js今アツいですよという話をしたら結構ウケた。世間的にはTypeScript alternativeに興味がある人も多いようだ。一方、ネットに残っているScala.js情報は数年前のものが多いようで、あまり積極的に日本語での情報発信がなされていない様子。そこで、ここ最近Scala.jsはどういう感じなのか、そしてどうすれば始められるのかという情報をまとめると需要があるかもしれないと思い、書くことにした。 Scala.jsは数年前まではオモチャみたいな感じだったんですが最近はTSのライブラリから自動で型が生える仕組みがあったりめちゃバンドル小さくなったりとめちゃくちゃ進化してます!! https://t.co/c06IZGWhYF— Win
なんでbun installは速いのか？
⚡️ 25x faster — Switch from npm install to bun install in any Node.js project to make your installations up to 25x faster. https://bun.sh/docs/cli/install という記述を見かけて直感的に、そうはならんやろと思ったものの実際にベンチマークをしているのでどういうことなのかを気になって調べた。 A global install cache. bun installを実行すると ~/.bun/install/cache/ 以下にnpmレジストリからダウンロードされたファイルの実体が展開されキャッシュされる(--cache-dirでパスを変更できる)。 キャッシュにはパッケージのバージョンごとのディレクトリとlatestのシンボリックリンクがある。こ
Scala.jsのFutureとPromiseを使ってみる | PABlog
TwitterGithubOld BlogScala.jsのFutureとPromiseを使ってみる 2014年03月07日Scala.jsFiddle というScala.jsをWebで編集して実行できるという面白いサイト最近できたのですが、 そのソースを見ていたらScala.js 0.3から入ったFutureとPromiseがわかりやすい形で使われていたので、その部分を取り出してちょっと使ってみることにしました。 今回作ったサンプルコードは以下にあります。 hexx/scala-js-future-example XMLHttpRequestをFutureでラップするというコードです。 サーバ サーバ側から見ますと、 // server/src/main/scala/Server.scala import unfiltered.request._ import unfiltered.re
Webpack の考え方について - mizchi's blog
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in
2018年の”JavaScript” 再入門/re-learning-about-js-in-2018
KMC春合宿2018での発表資料です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - imgly/background-removal-js: Remove backgrounds from images directly in the browser environment with ease and no additional costs or privacy concerns. Explore an interactive demo.
