Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. We’ve all been there, at the end of completing CSS for a layout and — what’s that? Ah! An extra scrollbar! Or maybe an element is an unexpected color. An
まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。 相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変わってくるように思います。 そもそもコンポーネントという概念が開発にほぼ必要ない普通のWebサイトなどであれば、多少実装しにくいと思われるかもしれませんが、あまりデザイナー側が気にする事ではないかなとも思います。 ただ、今回はReact.jsやVue.jsなどのフレームワークを使ったWebアプリケーション/サービス、また
しばたです。 前の記事でNext.jsを試す環境を作ったので本記事ではCloudscapeを実際に試してみます。 Cloudscape Design Systemとは？ Cloudscape Design SystemはAWSが作成しオープンソースで公開しているWEBデザインシステムです。 もともとAWSが内部向けに作成し改善していたものが今年の7月に一般公開されました。 雑に言ってしまえば「マネジメントコンソール風のUIをつくれるやつ」なんですが、デザインシステムの名の通りUIコンポーネント以外にデザインパターンやデモも公開されています。 注意事項 本記事ではこちらの手順に従い最初の一歩を試してみようと思っていました。 Using Cloudscape components ただ、手順をよく読んでみると最後の最後に、 Bundling with Next.js (optional) Th
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @yoshi-jr です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「Canary」: BtoC の部屋探しポータル（アプリ/Web） 「Canary Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のウェブ版（以降 CANARY Web）で利用している技術スタックをまとめています。 この記事を読んでわかること CANARY Web について技術スタックの全体像・概要が理解できる 話すこと CANARY Web のアーキテクチャ CANARY Web で利用しているモジュールとその歴史 話さないこと CANARY Web 視点以外でのアーキテクチャ 各モジュ
CSS :has Parent Selector
Have you ever thought about a CSS selector where you check if a specific element exists within a parent? For example, if a card component has a thumbnail, we need to add display: flex to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS :has which will help us to select the parent of a specific element and many other things. In this article, I will explain the probl
A redesign powered by CSS Grid and optimized for performance and accessibility. In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a variety of teams, departments, and agencies. We implemented a redesign while overhauling all the under-the-hood code. Our
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
Figma3.0リリースでFigmaがDOPEなデザインツールになった｜SketchでもAdobe XDでもない選択肢｜Nao Komura｜note
みなさんはFigmaというデザインツールをご存知でしょうか。 正直な所、Adobe XDやSketchなどと比べると知名度も低いし、それらのツールと比べても機能は充実しているのですが使い所が微妙。 (ちなみに、Figmaの公式サイトにもXD、Sketch、Invision Studio、Framerと比較したページはあるのですが全部同じ内容で肩透かしをくらいます。) という具合に個人的に推しているデザインツールではあるものの、惜しい部分が多くまだ布教できる段階では無いな、という印象も持っていました。 しかし...... バージョン3.0のリリースでその印象が大きく変わり、最強のデザインツールFigmaを布教するぞ、という気持ちになりました(謎の使命感) ということで、Figmaの機能の紹介をメインに主要なUIデザインツールであるSketchとAdobe XDとの比較なんかも合間合間していこ
Microsoftが「Microsoft Office」アプリの各アイコンデザインを一新すると発表しました。Officeのアイコンデザインの変更は2013年以来となります。 Say hello to Microsoft's new Office icons https://news.microsoft.com/europe/2018/11/29/say-hello-to-microsofts-new-office-icons/ Redesigning the Office App Icons to Embrace a New World of Work https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f すでにクラウド
Adobe XD Templates, UI kits and Freebies - Top resources on XDGuru
Adobe XD Resources, UI kits & Templates The biggest collection of free & premium resources for Adobe XD Please have a look at this massive new premium XD UI kit carefully crafted by the amazing guys at KL-Webmedia. WunderUI is a collaborative, advanced XD UI kit and design system which is created to boost your performance and productivity. With a close look into scalability, accuracy and consisten
Janko Jovanovic – Design Management and Strategic Design
A seasoned design and product lead with nearly 30 years of experience across various fields. I bring together design management, product management, strategy, futures thinking, and systems thinking to help teams and organizations navigate an increasing uncertainty and design for the preferable future. More than 25 years of experience 8 years in building, managing, and scaling cross-functional team
新アイコンは、馴染みのあるアイコンを同社の「Fluent Design System」に基づいてデザインし直し、「ビジネスのアジャイルな未来を表現した」としている。 現在のアイコンになったのは2017年のIgniteからだ。それ以前は雲を模したものだった（米Neowinより）。 Microsoftは検索サービス「Bing」のロゴも昨年10月に名称を「Microsoft Bing」とした際、Fluent Designのものに変更している。 関連記事 Windows 10の「エクスプローラー」、「ごみ箱」などが正面を向くデザイン変更（Build 21343で） Microsoftは「Windows 10」のプレビュー版プログラム「Insider Preview」でリリースした「Build 21343」で、「エクスプローラー」の新しいアイコンを披露した。ごみ箱やデバイスが正面を向き、「ドキュメン
Stoyan (@stoyanstefanov) is a Facebook engineer, former Yahoo!, writer ("JavaScript Patterns", "React: Up and Running"), speaker (JSConf, Velocity, Fronteers), toolmaker (Smush.it, YSlow 2.0) and a guitar hero wannabe. Let’s talk a bit about keeping tabs on how much CPU is consumed by an application’s JavaScript. And let’s frame the discussion around components – the atomic building blocks of the
はじめに こんにちは！お会計チームの yamakazu (@yamarkz) です。 10Xでは4月から新しい期が始まるため、最近はバタバタしています。新しい組織や取り組みが始まってきていて、今年度はこれまでとはまた違った大きな変化が生まれそうで楽しみです。 さてそんな今回は期の変わり目ということもあり、 節目として「Stailerの開発を支える取り組み」を紹介します。 取り組みはプロダクトの規模や性質、組織構造、願望によって変わる唯一無二の存在で、各社様々な工夫を凝らして、より良い開発体験を追求していると思います。 自分たちもその時々の状況に合わせて、最適なやり方に変えて開発してきました。 今後も取り組み自体は変わっていくと思いますが、2023春時点での取り組み状況 (仕組み / ルール / 文化 / ツール) をスナップショットとして取り上げみようと思います。 はじめに 前提 取り組み
How Spotify’s Design System Goes Beyond Platforms | Figma Blog
Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components. In 2019, when our leadership at Spotify unveiled their ambition to make audio content available and consistent to anyone on any device, our design team faced a significant challenge: Spotify would now be available across 45 unique platforms, and
Design systems have become core to the way we design and build at GitHub. Since 2011 GitHub designers have documented UI patterns and shared common styles. In 2012, CSS and other assets were packaged up into a Ruby Gem for use in GitHub websites — this package was named Primer. Primer continued to be used internally for years before eventually having its CSS and accompanying documentation open-sou
まずOffice 365のWordで一部ユーザーが利用できるようになる。全ユーザーに提供する前にフィードバックを集めるとしている。 新しい色調とアイコン 色やアイコンがFluent Designによる洗練されたものになる。その一環で、共同編集でのコメントが色別になり、誰のコメントだかが分かりやすくなる。 新しいデザインはまずオンライン版Wordに適用され、7月にはWindows版のOutlookに、8月にはMac版Outlookに登場する見込み。 AI採用の高度な検索機能 各アプリに「ゼロクエリ検索」機能を追加する。これは、検索枠に何も入れずにカーソルを置いただけで、そのときに表示されている内容をAI（人工知能）が解析し、関連性の高いクエリ候補を表示するというものだ。企業向けOffice.com、SharePoint Online、Outlookのモバイルアプリでは既にこの機能が使えるよう
Availability is in some sense a much wider concept than uptime, since the availability of a service can also be affected by, say, a network outage or the company owning the service going out of business (which would be a factor which is not really relevant to fault tolerance but would still influence the availability of the system). But without knowing every single specific aspect of the system, t
Consider the fox. It’s known for being quick, clever, and untamed — attributes easily applied to its mythical cousin, the “Firefox” of browser fame. Well, Firefox has another trait not found in earthly foxes: stretchiness. (Just look how it circumnavigates the globe.) That fabled flexibility now enables Firefox to adapt once again to a changing environment. The “Firefox” you’ve always known as a b
Type safe CSS design systems with @propertySeptember 1, 20238 min read CSS types are a worthy investment into type safety in your front-end work. We're still awaiting cross browser interop, but we'll get there 🙂 In case you've never seen one, here's a typed CSS variable with @property: @property --focal-size { syntax: '<length-percentage>'; initial-value: 100%; inherits: false; } Used that one so
A Virtual CSS language with enhanced syntax.Efficiently build your UI and design system with HTML only. <button class="btn ">
金森 由博 博士(情報理工学), 准教授 筑波大学 理工情報生命学術院 システム情報工学研究群 (旧: システム情報工学研究科) 情報理工学位プログラム (旧: コンピュータサイエンス専攻) (情報メディア創成学類) Google Scholar ※研究室の情報については「計算幾何学とグラフィックス研究室 (CGG)」(旧: 非数値アルゴリズム研究室) をご覧ください。 筑波大の住所: 〒305-8573 茨城県つくば市天王台 1-1-1 [map] [バス情報] 居室: 第三エリア F 棟 828 号室 (Phone/Fax: 029-853-5724) 研究室 1: 総合研究棟 B 棟 1125 号室 (Phone/Fax: 029-853-5600, 内線 8473) 研究室 2: 総合研究棟 B 棟 925 号室 (Phone/Fax: 029-853-5388) E-mail:
Material design in the 2014 Google I/O app
By Roman Nurik, lead designer for the Google I/O Android App Every year for Google I/O, we publish an Android app for the conference that serves two purposes. First, it serves as a companion for conference attendees and those tuning in from home, with a personalized schedule, a browsing interface for talks, and more. Second, and arguably more importantly, it serves as a reference demo for Android
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
デザインシステムについての知見が溜まってきたので、The 12 Factor App のパロディで The 12 Factor Design System というものを考えてみました。 元ネタのThe 12 Factor AppはモダンなWebアプリケーションとしてあるべき姿を12のベストプラクティスにまとめた方法論です。 それを真似て、自身の経験からデザインシステムとしてあるべき姿を12個にまとめてみました。 無理やりなところやコンテキストによるところがあると思いますが、半分ネタ半分本気で作りました。 文章の構成などもあえて真似て書いています。 何かの参考になればと思います。 はじめに デザインシステムは次のようなWebサービスやアプリを作り上げるための方法論です。 宣言的なフォーマットを使い、プロジェクトに新しく加わったメンバーが要する時間とコストを最小化する。 UIパーツの依存関係を
Vercel Design
researchers.Vercel has brought together some of the most talented creatives on the web to craft world-class websites. HomeResourcesPeopleCareers Resources that we take care of and work with.We design systems and systemise designs. Imbuing our work with care and craft as stewards of the Vercel Brand and Geist Design System.
GitHub - plasmicapp/plasmic: Visual builder for React. Build apps, websites, and content. Integrate with your codebase.
Plasmic combines some seemingly disparate genres: Webflow, Wordpress and other site builders Retool and other tool builders Glide and no-code app builders Contentful and other CMSes Today these are different tools to specialize in, but the line between, say, a website and an application is blurry (consider an ecommerce storefront with user logins). With the right foundations, we think these can be
こんにちは。Incrementsのデザイナーの綿貫です。 今回はIncrementsで運用しているデザインシステムの公開をお知らせします。 この記事は前編後編に分かれており、前編の内容は以下の通りです。 公開データについてデザインシステム公開の背景Incrementsのデザインシステムの構造トピック：Figmaの使用について公開データについて前編で公開するデータは以下の2つです。 詳細は後ほど説明しますが、プロダクトに関係なくIncrementsを横断して使用しているデータです。 デザインシステム公開の背景現在Incrementsではデザインにも力を入れています。 目に見える機能変更から社内の体制の改善まで、2020年から領域を問わず様々な再設計を実施してきました。 その一環で小規模なデザインシステムも作成しました。 作って終わりではなく、アップデートを重ねるうちに段々と軌道に乗っています
ep.30 「デザインシステムにおけるフロントエンド」公開AMA in DEV DAY Venue | UIT INSIDE
LINE DEVELOPER DAY 2019 スピーカーである okazou に、@potato4d, @kotarok, @myakura の三人で登壇内容についての質問・座談会を実施しました。 Guest @myakura @kotarok LINE DEVELOPER DAY 2019 Day 2 での @okazou の発表 https://linedevday.linecorp.com/jp/2019/sessions/A2-3 https://speakerdeck.com/line_devday2019/front-end-in-design-system LINE のデザインシステム LINE DEVELOPER DAY 2019 Day 2 でのもう一つの発表 https://linedevday.linecorp.com/jp/2019/sessions/A2-2 h
Windows 10の次期大型アップデート「Fall Creators Update」発表、作業記憶機能「Timeline」＆iOS・Androidとの連携強化など新機能まとめ
Microsoftがシアトルで開催中の開発者会議「Build 2017」で、Windows 10の次期大型アップデート「Fall Creators Update」(コードネーム：Redstone 3)を発表しました。過去の作業を再開できる「Timeline」やiOS・Android端末ともシームレスな同期が可能なMicrosoft Graphの改良など、新機能が盛りだくさんの内容になっています。 Coming soon starting with the Windows 10 Fall Creators Update https://www.microsoft.com/en-us/windows/upcoming-features Windows 10 Fall Creators Updateの新機能については、以下のダイジェストムービーで紹介されています。 Windows 10 Fall
Why we decided to rewrite our iOS & Android apps from scratch — in React Native
Our project name for the RN app rewrite, DenaliBackgroundHi, I am Naoya, a Senior Engineering Manager at Mercari. Along with my small but mighty team of frontend developers, I am responsible for delivering the Mercari app experience to our customers. Today, I’m here to explain why we’ve made the ambitious decision to completely rewrite our apps using React Native. Growth drives changeCurrently, we
はじめに メルカリでやったこと 1. GroundUp App プロジェクトへの参加 2. 登壇発表 3. 社内ハッカソンでの優勝 Cloudbaseへ 転職を決めるまで 入社後の感想 終わりに はじめに こんにちは。 @0meo です。 2022年12月でメルカリを退職し、2023年1月よりCloudbase株式会社に転職しました。 この記事はメルカリの退職・Cloudbaseの入社エントリになります。 メルカリでやったこと メルカリに入社するまでのお話はこちら。 meokz.hatenablog.com 1. GroundUp App プロジェクトへの参加 メルカリでの主な仕事は、メルカリアプリの0からフルスクラッチプロジェクトへの参加でした。 mercan.mercari.com 2年半に渡る大規模なプロジェクトのうちお手伝いさせて頂いたのは後半の半年ほどです。MAU2000万人規模
こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 21日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう！という企画です。 今回は全4回のラスト！最後は、スペーシングについて深掘りしていきます。 1～3回目の記事はこちらからご覧ください↓ techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.jmdc.co.jp 概要 あなた
小さく始める Design System ~メドレー TechLunch~ | MEDLEY Developer Portal
2018-04-26小さく始める Design System ~メドレー TechLunch~こんにちは、開発本部の舘野です。 先日、メドレーで定期開催している社内勉強会「TechLunch」にて、Design System について発表しました。医療介護の求人サイト「ジョブメドレー」において、Design System を「小さく始める」手法で導入を進めているので、そのプロセスについて紹介させていただこうと思います。 Design System とは何かDesign System とは、Salesforce のLightning Design Systemや IBM のCarbon Design Systemなどが代表的な例として挙げられると思いますが、平たく言ってしまうとプロダクト独自のBootstrapとなるものです。 UI 開発の領域では、これまでスタイルガイドを作ることでデザイナ
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
ユーザーにとって取り返しのつかない操作を提供する際の基準を定義しています。 基本的な考え方一度実行するとやり直しや巻き戻しが効かない操作のことを「取り返しのつかない操作」としています。 サービス内でのデータ損失の原因の多くは人的ミスによるものです。 ユーザーの誤操作によって「取り返しのつかない操作」が実行されないよう、提供時に十分に配慮しましょう。 代表的な取り返しのつかない操作取り返しのつかない操作の代表的なものとして以下のような操作があります。 登録されたデータを削除する操作設定をリセットする操作復元方法がない、または復元に複雑な手順を要するステータスの変更操作取り返しのつかない操作ボタンの提供方法取り返しのつかない操作をボタンなどのコンポーネントで提供する際は、ユーザーの誤操作を防ぐために可能な限りメイン操作領域の遠くに置く（1）、または領域を変更して置くこと（2）を推奨します。 上
Yelp Design — Cookbook
Cookbook is Yelp's design system for digital experiences, and follows Brad Frost's Atomic Design methodology. Our system carries through with the food analogy by using ingredients for our styles, recipes for our components, and entrees for complex components.
Design Lint | Figma
Find and fix errors in your designs. Design Lint is a plugin that finds missing styles within your designs. It's perfect for fixing errors in your Design System or designs before handoff. Because Design Lint doesn't try and manage your library, there's no logging in or signing up for accounts. ...
2017年のBuildカンファレンスにおいて、マイクロソフトはフルーエントデザインシステムを発表しました。ネオンというコードネームで開発されていたこのデザインは、現行のWindows 10のデザインに半透明とアニメーションを加えるものです。一体どんなものなのか、ご紹介しましょう。 フルーエントは未来のデザインシステムとなるか マイクロソフトは、フルーエントをデザインランゲージではなく、デザインシステムと呼んでいます。これは見た目だけではなく、ユーザーとの双方向性を重視しているためです。 フルーエントは従来の画面と入力方法のみならず、これから登場する新しいインターフェースのことも想定しています。パソコン、スマートフォン、タブレットはもちろん、VR（仮想現実）やAR（拡張現実）、ウェアラブルなど多彩なフォームファクターに対応します。またタッチが前提となっていた以前のデザインとは異なり、モーショ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Guide To CSS Debugging — Smashing Magazine
Figmaにおけるコンポーネントとバージョンの管理について考える｜Nao Komura｜note
Next.jsでCloudscape Design Systemを試してみた | DevelopersIO
2024年｜CANARY Web の技術スタック
Rebuilding slack.com - Slack Engineering
A Complete Guide to CSS Cascade Layers | CSS-Tricks
Microsoft Officeのアイコンデザインが刷新される
Microsoft、「Azure」の新アイコン発表 「Fluent Design System」準拠
JavaScript component-level CPU costs
Stailerの開発を支える取り組み 2023春 - 10X Product Blog
Design systems at GitHub
Microsoft、Officeも「Fluent Design」に コンパクトなリボンやAI検索機能など
Distributed systems for fun and profit
Firefox: The Evolution Of A Brand – Mozilla Open Design
Type safe CSS design systems with @property · September 1, 2023
Master CSS - A Virtual CSS language with enhanced syntax.
Yoshihiro Kanamori's homepage
primer/primer: The design system that powers GitHub
The 12 Factor Design System - UGAP Engineer's Blog
Incrementsのデザインシステム公開のお知らせ（前編） - Qiita Blog
メルカリを退職してCloudbase株式会社に転職しました - めおしーえす
デザインシステムめっちゃ見る④ スペーシング編 - JMDC TECH BLOG
Windows版「Word」、「Excel」、「PowerPoint」のアクセス権管理機能が改良へ／Fluent Design Systemに準拠、わかりやすく、使いやすく
GitHub - kufu/smarthr-design-system
取り返しのつかない操作 | デザインパターン（共通） | SmartHR Design System
NEW「フルーエントデザイン」はWindows 10のプレビュービルドで試そう！