やるしかなっちゃん

やるしかない!

lessのcalcに死ぬほどハマった件

題名の通りのlessのcalcにとんでもない落とし穴があって今日見事にハマってしまった。
下のようなよくあるcalcを書くとする。

width: calc(100% - 90px);

これをCSSコンパイルすると下のようになる

width: calc(10%);

100% - 90%になる(;´Д`)(;´Д`)(;´Д`)

どうやらコレは有名な不具合らしくて既にみんな知っていることだったらしい
ひょっとしてしらないのは僕だけだったのだろうか?

解決策としては以下のようにエスケープすれば良い

width: calc(~"100% - 90px");

[WordPress] WordPressでformのname属性に"name"を使ってはいけない

こんな時代だからformを作ることはよくあると思う
その時に命名をサボってname属性にnameと付けてしまうこともよくあると思う

<form method="post">
  <input name="name" type="text">
  <input type="submit" value="送信">
</form>
$name = $_POST['name'];
// $nameを使ってほげほげ

このような命名をサボったコードを書いてしまうとWordPressでは動作しない

原因はwp-includes/class-wp.phpを見てみると納得

// ソースコードの一番最初の方にある
public $public_query_vars = array('m', 'p', 'posts', 'w', 'cat', 'withcomments', 'withoutcomments', 's', 'search', 'exact', 'sentence', 'calendar', 'page', 'paged', 'more', 'tb', 'pb', 'author', 'order', 'orderby', 'year', 'monthnum', 'day', 'hour', 'minute', 'second', 'name', 'category_name', 'tag', 'feed', 'author_name', 'static', 'pagename', 'page_id', 'error', 'attachment', 'attachment_id', 'subpost', 'subpost_id', 'preview', 'robots', 'taxonomy', 'term', 'cpage', 'post_type', 'embed' );

WordPressのコアのソースコードに既に"name"が取られてしまっている

なので↓のようにname属性には正しく名前を付けましょう

<form method="post">
  <input name="tyantoshitaname" type="text">
  <input type="submit" value="送信">
</form>
$name = $_POST['tyantoshitaname'];
// $nameを使ってほげほげ

jQueryでページ読み込みが終わった後の処理

これがいつもどっちがどっちかわからなくなるので

DOM構築後に実行

$(document).ready( function() {
  alert('hoge');
});
$(function() {
  alert('hoge');
});

書き方が2つあるので頭が混乱するのだけれども下の書き方だけを覚えて上の書き方は二度と書かないようにしたい

CSSファイルや画像を読み込み終わった後に実行

$(window).on("load",function() {
  alert('hoge');
});

感想

これで完全にマスターした

CSSで画像の縦横比を維持したまま縮小する方法

max-width/max-heigthで最大値を指定して、widthとheightプロパティをautoにすればタイトル通りのことを実現できた

  /* 横に合わせる場合 */
  max-width: 100%;
  height: auto;
  /* 縦に合わせる場合 */
  max-height: 100%;
  width: auto;

jsfiddle.net

参考サイト(というかこのサイトを見れば全てわかる) bashalog.c-brains.jp

Facebookのアクセストークンをlocalhostで取得する方法

開発者登録の時にアプリドメインを指定するとそのドメインが認証の対象になるので、そのドメインならアクセストークンの取得ができるみたい

でもこのアプリドメインにはlocalhostを指定できないのでこれは困ったと思ったら簡単に解決できた

開発者画面の設定 -> 詳細設定 -> クライアントOautn設定から有効なOauthリダイレクトURLにlocalhostのURLを指定すればよいだけだった

f:id:k213:20160426005426p:plain

↑ここの場所ね

ポートを調べるコマンド

ポート番号決め打ちでどのプロセスが使っているか調べるにはlsofコマンドの-iを使えばいいらしい

$ lsof -i :3000
COMMAND   PID USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    99380 user   23u  IPv6 0xbf5d0b7b0a938607      0t0  TCP *:hbci (LISTEN)

curlでGET/POST/PUT/DELETE

最近wgetからcurlに改宗した
取り敢えずGET/POST/PUT/DELETEのリクエストを投げられたら勝ちだと思う

GETはcurlコマンドの後にURLでOK

$ curl http://www.example.com/

他のメソッドは-Xオプションの後にメソッド名を書けばOK

$ curl -X POST http://www.example.com/
$ curl -X PUT http://www.example.com/
$ curl -X DELETE http://www.example.com/

POSTでデータを送信するには-dオプションの後に書けばOK
ファイルデータの場合にはファイル名の前に@を付けるだけ

$ curl -X POST -d "hoge=0&fuga=1" http://www.example.com/
$ curl -X POST -d @hoge.json http://www.example.com/

完全勝利してしまった