kyaido / knowledge Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 128 KB

My knowledge

knowledge's People

Contributors

Watchers

knowledge's Issues

CSSで最後の行にだけスタイルを適用する公式

最後の行に適用（Xはカラムの数）

li:nth-child(Xn+1):nth-last-child(-n+X),
li:nth-child(Xn+1):nth-last-child(-n+X) ~ li {
    /* Add style rules */
}

複数行あった場合の最後の行に適用（Xはカラムの数、Yはカラムの数+1）

li:nth-child(Xn):nth-last-child(-n+Y) ~ li {
    /* Add style rules */
}

http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

JavaScriptで追加した要素に対してCSSアニメーションを適用させる方法

http://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
http://www.christianheilmann.com/2015/08/30/quicky-fading-in-a-newly-created-element-using-css/

遅延ロードのJSプラグイン

コメントは適当

・echo.js
https://github.com/toddmotto/echo
jQuery非依存
2263star
data-を使う感じ
なんか挙動あやしい？
youtube動画も遅延できる
http://www.entereal.co.jp/blog/entry_delay-loading-images-and-iframes.html

・jquery_lazyload
https://github.com/tuupola/jquery_lazyload/
本家というかデファクトスタンダード
3981star
背景画像にも適用できるみたい
タブの中にあった場合なんかにスクロールイベントを起こさないと発火しない

・lazysizes
https://github.com/aFarkas/lazysizes
jQuery非依存
2995star
http://qiita.com/suisho/items/3ad3c0eded587e432aa5

overflow-xとoverflow-yの組み合わせについて

http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue

http://stackoverflow.com/questions/5072467/why-does-overflow-yhidden-affect-the-visibility-of-items-overflowing-on-the-x

コマンドからMacの設定をいじるための参考URL

OSXのコマンドラインからすると捗った設定リスト
http://blog.matsuokah.jp/entry/2016/01/01/161753

Mac OSXの設定をAnsibleで9割以上自動化する
blog.matsuokah.jp/entry/2016/01/01/191338

ターミナルから Mac を設定する（defaults write コマンド等）
http://qiita.com/djmonta/items/17531dde1e82d9786816

勝手に独り読書会
http://baqamore.hatenablog.com/entry/2013/07/31/222438

Macでdefaultsコマンドで設定出来るオプションを調べる
http://rcmdnk.github.io/blog/2015/03/22/computer-mac/

Macギークなら知っておきたいdefaultsコマンドの使い方
http://tukaikta.blog135.fc2.com/blog-entry-209.html

Long list of defaults commands
https://github.com/mathiasbynens/dotfiles/blob/master/.osx

CSSのルールの参考

https://github.com/jareware/css-architecture

https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/

IE10,11はtransform-style: preserve-3dが使えない。
なので、これらに対応するためにはtransform-style: flatとして作っていかなければならない。
transform-style: preserve-3dが使えるのであれば親要素に3dを適用させてあげれば子要素も3dとして扱われるが、transform-style: flatでやっていくのであれば3d表現させるすべての個別要素にz軸の回転を指定する必要がある。

iOS safari（バージョンは詳しく調べてないけど少なくともiOS9）ではtransform-originにz軸を指定するとそれだけで拡大表示されてしまう模様。
なのでtransform-originでz軸を指定することは避けなければならない。

firefoxでperspectiveを親要素に指定していて、クリックで回転させると要素の大きさが変わることがあった。詳細まで見ていないがperspectiveを親に指定するのではなく、transformのperspective()関数を使って個別に指定したところ解決した。

参考：
Front-End Challenge Accepted: CSS 3D Cube
https://www.smashingmagazine.com/2016/07/front-end-challenge-accepted-css-3d-cube/

Why does transform-origin-z distort on Safari, iOS?
http://stackoverflow.com/questions/10339623/why-does-transform-origin-z-distort-on-safari-ios

Internet Explorer 10 の CSS 3D Transforms
http://unformedbuilding.com/articles/ie10-does-not-support-transform-style-preserve-3d/

IEでpreserve-3dは使えないが何とかする方法
http://blog.qaramell.com/iwate/9601

issueに新しいlabelをつける

意外とやりかたがわからなかったのでメモ。

個別のissueページで新しいlabelを作って貼れるかと思ったけどできなかった。
既存にないlabelはissue一覧のページからlabel管理のページに行ってlabelを作る必要がある。

確かに個別のissueから好き勝手にlabel作れたら大文字小文字の違いとかで似たようなlabelが大量に作られてしまう気もするのでこのやり方がいいのかも。

