GitHub - httptoolkit/mockrtc: Powerful friendly WebRTC mock peer & proxy
Let's write an automated test with MockRTC. To test WebRTC-based code, you will typically need to: Start a MockRTC mock session Define rules that match and mock the traffic you're interested in Create a WebRTC connection to a mock peer, by either: Using MockRTC's offer or answer directly. Applying the provided MockRTC.hookWebRTCConnection hook function to your RTC connection, and then connecting t
Node.js v18 の主な変更点 - 別にしんどくないブログ
Node.js v18がリリースされました 🎉 nodejs.org この記事では Node.js v18 の主な変更点を抜粋して紹介します！ fetch() がフラグ無しで実行可能に (experimental) HTTP requestTiemout()のデフォルト値の変更 node:test モジュール（テストランナー）の追加 (experimental) V8 アップデートによる新しい JavaScript の API の追加 Array#findLast(), Array#findLastIndex() Intl.supportedValuesOf() その他の改善 Web Streams API のグローバルへの追加、実行時の警告の削除 (experimental) まとめ fetch() がフラグ無しで実行可能に (experimental) github.com Node
GitHubのissueを編集するときの補完機能を実装した話
初めに 最近VimからGitHubのissueなどを扱うプラグインgh.vimをdenopsに移植していて、 前から実現したかったissue編集時の補完機能を実装したので、その話です。 デモ こんな感じで動きます。GitHubと比べると補完速度がちょっと遅いんですが、 GitHub上での編集では未公開のAPIを使っているため高速に動きます。 導入 denops-gh.vim以外にも次のプラグインをインストールする必要があります。 matsui54/denops-popup-preview.vim Shougo/ddc.vim 次に、vimrcに次の設定を追加します。これだけで補完が動くようになります。 augroup gh_autocmd au! autocmd User gh_open_issue call EnableAutoCompletion() augroup END funct
Deno v1.15で導入されたNode.js互換モードについて
2021/10/12にDeno v1.15がリリースされました。 この記事では、Deno v1.15で新しく導入されたNode.jsの互換モードについて解説します。 Node.jsの互換モードとは？ まず、以下のようなJavaScriptファイルがあったとします。 import { EventEmitter } from "events"; const emitter = new EventEmitter(); emitter.on("foo", () => console.log("foo")); emitter.emit("foo"); $ deno run main.mjs error: Relative import path "events" not prefixed with / or ./ or ../ from "file:///home/uki00a/ghq/github
Pure ESM package
esm-package.md Pure ESM package The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS. This means you have the following choices: Use ESM yourself. (preferred) Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide. If the package is used in
大規模 Closure Tools プロジェクトに Prettier を導入するまでの道のり - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームの鈴木(@__sosukesuzuki)です。 弊社のサービスである kintone では、コードのフォーマットを ESLint のみで行っているためプロジェクト内でコーディングスタイルを統一しきれていないという問題を抱えていました。 そこで opinionated なコードフォーマッター Prettier を導入し、コードベース全体でコーディングスタイルを統一するための支援をフロントエンドエキスパートチームで行いました。 2011 年にローンチされた kintone では、フロントエンドの大部分が Closure Tools を使って開発されています。Closure Tools は型の指定方法やクラスの定義方法などに独自システムを採用しており、現在の JavaScript のエコシステムや仕様と一部乖離しています。そのため、Prettier 本
pprof を使って nodejs アプリケーションのプロファイルを取る - その手の平は尻もつかめるさ
pprof って go のやつでしょ？ node のプロファイルが取れるわけ無いやろ，と僕も思っていたんですが以下のライブラリを使うことで取れることがわかりました． github.com 使い方については Using the Profiler に書いてあるとおりで，アプリケーション側に const profile = await pprof.time.profile({ durationMillis: 10000, // time in milliseconds for which to // collect profile. }); const buf = await pprof.encode(profile); fs.writeFile('wall.pb.gz', buf, (err) => { if (err) throw err; }); という風に書いてあげるとwall time
Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートの平野（@shisama_）です。 フロントエンドエキスパートチームでは業務時間の 30 % の時間で技術探究を行っています。 今回は探究した技術の中から Node.js の ES Modules（以下 ESM）についてと Dual Package (CommonJS/ES Modules) に対応した npm パッケージの開発について紹介します。 ES Modules の特徴 ESM はブラウザ互換 ESM は Strict モード ESM は非同期 ESM は静的解析可能 Node.js の ESM 対応について Dual Package（CJS/ESM）に対応した npm パッケージの開発 Conditional Exports によるファイルの指定 .mjs と .cjs require など CJS 特有の機能を使う ESMから CJS ファ
国税庁法人番号を使った経産省発、法人種別名の抽出コンポーネントのESモジュール版公開
ブラウザやDenoでサクッと動く、法人番号からの検索するESモジュールができました。 好評な経産省によるオープンソース「IMIコンポーネントツール」の7つ道具、一通りできました！ 「IMIコンポーネントツール」法人種別名の抽出コンポーネント追加(src on GitHub) サンプルとしていれている番号はどんな法人でしょう？ [変換]ボタンを押してみまてください。 使い方は簡単です。下記コードを main.html として保存して、ブラウザで開くだけ！ <script type="module"> import IMIEnrichmentHojin from "https://code4sabae.github.io/imi-enrichment-hojin-es/IMIEnrichmentHojin.mjs"; const main = async () => { const json
フロントエンド x RTC界隈の最近とこれから - console.lealog();
フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。 そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。 ちなみにここでいうフロントエンドは、いわゆるブラウザとかJavaScriptのAPIのことです。 プロトコル的な側面はそこまで詳しくないのであまり触れません。 WebRTC 1.0 GitHub - w3c/webrtc-pc: WebRTC 1.0 API まず、RTCといえばズバリのWebRTCから。 昨年末にWDからCRへ格上げということで、もうAPIが激変したりはしない・・はず。 実際のところ、ここ半年くらい大きな対応した覚えがないです。（WebRTCそのものを実装してる人は、地味にいろいろ対応してると思うけど） ガワのAPIという観点でいうと、最近はも
React で簡単に遅延読み込みを実装できるライブラリを作りました - 陽気なサイとエクストリーム！
はじめに どうも、さぃと (@saitoeku3) です。 突然ですが、あなたは自作のライブラリを公開したことがありますか？ 僕は公開したいと思いつつもなかなかできずに年を越してしまいそうだったので、思い切って公開しちゃいました。 ネタは最近よく使っている遅延読み込みと Gatsby.js + Contentful 関連の2つあったのですが、今回は前者の方です。(後者もそのうち公開します) 作ったもの github.com 返り値の ref を任意のエレメントの ref に渡すだけで遅延読み込みをしてくれるカスタムフックを利用できるライブラリです。React での使用を想定しています。 今までにもいくつか遅延読み込みをしてくれるライブラリはあったのですが、コンポーネントベースで利用するものが多くて使いづらかったという問題を解決しています。(強引な押し売り) 特に差別化できると思っているのは
Universal Data Fetch ライブラリ、 Specter の紹介 - from scratch
この記事は Recruit Engineers Advent Calendar 2019 の 16日目の記事です。 adventar.org 最近僕が作っている OSS である Specter の話をします。 github.com Specter とは Client から Backend と BFF から Backend への Universal なデータフェッチを提供してくれるためのツールです。以下の特徴を持ちます。 軽量 TypeScript Freindly な型付け機能 投機的先読み 2年ほど前に報告されたCPUの投機的実行に基づく脆弱性である、 Spectre から来ています。と言っても、脆弱性の名前ではありません。投機的先読みを機能として持っているため、この名前をつけています（不吉な名前ではありますが・・・）。 まずは、 GraphQL でも grpc-web でもなく、なぜこ
SPA + SSR + PWA の作り方とセキュリティについて - hiroppy's site
<script nonce="xxxxx" id="initial-data" type="text/plain" data-json="${preloadedState}" ></script> このpreloadedStateはエスケープ処理が必要なので注意してください。 クライアント側の読み込み方 const initialData = JSON.parse( document.getElementById("initial-data")!.getAttribute("data-json")!, ); const { store } = configureStore(initialData); https://github.com/hiroppy/ssr-sample/blob/master/src/client/index.tsx#L21-L22 useEffect SSR では、
JWTライブラリの危機的な脆弱性について調べた - Qiita
JWT 脆弱性 で検索すると 【翻訳】JSON Web Tokenライブラリの危機的な脆弱性 って記事(4年ぐらい前の記事)が出てきて読んでいたのですが、よくわからなかったので手を動かしながら調べてみました。 ※ 翻訳の元記事はこちら node-jsonwebtoken, pyjwt, namshi/jose, php-jwt, jsjwtを非対称の鍵(RS256, RS384, RS512, ES256, ES384, ES512)で使っている場合、最新のバージョンに更新してください。 とのことなので、バージョン更新で直ったようなので修正を読んでいきます。 また、 js を利用して開発する機会が多いので node-jsonwebtoken の修正を確認してみます。 確認したコードは下記にあります。 https://github.com/OshiroSeiya/jsonwebtoken-a
README.mdに動的コンテンツを埋め込む、あるいはImage via Functionというアプローチ - 余白
突然ですが、 README.md に動的なコンテンツを埋め込みたいと思ったことはないですか？僕はあります。 具体的には、リポジトリのコントリビューターをREADME.mdに埋め込みたいという願望がありました。 つまりこういうことです。 しかし毎回CIなどでREADME.mdを編集するのはセットアップが面倒です。 <contributors-list> みたいなCustom Elementsが使えたらきれいな世界だなあと思ったのですが、肝心のscriptタグが動かないのでそれは無理です。 ということで、頼れるのは 画像 ということになりました。 Image via Function README.mdに埋め込めて、なおかつ動的なコンテンツを扱えるのは画像のURL展開だけなので、つまりコントリビューターリストを画像化するHTTPエンドポイントを用意し、そのURLをREADME.mdに埋め込めば
Haskellの型クラスについて | mrsekutの備忘録
NewsLearn more about the company, PR and product updates here.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
monorepo-utils/packages/@monorepo-utils/workspaces-to-typescript-project-references at master · azu/monorepo-utils
GitHub - based-ghost/react-functional-select: Micro-sized & micro-optimized select component for React.js
Nondestructive_TypeScript.md
npmのprivate registryからGitHub Packages Registryに移行する