# ih8sum3r

While working on my application I faced an obstacle i.e how to add an autocomplete functionality feature in input field in Rails4. As I wrote in my previous post, I learned how to add drop-down on list of objects / items. Now, what if that list is too big, I don’t want to scroll till the end in order to find my result. I want that there will be combo-box and in that combo-box I have search field in it where I can search and find my result. There are so many gem while solve this purpose but the gem that I liked the most and which suites best for my application is chosen.

How to implement chosen-rails in Rails 4 application

gem 'chosen-rails', '~> 1.4', '>= 1.4.3'
• After adding gem run bundle update or bundle command

//= require chosen-jquery

*= require chosen
• Now create a separate .js file and then include that file in assets pipeline or simple add following code in application.js file
$(document).on('page:change', function(){ return$('.chosen-select').chosen({
allow_single_deselect: true,
width: '100%'
});
});
• And finally add select field in your scaffold _form.html.erb which looks somewhat like as
<%= f.label :user_id %> <%= f.select(:user_id, User.all.map { |p| [p.name, p.id] }, {:prompt => “Select the user name”}, {class: “chosen-select”} ) %>

That’s it now you have search field with autocomplete feature.

Sometimes after performing scaffold or before scaffold in rails it’s become cumbersome that how to add drop-down in my scaffold. In this post we’ll learn how to do it within few steps.

Assume you have one model named “User” and another as scaffold named “Blog”. In model you have some predefined data with you.

Put some pre-define data in Seeds.rb file (for users)

User.create([
{name: "John"},
{name: "Kapil"}
])

Generate model first

rails generate model User name:string

Now Generate scaffold

rails generate scaffold Blog title:string content:text user:references

Here “user:references” act as a foreign_key which resides in your migration file looks something like this

" t.references :user, index: true, foreign_key: true "

Besides that you can see one more change in models/user.rb file which looks something like this

 class Blog < ActiveRecord::Base
belongs_to :user
end


Now perform migration for both scaffold as well as for seed file like this

rake db:migrate
rake db:seed

As have used the scaffolding to generate our views so the example code for blog resides in _form.html.erb file of blog folder.

The code used to create the drop down list is:

<%= f.collection_select(:user_id, User.all, :id, :name, {:prompt => 'Select the user'}, :selected => @blog.user_id ) %>

• :user_id is the foreign key that resides in the Blog table
• User.all specifies which records to include in the drop down list
• :id is the primary key in the User table
• :name is the field from the Users table to display in the drop down list

That’s it. Now you are ready to use drop-down in your application.

This year brought a good fortune for me as I got selected in Google Summer of Code 2015. I have been designated to work on a web application, Online Geometry Viewer on the front-end part. OGV is where users can upload, view and share 3D models and even can like (love) or comment on them.  It can be looked at as a social blogging platform for 3D models. Now, It has been 6 six weeks the coding period has started. Meteor had been chosen a framework for this purpose. I have worked according to my milestones listed below :

• Landing Page
• Feedback form
• Error Messages
• g to obj Conversion Failed Message
• Design a 404 Page
• Zoom Limit
• Switch to Different View
• Responsiveness
• Setting Camera Perspective
• Loader Indicator ( Pending as there is some problem in it)

The details of each milestone have been discussed below.

Landing Page:
In the first week of the coding period I started up with the landing page. Landing page, sometimes known as a “lead capture page” or a “lander”, is the most necessary page in any kind of online marketing. It conveys the information about what the OGV is. It has been well designed, dictating all the information to the user. It is comprised of the four slides. The most important thing is that all the pages are user friendly and simplicity is at its best accommodating all the necessary information.

The header of the landing page incorporates the links to upload, settings, or to view models and is fully responsive.

The 1st slide concludes what the OGV is and contains the Sign-Up/Login button. When the user logs in, the Sign-Up button changes to View Models button and will take the user to Models Page. Various CSS effects have been used to give awesome looks.

The second slide holds the information about the best features the OGV. The page has been designed beautifully with the interactive icons representing the functions of OGV. Earlier the freely licensed icons were chosen. But now all the icons are designed and are handmade. This designing of icons has been done in Inkscape and GIMP.

The third slides informs the user that Online Geometry Viewer is a freely licensed software. It is simply a text, formatted beautifully.

