We’re a full-stack software development agency focusing on JavaScript, DevOps, Microservices & Kubernetes. For more info visit risingstack.com, or feel free to contact us!
We’re a full-stack software development agency focusing on JavaScript, DevOps, Microservices & Kubernetes. For more info visit risingstack.com, or feel free to contact us!
最近node-webkitアプリを書く時、何かしらのMV*やデータバインディングライブラリと言われるものを試しているのですが、floating-memo.appではRaynos/mercuryを使いました。 mercury は小さなモジュールを組み合わせたライブラリとも言えますが色々特徴的です。 完全にモジューラーな実装 Virtual DOM FRP ファイルサイズが小さめ モジューラーな実装とは何かというとmercuryのindex.jsを見ると面白い事が書かれています。 /* Pro tip: Don't require `mercury` itself. require and depend on all these modules directly! */ require("mercury") しないで、直接それぞれのモジュールを読み込んで使えるという事が書かれています。 (これ
VirtualDOM Advent Calendar 2014 - Qiitaの10日目です。 はじめに この記事は、これからVirtual DOMを始める人やVirtual DOMに興味があるけれど触ったことがない人のための記事です。まず、Virtual DOMとは何なのかについて述べて、なぜVirtual DOMが必要なのかについて考察してみます。そして、少しだけReactに触ってみましょう。 私はVirtual DOMについて詳しくありません。もしかすると間違ったことを記事に書いてしまうかもしれません。もし誤りに気付きましたら、指摘していただけれると助かります。また、コメントも励みになります。気軽にコメントしていただければと思います。 Virtual DOMとは? まずはどういうものなのか知りたいですよね?公式な定義ではありませんが、Virtual DOMとは__DOMを作るために必
HTML5の普及とともに、より表現豊かなWebアプリケーションを開発できるようになりました。その反面、Webアプリケーションの開発は、より複雑に、より大規模になってきています。こうした問題を解決するために、数多くのフレームワークが生まれてきました。 Backbone.jsやKnockout、最近であれば、Vue.jsやFacebook社が発表したReactなどが挙げられます。 本連載では、数多くあるフレームワークの中でも、今注目されているAngularJSについて幅広く紹介していきます。今回は、AngularJSに触れたことのない方に向けての入門編です。 AngularJSとは AngularJSはGoogle社製のフレームワークで、冒頭で挙げたフレームワークと違い、フルスタックであることが特徴の1つです。 データバインディングやルーティング、テンプレート機能をはじめとする、Webアプリケ
JavaScript Advent Calendar 2014 11日目。 いきなり要約: Promiseや非同期テストのアサーションを簡単確実に書けるようになるesplanというライブラリのPoCを作った話。 Promiseや非同期のテストは難しい 詳しくはJavaScript Promiseの本: Chapter.3 Promiseのテストをご覧いただきたいのだが、Promiseのテストを正確に書くのはそんなに簡単ではない。 例えばmochaだと、 // 間違ったテスト1: // mayBeResolveWithOne() が1以外でresolveしたときタイムアウトエラーになる it("mayBeResolveWithOne()は1でresolveする", function(done) { mayBeResolveWithOne().then(function(value) { as
In my previous post, I extolled the virtues of Flux, echoing many of the points given by the Facebook engineers in their excellent F8 talk on the topic. It amounted to a high-level overview of what you might expect to find in Flux-style application, but not much more than that. So, what does it actually mean to write an application in the Flux way? At that moment of inspiration, when faced with an
React.js is a fantastic library. Sometimes it seems like the best thing since sliced Python. React is only one part of a front-end application stack, however. It doesn’t have much to offer when it comes to managing data and state. Facebook, the makers of React, have offered some guidance there in the form of Flux. Flux is an “Application Architecture” (not a framework) built around one-way data fl
BrowserStack とは BrowserStack とは、クロスブラウザ(OS含む)による動作確認を手軽に行える環境を提供しているサービスです。 例えば、BrowserStack 側のサーバで起動している各種ブラウザ環境を、こちらのブラウザから利用したりすることができます。 その中に Automate という、コードからその環境を利用できる仕組みがあり、今回はそれを Node.js から使ってみたいと思います。 当記事のゴール Travis CI 上で、 express アプリケーションを起動し、 mocha で書いたテストコードを使い、 BrowserStack Automate 環境で、 テストが出来ること。 BrowserStack アカウントを作成する まずはアカウントの作成が必要になるので、トップページ から道なりに登録してください。 メールアドレスとパスワードだけで登録で
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
JSer.info #205 - Firefo 34.0がリリースされました。 Firefox開発者ツールにlocalStorageの編集機能、jQuery eventsに対応、console.table()のサポート、パフォーマンスツール等が入っていて、詳しくは以下の記事を参照して下さい。 WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34 ✩ Mozilla Hacks – the Web developer blog CSS Fonts Level 3の実験的サポート、template stringsなど色々なES6の機能が実装されています。 Firefox 34 for developers - Mozilla | MDN Java
React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we’ll guide you through
このエントリは GREE Advent Calendar 2014 6日目の記事です。 皆さんこんにちは!Reflowしてますか? 13卒でArt部の和智(@watilde)です。業務では、GREE Platformで使われている内製 JS/CSS FrameWorkのコミッターとかしてます。 まえがき 弊社は、スマートフォンの黎明期よりブラウザ向けのアプリを開発してきました。環境の変化への追従や、度重なる機能追加でJavaScriptのコードの規模は肥大化していきました。 役割ごとにモジュール化をしてファイル分割を行わないと可読性が落ち、じわじわと保守コストが上がっていきます。しかし、古くからある秘伝のソースはAMDやCommonJSで書かれていないVanillaなJSです。r.js、Browserify、Webpack などのツールでモジュール化するにも、書き換えが大量に発生して導入す
AngularJS is a JavaScript framework that allows developers to create dynamic web applications. It uses HTML as the template language and extends HTML attributes with directives. AngularJS applications are composed of modules, controllers, services and filters that allow creating single page applications with two-way data binding between models and views.
フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。 ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。 5 日目はじめての CSS 設計 - Qiita(@moschann) 7 日目CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter) 良
スマホ向けQRコードリーダー http://tsuyobi.heteml.net/html/tools/qr_code_reader/ アプリの開発中などに借りてきた端末に URL を送りたい時に短縮URLで送るのも面倒くさいので Web 上でQRコードを読めるページを作成しました。借りた端末だとQRコードリーダーをインストールしたり出来ないので必要に迫られて制作。 使い方 サイトにアクセスして、「ファイルアップロードのボタンを押す→QRコードをカメラで撮影」以上。 あまり、解析の精度は高く無いのでなるべくQRコードだけが映るように撮影して下さい。 iPhone で撮影する時の Tips 最近の iPhone だとマクロ撮影がイマイチ上手く出来ないので撮影するものから離してピントを合わせる必要が有ります。しかし、その状態だとQRコードを上手く解析出来ないのでQRコードを大きく撮影する必要が
Backbone.js Advent Calendar 2014 2日目の記事です。 Backbone.Routerではハッシュフラグメント(#hogehoge)によってページ内容の出し分けをしてます。 時によっては前回のハッシュの状態によって、表示内容の制御をしたいときがあります。 例えば、TOPページから下層ページに移動したときはページ遷移のアニメーションを出すけど、 下層ページ間の移動ではアニメーションなしといったときです。 こういう時に使うと便利なのが”有限状態遷移機械“というモデルです。(Finite State Machine[FSM]ともいいます) ある状態から別のある状態に遷移したときに、ある処理が発生しますよというモデルです。 さっきの話を例にとると、TOPページの状態を”#top”、下層ページAの状態を”#pageA”、 下層ページBの状態を”pageB”としたとき、下
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く