これは、仮想DOMを使用しない宣言的UIフレームワークであるSvelteに関するセッションです。 今回は、Svelteコンポーネントがどのようなランタイムになるのかを解説します。このセッションを聞くことで、なぜSvelteランタイムが小さく高速なのかを理解できます。 https://jsconf.jp/2022/talk/svelte-runtime-101
![Svelte Runtime 101 (JSConf JP 2022)](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa812e99fe75426d5054c8388a9aaa0a46411a5d/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F3a10413d78a94b289ec8d5026d26d4f7%2Fslide_0.jpg%3F23563511)
Builder.ioは、強力なビジュアルエディタにより、開発者ではない人が超高速なサイトを開発・編集できるようにしています。 私たちのビジュアルエディタが優れている点の1つは、AngularからWeb Components、 そしてその間にあるすべてのフレームワークに至るまで、 さまざまなツールで同じサイトを生成できることです。 出力されるコードは速度が最適化されています。 私たちのツールで作成されたサイトは、手作業で作成されたサイトの大部分よりも高速です。 私たちはこれを心から誇りに思っています。 私たちの製品は、スピードがとても重要であるeコマースに焦点を当てています。 優れたTime to Interactiveの実現は困難 どんなにコードが最適化されていても、静的HTMLのみを提供していない限り、 eコマースサイトがPageSpeed Insightsで100点中100点のスコアを
1.はじめに 本記事はサイボウズの夏インターン(2022年)で取り組んだ内容の紹介を行います。インターンでは、サイボウズのフロントエンド領域における横断的組織であるフロントエンドエキスパートチームに配属されました。5日間のインターン期間でstyled-componentsを別のCSS in JSに自動置換するCLIツール・extract-styledの開発に取り組みました。 2. extract-styledの紹介 実装したextract-styledは、以下のようなCLI経由の実行を通して、styled-componentsで定義されたReactコンポーネントをtargetに指定した任意のCSS in JSに変換することができます。(現時点では変換先としてlinaria・vanilla-extractに対応) $ extract-styled \\ --path ./src/compon
2022年10月25日、ショーケースは同社が提供する複数のサービスが不正アクセスを受けたため、サービスを利用する企業のWebサイトを通じて入力された情報が外部へ流出した可能性があると公表しました。ここでは関連する情報をまとめます。 フォーム入力支援やサイト最適化サービス改ざんで複数社に影響波及 www.showcase-tv.com 不正アクセスによりショーケースが提供するサービスのソースコードの改ざんが行われた。対象サービスが稼働するシステムの一部で脆弱性を悪用されたことが原因。 被害に遭ったのは「フォームアシスト」「サイト・パーソナライザ」「スマートフォン・コンバータ」の3つ。フォームの入力支援やサイト表示最適化を行うサービスで利用企業は同社が公開するJavaScript (formassist.jp、navicast.jp上で公開)を自社サイトより読み込むことで利用する。 改ざん被害
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません(仕様 7.2.14)。 console.log(undefined === null); // false console.log(undefined == null); // true 他の falsy な値(false とみなされる値)との比較は、ゆるい比較演算子であっても区別されます(仕様 同上)。 console.log(undefined == fa
Added Added stack trace to AxiosError #4624 Add AxiosError to AxiosStatic #4654 Replaced Rollup as our build runner #4596 Added generic TS types for the exposed toFormData helper #4668 Added listen callback function #4096 Added instructions for installing using PNPM #4207 Added generic AxiosAbortSignal TS interface to avoid importing AbortController polyfill #4229 Added axios-url-template in ECOSY
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開 メタ(旧Facebook)は、JavaScriptアプリケーションのメモリリークを検出するフレームワーク「MemLab」をオープンソースとして公開したと発表しました。 We’ve open-sourced MemLab. #MemLab is a JavaScript memory testing framework that automates leak detection and makes it easier to root-cause memory leaks. 1/2 https://t.co/vo6Gzv56ud — Engineering at Meta (@fb_engineering) September 12, 2022 Metaが展開しているFacebook、Fac
Signals – Preact Guide 端的にいってしまうと、Solidのソレとほぼ同様の体験でコードが書けるようになる・・・! まずはコード // store.js import { signal } from "@preact/signals"; export const count = signal(0); export const add = () => count.value++; // Counter.jsx import { count, add } from "./store.js"; const Counter = () => ( <div> <p>Count: {count.value}</p> <button onClick={add}>click me</button> </div> ); さすがにこの時代になるといろいろ既視感もあって、すんなり読めるコードか
The content is based on Patterns.dev - a free online resource on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. The patterns covered on this website and in the workshop can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario. The goal is to raise aware
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。 始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます(Betweenが語源のFlash用語)。トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。当サイトの記事『トゥイーンライブラリの比較検証』でも、類似のライブラリに比べて性能が高いことを確認しています。 旧TweenMax時代から数えてGSAP利用歴15年の筆者が、GSAPのおさえておくべき最低限の使い方から、現場で役立つテクニックを紹介します。 ▼GSAP公式サイト GSAP入門は前後編の2回にわたり解説します。前編では基本的なGSAPの使い方を中心に説明しま
結論 どちらでもいい セミコロン付けても付けなくても落とし穴はある ESLintを利用することで落とし穴を検知できる 私はセミコロンつけない派 自動セミコロン挿入とは 自動セミコロン挿入(automatic semicolon insertion) この仕組みのおかげでセミコロンを使わなくてもコードを書くことができ、コンパイラが行末を察してセミコロンを挿入してくれる 自動セミコロン挿入のしくみはECMAScriptで規定されており、自動セミコロン挿入はJavaScriptエンジン間で可搬性がある 自動セミコロン挿入には落とし穴があり、ルールを理解しておく必要がある 第1のルール:セミコロンが挿入されるのは、"}"トークンの前か、改行の後か、プログラムの末尾だけ
We are thrilled to announce Astro v1.0: a web framework for building fast, content-focused websites. Over the last 16 months, Astro has grown from an empty repo to over 13,000 stars on GitHub and 30,000 early users around the world. The Astro documentation has been translated into 6 different languages, and Astro has already been deployed at amazing companies such as Firebase (Google), Trivago, Th
Lexical で簡単なリッチテキストエディターを作ってみよう Lexical は Meta が開発したリッチテキストエディターフレームワークです。以前 Lexical のアーキテクチャを調べてまとめた記事を執筆したので、概要や設計についてはそちらをご覧ください。 Lexical のコアライブラリは EditorState の差分から最も効率のいい方法で DOM を更新する Reconciler がメインで、エディターの機能やビューはプラグインという形で各々実装する必要があります。 ただ、コアライブラリだけ提供しても使う側が戸惑ってしまうので、すでに多くの公式プラグインが同じリポジトリで提供されています。 そして注目すべきは Playground の充実度です。 もはや Playground をそのまま使っても十分なほど多機能なエディターが実装されています。もちろんソースコードは同じリポジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く