sagarayaのブックマーク - はてなブックマーク

HeadlessなUIライブラリを利用する価値

Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/

sagaraya 2024/06/25

リンク

デザインファイルにおける命名規則を策定した話【Figma】｜三上蒼太 / Sota Mikami

こんにちは、ほぼフルタイムのフリーランスとして株式会社mikanでデザイナーをしています、三上蒼太(@sota_mikami)です。英語アプリmikanは、もうすぐ10歳になる長寿アプリです。アプリ自体はシンプルさを保ち続けていますが、多くの実験が積み重ねられてきた歴史があります。ただその歴史ゆえに古い画面のデザインデータが一部なかったり、設計意図や当時の背景がわからず評価の難しい画面があったりと、デザインデータと意図を管理するための標準化が一つの重要な課題となっていました。今回は、その一環としてmikanにおけるデザインデータの命名規則を策定した話を記録します。なぜ命名規則を作ったのか？デザインファイルにおける命名規則を策定するのは、チーム内での共通認識を高めて効率的なコミュニケーションを図ることが目的です。命名規則がないと、デザイナーごとに異なる命名が行われ、他のメンバーがフ

sagaraya 2024/06/24

リンク

Analytics Engineeringチームの目標管理

発表した場所: https://timeedev.connpass.com/event/299088/ 発表者: https://twitter.com/__hiza__

sagaraya 2024/06/24

リンク

StorybookとPlaywrightがもたらす画期的なUIテスト

はじめに StorybookとPlaywrightを連携してテストすることで、思っていた以上に良い開発体験が得られたので紹介します。今回の記事で紹介するテストは以下のリポジトリで公開しています。具体的には以下の点が最高でした。独立したコンポーネント開発 Storybookを利用することで、UIコンポーネントを独立して開発・テストできます。これにより、コンポーネントの再利用性が向上し、効率的な開発が可能になります。シナリオベースのテスト Playwrightを使ってシナリオベースのテストを実行できます。これにより、ユーザーの実際の操作に近い状況でのテストが可能となり、アプリケーションの品質を高めることができます。クロスブラウザテストの容易さ Playwrightは、複数のブラウザでの自動テストをサポートしています。これにより、異なるブラウザでの動作検証が容易になり、互換性の問題を効

sagaraya 2024/06/24

リンク

じゃあなんすか、Noto Sans JP使うんならボタンにアイコン入れるなって事すか｜chot Inc. デザイナーユニット

こんにちは、ちょっと株式会社デザイナーのモです。挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。何の変哲もないテキストとアイコンで構成されたボタンです。今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。﹁暑いね﹂って言ったら﹁水飲めば？﹂って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。論に拍車をかけるためにボタンに分割線を引いてみました。アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが︵良くない︶実際にずれていて、ではなぜそんなことになっちゃっているのか

sagaraya 2024/06/21

リンク

開発組織のOKRの作り方 / OKR in a development division

Mutation Testingを活用してテスト品質を考える /introduction to mutation testing

sagaraya 2024/06/18

リンク

Can an entitlements file be specified when using -exportArchive with an unsigned archive?

sagaraya 2024/06/17

リンク

GitHub - BuilderIO/mitosis: Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.

You 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

sagaraya 2024/06/02

リンク

グッドパッチのUIデザイナーになるのはどんな人？「ボス」に募集要項を解説してもらおう！｜Goodpatch Blog グッドパッチブログ

こんにちは。グッドパッチでソフトウェアデザイナーをしているmine/BitsVaderです。春といえば新しい出会い、門出の季節。皆さんの中にも家族の卒業や入学、またご自身のキャリアの新しいスタートを切ったという方もいるでしょう。かくいう私も今年の3月にグッドパッチに転職し、新鮮な環境で日々デザインを楽しんでいます。さて、今回の記事は﹁グッドパッチのUIデザイナーの募集要項﹂がテーマです。募集要項というと、転職活動で誰もが目にするものですが、記載されている言葉は短く、端的に説明されていることも多いので、情報の解釈は候補者側に一定委ねられることが多いと感じています。そこで、今回はUIデザイナーの募集要項について、細かい言葉のニュアンスや意図を改めてUID︵User Interface Design Unit︶の組織統括である石井に聞いてみました。石井克尚‥User Interface

sagaraya 2024/05/20

リンク

Ruby on RailsのMPAでForem流の"Islands Architecture"を導入するメリット・デメリット

RubyonRailsのMPAでForem流の"Islands Architecture"を導入するメリット・デメリット Forem流のIslands Architectureとは Forem(dev.toのOSS)はメインの技術スタックは現在でもRubyonRailsであり、フロントエンドにはPreactとその他いくつかのフロントエンドのスタックを使って実装されています。 CDNをつかって積極的にキャッシングされているということもあり、サイトの応答速度はいっとき﹁阿部寛のホームページくらい早い﹂ということが言われただけあり、レスポンス速度には定評があります。現在でもHerokuで運用されていますが、まだ早く表示されるので、よかったらご覧ください。そんな一世を風靡したforemは今でもRailsとPreactを使っていて、そこで﹁Islands Architecture﹂を採

