どこでも動くWebフレームワークをつくるYAPC::Kyoto 2023 2023-03-19 Yusuke Wada
Nx と Turborepo の比較
Nx と Turborepo の比較 ※この記事はNx and Turborepoの日本語訳です。 Turborepo は、2021年12月にリリースされたばかりのビルドツールです。Nxから多くのアイデアを拝借しているため、当然ながら Nx と Turborepo を比較する人もいます。このドキュメントでは、Turborepo がどのようなものであるかを説明します。 Nx と Turborepo の関係は、Nx と Yarn ワークスペースや Lerna の関係と同じではありません。Nx と Yarn ワークスペースは補完的な関係にあり、状況によっては両方を使用することは理にかなっています。(現時点では)Turborepo は Nx のサブセットであり、両方を使う意味はないと考えています。 私たちは公平になるように最善を尽くしますが、もちろん、お客様ご自身で調査していただく必要があります。
【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法 – webfrontend.ninja
オーディオの自動再生に大きな制約があるといえば、以前は iOS Safari に限った話でした。しかし、現在は PC も含め、あらゆるブラウザーでオーディオの自動再生に大きな制約があります。もし再生できたとしても、次に立ちはだかるのが再生開始遅延です。とりわけスマートフォンでタップ音や通知音を再生したい場合は違和感を感じてしまいます。 今回は、HTML マークアップおよび JavaScript によるオーディオ自動再生にどのような制約があるのか、その制約をどう解決するのか、そして、再生開始遅延を解消する方法について、詳しく見ていきます。 Chrome の自動再生ポリシー オーディオの自動再生ができないという制約は、当初は iOS Safari に限った話でした。ところが、Google が自動再生ポリシーを発表してから、メジャーブラウザーすべてがそれに従うようになりました。英語ですが「Aut
無音を鳴らして自動再生ポリシーをアンロックする - console.lealog();
Safariなどのブラウザには、音の自動再生に制限があって、ロード時にいきなり再生！というのがだいたいできない時代。（この制限にはいろいろ条件があるけども） そのため、「このサイトでは音が出ます」みたいなモーダルを出して、まずそれをクリックしてもらい、そのタイミングでこの制限を突破するために一手間かけるということが行われてきた。 で、そのひと手間で盛大に音を鳴らすわけにはいかないので、無音を鳴らすという半ばハック的な方法があるのである。 その無音の鳴らし方を毎回思い出すのが大変なので、いい加減メモっておく。 HTMLAudio const $audio = new Audio(); $audio.src = "/sound-of-silence.mp3"; $audio.play(); ここでアンロックした`audio`要素を使い続けることが重要で、Reactとかでイミュータブルにやるとな
Auth.js | Authentication for the Web
// auth.ts import NextAuth from "next-auth" import GitHub from "next-auth/providers/github" export const { auth, handlers } = NextAuth({ providers: [GitHub] }) // proxy.ts export { auth as proxy } from "@/auth" // app/api/auth/[...nextauth]/route.ts import { handlers } from "@/auth" export const { GET, POST } = handlers // src/auth.ts import { SvelteKitAuth } from "@auth/sveltekit" import GitHub f
Astro 1.0 | Astro
We are thrilled to announce Astro v1.0: a web framework for building fast, content-focused websites. Over the last 16 months, Astro has grown from an empty repo to over 13,000 stars on GitHub and 30,000 early users around the world. The Astro documentation has been translated into 6 different languages, and Astro has already been deployed at amazing companies such as Firebase (Google), Trivago, Th
Node.jsのツールで--cacheフラグを実装するためのライブラリを書いた
ESLint、Prettierなどは--cacheフラグという一度チェックしたファイルは、ファイルが変更されるまで再チェックしないキャッシュの仕組みを実装しています。 同様の仕組みをtextlintを実装したことはありますが、file-entry-cacheを使い結構煩雑な実装が必要になります。ファイル変更を元に処理結果をキャッシュする仕組みはある程度定型化されているのに、毎回同じような実装をツールごとに書くのは微妙だなと思ったので、ライブラリを書きました。 azu/file-cache: Node.js library that provide a cache for file metadata or file content. --cacheフラグの仕組み --cacheフラグの仕組みとしては、ファイルの内容のハッシュ値 or ファイルの更新時刻をキャッシュファイルとして保存して置きま
Storybook が 7.0 で複数のフロントエンドフレームワークを持つ monorepo で使いやすくなる
はじめに この記事を書いている時点で 7.0 は alpha だが、触る機会があったので知ったことを書こうと思う。 一応 7.0 用のドキュメントページはあるけど、まだドキュメントの更新はされていないので役に立たないと思って良い (alpha なので当然)。 6.5 からの変更点を知るにはマイグレーションガイドが役に立つ。 Storybook 6.x までで使いにくかった点 以下のような構成の monorepo 考える。 それぞれのサブパッケージに @storybook/vue3 や @storybook/react をインストールすることになる。 ここで、build-storybook や start-storybook コマンドを使いたいのだがうまくいかない。 例えば、vue パッケージで start-storybook コマンドを実行しても react 用の storybook が起
SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
【Next.js】Jestで環境変数を利用する場合の各種設定
Jestで環境変数を利用したテストを書く際に、spec内でprocess.env.NEXT...のように書くことはできない為、調べていたところ 上記記事を見つけたため、日本語に訳しながら手順を備忘録的に残す。 1 setupEnv.tsを__tests__ディレクトリに作成する setupEnv.ts import { loadEnvConfig } from '@next/env' export default async (): Promise<void> => { const projectDir = process.cwd() loadEnvConfig(projectDir) } @next/envはNextに内包されている為、新たにライブラリを加える必要はない setpEnv.tsやテストディレクトリ名は他の命名でもよい 2 jest.config.jsにglobalSetup
autoComplete.js - Vanilla Javascript library
Simple autocomplete pure vanilla Javascript library. Zero dependencies. Designed for speed, high versatility, and seamless integration.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Eonasdan/tempus-dominus: This project is no longer active or supported.
GitHub - secretlint/secretlint: Pluggable linting tool to prevent committing credential.
GitHub - nachoaldamav/ultra: JavaScript package manager
GitHub - sverweij/dependency-cruiser: Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.
GitHub - teramako/iter.deno: Deno module creates extended Generator is method chainable
GitHub - terrierscript/historykana: Japanese furigana library
GitHub - hakatashi/japanese.js: Util collection for Japanese text processing. Hiraganize, Katakanize, and Romanize.
GitHub - ryo-utsunomiya/vanilla-autokana: A Vanilla-JavaScript library to complete furigana automatically.
GitHub - Jarred-Sumner/bun: Bun JS app doing basically nothing
