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
グッドパッチのUIデザイナーになるのはどんな人？「ボス」に募集要項を解説してもらおう！｜Goodpatch Blog グッドパッチブログ
こんにちは。グッドパッチでソフトウェアデザイナーをしているmine/BitsVaderです。 春といえば新しい出会い、門出の季節。皆さんの中にも家族の卒業や入学、またご自身のキャリアの新しいスタートを切ったという方もいるでしょう。かくいう私も今年の3月にグッドパッチに転職し、新鮮な環境で日々デザインを楽しんでいます。 さて、今回の記事は「グッドパッチのUIデザイナーの募集要項」がテーマです。 募集要項というと、転職活動で誰もが目にするものですが、記載されている言葉は短く、端的に説明されていることも多いので、情報の解釈は候補者側に一定委ねられることが多いと感じています。 そこで、今回はUIデザイナーの募集要項について、細かい言葉のニュアンスや意図を改めてUID（User Interface Design Unit）の組織統括である石井に聞いてみました。 石井克尚：User Interface
Ruby on RailsのMPAでForem流の"Islands Architecture"を導入するメリット・デメリット
Ruby on RailsのMPAでForem流の"Islands Architecture"を導入するメリット・デメリット Forem流のIslands Architectureとは Forem(dev.toのOSS)はメインの技術スタックは現在でもRuby on Railsであり、 フロントエンドにはPreactとその他いくつかのフロントエンドのスタックを使って実装されています。 CDNをつかって積極的にキャッシングされているということもあり、サイトの応答速度は いっとき「阿部寛のホームページくらい早い」ということが言われただけあり、レスポンス速度には定評があります。現在でもHerokuで運用されていますが、まだ早く表示されるので、よかったらご覧ください。 そんな一世を風靡したforemは今でもRailsとPreactを使っていて、そこで「Islands Architecture」を採
WebComponentsを会社で使い始めた話
最近では、WebComponentsを使ってデザインシステムを構築している事例を見たりしていて、WebComponentsの使い方としては「見た目など」の観点でのCustomElementsの活用が目立っているように感じます。 「見た目の観点での活用」はあまり新鮮味がないようにも感じるので、 弊社ではUIの共通化以外観点でCustomElementsを使い始めたので、良いところを含めて紹介していきたいと思います。 CustomElementsの良いところ 1. JSの処理を内部に閉じ込めることができる DOM操作やイベントハンドラーのスコープをCustomElementsに限定できるのがメリットで、 いわゆるVanillaJSで雑にクリックイベントをつけるとなるといちいちHTMLIDをつけたりが必要で面倒だったのです。 function handleClick(e) { console.l
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
Node.jsで作るCLIアプリケーション | 第2回 Commander.js：前編
Web制作会社、システム開発会社を経て、主にフレームワークを用いたサーバーサイドとフロントエンドをまたいだB2Bシステムの開発に従事。そのかたわら、JavaScriptへの興味が尽きず、静岡JavaScript勉強会の開催や、JavaScript関連の公式ドキュメントの翻訳などを行う。個人の活動として、JavaScript関連のライブラリやフレームワークなどの公式ドキュメントを翻訳したjs STUDIOを運用している。
LCHは、UIにベストなカラースペース｜hirotoarakawa
Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the Linear UI (part Ⅱ) その記事の中で「LCHカラースペース」について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。 この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness（明度）、Chroma（彩度）、Hue（色相）の略。 HSL と LCH の違いLightness（明度
チームの生産性と向き合う
こんにちは @glassmonekeyです。 Ubie 株式会社に転職してあっという間に二ヶ月が立ちました。 現在私は toC 向けのアプリケーションに配信する施策を入稿・管理するシステム「案件管理システム」の開発チームに所属しています。 そのチーム内で現在、私はテックリードというロールで、日々の開発を一人のエンジニアとして進めつつもチームの生産性改善、技術的な意思決定のファシリテーションなどに取り組んでいます。 今回のエントリでは、何かと話題となるエンジニアリングの生産性ですが、テックリードとしてどのように向き合ったのか、どのように改善し今後どうしていくのか？を紹介します。 生産性の定義 前提として生産性を正しく計測することは難しく、それこそ生産性を下げる行為だと私は考えています。 @hiroki_daichiさんの開発生産性について議論する前に知っておきたいことに詳細は譲るとして、一般
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 が挙げられていますが、この記事では「これら
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
デザインシステム【アイコンデザインルール設計】〜プロセス大解剖〜｜エクサウィザーズ HR note
エクサウィザーズでAIプロダクトのUI/UXデザイナーを担当している吉田です。前回はデザインシステムのアルゴリズムを活用したカラーパレット開発についてご紹介しました。今回はアイコンのデザインをどのように定義していったかのプロセスをご紹介します。 デザインシステムを開発する前の状態エクサウィザーズは 2016年に AI スタートアップ会社として起業してから、「AIを用いた社会課題解決を通じて幸せな社会を実現する」というミッションのもと、10 個以上の AI プロダクトを開発してきています。 社会に新たな価値を早く届けようと、それぞれのチームがスピード感をもって開発してきたという背景もあり、プロダクト間の UI デザインの一貫性を保つ取り組みに手をつけられないままこれまで駆け抜けてきました。 例えばアイコンでは、Material Icons を使用していたり、Font Awesome を使用し
イネーブリングチームの考え方と実践例 — 組織の価値提供能力をいかに高めるか
はじめに 弊社マイベストでは、エンドツーエンドの機能開発チームとは別で、組織の価値提供能力を高めることを目的としたイネーブリングチームがあります。（と言ってもまだ他チームとの兼任メンバーがほとんどですが） イネーブリングチームは、バックエンドやフロントエンドなど、領域ごとに技術課題を解決すべく活動していて、自分はフロントエンド領域を担当しています。 これまで様々な活動を行ってきたので、その考え方を整理しつつ、フロントエンドイネーブリングの実践例をご紹介したいと思います。 参考：マイベストのチーム構成イメージ（記載は一部のみ・名称は仮です） 「イネーブリングチーム」とは イネーブリングは『チームトポロジー 価値あるソフトウェアをすばやく届ける適応型組織設計』、通称チートポから持ってきた名称なので、まずはチートポをベースにその役割を説明します。 https://amazon.co.jp/dp/
ファーストクラスコレクション
はじめに ファーストクラスコレクションの出典を知らなかったので、調べて、結果とメリデメをまとめました。サンプルコードはGoで書いています。 ファーストクラスコレクションの定義 ファーストクラスコレクションとは、ThoughtWorksアンソロジーで登場するデザインパターンです。以下のように定義されています。 プログラミング言語で提供されているリストやマップなどのコレクションをプリミティブと見なして、それをラップしたクラスをファーストクラスコレクションと呼んでいる そして、次のように書かれています。 コレクションを持つクラスには、他のメンバ変数を持たせないようにしてください。各コレクションをそれぞれ独自のクラスにラップすることで、コレクションに関する振る舞いをそのクラスに置くことができるようになります。 注意してほしいことですが、ファーストクラスコレクションでは、配列やコレクションをイミュー
30分で分かった気になるチームトポロジー
2. 吉羽 龍太郎 (@ryuzee) ✤ 株式会社アトラクタ取締役CTO/アジャイルコーチ ✤ Scrum Alliance ✤ 認定スクラムトレーナー Regional (CST-R) ✤ 認定チームコーチ (CTC) ✤ 『SCRUM BOOT CAMP THE BOOK』 『スクラム実践者が知るべき97のこと』 『みんなでアジャイル』 『プロダクトマネジメント』 『レガシーコードからの脱却』ほか ✤ @ryuzee / https://www.ryuzee.com/ 2 4. 今日の話: チームトポロジー ✤ 2021/12/1 日本能率協会マネジメントセンター刊行 ✤ マシュー・スケルトン、マニュエル・パイス著 ✤ 原田騎郎、永瀬美穂、吉羽龍太郎訳 ✤ 担当編集: 山地淳さん ✤ Kindle版もあります ✤ まだお持ちでない方、是非お買い求めください ✤ 本スライド掲載の図表は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js最新動向
Xcode Cloud事例紹介
デザインシステムにおけるタイポグラフィーの試行錯誤 - DMM inside
DDDでレガシーコードに立ち向かうリアル / Reality of confronting legacy code with DDD
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
