[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめBubble Layout Bubble Layout -GitHub まずはアニメーションを使った斬新なUI、バブルレイアウト。 ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。
![[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe7aba32b3039602901d0b81d414d66c71a445ea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016031405.png)
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita
想定しているシチュエーション 非SPA環境で個別にマウントされるコンポーネントがそれぞれで小さくFluxするような環境。 SPAガッツリ組むのでないなら、Fluxフレームワークは不要だと思っていて、とは言えオレオレ構成も行き過ぎると害になる。 その辺のバランスをとって、次のような構成がいいのではないか、と考えてみた。 考え方 コンテナがEventEmitterを1つ保持する コンテナはEventEmitterの各種イベントをListenする コンテナはpropsとstateを区別して扱い、stateを更新する コンテナはコンポーネントを一つだけ描画する コンポーネントはpropsとして渡されたEventEmitterを発火させる コンポーネントはEventEmitterをListenしない コンポーネントはpropsのみ扱う コード // src/components/header.js
devtool - ChromeのDevToolsを使ったnodeデバッガー
nodeを使ったソフトウェア、開発案件が増えてきています。そして開発を効率的に行うために必要なのがデバッグツールです。皆さんは何を使っているでしょう。 今回紹介するのはChrome/Chromiumで使われているDevToolsを使ってnodeアプリをデバッグできるdevtoolです。 devtoolの使い方 devtoolのインストールはnpmを使って行います。 npm install devtool -g 後はdevtoolコマンドを叩くとコンソールがnodeのインタプリタになります。requireも使えます。 ソースなどのタブも利用できます。 もちろんブレークポイントも使えます。 使い方としては以下のようにスクリプトを渡したり、標準入力を渡す、Browserifyなどと組み合わせることもできます。 # run a Node script devtool app.js # pipe i
PhantomJS と CasperJS で複数ページを一括キャプチャする ｜ Tips Note by TAM
Web 制作をしているとページの表示確認やコンポーネントの洗い出しなどで、大量にキャプチャを撮ってきたい時があります。 しかしブラウザのエクステンションで1枚ずつ撮るのも面倒です。 そこで PhantomJS と CasperJS を使うとキャプチャを自動化することができるということなので、先達たちの情報を参考に、キャプチャしたいURLと想定するデバイスを CSV で管理して、楽にキャプチャがとれるものを作成しました。 PhantomJS と CasperJS とは PhantomJS ですが、グラフィカルな画面のないブラウザで「ヘッドレスブラウザ」と呼ばれるブラウザです。コマンドラインからブラウザの機能を使うことができ、フォームの操作やページの要素を取得することができます。よく CI ツールと組み合わせて自動テストを行ったり Web スクレイピングで使われたりします。 PhantomJS
Step-by-Step Async JavaScript with RxJS
RxJS is tremendously helpful in working with asynchronous code, but you’ve probably been stuck trying to use concepts you already know from Promises or Callbacks and applying them directly to RxJS. These lessons walk you through the step-by-step of building a simple game application with many asynchronous pieces. Each lesson focuses on a single operator or idea of how RxJS helps simplify your code
Trello clone with Phoenix and React (pt.2)
This post belongs to the Trello clone with Phoenix Framework and React series. Intro and selected stack Phoenix Framework project setup The User model and JWT auth Front-end for sign up with React and Redux Database seeding and sign in controller Front-end authentication with React and Redux Setting up sockets and channels Listing and creating new boards Adding new board members Tracking connected
JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA
プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度（分布）で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。 多くの場合はこの「一様乱数」で取得した乱数を用いれば十分でしょう。しかし、場合によっては「一様乱数」ではなく、偏りのある乱数を用いることでコンテンツの見た目や現象の「自然さ」を演出することが可能です。 実は「一様乱数」に一手間加えることで、乱数の分布の偏りを制御できます。今回は乱数を使用して好みの分布を得るためのパターンをいくつか紹介します。 乱数分布のシミュレーションデモ （HTML5製） 次のデモはリアルタイムで乱数の出現頻度を計算し、グラフに可視化するコンテンツです。画面下のプルダウンで乱数の種類を
React.jsとCycle.js、Polymer俯瞰、そしてどれがいいのか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 現在のプロジェクトではVueを使っています。他のフレームワークを調査した結果のメモです。 用語とか一般的な話とか 用語 データ 情報を表現したもの Model 加工したいデータ ViewModel 描画したいデータ DOM ブラウザが解釈する表示データ Event 外界から入力されたデータ 一般的な話 情報処理の本質はデータを他のデータに変換することです。 フロント、バック、ゲーム、なんであろうがそこは変わりません。 フロントにおいて、プログラムは、 Event+Model -> DOM の変換を行うものです。 ですが、この問題は一気に
JavaScript ASTを始める最初の一歩
何かJavaScriptのソースコードを機械的にチェックするためのツールを作りたいという場合に、JavaScriptのASTというものを触る必要が出てくると思います。 この記事では、その取っ掛かりとなる案内を簡単にまとめたものです。 ASTとは AST(Abstract Syntax Tree)はコードをパースした抽象構文木のこと。 JavaScriptの場合はJavaScriptオブジェクト(JSON)として表現されます。 コード: { "range": [ 0, 10 ], "type": "Program", "body": [ { "range": [ 0, 10 ], "type": "VariableDeclaration", "declarations": [ { "range": [ 4, 9 ], "type": "VariableDeclarator", "id": {
Designing in React: Why and How
FRONTEND CONFERENCE 2016 http://kfug.jp/frontconf2016/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - soegaard/urlang: Urlang is JavaScript with a sane syntax
GitHub - babel/babylon: PSA: moved into babel/babel as @babel/parser -->
[PDF] Electronの倒し方
gulp: The Good Parts
JavaScript のクラス構文で setter/getter をオーバーライドするとき - Qiita
たった2行のコーディングで、お問い合わせフォームを設置できるサービスを作った - Qiita
なぜ絵文字を含む文字を1文字ずつに分けるのにArray.fromだけで十分なのか？ - Qiita
GitHub - jpillora/velox: Real-time Go struct to JS object synchronisation over SSE and WebSockets
Live2D WebGLとNW.jsでデスクトップマスコット - Qiita
フロントエンドはDDDの夢を見るか
