Tuesday, 31 May 2016

Creating a basic search in React

1) Setup the basic structure of your application as mentioned in the earlier tutorial.

2) In your app.js lets first setup a master list against which we will perform the search.


We are using constructor for setting up the initial state. In the above example we are setting up two initial states. 'color' state consist of all the initial master data and 'searchedResult' consist of the items which match the search text.

There is a difference in how you initialize states in es6 and es5. Read about more here

For reading more about the es6 syntax in react, go through this link

3) Lets add a textbox, and add an onChange event to it. We are also adding a function to update the list as per search result.

You will observe we have used bind to attach the update event. This is because when we call a function in without binding  this will not be a class itself, it’s undefined.

Read more about it here -> http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html

4) Lets add one more component so as to update the master list.

Monday, 30 May 2016

Getting started with react

Setting up your first react application

1) Go to console and create your project folder
mkdir react-app
2) Got to react-app folder and type
npn init.
This step will ask for few information just keep on pressing enter and make edits if you want.

3) Now install the react libraries using npm.
npm install react-dom --save
This will install the two important react libraries which are required to run the application, -- save option add this dependencies to package.json

4) Now install the rest of libraries required.
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react
This will install the babel transpiler which is needed to compile the ECMAScript 6 to ECMAScript 5 which is supported by most of the browsers.

Read more about it here-
https://www.quora.com/What-exactly-is-BabelJs-Why-does-it-understand-JSX-React-components

5) Now install the webpack server which will help in serving the application in development.
sudo npm install webpack webpack-dev-server -g
Read more about it here - https://www.quora.com/What-is-webpack

6) Create the basic files needed to run a basic hello world program
touch index.html App.js main.js webpack.config.js
7) Add this to your webpack.config.js

Read more about server configuration here-
https://github.com/webpack/docs/wiki/configuration

9) Now lets update the Add this to your index.html
10) Now lets update our main.js file with the following content.
11) Now lets add our first component. Add this to your app.js
12) Update your package.json file to add the script for starting the webpack server


13) Go to console and type
npm start
This will start the server in port 8085. 

Monday, 9 February 2015

Some useful gems I came across recently..

Not  been blogging much these days, since I was busy bundling up the gems I found useful :P
So here are the few I came across and found useful!!

Party Foul
https://github.com/dockyard/party_foul

If you are bored of opening issues every now and then for exceptions you got while working on the s application you got, here is the solution. Keeps track of any exception thrown on production(or any environment you configured).
Don't worry it do not open multiple issue for same exception. Intelligent enough yeah ?

Creek
https://github.com/pythonicrubyist/creek

What an awesome gem to import an excel sheet. I know there are quite a few in the market but try this for its awesome performance and speed. :)

Capistriano Haller
https://github.com/smashingboxes/capistrano-haller

Hall is being used by almost everyone now, this gem takes care of providing the notification to your hall group whenever your application is deployed !!! Good when the deployment is failed one though :D :P

Thursday, 21 August 2014

Make most of your yaml files

When I first started with Ruby on Rails, the only purpose of yml files for me was using it database.yml files.

However when I started to work more on rails, I found that yml files can be more than just a database configuration file.

I started to use it more and more..like..

  • Using it for translations, yeah I know people have been using this for while, setting up the locale and picking up the right one based on the language you selected. 
  • Use it for storing some data, like you want to store list of all the countries(the easiest example I can think of right now), do it a yaml files. Why to store it in a database and fire an extra query?
  • Try creating a form based on yaml, yes one of my friend did it and it was amazing.
  • Storing some temp reports? Try saving rails best practices result for an instance? 
These are the just fews I can think of right now, I know there are many. 
You know of some, please feel free to share !!

Wednesday, 25 September 2013

raw, html_safe,content_tag

raw and html_safe method

They both are used to unescape the html from any string.
    For Example:-
       In your helper method-
         def raw_example()
     raw  "<b>Hello</b>"
         end
     
       In your view
         <%= raw_example %>

      Output:-
         Hello

similarly for html_safe
         def html_safe_example()
     "<b>Hello</b>".html_safe
         end
     
       In your view
         <%= html_safe_example%>

Making it safe from attacks

Suppose you are taking any content from the user then using it with the html_safe to unescape the html like this.
         def html_safe_example(name)
     "<b>Hello #{name}</b>".html_safe
          end

 Lets assume that the content here is "world" everything is good and will work fine. However you have    made your site vulnerable to attacks.What if the user sends any html content instead of his name , suppose "<script>alert("attack")</script>.
To avoid this, instead of writing the whole html content in one line and do it step by step and dont make the name variable as html_safe like this:-

         def html_safe_example(name)
     html = "".html_safe
             html << "<b>Hello".html_safe
             html << name
             html <<"</b>".html_safe
         end

Make sure while concatenating that all the content are html_safe or they all are strings.Else it will give unexpected result.

Content_tag

content_tag returns the html tag of the name provided in the content_tag syntax.
For example:-
-> content_tag(:p, "hi") will return <p>hi</p>
-> content_tag(:div, content_tag(:p, "Hello world!"), :class => "strong")


