% cat

不定期!弊社のslackで話題になった技術tips集!😘 Vol.3

🐉 説明しよう!tips集とは!?

弊社のslackチャンネルには、各々が感じた、技術的なtipsを誰に向けるわけでもなく放り投げるチャンネルがあります!

↑こんな感じです。

この記事は既出であろうがなかろうが、tipsをひたすらまとめていく記事である!!😄

内容にまとまりがないのはご愛嬌です!弊社の仕事の様子の鱗片が少しでも感じられれば幸いです👌

次回: Vol.4
前回: Vol.2

📌 Ruby & Ruby on Rails編

- ファイルをDLしたときにファイル名が文字化けする場合

Rails日本語ファイル名がSafariやIEで文字化けする対策

文字コードをエンコードせずに送信していることが原因だそうですので、そこを解消すると良くなるようです。

- viewがいらない処理で、viewを呼びに行こうとするような場合

head :no_content を使うと良い。
マジックコメントは # -*- encoding: utf-8 -*- じゃなくても # coding: utf-8 だけで良い。

- grouped_options_for_select で optgroup が使える

内では options_for_select を繰り返し呼んでた

- Symbol#casecmp?

Symbol#casecmp?は大文字小文字を無視して比較する

- gem slack-ruby-clientでslashコマンドを打ちたいときは

 client.chat_command(channel:'HOGE', command:'/hoge')

でslashコマンドが打てる。postMessageは🙅

📌 Javascript編 (nodeなども含む!)

- console.logに色を付ける

console.log("ほげ%cぴよ", "color: red");

例でいうと、cookpadとかfacebookのコンソール開くと….?

- DOMContentLoaded と読み込み

DOMContentLoadedが使用されているJSをasyncで読み込むのはダメな理由

DOMContentLoaded周りの処理を詳しく調べてみました - Qiita

- class操作

下記は同じ

// jQuery
$(elm).addClass('hoge')

// native
elm.classList.add('hoge')

📌 CSS(style)編

- 任意の箇所を css で改行させたいとき

p
  span.hoge
    | ほげぴよ
  | ふーばー
.hoge::after {
  content: '\A';
  white-space: pre;
}
ほげぴよ
ふーばー

方法の1つ。 ::before だと ほげぴよ の前に改行。PCとSPで表示分けるときに使えそう!

- -webkit-box-orient: vertical; が動かないとき

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

ビルド時に「-webkit-box-orient:vertical」が削除されてしまう場合の対応

- overflow-x:hiddenの残念な知見

「overflow-xとoverflow-yのどちらかがvisible以外に指定されていると、もう片方はvisibleを指定しても、内部ではautoとして扱う」
その結果、overflow-xとoverflow-yによって、横だけ、もしくは、縦だけを見えなくするということは出来ない、ということになります。

overflow-x:hiddenで上下左右非表示になってしまう | teratail

🖌 残念すぎる...

📌 Git & Github編

- git cherry -v より贅沢に情報を取りたい!

$ git log upstream/master..$(git rev-parse --abbrev-ref HEAD) --pretty=format:"[%ad] %h %an : %s" -10

[Thu Jun xx 12:00:00 2018 +0900] xxxxxxxx user_name : commit_comment

便利ですねぇ。

- 不要になったコミットオブジェクトを整理するときは

git gcコマンドがありプロジェクトの軽量化のため定期的に実行すると良い。

Porcelain commands (git add、git commit)を使用すると、 git gc --auto が走るみたい

巨大すぎるとブランチ整理しないと動かない(っぽい?)

- Githubのとあるbaseに対して出ているPRを探したいとき

is:pr is:open base:xxxx

で検索すると良い。

- PRとかで使える絵文字リスト

emoji-cheat-sheet

🖌 これでめちゃくちゃデコレートしてコメント見てもらう作戦ができますね!

📌 linux & AWS編

API Gateway がプライベートAPIをサポートしてた

Amazon API Gateway がプライベート API をサポートします

📌 vim編

- ctagで生成時に除外設定をする

ctags --exclude="vendor/*" --exclude="*.git" -R

- vim 電卓

<C-R>=128/2
do this in insert mode

📌 ツール編

- macでログイン前の言語を変えたいとき

sudo languagesetup で変えられる

Mac のログイン画面で使う言語を変更する

- circleci 古いのはかってにキャンセルされたい

CircleCIの"Auto-cancel redundant builds"を有効にするとPRごとの冗長なCIをキャンセルできる

- スクリーンショットをコピペして使いたい場合

Command + Shift + control + 4 でスクショすればSlackなどに Command + Vでそのままペーストできる。

touchbarならcmd+shitt+4で保存先をクリップボードでもいけますぜ

📌 おすすめ編

- LightningQR

LightningQR | github

🖌 CTOが作ったQRコード生成のアプリケーション です! QRリーダーにはこちらも是非見てみてください!

- The QR Code Extension

URLをスマホにも送りたい時にPCから直接URLのQRコードを作ってくれるChrome extensionです。

The QR Code Extension

📌 小ネタ

- 絵文字の親指👍は...?

font-size: 665px; を超えると消失する

※ 🖌 ひし形ハテナになるみたいです。不思議です。

🖌 編集後記

毎回、とんでもなく豊作でまとめるのが大変! なんだなんだ、みんなtips集に期待してるのかな!?

さて、今回は2018/06/16 ~ 2018/06/22で放出されたtipsをまとめてみました。こんな感じで弊社の開発部はわいわいがやがややっておりますぞい!

IE11のサポートが2025年10月までという事実に発狂してみたり、みんな元気にやっております。

では、この企画が続けば、また次回に!

最新記事

BananaCI というツールを運用しています

こんにちは。[@endotakuya](https://github.com/endotakuya) です。 突然ですが皆さんは CI/CD 、してますか? オンプレミス型の Jenkins や Drone 、クラウド型の Cir...

endotakuya
2018年12月06日

シグナルと kill コマンドについてちゃんと調べてみた

開発中にプログラムが固まった時に `kill プロセスID` って打ったことがある方は多いかと思います 僕もそうで、 kill コマンドはプロセスを強制終了するためのコマンドだと思っていました ですが puma のログ...

tkhr0
2018年12月06日

Rails における弊社の CSS 設計

Hi. [rigani_c](https://twitter.com/rigani_c) です。 これはベーシックアドベントカレンダーの記事です。仲間たちの投稿一覧はこちら 🎄https://qiita.com/advent-...

rigani
2018年12月02日