津の片隅からファイバーなしでライブ配信する技術 #rubykaigi #ruby_music_mixin - pixiv inside

2022/09/20 81 users RubyKaigi ファイバー 片隅 ライブ 技術

こんにちは、CTOのharukasanです。CTO以外にImageFluxのプロダクトオーナーもやっています。 ピクシブは三重県津市で開催されたRubyKaigi 2022にMusic Lounge Sponsorとして参加しました。 Ruby Music Mixin ピクシブでは最終日2022/09/10 (土)にRuby Music Mixinというラウンジを提供させて頂きました。Ruby Music Mixi... 続きを読む

styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る | suzukalight.com

2022/03/19 8 users styled-components CSSTYPE 複数

3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安... 続きを読む

React 副作用分割パターン - mizdra

2019/02/17 265 users mizdra HOC React hooks 継承

#react #React_Hooks React Hooks自体の解説記事はいくつかあるけど, Hooksの登場によってReactがどう変わったのかについて書かれている記事が無かったので書いた 継承, Mixin, HOC, render props, Hooksの登場によって, Reactの副作用分割パターンがどう変遷していったのか分かるようにすることがこの記事の目的 Counte... 続きを読む

備えておくと便利！CSS Flexboxの各プロパティ、グリッドを実装するコードがまとめられたSassのMixin | コリス

2018/11/19 58 users Sass コリス グリッド CSS flexbox コード

CSS Flexboxの各プロパティ、レスポンシブ対応のグリッドや垂直・水平の揃えなど、便利なコードがまとめられたSassのMixinを紹介します。 CSS Flexboxの各プロパティがまとめられたSass Mixin CSS Flexboxでグリッドを実装するコードがまとめられたSass Mixin CSS Flexboxの各プロパティがまとめられたSass Mixin flexbo... 続きを読む

Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ | Webクリエイターボックス

2017/02/23 115 users Sass Webクリエイターボックス 小技 関数 デフォルト

Sass がデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「 効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら... 続きを読む

これは簡単でいいね！コンテンツの区切りを斜め線にするテクニック（レスポンシブ対応） -Angled Edges | コリス

2016/12/12 125 users コリス レスポンシブ対応 テクニック Sass SVG

縦長ページなど、コンテンツを積み重ねてレイアウトする際に、コンテンツ間の区切りを斜めにするSassのMixinを紹介します。 斜め線はSVGなので、デスクトップでもスマホでも美しく斜めに表示されます。 Angled Ed ...記事の続きを読む 続きを読む

Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット | NxWorld

2016/12/07 33 users Sass NxWorld SCSS スニペット メディアクエリ

ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries（メディアクエリ）を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3つ紹介します。 条件分岐を使う ひとつ目は条件分岐を使ってひとつずつブレイクポイン... 続きを読む

Sass(SCSS) mixin Snippets | NxWorld

2016/12/07 47 users Sass NxWorld SCSS CSS スニペット

普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。特にこれまでSassやmixinをあまり... 続きを読む

CSSコーディングテクニック : 詳細度、単位、flexbox、mixin | プログラミング | POSTD

2016/06/13 184 users Flexbox POSTD プログラミング 単位

最近、ビギナーからベテランのデベロッパに至るまで、CSSに手を焼く人を多く見かけます。本記事では、維持しやすいCSSコード、言い換えれば、ルールをできるだけ減らした短いスタイルシートをうまく書くためのヒントとオススメをご紹介したいと思います。最近、ビギナーからベテランのデベロッパに至るまで、CSSに手を焼く人を多く見かけます。そうした人たちの中には、CSSの機能を好まず、別の言語を使った方がいいの... 続きを読む

【翻訳】@extendを使うべき時、@mixinを使うべき時 | POSTD

2015/04/13 129 users extend POSTD 引数 クライアント 翻訳

私がクライアントからよく受ける質問に*「@mixinと@extend、それぞれどのような時に使うべき？」*というものがあります。 *“引数を使わない@mixinは悪である”。*これは以前からある経験則です。同じコードを2つのインスタンスで重複させるだけの@mixinは不快でさえあります。しかし、@extendを使私がクライアントからよく受ける質問に「@mixinと@extend、それぞれどのような... 続きを読む

美しいグラデーションが簡単に利用できる！グラデの種類が豊富に揃ったmixinとスタイルシートのまとめ -SuperGradient | コリス

2014/12/01 126 users コリス グラデ グラデーション 美しいグラデーション 放射状

垂直・水平のベーシックなグラデーションをはじめ、放射状や斜め方向のグラデーションなど、さまざまな美しいグラデーションを描くmixinをまとめた「SuperGradient」を紹介します。 ↓4色を使った斜めのグラデーション、美しいですね！ SuperGradient SuperGradient -GitHub SuperGradientではグラデーションのタイプとカラー、そのカラーが始めるポイント... 続きを読む

