In order to knit a new scarf using this software: Load it from Github pages: https://alefore.github.io/knit/ Optionally, save a local copy. I recommend using a local copy as a way to freeze the version you're working on. I may change the implementation. Make sure all files (including the JavaScript logic) are saved and loaded from your copy (rather than just the index.html entry point). Optionally
React 19 Beta の公開など : Cybozu Frontend Weekly (2024-05-07号)
こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 5 月 7 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 React の fetch() 拡張が削除 React に標準で含まれていた fetch() に対するパッチが削除されました。 一方で、Next.js では同様の対応を別のパッチとして取りこむことで従来通りの挙動を維持するようです。 Google、サードパーティ cookie 廃止を 3 度目の延期 年内で完了予定だった Chrome での Third Party Cookie 廃止について、延期が発表されまし
yagisan-reports
yagisan-reports は Webブラウザ および Node.js で動作する帳票エンジンです。JIS第四水準漢字（JIS X 0213:2004、JIS2004）対応の他、縦書き、複雑な表組み、可変行明細の出力、改ページ制御等の日本語帳票に必要な機能が揃っています。
日本のイチゴが大ヒット、アメリカで脚光の200億円調達ベンチャー。「世界で一人勝ち」の理由（BUSINESS INSIDER JAPAN） - Yahoo!ニュース
This release doesn't contain any deliberately-breaking changes. However, it contains a very complex new feature and while all of esbuild's tests pass, I would not be surprised if an important edge case turns out to be broken. So I'm releasing this as a breaking change release to avoid causing any trouble. As usual, make sure to test your code when you upgrade. Implement the JavaScript decorators p
前置き 4月の第1週に行われたCloudflare Developer Week 2024でAIやデータベース関係のアップデートの影に隠れ、WorkersをつくってるKenton氏のブログが2つ投下されました。 そして「JS RPC」という機能が追加されました。 これが一見地味なんですが、非常に楽しい未来を想像できるので、書いてみます。というか以前chimameさんが書いた記事でだいぶ理解できるのですが、もう少し噛み砕いて書いてみます。 Bindings Cloudflareにはいくつもプロダクトがあります。ストレージのR2、データベースD1、KVストアのKVなどです。そしてそれらに繋ぐ方法が「Bindings」という方法です。このBindingsで繋げられるものはたくさんあります。 AI Analytics Engine Browser Rendering D1 Environment
Using the Popover API for HTML Tooltips – Frontend Masters Boost
Using the Popover API for HTML Tooltips May 6, 2024 We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos. I tried to adhere to the points made in there the best I could while making a classic t
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
tl;dr はじめに 2024 年の 4 月 24 日に Node.js 22 がリリースされました。ESM を 条件付きで require する機能や、--run フラグによる npm スクリプトのパフォーマンス改善などが v22 で追加され、2009 年に Ryan Dahl が Node.js をリリースしてから 15 年が経つ今も、Node.js は進化を続けています[1]。 こうして Node.js 自身が強化されていくにつれ、以前はサードパーティーのパッケージを使用して実現することが一般的であった機能が Node.js のみで実現可能となり、当該パッケージが不要となるような場合があります。冒頭に引用した Ben Holmes の動画では、そのように不要となったパッケージとして dotenv node-fetch chalk mocha が挙げられていますが、この記事では「これら
ブラウザキャッシュの仕組みについてまとめた
Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して
スレッドとプロセスの違いを完全に理解する
巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
GitHub - openai/openai-assistants-quickstart: OpenAI Assistants API quickstart with Next.js.
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ランタイム「Bun」は、2023年5月に登場したバージョン0.6で、単独の実行ファイルを生成できる「bun build」機能が搭載されました。 単独の実行ファイルは、Bunをインストールすることなく、そのまま実行可能です。 そして4月26日にリリースされたBun 1.1.5では、このBun buildの機能にクロスコンパイルの機能が追加されました。 Bun v1.1.5 - Fixes 64 bugs (addressing 101) - Cross-compile standalone JS/TS binaries - https://t.co/8hd5RVXz0H is bun's new crash reporter - package.json won't error on comments & trailing commas - Nod
こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます！ きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 （素晴らしい記事をありがとうございます！） これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは？」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動
次のLTS版となる「Node.js 22」正式リリース。WebAssembly GCがデフォルトで利用可能に JavaScriptランタイム「Node.js」の最新バージョンとなる「Node.js 22」正式版がリリースされました。 Node.jsは偶数バージョンがリリースされてから6カ月の後に、30カ月の長期サポート期間（LTS：Long Term Support）に入ります。Node.js 22も、6カ月後の2024年10月にLTSとなる予定です。 Node.js 22 is here Featuring: require()ing ESM graphs, WebSocket client, updates of the V8 JavaScript engine, and more. Big thank you to @_rafaelgss and @satanacchio for t
Extension
Extension is a plug-and-play, zero-config, cross-browser extension development tool for browser extensions with built-in support for TypeScript, WebAssembly, React, and modern JavaScript. Designed with practicity and fast prototyping in mind, running a single terminal command is enough to start developing your extension and requires no extra knowledge to get started. Create cross-browser extension
デザインパターンライブラリを作った JSRの話だけ読みたい人は読み飛ばしてもOKです。 JavaScriptのtry-catchはC++の影響を受けており、以下の特徴があります。 (A) throwは大域脱出的である。 (B) try-catchはブロック内の全ての例外副作用に対して一括で作用する。 (C) try-catchは文であり、値を返せない。 (D) TypeScriptにおいて、例外型は明示されない。 このうち (B), (C), (D) の問題を解決するため、RustのResultや類似のパラダイムをJSに輸入する試みがしばしば行われています。しかしこの解決手段にはいくつかの問題があり、 (E) rethrowの専用構文がないためボイラープレートが増える。 (F) 出力ストリームに対するwriteなど、戻り値を持たない副作用関数に対するエラーハンドリングが抜け落ちないようにL
MoonBit adds JS backend, up to 25x faster than native JS | MoonBit
When MoonBit officially launched in August 2023, our critical mission was unleashing the potential of WebAssembly in cloud and edge computing as a Wasm-first programming language and toolchain. By integrating the essence of Rust and Go, MoonBit has not only achieved simplicity and usability in design but also been equipped with a robust fault-tolerant type system. At the same time, MoonBit is work
The problem with new URL(), and how URL.parse() fixes that | Kilian Valkhof
As someone building a browser I need to parse a lot of URLs. Partially to validate them, but also to normalize them or get specific parts out of the URL. The URL API in browsers lets you do that, but it’s ergonomics aren’t ideal. The problem with new URL() The “new” in front of new URL() indicates that it’s used as a constructor: calling it creates a new URL instance for you. When you give it a ma
【JS体操】JavaScript で頭の体操をしよう！〜第一問 44文字 解説編〜 - KAYAC engineers' blog
Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp
JSer.info #690 - Electron 30.0.0がリリースされました。 Electron 30.0.0 | Electron V8 12.4、Chromium 124、Node.js 20.11.1へアップデート。 File System APIをサポート、Cross Origin iframeにPermission Policyを使うように変更、WebContentsView/BaseWindowの廃止などの変更が含まれています。 Firefox 125がリリースされました。 Firefox 125.0.1, See All New Features, Updates and Fixes Firefox 125 for developers - Mozilla | MDN Intl.Segmenterのサポート、Popover APIのサポート、AV1コーデックのサポート
We are thrilled to announce the release of Quill 2.0! Please check out the announcement post. Major Improvements Quill is now a valid ESM package for better ecosystem (e.g. bundlers) and tree-shaking support Nested Quill support #3590 Improved IME and spell corrector support #3807 Semantic cleanups for TEXT_CHANGE event #3778 History: Record selection in history module #3823 Auto detect scrolling
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
Fashionably flexible responsive web design (full day workshop)
ドラえもんだらけ
しばらく経ってもこの画面に変化がない場合は、Javascript を on にして再度読み込んで下さい。
次の実装例のように、テキストを1文字ずつspan要素で区切ってアニメーションする際の注意点と実装例について纏めたメモ書きです。 実装例テキストアニメーションの実装例（英文）
TypeScript: Branded Types 🔧
PART 1: TypeScript Mapped Type Magic Ahoy there TypeScript warriors! 👋 Today we're extending our work in the TypeScript mapped types article to provide branding. The previous article discussed how to use TypeScript mapped types in a nominal rather than structural nature. type A = { x: number } type B = { x: number }This is a fancy way of saying TypeScript is structural by default, i.e. it will se
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
2024/04/24 令和トラベルで発表した Node.js v22 で変わることの話です。
フロントエンドアーキテクチャがまた進化する ー Angular、Wizとの統合により「ハイドレーション完了後にイベントをリプレイ可能」に
4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 4月23日、Angularチームが「Event Dispatch in Angular」と題した記事を公開した。この記事では、Angularの新しいイベントディスパッチシステムの裏側の詳細について詳しく紹介されている。 イベントディスパッチの導入 Angularは、 JSAction というライブラリを使用して、 発生したイベントをアプリケーションのルートで捕捉し、完全なハイドレーションが完了したあとに再生する 機能を導入した。この機能により、ページがインタラクティブに見えるが反応しないという問題を解決している。 例えば、クリック時に onSave() を呼び出す、以下のよ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - alefore/knit: Software for knitting
TSKaigiのスポンサーです、リフレッシュメントについて全てをお話します - エムスリーテックブログ
Release v0.21.0 · evanw/esbuild
Cloudflare WorkersのJS RPCを理解する
Node.js の進化に伴い不要となったかもしれないパッケージたち
Svelte v5 で導入された Runes によるリアクティビティシステム
2024-05-03のJS: Bun v1.1.5(cross compile)、React 18.3.0、Svelte 5 RC
エラーが出たら喜べ。エラーをちゃんと出せ。 - Qiita
Bun 1.1.5でクロスコンパイルが可能に。LinuxでWindows対応の実行ファイルなどビルド
TypeScript の型検査にかかる時間を短縮した話
次のLTS版となる「Node.js 22」正式リリース。WebAssembly GCがデフォルトで利用可能に
JSのデザインパターンライブラリを試作した話と、それをJSRにアップロードしたら無茶苦茶簡単で感動した話
ゼロからはじめるJavaScript(31) 美しいソースコードを共有するJSツール「Carbon」を使ってみよう
フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた
JavaScript: 最初の 20 年 (翻訳) - inzkyk.xyz
令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
2024-04-26のJS: Electron 30、Firefox 125、Node.js 22、React 19 Beta、TypeScript 5.5 Beta
Release Version 2.0.0 · quilljs/quill
HTML attributes vs DOM properties
JavaScriptエンジンから見るランタイム / 2024-04-25
テキストを1文字ずつアニメーションさせる時の注意点と実装例 ｜ TAKLOG
The Front End Developer/Engineer Handbook 2024
Node.js v22 で変わること
JavaScriptを使った非同期通信について - Qiita