Node.jsのESM同期requireの実装背景など : Cybozu Frontend Weekly (2024-03-26号)
はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの@nakajmg です。 サイボウズでは毎週火曜日にFrontend Weeklyという「一週間の間にあったフロントエンドのニュースを共有する会」を社内で開催しています。 今回は2024年03月26日のFrontend Weeklyで取り上げた記事や話題を紹介します。 require(esm) in Node.js | Joyee Cheung's Blog Node.jsにexperimentalな機能として追加されたESMの同期requireの実装に関する背景の紹介記事です。 背景としてESMが非同期でしか読み込めないと思い込んでいたり、組織のサイロ化によってESMに関する議論の内容が共有できていなかったりといったことが紹介されています。 Node.js: The Documentary | An origin
Altair GraphQL Client
Debugging your GraphQL server was never this easy!Altair GraphQL Client helps you debug GraphQL queries and implementations - taking care of the hard part so you can focus on actually getting things done. DownloadGet Started → Creating environmentseasily switch between various working environments (e.g. switching between local, staging and production environments)
Redict
Redict Redict is a distributed key/value store (a remote dictionary, if you will). Redict is an independent fork of Redis®1 OSS 7.2.4 licensed under the Lesser GNU General Public license (LGPL-3.0-only). Redict is not affiliated with Redis®. Getting started # Start with the Installation guide. Redis is a registered trademark of Redis Ltd. Any rights therein are reserved to Redis Ltd. Any use by th
2024-03-27のJS: Firefox 124、Chrome 123、Node.jsドキュメンタリー
JSer.info #686 - Firefox 124がリリースされました。 Firefox 124.0, See All New Features, Updates and Fixes Firefox 124 for developers - Mozilla | MDN AbortSignal.any()のサポート、WebDriver BiDiの対応改善が含まれています。 また、フラグ付きでSharedArrayBuffer.prototype.grow()とArrayBuffer.prototype.resize()のサポートなども行われています。 Chrome 123がリリースされました。 New in Chrome 123 | Blog | Chrome for Developers CSSのlight-dark()のサポート、Service worker Static
ZOZOTOWNのマーケティングプラットフォームでのフロントエンドの取り組み - ZOZO TECH BLOG
はじめに こんにちは、MA部の林（@hayash__p）です。 私達のチームでは、メール、LINE、Push通知、サイト内お知らせなどでユーザにZOZOTOWNのセールや新着商品を紹介するといった、マーケティングに関わるシステムを開発しています。これまで、配信チャネルや配信内容ごとに個別最適化したシステムを開発していましたが、それらを一新したマーケティングプラットフォームを作ることになりました。新しいマーケティングプラットフォームであるZOZO Marketing Platform（以下、ZMP）の概要については以下のテックブログをご覧ください。 techblog.zozo.com 本記事では、マーケティングプラットフォームのリプレイスにあたり、フロントエンドエンジニアとして取り組んだことを紹介します。 目次 はじめに 目次 背景 ZMPの管理画面モジュール MPマネージャー 技術選定 M
Material UI: Convert Figma Designs to React Components
Even with advanced AI, the transition from design to code often misses a critical piece – your unique design system and code components. In this blog post, we will explore Builder.io’s Visual Copilot, a tool designed to understand and incorporate your design system and existing components, to convert Material UI Figma designs to React component code. FigmaFigma is a collaborative interface design
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
2024-03-28 Encraft #12 Frontend Quiz Night
プロジェクト独自のコーディングルールを簡単に正規表現で定義できる `rubocop-grep` の活用 - ROUTE06 Tech Blog
はじめに: 弊社のとあるEDI(電子商取引)関連のプロダクトでは、Ruby on Railsを利用してGraphQL APIを提供しています。 その開発活動の中で最近、コードの品質と整合性を維持するためのツールとして rubocop-grep を利用し始めました。 この記事ではその具体的な活用事例についてお話しします。 目次 rubocop-grepとは 最初のユースケースと、基本的な使い方の説明 複数のルールをディレクトリごとに設定するための工夫 ほかにどのようなユースケースがありそうか まとめ rubocop-grepとは rubocop-grep は、rubocop の拡張ツールです。 プロジェクト独自のコーディングルールを、正規表現を用いて簡単に定義することができます。 この手の問題は、今までもカスタムCopを書くことで解決することはできましたが、カスタムCopはASTの知識やRu
Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog
チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少な
Node.js v20がVercelで利用可能に ー 新規プロジェクトのデフォルトバージョンへ
2024/03/26、VercelがNode.js v20 LTSを利用可能になったと発表した。 Node.js 20は、BuildsとVercel Functionsで完全にサポートされる。 Builds は、Vercelでのデプロイメントプロセスを管理し、アプリケーションのビルド、バンドル、最適化を行う機能である。Vercel Functions は、サーバーレス関数をホストするための機能であり、バックエンドのロジックを処理するために使用される。 Node.js 20をVercelで利用するのは簡単だ。プロジェクトの設定ページで、「一般」セクションにある「Node.jsバージョン」にて 20.xを選択できる。また、Vercelでの新規プロジェクトのデフォルトバージョンはNode.js 20となる。 Node.js 20は、パフォーマンスの向上やプロジェクト内のサードパーティライブラリへ
初めてESLintのカスタムルールを作ったらチームで使われるようになった話
こんにちは、kintone 新機能開発チームに所属している 23 卒の柿崎です。 この記事では、私が初めて ESLint のカスタムルールを作って npm で公開し、普段業務で触っているコードに適用されるまでについて紹介しようと思います。 「自分でも ESLint のカスタムルール作れそう！作ってみよう！」と思ってもらえたら嬉しいです。 実際に作ったものはこちらです 👇 きっかけ kintone 新機能開発チームは kintone の領域ごとに複数のサブチームに分かれていて、その中でも私はアプリの利用に関する領域にオーナーシップを持つアプリチームにいます。 アプリチームでは現在フロントエンドのフレームワークの刷新を行っています。 kintone のアプリとは、ユーザーが作ることのできる業務システムのことで、アプリにはフィールドという概念があり、その数は 20 個ほどです。 フィールドごと
What You Need to Know about Modern CSS (Spring 2024 Edition) – Frontend Masters Boost
What You Need to Know about Modern CSS (Spring 2024 Edition) March 26, 2024 My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t have a great understandin
品質とスピードを両立: TypeScriptの柔軟な型システムをバックエンドで活用する
2024/03/26 TypeScript 開発言語を統一 〜フロントからバックまで活用〜 Lunch LT 登壇資料 https://findy.connpass.com/event/312847/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
14 tools every Ruby developer will love for performance and debugging"
Kuma UIの設計思想と 頑張らないゼロランタイムCSS-in-JS
OpenAI、人の声を再現する生成AI｢Voice Engine｣開発 - 日本経済新聞
LLMの現在 - Speaker Deck