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
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
こんにちは。Webフロントエンジニアの駒木です。 Mirrativでは毎週の様に運営主催イベントやゲーム会社様とのコラボ企画イベント等が開催されます。 そのイベント情報をユーザーへお伝えするメディアとして、イベント毎にWebページ いわゆる LP ( Landing Page ) を制作・公開しています。 Mirrativで公開している多種多様なLP ですが毎週の様に新しいイベントが企画・開催されますので、LPをエンジニアが都度制作していてはとても追いつきません。 そこでミラティブではCSS Variablesを活用することで、イベントの魅力が伝わるWeb LPをエンジニアが作業することなく制作・運用できる体制を構築しています。 本記事ではここまでに至った過程も含めお伝えします! 目指すはイベント運用の効率化と専門性の排除 遡ること半年ほど前、イベント企画チームの目標として『より多くのイベ
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 Misskeyでは2025年も大きな機能改修・リファクタリングに取り組んでいます。 その中にCSS Variablesに関する作業もあったので、今回はその紹介も兼ねてMisskeyで使っている便利なテクニックなどを取り上げます。 CSS Variablesとは CSS Variables(CSS変数)は、カスタムプロパティとも呼ばれ、CSSで変数を使用できる機能です。 CSS変数を使うと、ウェブサイト内で共通して使われるテーマカラーなどの値を使いまわしたり、動的にプロパティの値を変更することが可能です。さらに、CSSで用意されている色関数と組み合わせると、同じく動的に相対的な色の定義が行え、表現の幅を大きく広げることが可能です。 MisskeyのWebクライアントに
I've been riding the CSS-in-JS train for years (I was even a significant contributor to the "movement"). It's awesome. I've never been so productive working with CSS than when I added the power of JavaScript to it. I'm still a fan of CSS-in-JS, and in recent years, the CSS spec has evolved and improved a lot and modern browsers have too (unfortunately, Internet Explorer is NOT a modern browser in
みなさま、こんにちは🐰 株式会社Rabeeでデザイナーをしているkoppiです🐝 2023年6月頃に登場したFigmaのvariables(バリアブル)、なんだか難しそうで尻込みしていましたが、挑戦してみました。 今回はColorについて、手探りながら分かったことをここにまとめます。 variablesって聞いたことあるけど、何ができるの? Figmaでどうやって設定するの? という疑問をお持ちの、まだvariablesに触れたことのない方向けの内容になっています。 variables(変数)ってなに?ある値(カラーコードやサイズなど)を箱に入れて、名前をつけたものです。 これを使うと、何度も同じ色やサイズを使うときに、簡単に一度に変更できるようになります。 variableのイメージvariablesで管理できる4つのタイプ今回はColorについて取り上げますが、variablesで
Terraform の Variables と Locals、Outputs June 15, 2022 それぞれの役割 Terraform で “変数” というと、Variables と Locals がある。どちらも値を入れて、Terraform ファイル や Terraform Module から参照することができる。ちなみに Terraform Module とは「.tf ファイルが置かれたディレクトリ」を意味する。main.tf などを置いた瞬間からそのディレクトリは Module として扱われ、起点となる Module を Root Module と呼ぶ。 Terraform では “変数” 以外に “返り値” (Return value) に相当するものとして Outputs がある。これは Module での処理結果を Module 外から参照できるようにするために使うもの
AWS Step Functions announces support for two new capabilities: Variables and JSONata data transformations. Variables allow developers to assign data in one state and reference it in a subsequent state, simplifying state payload management, reducing the need to pass data through multiple intermediate states. With support for JSONata, an open source query and transformation language, customers can n
I was originally investigating this report that Postman is not HIPAA compliant. I found that Postman is not just wholly unsuitable for anyone testing a healthcare application — it has virtually zero regard for the privacy of any of its users, and has probably logged every secret string you have ever given it. Charles ProxyThis investigation would not have been possible (or so effortless) without C
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
Env Variables and Modes Vite exposes certain constants under the special import.meta.env object. These constants are defined as global variables during dev and statically replaced at build time to make tree-shaking effective. Built-in constants Some built-in constants are available in all cases: import.meta.env.MODE: {string} the mode the app is running in. import.meta.env.BASE_URL: {string} the
If you write server-side JavaScript, chances are you’ve need to read information from environment variables. It’s considered a best practice to share sensitive information, such as access tokens, inside of environment variables to keep them secure. However, the way environment variables are read from JavaScript is error-prone in subtle ways that might take you hours to figure out. When an error oc
✅ Dev Mode利用可 ❎ Dev Mode利用不可 2. Figma Variables Figmaで使える変数のことで、デザイン内で使用されるColor、Paddingなどの数値をVariablesとして定義し、一元管理が可能となります。Light/Darkに代表されるテーマ切替やコンポーネントのステータスやフォームのバリデーションなどを見越して、UIツールキット「Astro」にVariablesを取り込んでみました。 Variablesを取り込みたい理由 今までのFigmaの指定では、Figma上のColor指定と、CSS Variablesのネーミングにズレがあり分かりづらく困っていました。Figma側ではデザインシステムでStyles設定したカラーパレットを用い Thema/Primary という名前で登録していました。しかし、CSSではカラーに対して色の意味より具体的
Config 2023でFigma variablesが発表されました✨ variablesによってデザインの色や文、サイズなどが変数で指定できるようになります。 variablesをつかってミニマムなデザインシステムを作成しました🙌 開発の参考になれば嬉しいです。 内容はデジタル庁のデザインシステムをベースに作成させていただきました🙏 (めちゃくちゃ良くできていて勉強になりました) ルールや適用方法で迷った場合はデジタル庁のデザインシステムを参考にしてみてください。 デザインシステム variablesの作成 以下の操作で作成できます。 集合 Design→Local variables→Create Collection 変数 Create variable→Color,Number,String,Boolean モード + (New variable mode) variable
簡単な説明 PowerShell で環境変数にアクセスして管理する方法について説明します。 環境変数には、オペレーティング システムやその他のプログラムによって使用されるデータが格納されます。 PowerShell では、次の環境変数が作成されます。 POWERSHELL_TELEMETRY_OPTOUT POWERSHELL_DISTRIBUTION_CHANNEL POWERSHELL_UPDATECHECK PSExecutionPolicyPreference PSModulePath PSModuleAnalysisCachePath PSDisableModuleAnalysisCacheCleanup これらの変数の詳細については、この記事の PowerShell 環境変数 を参照してください。 詳細な説明 PowerShell は、サポートされているオペレーティング システ
Minimum (Mobile)At this minimum viewport width, all font sizes in your type scale are computed as the base font size times a power of your chosen ratio. Base font size (px)Screen width (px)Type scale ratioMinor secondMajor secondMinor thirdMajor thirdPerfect fourthAugmented fourthPerfect fifthGolden ratio Maximum (Desktop)At this maximum viewport width, all font sizes in your type scale are comput
こんにちは!株式会社Rabeeでデザイナーをしているkoppiです🐝 FigmaのVariables、使っていますか? 「ちょっと難しそう」そんな理由で手を出せていない方も多いかもしれません。特に、デザイナーとしてキャリアを始めたばかりの方にとっては、少しとっつきにくい印象があるのではないでしょうか。 「String、Color、Number、Booleanが登録できるらしいけど、それっていつ使うの?」「登録すると何が便利になるの?」 この記事では、そんな疑問を持っている方向けに、Variablesの使い方と活用シーンを分かりやすく紹介していきます! 1. テーマカラーを切り替えるライトモードとダークモードの画面を作りたいとき。 Color Variableを使えば、モードごとに色を登録しておくだけで、画面全体のテーマを一瞬で切り替えることができます。 使用するすべての色にLightモー
2024/03/19追記 現在はvariables周りのプラグインも充実してきているため、自作でプラグインを作る必要はなくなってきていると思います。 こんにちは。株式会社LayerXのぴーや(@taka_piya)です。4月に入社し、今は三井物産デジタル・アセットマネジメント(MDM) にデザイナーとして出向しています。 さて、先日のFigma Config2023で、大規模なFigmaのアップデートが実施されました。なかでもVariablesは、個人的に待ち望んでいたアップデートでした。 この記事ではVariblesの利用例と、より活用するために制作したプラグインについて紹介します。 ついに、Figma単体でもエイリアストークンを管理できるようになったMDMは5月にデジタル証券(ST:セキュリティトークン)を活用した個人向けの資産運用サービス「ALTERNA(オルタナ)」をリリースしまし
CSS Houdini is an umbrella term that covers a set of low-level APIs that expose parts of the CSS rendering engine, and give developers access to the CSS Object Model. This is a huge change for the CSS ecosystem, as it enables developers to tell the browser how to read and parse custom CSS without waiting for browser vendors to provide built-in support for these features. So exciting! One of the mo
🔥 Want improve your Debugging CSS skills? Get my book for just $19.99! Buy the book When I first started using CSS variables, I wasn’t fully aware of the potential. When used in the right way, we can shorten the time and effort to do specific things in CSS. If you don’t know about CSS variables, I recommend you to read this article to learn about them. Once you’re good with it, it will be easier
🔥 Want improve your Debugging CSS skills? Get my book for just $19.99! Buy the book CSS variables (AKA custom properties) have been supported in web browsers for almost four years. I like to use them depending on the project and the situation. They are very useful and easy to use, but oftentimes, a front-end developer might misuse or misunderstand them. The main purpose of this article is that I
プロトタイプから完成品へ 「10倍の法則」 新しいプロダクトをスタートするとき、プロトタイプを作成することから始めます。 短時間でFigmaでざっと作ったプロトタイプは、 アイデアの妥当性を確かめるための大切な第一歩です。 しかし、その次のステップ、プロトタイプを完成品に持っていく下流工程の作業が、想像するよりもはるかに難しい世界です。 プロトタイプを完成品のレベルまで持ち上げるためには、10倍の時間が必要と言われています。 プロトタイプから完成品への移行は、案外地味で大変な作業です。 Figma 2023はエンジニア向けツールになった 従来、Figmaはデザイナー向けのツールとして知られていました。 しかし、2023年のこのアップデートで、Figmaはエンジニア向けの機能も強化。 特にフロントエンドエンジニアにとっては、新たな可能性が広がりました。 役割分担がどう変わったか 作業効率観点
今更感はありますが、FigmaのLocal Variablesを使って、コンポーネントプロパティを切り替えるプロトタイピングをつくってみました。 プロトタイピングでユーザーの操作に応じて、Local Variablesを使わずコンポーネントの内容を変更する場合、基本的には同一コンポーネントでバリアントを切り替えることになります。 「入れ替え」もできますが、あくまで操作されたオブジェクトを入れ替えるアクションのため、インタラクションで他のオブジェクトへ影響を及ぼすことはできません。 バリアントで状態を再現するために、小さなコンポーネントを組み合わせて巨大なコンポーネントをつくる必要がありましたが、Local Variablesを使うと、異なるコンポーネントの状態を変更できるようになります。 今回は、モーダルダイアログでボタンのバリアントをプレビューできる、次のようなプロトタイプを作成してみま
この記事はFigma Advent Calendar 20日目の記事です。 おはようございます!こんにちは!こんばんは! 「家計簿プリカB/43」を運営する株式会社スマートバンクデザイナーの@putchomです。 Config 2023から約半年経ち、皆さんもすでにFigmaのVariablesを使いこなしている頃かと思います。 以前『初公開!「家計簿プリカB/43」のデザイントークンの設計』でスマートバンクでは Tokens Studio for Figma を採用してFigmaで効率的にデザイントークンを管理しているとお伝えしましたが、このたびVariablesへの移行が完了したのでその話をしようと思います。 ※ この記事ではVariablesの使い方などは説明しませんので、知りたい方は公式のチュートリアルをご覧ください。 Create and manage variables – F
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
How can we get better at naming? This post is dedicated to naming conventions, tips, and real-world examples that help you name things in a robust and flexible way. Naming is hard. As designers and developers, we often struggle finding the right name — for a design token, colors, UI components, HTML classes, and variables. Sometimes, the names we choose are too generic, so it’s difficult to unders
この記事の概要 2023 年 7 月 6 日に開催される Config2023 Recap in Goodpatch で発表する内容です。 内容 「variables を既存データにどう適用する?」という内容で発表します。 全体の説明 新機能が色々出た中で、1 番みんなが沸いているのが variables だと思っています。 これから新しくデータを作るなら、デモの内容を参考にして綺麗に作っていけそうなイメージは湧きますよね。 ただ、 90% 以上の方は「既に作ってあるデザインデータがある」と思います。 そのため、今あるアセットをできるだけ活かして、漸進的に移行するには……という話をします。 また Figma の Recap ですが今回のアップデートはエンジニアとの協業がより大事になる話だと思ったので、コードに絡めた話も一部します。 補足として、あくまで「多分こんな感じが良いんじゃないかな」
公式のPlaygroundを見ると、ダークモードとライトモードなど、複数のモードを持つデザイントークンを管理するような使い方が想定されているようですが、これをデザイン内で使用するダミーコンテンツの管理に使用してみたいと思います。 FigmaのVariablesにダミー情報を登録しておき、一覧や詳細表示のインスタンスに反映するアイディア。 要素の有無や文字量が多い場合など、複数パターンを用意しておくと表示の検証が手軽にできるし、スクショに使うダミー情報もすぐに反映できる。良い気がするぞ。 #config2023 pic.twitter.com/Q4OgyFzJ5z — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) June 23, 2023 ダミーコンテンツとは?ダミーコンテンツとは実際には存在しない本物らしいテキストや画像のことを指し、UIデザインの際に頻繁に使用しま
Reactive variables State containers integrated into Apollo Client's reactivity model New in Apollo Client 3, reactive variables are a useful mechanism for representing local state outside of the Apollo Client cache. Because they're separate from the cache, reactive variables can store data of any type and structure, and you can interact with them anywhere in your application without using GraphQL
At the time of writing, the API this article talks about requires an enterprise plan. Overview Figma recently announced its new Variables product, allowing you to define and manage your design tokens directly within Figma. I have been experimenting with Figma Variables for a few weeks and am reasonably impressed with how it works. In this article, I'll share how I've been using Figma Variables to
Discovering State Variables Hidden in Experimental Data Boyuan Chen, Kuang Huang, Sunand Raghupathi Ishaan Chandratreya, Qiang Du, Hod Lipson All physical laws are described as relationships between state variables that give a complete and non-redundant description of the relevant system dynamics. However, despite the prevalence of computing power and AI, the process of identifying the hidden stat
Per-CPU variables Per-CPU variables are one of the kernel features. You can understand the meaning of this feature by reading its name. We can create a variable and each processor core will have its own copy of this variable. In this part, we take a closer look at this feature and try to understand how it is implemented and how it works. The kernel provides an API for creating per-cpu variables -
Stan supports a direct encoding of reparameterizations. Stan also supports changes of variables by directly incrementing the log probability accumulator with the log Jacobian of the transform. Theoretical and practical background A Bayesian posterior is technically a probability measure, which is a parameterization-invariant, abstract mathematical object.1 Stan’s modeling language, on the other ha
昨日ワクワク機能である Variables がリリースされました。 https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma Variables では標準で色、数字、文字列、真偽値の4種類の値が指定できますが、Variants と組み合わせることでより色々なものをモードと共に切り替えられるようになります。 下記は画像を切り替えている例です。 これどうやってるんだろうなと思ったが mode 毎の値で切り替わる Variants を作る -> インスタンス側で対象の Variable つける、でできた。これは色々応用効くかもしれん https://t.co/k9mnZBnDy5 pic.twitter.com/I7oN0Y56Re — seya (@sekikazu01) June 2
“Naming things is hard” goes the software engineering axiom and CSS is no exception. Here are some collected thoughts related to naming CSS Custom Properties. I’m going to use use the terms “variable” and “custom property” interchangeably since they are effectively the same thing for the purposes of what to call them. Disclaimer: What follows is not gospel. CSS to me is a very poetic language, the
はじめに こんにちは!Postmanの変数を使っていますか? 変数はとても強力な機能です。変数を理解することで、Postmanでの作業が効率的になるだけでなく、テストの柔軟性や拡張性が驚くほど向上します。変数を制すれば、Postmanを制すると言っても過言ではありません。 しかし、実際にはPostmanを使ったことがある人でも、変数の存在を知らない方や、まだ活用できていない方がいることがあります。これは非常にもったいないです。 この記事では、変数初めての人にとっても、既に使っている人にとっても、役立つようにPostmanの変数機能についてできるだけ網羅的に徹底解説したいと思います。 変数とは何か? 変数を使うことで、Postmanに値を保存して再利用することができます。APIテストの自動化やリクエストのパラメータ化ができ、同じリクエストを繰り返し行ったり、複数のリクエストで共通のデータを使
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く