And the last slide has a feedback form to get the response/feedback of the user. It holds the email-id field, that is email validated, the reason field which is a drop-down  allowing the user to choose the subject on which he wants to give the feedback. The last text area gets the message of the user. All the fields are the required fields. After filling all the fields the user will be allowed to send the message. After sending the message the admin will receive a confirmation message and will be able to view the response. As it is to be made production ready and if faults occurs, this feedback from the user can help us to make OGV perfect. formspree.io package has been used. This is chosen as it doesn’t require any back-end coding for the submission of the form. It is easy to use and lightwight package. It allows maximum limit of 1000 users to send the feedback per month.

Footer have the content similar  to that of BRL-CAD’s website.

Earlier the BRL-CAD website page was compact and had 2px padding from both left and right. When the screen was minimized whole of the matter abruptly shifted to center. Now the different views have been set for mobiles, LCDs. Also the images used have been compressed in such a manner that they do not suffer any loss in quality. Also, the colors used corresponds to the BRL-CAD website colors.

Feedback Form :
The feedback form takes the response from the user. This response may help us to improve our product in many ways. Feedback form is embedded in the landing page only.

Error Message :
Error messages/Notification make the users realize that what actually is going in the application. At various places no error message or notification was shown to the user. At the following places, there existed some problems. This has been done by using the package sAlert which has different ways of representing the different messages like error message, success messages and error messages.

Problems

• Whenever the forms were submitted, the notification with no message popped up. If the submit button is pressed again, again there will be notification below the first notification. This even disrupted the alignment of the page, shifting all the things downwards.
• Notification were also not auto-hidden. User has to cross them to close the notifications.
• There was a problem in Throwing Error as Error.reason doesn’t gave the reason for throwing the error.
• At some place there were no calls to methods for throwing errors.

Improvements
To overcome all the mentioned problems sAlert package has been used. sAlert can be configured on the client. t is called sAlert.collection. Every sAlert method returns the ID of the alert it has just created. The defaults are below:
 sAlert.config({ effect: '', position: 'top-right', timeout: 5000, html: false, onRouteClose: true, stack: true, offset: 0 }); 

It is very handy package and does not requiring any hard-coding for adding the auto-hiding, timeout, colors for success, warning or error notifications.

g to obj conversion failed message :
To view the model one needs to upload the .g file. This file is converted into .obj. It is required to confirm if the file has been correctly converted or not. If it is, success message is shown and if not error message is shown. Earlier all the things were shown in the console, none was viewed by the user and if even the conversion failed it would shift to the next page. This has been too improved by confirming if the the file has been converted or not as below.

Design a 404 page :
Perhaps having a good Error 404 page is as important as having great content. Sometimes by fault visitors land on error pages, but being able to communicate and direct them back to the home page is as good as a second chance to re-engage a visitor. So, designing that page is also must. This page is designed using CSS effects and animation. The page contains link a with the message to direct the user to the home page.

Setting Camera Position :
Earlier when the user viewed the model the camera perspective was not set properly. The model seemed to be too large or too small such that it can’t be viewed perfectly and the user had to either zoom in/out a little to view the model correctly. Three.js have been used to set the camera position. The focus of the camera is now limited to such a value that one can properly view the model without having the need to zoom in/out.

Zoom Limit :
Previously, OGV zoomed in/out the model from zero to infinity. No limits were set. It zoomed to infinity or zero limit. Now the limits have been set. Three.js use the Orbit controls for zooming, panning etc. Using them the limits have been set. Zoom in is set to 20, Zoom out is set to 10000.

Switching to different views :
It is the requirement of every user to see the models from different angles. Switching from the top, bottom, front, rear views have enabled using Three.js. The key input events have been used to do so. Pressing the keys F, T, B, R will show the front, top, bottom, rear views respectively. To make it user  friendly, CSS has been used with the hover effects to convey how to switch to different views.

Responsiveness :
All the pages are fully responsive. In addition, bootstrap has been used to make it responsive.

Loader Indicator (Due to backend problem. Pending…)
This is still in progress. As per the discussions there some glitch in the cfs package. If it is not overcomed some other good alternative will be taken in action.

Future Plans :

• Loader Indicator: If no solution to cfs package is found, some good alternative will be chosen to implement it.
• Setting default model image: Till now user have to upload some image for the model. Default image would be set such that if user does not upload any, default would be used.
• Extending Validation Compatibility: Feedback form validations are compatible with mozilla, chrome,  IE. They will be extended to support other browers such as safari, opera.
• UI / UX for back-end work.
# Add the remote, call it "upstream":

# Fetch all the branches of that remote into remote-tracking branches, such as upstream/master:

git fetch upstream

# Make sure that you're on your master branch:

git checkout master

