Heroku 運用検討 - Qiita
Standard 1xまでは、1 Dynoに割り当てられるメモリは512MB 無料枠は全アプリケーション合計で月1000時間まで 現在(2016/06/01-)の料金体系では、Freeプランだと1アカウントあたりすべてのアプリケーションやアドオンを含めて1000時間までが無料枠となります(ref)。なので、例えば開発環境用と本番環境用で2つDynoを稼働していて、さらにnewrelicのアドオンを使用していると、その3つの使用時間の合計が1000時間になるまでが無料となります。よって、例えばwebアプリケーションを運用していてひと月常時稼働させようとすると、まず本番環境用のDynoだけで 24時間 x 30(日) = 720時間 ぶんを消費します。またFreeプランで常時稼働するためには上記の表にある30分sleep制限を回避するスクリプトなどを含める必要があるので、それもHerokuで設
もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
React Storybook で変わるUI開発フロー (Redux Flavor) - Qiita
SPAを考える会 (D3勉強会 2016.10.06) by @kitaly (twitter: @kita_ly) 自己紹介 @kitaly Twitter: @kita_ly ソフトウェアエンジニア REST API開発 (Scala/Play) SPA開発 (TypeScript, Angular.js, React.js) ビズリーチ HRMOS プロダクト開発部 採用管理 (2016年6月リリース) 勤怠管理, 評価管理, その他HR系サービス (Coming Soon..) 過去の発表資料 サーバサイドエンジニアが 1年間まじめにSPAやってみた ビズリーチではDBFluteハンズオンやってます はじめに React / Redux / Webpack 前提の話ですが 他のコンポーネント志向FWなどでも、ユースケースやワークフローは応用可能だと思っています 新しいツール
Reactのサーバサイドレンダリングとパフォーマンスについてのメモ - Qiita
Reactのサーバサイドレンダリングとパフォーマンスについて調べてたのでメモ 基本的なこと サーバサイドとReactのproduction build 要約: Reactをサーバサイドで使うときも、クライアントサイドのように圧縮(というよりはcode eliminate)しないと遅い Reactはdev向けのコードを大量に含んでいる。 これはprocess.env.NODE_ENV !== 'production'の時実行されるassertや警告などが主となりproductionには必要ない。 そのため、process.env.NODE_ENV = 'production'をしないとかなり不利な結果を得る。 I tend to agree that "compiling server side code with webpack to remove access to process" i
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
CSSとSassのコーディングスタイルガイドを作ってみた - Qiita
CSS Styleguide CSSにはスコープという概念が存在しないのでコードを指定する順番を管理してカスケーディングを意図した通りにおこなわせる必要があります。また、インデントや命名規則など好みや考え方が異なることも多いです。 スタイルガイドは知識を共有することで認識のズレをできるだけ無くし、制作をする上での約束事を決めることだろうと考えています。以下のガイドラインはCSSとSass（scss記法）を扱う上でベターだと考えていることをドキュメントとしてまとめたものです。 このガイドラインは2015年11月15日公開（2016年1月14日に改定）されたもので、最新のガイドラインはGitHubで公開しています。 css-styleguide | GitHub manabuyasuda はじめに このスタイルガイドはCSSを扱う上でベターだと思われる方法をまとめたものです。必ずしも正しいもの
CSSのみで幅可変のヘッダ固定テーブルを実装 - Qiita
テーブルのヘッダを固定して中身をスクロールさせたいって事、めちゃくちゃあると思います。 当然既にいろんな対策が練られています。 方法としては、大きく分けてCSSのみで実装する方法と、JQueryでプラグインなどを用いて実装する方法があります。 （参考：http://webnonotes.com/css/table-header/） しかし、CSSだけで実装する方法では、幅を固定しなければいけないというデメリットがあります。 でも… CSSだけで幅可変のヘッダ固定テーブル、作りたくない？ と思ったのでやってみました。 解決法 結論から言うと、calc()とpaddingを利用します。 まずはテーブルを用意。 <table class="table-header-fixed"> <thead> <tr> <th>#</th><th>ヘッダ2</th><th>ヘッダ3</th> </tr> </
IntelliJ IDEAをDocker for Macと連携させる方法 - Qiita
$ socat TCP-LISTEN:8099,reuseaddr,fork,bind=localhost UNIX-CONNECT:/var/run/docker.sock 必要に応じて&やnohupをつけてください。 IntelliJとDocker for Macの連携設定 Dockerと連携するプラグインを入れて、IntelliJをDocker for Macと連携させます。 Dockerと連携するプラグイン(Docker Integration)の導入 Preferencesを開きます。Plugins画面で、Install JetBrains plugin...ボタンをクリックし、Docker integrationプラグインをインストールし、IntelliJを再起動します。 環境設定 もう一度Preferencesを開きます。Build, Execution, Deploymen
react nativeでfirebaseのネイティブSDKを操作する - Qiita
自己紹介 uryyyyyyy: しばたこ 本業はアドテクでScala/React/TypeScript 副業でReact Native 最近そこそこバズった記事→ReduxでのMiddleware不要論 話すこと React NativeでNative APIを扱ってみる Swift/Kotlinでやってみる お題として今回はFirebase SDKとGoogle認証を扱ってみます。 Firebaseのイベントトラッキングの方ではNative Moduleを扱う話、 認証周りでは、もう少し拡張してView/ViewControllerを扱ってみる話をします。 完成形 iOS Android ところで FirebaseにはNativeのSDKとWebのSDKがあるのは大丈夫ですよね？ ちゃんと調べてないですが、違いはAnalyticsが弱いとかPush通知とかだと思います。 せっかくのRea
ReduxでのMiddleware不要論 - Qiita
問題提起 （※タイトルはキャッチーなのにしましたが、Middleware全般の不要論ではありません。非同期処理において不要論です。） Redux使うときに非同期処理はどう書きますか？ 「よくわからないけどMiddleware使うらしい」と思考停止していませんか？ この記事では、Reduxは本来どのように扱うことを想定されているのかと、なぜ非同期処理の文脈でもMiddlewareが出てきたのか、そして「実はMiddleware無くても読みやすく書けるよね」という話をしていこうと思います。 Reduxでの設計を悩む人への個人的な解です。 （気になる・詳しく知りたい箇所などありましたらお気軽にコメントください） この記事のゴール ActionDispatcherという筆者が命名したクラスを使うことで、 複数の非同期処理を含むロジックでも読みやすく書ける ネットワーク通信などを含んでもテストがしや
react-native-web はクロスプラットフォームを加速するのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? A Glimpse Into The Future With React Native For Web という記事を読み、react-native-webというプロジェクトを知りました。 本記事では、この技術の概要と自分の意見を書きます。 react-native-webの概要 より抽象化されたViewでWebアプリを書ける React Nativeで書いたコードはiOS、Androidに対応する。 このコードがそのままWebで動くとよいのでは？という発想で作られたライブラリ。 *「ReactはもともとWebの技術じゃないか」*というな
Web開発者、アプリ開発者に捧ぐReactの提唱する"learn once, write anywhere"はどこまで本当なのか？ - Qiita
Web開発者、アプリ開発者に捧ぐReactの提唱する"learn once, write anywhere"はどこまで本当なのか？JavaScriptAndroidiOSReactreactnative 最初に この記事は React Native Advent Calendar 2016 23日目です。 釣りなタイトル失礼します。 以前、FacebookまじでReact Nativeやるってよ！でFacebookにとどまらず、Instagram, airbnbのアプリがReact Native製に置き換わっていることを投稿しました。 個人的に大きいニュースだと思ってます。 なぜなら安定稼働しているiOS/Androidのナレッジとチームを棄ててまでも、乗り換えを選択する理由がReact Nativeにはあると言ってるものだからです。 様々な理由があると思いますが、大きな要因は"learn
僕なりのフロントエンド開発環境 - Qiita
ちょっと古くなってきたので、タスクをアップデートした http://qiita.com/koh110/items/83cb29f8ecc2738ea8bb 最近フロントエンドよりの開発をする事が多く、そろそろ面倒くさい部分を自動化せねばなぁと思ってgulpのタスクなどを色々まとめて、僕の考えた最強のフロントエンド開発環境を整えた。 随時アップデートはしていくつもりだけど、しばらくはこれを使ってみようと思う。 ひと通りは以下のリポジトリにまとめた。 https://github.com/koh110/minjsapp 簡単に他のリポジトリで利用できるようにファイルだけcopyするシェルスクリプト付き $ git clone https://github.com/koh110/minjsapp.git $ cd minjsapp $ ./copy.sh /path/to/yourproject
react, redux周りのパッケージ選定とKPT[2016-06-18現在] - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに react, redux周りのnpmパッケージはまさに春秋戦国じだいがごとくパッケージが乱立し、訳がわからない状態になっています。 １か月後には全然違うKPTになってるかもしれませんが、現時点をログっておいて、１か月後に差分見たい。 [2016-06-18 追記]実際めっちゃ変わった。ウケる。 あくまで個人的な KPTですので悪しからず。 でもコメントは歓迎です。いろんな人とこの辺の構成の話したい^^ 前提 サーバーサイドレンダリングは不要 クローラーの対象になる必要がない画面なので reactらへん react(keep)
![react, redux周りのパッケージ選定とKPT[2016-06-18現在] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/73d65458330a3c09fc520a56a0c8566d1bc4f058/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzY2NDAlMkZwcm9maWxlLWltYWdlcyUyRjE1MTIwNTAwNjA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZTk1YzEzZjRlYzRkMmQwZWVhY2YwYTNjM2U4N2QyMWE%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5c5da7ae76cef4913c3603f39926503e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9cmVhY3QlMkMlMjByZWR1eCVFNSU5MSVBOCVFMyU4MiU4QSVFMyU4MSVBRSVFMyU4MyU5MSVFMyU4MyU4MyVFMyU4MiVCMSVFMyU4MyVCQyVFMyU4MiVCOCVFOSU4MSVCOCVFNSVBRSU5QSVFMyU4MSVBOEtQVCU1QjIwMTYtMDYtMTglRTclOEYlQkUlRTUlOUMlQTglNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0zNWE1YzRmMzZiOGUzODM5OWRmNWQ5NDM2ZWE4OTU0NA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDAxOTMmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1iZTBhYWZjNzJlZTdmYTgwMDMxYWIyOWY2NzVlZTdjNg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4c0cff9c42d3c93aae4eb8c7031217ad)
Reduxでのクライアントサイドvalidationをどこでやるべきか？ - Qiita
入力フォームを利用するとやっぱり大事になってくるValidationについてあれこれ悩んだ。 結論が完全に自分の中でも出てないが、とりあえず考え尽くした所まで 前提など validationとひとくちに言っても色々考える事がある 出力するエラーは一つ？複数？ エラーが出たフォームを赤くしたいとかある？ 複数の値を見てvalidationしたいとかある？ validateするタイミングは随時？ボタン押されたら？ 今回の話 Redux + Reactを使う 簡易なTodoリストを想定する Actionの形式はFlux Standad Actionを使う 一旦細かいことは脇に置きつつ、下記のvalidationを想定して実装してみる エラーメッセージは一つ Todoのinputが空だったらエラーとする Todoの追加ボタンが押されたタイミングでvalidateする redux-form、redu
redux-sagaの channel を使って同時実行数制御をする - Qiita
はじめに redux-sagaで非同期処理と戦う - API呼び出しのスロットリングでは同時実行数制御をputとget、二重ループで実装されていたが、redux-sagaのchannelを利用することでも同様のことができたので紹介する。 channelによる制御方法 実はズバリやりたいことが redux-sagaのドキュメント - 3.11. Using Channels > Using channels to communicate between Sagas に書いてある。 やることは、 channel を生成する。生成したchannelオブジェクトがキューになる。 同時実行数の数だけタスクをforkしておく。この際、生成したchannelオブジェクトをそのタスクに渡しておく。このタスクがワーカースレッドのように動作する。 タスクの処理では、引数で受け取ったchannelオブジェクトか
ゼロから始めるWebAssembly - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 学習記録 WebAssemblyとは ブラウザ上でクライアントサイドのスクリプトとして効率的に動くバイナリフォーマットです。 現在JavaScriptより軽量で高速な処理を提供するためにベンダー各社で開発されています。 現時点ではDOM, WebAPIへのアクセスとかできません。GCもない。なので現状使いどころは重い処理をWebAssembly部分に投げ出すイメージです。 スレッドとかもFuture Workらしい。 https://github.com/WebAssembly/design/blob/master/FutureFeat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでの要素のスタイル操作で !important を使う方法 - Qiita
今、Reactでリポジトリ公開するなら、これくらいは対応しておきたい - Qiita
React Storybookを自分のライブラリに導入して感じた事など - Qiita
