frontend meetup vol.1 in finc での登壇資料です。
React/Reduxで半年くらい真面目にSPAするとわかること
frontend meetup vol.1 in finc での登壇資料です。
DockerとSeleniumGridとNightwatchでE2Eテストを始めよう - 文系プログラマによるTIPSブログ
Dockerで簡単に始められますよ〜 Nightwatchならライトにサクッと書けますよ〜 皆さんはE2E(end to end)テスト、してますか？ 今回はDocker、Selenium grid、Nightwatchを使ったE2Eテスト（ブラウザテスト）の環境構築からテスト実行、VNCでテスト実行の様子を確認するところまでやってみようと思います。 技術要素 なぜNightwatchなのか 環境構築 docker node.js for mac for windows テストの準備 dockerコンテナ git clone node_moduleの依存 nightwatchの設定 docker-hub Nightwatchでテストを実行する ローカルでテストする場合 Selenium Gridで並列テストする場合 dockerコンテナの起動 Selenium Gridの動作確認 Nigh
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
React with Reduxによる大規模商用サービスの開発 / nodefest2016
東京Node学園祭2016で話したブッキングテーブルのやつ
Feature.js
Feature.js, a feature detection library in 1kb A Fast, simple and lightweight browser feature detection library written in plain JavaScript. Try it by opening this page in different browsers and seeing the results: What is it Feature.js is a fast, simple and lightweight browser feature detection library. It has no dependencies and weighs only 1kb minified and gzipped. Feature.js automatically i
react-storybookを用いたReactコンポーネント開発 - Hatena Developer Blog
こんにちは！Webアプリケーションエンジニアの id:amagitakayosi です。 今日はReactコンポーネントを手軽に開発するためのツールを紹介します。 前回のあらすじ react-storybookとは 導入してみる 初期設定 storyを作成する 起動 イベントを監視する Hot Module Reloadingの仕組み メリットとデメリット リアルタイム確認できる 導入が簡単 ストーリー駆動開発できる デメリット: Webpackの機能で動いてる まとめ 前回のあらすじ developer.hatenastaff.com 前回の記事では、Reactコンポーネントをnpmパッケージとして開発する方法を紹介しました。 対象としたのはこちらの無限スクロール用のReactコンポーネント。 http://www.npmjs.org/package/@fand/react-infini
💓 Vue.js
�bN#�� �J= �� �To#�� �rl#�� � z#�� �r>#�� @ x#�� �|L#�� � z#�� `�R#�� ��4#�� @ P#�� ��~ �� p�y#�� � h#�� �U �� ��y#�� ��x#�� �s#�� �w#�� �{s#�� �y#�� 0�J#�� p�z#�� ��q#�� `�v#�� 0�q#�� p�4#�� �Ch#�� ��h#�� �0#�� ��M#�� @�M#�� ��>#�� ��J#�� ��J#�� �GU#�� �Bx#�� PJx#�� вy#�� �c9#�� �i9#�� ��7#�� p�7#�� �7#�� `�v#�� �is#�� ps#�� ��w#�� `�w#�� ��w#�� �>#�� ��>#�� ��>#�� �qx#�� �ux#�� � x#�� ��>#�� �>#
Advanced Node.js Linting with ESLint
I gave this talk at EmpireNode in 2016.
乱数チューニングによる動きのコク
乱数チューニングによる動きのコク 1. 一様乱数 いわゆるMath関数による乱数。 雑味や臭みが強く、そのままでは使い物にならない。 2. 雑味を取り除いた乱数 下処理として臭みや雑味を取り除いた状態。一様乱数特有の発作的なガタツキがないのがわかるだろうか？ 過去2フレームに、距離33%以内の重複数が出ないようになっている。 シャッフルやスロットのアニメ処理など、2連続で同じ数字が重なるとバグって見える表現に有効。 3. コクのある乱数 乱数の旨味が濃縮された状態。中心極限定理により、自然な風合いに濃縮されている。 加算式による天然の正規分布は、ボックスミューラー法の養殖された乱数と違い、加算回数で生産者ごとの味わいが出せる。 パーティィクルや自然シミュレーションと相性が良い。 4. 芳醇なまろ味を出した乱数 口に含んだ後に、豊かな香りが広がる乱数。移動平均により連続性を出すことで、揺らぎ
実践投入してわかったflowtypeのメリデメ
facebook製の型チェッカ、flowを実践投入してみた結果、分かった良さと辛さを詰め込みました。
同じイベントのaddEventListenerを1つにまとめるライブラリを書いた
1つにまとめる? Reactなどのコンポーネント志向のライブラリを使っていると、各コンポーネントで同じ要素へ同じイベントを貼っていることがあります。 // Component A const handlerA = (event) => {}; window.addEventListener('scroll', handlerA); // Component B const handlerB = (event) => {}; window.addEventListener('scroll', handlerB); // singleton const eventObserver = require("ui-event-observer"); // シングルトンじゃない方法 // require("ui-event-observer").UIEventObserver // Component
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
Node v7 で入った WHATWG URL 実装について | blog.jxck.io
Intro Node v7.0.0 が公開され、今回のリリースで WHATWG URL の実装が Experimental として入った。 既に標準で含まれていた url module との違いや、URL API などについて解説する。 WHATWG URL URL は非常によく使われる、Web において重要なフォーマットの一つだ。 ものによっては一見シンプルに見えるかもしれないが、その仕様はそれなりに大きい。 しかし、これまで DOM/JS はこれをパースする専用の API を持っていなかったため、例えば <input type=text> に入力された URL 文字列のパースは、片手間な正規表現で行われることも少なくなかった。 同様に、動的生成されるクエリやハッシュなどを URL に含める場面でも、やはり文字列操作による構築が行われてきた。 片手間な正規表現や文字列処理が、URL が本
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート
超詳解！Service Worker Deep Dive ── HTML5 Conference 2016セッションレポート 保呂毅 はじめまして。GoogleでChromeの開発をしている保呂毅です。 Chromeの中では特にService Worker周りを担当してまして、最近はNavigation Preloadという新機能をがんばって実装しています。 先日開催されたHTML5 Conference 2016でService Worker周辺の最近（ここ1年くらい）の動向に関する発表をさせていただいきました。 今回は、この発表の内容を振り返りたいと思います。 Service Workerとは まず本題に入る前に簡単にService Workerの説明します。 Service Workerとはどういうものかと言いますと、 下のコードのようにnavigator.serviceWorker
TestCafeでブラウザの自動テスト(E2Eテスト)
TestCafeという自動テストフレームワーク(いわゆるE2Eテストフレームワークジャンルとしておきます)を試してみました。 TestCafeの特徴としては、Seleniumを使っていないこと、設定ファイルなしで利用できる点です。 Seleniumを使ったテストフレームワークとしては、Protractor、testium、WebdriverIOなどがあります。 (Seleniumを使わない他のテストフレームワークだとNightmareなど) Seleniumを使わずにどうやって自動的にブラウザを操作するかというと、中継サーバーを起動してそこにテストコードなどを追加して動かすことができるSelenium RC(1)方式に近いものだと思います。 同名のウェブサービス/クライアントアプリも出していて、こちらはSelenium IDEのようにGUIで操作して記録したものを再生などができます。 なぜ
Node学園 23時限目 アウトラインメモ
Node学園 23時限目 (今回はリクルート（東京駅）でやります！) - connpassに参加してきたのメモ npm@4、npm@5 node-gakuen-201610.md npmは後方互換性を重んじている Node.jsにbundleされているので npm@2のbreaking changeについて backwards-incompatible change to the way npm run-script handled its arguments npm@3 flat directory npm@2そのまま使い続ける人もいる 大きな変更は移行の壁になるという話 npm@4 Release v4.0.0 · npm/npm npm 4は小さな変更にした prepublish が npm install 時に実行されるのは Deprecated prepublishOnly と
JavaScriptの1msは4ms - Qiita
はじめに JavaScriptのタイマー処理(setTimeout(), setInterval())は1000分の1秒の精度(ms)で遅延時間を指定することができます。 setTimeout(function() { // 1ms後に実行してほしい alert('hello!'); }, 1); 見ての通り、上記のコードは第一引数に渡した関数が1ms後に実行されることを期待して書かれていますが、実際にこれを実行すると4ms以上の遅延が発生する可能性があります。 これは、JavaScriptエンジンの実装によって、4ms以下の設定値は4msに矯正するという処理が行われているためです。 ※追記）厳密には上記処理のみを実行した場合は4msへの矯正は行われないようです。4msへの矯正が行われる条件として当記事最下部に追記を行っておりますので併せてご参照下さい。 なぜ4msなのか 実はこの4msと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WAI-ARIAを活用したJavaScriptによるDOM操作
SPECIMEN