# Rewrite your master branch so that any commits of yours that aren't already in upstream/master are replayed on top of that other branch:

git rebase upstream/master

# Lastly push it to master

git push -f origin master

What if I say that you looks like a mouse? Surely whosoever standing before me gonna shout on me or maybe punch me hard. But we (humans) are 75% similar to mouse. Now that’s Strange!. But you don’t need to look like a mouse for proving that 75% similarity. There are various other things in our body where we can see that similarity for example : genes.

Genie of Life

Have you ever wonder what special thing present in all top class athletes which makes them most popular among all of us. Do they born with special powers? Scientist have found out that these athletes have something common in them. What special thing they have? So that special thing which they have and also present in all of us is “Gene”.

Gene

Gene is like a blueprint of our body. It is the basic physical and functional unit of heredity which we get half from father and half from mother. Genes, which are made up of DNA, act as instructions to make molecules called proteins. The Human Genome Project has estimated that humans have between 20,000 and 25,000 genes. These Genes present in cells.

Genes in cell

Every human being has cell in it and it is estimated that single human being may contain 75 to 100 trillion cells in it. Inside cell the is nucleus within each nucleus we have “X” shaped structured called chromosome. There are 46 chromosomes 23 from father and 23 from mother. And within that chromosomes we have bundled called Gene or DNA.

DNA

DNA stands for deoxyribonucleic acid. Most DNA is located in the cell nucleus (where it is called nuclear DNA), but a small amount of DNA can also be found in the mitochondria. The information in DNA is stored as a code made up of four chemical bases: adenine (A), guanine (G), cytosine (C), and thymine (T). DNA bases pair up with each other, A with T and C with G, to form units called base pairs. In real-time there are about 4-5 million bases in single DNA sequence. Human DNA consists of about 3 billion bases, and more than 99 percent of those bases are the same in all people. DNA is just the basic structure it dose not tell us what to do. Like I want to shake my hand, want to jump etc. are not tell by DNA. Actual functions are performed by something we called Protein. Building block of proteins are called Amino Acids. So which amino acid will be formed with which base can seen Codon table.

I wrote above that “more than 99 percent of those bases are the same in all people” what does that mean?

When the cell is getting manufactured then the DNA get copied. During that replication a minor change in DNA will change whole structure of body. Lets take an example we know there are 4 bases in DNA: A, T, C, G and A paired with T and C with G. With these bases combination amino acid produce eg: ATG pair will produce “Methionine acid”. Take A, T and G bases for our example. Now suppose cell start replicating during first copy combination is ATG which is “Methionine acid”. During second copy it’s same ATG i.e “Methionine acid” but during third replication the middle T changed into G so it become AGG which is “Arginine acid”. With single change in base will change whole amino acid. So we are 99 % similar but that one sequence replacement can me us small or tall, guy with brown hair or black hair. This we called it as SNP’s (single nucleotide polymorphism)

Redshift adjusts the color temperature of your screen according to your surroundings. This may help your eyes hurt less if you are working in front of the screen at night. This program is inspired by f.lux.

Installation :

$sudo apt-get install redshift gtk-redshift Open launcher (window button) type redshift and see magic. To quit it look into icon tray (bulb icon) click on it and quit. Another way to launch it • Press Alt + F2 and type "redshift" in prompt. • To close it or to toggle it, open terminal and type $ sudo killall redshift

It’s been two and half week that I keep on struggling for implementing zoom effect in my book. I tried alot but sometimes images start fluctuating, sometimes user unable to move zoom pages, sometimes slider not shown properly and so on errors.  So I decided to learn little more javascript and then dive into master code. After two days of learning JS I come back to my work and start implementing code in it. After spending six hours on code I’m able to complete almost everything regarding flipBook. Now one can zoom it, turn pages and goto particular chapter with single click. Now it’s seems easy to work in turn.js as I learned so many things while doing this task. Few things like :

1. First and last page as hard page like in real book.
To give hard page effect in book one need to use 4 or 5 lines of code if he’s using turn.js
for eg:

 <div class="hard"></div>
<div class="hard"></div>
<div class="hard p393"></div>
<div class="hard p394"></div>

This will give hard effect to front, front-back page and last-inside, last-outside page.

