2024.03.15 福岡フロントエンド勉強会 #1
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
2024.03.15 福岡フロントエンド勉強会 #1
「WinterJS 1.0」の記事がシェアされていたので読んでいたのだけど「Bunより速くなった」と書かれていたので何事と思ってチェックしてみた wasmer.io ベンチマークの文書は以下に公開されている github.com で、まずエラーがめっちゃ出てる Socket errors: connect 155, read 108, write 0, timeout 29 それはいいとして（よくないが）、肝心なところはJarred Sumnerも指摘しているけどwrk -t12 -c400でリクエストの並列処置性能を測っているというのに違和感がある They’re benchmarking their HTTP server running on 12 cores compared to Bun running on 1 core— Jarred Sumner (@jarredsumne
2024-03-11In this blog post series I will compare the following JavaScript frameworks: Vue.js, React, Angular, and Svelte. In part 1 the focus will be on comparing JavaScript framework template languages. The template language of a JavaScript framework is used to define the HTML of the application / website. You can say that the main reason any of the JavaScript frameworks exists is the following:
MistCSS
MistCSSWrite React components using CSS only A new, better and faster way to write visual components. CSS-in-JS? Nope! JS-from-CSS 👍
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32％がテストを書かない。JetBrainsによるアンケート調査
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32％がテストを書かない。JetBrainsによるアンケート調査 Kotlin言語やIntelliJ IDEAなどの開発ツールを開発提供しているJetBrainsは、 JavaScriptとTypeScriptに関する調査結果「2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト」を公開しました。 この調査は世界中の2万6348人の開発者からのアンケートを集計したもので、アンケートは2023年に行われています。公開された集計結果から興味深いものを見ていきましょう。 IDEはVisual Studio Codeが過半数のシェア 回答者の半数以上となる51％が、JavaScriptやTypeScriptのプログラミングを行う場合の統合開発ツール
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発 WebAssemblyランタイム「Wasmer」の開発元として知られているWasmer社は、新しいサーバサイドのJavaScriptランタイム「WinterJS」の正式版となる「WinterJS 1.0」のリリースを発表しました。 ❄️ Introducing WinterJS 1.0 - the fastest WinterCG Javascript runtime in the world powered by Rust and SpiderMonkey ...and #WebAssembly compatible! Now supporting: React Server Components Cloudflare mode 150
Storybook 8
Storybook is the industry standard UI tool for building, testing, and documenting components and pages. It’s used by thousands of teams globally, integrates with all major JavaScript frameworks, and combines with most leading design and developer tools. Today, I’m thrilled to announce the release of Storybook 8! This latest version of Storybook brings together 8,865 commits across 773 PRs from 218
メタ株が急落、「フェイスブックは国民の敵」とトランプ発言で | Forbes JAPAN 公式サイト（フォーブス ジャパン）
フェイスブックとインスタグラムの親会社であるメタの株価は3月11日、トランプ前大統領がフェイスブックを「国民の敵」と酷評したことを受けて急落した。 メタの株価は11日、約4.5％下落して先月末以来の安値の484ドル弱に沈み、昨年7月20日以降で最悪のパフォーマンスを記録した。 この急落は、トランプの11日朝のCNBCの番組でのコメントを受けてのものだ。彼は、国家の安全保障上の懸念から中国バイトダンスのTikTokを米国政府が禁止すれば「米国民の敵であるフェイスブック」に大きな追い風を与えることになると発言した。 メタの株価は、今から2カ月足らず前の1月19日に史上最高値を更新した後にさらに上昇しており、2月1日に開示した2023年第4四半期の売上高と純利益はともに過去最高を記録していた。同社の株価は、年初から29％近く上昇しており、拡張現実（AR）と仮想現実（VR）への取り組みに起因する損
14業界の主要戦略パターンを解説する『業界別マーケティングの地図』を出版します!!（→「はじめに」と「おわりに」と主要フレームを全公開）｜池田紀行@トライバル代表
14業界の主要戦略パターンを解説する『業界別マーケティングの地図』を出版します!!（→「はじめに」と「おわりに」と主要フレームを全公開） 『売上の地図』（日経BP）の続編となる本が出ます。 テーマは前著に続き「売上」ですが、今回の本は14業界のマーケティング特性の違いと、それぞれの業界ごとの戦略チューニングのポイントを解説するものです。 ありがたいことに、『売上の地図』はたくさんの方に読んでいただけ、多くの企業で「導入」が進んでいます。一方で、「これはマズイな……」と感じることも増えてしまいました。それが、カスタマイズやチューニングなき当てはめです。 自社商品が持つマーケティング特性、つまりカテゴリー関与度を無視し、「そのまま」使ってしまうのです。 これはいけません。むしろマズイことになります。この流れを断ち切るためには、自らその流れを正す追加情報を出すほかない。これが本書を書こうと思った
JSer.info #684 - Tailwind CSS v4.0 alphaがリリースされました。 Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS OxideというRustで書かれたエンジンを追加、Lightning CSSを組み込むように変更することでパフォーマンスやビルドトインでサポートする構文が改善されています。また、記事ではv4のロードマップについても触れられています。 TypeScript 5.4がリリースされました。 Announcing TypeScript 5.4 - TypeScript BetaやRCからの大きな機能的な追加などはありません。 クロージャーにおけるNarrowing結果の改善、NoInfer Utility Typeの追加、 --module preserveの追加が行われ
Back to articlesWinterJS 1.0Announcing WinterJS 1.0, the fastest Javascript web server now also supporting Cloudflare applications and React Server Components WinterJS 1.0 is finally here. WinterJS is an incredibly fast WinterCG-compatible Javascript runtime written in Rust using the SpiderMonkey engine to execute JavaScript, and Tokio to handle the underlying HTTP requests and JS event loop. Wint
Speedometer 3.0: The Best Way Yet to Measure Browser Performance
As announced on browserbench.org today, in collaboration with other browser engine developers, Apple’s WebKit team is excited to introduce Speedometer 3.0, a major update that better reflects the Web of today. It’s built together by the developers of all major browser engines: Blink, Gecko, and WebKit with hundreds of contributions from companies like Apple, Google, Intel, Microsoft, and Mozilla.
JSON Canvas
An open file format for infinite canvas data. Infinite canvas tools are a way to view and organize information spatially, like a digital whiteboard. Infinite canvases encourage freedom and exploration, and have become a popular interface pattern across many apps. The JSON Canvas format was created to provide longevity, readability, interoperability, and extensibility to data created with infinite
フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Bluesky、AT Protocol開発助成金を発表 ――招待制廃止、連合機能の実装に続き、オープンな開発エコシステムによる成長がさらに加速 2024年3月6日、分散型SNS「Bluesky」は、同サービスの根幹となるオープンプロトコル「AT Protocol」の一層の開発拡大・促進を目指すために、AT Protocol開発を対象とした助成金を発表した。 開発促進のエコシステムとしての助成金 Blueskyは、2023年1月にiOS/Android版アプリとしてリリースされた分散型SNSの1つ。元々、Twitter共同創業者の1人であるJack Dorsey氏らが集まって始まったプロジェクトで、リリース当初は招待制のSNSとして、熱量の高いユーザを中心に限定した中でサービスが動いていた。 その後、後述のように招待性が廃止、さらにBlueskyの注目機能の1つである連合機能の実
v5 で何が変わる？ 非同期状態管理ライブラリ TanStack Query の新機能と最適化 - Techtouch Developers Blog
はじめに 三行まとめ TanStack Query とは？ v5 アップデート内容の紹介 hooks のインターフェースの統一 Suspense の正式サポート v4 v5 Optimistic Update をシンプルに そもそも Optimistic Update とは？ デモアプリ Optimistic Update の実装例 v4 v5 まとめ 参考資料 はじめに こんにちは！テックタッチでフロントエンドエンジニアをしている tsune です。野球好きの自分は、この時期になるとプロ野球開幕が待ち遠しくなってきます⚾ 開幕戦のチケットも確保したので、当日は会社のメンバーと一緒に神宮球場に行く予定です🥳 この記事では 2023 年 10 月に正式リリースされた TanStack Query の v5 へのアップデート内容を紹介します！ また、その中でも Optimistic Upda
lamplightdev - Streaming HTML out of order without JavaScript
This is a simple page that renders a list of 10 items. Try it with and without JavaScript enabled in your browser. There's a few things to notice: The 'app shell' renders first - you see the header and the footer, but there's a loading placeholder where the list of items will be rendered. After a second the loading placeholder is replaced with the list of items - but with each item itself having a
【データ可視化/Streamlit】Streamlitで作ったアプリからSnowflakeのテーブルを自由に更新する方法 - Qiita
PHPerKaigi 2024発表資料 https://fortee.jp/phperkaigi-2024/proposal/f23f927e-2ac8-498e-a047-6376831cbd07
JSR の Public Beta 公開など : Cybozu Frontend Weekly (2024-03-05号)
JSR の Public Beta 公開など : Cybozu Frontend Weekly (2024-03-05号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023 年 3 月 5 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Tempo 新しく登場した Date 操作用のライブラリである Tempo が公開されました。Intl を利用しつつ、Intl 自体の使いづらさを内部で吸収してるのが特徴です。 フォーマット用 Token が Unicode 準拠ではなく day.js に沿った仕様なのが注意点になりそう、
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト | The WebStorm Blog
JetBrains は過去 7 年間にわたり、変化し続ける開発者の状況と使用されている主要テクノロジーを関連付けるために開発者エコシステムアンケートを実施してきました。 その結果は生データと分析レポートの両方の形式でコミュニティと共有され、すべての関係者がこのエコシステムの状況を把握できるようになっています。 本日は今年の調査結果を JavaScript と TypeScript に焦点を当てて確認したいと思います。 アンケートの概要 2023 年の開発者エコシステムアンケートでは、世界中の 26,348 人の開発者からインサイトを収集しました。 このアンケートの結果を自分で確認し、プログラミング言語やツール、テクノロジーから回答者に関する有用な情報や豆情報に至るまで広範なトピックを網羅した情報を入手できます。 私たちは開発者独特のライフスタイルにも注目し、その情熱や興味を明らかにする予定
コンマ演算子の使い道の話 - Qiita
これは何？ return の後ろにカンマ演算子で区切ったステートメントを記述し、最右のステートメントを返すことに有用性があるかどうか知りたいのです。 という記述を読み、そこに限定せずに コンマ演算子が役に立つパターンについて考えた。 とはいえ、 return 式, 式; が念頭にある。 そもそも そもそも、コンマ演算子は C 言語に由来する。 と言いたいところだけど、よく知らない。BCPL には無かったようなので、B言語か C言語なのかな。 いずれにせよ、C言語がきっかけで広まったと思う。 可読性の低下に寄与 コンマは演算子以外の用途でも使われるのでコンマ演算子なのかそうじゃないのかを判断するのがめんどくさく、可読性の低下に寄与しやすい。 a=(b,c); // コンマ演算子 a=f(b,c); // 引数区切り a=g((b,c)); // コンマ演算子 a=typeof(b,c); /
テストだけで品質は上がらない?! エセ自己組織化した品質組織からの脱却 / JaSST'24 Tokyo
Next.jsで素朴なフォームをシンプルに作る
素朴なフォームを作る この記事では、素朴なフォームをNext.jsを使って簡単に（？）作る方法を順を追って解説します。これを読むことでNext.js AppRouterの新しい機能であるServer ActionsやuseFormStateなどの使い方理解が進むはずです。たぶん。 また、今回解説するServer Actionsを中心とした機能を用いれば、従来Reactでフォームを作る時のフロントエンドとバックエンド処理が煩雑になりがちなところを少しはシンプルに作ることができるようなります。ただし「素朴なフォーム」という前提ですが。 前提 Next.js v14.1 Next.js以外の外部ライブラリは使用していません HTMLのモックから まず素朴なフォームをHTMLから組み立てます。これ以上ないくらい素朴ですね。 素朴だ…（CSSのスタイル情報は記事上では消してます） export de
Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた
はじめに 本記事では環境構築について取り扱いません。 詳細につきましてはリポジトリを参照してください。 Railsのフロントエンド開発でつらいところ Railsでフロントエンド開発する場合に、よく使う部品はPartialなどで共通化しますよね？ 小規模であればPartialだけで十分なのですが、コードベースが成長したり、複雑なユースケースを満たすようになると以下のような課題が生まれてきます。 1. データフローを把握しづらい PartialはControllerで定義したインスタンス変数を参照できるため、以下のようにデータフローが複雑になりがちです。 Partialに値を受け渡すときにlocalsでの受け渡しを必須にすれば解消できますが、曖昧な方針でPartialを実装しているとカオスになります。 2. JavaScriptとViewの依存関係が曖昧で保守しづらい View単位でJavaS
Biome v1.6
In this release, we’re happy to provide partial support for Astro, Svelte and Vue files. What does partial support mean? While the team is working on a unified data structure for HTML-ish languages, we discovered that we could provide Biome functionalities to those files with just a few changes, albeit with some limitations. This means that Biome is able to analyze the JavaScript/TypeScript portio
PHPerKaigi2024で登壇したときの資料です。 https://fortee.jp/phperkaigi-2024/proposal/ae2ded4d-8e7e-47a0-85d1-26a8c92308ac
BlockNote - Javascript Block-Based React rich text editor
The open source Block-Based rich text editorA beautiful text editor that just works. Easily add an editor to your app that users will love. Customize it with your own functionality like custom blocks or AI tooling. Why BlockNote?Whether you want extensive customization or a great out-of-the-box experience, BlockNote has you covered:
Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることにより、実際に表示するHTMlをレンダリングします。 メリット サーバーとの通信が初期遷移時のみに抑えられる ページ遷移が高速 デメリット 初回読み込み時に全てのデータを一括して取得するので、ページが表示されるまでの時間が長い（アプリケーションの規模が大きくなればなるほど、時間が長くなる） JavaScriptはブラウザで実行されているので、ページ表示までの時間（JavaScriptの実行時間）が使用しているマシンスペックに依存して
12年目を迎えた『ガールフレンド(仮)』におけるデータベースの負債解消への道のり【CAGC2024】
本セッションではPC/スマートフォン向けゲーム『ガールフレンド(仮)』のデータベースの負債とその解消の道のりをご紹介します。 当ゲームではデータベースにMySQLを採用しており、長年の運用を続けていく中で下記のような課題が発生してきました。 「突発的なユーザー増加で更新負荷に耐えられない」 「データ容量が肥大化しパフォーマンスやコストの悪化」 これら課題に対しどのような手段で対応したのか、またその対応によって新たな負債が生まれることとなったその経緯と解決策の歴史を解説します。 https://cagc.cyberagent.co.jp/2024/session/index.html?id=m7XRYTxp Copyright © CyberAgent, Inc.
こちらのイベントのLT登壇資料です。 https://ochacafe.connpass.com/event/308830/ 登壇後、資料内の論理展開を登壇者の判断で改善しております。以下は登壇時からの主な修正点です。 ・レガシーMPAについて、FCPのみに着目して初回表示が遅いとしていた記述を削除 ・レガシーMPA + Ajaxについて、初回表示に関する言及を削除。SPAで行われる初回表示に関する変化の説明と重複するため ・SPAの初回表示について、FCPが速くなったとポジティブな書き方を、逆にLCPが遅くなったとのネガティブな記述に修正 ・SPA+SSRのページを削除。サーバーサイドフェッチを伴うSSRについてはNext.js側のページで解説 ・サーバーサイドフェッチを伴うSSRについてのネガティブな記述を削除し、SPA的なクライアントサイドフェッチのアーキテクチャとフラットに取り扱う
OCHaCafe Season8 #2の資料です。 https://ochacafe.connpass.com/event/308830/ セッションアーカイブ動画：https://youtu.be/Ywd2J3GZ8wQ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WasmerのWinterJSのベンチマーク結果はあやしい - laiso
Comparing JavaScript Frameworks part 1: templates
純粋なJavaScriptで実現するデータバインディング - Qiita
WinterJSとは何者か？ベンチマークでの比較検証
複数のケーブルをきれいスッキリまとめられる編み込みスリーブ
2024-03-12のJS: Tailwind CSS v4.0 alpha、TypeScript 5.4、Speedometer 3.0
WinterJS 1.0 · Blog · Wasmer
Webフレームワーク「Astro」を便利に使う～環境のカスタマイズとAstro 4.3までの新機能まとめ～
Bluesky、AT Protocol開発助成金を発表――招待制廃止、連合機能の実装に続き、オープンな開発エコシステムによる成長がさらに加速 | gihyo.jp
優秀なエンジニアと働いてわかった成長するための立ち回り｜Yossy@英語とプログラミング
privateメソッドのテストって書かない方がいいんだっけ？
すぐ使える Cloudflare Workers！
JavaScript の新しいバンドラ Rolldown について
あなたの知らないバグバウンティの世界
PHP8の機能を使って堅牢にコードを書く
【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita
try-catch のfinallyっていつ使うねん、ていう話 - Qiita
フロントエンドパフォーマンスの変遷とNext.jsに見る次の時代
基礎から学ぶNext.js