Phpstorm 2016.3で stylelintを動く様にする

PhpStorm 2016.3ではstylelintが動かなかったのでメモ。

問題点

/dist/cli.js を自動で探しに行く様になっているが、新しいバージョンのstylelintは /lib/cli.js に場所が変更している。

無理やり動かしてみた

projectのディレクトリに stylelint/dit/ のディレクトリを作成

ln -s ~/プロジェクトまでのパス/node_modules/stylelint/lib/cli.js ~/プロジェクトまでのパス/stylelint/dist/cli.js

でシンボリックリンクを貼る。

Phpstormの Preferences > Language & Frameworks > Stylesheets > Stylelint で Stylelint package に先程プロジェクト内に作ったstylelintのディレクトリを指定する

あとは、gitのexcludeに指定して自分の手元だけでignoreする

これで一応動くようになりました。 最新の2017.1版だと普通に動くっぽい。

悲しい。

スライドショーのライブラリをSwiperにしてみた

最近スライドショーを実装する機会がなんでかわからないけどなくて、新規案件で使う機会があったので久しぶりに

スライドショー javascript で検索。

長年使っていたbx sliderでも良かったんだけど、時代も変わってきたから新しいの使って見たかったってのもあったり。

なんとなくこうだったらいいなって程度の希望

• jQueryに依存してない
• IE11以降で動いてたらとりあえずOK
• flexbox製だったらなんとなくうれしい
• optionで自由度高そうなやつ
• npmで持ってこれたら幸せ
• すでに有名なサイトとかで使われている実績がある

で、出会ったSwiper

Swiper - Most Modern Mobile Touch Slider

まず、1番目のjQueryに依存してないやつあるの？とか思ってたけど、あるもんなんだなー。

というか、上記を全部満たすものが出てくると思わなくてテンションあがった。

npmで持ってこれるのimportしやすいから本当にありがとうございますって感じ。

とりあえず実装してみたけど、 Parallax のOption使うとアニメーションも楽にそれっぽいの作れた。

良い…！

まだChromeでしか確認してないから他で不具合起こったら、悲しみたいと思う

よく考えたら、ひとつ前の案件で slick 使ってた。 あんまり満足してなかったから忘れてた

Node.jsのバージョン管理をnodebrewからanyenv+ndenvに移行した時のメモ

anyenvをインストール

git clone https://github.com/riywo/anyenv ~/.anyenv

.bash_profile

export PATH=$HOME/.anyenv/bin:$PATH
eval "$(anyenv init -)"

既に記述している、nodebrewのパスはこの時削除する

source ~/.bash_profile

ndenvをインストール

anyenv install ndenv

完了したら、動くか確認

anyenv version
ndenv: system (set by /Users/USERNAME/.anyenv/envs/ndenv/version)

Node.jsをインストール

ndenv install -l

インストール

ndenv install v6.9.0

インストールされたか確認

ndenv versions

以下の様にかえってきたらOK

* system (set by /Users/USERNAME/.anyenv/envs/ndenv/version)
v6.9.0

nodebrewを削除する

~/.nodebrew

以下を全て削除

プロジェクトの .node-version があるディレクトリに移動して

node -v

.node-version の中身と一緒なら切り替え成功！ nodistでも .node-version を検知するみたい？なので、社内のwindowsの人には今まで通り、やってもらったらいいかな…. そもそもwinでもanyenvって使えるの…？

PC内に指定しているnodeのバージョンがなければ切り替わらないので注意。

bashからfishに乗り換えてみようと思ったんだけど、ndenv、fish未対応ってコメント見て、落ち込んでる

[参考]

• https://h2ham.net/anyenv
• http://qiita.com/tonkotsuboy_com/items/5322d226b6783d25b5df

2時間で学ぶ React ハンズオン in Osaka Vol.2 に参加してきました

2時間で学ぶ React ハンズオン in Osaka Vol.2

sha.connpass.com

初心者枠と、中級者枠があって、 メインは初心者枠の説明をする感じ。

connpassでも申込み者の人数が多いと事前に分かっていたけど、 会場も大きめでハンズオンするには足並み揃えるのが難しそうでした。

