Headless components in React and why I stopped using a UI library for our design system
In the past five years I’v been working on major frontend projects at Gloat. In this blog post I’ll focus on what I learned when building Gloat’s design system and how I moved from using UI libraries like MUI to using headless components. When building our design system, I had to answer these requirements: Accessibility: the components must be accessible.Theming: each component should support mult
Webフロントエンドパフォーマンスチューニング85選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
GitHub - ianstormtaylor/slate: A completely customizable framework for building rich text editors. (Currently in beta.)
A completely customizable framework for building rich text editors. Why? · Principles · Demo · Examples · Documentation · Contributing! Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity. It can do this because all of its logic is implemented wi
GitHub - inokawa/rich-textarea: A small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.
Styleable texts: Not just highlighting texts like similar libraries, this library also supports colorizing, decorating and more. Regex or any tokenizers can be used. Easy to interact with events: You can get caret position and can catch some mouse events on texts, which are useful to display something reflects user actions. Compatible with textarea: Except added features, this library is designed
V8 Internals: How Small is a “Small Integer?”
This article is available in Chinese. V8 is Google’s open source JavaScript engine. Chrome, Node.js, and many other applications embed V8. If you have heard any talks about V8 or read any blogposts, you have surely heard about Smis, small integers. This article digs into V8’s source code to discover how large Smis actually are. JavaScript, by specification, does not know about integers (with the e
Diving Deeper in JavaScripts Objects
JavaScript objects pack more things than their terse and concise syntax would naturally exhibit. Creating and using objects in JavaScript is so easy, effortless, and so flexible that a lot of developers never realize that there is more to it. We Need to Go DeeperWe are going to uncover some of the hidden layers and understand the intricacies of JavaScript objects. After reading this article, you s
GitHub - neomjs/neo: Neo.mjs is a self-evolving software organism: a professional end-to-end AI engineering team whose cross-model swarm inhabits live apps via Neural Link, Active Hybrid GraphRAG, DreamService, and self-healing loops.
Neo.mjs is a professional, end-to-end AI engineering team that lives in its own open-source repository. ▶ Watch Neo.mjs — Agent Fleet Manager Where the industry runs one AI agent and gets slop, Neo.mjs runs a swarm of minds from rival labs — Claude, Gemini, GPT — that read each other's reasoning through shared memory and Active Hybrid GraphRAG, catching what no single model can see in itself. Thro
GitHub - teadjs/tead: Lighting the way to simpler testing
In a world full of complex test-runners, Tead dares to keep it simple. Tests are defined as plain JavaScript objects. The only test assertion supported is a basic form of deep equals. Mocks/fakes/spies will never be provided. Asynchronous tests are not possible. These are all very intentional key features. The boilerplate and global nastiness of functions such as describe/beforeEach/beforeAll/afte
How Prime Video updates its app for more than 8,000 device types
At Prime Video, we’re delivering content to millions of customers on more than 8,000 device types, such as gaming consoles, TVs, set-top boxes, and USB-powered streaming sticks. When we want to do an update, every one of those devices requires a separate native release, posing a difficult trade-off between updatability and performance. In the past year, we’ve been using WebAssembly (Wasm), a frame
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
Raspberry Pi PicoをJavaScriptで制御できるWeb開発環境「Kaluma」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、Raspberry Pi Picoを純粋なJavaScriptで制御可能な無料のWebサービスをご紹介します。 OSやデバイスを問わずRaspberry Pi PicoをUSBに挿すだけで、あとはブラウザから専用のWebエディタにアクセスしてプログラミングできるのが大きな特徴です（Chromebookからも利用可能）。 Raspberry Pi Picoは、一般的にC/C++かPythonでの開発が主流なのですが、今回ご紹介するサービスを活用すればJavaScriptをフルに活用できるのでご興味ある方はぜひ参考にしてください。 【 Kaluma 】 ■「Kaluma」の使い方 それでは、「Kaluma」をどのように使えばいいのか詳しく見ていきましょう！ 「Kaluma」は、簡単に言うとマイコン向けのJavaScriptランタイムを提供す
JS Self-Profiling API In Practice
Nic Jansma (@nicj) is a software developer at Akamai building high-performance websites, apps and open-source tools. Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Profile Beaconing Size Comp
2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
Managing State in Angular Applications
Victor Savkin is a co-founder of Nrwl. We help companies develop like Google since 2016. We provide consulting, engineering and tools. Managing state is a hard problem. We need to coordinate multiple backends, web workers, and UI components, all of which update the state concurrently. Patterns like Redux make some of this coordination explicit, but they don’t solve the problem completely. It is mu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Minze
GitHub - pillarjs/routington: Trie-based URL Routing
JonScript: a better JavaScript
GitHub - 101arrowz/fflate: High performance (de)compression in an 8kB package
GitHub - okwolf/hyperapp-freeze: Deep-freeze your Hyperapp state to keep you honest about immutability
Structure and Interpretation of Computer Programs
