WebPerf Snippets – Nextra
WebPerf Snippets A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools (opens in a new tab). How to use Requirements All the snippets are tested in Google Chrome (opens in a new tab) browser, so use this browser to garantize the correct funcionality. Run in the browser console You can copy any snippet and then paste in the browser
2023-06-11のJS: Rspack 0.2、Modern CSS、polywasm
JSer.info #647 - Rustで書かれたwebpack互換のbundlerであるRspack 0.2がリリースされました。 Announcing Rspack 0.2 - Rspack Plugin Hooksの追加、ESM形式のoutputに対応、SplitChunksPluginの実装、Data URIのサポートが追加されています。 また、Vue/Svelte/NestJSのloaderのサポートが追加されています。 Modern CSS in Real Life - Chris Coyierという記事では、最近CSSに追加され利用できるようになった機能について紹介されています。 Logical Properties、Container Queries、Cascade Layers、CSS Colorsとoklch()、View Transitions APIについて現実の
Astro 2.6リリースなど : Cybozu Frontend Weekly (2023-06-13号)
はじめに こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの じまぐ です。 サイボウズでは毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/06/13 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Astroがドキュメントサイト作成のためのテンプレートを公開 Astroでドキュメントサイトを作成するためのテンプレートであるStarlightが公開されました。 Starlightのサイト自体もStarlightを使って作られています。StarlightのドキュメントにはWebサイトが環境へ与える影響などについて触れられているのが特徴的です。 Astro 2.6リリース Astroの2.6がリリースされました。 Middlew
開発者はコーディングよりもビルドとテストの待ち時間が長く、チームの協力でコード作成が高速に。すでに92％がAIを仕事に活用。GitHubによる米国の開発者500人の調査
GitHubは、現在の開発ツールやワークフローが開発者の体験にどのような影響を与えるかについて、米国に拠点を置く企業のソフトウェア開発者500人を対象に調査した結果を発表しました。 その内容は、開発者がコーディングの時間よりもビルドやテストなどのCI待ちの時間が長いと感じていること、チーム内の協力によってカバレッジやコード作成が改善されること、そしてすでに92％がAIを仕事に活用していることなど、興味深い内容が明らかになっています。 ポイントとなるグラフをいくつか紹介しましょう。 ビルドの待ち時間が長すぎる！ 開発者の典型的な1日の仕事の中で何に時間が費やされているのか、個々の開発者に時間の長い上位3つまでの時間の使われ方と1日の中でのその割合を回答してもらい、それを集計したが下記のグラフです（分かりやすいように、オリジナルの英語のグラフを一部を加工して日本語を埋め込んでいます。以後すべて
「Vercel KV」が正式リリース、Redisベースのキーバリューストア。ホビー向けには月間3万リクエスト、256MBストレージまで無料に
「Vercel KV」が正式リリース、Redisベースのキーバリューストア。ホビー向けには月間3万リクエスト、256MBストレージまで無料に Next.jsの開発元であり、Webアプリケーションのホスティングサービスなどを提供するVercelは、同社のホスティング環境で利用できるキーバリューストア「Vercel KV」の正式リリースを発表しました。 Vercel KV, our durable Redis database, is now generally available for Hobby and Pro teams.https://t.co/10mLnu4HCg — Vercel Changelog (@vercel_changes) June 15, 2023 Vercel KVはインメモリデータストアのRedisをベースにしたキーバリューストアです。キーと値のペア、あるいはJ
なめらかなナレッジシェアリング文化を創る | メルカリエンジニアリング
この記事は、Merpay Tech Openness Month 2023 の9日目の記事です。 はじめに こんにちは。メルペイのバックエンドエンジニアの@tanaka0325です。 この記事では、私が最近サイドプロジェクトとして取り組んでいる「なめらかなナレッジシェアリング文化を創る」ための活動について紹介したいと思います。 事前に断っておきたいこととして、このプロジェクトはまだ始まったばかりです。プロジェクトメンバー全員がサイドプロジェクトとして参加しているので、これから少しずつ進めていくものになります。 今回は私たちがどのような活動を行っているのか、現状の状況や今後の方針についてお話できればと思います。 ※この記事では表記ゆれを避けるため、資料やコンテンツ、知見などをまとめて「ナレッジ」と表現することとします。 きっかけ まずは、この活動を始めたきっかけについてお話したいと思います。
Next.js 13 の SSR Streaming を AWS Lambda Response Streaming で実装する方法 | Amazon Web Services
Amazon Web Services ブログ Next.js 13 の SSR Streaming を AWS Lambda Response Streaming で実装する方法 AWS Lambda のレスポンスペイロードストリーミングを使用することで、サーバーサイドでレスポンスデータが利用可能になった時点で呼び出し元にデータを段階的に送信することができます。これにより、Web アプリケーションやモバイルアプリケーションのパフォーマンスを改善し、ユーザ体験を向上させることができます。AWS Lambda のレスポンスストリーミングに関して詳しくは Introducing AWS Lambda response streaming の記事を参照ください。 本記事では、レスポンスストリーミングの実践的な活用例として、Next.js 13 において提供されている SSR Streaming
Protecting GraphQL APIs from malicious queries
Starting today, Cloudflare’s API Gateway can protect GraphQL APIs against malicious requests that may cause a denial of service to the origin. In particular, API Gateway will now protect against two of the most common GraphQL abuse vectors: deeply nested queries and queries that request more information than they should. Typical RESTful HTTP APIs contain tens or hundreds of endpoints. GraphQL APIs
Modern CSS For Dynamic Component-Based Architecture | Modern CSS Solutions
Modern CSS For Dynamic Component-Based Architecture Updated on: Jan 19, 2024 Written by Stephanie Eckles The language of CSS has had an explosion of new features and improvements in the last few years. As a result, feature parity between browsers is at an all-time high, and efforts are being made to continue releasing features consistently and synchronously among evergreen browsers. Today, we will
Advanced TypeScript Techniques for Senior React Developers
As a Senior React Developer, you’re always looking for ways to improve your skills and write better code. One technology that can help you achieve this is TypeScript. TypeScript is a statically typed language that is a superset of JavaScript. It provides developers with advanced features such as type checking, interfaces, and generics, which can help catch errors early on and improve the overall q
Next.jsから学ぶWebレンダリング ~React誕生以前からApp Router with RSCまでの流れ~
最近話題のReact Server ComponentsやIslands Architectureが何を解決しようとしてるか知るまでの簡単なWebレンダリングの流れを記載しました。 社内勉強会のために作成した資料となるため箇条書きになっておりますが、なるべくHowやWhatではなくWhyやトレードオフを記述するようにしています。（読みにくい or 誤った記載あったらFB頂けたら幸いです） React 誕生までの Web iPhone と Ajax がリードした Web 2.0 時代 Webにおいて Ajax という技術が注目され始める 2005~ Google mapsやGmailといったサービスがリード jQueryの誕生が 2006~ iPhone登場 2007~ スマホアプリの登場によりソフトウェアのUXに求められる質的変化 mobile safariが時代のリードをした Flash
Next.js Server Actions の裏側を理解したくて動きとコードを追う
Next.js Server Actions Next.js 13.4 で、新機能として Server Actions[1] が追加され、バックエンド側のコードをあたかもクライアントから直接呼び出せるかのようにコードを書くことができるようになりました。 リリースブログに掲載されていた Server Actions のコードを見てみましょう。 // app/post/[id]/page.tsx (Server Component) import kv from "./kv"; export default function Page({ params }) { async function increment() { "use server"; await kv.incr(`post:id:${params.id}`); } return ( <form action={increment}
Open Sourcing Shopify’s Ruby Builds
We’ve open sourced shopify-ruby-definitions, which contains definitions to build the Ruby we use at Shopify in development, testing, and production. Our builds of Ruby are API compliant with the vanilla Rubies, but with additional bug fixes and performance improvements we’ve backported from the next major version. Why we use custom builds of Ruby Shopify has one of the largest and highest traffic
Rewind-UI - A fully customizable React-TailwindCSS component library
Rewind-UI is a React component library that provides a set of accessible, reusable, and customizable components to help you build your next project. We've designed our components to be flexible and easy to use, so you can focus on what matters most: building great user experiences. Getting started with Rewind-UI is easy! Simply install the package using your package manager of choice, and you're r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tc39/source-map: Source map specification, RFCs and new proposals.
Apple Design Resources – iOS 17 and iPadOS 17 | Figma
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS