npmのgh-pagesでgithub pages にデプロイしようとすると、 $ gh-pages -d ./ fatal: A branch named 'gh-pages' already exists. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! webpack-cs-ltc@1.0.0 deploy: `gh-pages -d ./` npm ERR! Exit status …

stackoverflow.com 正規表現で 正規表現で置換するパターン。 function removeTrailingSlash(url) { return url.replace(/\/$/, '') } String.prototype.substr()で substrで判定するパターン。 function removeTrailingSlash(url) { if (url.substr(-1) ===…

github.com GatsbyJSでgithub user pagesにデプロイするまでの手順のメモ。 gatsbyのバージョンは、1.9.149。 gh-pagesのバージョンは、1.1.0。 install cliをシステムにインストール。 ❯ npm i -g gatsby-cli ❯ gatsby -h Usage: ../../../.nodebrew/curren…

developer.sketchapp.com Sketch Developer — Your First Plugin を見て、sketchのプラグインの作り方の概要を把握する。 前提条件 node.js(v6.x以上) + npm が使える状態であること skpm pluginのscaffoldを生成するときなどにskpmが便利。 skpm.io scaffol…

CSS or SassとSketchでdesign tokensを共有したい場合、どうやってdesign tokensを管理するべきか。 調べた感じだと、現時点だと以下のツールあたり。 theo brand.ai Lingo これらのpros/consをざっと見ていく。 theo theoを利用することで、CSS、Sass、ios…

12日目はドキュメントについて。 When creating a design system it’s important to be mindful that you won’t be the only designer (or developer) who works with it. Plasma design system – Andrew Couldwell – Medium デザインシステムを作る上で、デ…

11日目はvoice & tone。 voice & tone は、UI上でのユーザとのコミュニケーションについてのあり方を示すことと、その状況による使い分け方に関してのガイドラインのことを指しているもの。例えば、何かしらエラーが発生したときにエラーメッセージをどのよ…

10日目はアクセシビリティ（A11y）について。 アクセシビリティは、どのようなユーザに対しても十分な利便性が保たれてるかどうかを計るもので、デザインシステムにおいて重要な要素の1つ。多くのデザインシステムでは、アクセシビリティに関してガイドライ…

9日目はモーションについて。 デザインシステムにおいてモーションをどのように管理するか。 モーションの分類 カラーパレットなどと同様に、モーションもプロダクト内でどのようなパターンを持っているのか、全て洗い出す必要がある。全てのモーションが同…

8日目はアイコンについて。 If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common th…

7日目はスペースについて。 デザインシステムにおいてスペースをどのように管理するか。 構成要素 UI上の空間を作り出すものをスペースの構成要素と考えると、CSSにおいてはmargin、paddingやtop、leftなども含めてスペースに該当すると考えられる。flexbox…

6日目はタイポグラフィについて。 デザインシステムにおいてタイポグラフィをどのように管理していくか。 構成要素 まずタイポグラフィはどのような要素で構成されるか。代表的なものをあげると大体以下のようなものになる。 font-family font-size font-wei…

1日目から4日目まで、デザインシステムの構成要素やInterface Inventoryなどを対象にして、デザインシステムの全体像の把握や必要性について書いた。 5日目からはデザインシステムの構成要素それぞれについて見ていく。5日目は、カラーパレットについて。 デ…

4日目はデザイントークンについて見ていく。 Design Tokens（デザイントークン）とは Design Tokens are an abstraction for everything impacting the visual design of an app/platform.— Sönke Rohde (@soenkerohde) 2016年6月24日 デザイントークンとは…

3日目はInterface Inventoryについて見ていく。 An interface inventory is a comprehensive collection of the bits and pieces that make up your interface. Interface Inventory | Brad Frost Interface Inventoryとは、プロダクトのUIを作り上げている…

1日目に、デザインシステムとはプロダクトであり、他の全てのプロダクトで利用可能なUIのエコシステムを提供するものであること等について学んだ。 じゃあ、実際にデザインシステムを作ろうとなったとして、どういうもので構成するべきなのか。 medium.com …

1日目は、まずデザインシステムとは何かを整理。 デザインシステムとは何か。いくつかの資料に目を通した上で、主要要素と考えるのは以下の点。 プロダクトにおけるデザインのSingle Source of Truth 従来のスタイルガイドがプロダクトのコードベースの中で…

デザインシステムについて学ぶ1人advent calendarを以下の予定で進める。 日付 内容 12/01 デザインシステムとは何か 12/02 デザインシステムの構成 12/03 Interface Inventory 12/04 Design Tokens 12/05 カラーパレット 12/06 タイポグラフィ 12/07 スペー…

stackoverflow.com $ bundle update hoge だと依存関係を持ったgemも含めて更新する。 bundler v1.13以前だと、他のgemと依存関係があっても特定のgem以外更新したくない場合、--sourceオプションを使う。 --sourceオプション自体がそういう用途で用意されて…

React コンポーネントを webpack、babel等を使ってnpmとして公開するまでの手順。 環境準備 まずはプロジェクトディレクトリを作成して、必要なファイルを作成する（ドットファイルだったりREADMEだったり）。 $ mkdir react-hoge $ cd react-hoge $ touch R…

SFC(stateless functional component) ではReactが未使用の変数としてeslintに検知された。 import React from 'react' // <- 'React' is defined but never used no-unused-vars const Header = props => { return ( <header> <h1>{ props.title }</h1> </header> ) } export default …

-l or --local 現在のブロックのローカル変数。 -g or --global グローバル変数。 -U or --universal 全体のスコープ。PC全体のfishのインスタンスで共有される変数になる。 -x or --export 環境変数。子プロセスに渡す。 -u or --unexport -xの逆で、子プロ…

npm installやyarn installで追加したcssを@importするとき、../../node_modules/normalize.css/normalize.cssのようにnode_modulesまでのディレクトリを辿っていくのは面倒。 stackoverflow.com So using the prefix ~ at the start of the path tells the …

github.com extract-text-webpack-pluginでcssを別のファイルに出力するようにしていると、hot module replacementが使えない。 process.env.node_env !== 'production'でdevelopmentとproductionでextract-text-webpack-pluginを使い分けて、開発環境ではho…

webpackでCSSをインラインのstyleではなく、CSSファイルとして出力する場合の設定。 extract-text-webpack-pluginを使ってCSSを別ファイルに出力する。 extract-text-webpack-plugin Extract text from a bundle, or bundles, into a separate file. バンド…

homebrew upgradeしたあとにmacvimを起動してもウィンドウが表示されなくなった。 以下のコマンドをたたくと解決する。 $ defaults write org.vim.MacVim MMLoginShell -bool NO defaults writeはmacのアプリの設定を変更するコマンド。 superuser.com tukai…

$ bundle exec rails s -b 0.0.0.0 Sorry, you can't use byebug without Readline. To solve this, you need to rebuild Ruby with Readline support. If using Ubuntu, try `sudo apt-get install libreadline-dev` and then reinstall your Ruby. brew up…

stackoverflow.com macvimではデフォルトのgvimrcをvimrcの後に読み込んで、その際にデフォルトのcolorschemeがあてられる。 なので、.gvimrcにcolorschemeを指定しておかないとmacvimでは意図した通りの表示にはならない。 " ~/.gvimrc colorscheme spacema…

whoami ユーザ名を表示する。 $ whoami # -> username id ユーザのUIDやGIDなどを表示する $ id # -> uid=501(username) gid=20(staff) groups=20(staff),12(everyone),61(localaccounts),79(_appserverusr),80(admin),81(_appserveradm),98(_lpadmin),33(_a…

github.com A polyfill is code that adds missing functionality by monkey patching an API. Unfortunately, it usually globally patches built-ins, which affects all code running in the environment. polyfillはAPIにパッチをあてることで欠けている…