2. To implement zoom effect I created <div> and use functions of in-build zoom.min.js
$('.magazine-viewport').zoom({ flipbook:$('.magazine'),
max: function() {
return largeMagazineWidth()/$('.magazine').width(); }, when: { swipeLeft: function() {$(this).zoom('flipbook').turn('next');
},
swipeRight: function() {
$(this).zoom('flipbook').turn('previous'); }, resize: function(event, scale, page, pageElement) { if (scale==1) loadSmallPage(page, pageElement); else loadLargePage(page, pageElement); }, zoomIn: function () {$('.thumbnails').hide();
$('.made').hide()$('.magazine').removeClass('animated').addClass('zoom-in');
$('.zoom-icon').removeClass('zoom-icon-in').addClass('zoom-icon-out'); if (!window.escTip && !$.isTouch) {
escTip = true;
$('<div />', {'class': 'exit-message'}). html('<div>Press ESC to exit</div>'). appendTo($('body')).
delay(2000).
animate({opacity:0}, 500, function() {
$(this).remove(); }); } }, 3. To implement index at the top is created <div> magazine. To update index when clicked on it i.e if I click on chapter 3 then number three should displayed on right side of book and when I clicked on chapter 4 then number 4 get highlighted and number 3 should moved to left side of page for that is used updatetab function function updateTabs() { var tabs = {11:'1-', 19:'2-', 26:'3-', 42:'4-', 67:'5-', 79:'6-', 95:'7-', 113:'8-', 143:'9-', 150:'10-', 165:'11-', 217:'12-', 246:'13-', 272:'14-', 276:'15-', 280:'16-', 297:'17-', 307:'18-', 351:'19'}, left = [], right = [], book =$('.magazine-viewport .container .magazine'),
actualPage = book.turn('page'),
view = book.turn('view');
for (var page in tabs) {
var isHere = $.inArray(parseInt(page, 10), view)!=-1; if (page>actualPage && !isHere) right.push('<a href="#page/' + page + '">' + tabs[page] + '</a>'); else if (isHere) { if (page%2===0) left.push('<a href="#page/' + page + '" class="on">' + tabs[page] + '</a>'); else right.push('<a href="#page/' + page + '" class="on">' + tabs[page] + '</a>'); } else left.push('<a href="#page/' + page + '">' + tabs[page] + '</a>'); }$('.magazine-viewport .container .magazine .tabs .left').html(left.join(''));
$('.magazine-viewport .container .magazine .tabs .right').html(right.join('')); } This code will update the index. Also, as I see the most of the things are worked out in JS, even the flip task was in JS. I have joined the onlinecourse for JS do the things at advance level. Moreover my previous course MongoDB was over and I am eagerly waiting for the certificate with a score of 85%. I was done with seven and half chapter but now I was getting frustrated, and it was been too long, I talked to the Sir and asked to distribute the chapters to everyone. The same day I posted a mail, asking for whosever is interested and the next I gave the presentation on how- todos. But very important, before the presentation, I asked to choose the chapters themselves, so that no-one can blame me for more or less work 😛 Everyone randomly chose the chapters and I think this was a smart trick 😛 In the presentation, just gave the small overview of LaTeX, then coming to the important points: • How to use the macros, like I had defined the macros images i.e for subfigures, tables, itemize and certain more. Showed them the usage of them. • About the equations: As there were lot of equations, ensured for the usage of the particular packages • And certain more 😛 Now, the things were distributed, hope to have the book soon. First chapter fully complete now. I had the fourth chapter already with me, but I had to improve it as it was in accordance with the previous settings and improper use of LaTeX. I had used too many dollar($) sign, which is not good to use as it tells LaTeX to do the
things forcibly. So, I had to clean-up the code for that. Also I had
lot of equations, so I just made some packages as the primary one.
Like:

1) flushleft
2) eqnarray
3) align
4) alignat

Flushleft will apply left aligning setting in all equations, and to
ident some of the lines I used \hspace.
We have monoeuations(single equal to(=)), bi-equations. For
monoequations align is used.
Coming to eqnarray and alignat, they are almost the same but with some
notable differences:

• eqnarray has two alignment points (it’s basically just array with a
default preamble) whereas align has one. x + y &=& z versus x + y &= z
• eqnarray changes the spacing at the alignment points depending on
different factors whereas align keeps it fixed (which is generally
what you want)
• eqnarray allows page breaks between lines and align doesn’t

Using them I fulfilling the needs of the book.

After adding some more spices(chapters) to the book, I opted for doing
the flip task of the book. The two main problems I faced was:

• The zoom effect
• The slider below

Slider showed the view of the pages as it was moved, but after the
view of the first ten pages, it started repeating i.e Only view of
first 10 pages was shown, to overcome it, either we could add the
images for the view or to remove the view.

I decided to remove, as adding the pictures would increase the size,