Monday, 16 September 2013

Metaprogramming with ruby


1) eval , #{} and their difference.

eval  is used to evaluate the string as expression.
#{} is used to delimit the expressions in a double-quoted string.

At first they both look same however there is a difference between both. Let me explain this with the help of an example.
Suppose we have a variable
exp = "2*4"
Now the output of eval(exp) will be 8
Where as output of  "#{exp}"  will be 2*4

2) instance_eval, module_eval and class_eval

instance_eval can be used to access the instance variable of an object.

For example:-
class Test
  def initialize
  @variable = "hello"
  end
end

obj = Test.new
obj.instance_eval do 
 puts @variable # Output-> hello
end
instance_eval can also be used for creating class methods

For example:-
class Test
end

Test.instance_eval do 
 def hello
   puts "hello world"
 end
end

Test.hello # output => hello world
Like instance_eval, module_eval and class_eval are used to access class variable from outside a class.
Both module_eval and class_eval operates on modules and class rather than their objects.

For Example:-
class Test
 @@variable = "hello"
end

 puts Test.class_eval(@@variable) # Output-> hello
module_eval and class_eval are also used to create new instance methods.
For Example:-
class Test
end

Test.class_eval do 
 def hello
   puts "hello world"
 end
end
obj = Test.new
obj.hello # output => hello world

3) instance_variable_get and instance_variable_set
instance_variable_get, as the name suggests, is used to retrieve the value of any instance variable.
It takes the the variable name as symbol argument

For example:-
class Test
  def initialize
  @variable = "hello"
  end
end

obj = Test.new
obj.instance_variable_get(:@variable) # Output => hello
instance_variable_set, as the name suggests, is used to set the value of any instance variable.
It takes a symbol argument as variable name and second argument which is the variable value

For example:-
class Test
  def initialize
  @variable = "hello"
  end
end

obj = Test.new
obj.instance_variable_set(:@variable,"hello world")
4) send method

send method is used to call a method of the same name as specified as the first argument(which is in symbol format)

For Example:-
@variable = "test"
puts( @variable.send(:reverse)) # this will call the reverse method for that string
You can also pass the any number of arguments after specifying the first argument which is the method name.

For Example:-
class Test
  def sum (a,b)
  return a+b
  end
end

obj = Test.new
obj.send(:sum, 4 , 5) # Output =>9
5) define_method 

This method can be used to define new methods during run time.
For Example:-
 class A
   define_method("test") do ||
     puts "hello"
   end
 end
b= A.new
b.test #output => hello
Another Example:-
Here we are also passing some arguments to the newly created method
 class Array
   define_method(:aNewMethod, lambda{ |*args| puts( args.inspect) } end
[].aNewMethod([1,2,3]) #Ouput [1,2,3]
6) remove_method

You can also remove the existing methods or method you created by using the remove_method.

For Example:-
puts("hello".reverse)
class String
remove_method(:reverse)
end
puts("hello".reverse) # Output => undefined method error!
Note: - If a method with the same name is defined for an ancestor of that class, the ancestor class method is not removed

7) method_missing


There might be the times when you may try to execute a method which is not defined, this will throw an error and cause the program to exit. To handle this situation you can write your own method called method_missing with an argument to which the missing method name is assigned.
class Test
  def method_missing (method_name)
    puts("#{method_name} do not exist")
  end
end

obj = Test.new
obj.new_method # Output = > new_method do not exist

8) Frozen Object
 
Ruby provides you a facility to freeze an object so that it cant be modified further. The object once frozen cannot be modified, if tried to do so it will raise a TypeError exception.
variable = "Hello" 
variable << "world" 
variable.freeze 
variable << " !!!" # Error: "can't modify frozen string (TypeError)"
Please note once an object is frozen it cant be be undone.

Friday, 30 August 2013

Git branching and merging

1) git branch
This will list all the branches of your repository in your local.

2) git branch branchname
To create a new branch of your current working repository. Type following code:-

Eg:- git branch newbranch

This will create a new branch in your local..

3) git checkout
This command will switch you to the branch name you entered.

Eg:-git checkout newbranch

4) git checkout -b branchname
This will create a new branch and will switch you to the same.

5) git push origin branchname
Push the branch from local to the github repository.

6) git merge name-of-the-branch-to-be-merged
To merge two branches first checkout the branch to which you want to merge.

Suppose you want to merge the changes from branch A to branch B then do the following:
git checkout B
git merge A

7) git stash
Sometimes you want to switch to some other branch without committing and pushing the changes of the current branch. However you still want to save the changes you have done in that branch. This can be done with the help of stashing.

Suppose you are in branch A and you want to save its changes before switching to branch B.
git stash
This will save the status of the current working directory.

Now you can switch to other branch suppose B
git checkout B
Do the changes, commit it and push it.

Now switch back to branch A
git checkout A
git stash apply //to apply the status u saved before.
git stash apply --index //to reapply the staged changes