［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始
JSer.info #683 - Parcel v2.12.0がリリースされました。 Parcel v2.12.0 Bunと同様の仕組みとして、Import Attributesを使ったmacroに対応しています。 JavaScript Macros in Bun | Bun Blog ブラウザ上で動作するREPLを公開、bundleにもLightning CSSを使うように変更されています。 その他にはメモリ使用量を52%改善、書き込みのパフォーマンスの改善なども行われています。 先週の記事で polyfill.io がFunnull CDN(方能CDN)を運営するFunnull(南京妙彩文化传播有限公司)に買収されたことをお伝えしました。 その後、FastlyやCloudflare(cdnjs)が polyfill.io の代用サービスとして、https://polyfill-fast
JavaScriptランタイム最新動向（Node.js vs Deno vs Bun） - Activ8 Tech Blog
こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 2023年9月にJavaScript RuntimeのBunが、バージョン1.0をリリースしました。 bun.sh JavaScriptランタイムといえばNode.jsですが、DenoやBunとの違いは何か。 自分は恥ずかしながら、最近、Deno、Bunという新しいJavaScriptランタイムがあるということを知り、この際学び直しをしました。 JavaScriptランタイムってなんだ？DenoやBunってなんだ？っていう初心者向けの記事となります。 ランタイムとは そもそもJavaScriptランタイムのランタイムとは何か。 実行すること、実行時に必要な部品。 実行環境と表現されたりします。 つまり、JavaScriptランタイムとはJavaScriptを実行する環境のことを意味し、主にサーバサイドのプログラムが
Node.js で X（Twitter）、Bluesky、Mastodon に JSON データから同時投稿（クロスポスト）する
Node.js で X（Twitter）、Bluesky、Mastodon に JSON データから同時投稿（クロスポスト）する JSON データから X（Twitter）、Bluesky、Mastodon などの SNS にクロスポストする JavaScript（Node.js）を書いてみたので GitHub で公開しました。 私事ながら、現状、SNS としては X （旧 Twitter）、Bluesky、Mastodon を日常的に使っていて （Threads と Nostr も使っていますが特に Threads は放置気味......）、全部じゃないにしても、一部の投稿については、これらすべてのサービスに同時投稿したいなと、なんとなく思っていました。 巷にはそういう Web サービスも探せばあるとは思うんですが、なるべく自前でやろうということで、週末に思い立って手を付けたら見事に週末
Deno、モダンなJavaScript/TypeScriptに最適化したパッケージレジストリ「JSR」パブリックベータ公開。Node.js、Bun、Cloudflareなどにも対応
JavaScript/TypeScriptランタイムの「Deno」を開発提供しているDeno Land Inc.は、モダンなJavaScriptおよびTypeScriptに最適化した新しいパッケージレジストリ「JSR」をパブリックベータとして公開しました。 現在、JavaScriptのパッケージレジストリは、Node.js用に構築され、GitHubが運営するnpm（Node Pacage Manager）が事実上の標準となっています。 参考：GitHubがnpmの買収を発表、JavaScriptのパッケージ管理サービス。将来的にはGitHubとnpmを統合へ npmにはさまざまな機能を備えたパッケージモジュールが大量に登録されており、この豊富なパッケージモジュールの存在がNode.jsの大きな利点となっています。そのため、現在ではDeno、Bun、Cloudflare Workersなど後
はじめてのインタープリター
インタープリターを書いたことがない方向けに、四則演算といった簡単なものから始め、少しずつ機能を足しながら言語を拡張していくような本です。
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
GitHub - wxt-dev/wxt: ⚡ Next-gen Web Extension Framework
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Recursion Viewer
Website for visualizing recursive functions. Helps to debug and understand how your recursive algorithm works
GitHub - TanStack/time: 🤖⏰ Headless utilities for building time and calendar components in TS/JS, React, Solid, Vue, Svelte and Angular
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
うるう日にしか発生しないバグ
Freshハンズオン 初級編
ハンズオン用の記事です。随時修正・アップデートされます。 対象レベルは「少々JavaScriptが書ける」初心者向けです。中級編はこちら 色々端折るために拡張機能をインストールします。Next.jsなどに親しんでフロントエンドをバリバリやっている方には冗長な説明が多いと思います。上級者は公式ドキュメントを全部読み込むことをおすすめします。 Freshの特徴 Freshはシンプルさと速度、信頼性に重点を置いたDeno用のWebフレームワークです。 特徴としては「サーバサイドレンダリング」を基礎に下記の特徴を備えています。 必要がない限りゼロJavaScript 基本的にすべてTypeScript ビルドステップなし（条件あり） この結果、型の恩恵を受けながら、極力軽量な構成でWebアプリケーションを作ることができます。 ゼロJavaScript FreshはIsland architectu
Modules are published to JSR as TypeScript source code. API documentation generation, type declarations for Node-like environments, and transpilation are all handled by JSR. Module authors can focus on writing TypeScript only. Read on for more context on how and why we built JSR, how you can use it today, and how you can be involved in the project! Introducing JSR - the slightly longer versionJava
polyfill.io now available on cdnjs: reduce your supply chain risk | The Cloudflare Blog
polyfill.io now available on cdnjs: reduce your supply chain risk02/29/2024 Polyfill.io is a popular JavaScript library that nullifies differences across old browser versions. These differences often take up substantial development time. It does this by adding support for modern functions (via polyfilling), ultimately letting developers work against a uniform environment simplifying development. T
Polyfill is a popular tool for enhancing browser capabilities. Many users access it by linking to the polyfill.io service, which has recently changed ownership to a new party. In order to ensure that everyone can maintain reliable and trusted access to Polyfill features, we have identified a few alternatives: First, Fastly is offering polyfill-fastly.net and polyfill-fastly.io as a free, drop-in r
React 19に入る(予定の)新機能のまとめ
はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、新規機能実装などに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか なぜ移行
垂直スケーラビリティと効果的なテストによる金融取引システムのパフォーマンスと効率の最大化 Peter Lawrey氏はJavaチャンピオンであり、Chronicle SoftwareのCEOとして、開発者を鼓舞してソリューションのクラフトマンシップを高めることに情熱を注いでいる。経験豊富なソフトウェアエンジニアとして、Lawrey氏はソフトウェア開発プロセスにおけるシンプルさ、パフォーマンス、創造性、革新性を奨励することに努めている。
という構成を手軽に作れるようになっていて便利でした これを軸に素のReact APIを触って遊ぶ環境が作れそうです(Server APIもworkerdで動く範囲なら使えるかも?) とりあえず以下のソースコードでデプロイまでできるかを試しました プロジェクトのベースはnpm create hono@latestで作りました DEMO: https://hono-spa-react.pages.dev/ react react-dom @vitejs/plugin-react-swc をnpm installしています デバッグ しかしこの構成だと@hono/vite-dev-serverによるvite devは実行時エラーになり動きません(!) react-dom_client.js?v=f8955f15:11222 Uncaught Error: Objects are not vali
HonoでAPI付き雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
WebAssemblyを利用してJavaScriptアプリケーションのパフォーマンスを向上させる方法 - Qiita
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
Shadow DOMとCSSの現状
2024-02-27 DOMDOMトークス #1
GitHub - rohitdhas/shittier: Shittier is an unconventional code formatting tool
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
JSer.info #682 - Firefox 123がリリースされました。 Firefox 123.0, See All New Features, Updates and Fixes Firefox 123 for developers - Mozilla | MDN <template>要素がshadowrootmode属性をサポート、Date.parse()の互換性向上、103 Early Hintsのrel=preloadをサポートなどが含まれています。 また、実験的な機能としてWeb Codecs APIをサポートが追加されています。 Remix 2.7がリリースされました。 Remix Vite is Now Stable | Remix Remix 2.7ではSPAモードがStableに、baseオプションのサポート、Remix ViteがCloudflare Pages
Using localStorage in Modern Applications: A Comprehensive Guide When it comes to client-side storage in web applications, the localStorage API stands out as a simple and widely supported solution. It allows developers to store key-value pairs directly in a user's browser. In this article, we will explore the various aspects of the localStorage API, its advantages, limitations, and alternative sto
Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
npxを使って一時的に特定バージョンのnodeとnpmで「npm install」する｜TechRacho by BPS株式会社
小ネタです、タイトルにはnpm installと書きましたがもちろんnpm startなどにも使えます。 TL;DR npx --package=node@16.20.2 --package=npm@8.19.4 -- npm install 説明 最近はNodeインストール時にデフォルトで一緒にインストールされるnpx、これは例えば npx create-next-app@latest （https://nextjs.org/docs/app/api-reference/create-next-appより など、その場で手軽にnodeパッケージを実行する時に使われたりします。 ところでこのnpxは実行したいコマンドのパッケージのバージョンを指定するオプションがありますが、さらに 実行したいコマンドと別にパッケージのバージョンを指定できる、しかも--packageの書式なら複数OK という
TypeScriptの代数的部分型模型
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
4. ジェネリクス PHP 8.2 では、ジェネリクスのサポートが導入されました。 ジェネリクスを使用すると、コードの再利用性が向上し、型安全性も確保されます。 interface Collection<T> { public function add(T $item): void; public function get(int $index): T; } class StringCollection implements Collection<string> { // ... } $stringCollection = new StringCollection(); $stringCollection->add("Hello"); $stringCollection->add(123); // エラー：string 型が期待されています この注釈、詳細ページには一切記述されていないため
GitHub - unadlib/mutability: A JavaScript library for transactional mutable updates
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
新たなJavaScript日付操作ライブラリ「Tempo」登場 ー ネイティブなDateと直接連携、小さく、速く、使いやすく
CloudFront FunctionsをテストするOSS、cfftを公開しました - KAYAC engineers' blog
SREチームの藤原です。 今回は Amazon CloudFront Functions をテストするためのOSSとして、cfft というものを書いたので紹介します。 github.com 3行でまとめ CloudFront Functionsのテストは手元ではできなくて面倒です CloudFront Functionsをテストする cfft というOSSを書きました KeyValueStoreの操作を含め、便利な使い方がいろいろありますのでどうぞご利用下さい CloudFront Functionsをテストするのが面倒という問題 CloudFront Functions (以下CFF) は、AWSが提供するCDNであるAmazon CloudFrontのエッジノード上でリクエストやレスポンスの操作が行える、JavaScriptの実行環境です。典型的なユースケースとしては、キャッシュキーの
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
As web development has embraced static typing during the past decade, TypeScript has become the default language of choice. I think this is great—I love working with TypeScript! But what if you can't use TypeScript? You may encounter circumstances where you need to work in plain JavaScript, be it tooling constraints or a team member who does not like static typing. Under these circumstances, look
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024-03-05のJS: Parcel v2.12.0、`polyfill.io`の代用、express 4.18.3
【jQuery】jQuery4.0.0の変更点紹介 - Qiita
Introducing JSR - the JavaScript Registry
New options for Polyfill.io users
フロントエンドのディレクトリ設計を移行した話 | Atomic Design → Feature
AWS、より高速で効率的なサーバーレスアプリのための低レイテンシーランタイムを実験的に導入
HonoでAPIだけ作って素のReact DOMでSPAを書くアーキテクチャ
雑にReactアプリを作りたい時に使ってるもの
2024-02-27のJS: Firefox 123、Remix 2.7.0(Remix Vite is Stable)、2023年のNode.jsまとめ
Using localStorage in Modern Applications - A Comprehensive Guide | RxDB - JavaScript Database
Polyfill .ioが中国企業に売却 背景と対応策は？ - ろぼいんブログ
【徹底比較】Vue.js と React でレンダリングされる値、されない値
【PHP8.2】PHP8.2でジェネリクスが導入された - Qiita
Bun v1.0.29リリース ー bun:testに新たなマッチャーが追加、シェルのリダイレクトサポート
You Don't Need Next.js | ドクセル
JSDoc as an alternative TypeScript syntax