この記事はtraP新歓ブログリレー2022 41日目(4/18)の記事です。 こんにちは、19Bの翠(sappi_red)です。 普段はSysAd班で活動しています。 この記事ではVite-likeなウェブフロントエンドツールをつくっていきながら、Viteの大まかな仕組みを説明していきます。 できる限り細かく手順を書いたので、ぜひ実際に追ってみてください！ 実際に完成したものはこのリポジトリ(sapphi-red/micro-vite)にあります。名称は愚直にMicroViteにしました。 ある程度Viteに近い実装にはなっていますが、そこそこいろんな箇所が異なります また、動作確認はNode.js v16.14.2で行っています。(がおそらくv12以降なら動くと思います) 準備 とりあえず動作確認用のごく単純なウェブアプリケーションを作ります。 動作確認用なのでplaygroundという

Each component is its own independently versioned package, so new components can be added alongside your existing code. No need to disrupt feature work with a huge rewrite⁠—you can start small and add more components one by one. なるほど、移行期に対応しやすいようにコンポーネントごとにpackagingされているのか

Good frontend development is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. In this article we'll describe a recent trend of breaking up frontend monoliths into many smaller, more manageable pieces, and how this architecture can increase the effectiveness and efficiency of teams working on frontend code. As well as talki

妻がFX投資詐欺に遭ったkiku-chanです。 どこに相談・連絡すれば良いか調べるのに苦労したので以下にまとめました。 １．警察への被害相談 最寄りの警察署に相談してください。 ２．振込先銀行の「振り込め詐欺を救済法の窓口」への通報 各銀行には「振り込め詐欺を救済法の窓口」があります。振込先の銀行に通報してください https://www.zenginkyo.or.jp/hanzai/information/ 警察と銀行の対応が悪い場合は、消費生活センターに相談すると警察に掛け合ってもらえる様です。 ３．消費生活センターへの相談 １と２について、警察や銀行は対応がまちまちです。 警察は被害届を受理してくれず、銀行は被害届がないと通報を受理してくれない場合があります。その場合は消費生活センターに相談すると、警察経由で銀行に通報してくれる場合があります。 https://www.kokuse

Create Unique ExperiencesCustomize the UI for the perfect photo experience across all platforms, while matching your look and feel.

本記事は2022年11月に開催した「Tech-Verse 2022」で発表したセッションを要約したものです。アーカイブ動画を文末に掲載しています。質疑応答の様子も収録されていますのでぜひご覧ください。 ヤフーショッピングのフロントエンドを支える共通配信技術について、「共通UI配信サービス誕生までの経緯」と「共通UI配信サービスを支える技術」の2部構成で紹介します。 共通UI配信サービス誕生までの経緯 ヤフーショッピングには、トップ、検索、商品詳細、カート、レビュー、問い合わせ、製品、キャンペーン、ランキング、注文履歴などさまざまな画面があり、それに合わせてさまざまな開発チームが存在しています。 各チームでアプリケーションは独立していて、それぞれリンクで接続されています。共通UIのHTMLもアプリケーションが異なれば、それぞれに記述されます。同じアプリケーション内で共通UIを実装するのは簡単

2023/04/16に開催されたfreee 技術の日 2023 - connpass https://freee.connpass.com/event/274961/ での発表資料です。 発表時間：14:10 - 14:25 @KATARIBAステージ

MotivationMultiple separate builds should form a single application. These separate builds act like containers and can expose and consume code between builds, creating a single, unified application. This is often known as Micro-Frontends, but is not limited to that. Low-level conceptsWe distinguish between local and remote modules. Local modules are regular modules that are part of the current bui

5 Steps to Turn a Random React Application Into a Micro Front-End Get started with micro front-ends, a novel way to run multiple applications, that feel like just one application

こんにちは、デザインエンジニアのショウです。 突然ですが、UI/UX デザインにおいて、「楽観的な更新」という言葉を聞いたことがありますか？あまり聞いたことがなくても、実は日常にたくさん存在しています。 例えば、 twitter や facebook のいいねボタン。いいねをタップした直後に色がつくのですが、実はサーバーへのリクエスト送信と UI 上のいいねの色付きが同時に発生しています。つまりサーバーからの通信結果待たずに UI を更新しています。 他に、trello でタスクカードを隣の列に移動したり、iMessage や Facebook メッセンジャーでのメッセージの送信、Kindle アプリで途中までしかダウンロード出来てない本が読めることなども楽観的な更新です。 図：楽観的な更新を採用しない時と採用した時のメッセージ送信のUI （引用元） 楽観的な更新の意義 早くも 1968

Opens in a new windowOpens an external siteOpens an external site in a new window When I joined Shopify last year, I knew its engineering culture was top class. What I didn’t know was the company’s documentation culture was even more developed than I previously experienced. Simply put, I was impressed with the amount of documentation about pretty much everything: onboarding, projects, internal too

こんにちは！ラクス入社１年目のkoki_matsuraです。 本日は、Next.jsとVercel、Supabaseを用いて簡単なアプリを高速で開発する手順についてお話しできればと思います。 アジェンダは以下の通りです。 Next.jsとは ReactとNext.jsの違い Next.jsの特徴 Vercelとは Supabaseとは ToDoアプリ作成 Supabaseにデータベースを用意 VercelでNext.jsプロジェクトを作成・デプロイ・GitHub連携 VercelとSupabaseの連携 GitHubからクローン Vercelから環境変数を取得 Supabaseのデータベースに接続 コード編集 終わりに 参考文献 Next.jsとは Next.jsはReactベースのアプリケーションフレームワークです。 公式サイトではNext.jsとはReactを用いたWebアプリ開発で生