Creating Components, render method, mounting a component

this.props, this.state, getInitialState method.

Introduction to React.js

React Lifecycle Methods, Creating a Clock-Tick

componentWillReceiveProps(object nextProps)

boolean shouldComponentUpdate(object nextProps, object nextState)

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

React.unmountComponentAtNode(document.body)

React Lifecycle methods - In Depth

Embedding a React component into another using JSX

Using multiple Components

Create dynamic React Components

className to specify css class for html elements in React.js

Creating a bootstrap modal in React.js

Animation in React.js

Create a Review App with Bootstrap Modal and React

Changes to getInitialState/props, etc, to this.state, props, etc

Get started with ES6

Keep up with React.js

Getting started with Ember.js is tough in these early days of Ember.js. This video helps you get started.

Getting started with Ember.js

Building validation of forms in an Ember.js application.

ember-payment (use branch “validations” )

Validations in Ember.js application

Building a CRUD application in Ember.js .

CRUD application in Ember.js

Learn Ember.js

In JavaScript “function declaration” behaves differently from “function expression”.

http://jsbin.com/hamige/6/edit?html,js,console,output

http://jsbin.com/hamige/7/edit?html,js,console,output

Hoisting is not a real thing

http://jsbin.com/mahalaqupu/3/edit?html,js,console,output

http://jsbin.com/teqamulaxi/1/edit?html,js,console,output

http://jsbin.com/litisiqezo/1/edit?html,js,console,output

Scope of a variable in JavaScript

Lexical scoping in JavaScript

Cheating Lexical scoping in JavaScript

http://jsbin.com/silorahisa/3/edit?html,js,console,output

http://jsbin.com/hemezipive/1/edit?html,js,console,output

Immediately-Invoked Function Expression (IIFE)

Immediately invoked function expression

http://jsbin.com/dutuxirazi/1/edit?html,js,console,output

http://jsbin.com/munofehuhe/1/edit?html,js,console,output

http://jsbin.com/munofehuhe/2/edit?html,js,console,output

http://jsbin.com/munofehuhe/3/edit?html,js,console,output

Understanding this in JavaScript

http://jsbin.com/xatayiyoku/1/edit?html,js,console,output

http://jsbin.com/lizewukini/2/edit?html,js,console,output

http://jsbin.com/lizewukini/3/edit?html,js,console,output

http://jsbin.com/lizewukini/4/edit?html,js,console,output

Understanding (this) part II

http://jsbin.com/nixidejote/1/edit?html,js,console,output

http://jsbin.com/nuxedosoge/1/edit?html,js,console,output

http://jsbin.com/zarocecese/1/edit?html,js,console,output

Understanding (this) part III

http://jsbin.com/saleyobiku/2/edit?html,js,console,output

http://jsbin.com/saleyobiku/3/edit?html,js,console,output

http://jsbin.com/saleyobiku/4/edit?html,js,console,output

http://jsbin.com/saleyobiku/5/edit?html,js,console,output

Understanding (this) part IV

http://jsbin.com/deyeniveto/1/edit?html,js,console,output

How closure works in JavaScript Part I

http://jsbin.com/soyefomuxe/1/edit?html,js,console,output

http://jsbin.com/soyefomuxe/2/edit?html,js,console,output

http://jsbin.com/soyefomuxe/3/edit?html,js,console,output

How closure works in JavaScript Part II

http://jsbin.com/ziqevoqedi/1/edit?html,js,console,output

Module pattern in JavaScript

Refactor code using module pattern

A review of tools to test ES6

Learn JavaScript

jQuery introduction

jQuery domready

jQuery selectors

http://jsfiddle.net/neerajdotname/sqDRd/19

http://jsfiddle.net/neerajdotname/sqDRd/20

http://jsfiddle.net/neerajdotname/sqDRd/21

http://jsfiddle.net/neerajdotname/sqDRd/18

http://jsfiddle.net/neerajdotname/sqDRd/22

http://jsfiddle.net/neerajdotname/sqDRd/23

http://jsfiddle.net/neerajdotname/sqDRd/24

http://jsfiddle.net/neerajdotname/sqDRd/25

http://jsfiddle.net/neerajdotname/sqDRd/26

http://jsfiddle.net/neerajdotname/sqDRd/27

http://jsfiddle.net/neerajdotname/sqDRd/28

http://jsfiddle.net/neerajdotname/sqDRd/29

http://jsfiddle.net/neerajdotname/sqDRd/30

http://jsfiddle.net/neerajdotname/sqDRd/31

DOM manipulation using jQuery

http://jsfiddle.net/neerajdotname/nf4GG/1

http://jsfiddle.net/neerajdotname/nf4GG/2

http://jsfiddle.net/neerajdotname/nf4GG/3

http://jsfiddle.net/neerajdotname/nf4GG/5

http://jsfiddle.net/neerajdotname/nf4GG/6

http://jsfiddle.net/neerajdotname/nf4GG/7

http://jsfiddle.net/neerajdotname/nf4GG/8

http://jsfiddle.net/neerajdotname/nf4GG/9

http://jsfiddle.net/neerajdotname/nf4GG/10

http://jsfiddle.net/neerajdotname/nf4GG/11

http://jsfiddle.net/neerajdotname/nf4GG/12

http://jsfiddle.net/neerajdotname/nf4GG/13

jQuery events

http://jsfiddle.net/neerajdotname/FcHyp/7

http://jsfiddle.net/neerajdotname/FcHyp/12