sagaraya 2024/05/13

リンク

WebComponentsを会社で使い始めた話

最近では、WebComponentsを使ってデザインシステムを構築している事例を見たりしていて、WebComponentsの使い方としては﹁見た目など﹂の観点でのCustomElementsの活用が目立っているように感じます。﹁見た目の観点での活用﹂はあまり新鮮味がないようにも感じるので、弊社ではUIの共通化以外観点でCustomElementsを使い始めたので、良いところを含めて紹介していきたいと思います。 CustomElementsの良いところ 1. JSの処理を内部に閉じ込めることができる DOM操作やイベントハンドラーのスコープをCustomElementsに限定できるのがメリットで、いわゆるVanillaJSで雑にクリックイベントをつけるとなるといちいちHTMLIDをつけたりが必要で面倒だったのです。 function handleClick(e) { console.l

sagaraya 2024/05/13

リンク

IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO

はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。デザインシステムやカラーシステムは﹁プロダクトのためのプロダクト﹂なので、とある事業における一つの解である、という前提で読んでください。今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料後でFigma Communityにも掲載しますシチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ

sagaraya 2024/05/10

リンク

「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog

﹁Ameba﹂は2020年に16周年を迎える長寿サービスです。プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。﹁Ameba﹂開発チームではそのような、過去の遺物に開発リソースを割かれる状態を﹁負債﹂と呼び、その解消のために日々戦っています。さらに、﹁Ameba﹂には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、﹁Ameba﹂内でGUIに関する、共通の意識や見解を持つことができなくなっていました。この状態を打開し、﹁Ameba﹂プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。今回はそのデザインシステムの中でも真っ先に取り組んだ要

sagaraya 2024/05/10

リンク

Node.jsで作るCLIアプリケーション | 第2回 Commander.js：前編

Web制作会社、システム開発会社を経て、主にフレームワークを用いたサーバーサイドとフロントエンドをまたいだB2Bシステムの開発に従事。そのかたわら、JavaScriptへの興味が尽きず、静岡JavaScript勉強会の開催や、JavaScript関連の公式ドキュメントの翻訳などを行う。個人の活動として、JavaScript関連のライブラリやフレームワークなどの公式ドキュメントを翻訳したjs STUDIOを運用している。

sagaraya 2024/05/10

リンク

Vue.js最新動向

ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design

sagaraya 2024/05/10

リンク

LCHは、UIにベストなカラースペース｜hirotoarakawa

Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the LinearUI (part Ⅱ) その記事の中で﹁LCHカラースペース﹂について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness︵明度︶、Chroma︵彩度︶、Hue︵色相︶の略。 HSL と LCH の違いLightness︵明度

sagaraya 2024/05/10

リンク

チームの生産性と向き合う

こんにちは @glassmonekeyです。 Ubie 株式会社に転職してあっという間に二ヶ月が立ちました。現在私は toC 向けのアプリケーションに配信する施策を入稿・管理するシステム﹁案件管理システム﹂の開発チームに所属しています。そのチーム内で現在、私はテックリードというロールで、日々の開発を一人のエンジニアとして進めつつもチームの生産性改善、技術的な意思決定のファシリテーションなどに取り組んでいます。今回のエントリでは、何かと話題となるエンジニアリングの生産性ですが、テックリードとしてどのように向き合ったのか、どのように改善し今後どうしていくのか？を紹介します。生産性の定義前提として生産性を正しく計測することは難しく、それこそ生産性を下げる行為だと私は考えています。 @hiroki_daichiさんの開発生産性について議論する前に知っておきたいことに詳細は譲るとして、一般

sagaraya 2024/05/07

リンク

Node.js の進化に伴い不要となったかもしれないパッケージたち

tl;dr はじめに 2024 年の 4 月 24 日に Node.js 22 がリリースされました。ESM を条件付きで require する機能や、--run フラグによる npm スクリプトのパフォーマンス改善などが v22 で追加され、2009 年に Ryan Dahl が Node.js をリリースしてから 15 年が経つ今も、Node.js は進化を続けています[1]。こうして Node.js 自身が強化されていくにつれ、以前はサードパーティーのパッケージを使用して実現することが一般的であった機能が Node.js のみで実現可能となり、当該パッケージが不要となるような場合があります。冒頭に引用した Ben Holmes の動画では、そのように不要となったパッケージとして dotenv node-fetch chalk mocha が挙げられていますが、この記事では「これら

sagaraya 2024/05/06

リンク

PR TIMESにおけるPlaywrightを用いたVisual Regression Test | PR TIMES 開発者ブログ

{ "scripts": { "_docker": "docker run --rm --ipc=host -v $(pwd):/workspace mcr.microsoft.com/playwright:v$(node -e 'console.log(require(\"./package.json\").devDependencies[\"@playwright/test\"])')-jammy", "_test": "playwright test", "_test:ci": "CI=1 playwright test", "_test:u": "playwright test --update-snapshots", "serve": "ts-node -r tsconfig-paths/register server.ts", "test": "pnpm run _docker