[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ | コリス

2014/11/17 323 users opacity Sass コリス box-sizing CSS

15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） ... 続きを読む

【Susy】Sass,Compassでグリッドレイアウトしまそ - Milk+ea

2013/11/26 52 users Compass 変数 Getting started 使い方

2013-08-13 【Susy】Sass,Compassでグリッドレイアウトしまそ SASS 何 SusyはCompassのプラグインです。 グリッドなサイトを制作するためのMixinを提供してくれます。 モバイル・ファーストも可能よ。 インストール Susy: Getting Startedを眺めたら多分わかります。 使い方 初期設定 Susyを使うときは次の変数に何かしら値を代入してから使い... 続きを読む

Sassのfor文で連番スプライトを管理する | DECONCEPTER

2013/11/21 10 users Sass DECONCEPTER Compass 連番 ループ

前回のSassで複数のカラーバリエーションクラスを一括で生成するではコレクションをループする方法について書きましたが、単純に連番のクラスを生成したい時にはSassのfor文が便利です。Sassのmixinとextend以外活用していないという方は一歩踏み込んで使ってみると楽しいと思います。 例えばtag1〜8のボタンをcompassでスプライトシートにしてループで8つのボタンのクラスを定義したいと... 続きを読む

compassでcssスプライトするときの出力をできるだけ少なくする試み - しるてく

2013/07/17 39 users Retina Compass CSSスプライト 出力 メモ

2013-07-17 compassでcssスプライトするときの出力をできるだけ少なくする試み css compass 概要 Sprite layouts | Compass Documentationcompassでのcssスプライトを試してみたのでメモ。 sprite-backgroundっていうmixinは結構色々な人がブログに書いてるんだけど、retina対応していなかったり、無駄な処理が... 続きを読む

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集 | Webクリエイターボックス

2013/07/01 486 users Sass SCSS CSSコーディング Compass すそ

以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそ... 続きを読む

Scalaのtraitはmixinか？ - 西尾泰和のはてなダイアリー

2013/03/06 40 users trait Scala Squeak 西尾泰和 上書き

Rubyのmixin(モジュール)、Squeakのtrait、Scalaのtraitそれぞれについて：Q1: メソッドの実装を持てる？はい、はい、はいQ2: クラスがそれを複数個継承できる？はい、はい、はいQ3: インスタンスを作れる？いいえ、はい、いいえQ4: 複数個継承した際に名前が衝突しました、どうなる？しれっと上書き、エラー、エラーQ5: 継承パスに参加する？する（？）、しない、する（？）... 続きを読む

Scalaのトレイトは実はトレイトじゃなくただのミクスイン - Smalltalkのtは小文字です

2013/03/06 69 users トレイト Smalltalk trait Scala 実装

タイトルは釣りです。まずおおざっぱに用語の整理をさせていただくと、ここで「トレイト」は、シェルリ（Nathanael Schärli）ら考案したTraitsやそれ用のエンティティ（trait）や機構名を指し、「ミクスイン(Mixin, mixin)」は従来の実装の多重継承方法のひとつ、具体的にはクラス、あるいはクラス様エンティティを注目するクラスの継承パスに挿入する機構や、それに用いるクラスあるい... 続きを読む

htmlを拡張するビルドツールHammer【Mac】 | Sou-Lablog

2012/12/12 50 users Sou-Lablog インクルード CSS 変数 HTML

ソウラブログまたはソウラボログ。WebなどのBlog。多分。2012年はSass,LESSに代表されるcss拡張メタ言語がブレイクした年だったのではないでしょうか。 変数やmixinなど一度つかうと素のcssには戻れないくらい魅力的な機能が増えますよね。 そしてこの度htmlでも変数、インクルードなどが使えるツールが登場しましたよ。 その名もHammer for Macです。 Hammer (￥2... 続きを読む

ブラウザでJSX, CoffeeScript, SCSS, LESSをすぐに試せる魔法の1行 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/07/13 60 users less CoffeeScript jsx SCSS CSS

ブラウザだけでjavascript, HTML, CSSを書いて実行できるサービス「jsdo.it」が、ちょっとパワーアップしました！ これまでの言語に加え、JSX, CoffeeScript, SCSS, LESSを実行できるようになりましたー！！ 「ちょっと試したいけど環境を作るが面倒...」「SCSSのmixinをシェアしたい」などなどブラウザだけで解決できちゃいますよ♪ 使い方 コードの1... 続きを読む

SVG Gradient をSASS (LESS) で生成して CSS Gradient として扱う mixin | ヨモツネット

2011/12/26 30 users less linear-gradient Sass SVG

2011年12月22日 木曜日 この記事では最終的に、linear-gradient 関数を SASS の mixin にまとめたコードを解説します。これは、Webkit 系ブラウザーや Firefox だけでなく Internet Explorer 9 でも SVG 経由で再現可能でとても便利です。 まず、利用例を紹介しますと、次のように mixin を利用することになります。 .selecto... 続きを読む

ECMAScript と OOP パラダイム、それに ES.next の議論中 OOP 周りのシンタックス - oogattaの勉強日記

2011/12/04 129 users ECMAscript OOP シンタックス trait 周り

ECMAScript | 16:14（まだ書き中！）JavaScript Advent Calendar 2011 (オレ標準コース)4日目の id:oogatta です。どうもどうも、いやどうも。最近丁度 ES Wiki を眺めていて、面白いことになってるなあ。変態的なことになってるなあ。と楽しく見ていた OOP パラダイム周りのいくつかの手法（定義、継承、 mixin 、 trait ）につい... 続きを読む

JavaScript での Mixin の書き方 - わからん

2011/10/30 35 users Mixins プロトタイプ アプローチ サンプルコード 元記事

JavaScript で Mixins がどう書けるのかを、A fresh look at JavaScript Mixins « JavaScript, JavaScript… のサンプルコードを流用して説明します。それぞれのアプローチのパフォーマンス比較など、ここに載っていないことは元記事を参照して下さい。 　プロトタイプをコピーする関数 extend を用いたミックスイン以下は RoundB... 続きを読む