エンジニアとしてプロダクトデザイナーと関わることがよくありました。 そんな中、エンジニアとして一番困るのは、デザインが"ポン"と出されるだけの状態です。 "ポン"と出されるのはよく遭遇します。デザイナーから「このデザインで実装してください」とFigmaが共有される。見た目は綺麗だし、UIの細部まで丁寧に作り込まれている。でも、配置や構成が「ユーザー体験上クリティカルなのか、ただ雰囲気で置かれたのか」が分からない。 エンジニアとしては「ここは手間に応じて調整していいのか、それとも厳密に守るべきなのか」判断に毎回迷う。デザイナーに相談すると「あ、それは気づかなかった。調整してもらって大丈夫です」という回答が返ってくる。 別の機会で勝手に調整した場合は「デザイン通りにやってもらいたいです」と言われる場合もある。 こういったことが積み重なると、エンジニアは実装時に「ここは厳密に守るべきか、調整して

はじめに2023年6月20日現在、W3Cのウェブサイトは5番目のデザインとなっています。以下は、1994年の開設以来、W3Cウェブサイトのデザインがどのように進化してきたかを示す注釈付きの歴史です。1996年12月27日以来、このウェブサイトの定期的なスナップショットを保存してくれているWayBack Machineに感謝します。 フィードバックW3Cウェブサイトに関するフィードバックがある場合は、各コメントをGitHubのイシューとして提出してください。 第一版 (1994-1997) W3Cのホームページの最初のデザインは、おそらく3つの主要なメーリングリストをリストアップしたW3Cディスカッションのインデックス以上のものではなく、ほとんどスタイルがありませんでした。当時のスクリーンショットを探し、差し替える必要があります。

