GitHub - hluisson/eslint-plugin-jsx-expressions: Rules for safe logical expressions in JSXYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Prisma に入門して API サーバを作ってみる - 30歳からのプログラミング
Prisma は、Node.js の ORM。 この記事では、導入方法、基本的な使い方について説明したのち、Prisma を使って簡単な API サーバを作ってみる。 Node.js のバージョンは16.13.2、MySQLのバージョンは8.0.28という環境で、動作確認している。 使用している npm ライブラリのバージョンは以下の通り。 @prisma/client@3.11.0 @types/node@16.11.26 prisma@3.11.0 ts-node-dev@1.1.8 typescript@4.6.2 MySQL のインストール ORM である Prisma を試すためには、まずデータベースをセットアップしないといけない。今回は MySQL を使うことにする。 この記事では Homebrew を使ってインストールしているが、他の方法でももちろん問題ない。 % brew
ZEIT – Now CI: Build, Test… and Serve
Since the release of Next.js, we’ve worked to introduce new features and tools that drastically improve application performance, as well as overall developer experience. Let’s take a look at what a difference upgrading to the latest version of Next.js can make. In 2019, our team at Vercel created a serverless demo app called VRS (Virtual Reality Store) using Next.js 8, Three.js, Express, MongoDB,
RESTful API との比較で GraphQL API を作ることの難しさ｜qsona
上の資料でも書いてるんですが、要点を言うと以下のようなことを主張している。 API の設計手法として、以下の2つのパターンが考えられる ・Resource-based API ・Usecase-based API Usecase-based というのは要はクライアントの要求にそのまま沿った形で API を作るということだ。しかし、UI やその他クライアントの要求というのは変わりやすいものなので、そのたびにいちいち API を変更しないといけないとか、API に一貫性がなくて使いにくいとか、1つの endpoint で多数の要求に対処する "神API" が作られてパフォーマンスが悪化する、というような問題が起こる。 したがって、注意深く RESTful API を設計すると Resource-based になる。ここで言っている Resource というのはテーブル設計にやや近いが、そのまま
地道だけど重要な「Webパフォーマンス改善」をいかに進めるか？ ヤフーとリクルートにおける社内横断的な改善の取り組み
地道だけど重要な「Webパフォーマンス改善」をいかに進めるか？ ヤフーとリクルートにおける社内横断的な改善の取り組み 企業の「Webパフォーマンス」に対する意識が、ここ数年の間に大きく変わりつつあります。特にGoogleが、検索ランキングの指標となる「Core Web Vitals」を発表し、その構成要素のひとつに「Webパフォーマンス」を挙げたことから、UX向上の観点だけでなく「検索順位の向上」というビジネス的な観点からも、優先度の高い課題と認識されるようになっています。今回、プロダクト横断でWebパフォーマンスの改善に取り組んできた、ヤフー 浜田真成さん、リクルート 古川陽介さんの2人に、その意義や活動の効果的な進め方について語っていただきました。 全社的に「Webパフォーマンス改善」に取り組む2人のエンジニア 浜田：ヤフーの浜田です。2015年の入社で、動画配信サービスの「GYAO!
Introducing MDN Plus: Make MDN your own – Mozilla Hacks - the Web developer blog
MDN is one of the most trusted resources for information about web standards, code samples, tools, and everything you need as a developer to create websites. In 2015, we explored how we could expand beyond documentation to provide a structured learning experience. Our first foray was the Learning Area, with the goal of providing a useful addition to the regular MDN reference and guide material. In
主要ブラウザで使える！CSS Cascade Layers で新しいCSS設計の手法を考える | サイボウズ フロントエンドエキスパートチーム
Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略的に記述しています) !important インラインスタイル セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの ここに CSS Cascade Layers が導入されると次のように変わります。 !important インラインスタイル Cascade Layers セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの 従来の CSS が抱える複雑な詳細度の管理 どのスタイルを適用するか判断
DevFest 2021 Web Session_UIT編
よしこ@yoshiko_pg Google Developer Experts for Web 2022.03.25 UIT Meetup vol.15 Relearn Modern Web Standard 今までああ書いてたアレ、これからはこう書けそう About Speaker よしこ - @yoshiko_pg 株式会社ナレッジワーク フロントエンドエンジニア 2021年10月からWebのGDEになりました。 SPAでGUIツールを作るのが好きです。 About Session このセッションについて Webフロントエンド開発で頻出するパターンの中で、専用の仕様がなかったために 既存の仕様を使って工夫して実現していたようなものがありました。 日々新しく提案・実装されていくWebの仕様の中で、モダンブラウザでの実装も進んでおり、 利用したくなる機会も多そうなものについてbefore/
2022-03-24のJS: Deno 1.20、Faker v6.0.0、Next.jsのアップデート
JSer.info #584 - Deno 1.20がリリースされました。 Deno 1.20 Release Notes V8とRust間のOpコードの最適化をしてパフォーマンスの改善されています。 リクエストのAccept-Encodingヘッダを見て自動的にHTTP Response Bodyを圧縮するように変更されています。 また、deno benchコマンド、deno taskコマンド、deno.jsonがimportMapオプションをサポートしています。 Deno 1.19でDeno testでのリソースリークを検知する仕組みが実装されていましたが、パフォーマンスが悪化する場面がありました。 そのため、Deno 1.20では、deno testに--trace-opsフラグをつけた時のみデバッグ用の詳細な情報を表示するように変更されています。 破壊的な変更として、Workerと
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Migrating from Faker v5 to v6 | Faker
Shakerphobia