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
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
GitHub - kettanaito/naming-cheatsheet: Comprehensive language-agnostic guidelines on variables naming. Home of the A/HC/LC pattern.
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
CSS Variablesを使ってWeb LP制作のエンジニア作業時間を0にした話 - Mirrativ Tech Blog
こんにちは。Webフロントエンジニアの駒木です。 Mirrativでは毎週の様に運営主催イベントやゲーム会社様とのコラボ企画イベント等が開催されます。 そのイベント情報をユーザーへお伝えするメディアとして、イベント毎にWebページ いわゆる LP ( Landing Page ) を制作・公開しています。 Mirrativで公開している多種多様なLP ですが毎週の様に新しいイベントが企画・開催されますので、LPをエンジニアが都度制作していてはとても追いつきません。 そこでミラティブではCSS Variablesを活用することで、イベントの魅力が伝わるWeb LPをエンジニアが作業することなく制作・運用できる体制を構築しています。 本記事ではここまでに至った過程も含めお伝えします！ 目指すはイベント運用の効率化と専門性の排除 遡ること半年ほど前、イベント企画チームの目標として『より多くのイベ
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で
![[Figma]variablesの使い方-Color-｜koppi](https://cdn-ak-scissors.b.st-hatena.com/image/square/7887fa501c1209f95d6058efd1f820703510eb36/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F145053186%2Frectangle_large_type_2_8bbc091e3094ad5d252e85b08b41fd52.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
GitHub - mattrighetti/envelope: An environment variables cli tool backed by SQLite
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
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 外から参照できるようにするために使うもの
Hacking with Environment Variables Interesting environment variables to supply to scripting language interpreters Introduction On a recent project we gained the ability to specify environment variables but not the process that was executed. We were also unable to control the contents of a file on disk, and bruteforcing process identifiers (PIDs) and file descriptors found no interesting results, e
This is a thought experiment in API design. It starts with the classic Go unit testing idiom: func TestOpenFile(t *testing.T) { f, err := os.Open("notfound") if err != nil { t.Fatal(err) } // ... } What’s the problem with this code? The assertion. if err != nil { ... } is repetitive and in the case where multiple conditions need to be checked, somewhat error prone if the author of the test uses t.
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Very often, while using switch variables (a variable that’s either 0 or 1, a concept that’s explained in a greater detail in in this post), I wish I could perform logical operations on them. We don’t have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we
AWS CodePipeline Enables Setting Environment Variables on AWS CodeBuild Build Jobs
You can now set environment variables for CodeBuild build jobs in your pipeline. Previously, build jobs in your pipeline could only use environment variables defined in the build project configuration or buildspec file. When building for different environments and stages, you can now set environment variables directly through CodePipeline. You can now reuse the same build project for multiple acti
Introducing required workflows and configuration variables to GitHub Actions | The GitHub Blog
SecurityIntroducing required workflows and configuration variables to GitHub ActionsNow, you can standardize and enforce CI/CD best practices across all repositories in your organization to reduce duplication and secure your DevOps processes. Today, we are introducing two new features for GitHub Actions to help standardize policies and reduce duplication, required workflows and configuration varia
Environment Variables Examples Environment Variables Next.js comes with built-in support for environment variables, which allows you to do the following: Use .env to load environment variables Bundle environment variables for the browser by prefixing with NEXT_PUBLIC_ Loading Environment Variables Next.js has built-in support for loading environment variables from .env* files into process.env.
Introducing Env: a better way to read environment variables in JavaScript - Human Who Codes
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
Michael Z Posted on Oct 3, 2019 • Updated on Jan 9, 2022 • Originally published at michaelzanggl.com Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content. There is a convention to prefix boolean variables and function names with "is" or "has". You know, something like isLoggedIn, hasAccess or things like that. But throughout my career I have seen and
GitHub - aws-actions/configure-aws-credentials: Configure AWS credential environment variables for use in other GitHub Actions.
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
Fluid Type Scale - Generate responsive font-size variables
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
Load environment variables from dotenv / .env file in Bash
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
こんにちは、デザイナーの本田 です。 この記事はEnigmo Advent Calendar 2019 の2日目の記事です。 今日はエニグモが運営しているファッションメディアSTYLE HAUS の色管理方法について紹介していきます。 放置されていた_variables.scss Sassファイルの中で重要な_variables.scssファイル。このファイルにデザインを管理する様々な変数を定義すれば、変数の値を編集するだけで全体的なデザインの更新ができるようになります。 ただ、最初に設計した後、放置されやすいのも事実です。 STYLE HAUS の開発はECサイトBUYMA の開発の空いた時間にちょこっと進めるスタイルなので、デザインの全体を見返すタイミングがなかなか作れず、3年ほど設計を見返せずにいました。 variable.scssを3年放置した図 また、変数も最初のうちは問題なかっ
@property: giving superpowers to CSS variables Stay organized with collections Save and categorize content based on your preferences. 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 re
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 follow along. The goal of this article is to focus heavily on useful use-c
Knopf.css Modern, modular, extensible button system designed for both rapid prototyping and production-ready applications
Go internals: capturing loop variables in closures - Eli Bendersky's website
Update (2023-09-20): Go fixes the loop variable capture gotcha in the 1.22 release. While the technical details of this article remain true, all the examples will produce the "expected" output. The Go wiki has a page titled CommonMistakes. Amusingly, it only lists a single entry at this time - using goroutines on loop iterator variables, providing this example:
CSS Variables 101
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 wanted to have a place where I can dump all the information I know about CSS variable
プロトタイプから完成品へ 「10倍の法則」 新しいプロダクトをスタートするとき、プロトタイプを作成することから始めます。 短時間でFigmaでざっと作ったプロトタイプは、 アイデアの妥当性を確かめるための大切な第一歩です。 しかし、その次のステップ、プロトタイプを完成品に持っていく下流工程の作業が、想像するよりもはるかに難しい世界です。 プロトタイプを完成品のレベルまで持ち上げるためには、10倍の時間が必要と言われています。 プロトタイプから完成品への移行は、案外地味で大変な作業です。 Figma 2023はエンジニア向けツールになった 従来、Figmaはデザイナー向けのツールとして知られていました。 しかし、2023年のこのアップデートで、Figmaはエンジニア向けの機能も強化。 特にフロントエンドエンジニアにとっては、新たな可能性が広がりました。 役割分担がどう変わったか 作業効率観点
FigmaのVariablesを利用して、デザインから実装までのトークンを共通化する｜Takahiro Hayashi(ぴーや) / LayerX, MDM
2024/03/19追記 現在はvariables周りのプラグインも充実してきているため、自作でプラグインを作る必要はなくなってきていると思います。 こんにちは。株式会社LayerXのぴーや(@taka_piya)です。4月に入社し、今は三井物産デジタル・アセットマネジメント(MDM) にデザイナーとして出向しています。 さて、先日のFigma Config2023で、大規模なFigmaのアップデートが実施されました。なかでもVariablesは、個人的に待ち望んでいたアップデートでした。 この記事ではVariblesの利用例と、より活用するために制作したプラグインについて紹介します。 ついに、Figma単体でもエイリアストークンを管理できるようになったMDMは5月にデジタル証券（ST:セキュリティトークン）を活用した個人向けの資産運用サービス「ALTERNA(オルタナ)」をリリースしまし
GitHub Actions - Support for configuration variables in workflows | GitHub Changelog
GitHub Actions – Support for configuration variables in workflows githubactionsworkflows January 10, 2023 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 co
Adding Custom Environment Variables | Create React App
Note: this feature is available with react-scripts@0.2.3 and higher. Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_. WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables a
Best Practices For Naming Design Tokens, Components And Variables — Smashing Magazine
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 ですが今回のアップデートはエンジニアとの協業がより大事になる話だと思ったので、コードに絡めた話も一部します。 補足として、あくまで「多分こんな感じが良いんじゃないかな」
![[LT スライド & 原稿] variables を既存データにどう適用する？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/47090a2f8004f39730d7e35cb792394f429438aa/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCTFQlMjAlRTMlODIlQjklRTMlODMlQTklRTMlODIlQTQlRTMlODMlODklMjAlMjYlMjAlRTUlOEUlOUYlRTclQTglQkYlNUQlMjB2YXJpYWJsZXMlMjAlRTMlODIlOTIlRTYlOTclQTIlRTUlQUQlOTglRTMlODMlODclRTMlODMlQkMlRTMlODIlQkYlRTMlODElQUIlRTMlODElQTklRTMlODElODYlRTklODElQTklRTclOTQlQTglRTMlODElOTklRTMlODIlOEIlRUYlQkMlOUYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY1NGQzYWEwZGIwNWI5YmU5MTdmNzE4MWI3YWI4MDI1%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQweHJ4b3hjeG94JTIwaW4lMjBRaWl0YSVFNiVBMCVBQSVFNSVCQyU4RiVFNCVCQyU5QSVFNyVBNCVCRSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTMyJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OWVmNmYzNGI3MTZhYjU1N2IyNGUyOTMzNjliMmZlODI%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Db11e12c8168a4c5ec7e6a73be07bb3eb)
FigmaのLocal Variablesを使ってコンポーネントプロパティを切り替えるプロトタイピングをつくってみた | DevelopersIO
今更感はありますが、FigmaのLocal Variablesを使って、コンポーネントプロパティを切り替えるプロトタイピングをつくってみました。 プロトタイピングでユーザーの操作に応じて、Local Variablesを使わずコンポーネントの内容を変更する場合、基本的には同一コンポーネントでバリアントを切り替えることになります。 「入れ替え」もできますが、あくまで操作されたオブジェクトを入れ替えるアクションのため、インタラクションで他のオブジェクトへ影響を及ぼすことはできません。 バリアントで状態を再現するために、小さなコンポーネントを組み合わせて巨大なコンポーネントをつくる必要がありましたが、Local Variablesを使うと、異なるコンポーネントの状態を変更できるようになります。 今回は、モーダルダイアログでボタンのバリアントをプレビューできる、次のようなプロトタイプを作成してみま
公式のPlaygroundを見ると、ダークモードとライトモードなど、複数のモードを持つデザイントークンを管理するような使い方が想定されているようですが、これをデザイン内で使用するダミーコンテンツの管理に使用してみたいと思います。 FigmaのVariablesにダミー情報を登録しておき、一覧や詳細表示のインスタンスに反映するアイディア。 要素の有無や文字量が多い場合など、複数パターンを用意しておくと表示の検証が手軽にできるし、スクショに使うダミー情報もすぐに反映できる。良い気がするぞ。 #config2023 pic.twitter.com/Q4OgyFzJ5z — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) June 23, 2023 ダミーコンテンツとは？ダミーコンテンツとは実際には存在しない本物らしいテキストや画像のことを指し、UIデザインの際に頻繁に使用しま
B/43のデザイントークンをTokens Studio for FigmaからVariablesに移行しました - inSmartBank
この記事は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
if username is elvis {% if user.name == 'elvis' %} hey Elvis {% endif %} hey Elvis Else if example {% if user.name == 'elvis' %} hey elvis {% elsif user.name == 'Mark' %} hey mark {% else %} hi stranger {% endif %} hey ugly
AWS CodePipeline Enables Passing Variables Between Actions At Execution Time
You can now pass variables from one action to another in your pipeline. Previously, there was no first-class support for passing metadata between actions during an execution. You can now dynamically configure your actions with variables that will be evaluated at execution time. During a pipeline execution, you can now access variables produced by select action types or default variables made avail
Reactive variables
Reactive variablesState 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 s
Syncing Figma Variables and Style Dictionary with GitHub Actions
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
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 s
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 -
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Use CSS Variables instead of React Context
[Figma]variablesの使い方-Color-｜koppi
Terraform の Variables と Locals、Outputs - tellme.tokyo
Hacking with Environment Variables
Dynamically scoped variables in Go | Dave Cheney
Logical Operations with CSS Variables | CSS-Tricks
Configuring: Environment Variables | Next.js
Figma Dev ModeとVariablesでデザイナーとエンジニアの連携を強化
Figma variablesを使ってミニマムなデザインシステムをつくる
Tips on naming boolean variables - Cleaner Code
3年放置してた_variables.scssを整理したよー。 - エニグモ開発者ブログ
@property: giving superpowers to CSS variables | Articles | web.dev
Practical Use Cases For CSS Variables
Knopf.css - Open source button system leveraging CSS variables
🚀 Figma 2023の「Variables機能」がもたらすデザイナーとエンジニア協業の新たな時代 🎨👨💻
[LT スライド & 原稿] variables を既存データにどう適用する？ - Qiita
FigmaのVariablesを使用してダミーコンテンツを管理する｜鈴木慎吾 / TSUMIKI INC.
Shopify Cheat Sheet - Liquid variables
Per-CPU variables · Linux Inside
ameblo.jp/zokukokon
ameblo.jp/zokukokon
ameblo.jp/zokukokon
ameblo.jp/zokukokon
ameblo.jp/zokukokon
monoist.itmedia.co.jp