Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit litepie.com. Simple Usage How it works, <template> <div> <litepie-datepicker ref="myRef" :formatter="formatter" v-model="dateValue" /> </div> </template> <script> import { ref } from 'vue'; import LitepieDatepicker from 'litepie-datepicker'; export defau

This RFC outlines the biggest update to Next.js since it was introduced in 2016: Nested Layouts: Build complex applications with nested routes.Designed for Server Components: Optimized for subtree navigation.Improved Data Fetching: Fetch in layouts while avoiding waterfalls.Using React 18 Features: Streaming, Transitions, and Suspense.Client and Server Routing: Server-centric routing with SPA-like

概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつありますが、コンポーネント設計には厳格なルールが無く、どのように設計すればいいか悩む方も多いのではないでしょうか？（筆者は沼にはまりました） コンポーネントの単位はどの程度に分割すべきなのか、状態管理はどうすればいいのか、API 通信はどこですべきなのかなど、一言にコンポーネント設計と言っても考えるべき項目が多いです。チーム開発では、認識があっていないとコードが魔境になることもしばしばあると思います。（筆者の経験談より） そこで今回は、数々

Transcript アジャイルな 要件定義 について 考える 川口 恭伸 かわぐち やすのぶ Twitter: @kawaguti アギレルゴコンサルティング株式会社 シニアアジャイルコーチ 株式会社ホロラボ シニアアジャイルコーチ 一般社団法人スクラムギャザリング東京実行委員会 代表理事 一般社団法人 DevOpsDays Tokyo 代表理事 要件定義でありがちな問題 4 5 None 7 8 9 None 11 None None 14 By Henrik Kniberg 15 16 アジャイルとはなにか？ １７ 人 アジャイル マニフェスト の The 17 Practitioners in Snowbird 時は2001年 真冬のスキーリゾートに集まった17人。 軽量で迅速なソフトウェア開発を行っていた 彼らは、共通の価値観を語り合い、 マニフェストにまとめるに至った。 ４つの

Jest Preview Debug your Jest tests. Effortlessly. 🛠🖼 Try Jest Preview Online. No downloads needed! Why jest-preview When writing tests using Jest, we usually debug by reading the HTML code. Sometimes, the HTML is too complicated to visualize the UI in our head. jest-preview initiates a server and serve your HTML in a browser, then you can see your actual UI visually, which helps you debug jest t

&lt;h1 class="text-3xl font-bold underline"> Hello world! &lt;/h1> 簡単な例として、上記 HTML を記述すると、以下のようにスタイリングされます。 Just-in-Time 改め arbitrary values 上記例にある text-3xl などのスタイルは予め Tailwind CSS が用意しているものですが、tailwind.config.js を編集することで簡単に変更・追加できます。ただし、1 回しか使わないスタイルでもいちいち tailwind.config.js に登録しないといけないので、その不便さを解消する機能として v2.1 から Just-in-Time (JIT) モードが導入されました。 v3.0 からは JIT がデフォルトになりましたので、わざわざ「JIT モード」ということもなくなり、ドキュメントで

はじめに スタンフォード大学の John Ousterhout 教授が執筆された “A Philosophy of Software Design”(以下 APoSD と略す) という書籍をご存じでしょうか？ 書籍のタイトルを直訳すると、「ソフトウェア設計の哲学」となります。書籍の内容はまさに、ソフトウェア設計について扱っています。 本書籍をベースに、「A Philosophy of Software Design を30分でざっと理解する」というお題で社内ランチ勉強会が開催されました。本記事執筆者である岩瀬(@iwashi86)が発表者であり、勉強会資料は以下のとおりです。 スライド P.4 に記載したとおり、本書籍は John Ousterhout 教授の意見が強く反映されており、ソフトウェアエンジニアであれば、議論を呼ぶ箇所があります。実際、勉強会の実況Slackでは、「これはどうな

はじめに 普段はスタートアップでBtoB SaaSの開発をしている作っているtaroと申します。 今回は、Reactのmemo化について考えている中で抱いた 「なんでReactは標準でComponentをmemo化していないんだろう？」 という疑問を解消するために、色々と調べたり考えたりした内容をまとめました！ 途中でrenderのタイミングや、memo化で再renderが抑えられる理由などの前提知識の復習も含めていて、memo化について詳しくない方もmemo化の勉強にもなると思うので、ぜひぜひ読んでみてくださいー！ なぜこんな疑問を抱いたのか？ まずはそもそも僕がタイトルにあるような疑問を抱いた背景です。 疑問を抱くまでの思考プロセスはこんな感じです。 「再renderが余分に走ってて画面が重いから最適化したいなー」 →「React.memo()を使ってComponentをmemo化しよ

どうも、sakitoです。 今回は私の推しフロントエンドディレクトリ構成と気をつけたいポイントを紹介します。ちぇけら！ はじめに 今回、私の紹介する推し構成は、機能単位で設計するパターンです。 Reactのディレクトリ構成のベストプラクティスを集めたBulletproof Reactで紹介されているパターンにかなり似ています。さらに詳細なプロダクト構成を見たい方はオススメします。 2019年あたりから、私のフロントエンド構成は機能単位で設計するパターンを意識しています、そこから運用や改善を繰り返したことを踏まえて紹介します。 機能単位を意識したディレクトリ構成 まずは機能単位を意識した構成を紹介します、ファイルツリーは下記のようになっています。 src/ ├─ features/ │ ├─ Profile/ │ │ ├─ components/ │ │ │ ├─ UserInfo/ │ │

