Generating an EPUB File in the Browser
I’ve been meaning to blog about a few aspects of how I built my tool Readlists and I finally have the time to do it. So here we go. Readlists is a purely client-side app, i.e. JavaScript required. That’s something I might change in the future as I dabble in how to host and maintain a website with a server, but for now purely client-side is the way it works (because that’s the way I knew how to bui
雰囲気でパッケージマネージャーを作ろう
概要 本記事では、 npm や yarn などの、Node.js におけるパッケージマネージャーを自作することで、その仕組みや挙動の理解を深めようという取り組みを整理した記事になります。 想定読者は以下を満たす人です。 普段 npm や yarn などのパッケージマネージャを使用している package.json 内の dependencies devDependencies ぐらいはわかる npm リポジトリの構成や、パッケージインストールの仕組みとか全然わからんけど、興味がないこともない TypeScript のコードをまぁまぁ読み書きできる 筆者自身も上記のレベルのため、パッケージマネージャに詳しい方が見たら鼻で笑うレベルの内容でもあるので、どうぞお手柔らかにお願いします。 注意事項 本記事ではソースコードを断片的に記載していますが、ハンズオン形式にはなっていないため、コードの全容に
Implementing Promisable setTimeout - Dmitry Kudryavtsev
In a world controlled by the event loop, setTimeout is the king of execution control. It allows you to schedule function calls to be executed later. However, it can’t do one thing - suspend the execution for a certain amount of time. Think of an equivalent to sleep(ms) from different languages. Let us now explore how we can implement it. Promisifying setTimeout In order to make setTimeout behave s
Things not available when someone blocks all cookies
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
Will Bun JavaScript Take Node's Crown
Huge thanks to Jarred Sumner for reviewing this post. It wouldn’t have been possible without his help. Bun is a new and ambitious JavaScript toolset and runtime. Early adopters have been reporting that Bun JavaScript is incredibly fast. So fast that it has been touted by some as a Node.js killer. Curious, I decided to check out Bun for myself and benchmark it against the competition. Is it as fast
Checking if a JavaScript native function is monkey patched
TL;DR: How can you determine whether a JavaScript native function was overridden? You can't — or at least not reliably. There are ways to get close to it, but you can't fully trust them. Native functions in JavaScript In JavaScript, a "native function" is a function whose source code has been compiled into native machine code. Native functions can be found in JavaScript's standard built-in objects
Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる(実践編)
Lexical で簡単なリッチテキストエディターを作ってみよう Lexical は Meta が開発したリッチテキストエディターフレームワークです。以前 Lexical のアーキテクチャを調べてまとめた記事を執筆したので、概要や設計についてはそちらをご覧ください。 Lexical のコアライブラリは EditorState の差分から最も効率のいい方法で DOM を更新する Reconciler がメインで、エディターの機能やビューはプラグインという形で各々実装する必要があります。 ただ、コアライブラリだけ提供しても使う側が戸惑ってしまうので、すでに多くの公式プラグインが同じリポジトリで提供されています。 そして注目すべきは Playground の充実度です。 もはや Playground をそのまま使っても十分なほど多機能なエディターが実装されています。もちろんソースコードは同じリポジ
Everything You Need to Know About JavaScript Import Maps
Everything You Need to Know About JavaScript Import Maps By Ayooluwa Isaiah on Jul 25, 2022 When ES modules was first introduced in ECMAScript 2015 as a way to standardize module systems in JavaScript, it was implemented by mandating the specification of a relative or absolute path in import statements. import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7"; // ES modules console.log(dayjs("2019
爆速のアイコン検索サイトを作った
爆速のアイコン検索サイトを作ったので、遊んでみてください。 (1) まずは自分が使いやすいアイコン検索サイトを作りたかったので作りました。(2) 様々なアイコンを爆速で横断検索し、サクッとアイコンをコピーできるようにしました。単純ながら意外とその部分が面倒なサイトは多い気がします。(3) また応用とメンテがしやすい実装にして、非常にサポート範囲の広い DB を GitHub Pages 上で構築しました。公開時点では 120+ のアイコンセットと、130,000+ のアイコンをサポートしており、サポート数も観測範囲では No.1 です。 開発動機 アプリ/サイト開発ではまずお世話になるであろうアイコン。私はこれまで Material Icons と Bootstrap Icons ばかり使っていました。これは検索が面倒だったからです。検索が面倒だと知名度の高いものだけに閉じてしまうので、良
Retry XMLHttpRequest Carefully
Aaron D. Parks June 28, 2022 Share: Twitter Reddit Facebook Linkedin Telegram It's rare to see a web app that doesn't use XMLHttpRequest (or fetch, the new API with comparable capability). XMLHttpRequest (which we can call XHR if you're into the whole brevity thing) is as handy as a shirt pocket, but it doesn't do much to encourage robust and resilient programming practices. Any app that runs in t
応答性を示す新しい指標「INP」 | フロントエンドBlog | ミツエーリンクス
ユーザーの直帰率や離脱率とパフォーマンスの関係から、コンテンツを表示する速度や応答性（ページがユーザー入力に応答する速度）がいかに重要であるかは、既によく知られるようになってきています。 ではコンテンツを表示する速度や応答性を上げるにはどうしたらいいでしょう。 結論から述べるとパフォーマンスを客観的な指標に基づいて正確かつ定量的に測定し、そこから課題を見つけて解決することが必要になります。 GoogleはChrome User Experience Reportに新しく応答性指標INPを導入しました。 INPとは INP（Interaction to Next Paint）は、ページの読み込みを開始してからユーザーがページを離れるまでの間に発生するユーザー入力の応答性（インタラクション）を評価する測定基準で、遅延時間を計測します。 計測対象のインタラクションは、以下となります。 ユーザー入
jestでDBありのテストを高速化する
課題link お手伝いしているシステムでNestJSを採用しているバックエンドのテストが遅いという課題があったので対処した。 前提link フレームワークDBテストランナーその他 テストの総数は700弱。 最終結果link 最終的には2段階の改修を経てローカルのテストが3倍速程度高速化した。 # before Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 total Snapshots: 0 total Time: 925.063 s Ran all test suites. Done in 926.48s. # ts-jestを@swc/jestに置き換えた Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 t
Faster JavaScript Builds with Metro
How Airbnb migrated from Webpack to Metro and made the development feedback loop nearly instantaneous, the largest production build 50% faster, with marginal end-user runtime improvements. By: Rae Liu IntroductionIn 2018, the frontend Airbnb infrastructure relied on Webpack for JavaScript bundling which had served us well up until then; however, with our codebase almost having quadrupled in the pr
Using JavaScript to fill localStorage to its maximum capacity
Using JavaScript to fill localStorage to its maximum capacity Earlier this week, I had to test how one web app I work on behaves when it tries to store some data in an already full localStorage. To do so, I wanted to find a way to programmatically fill localStorage to its maximum capacity using JavaScript. Knowing that the only way to detect when the localStorage is full is catching the QuotaExcee
Zhenghao's site
When You Should Prefer Map Over Object In JavaScript#javascript See discussions on reddit In JavaScript, objects are handy. They allow us to easily group multiple pieces of data together. After ES6, we got a new addition to the language - Map. In a lot of aspects, it seems like a more capable Object with a somewhat clumsy interface. However, most people still reach for objects when they need a has
AbortController is your friend
AbortController is your friend One of my favorite new features of JS is the humble AbortController, and its AbortSignal. It enables some new development patterns, which I'll cover below, but first: the canonical demo. It's to use AbortController to provide a fetch() you can abort early: Sorry, your browser doesn't support an inline demo. And here's a simplified version of the demo's code: fetchBut
Lerna 5.1 — New website, new guides, new Lerna example repo, distributed caching support and speed!
Almost exactly a month ago we (Nrwl & the Nx team) took over stewardship of Lerna. It has been a wild ride since then 🤯. We.. made ourselves familiar with the codebase, improved local development and releases for testing with Verdaccio, started setting up e2e tests and tons of more improvements to the development processreleased Lerna 5.0 a couple of weeks later, with some important deprecated pa
JavaScript のメディアタイプと RFC 9239 | blog.jxck.io
Intro 長いこと作業が行われていた JavaScript の MIME タイプについての作業が完了し、RFC 9239 として公開された。 これにより、推奨される MIME タイプが text/javascript に統一されることになった。 かつて推奨されていた application/javascript ではなくなった経緯などを踏まえ、解説する。 JavaScript MIME Types HTTP で Response する際に指定する Content-Type は、その内容がなんであるかを Client に Indicate し、適切な処理を促すために使用される。 例えば HTML が text/html であったりするように、JS も内容はテキストなので text/javascript が自然に思える。 しかし、例えば MS が実装していた JS 互換の JScript は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Font Family and @supports
SpiderMonkey Newsletter (Firefox 104-105)