チャンネルが増えすぎて目が辛いので、いい感じにまとめてくれる拡張を作りました! これが こうなります インストールはこちら Chrome: Slack Channels Grouping - Chrome ウェブストア Firefox: Slack Channels Grouping – 🦊 Firefox (ja) 向け拡張機能を入手 Opera: Slack Channels Grouping extension - Opera add-ons Edge: Slack Channels Grouping – Microsoft Edge Addons 特徴 ハイフンやアンダースコアで区切られたものをまとめます。 chat-犬 chat_猫 DOMの更新を監視しているので、チャンネル作成や名前変更などにも対応しています。 タブが非アクティブな場合はDOMの監視は止めています。 経緯 チ
メドピアマッスル部のフロントエンドエンジニア村上(@pipopotamasu)です。 最近筋トレに時間を割かれ、家でコードが書く時間が減ってしまったのが悩みの種です。 今日は最近作ったメドピア用Railsフロントエンドのボイラープレート、「medpacker」を紹介しようと思います。 github.com medpacker作成の背景 Railsには公式で大きく分けて2つのフロントエンドの環境があります、アセットパイプラインとwebpackerです。 これらはメドピアの既存プロダクトでも使ってきたのですが、プロダクトの規模が大きくなったり、時間が経つにつれて色々な辛みが見えるようになってきました。 アセットパイプライン 最終的にJSやCSSのファイルを1つのファイルに出力するため、プロジェクトが大きくなってくるとファイルサイズが大きくなってしまう(キャッシュが効いてないと読み込みが遅すぎる
概要 Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。 本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。 Font Awesomeのアイコンを使う(バンドルする)には以下の3ステップを踏みます。 Font Awesome を npm でインストールして、 JavaScriptのコードで必要なアイコンだけを import して Font Awesomeの必要最小限が含まれるように w
This guide goes through the various methods used to install webpack. Prerequisites Before we begin, make sure you have a fresh version of Node.js installed. The current Long Term Support (LTS) release is an ideal starting point. You may run into a variety of issues with the older versions as they may be missing functionality webpack and/or its related packages require. Local Installation The lates
The webpack compiler can understand modules written as ES2015 modules, CommonJS or AMD. However, some third party libraries may expect global dependencies (e.g. $ for jQuery). The libraries might also create globals which need to be exported. These "broken modules" are one instance where shimming comes into play. Another instance where shimming can be useful is when you want to polyfill browser fu
煽りタイトルですみません。 最近、Reactのプロジェクトのページを動かしていて、 もっさりしてる(レンダリングの負荷が高いな)と思ったので どうやったら無駄なレンダリングを減らせるか思考錯誤したことをまとめました。 preactとか別ライブラリの話はしません。 よかったらこちらもどうぞ ReactJSで作る今時のSPA入門(基本編) 2019年07月06日追記: ブラウザのレンダリングの仕組みに関して良記事があったので先に一読しておくことをおすすめします。 良記事1:実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか 良記事2:ブラウザレンダリング入門〜知ることで見える世界〜 1ピクセルがブラウザに表示されるまで:Life of a Pixel 2018 この記事に関してはReactのDOMツリー(レイアウト)レンダリングに関する最適化戦略です。 2020年02
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く