エンジニアがFigmaを学ぶ利点 ブラウザ上で共同編集ができるなどの理由から、最近では観測範囲内の多くの企業がFigmaをメインのデザインツールとして採用しています。 一般的にフロントエンドエンジニアはデザイナーがFigma上で作成したデザインファイルを元に実装を進めると思いますが、ここでエンジニア側にもFigmaの知識がある程度あればより円滑かつスピーディにUIの実装が行えるのではないかと考えています。 具体的には、エンジニアにFigmaの知識があることで以下のような利点があります。 デザイナーの意図を汲み取ることができる デザイナーと共通言語で話せる 実装の観点からデザイナーにFigmaの修正依頼ができる ↑の打ち返しを待たずに自分で軽微な修正ができる というわけで、今回はエンジニア目線で実装への応用を交えながらFigmaの基礎知識を解説していきたいと思います。 スタイル Figmaで

「値オブジェクト」の定義について不勉強だったので「DDDの値オブジェクト」の定義とDDD以外の「値オブジェクト」との違いについて、改めて関連書籍を読み直し整理してみました。 すごい長いし細かいので他人に読ませるような記事ではなく、自分のために書いたメモです。 もし読むなら興味がある人だけで。 自分向けのメモですが、一応 この記事の前提や意図を書いておきます。 「DDDの値オブジェクト」以外を否定する記事ではありません。 原理主義のように書籍の理想どおり実践するべきだと主張するつもりはありません 「理想に従えばよい」「理想に従うの無意味だ」と決め付けの二項対立的な思考ではなく、理想と現実の絡み合ったグレーゾーンを見極めつつ、現場で手を打つのが優れた実践者ではないでしょうか 下記に紹介する、それぞれの値オブジェクトの優劣について細かく議論し、論破する・されることを目的としていません。 言い訳と

skeleton skeleton creates skeleton codes for a modularized static analysis tool with x/tools/go/analysis package. x/tools/go/analysis package x/tools/go/analysis package provides a type analysis.Analyzer which is unit of analyzers in modularized static analysis tool. If you want to create new analyzer, you should provide a package variable which type is *analysis.Analyzer. skeleton creates skeleto

Figma Community plugin — Export compressed JPG, PNG, SVG, WebP, GIF, AVIF and PDF image files directly from Figma Features Use instantly inside Figma; no extra websites, apps or APIs required.Create and export animated GIFs from selected layers.Supports SVGs...

先日 Figma Config にて「エンジニアに愛される Figma デザインの作り方」というタイトルで発表をしました。 せっかくなのでもっと多くの人に内容をお届けできればなと思い立ったので文字起こししてみます。 「エンジニアに愛されるデザイン」とは？私は二つ大きい基準があると思っていて、それは デザインの意図を掴みやすい デザインが変わった時の変更が容易 があります。そして前者は Structured Design, 後者はデザインをシステム化していくことによって達成できると考えています。 いきなり Structured Design という耳慣れない単語が出てきたので、まずはそこを解説しますと、これは2021年の Schema という Figma のデザインシステムのカンファレンスのキーノートで紹介された概念なのですがデザインには Freeform と Structured という二

Table of Contents About the project Getting started Requesting icon Contributing Discord server develop vs master Stale pull requests Go build yourself About the project Devicon aims to gather all logos representing development languages and tools. Each icon comes in several versions: font/SVG, original/plain/line, colored/not colored, wordmark/no wordmark. Devicon has 150+ icons. And it's growing

GitHubProfileページとは GitHubの自分のProfileページを自由にカスタマイズできるのご存知ですか？？ ↓↓↓こういうやつです↓↓↓ イケてる？エンジニアは結構カスタマイズして公開してみてるみたいなんで、一度は目にしたことがあるかと思います。この流行に乗り遅れないようにちょっとでもキラキラにしてみたくないですか？？ 結構いろんなことができるんで、ゲームを公開している人や今聞いてる音楽を教えてくれる人、好きなアニメ・マンガを羅列している人など様々ですが、エンジニア的な情報だけを可能な限りビジュアライズしてくれるようにする方法を紹介したいと思います。 私のGitHubProfileを晒す ここに私のProfileがありますので晒しておきます。 全体をスクショしてみるとこんな感じです。 画像やグラフが多めでなんかすごいエンジニアな感じがしますよね！（なお実際の実力が伴っている

Parse Server is an open source backend that can be deployed to any infrastructure that can run Node.js. Parse Server works with the Express web application framework. It can be added to existing web applications, or run by itself. The full documentation for Parse Server is available in the wiki. The Parse Server guide is a good place to get started. An API reference and Cloud Code guide are also a

🧘 Rewrite of a fully-featured GraphQL Server with focus on easy setup, performance &amp; great developer experience. The core of Yoga implements W3C Fetch API and can run/deploy on any JS environment.