ハンズオンの内容

github.com

初心者は「課題Lv1 try! React.js Koans」

Koansのチェックの仕方を説明してもらって、

その後は一気に問題を解く形。

出きてない人って聞かれて手上げれる暇がなく、 結局、6問目の解説してる時5-2とかやってた。

折角詳しい人がいる環境でできるので 事前にある程度やっておいて、解説を聞きたかったなと思った。

正直、途中で他にもついていけてない人が結構いると分かって安心しましたw

「課題Lv1」の解説が終わった後は少しだけ「課題Lv2 SPA開発」の説明。 画像加工アプリの説明。

流石にアプリ作るまで一気にいけないので、

Koansもう一回やって、もうちょっとReactやってから 課題Lv2やってみようかと思います。

読んでる本

そろそろ、アウトプットする場所を作らないとなと思って、とりあえず今読んでる本を羅列する。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

 エンジニアはとりあえず読んどけって言われたので、読んでる。

今、半分くらい読み終わったが、自分のコードが何故読みづらいのか分かって良い感じ。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

 リニューアル前のやつ買って放置していたら、いつの間にか新版出てて読んでる。

JSの基礎が怪しいので、早いところ終らせてスキルアップしたい。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

 web業界にいるなら読んどかないとなと思って、読んでる。

JavaScript フレームワーク入門

今、Vue.jsに対するモチベが高くて触ってるんだけど、ReactとかAngulerも知っておかないと行きていけないかと思って読んでる。

サクッと知れる感じがちょうどいい。

CSSシークレット ―47のテクニックでCSSを自在に操る

最近、CSSの勉強をネットでその都度という感じなので、偏りがありそうで買ったやつ。

---

以下、積んでる本。

パーフェクトJavaScript (PERFECT SERIES 4)

JavaScript 第6版

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

関数型プログラミングの基礎 JavaScriptを使って学ぶ

----

Atomic Designの本も注文したので届くの楽しみ。

英語に対する抵抗をなくしたい。 

FRONTEND CONFERENCE 2017に参加しました。

FRONTEND CONFERENCE 2017に参加しました。

学生コンテストの審査員で来ていた大学の同期がいたり、 参加したセッションの隣の席と前の席が知り合いだったりと 注目されてるイベントだったんだなーっと感じました。

参加セッション

HTMLでUIを作るときの話

masup.net

「button、button、button。 全て、buttonですね。button要素好きなんですよ。」

っておっしゃってたのが印象的。

buttonにしようって思った。 divでマークアップするとtabで移動できないとか、一番下にmodal置いたら、tab移動で通り過ぎていっちゃうから、適切な要素で適切な場所にマークアップしようねって話。

例文に出たコードを未だ書いていてホントすみませんってなった。

WebGL 2.0 時代の幕開け

https://doxas.org/slide/frontkansai2017/doxas.org

WebGL 2.0 がやってくるー！

未だに1.0もよく分かってないぞー！！

という導入で始まった。まさに私です！感。

WebGL 2.0に変わったらどうなるの

→ フロントやる人にはあまりメリットはない。

　3Dやる人にとってはメリット超あるよって感じ

参考で出てきたサイトがめちゃくちゃ綺麗だった。 一回触っときたいなーとは思った！

参加ハンズオン

15:40〜 Reactで覚えるイマドキのフロントエンド開発

資料とハンズオン用のリポジトリ

speakerdeck.com

github.com

• ハンズオンの時間が、1時間しかない
• JSを学ぶわけじゃないので、ガンガンコピペで！

という感じですごい勢いで終わりました。

CSS in JSがどんな書き方になってるのか、 子要素で機能を追加して、親に状態をその後に持っていくのか、 感覚をつかむハンズオン。 結論：next.jsすごい。

参加者多くて、予約しといて本当に良かった。

挫折した(1年以上前)ぶりに、React触りましたが その時よりは面倒くさい所を既にやってもらっていたので 入りやすかった。

小さい規模でVue.jsを書いてるのですが、ReactはJS likeだなーってすごく思った。 全部JSだ！感すごい。