This browser does not support :heading! Unfortunately, this browser does not support this feature. At the moment of writing this article, only Firefox Nightly supported it. In order to test it, follow these steps: Download and install Firefox Nightly. Open the browser. In the address bar, enter about:config. If a warning pops-up, click on "Continue." In the search bar, enter "heading" (without the

GitHub⁠⁠、プルリクエストの新しいFiles changedページで未変更行へのコメントを可能に GitHubは2025年9月25日、プルリクエストの新しい「Files changed」ページにおいて、変更されたファイル内の未変更行を含む任意の行へコメントできる機能を追加したことを発表し、リポジトリ単位で段階的に展開していることを案内した。なお、新しい「Files changed」ページと今回追加した機能はいずれもパブリックプレビュー段階のもの。 Pull request “⁠Files changed⁠”⁠ public preview now supports commenting on unchanged lines - GitHub Changelog Been at GitHub for nearly 13 years and I'm pretty sure this re

AGENTS.mdA simple, open format for guiding coding agents, used by over 20k open-source projects. Think of AGENTS.md as a README for agents: a dedicated, predictable place to provide the context and instructions to help AI coding agents work on your project.

Executive SummaryThe NPM ecosystem is facing another critical supply chain attack. The popular @ctrl/tinycolor package, which receives over 2 million weekly downloads, has been compromised along with more than 40 other packages across multiple maintainers. This attack demonstrates a concerning evolution in supply chain threats - the malware includes a self-propagating mechanism that automatically

Connect, collaborate, and grow with a community of TypeScript developers. Elevate your skills through interactive coding challenges, discussions, and knowledge sharing

VS CodeがAIエージェントの新標準「AGENTS.md」に対応、最適なAIモデルの自動選択も。2025年8月版で Visual Studio Code（VS Code）の開発チームは、2025年8月版（バージョン1.104）の新機能として、AIエージェント向けの指示などを記す「AGENTS.md」への実験的対応や、GitHub Copilotのための最適なAIモデルの自動選択機能などを明らかにしました。 v1.104 of @code is here! Check out what's new: Improved coding agent integration ? https://t.co/6SKFZXPkjm file support for better context New Auto mode (Preview) for smart model selection Mode

パッケージを利用する側、パッケージを公開する側でサプライチェーン攻撃を防ぐためにできることのメモ書きです。 パッケージを利用する側 npmやGitHub Actionsなどを利用する側として、サプライチェーン攻撃を防ぐためにできることをまとめます。 ロックファイルを使う npmやYarn、pnpmなどのパッケージマネージャーは、依存関係のバージョンを固定するためにロックファイル（例: package-lock.json, yarn.lock, pnpm-lock.yaml）を使用する GitHub ActionsではSHA Pinを行う pinactなどを使ったGitHub ActionsのSHA Pinを行う また、GitHubリポジトリの"Require actions to be pinned to a full-length commit SHA”を有効にする https://gi

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

All-in-one animation engine. A fast and versatile JavaScript library to animate the web.

はじめに プロダクト UI / UX 開発における品質向上において、様々な組織が検討を重ねていると思います。 デザインレビューをどのように実施するのか WCAG 2.2 に準拠したアクセシビリティ改善 上記の課題を解決すべく、アクセシビリティ改善をふまえたデザインレビュー自動化プロセスを検証してみました。 直面した課題 課題① :　コンパクトになっていったデザインレビューの文化 これまでのデザインレビューは、まとまった機能を開発する際に、PdM とエンジニア、そしてデザイナーが同期的に Figma を確認をするプロセスをとっていました。 また、開発プロセスに AI ツールが組み込まれたことで、エンジニアが UI を作り、デザイナーがレビューするというケースも増えています。 上記の背景がある中で、加えて事業スピードが加速していることもあり、担当者間のみのデザインレビューを行うことが増えていま

Logoipsum offers free, SVG placeholder logos in a variety of styles for use in design projects and mockups. Easily copy or download logos for your design. Advertise your brand/product herePut your brand/product in front of thousand of designers, developers, and makers. Advertise →

Filed underSVGoninAugust 18th, 2025.Aug 2025.Last updatedoninAugust 25th, 2025.Aug 2025. IntroductionThe SVG <path> element is notoriously tricky. When I first encountered it, I found it totally inscrutable. Its syntax isn’t quite as bad as Regex, but it has the same sort of “what on earth?” vibes. At the same time, <path> elements are also incredibly useful. They’re the only way to create curved

Translator API Translator API は Chrome 138 安定版から利用できます。ユーザーが作成したコンテンツや動的コンテンツをリクエストに応じて翻訳します。 ユースケース ユーザーは母国語でリクエストを入力できます。これは Language Detector API で識別できます。次に、Translator API を使用してリクエストをビジネスの運用言語に変換し、サポート エージェントに送信します。 ソーシャル ネットワーク アプリケーションでは、ユーザーが理解できない言語で投稿がタイムラインに表示されたときに、オンデマンドで翻訳をリクエストできます。 Language Detector API Language Detector API は Chrome 138 安定版から利用できます。この API を使用して、入力テキストの言語を検出できます。翻訳の入

<script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> <el-dropdown class="relative inline-block text-left"> <button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50"> Options <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="tr

こんにちは、すずきちえです。LegalOn Technologiesでデザインシステム「Aegis」の開発チームに所属しています。 先日公開したこちらの記事では、私たちのデザインシステム「Aegis」が、いかにして生まれ、会社の共通基盤へと成長していったかの道のりをご紹介しました。 今回はその中でも、Aegisの「ウェブアクセシビリティ・ファースト」という思想を特に色濃く反映している「カラーパレット」について、お話しさせてください。 なぜ、一般的なカラーパレットではダメだったのかデザインに精通している方であれば、「見ためが綺麗なカラーパレット」を作ること自体は、それほど難しくないかもしれません。しかし、「アクセシビリティを担保したカラーパレット」を、大規模なプロダクトで破綻なく運用し続けるのは、驚くほど困難です。 Webアクセシビリティ（身体的な条件や利用環境に関わらず、誰もが情報や機能に