rubyでいえばGemfileに
gem "foo", path: "~/foo"
みたいに書くヤツ。
いい感じにシンボリックリンクを貼ってくれるnpm linkを使うと良い。
npmモジュール側のディレクトリで下記。
$ npm link
利用側のディレクトリで下記。
$ npm link foo
モジュールが完成したら、下記で解除。
$ npm unlink foo
webpackerでrailsプロジェクトでもjsの再利用が進んだのでgemに負けじと活用したいです。
= render @posts
を省略しないで書くヤツ、毎回忘れてググるので貼っておきます。
= render partial: "posts/post", collection: @posts, as: :post
これが便利なシチュエーションは、@postsにPost以外のものが入ってるけど、viewとしはposts/postで出したいという時。
例えばPostをSTIしてUnpublishedPostというクラスがある場合にunpublished_posts/unpublished_post.html.slimを見に行かないようにするとか。
インターンの方の日報をチェックしてコメントするのが日課（仕事）なのですが、今まで、
「チェックしてないやつはどれかな？」
と探し回らなくてはいけなくて、さらに、
「チェックが漏れてる人がいたら申し訳ないな」
と思っていたのが、確認済みのものにチェックマークが入るようになってクッソ便利になった。
他に人にはどうでもいいかもしれないけど、僕にとっては日課がはかどるライフチェンジングな追加機能でした。
あざーす！
Rails Developers Meetup #6で交換型インターンシップについて発表しました。
Rails Developers Meetup #6 東京会場｜IT勉強会・セミナーなどのイベント情報検索サービス - TECH PLAY［テックプレイ］
もしインターンやってみたいなという方がいらっしゃったら下記から応募していただけるととてもうれしいです。
また、会社でインターンを受け入れて弊社のシステムで教育したいという方もいらっしゃったら連絡いただければ幸いです。
オフィスでいい感じだったので家でもPC用のデスクにイケアのLINNMONという横幅120cmの天板を使っています。
ただ、上記のように家の最近買ったディスプレイの足が低く、テーブルの上も手狭で気になっていました。
そんな時にネットで机上棚というものを見つけました。しかし、いかんせん高いし欲しいのともちょっと違ったので、
「自分で作ったら行けるんじゃない？」
と思って作ってみました。
あまり写真に変化がありませんが、テーブルの上に横幅の同じ棚が追加されたのがわかりますでしょうか？
これによってディスプレイの高さもちょうどよくなり、後ろにケーブルが出る系のものも隠す感じで繋げられるようになって机上のスペースが増えました。
このテーブルシェルフは近所のホームセンターでカットしてもらってネジで止めて、ミルクペイントのスノーホワイトを塗ってニスを塗りました。
足の部分を太くしたのはガッシリ感が出て良かったですが、ネジ穴はパテじゃなくてダボで埋めればよかったなと思います。今後に活かしましょう。
かかった値段は工具やペンキは余ってたのがあったので木とカット代で5000円ぐらいだったと思います。
なかなか満足度が高かったので色々作っていきたいです。
今までの流れはこうでした。
これがクッソ面倒だったのですが、pugならslimとほとんど同じなのでコピペでいけました。
$ yarn add pug
templateタグにlang="pug"を追加する。
app/javascripts/packs/components/foo.vue:
<template lang="pug">
header.content
h1 トップページ
</template>
<script>
いろいろ
</script>
<style>
いろいろ
</style>
「ヒューッ！」
webpackerの設定は一切無し。
RubyMineを使ってるなら、pugプラグインを入れればシンタックスハイライトもちゃんと動きますね。
Ruby - なぜ最終行に改行を入れるのですか？(71778)｜teratail
POSIX上、テキストファイルは「行」の集合体で、そして「行」は「0文字以上の文字+改行」からなっている、とのことです（Qiita）。
Rubyのコードでも、（よほど変なことをしない限り）それに従わない必要性のある理由もないことでしょう。C言語においても、改行で終わらないコードは正しく動くことが保証されません。
へぇ〜、やっぱ大事なんすねぇ〜。
create_join_tableでuuidを使う場合はどう書けばいいのか。
column_options: { type: :uuid }を使う。
class CreateJoinTableUserWork < ActiveRecord::Migration[5.1]
def change
create_join_table :users, :works, column_options: { type: :uuid } do |t|
t.index [:user_id, :work_id]
t.index [:work_id, :user_id]
end
end
end
現場からは以上です。
こちらについて、@tricknotesさんからズバリな回答をいただきました。
動的に増える要素へのイベント設定 | komagataのブログ
<ul>
<li>foo</li>
<li>bar</li>
</ul>
上記のようなHTMLでliが動的に増える場合、イベントのbubblingを利用して親の要素にイベントを設定しておいて下記のように捕まえればいいそうです。
const ul = document.querySelector("ul");
ul.addEventListener("click", (event) => {
if (event.target.tagName === "LI") {
console.log("FOO↑↑↑");
}
});
これなら処理速度も安心ですね。
こういうやり方はEvent Delegationって呼ばれてるそうです。
スッキリしました！
webpackerのお陰で最近jsを書いてるんですが、初歩的なところで悩んでいます。
動的に増える要素へのイベント設定をjQueryを使わずに書きたい。
// jQuery版
$(".foo").on("click", () => {
console.log("FOO↑↑↑");
})
// ES6版
const elements = document.querySelectorAll(".foo");
Array.from(elements, (element) => {
element.addEventListener("click", () => {
console.log("FOO↑↑↑");
})
})
.fooなDOMがのちほどAjaxなどで動的に増えた時、jQuery版は動くけど、ES6版だと動かないじゃない？
下記のように書くというのをどこかで見たんですが、div全部取ってくるなんて遅そうで怖い。
const elements = document.getElementsByTagName("div");
Array.from(elements, (element) => {
if (element.classList.contains(".foo")) {
element.addEventListener("click", () => {
console.log("FOO↑↑↑");
})
}
});
どう書くのが普通なんでしょう？