I'm kubosho_

思想の固まり

Atomic Designを実案件に導入して運用してみた結果はどうなのか

かつてAtomic Designの考え方と利点・欠点という記事を書きました。 この記事内で日本ではAbemaTVで使われていると書きました。そして今でもAbemaTVではAtomic Designの考えに基づいてコンポーネントが作られています。 AbemaTVでの経験を通じて、Webアプリ…

Sassなどにあるルールセットを入れ子できる機能がいらないと感じる理由

CSS

Sassなどにはルールセットを入れ子できる機能がありますが、個人的にはいらない機能だと感じています。 理由は、詳細度の総計が分かりにくくなるので .foo .bar .baz .foobar みたいに上書きしにくいセレクタ宣言ができてしまうことが多いように感じるためで…

CSSを破綻させない

12/3(土)にCSSを破綻させないということをbuilderscon tokyo 2016で話しました(動画見ましたが「えっと」や「なんか」とか言い過ぎなのと、髪の毛触りすぎですね)。 そこで使った発表資料の内容を編集した上で、CSS Advent Calendar 2016 14日目の記事と…

若者?がCSSを覚えた方法

もうちょっと書こうかなと思って結局放置してしまったので公開していきます。 1年前、こんな記事を見ました。 若者はどうやってCSSを覚えたのか どうやってCSSを覚えたのか、その方法について書かれている記事をあまり見たことがない気がしたなと思ったので…

CSSをリファクタリングするためのテストツール選定

この記事は今年のはじめに公開しようと思っていたのですが、体裁を整えないままずっと下書きに残ってしまっていたので供養の意味も込めて公開します。 もしかしたら間違ったことが書かれているかもしれないのと、情報も若干古くなってしまったのでそれらを承…

人生に悩んでいる20代後半〜30代前半は夏アニメのReLIFEを見たほうがいい

録りためていた夏アニメのReLIFEをこの休日を使って一気見したのですが、ストーリーが自分にぶっ刺さり、また自分の人生を見つめ直し、これから後悔しない人生にするためにはどうしたら良いのか考えるきっかけになったので、ReLIFEは何がいいのかを一応ネタ…

Atomic Designの考え方と利点・欠点

Atomic Designはデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV(アベマTV)で使われています。 (Atomic Design を実案件に導入 - UI コンポーネントの…

Re:VIEW + RedPen + Travis CIの環境を構築できるboilerplateを作った

夏コミに向けての進捗どうですか。 ブーメランを投げたところで、「執筆環境を整えて自動校正やgh-pagesへのデプロイもしてくれる」Re:VIEW boilerplateを作ったので紹介します。 リポジトリ:https://github.com/kubosho/review-boilerplate Re:VIEW boiler…

ErgoDox EZを2週間使ってみた感想

最近夏コミに向けての執筆やTwitterクライアント作成に忙しいですが、それらを支える物として最近ErgoDox EZが加わりました。 ErgoDox EZが欲しすぎて買おうかどうかをErgoDox users meet upに行ってから決めようとしていたところを、行く前に購入してしまっ…

GitHubでファイル差分を見るときに空白を自動的に無視するJavaScriptを書いた

GitHubではファイル差分を見るときにクエリ文字列として「?w=」を付けると空白を無視することができます。 ですが、いちいち「?w=」を付けるのは面倒なので、自動的に「?w=」を付けるようにしてみました。 前提 Chrome拡張のScriptAutoRunnerが必要となりま…

CSS in JSの資料やリポジトリまとめ

CSS in JSについて調べる必要が出てきたため、せっかくなので見ていた資料やリポジトリを共有しておきます。 資料 React: CSS in JS // Speaker Deck 原典(まだ読み切れてない) React.js + CSS - Qiita 原典の資料を元に、なぜCSS in JSがでてきたのかを解…

Nicoのこれまでとこれから

Bootstrap Advent Calendar 2015 8日目の記事です。 ここではBootstrapのテーマの1つである、Nicoのこれまでとこれからについて書きます。 これまで まずはNicoができてから、現時点の最新バージョンであるv3.3.6-1.1.0までの軌跡を振り返ります。 はじめにN…

なぜ CSS や Grunt はつらいと言われるのか

少し主語を大きく書いてしまいましたが、*.css と gruntfile.js についての話です。 「CSS に死を!」と言われたり、「CSS 勉強するのはだるい」と言われたりしますが、これらを見ていると「Grunt がつらい」という話と共通項があると感じました。 どちらも…

fs.exists() が deprecated になった理由

はじめに wearefractal/vinyl-fs の dest(folder, [opt]) が出力先のディレクトリが無い場合でも、そのディレクトリを作ってくれないということで、自分で「ディレクトリの有無を確認して、無い場合はディレクトリを作る」という処理を作る必要がでてきまし…

CSS イベント「Back to Basics」に行ってきた

CSSイベント「Back to Basics」というのが昨日(2015/8/30)あって、そのイベントに発表者として参加してきました。 自分の発表資料は以下のものとなります。 background-(image|size) の深みへようこそ from Shota Kubota CSSイベント「Back to Basics」2015/…

μ's のメンバーの名前が付いたソフトウェア一覧

OSS の名前での μ's の状況 Honoka, Rin, Maki -> すでにある Nozomi -> 自分が作った Kotori -> 少し違うけど名前的にはある Hanayo, Umi, Eli, Nico -> まだない— イカ: kubosh0 (@kubosho_) 2015, 6月 29 ということで、一覧化してみました。 名前 URL 概…

Visual Studio でも Gulp が使いたい!

Visual Studio でも Grunt もしくは Gulp が使いたいと思い、いろいろ試行錯誤した結果 [Task Runner Explorer](https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708) に落ち着いたので利用方法やなぜそれを選んだかを書…

MindBEMding の Modifier は元のクラス名と一緒に指定するべきか否か

MindBEMding の Modifier を定義する際、単一のクラスセレクタで書く方法と、複数のクラスセレクタで書く方法があると思います。 実際の HTML で示すと以下のような感じです。 複数クラス <table class="mod-table-01 mod-table-01--line-color-green"> <tr> <th>foo</th> <th>bar</th> </tr> <tr> <td>baz</td> <td>foobar</td> </tr> </table> 単一クラス

GitHub の Contributions を Ingress の Resistance 色にする Chrome 拡張を作った

GitHub の Contributions を眺めていて「これって Enlightened の色だよね」と思ったので、Resistance の色に置き換えるような Chrome 拡張を作ってみました。 Resistance Contributions - Chrome ウェブストア ソースはこちらにあります。 kubosho/resistan…

編集しやすいCSSにするために自分が心がけている事

CSS

自分がCSSを書くにあたって、気をつけている事です。

Web Audio API + Fabric.jsを使って「あの楽器」を作ってみた

JavaScript Advent Calendar 2014 16日目の記事です。今回は初音ミクのInnocence(Long version)の3DPVに出てくる楽器、通称「あの楽器」をWeb Audio APIとFabric.jsを使って、実装してみました。 「あの楽器」とは? 下記のPVで22秒あたりから登場する、謎の…

神獄のヴァルハラゲートのCSS設計

CSS Architecture Advent Calendar 2014 9日目の記事になります。 神獄のヴァルハラゲートのCSS設計方法について振り返りつつ、こうしているということや、上手くいったところ、改善したいところを書いていこうと思います。 アプリの規模 ASP.NET MVCを使っ…