Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add physical realism and can be used to make rich, tactile interfaces. Take the landing page below. It is for cycling tours in Iceland. Notice the embellished drop shadow of the cyclist and how it creates the perception that they are flying above no
Vue.js has been selected as Wikimedia Foundation's future JavaScript framework - Wikitech-l - lists.wikimedia.org
Hi all, With excitement we're sharing today that Vue.js is Wikimedia Foundation's official choice for adoption as future JavaScript framework for use with MediaWiki. The evaluation of front-end frameworks officially started mid 2019, as part of the Platform Evolution program’s goal to evolve our technology platform and development processes to empower the Wikimedia Movement[0]. The corresponding T
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
アクセシビリティを川柳で学ぶというアプローチ - GAADjp2022で登壇しました - 弁護士ドットコム株式会社 Creators’ blog
こんにちは。弁護士ドットコムの太田です。 毎年、5月の第3木曜日は "Global Accessibility Awareness Day (GAAD)" とされています。世界的にデジタル分野のアクセシビリティを考える日ということで、アクセシビリティ関連のイベントが盛り上がります。日本でもさまざまな発表がなされたり、イベントが開催されたりします。 そんなわけで、今年2022年の第三木曜日である5月19日に、GAAD Japan 2022 というイベントが開催されました。このイベントで「大変だ アクセシビリティ なにすれば 〜川柳で見るアクセシビリティ再入門〜」と題してお話ししてきましたので、その様子や裏話をご紹介します。 このセッションのコンセプト 紹介した川柳と解説 大丈夫 ガイドラインが ちゃんとある まず欲しい 代替テキスト あと見出し いつだって 忘れちゃいけない キーボード これ
Overlay Fact Sheet
What is a web accessibility overlay?Overlays are a broad term for technologies that aim to improve the accessibility of a website. They apply third-party source code (typically JavaScript) to make improvements to the front-end code of the website. Website add-on products claiming to improve accessibility go back to the late 1990s with products like Readspeaker and Browsealoud. They added text-to-s
We’re here to help you build experiences that inspire people to create the life they love
A Complete Guide To Accessible Front-End Components — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. Table of ContentsBelow you’ll find an alphabetical list of all accessible components. Skip the table of contents, or j
JSer.info #691 - Bun v1.1.5がリリースされました。 Bun v1.1.5 | Bun Blog bun build --compileがクロスコンパイルに対応し、Windows/Linux/macOSに対応したSingle Executable Binaryを出力できるようになっています。 また、package.jsonの末尾カンマを許可するようになる変更やbun.reportが追加されています。 その他には、Import Attributesで任意ファイルをtext/json/toml/fileとしてインポートできるようになるといった変更があります。 React v18.3.0がリリースされました。 Release 18.3.0 (April 25, 2024) · facebook/react React 19 Betaもリリースされていますが、React 1
Update October 2019: Learn how to build a design system from scratch with a free 9 chapter guide Design Systems for Developers (includes real code commits!) Storybook is the most popular component explorer on the planet. It’s used by 20,000+ GitHub projects and maintained by over 700 contributors. As the team and project scale new UI challenges are unearthed. More developers means higher communica
今回はデザイントークンのコミュニティグループ、仕様ドラフトの動きと、その中で説明されているデザイントークンの役割に焦点を当てて紹介します。そしてデザイントークンをより効果的に活用するための便利なツールについても紹介します。 Design Tokens Community Group デザイントークンは色やスペースなどデザインと実装においてそれ以上分解できない核のような存在です。このデザイントークンを利用するために仕様策定をするコミュニティがDesign Tokens Community Groupです。 Design Tokens Community GroupはW3CのCommunity Groupに2020年頃に設立されました。W3CのCommunity Groupはオープンに議論をしていくことを目的とし、W3C COMMUNITY CONTRIBUTOR LICENSE AGREEM
今年の3月3日にUIリニューアルのお知らせがありました。私はエンジニアとして、開発面をサポートするツールの導入やフロントエンドの実装を担当しました。 UIリニューアルに至った理由として、デザイナー組織が誕生したことが上げられます。今までは専業のデザイナーがおらず、デザインカンプもない状態でした。そして、組織の体制が変わるにあたって、エンジニアとデザイナー間での開発フローを最優先で整える必要がありました。 そこで、デザイン・開発フローの一例として、Style DictionaryとStorybookを導入してデザイントークンを連携したmicroCMSの事例を紹介致します。 概要UIリニューアルをするにあたって、FigmaにmicroCMS Design Systemとしてデザインを作成して頂きました。(サムネイルがすごいいい感じだったのでシェアします) Figma上では、管理画面の各ページ毎
⚓ T241180 RFC: Adopt a modern JavaScript framework for use with MediaWiki
"Love" token, awarded by Prototyperspective."Pterodactyl" token, awarded by Ash_Crow."Like" token, awarded by Peb."Orange Medal" token, awarded by Pablo-WMDE."Like" token, awarded by eranroz."Party Time" token, awarded by Mvolz."Mountain of Wealth" token, awarded by WMDE-leszek."Party Time" token, awarded by Osnard."Party Time" token, awarded by Addshore."Love" token, awarded by Jakob_WMDE."Like"
MDN Web Docs evolves! Lowdown on the upcoming new platform – Mozilla Hacks - the Web developer blog
MDN Web Docs evolves! Lowdown on the upcoming new platform The time has come for Kuma — the platform that powers MDN Web Docs — to evolve. For quite some time now, the MDN developer team has been planning a radical platform change, and we are ready to start sharing the details of it. The question on your lips might be “What does a Kuma evolve into? A KumaMaMa?” For those of you not so into Pokémon
June 21, 2023Making Figma better for developers with Dev Mode How can a design tool work better for developers? It’s a question we’ve been asking ourselves and our community. Today, we’re excited to introduce Dev Mode, a new workspace in Figma that’s designed to get developers what they need, when they need it, harnessing the tools they use every day. Figma was born on the web—an unconventional st
CSS Style Queries
For me, 2022 is the best year ever for CSS. We got a lot of new stuff supported in stable browsers and it’s just like living a dream. From CSS subgrid, :has selector, container queries, and the new viewport units. So many things to grasp, I understand - but I’m sure we agree that this is exciting, isn’t it? Recently, the Chrome team released experimental support for a new proposed CSS spec, style
Updates HTML/CSS By Nicola Saunders - 8 September 2021 The W3C Design System website is now live at https://design-system.w3.org, with the Git repo at https://github.com/w3c/w3c-website-templates-bundle/tree/design-system-docs. Design Systems can be complex, so the focus has been on writing high-quality documentation with code examples. It contains all the documentation on how to use the different
School Of SRE
School of SRE Site Reliability Engineers (SREs) sits at the intersection of software engineering and systems engineering. While there are potentially infinite permutations and combinations of how infrastructure and software components can be put together to achieve an objective, focusing on foundational skills allows SREs to work with complex systems and software, regardless of whether these syste
こんにちは！はのめぐみです。キッチハイクというサービスでデザイナをしています。 弊社では 2019年3月から Figma を導入し約半年たちました。今ではすっかりチーム全体に浸透し、デザインの確認 = Figma として認知されています。 ○ デザイナだけでなく Figma を使うエンジニア側の視点 ○ チームで仕組み化につなげるためのヒント・条件 この記事では、Figma 導入を通して得られた学びや使う人の視点も意識して書いています。チームで導入を検討している方の参考になれば幸いです🙌 チーム利用で感じた Sketch の限界 Sketch にはチームで必要な共有やバージョン管理の仕組みがありません。そのため、用途に応じて複数のツールを連携します。デザインに更新・修正が入るたび、Abstract・inVision・Zeplin に反映する作業がデザイナの時間を圧迫していました。更新漏れ
React.js LLM Agent for next generation codingReactAgent is an experimental autonomous agent that uses GPT-4 language model to generate and compose React components from user stories. It is built with React, TailwindCSS, Typescript, Radix UI, Shandcn UI, and OpenAI API. Email addressGet updates → ReactAgent v0.1.0 I've been working in the couple of months on an experiment, trying to make GPT-4 much
On March 30, 2020, we enabled folks to opt into a beta dark mode on Stack Overflow. Let’s talk about the work that went into it. Dark mode opt-in bannerI’m Aaron Shekey, Stack Overflow’s principal product designer on design systems. I help design all the interface components that get assembled into new features. First, a bit of irony. I don’t actually prefer dark user interfaces. I often find the
The Design System Ecosystem
What does a mature, end-to-end design system look like in a big, complex organization? What are all the moving pieces, and how do they hang together as a well-considered architecture? What’s required and what’s optional? Hold onto your butts, because we’re going to go deep on this one. Let’s start here: a design system’s relationship to digital products can be boiled down like so: There’s a design
Just-In-Time: The Next Generation of Tailwind CSS - Tailwind CSS
One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even the browser itself will comfortably tolerate. Update: As of Tailwind CSS v2.1, the new Just-in-Time engine is in
Naming Tokens in Design Systems
Design tokens have provided a visual foundation of many design systems since Salesforce pioneered the concept in 2014. I wrote an impassioned article on design tokens in 2016, and my energy on the topic continues to grow. As systems of visual style spread across a widening landscape of components, platforms and outputs, design tokens — and their names — are increasingly important. Effective token
The Washington Post Design System (WPDS) is a growing library of design tokens and interactive components purpose-built for washingtonpost.com. WPDS enables designers and developers at the Post to ship reader-facing digital products that are modular, elegant and accessible while maintaining visual consistency at scale.
The top React UI libraries and kits in 2023 - LogRocket Blog
Chidume Nnamdi I'm a software engineer with over six years of experience. I've worked with different stacks, including WAMP, MERN, and MEAN. My language of choice is JavaScript; frameworks are Angular and Node.js. Editor’s Note: This list of React UI libraries was last updated on 5 October 2023. React is currently on top of the JavaScript food chain. Stack Overflow’s 2023 Developer Survey shows Re
Storybook 7.0 beta
Our mission is to improve the UX of the internet. So far, we’ve made a lot of progress. Teams around the world use Storybook to power their frontend workflows. Microsoft documents their universal design system, Fluent. Firefox develops pages for their web apps in isolation. While BBC automates testing for their component library across dozens of international locales. I’m excited to share an early
Everything I Know About Style Guides, Design Systems, and Component Libraries I've been building a component library for my company. I've learned a lot about style guides, design systems, component libraries, and their best practices. This post will be a deep-dive on everything I've learned in the past year. Table of Contents Why Should You Care? What is a Style Guide? What is a Component Library?
用字用語：一覧このページに記載しているガイドラインは随時更新していきます。用字用語に関する最新のガイドラインは、このページで確認してください。記載内容に気になる点があったり、用字用語以外のガイドラインを確認したい場合は #productside_文言相談 チャンネル、または、お近くのUXライターまでお声がけください。
Design systems enable designers and developers to quickly create quality software on a massive scale. As the needs of software-driven businesses grow even larger, design systems are evolving — they are beginning to look and work like APIs. In software development, “API” stands for “Application Programming Interface.” An API is a reliable way for two or more programs to cooperate. It allows program
I am a curious person who is always interested in opening up the browser DevTools to see how things were made on a website. This is the first time that I blog about something like this. I found some interesting uses of different CSS features (at least for me), and I wanted to share them with you. The new Facebook design started rolling out for users lately, and I got it almost two weeks ago. At fi
The Icon Kaleidoscope
Blank pages and redesigns have nothing on sequels. Last year, we rolled out the new Office icons to show our customers that we’ve evolved our products to support the changing world of work. A world where, despite being more mobile than ever before, social connectedness and collaboration are paramount to success. A world with immense potential for creativity and growth thanks to new flows of inform
デザインシステムとは、プロダクト開発を進める上でのルールや利用できるツールがまとまった仕組みのことです。 特にデザイナー・エンジニアが実務の際に参考にすることで、一貫性があり安定したプロダクト開発を進めるのに役立ちます。 この記事では、デザインシステムの基礎知識からメリット、作り方や便利なツールまでを解説します。 デザインシステムとは、プロダクトをより良いものとするためのルールやツールが連携した形でまとめられたものです。 皆さんが今読んでいる「NIJIBOX BLOG」にも、文体やサイトデザインを定めるためのルール、見出しやリンクをページ内に実装するためのツールがあります。 これらは、「このブログを通してより多くの人にUI/UXの情報を発信する」ために考え、ルール化やツール化をしたものです。 デザインシステムのポイントは、ルールやツールが「連携した形で」まとめられている点です。 色やテキス
Fastest Frontend Tooling
First published on October 3, 2022, updated on September 8, 2023 I tried tons of frontend tools this year in my pursuit to optimize my Developer Experience. I published an incredibly fast minimal template with sensible defaults which you can use to quickly spin up new projects: cpojer/vite-ts-react-tailwind-template. This is not a does-it-all starter kit. The template comes with the essential tool
Hacker UI is a design system for the modern developer.
LINE Design System : making LINE Product faster without losing consistency
Jungyoung Lee (Jake) LINE Plus Product Design 5 Lead Product Designer https://linedevday.linecorp.com/jp/2019/sessions/A2-2
最近SNSなどでデザインシステムに対する注目度が増していると感じる。 昨年、日本のデジタル庁がデザインシステムを公開し、ニューヨークとパリに拠点を置くデザインエージェンシーのAREA 17によってOpenAIのデザインシステムが公開された。 デザインを専門職としていない方でも、「デザインシステム」という単語を見かけたり、さまざまな企業のデザインシステムを見る機会が増えたと感じているかもしれない。 本記事では、デザインシステムが生まれた経緯や存在理由をはじめ、デザインシステムの基礎をご紹介したい。 デザインシステムとは何か？デザインシステムとは、デザインに関わる複数の要素（色やフォントなどさまざまなもの）をひとつに管理したものである。 なぜデザインシステムが必要なのか？デザインシステムの存在意義は主に次の2点と考えられる。 一つは、デザインチームの生産性向上のため、もう一つは、デザインの品質
JSer.info #475 - Firefox 73がリリースされました。 Firefox 73 is upon us - Mozilla Hacks - the Web developer blog Firefox 73.0, See All New Features, Updates and Fixes Firefox 73 for developers - Mozilla | MDN Firefox 73 Site Compatibility | Firefox Site Compatibility Formのvalidationを行ってからsubmitするHTMLFormElement.requestSubmit()をフラグ付きでサポート、CSSのoverscroll-behavior-blockとoverscroll-behavior-inlineをサポート。 開発者ツールのコ
Similar to Webflow, Webstudio visually translates CSS without obscuring it, giving designers superpowers that were exclusive to developers in the past. No hosting lock–inWe’ll never lock you in to our platform. Our Builder is open source and AGPL licensed. You can self-host, contribute to development, and even create your own software on top of our technology. Dynamic at the speed of staticWe depl
こんにちは。UIデザインチームの松島です。 最近「デザインシステム」という言葉を良く聞くようになりました。 私達もその有用性を感じて、TOSHIBA SPINEXデザインシステムを2020年から運用しています。（TOSHIBA SPINEXについてはこちらをご覧ください。） 今回は、私達が「デザインシステム」を試行錯誤しながら作ってきたお話をします。 1. デザインシステムとはデザインシステムとは、サービスアプリの一貫した使用体験を効率的に実現するために、色彩計画やレイアウト、インタクラクションなどのUIデザイン上のルールをドキュメント化したものや、その再現に用いるエレメントのソース群のことです。ルールを文章で定めたガイドラインと、実装・開発のためのコード集で構成されます。 単に開発を効率化できるだけでなく、デザイナーや開発者、プロダクトマネージャーといったサービス開発に関わるメンバー間で
Geri Reid - Forms best practice
Form design Best practice, research insights and examples Here's my best practice guidelines for form design. Working on a design system for a bank taught me a lot about forms. I watched testing in labs. I worked alongside experts from specialist accessibility organisations. I saw forms tested by people with disabilities and users of assistive technology. I've also read a lot of research. From all
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Getting Deep Into Shadows | CSS-Tricks
Airbnbのデザインシステムを(再)構築する - React Conf 2019
Gestalt is Pinterest’s design system
2024-05-03のJS: Bun v1.1.5(cross compile)、React 18.3.0、Svelte 5 RC
Introducing Storybook Design System
デザイントークンのW3Cコミュニティグループと仕様ドラフト、関連ツールの利用について
Style DictionaryとStorybookを使ったデザイントークンの連携フロー
Introducing Figma’s New Dev Mode | Figma Blog
The W3C Design System is live
Figma導入がチームに与えたインパクトと浸透した5つの理由｜はのめぐみ
ReactAgent - The open-source React.js LLM Agent
Building dark mode on Stack Overflow - Stack Overflow
WPDS Documentation & Resources
Everything I Know About Style Guides, Design Systems, and Component Libraries
用字用語：一覧 | プロダクト | SmartHR Design System
Design APIs: The Evolution of Design Systems
CSS Findings From The New Facebook Design
デザインシステムとは？作り方やデザインガイドラインとの違いまで分かりやすく解説！ | 株式会社ニジボックス
Hacker UI | a design system for developers
今さら聞けないデザインシステム入門 デザイン会社 ビートラックス: ブログ
2020-02-18のJS: Firefox 73、Node.js 12.16.0(13.xからのバックポート)
Open visual development for the open web
社会インフラを支える東芝のデザインシステム｜東芝 UIデザイン