http://jsfiddle.net/neerajdotname/FcHyp/13

http://jsfiddle.net/neerajdotname/FcHyp/14

http://jsfiddle.net/neerajdotname/FcHyp/15

http://jsfiddle.net/neerajdotname/FcHyp/16

Enhancing forms with jQuery

http://jsfiddle.net/neerajdotname/hENsw/8

http://jsfiddle.net/neerajdotname/hENsw/5

http://jsfiddle.net/neerajdotname/hENsw/6

http://jsfiddle.net/neerajdotname/hENsw/7

jQuery live

http://jsfiddle.net/neerajdotname/hENsw/14

http://jsfiddle.net/neerajdotname/hENsw/15

http://jsfiddle.net/neerajdotname/hENsw/16

jQuery delegate

Practical usage of Deferred with caching example

http://jsfiddle.net/neerajdotname/k2Q9b/4

http://jsfiddle.net/neerajdotname/k2Q9b/7

http://jsfiddle.net/neerajdotname/k2Q9b/8

http://jsfiddle.net/neerajdotname/k2Q9b/9

http://jsfiddle.net/neerajdotname/k2Q9b/10

http://jsfiddle.net/neerajdotname/k2Q9b/11

http://jsfiddle.net/neerajdotname/k2Q9b/13

http://jsfiddle.net/neerajdotname/k2Q9b/19

http://jsfiddle.net/neerajdotname/k2Q9b/16

http://jsfiddle.net/neerajdotname/k2Q9b/18

jQuery deferred

Avoid domready when possible

Learn jQuery

A short walkthrough of how to add watermark to Screenflow videos.

Watermarking videos

Recording videos on mac

How we make videos for our clients

Learn making videos using screenflow

Minimal React.js setup

Submit and input field

Handle onChange

Add to collection

DisplayList Component

Delete TODO

Mark as done

DisplayItem component

Display count

Switch to TODO model part - 1

Switch to TODO model part - 2

Make marking done really work

Clear completed

ID for item

Use PropTypes

Use New CSS

Edit todo part - 1

Edit todo part - 2

Learn React.js in steps

How autoloading works in Rails

How Arel works

How Rails boots

How callbacks work in Rails

Discusses how to use pjax technique in a Ruby on Rails application.

Current state of pjax support in browsers

Pjax on Rails

In all our applications we have a directory called app/services. In this directory we put all kinds of services. Now what’s a service.

A service is anything that a model should not be concerned about. Like How to send SMS, how to deliver email, making call to external service, parsing CSV file. It all depends on the application what should be in the model and what should be in the services.

The additional job of services is to keep model thin and manageable by extracting certain business rule into a service in itself.

7 Patterns to refactor fat Active Record models

Using services to manage code

Use uuid and tagged logging to debug Rails application.

#config/intializers/tagged_logging.rb 
 Wheel::Application.config.log_tags = [ :subdomain, :uuid ] 


 #app/controllers/application_controller.rb 
 before_action :set_honeybadger_context 

 def set_honeybadger_context 
   hash = { uuid: request.uuid } 

   if current_user 
       hash.merge!({ user_id: current_user.id, user_email: current_user.email }) 
   end 

     Honeybadger.context hash 
 end

Use uuid, X-Request-Id and tagged logging

Rails development using vagrant

Using ES6 in Rails application

Ruby on Rails

Discussed basics of table view and how a view is connected to a controller.

git clone https://github.com/bigbinary/lrm.git 
 cd episode-1 
 bundle exec rake

Ep. 1 - Table basics

How ios table caches cells so that a new cell is not created for every single record.

git clone https://github.com/bigbinary/lrm.git 
 cd episode-2 
 bundle exec rake

Ep. 2 - Caching of table cells

    git clone https://github.com/bigbinary/lrm.git 
    cd episode-3 
 PART=1 rak 

 rmq.log :tree 

 rmq(157498448).style{ |s| s.frame = {l: 100, t: 80, w: 100, h: 30} } 
    rmq(157498448).style{|s| s.background_color = rmq.color.white} 
    rmq(157498448).move({t: 50}) 
    rmq(157498448).move({t: 250})

Ep. 3 - Building login screen using RMQ part I

Second part of the two parts episode of how to build login screen using RMQ.

git clone https://github.com/bigbinary/lrm.git 
 cd episode-3 
 PART=2 rake

Ep. 4 - Building login screen using RMQ part II

Discusses how to handle user interaction in a form.

git clone https://github.com/bigbinary/lrm.git 
 cd episode-3 
 PART=4 rake

Ep. 5 - Making form interact with user

The app makes real authentication call to authentication server developed using Ruby on Rails and hosted on heroku.

git clone https://github.com/bigbinary/lrm.git 
 cd episode-3 
 PART=5 rake

Ep. 6 - Authentication with server

git clone https://github.com/bigbinary/lrm.git 
 cd episode-3 
 PART=6 rake

Ep. 7 - Help and view for reset password

Added real call to a server to handle “Reset Password Request”.

git clone https://github.com/bigbinary/lrm.git 
 cd episode-3 
 bundle exec rake

Ep. 8 - Reset Password by invoking API

Ep. 9 - Send email from help screen

Show spinner when a call to external API is made. Hide the spinner when response is received.

git clone https://github.com/bigbinary/lrm.git 
 cd episode-10 
 bundle exec rake

San Jose, USA

Pune, India

#6 - Creating a bootstrap modal in React.js

Episode Notes