This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and

Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン

チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要なのか」を説明する必要がありました。ROUTE06のマネージャはエンジニアリングへの造詣が深い方が多いので、対立構造になることはありませんが、説明するためには1000文字くらい必要で、やはり図も描きたい。時間はない。と同じ気持ちになることがありました。 参考情報として紹介できる情報がないか探してみると、「とりあえずこうすればOK」というベストプラクティスについては検索エンジンやSNSですぐに見つかります。ただ、どうしてその方法がベストプラクティスなのか、仕組みや原理を説明している情報は少な

素朴なフォームを作る この記事では、素朴なフォームをNext.jsを使って簡単に（？）作る方法を順を追って解説します。これを読むことでNext.js AppRouterの新しい機能であるServer ActionsやuseFormStateなどの使い方理解が進むはずです。たぶん。 また、今回解説するServer Actionsを中心とした機能を用いれば、従来Reactでフォームを作る時のフロントエンドとバックエンド処理が煩雑になりがちなところを少しはシンプルに作ることができるようなります。ただし「素朴なフォーム」という前提ですが。 前提 Next.js v14.1 Next.js以外の外部ライブラリは使用していません HTMLのモックから まず素朴なフォームをHTMLから組み立てます。これ以上ないくらい素朴ですね。 素朴だ…（CSSのスタイル情報は記事上では消してます） export de

記事の概要 この記事は、Meta 社 relay.dev チームの Jordan Eldredge 氏の Tweet で紹介された GraphQL 成熟度モデル (GraphQL maturity model) を個人的な見解を加えながら和訳した記事です。 jordaneldredge.com GraphQL を実装する上で、どの程度 GraphQL を使いこなせているか判断するための参考になれば幸いです。 実際の成熟度モデルの和訳 最初の Tweet 私は、GraphQLの利点がまだ十分には理解されていないと思っています。ほとんどの組織では、GraphQL の提供する価値を捉えきれていません。 そこで、私は「GraphQL成熟度モデル」をスケッチしてみました。あなたの組織はどの程度成熟して（＝使いこなせて）いますか？ もし以下に示す13の成熟度を達成していたとしたら、よりGraphQLを

約1週間前の2023/12/5にMeta社が開発するCSS-in-JSライブラリ、StyleXがオープンソースとして公開されたので触ってみました。 StyleX FacebookやInstagram、ThreadsなどMeta社のプロダクトで利用されており、この度晴れてオープンソース化したCSS-in-JSです。 React Finland 2021の講演で既に紹介されており、この時点では2021年にオープンソース化の見込みとなっていました。 特徴 特徴は上記でまとまっていますが、改めて大事なところを抜粋し意訳します。 Fast No runtime style injection. All styles are bundled in a static CSS file at compile-time. Optimized runtime for merging class names.

ああ あこがれの コントリビューターに なりたいな ならなきゃ ゼッタイなってやるーッ！ 「はじめまして！ プログラミングの せかいへ ようこそ！」 「わたしの なまえは ヤマダ」 「ひごろは Yamada UI Next.js Chakra UI Mantine Refine のコントリビューターをして おるよ」 改めまして、『まだマサラタウンにいるプログラマーのみなさん』こんにちは。プログラマーを始めて3年目の山田です。 今回は、みんなが憧れるOSSのコントリビューターになる、『1番道路』へ踏み入れるための完全攻略本です。そして、日本で大注目されている(はず)のYamada UIを題材にして進めていこうと思います。 また、この完全攻略本では以下の内容は省略しています。 OSSとは OSSに貢献することのメリット GitHubの使い方 Gitの使い方 理由は、この攻略本を見ているあなたは

mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

Product teams should be thinking differently about documents.Read blog post.

メモリ ツールのヒープ プロファイラーを使用して、次の操作を行います。 JavaScript ヒープ (JS ヒープ) スナップショットを記録します。 メモリ グラフを分析します。 スナップショットを比較します。 メモリ リークを見つけます。 DevTools ヒープ プロファイラーは、JavaScript オブジェクトと、レンダリングされた Web ページ上の関連 DOM ノードによって使用されるメモリ分布を示します。 スナップショットを取得する 分析する Web ページを開きます。 たとえば、新しいウィンドウまたはタブで [散布図オブジェクト ] デモ ページを開きます。 DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (

こんにちは。株式会社ラキールで DX 基盤開発を行う LaKeel DX Engine Group に所属する星と申します。 普段は LaKeel Synergy Logic という自社 API Gateway を開発しています。 社内ウェビナー（ウェブセミナー）で発表した Node.js のメモリ管理について、その内容の一部を公開します。 メモリメモリとはメモリとはメモリ(RAM, Random Access Memory)とはコンピュータのデータを一時的に記録するためのパーツで、日本語では主記憶装置と言われたりします。 メモリは主に作業机の広さなどに例えられたりします。 （机が広いと様々な道具を一度に使える≒ブラウザのタブをいっぱい開きながら画像編集がサクサク実行できる） プログラミングの文脈でいえば、メモリは実行するプログラムそのものやデータ（変数など）を保持する場所になります。 メ

はじめに 今携わっているプロジェクトで凄腕エンジニアさんと一緒に開発をさせていただいているのですが、その凄腕エンジニアさんから教えていただいた例外の話がとても勉強になり、 さらにこの例外の話を他のプロジェクトのエンジニアさんに伝えたところ、反応が良く、とても勉強になりました！という声をいただけたので、アウトプットしていきたいと思います。 （この記事の中で凄腕エンジニアさんのことはTさんと呼ぶことにします。） ※【凄腕エンジニアさんから学んだ例外の話】の補足 というQiita記事を書きました。 この記事を読み終わった後に疑問が残った人などは補足資料として読んでいただけると嬉しいです。 例外の考え方の源 Tさんの例外の考え方は http://diveintopython3-ja.rdy.jp/your-first-python-program.html#exceptions ↑こちらのPyth

VSTATSは、Vtuber専門のデータサイトです。Youtubeの動画・プレミア公開・ライブストリームの情報を取得・分析しています。 ブランド別一覧 Vtuberを所属グループ別に検索できます。 ライブ配信中一覧 現在ライブ配信中の放送を一覧表示します。 同時接続者数ランキング 当日中の同時接続者数ランキングです。

To create integrations, retrieve data, and automate your workflows, use the GitHub GraphQL API. The GitHub GraphQL API offers more precise and flexible queries than the GitHub REST API.