issue一覧からlabelsに行く

新しくlabelを作る

masterブランチの入れ替え

masterブランチと他のブランチで入れ替えを行った時に実行したこと。

masterから新しくブランチをつくって、masterを退避しておく。
後は下記を参考にマージをして、最後にいらなくなったブランチを削除した。

http://ka-zoo.net/2014/02/git-replace-master-branch/

スタッキングコンテキストについて

The stacking context - CSS | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

CSS stacking contexts: What they are and how they work
http://tiffanybbrown.com/2015/09/css-stacking-contexts-wtf/

SVNで使うコマンド

てきとうまとめ

svn co http://.. hoge
svn update
svn commit -m “commit”
svn st|grep '^?'|awk '{print $2}'|xargs svn add
（新規のファイルをまとめてaddする）
svn log -l 5
svn log -v
svn log --diff
svn log -r 1150:HEAD --diff
svn st | grep '^!' | awk '{ print $2 }' | xargs svn delete
（削除）
http://webtech-walker.com/archive/2008/11/24020619.html

bowerで管理しているライブラリをbrowserifyで扱うメモ

メモです。

bower install hoge --saveで普通にbowerのコンポーネントをインストールする
npm install debowerify --save-devでdebowerifyをインストールする
こいつはBrowserifyのプラグインで、npmだけじゃなくてbower経由のものも扱えるようにしてくれる
package.jsonに下記を書いておく

"browserify": {
  "transform": [
    "debowerify"
  ]
}

requireでbower経由のコンポーネントも使えるようになる！

jQuery

$ = require('jquery');だとjQueryが閉じこもってしまうので解決する必要がある
手段は色々あるっぽい（browserify-shimとか）
とりあえず下のような形でreuireすることで解決できる

var $;
window.jQuery = $ = require('jquery');

参考

http://qiita.com/cognitom/items/4c63969b5085c90639d4
http://qiita.com/tkdn/items/dd9cd9b6d4094f3b7f48

CSSアニメーションでフェードイン/フェードアウト

http://www.greywyvern.com/?post=337

visibility、opacity、transition-delayをうまく使って、jQueryのfadeIn・fadeOutと同じことをCSSのみで実現するやりかた。
便利。

svgに対する知見

svgoを使う

GUIで使うこともできるけどこれだと設定ができない
単純にsvgを表示するだけならGUIだけで問題ないが、アニメーションを伴う場合細かく設定してあげる必要がある
pathの結合をされては困る場合はmergePaths: falseを設定するなど

node.jsベースで使えば各種設定をすることが可能
https://github.com/svg/svgo/

使い方は上記のReadmeを見ればよいが、こちらに各種設定の日本語訳が載っていてとても便利
http://2ndidea.com/svg/optimize-svg-with-svgo/

svgをアニメーションさせる

svgをそのまま書きだしただけでは、<path>ではなく<line>や<ellipsis>が使われている可能性がある
（使うJSによっては、）これらの要素ではアニメーションができなく、<path>に変換しなければならない
<line>に関してはsvgoを使用することで変換できる
<ellipsis>は下記のサイトで変換が可能（未使用のため精度は不明）
http://complexdan.com/svg-circleellipse-to-path-converter/

技術的文章を書く時の心構えについての記事まとめ

文字を省略するJSプラグイン

コメントは適当

http://semooh.jp/jglycy/jquery-plugins/jtruncsubstr
古そう
でも動きとか日本語最適化とかされてて良さそう
シンプルなので改造も容易
タグが入ってきた場合の処理がだるい

https://github.com/kswedberg/jquery-expander
オプションが豊富
最新のバージョンだと日本語に対応してない？
└preserveWords: falseにすれば大丈夫だ

https://github.com/rviscomi/trunk8/
結構starがついてる
ただの省略もできるのでいいね
ただクラスつけたりができないぽい？
行数での判定しかできないっぽい

https://github.com/vaakash/jquery-collapser
なんかよさげ
指定の仕方が微妙っぽいのでだめだな、
テキストで直接発火させるのでそのうえで囲みたいところ

flexbox の対応

Android 4.4未満の標準ブラウザではflex-wrap: wrap;が実装されていない
inline-box だとフレックスアイテムが何故か回りこむ
flex をショートハンドで書いた場合のデフォルト値は古い仕様では異なるので注意
古い仕様で実装されているIE10、Android 4.3以前でバグのもとになるのでなるべくショートハンドで書かない。
http://developers.linecorp.com/blog/?p=2479