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クライアントに
みなさま、こんにちは🐰 株式会社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 外から参照できるようにするために使うもの
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
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
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
Introducing Env: a better way to read environment variables in JavaScript Reading environment variables in JavaScript is fraught with peril. Env makes it better. 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 th
✅ 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 は、サポートされているオペレーティング システ
こんにちは!株式会社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(オルタナ)」をリリースしまし
Do you want to master CSS layouts? I'm building a new course. Learn more 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 for you to f
この記事は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
プロトタイプから完成品へ 「10倍の法則」 新しいプロダクトをスタートするとき、プロトタイプを作成することから始めます。 短時間でFigmaでざっと作ったプロトタイプは、 アイデアの妥当性を確かめるための大切な第一歩です。 しかし、その次のステップ、プロトタイプを完成品に持っていく下流工程の作業が、想像するよりもはるかに難しい世界です。 プロトタイプを完成品のレベルまで持ち上げるためには、10倍の時間が必要と言われています。 プロトタイプから完成品への移行は、案外地味で大変な作業です。 Figma 2023はエンジニア向けツールになった 従来、Figmaはデザイナー向けのツールとして知られていました。 しかし、2023年のこのアップデートで、Figmaはエンジニア向けの機能も強化。 特にフロントエンドエンジニアにとっては、新たな可能性が広がりました。 役割分担がどう変わったか 作業効率観点
今更感はありますが、FigmaのLocal Variablesを使って、コンポーネントプロパティを切り替えるプロトタイピングをつくってみました。 プロトタイピングでユーザーの操作に応じて、Local Variablesを使わずコンポーネントの内容を変更する場合、基本的には同一コンポーネントでバリアントを切り替えることになります。 「入れ替え」もできますが、あくまで操作されたオブジェクトを入れ替えるアクションのため、インタラクションで他のオブジェクトへ影響を及ぼすことはできません。 バリアントで状態を再現するために、小さなコンポーネントを組み合わせて巨大なコンポーネントをつくる必要がありましたが、Local Variablesを使うと、異なるコンポーネントの状態を変更できるようになります。 今回は、モーダルダイアログでボタンのバリアントをプレビューできる、次のようなプロトタイプを作成してみま
GitHub Actions – Support for configuration variables in workflows Today, we are adding support for configuration variables in GitHub Actions 🎉 Previously, you needed to store this configuration data as encrypted secrets in order to reuse values in workflows. While extremely secure, this method did not allow for easy storage and retrieval of non-sensitive configuration data such as compiler flags,
“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
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
昨日ワクワク機能である 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
Working with preference variables This document describes each of the preference variables. To display the current value of a specific preference variable, type the variable's name. For example, the following command displays the $ConfirmPreference variable's value. $ConfirmPreference High To change a variable's value, use an assignment statement. For example, the following statement changes the $
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
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは!Postmanの変数を使っていますか? 変数はとても強力な機能です。変数を理解することで、Postmanでの作業が効率的になるだけでなく、テストの柔軟性や拡張性が驚くほど向上します。変数を制すれば、Postmanを制すると言っても過言ではありません。 しかし、実際にはPostmanを使ったことがある人でも、変数の存在を知らない方や、まだ活用できていない方がいることがあります。これは非常にもったいないです。 この記事では、変数初めての人にとっても、既に使っている人にとっても、役立つようにPostmanの変数機能につい
Published: July 12, 2024 Get ready for a CSS power-up! The @property rule, part of the CSS Houdini umbrella of APIs, is now fully supported across all modern browsers. This game-changing feature unlocks new levels of control and flexibility for CSS custom properties (also known as CSS variables), making your stylesheets smarter and more dynamic. The benefits of @property Semantic meaning: Use @pro
AWS Compute Blog Simplifying developer experience with variables and JSONata in AWS Step Functions This post is written by Uma Ramadoss, Principal Specialist SA, Serverless and Dhiraj Mahapatro, Principal Specialist SA, Amazon Bedrock AWS Step Functions is introducing variables and JSONata data transformations. Variables allow developers to assign data in one state and reference it in any subseque
CSS custom properties are AMAZING. I'm going to attempt to name and roundup all the categories and strategies of custom props that I've come across. be sure to comment if you know more strategies! 1. tokens # These custom properties are generally just global values, named objectively, and are used atomically. They create team alignment by naming what are otherwise "magic numbers." They often follo
はじめにこんにちは!株式会社Rabeeでデザイナーをしているkoppiです🐝 Figma の Variables(変数機能) は、UIテキストをまとめて管理し、多言語対応も可能にする便利な仕組みです。 ただし実際に「翻訳データを外部から流し込みたい」と思うと、いくつか落とし穴があります。 この記事では、私が Google スプレッドシート + GAS + Variables Pro を組み合わせて運用フローを考えたときにぶつかった問題と、その解決方法を紹介します。 ※正解というより「こうやってみたらうまくいったよ」という一例です。 スプレッドシートで翻訳を整理私の場合は、クライアントや社外メンバーともやり取りしながら翻訳データを整える必要があったため、Google スプレッドシートを使いました。 「カテゴリー・キー・翻訳(日本語/英語)を整理したスプレッドシート」課題:keyが同名だと複
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く