https://developer.chrome.com/blog/introducing-editcontext-api EditContext APIとはなんぞやEditContext APIはChrome121版でリリースされた比較的新しい機能です。現在執筆時点（2024/04/19)ではchromiumベース以外のブラウザではまだ実装されていないのでご注意ください。caniuseこの機能は、一言で言うならばcontenteditableからDom Viewの機能を落としたようなものになっており、IMEやText Bufferに関する機能を提供してくれます。 c...

社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。https://blog.cybozu.io/entry/2022/08/29/110000そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。せっかく便利に思ってくれる人がいたので、内容をアップデートする。...

こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめにサイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024年4月16日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 tailwindcss-mixinshttps://github.com/brandonmcconnell/tailwindcss-mixinsTailwind CSSで、複数の要素に同時に適用するユーティ...

こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめにサイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024/4/9 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 tailwindcss-signals : Signals for Tailwind CSShttps://github.com/brandonmcconnell/tailwindcss-signals/...

SPA モードの Remix を GitHub Pages にデプロイする方法が Remix のアカウントでポストされていたので、ふとそのリポジトリを見てみると、GitHub Actions を使った GitHub Pages へのデプロイが簡単に行えるようになっていて驚いた。https://x.com/remix_run/status/1768640090010468568?s=20このポストを見ると GitHub Actions から提供されている Action など知らなかったものがいくつかあったので、Remix SPA モードのデプロイ方法など含め、内容を紹介したい。 動...

はじめにこんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。サイボウズでは毎週火曜日にFrontend Weeklyという「1週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024/04/02のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Making state easy with D1 GA, Hyperdrive, Queues and Workers Analytics Engine updateshttps://blog.cloudflare.co...

!important はすべてを上書きできるのか？CSS において話題に出すといろいろな意味で盛り上がるキーワードが!importantです。CSS でのスタイル宣言時に!importantを付与すると、細かな詳細度の差異などを無視して強制的にスタイルを適用できます。濫用するとあっという間に無秩序になるため、一般的には慎重な利用が推奨されることが多いです。さて、ではこの!importantですが、何もかもを上書きできるのでしょうか？実際のところそうではありません。今回は、CSS 仕様をいろいろと調べているうちに、!important で上書きできないスタイルの存在を知ったため...

はじめにこんにちは！サイボウズ株式会社フロントエンドエキスパートチームの@nakajmg です。サイボウズでは毎週火曜日にFrontend Weeklyという「一週間の間にあったフロントエンドのニュースを共有する会」を社内で開催しています。今回は2024年03月26日のFrontend Weeklyで取り上げた記事や話題を紹介します。 require(esm) in Node.js | Joyee Cheung's Bloghttps://joyeecheung.github.io/blog/2024/03/18/require-esm-in-node-js/Node....

こんにちは、kintone 新機能開発チームに所属している 23 卒の柿崎です。この記事では、私が初めて ESLint のカスタムルールを作って npm で公開し、普段業務で触っているコードに適用されるまでについて紹介しようと思います。「自分でも ESLint のカスタムルール作れそう！作ってみよう！」と思ってもらえたら嬉しいです。実際に作ったものはこちらです 👇https://www.npmjs.com/package/eslint-plugin-switch-case-order きっかけkintone 新機能開発チームは kintone の領域ごとに複数のサブチームに...

こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめにサイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024/03/19 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Prisma ORM support for Edge functions is now in Previewhttps://www.prisma.io/blog/prisma-orm-support...

こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめにサイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024年3月12日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 WebKit Features in Safari 17.4https://webkit.org/blog/15063/webkit-features-in-safari-17-4/Safari 17.4で...

こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめにサイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。今回は、2023 年 3 月 5 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Tempohttps://tempo.formkit.com/新しく登場した Date 操作用のライブラリである Tempo が公開されました。Intl を利用しつつ、Intl 自体の使いづら...

https://www.mozilla.org/en-US/firefox/123.0/releasenotes/What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。今回はFirefox 123から shadowrootmode とWebCodec APIについて紹介します。 <template> の shadowrootmode サポートhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/template...

この記事では、Next.js で Bundle Analyzer を導入して、Server Components と Client Components のバンドルサイズを以下のパターンで比較します。Server Components と Client Components の両方でライブラリを利用するServer Components のみでライブラリを利用するComposition Pattern を使用して Server Components のみでライブラリを利用する比較には Node.js とブラウザの両方で動作する date-fns を利用します。!Bundl...

こんにちは！サイボウズ株式会社フロントエンドエンジニアのまっつーです。 はじめにサイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024年2月27日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 input type=“date” の沼から、ライブラリを導入する意義を考えるhttps://tech.mirrativ.stream/entry/2024/02/20/100000ブラウザ固有の不具合を回避するためにライブラリを選択す...

こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめにサイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024年2月20日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 NGINXのコア開発者が親会社と決別、新たに「freenginx」という名前でフォーク版を作成開始https://gigazine.net/news/20240215-freenginx/NGINXの主要開...

Interop 2024https://wpt.fyi/interop-2024?stableWebブラウザ間の相互運用性を高めるためのプロジェクトであるInteropで2024年にフォーカスされる機能群が発表されました。本記事では、Interop2024で対象となった機能のうち個人的に関心が高いものをいくつか紹介します。 font-size-adjusthttps://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjustfont-size-adjust は、小文字のフォントサイズを指定するCSSプロパティで...

こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめにサイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024/02/13 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Announcing TypeScript 5.4 Beta - TypeScripthttps://devblogs.microsoft.com/typescript/announcing-type...

https://developer.chrome.com/blog/new-in-chrome-121?hl=enWhat's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。今回はChrome 121からOrigin Trialが開始されたElement Capture APIについて紹介します。 Element Capture APIhttps://developer.chrome.com/docs/web-platform/element-captureElement Capture...

こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめにサイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024/02/06 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 テストの学習へようこそ！ | web.devhttps://web.dev/learn/testing/welcome?hl=jaweb.dev が公開している学習コンテンツのシリーズにテストのコン...