変更に強いコンポーネント設計の方針と規約（Webフロントエンド） - Sansan Tech Blog
技術本部 データ戦略部 Newsグループの木田です。 最近、初めて自作キーボードに挑戦しました。ちょうど２枚目のモニターも買ったので、モニター２台と自作キーボードで快適に記事を書いています。 予めお断りしておきますが、この記事は元々、社内向けに設計方針や規約・ツールなどについて共有するために書いたものでした。最近、他チームの参考資料として役立ったこともあり、社外向けに手を加えて公開する運びとなりました。 はじめに 機構改革・人事異動情報(β) とは ⚛️ Atomic Design に従う ⚛️ Atomic Design とは ⚛️ Molecules と Organisms の分け方 ⚛️ コンポーネントの設計方法 📝 規約 📝 Component と Container を分ける 📝 データの繋ぎ込みは Organisms 以上で行う 💡 Tips 💡 Atoms はタグ本
文化祭入退場・混雑管理システム "CAPPUCCINO" 開発・運用記
この記事は、文化祭実行委員会に所属する[1]現高校 3 年生 3 人で文化祭の入退場混雑管理システム「CAPPUCCINO」を 2 年間に渡り開発し、実際に運用した記録を残したものです。 ＊この記事は以下の 3 名による共同執筆です 著者・開発者: すばる (@su8ru / Twitter:@su8ru_) 高校３年生。普段は TypeScript に使われながらウェブフロントエンド技術で遊んでいます。 たけ (@takeno_hito / Twitter:@Takeno_hito) こうこうさんねんせい。コーディングよりはゲームのほうが好きです。上下二人に揉まれながらも一応リーダーをやってました。 ふわわあ (@fuwa2003 / Twitter:@ibuki2003) 高3。Vimmer。半言い出しっぺなのに後半コード書いてないとかで最近は肩身が狭い思いをしています。 1. CAP
テスト優先度をあげたくなる実話 - フロントエンド版 -
Storybook・テストに関して「メンテナンス工数に見合うだけのメリットがあるか？」という議論を、経験したことはないでしょうか。フロントエンドは、とにかく動くものを作ることが優先され、Storybook・テストが二の次になっている現場も少なくないと思います。 限りある工数を割きチームで取り組むものですから、導入するためには「どういったメリットがあるのか？」という具体的な例をチームに示す必要があります。これは今年、筆者が体験した実メリットのお話です。導入を躊躇している現場にむけ、参考になればと思い書きました。 【Storybook】不要な Global CSS を削除できた きちんとコンポーネント設計され、コンポーネントに閉じた指定をしていたとしても、どこかに必ず Global な CSS があると思います。何かしらの資材を受け継ぎ立ち上げたプロジェクトに関しては、Global な CSS
Server Driven UI – Tom Lokhorst's blog
Update 2023-03-29: In August 2021 Apple acquired Primephonic the company. On March 28, 2023 Apple launched Apple Music Classical as a new app. This new app is built on the foundations of the Primephonic app, the fundamentals of the Server Driven UI architecture as described in this post remain the same. Note: This post is based on a talk I gave at CocoaHeadsNL in July 2020. Warning: because this i
React 初心者が Material-UI で今どきの Web フォームを作ってみた（yup編） | DevelopersIO
React 初心者が、Material-UI と React Hook Form v7 を活用して今どきの Web フォーム開発に挑んでみました！ つい先月、React（+ React Hook Form）と Material-UI を組み合わせた Web アプリ開発を始めました。アプリ開発初心者でも簡単に、かつ今っぽい Web フォームを開発することができたので、少しコードを交えてご紹介してみたいと思います。 なお本記事は、前の記事（react-hook-form編）に続く形式となりますので、お時間あれば下記の記事も合わせてご参照いただけますと幸いです。 作ってみた 前回の記事で作成した Web フォームの基本項目（Basic.js）というフォームに下記の yup という JavaScript schema builder を利用してバリデーションの機能を追加していきたいと思います。 バ
Flutterで迷いがちなよくあるUIの作り方/いじり方 - AppBrew Tech Blog
こんにちは、AppBrewの新規事業部の吉野です。 この記事は「Flutter #1 Advent Calendar 2020」の７日目の記事になります。（23時に参加登録しました） 弊社の新規事業部では去年の冬頃からFlutterを採用したため、そろそろ書き始めて１年経つことになります。 ぼちぼち手に馴染んできたとはいえ、UIの開発をしていると、何度も「あれってどうやって書くんだっけ」みたいなことがあり、 よくプロジェクト内を探ったりして時間を使ってしまうことがあります。 そこで、この一年間を雑に振り返ってよく調べた/使ったUIの実装をまとめていこうと思います。 Flutterに興味がない方のために、とりあえず、うちのかわいい猫の画像を貼っておきます。 かわいい猫 はじめに よくあるUIの作り方（ちっちゃいもの編） RippleEffectがある角丸ボタン グラデーションのついたアイコン
SVGBox | API for Web Icons
API for Web Icons Including icons is harder than it should be. SVGBox allows you to add icons to your project by using simple tags. The idea behind the service is that including icons should be as simple as copy and paste. It's free and icons are delivered over Cloudflare CDN, the same technology that powers CDNJs's 190B+ monthly requests . Explore Iconsets
なぜその API は使われないのか？ API の活用を拒む3つの壁とその対策 - CData Software Blog
こんにちは！ CData Software Japan リードエンジニアの杉本です。 大変ありがたいことに、最近あるSaaSを提供する会社さんから「リリース前のAPIを触ってみてフィードバックをくれませんか？」と依頼を受けました。 私は以前こんな記事 を公開するほど、APIどっぷりな人間なのですが、数多くの SaaS APIを触ってきてよく考えることがあります。 それは SaaS APIというサービス・プロダクトそのものを成長させる上で、もっとも重要なことは「顧客・デベロッパーが、そのAPIをどれだけスムーズにキャッチアップできるか？」という点に尽きるのではないか？ というものです。 以下のグラフはAPI管理ツールを提供するSmartBearのAPI調査において、APIドキュメントで最も重要な要素とは何か？ というアンケート結果のランキングですが、ExamplesやAuthenticati
ドキュメントとコードが乖離しないように DMM .com のエンジニアが教えるGoaを使ったAPIサーバーの作りかた
DMM Groupのエンジニアが、Goを活用したプロダクト事例やトレンド、現場のリアルを話すイベント「DMM.go」。2回目の今回は、DMM.com プラットフォーム事業本部 エンジニアの本田雄亮氏が、Goaを使ってAPIサーバーを作る方法について紹介しました。関連資料はこちら。 手作業のドキュメントとコードとは乖離する 本田雄亮氏：今回、「Goaを使ってAPIサーバー開発してみた」というタイトルでお話ししたいなと思います。 まず自己紹介です。プラットフォーム部というところで基盤システムの開発をしています。バックエンドのエンジニアです。名前は本田です。興味あるのは、Goとかアーキテクチャ。DDDとかがけっこう好きなので、もし懇親会に参加される方がおられたら、Goaだけの話じゃなくて、Go全般だったりアーキテクチャ、DDDまわりでもお話できたらなと思っています。 さっそくメインテーマのGoa
Theme UI で Theme Driven な快適 React スタイリング生活 - Qiita
こんにちは。YAMAP でフロントエンドエンジニアをしている @SotaSuzuki と申します。 この記事は YAMAP エンジニア Advent Calendar 2019 の 9日目の記事となります。 拙い文章で恐縮ですが何卒よろしくお願いいたします。 tl;dr Styled System の Theming は Emotion の Theming と比べて 3倍便利 Theme UI の Theming はさらにその 2倍高機能 Styled System の Style Prop API と TypeScript の併せ技で 3倍高速なマークアップ Theme UI はいいぞ Styled System とは 本題の Theme UI に入る前に、Theme UI のベースとなるライブラリ Styled System について簡単に説明します。 Styled System は
C#のAPI設計のモデルとインターフェース
オブジェクトグラフは到達可能な子オブジェクトから構成されます。データモデルやDTOの場合、オブジェクトグラフは一方向のツリーに似た構造になります(循環グラフもありうるが、シリアライゼーションで問題になる)。 ドメインモデル ドメインモデルは関連するデータモデルを表す、より高い次元の概念。 エンティティ “エンティティ”という言葉には多くの定義があります。本質的には“データモデル”と同じ定義のものもあります。nHibernateとEntity Frameworkが人気になったので、データベースのテーブルと一対一にマッピングされるDTOを意味するようになりました。 この定義の場合、エンティティはカラムと列のマッピングを正確に説明する属性で飾られるようになります。データベースからの遅延読み込みもサポートします。 エンティティを拡張してデータモデルとしての役割を担わせることもできますが、エンティテ
Kyash Android で UIテストを導入した時の方針 - Konifar's WIP
先日、Kyash のAndroidアプリのUIテストをEspressoで書いてCIで回すようにしました。 ユーザー登録、ログイン、カード登録のテストが、毎晩元気に走っています。 きっかけはKPTです。iOSでログイン直後に発生するユニットテストでは気づけない問題が見つかり、 Problem として上がってきました。 テストケースを15項目くらいSpreadSheetにまとめていて大きなリリースの時は手動で確認していたのですが、なぜか「今回はやらないで大丈夫」と判断した時に限ってバグが発生するんですよね。また、手動のテストケースはミスや形骸化しやすいので、 Try としてテストケースの一部を自動化してみることにしたのでした。 Espressoでテストを書く時は、@sumio_tymさんの素晴らしい資料があるので、下記2つを読んでおけば間違いないと思います*1。 DroidKaigi2017
もう管理画面のフロントコードを書く必要はありません、そう Viron ならね。 - Qiita
管理画面のフロントエンドコードを書く時代は終わりました。 Vironがあれば、OpenApi(Swagger)でAPI定義を行い、実装するだけで管理画面が完成します。 そしてこれはOSSです。誰でも自由にお使いいただけます。 概要 Vironは、複数の管理画面を管理できるよう設計された、管理ツールマネージメントコンソールです。 APIサーバーとOAS2.0 jsonファイルを作成するだけで、管理画面が一つ完成します。 経緯 私の会社では、大小さまざまな自社サービスが開発・運用されています。 管理画面をサービス・サイト毎に作っていましたが、それには限界がありました。 エンジニアからしたら、管理画面用のデザインやAPIを作らなきゃいけない。工数がかかる。 運用・プロデューサーは、UI・UXが管理画面で違うため、操作を覚えるという学習コストが高い。 さらに外から見たいときにスマホから見れないし、
Google、Android用のUIテスト自動化フレームワーク「Espresso」公開
アプリケーションの画面に対してボタンを押したり入力を行い、正しい結果や答えが返ってくるか？ ユーザーインターフェイスを含むテストコードの開発は一般に手間がかかり面倒であり、テスト用のライブラリやフレームワークが欠かせません。 Googleは、Android用のUIテスト自動化のためのフレームワーク「Espresso」をテクノロジープレビューとして公開しました。 Espresso - android-test-kit - a fun little Android UI test API - Testing Tools For Android - Google Project Hosting EspressoはこれまでGoogle社内で、Google DriveやGoogle Maps、Google+など30種類のアプリケーションのテスト自動化に使われてきました。 特徴は、軽量でシンプルな記述
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Data platform for PostgreSQL - Xata
GitHub - appsmithorg/appsmith: Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
UWPアプリの洗練されたUIをWin32アプリでも ～Microsoft、「WinUI 3 Preview 1」を発表／二分されたWindows開発の世界を再編・融合させる「Project Reunion」の第一歩