JavaScriptでループ中にスリープする。 - Qiita
function intervalForTo(startIndex,endIndex, interval, func) { if (!(startIndex <= endIndex)) { return; } var i = startIndex; var loopFunc = function () { if ( func(i) === false) { //戻り値がfalseならループをbreakする return; } if (i < endIndex) { setTimeout(loopFunc, interval); } i++; } loopFunc(); } function intervalForDownTo(startIndex,endIndex, interval, func) { if (!(endIndex <= startIndex)) { return; } v
ReactNativeで理解しておくと良いReduxとMiddlewareのフローを理解する - tomoima525's blog
(5/29/2017追記 ‘必要不可欠’ とタイトルに書いていたら'必要不可欠でない'と指摘を受けました。なんらかのデータフローの仕組みは必要だけどReduxである必要はないのでタイトル修正しました) 最近ReactNativeをちょこちょこ書いています。アプリ向けのReactNativeを書くにあたって理解がのぞましいのがデータフローの仕組みであるRedux、及び様々な処理を仲介するMiddlewareです。小さなアプリをつくってみて一通り把握したので、整理も兼ねて初めてReact-Reduxを触れる時にどの辺を見ればよいかまとめてみます。 作ったのはChuckNorris FactsのJokeを検索して表示するアプリです。 github.com デモ動画 昨日のReactNativeアプリ続き。Reduxにローディングのステートも追加してみた。iOSとAndroidでも想定通り動く。
Universities finally realize that Java is a bad introductory programming language
Design & Dev Universities finally realize that Java is a bad introductory programming language CS 106A is Stanford University’s introductory programming course. The module – which is also available to view on YouTube – introduces the fundamentals of coding in an accessible way, and lays the foundations for future growth. Throughout its existence, the course was taught using the Java programing lan
ダイナミックな機能をAMPで提供できるamp-bind、Googleがorigin trial参加サイトを募集中
[レベル: 上級] AMP プロジェクトは、amp-bind の origin trial の申し込みを募集しています。 amp-bind とは amp-bind とは簡単にいうと、AMP ページでインタラクティブな表現を可能にする AMP のコンポーネントです。 AMP では、 JavaScript をはじめとした動的な仕組みを提供する機能の使用が厳しく制限されています。 しかし、amp-bind を構成すれば、まるで JS を使ったかのようなダイナミックな機能を提供できます。 こちらは、amp-bind を構成した AMP ページの例です。 EC サイトの商品ページを想定していて、カラーと個数、サイズを選択できます。 選択したカラーに応じて、商品画像が切り替わり、カルーセル形式で閲覧できます。 アニメーションには映っていませんが、カートへの追加もできます。 デモなので動きとしては非常に
気が付いたらJSスクラッチ界隈が便利になってた件4 - Qiita
1.気が付いたらJSスクラッチ界隈が便利になってた件1 2.気が付いたらJSスクラッチ界隈が便利になってた件2 3.[気が付いたらJSスクラッチ界隈が便利になってた件3] (http://qiita.com/Bong/items/bd434fd7209b9a457139) 4.気が付いたらJSスクラッチ界隈が便利になってた件4 要素の操作が便利になっていた まだまだ終わらないよ！ ここで、自分の中の固定概念を、一度ぶっ壊すよ！ 要素を取得する もし、クマ好きのエンジニアが要素を取得したら、 今までのやり方だと、こんな感じ。 <p id="animal01" name="white" class="first animal">alpaca</p> <p id="animal02" name="white" class="second animal">bear</p> <p id="anima
ReactのプロジェクトをElectron化する。 - Qiita
前書き Reactが登場したおかげで、フロント業界に革命が起きました。 Webだけでなく、アプリもReactでかける時代です。 そして、Electronの登場により、Webのアプリをそのままデスクトップ化することが可能になりました！ 今回は、Reactで作ったプロジェクトをElectron化する方法について解説して行きます。 利用技術 React v15.4.2 Electron v1.6.2 webpack v2.3.3 ReactTodo 今回は、Reactの勉強で作成したReactTodoをElectron化して デスクトップ上で動かせるようにしてゆきます。 (Semanticで作った、とてもシンプルなTodoです。) 以下からCloneできますので、よければお試しください。 https://github.com/gcmae/react-todo.git 手順 今回の、設定の肝として
JavaScript - メタプログラミング - メソッド - 重複問題 - メソッドを動的に定義する(動的ディスパッチを追加、生成、イントロスペクション) | Kamimura's blog
JavaScript - メタプログラミング - メソッド - 重複問題 - メソッドを動的に定義する(動的ディスパッチを追加、生成、イントロスペクション)
ノンプログラミングで機械学習サービスが作りたい! フロントエンド編 - Qiita
今回の内容 これまで、テキスト分類編では機械学習の学習と分類のコア機能を、WebAPI編ではその分類機能をRESTのWebAPIとして提供する手順を説明してきました。 今回はこれらの内容を踏まえて、仕上げにサービスのフロントエンドを作ります。RubyやPythonなどで作るWebサーバサイドのアプリではなく、JavaScriptを用いたSPA(Single Page Application)として作っていきます。 Vue.jsのボイラープレートを基に、手を加えた行数は100行程度です。 ソースはhttps://github.com/shuukei-imas-cg/imas_cg_words で公開しています。 動作確認環境 フロントエンドの開発のため、これまでの記事と違いWindows上で開発・動作確認しています。 Windows10 node.js 7.5.0 npm 4.1.2 Vue
2017年の近況.js - 思ったこと
前回の記事を書いてから半年も経過しててびっくり。毎月何かしら脳がシェイクされるようなことが起きてて、予定なんか何も入れてないつもりでもカレンダーみるとグッチャグチャになってるー 忘れないうちに近況めも npm doctor npmに、npm doctor コマンドを追加した。 Add new subcommand `npm doctor` by watilde · Pull Request #14582 · npm/npm · GitHub もちょいでopenなissueが3000を超えるnpmのリポジトリだけど、自分なりにできることを積み重ねていってる。 issue reportの正規化 正規化されたissue reportを元に、trouble shootingの追加 trouble shootingを元に、自動診断コマンドの追加 次のステップとしてauto fixの追加を考えてる モ
JSX、TemplateLiteral とは一味違うテンプレートエンジン HyperScript - Cycle.js を学ぼう #2 | Recruit Tech Blog
JSX、TemplateLiteral とは一味違うテンプレートエンジン HyperScript - Cycle.js を学ぼう #2 wakamsha 前回のエントリ で Cycle.js の概要についてご紹介しました。今回は HyperScript という Cycle.js における DOM の描画の仕組みについてご紹介します。 hyperscript/index.js at master · hyperhype/hyperscript HyperScript - Cycle.js における DOM の描画を司る まずは前回のエントリにあるサンプルコードをおさらいしましょう。 type Sources = { DOM: DOMSource; } type Sinks = { DOM: Observable<VNode>; } /** * アプリケーション * @param source
Yes, React is taking over front-end development. The question is why.
By Samer Buna Update: This article is now part of my book “React.js Beyond The Basics”. Read the updated version of this content and more about React at jscomplete.com/react-beyond-basics. Here are a few reasons why React has become so popular so quickly: Working with the DOM API is hard. React basically gives developers the ability to work with a virtual browser that is more friendly than the rea
知ってるようで意外と知らない、JavaScriptの参照のしくみ
結論を言えば、JavaScriptにはポインターがなく、参照の方式は私たちが知っているほかの主要なプログラミング言語とは異なります。JavaScriptでは、ある変数が別の変数を参照すること（参照渡し）には対応していません。そしてオブジェクトや配列のような複合型のものだけが「参照渡し」を使います。 この記事では以下の用語を使用します。 スカラー（基本型）：1つの値もしくはデータ型（整数、論理値、文字列など） 複合型：複数の値から成るもの（配列、オブジェクトなど） プリミティブ：ほかの場所の値を参照しているだけのもの（参照型）と区別するため、実際に値を保有しているものをプリミティブとする JavaScriptのスカラーはプリミティブですが、Rubyなどほかの言語では参照型のスカラーになっています。JavaScriptではプリミティブなスカラーはイミュータブル（immutable）ですが、複合
JavaScript初心者に最適！パラパラ漫画アニメーションをプログラムで制御できる「Wick Editor」を使ってみた！ -
どうも、まさとらん（@0310lan）です。 今回は、誰でも気軽にブラウザ上で「パラパラ漫画」のようなアニメーションを作成できるWebエディタのご紹介です！ このエディタが面白いのは、JavaScriptで動きを制御できるところで、活用次第ではインタラクティブなWebコンテンツやゲームなども制作することが出来ますよ！ 【 Wick Editor 】 ■基本的な使い方！ それでは、実際に「Wick Editor」を使いながら、どのようなサービスなのかを見ていきましょう！ まずは、サイトにアクセスして「Launch Editor」ボタンをクリックします。 すると、すぐに専用のエディタが起動します！ 面倒な「ユーザー登録」などは一切不要です。 このページをブックマークしておけば、いつでも即座に作業を始められるのでオススメです。 最初に、このエディタの使い方を簡単にご紹介しておきます！ 画面上部に
It’s Time To Start Using CSS Custom Properties — Smashing Magazine
In this article, Serg Hospodarets will teach you more about CSS custom properties, including their syntax, their advantages, good usage examples and how to interact with them from JavaScript. You will learn how to detect whether they are supported, how they are different from CSS preprocessor variables, and how to start using native CSS variables until they are supported across browsers. This is t
ニューヨークで開催された AMP Conf 2017 に参加してきました - ぐるなびをちょっと良くするエンジニアブログ
みなさまいかがお過ごしでしょうか。フロントエンド開発グループの佐藤雅ｙです。 2017年3月7日と8日にニューヨークで開催された AMP のカンファレンス「AMP Conf 2017」に招待していただき、参加してきました。 今回は1日目のレポートになります。 AMPとは カンファレンスの内容に触れる前に、AMP をご存じない方のために、ちらりと AMP について触れておきます。 まず、AMP = Accelerated Mobile Pages の頭文字 です。 実装方法等はオフィシャルサイトが最新で基本となりますが、オフィシャルブログや、Google他サービスブログ等で、事前に仕様やマイルストーンが公開されることも多いです。 AMP の昨今 もともとの AMP の成り立ちは、モバイルニュースサイトの表示速度の遅さに業を煮やした有志たちが、モバイルサイトのパフォーマンスを改善させるために考
Bit Matrixを使って超高速にアグリゲーションする | PLAID engineer blog
プレイドの @nashibao です。 弊社は大量のログデータを収集し、人軸で解析するサービスを展開しています。収集したデータの利用方法には様々な目的と様々な手法がありますが、そのうちの大きな一つに、中・大規模のデータに対して、アドホックなクエリをインタラクティブにかけアグリゲーション結果を得る というものがあります。 このようなアグリゲーションの問題において、クエリの自由度 x データ規模 x レイテンシーを共存するのはなかなか難しい問題になります。(1) 元ネタは結構有名かと思いますが、Square が開発している、CrossfilterGitHub - crossfilter/crossfilter: Fast n-dimensional filtering and grouping of records.というものです。Crossfilterを内部に使ったビジュアライゼーションとし
Mastodonを支えるgems - Qiita
Mastodonのコードを読んでみることにしました。 知らないgemが一杯あったのでまずは調べてみることにしました。標準添付ライブラリ、Railsにデフォルトで含まれているものは除きます。また、group :developmentとか、group指定ありのは疲れたのでまた今度。 今回確認したGemfile 実際のコードに目を通しながら調べましたが、勘違いなどあればご指摘頂けるとうれしいです。 hamlit-rails hamlit-rails provides generators for Rails 4. Railsのジェネレータが生成するビューテンプレートをHaml化するhaml-railsのhamlit版のようです。Hamlという点では同じですがhaml gemへの依存をなくせますね。 pg Pg is the Ruby interface to the PostgreSQL RDB
webpack2はじめました - Qiita
仕事のプロジェクトでお世話になっているRailsが5.1からwebpackがサポートされるということで、そろそろモダンなフロントエンドにも力入れていきたい所存であるからして、手始めにwebpackとはなんぞやというところから始めようと思った次第です。 webpackとは webpack事始め v1とv2で全然違うのが罠 以上のことを自分なりにまとめてみました。 自分用の備忘録なので、分かりづらかったり、よく理解できてなかったりするかもしれませんが…コメントなどで指摘していただけるとありがたいです。 webpackとは webpackとはなんぞや。 早い話、Ruby大先生で言うところのBundlerみたいなもの……って例えるとわかりやすいでしょうか。 ちょっと違うような気もします。Node.jsのnpm先輩もいますし…。 モジュールバンドラー っていうのが正解らしいのですが、じゃあこの_モジ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SlackでのJavaScriptからTypeScriptへの移行
Phantom.jsのメンテナー、プロジェクトの将来に疑問を呈し、その座を降りる
