Friday, May 29

Tomorrowland - The Movie

TomorrowLand was a good entertaining movie with special effects, visually stunning and an interesting storyline. For me it was a quality time spent and I enjoyed it. I'd give it a 3 stars out of 5. George clooney being in the star cast I was expecting some action. However since it was a Disney production, and considering that the major roles were played by younger star cast, I shouldn't complain.

I am not movie buff and hardly go to the theater. Apart from that I had never heard of this movie before nor seen its promotions. A friend and me had some time to kill and what better than movies. However since we were looking for a particular time slot and I have a strict no watching Bollywood in theater policy, we were left with limited options. When I checked IMDB, Tomorrowland had George Clooney featured on its posters and I immediately decided I was ok with it. Funny how our thoughts, decisions are shaped based on the information we perceive. In my case, so very limited information.

Read the review at http://en.wikipedia.org/wiki/Tomorrowland_(film)

Thursday, May 28

Learnings #0007 - Web development - Related to HTML table element

CSS Immediate child selector. Styling the immediate child of a table td cell.
Lets say you wish to target particular elements i.e common elements  inside parent and it should not affect any other children of that element. i.e Select the immediate child of a element. We can use the ">" CSS selector for this.
http://meyerweb.com/eric/articles/webrev/200006b.html

An interesting problem that I encountered today when trying to apply CSS for the immediate "td" of a particular table. The "td" which I wanted to target also had another "table" inside it. Instead of writing classes to each of the "td" of my choice, I thought of using the CSS child selector.

So initially my code looked like this
table#mytable > td
which did not work, I then tried
table#mytable > tr > td
which again did not work.
The reason for this was that browsers also consider the tbody attributes for a table. Though it is mandatory for us developers to have the required semantically correct markup with tbody, thead and tfoot, we may sometimes omit/forget about it. So back to the issue. After changing the code to
table#mytable > tbody > tr > td{
   background-color : red;
}
 everything worked as expected. This was a very good point, I should have known.

Refer : http://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-work-when-using-the-child-selector


Printing a table
Printing a webpage can be tricky and sometimes if your webpage has a tabular data with your own css for sorting columns, pagination etc, then debugging a print can be time consuming.
Recently had to print a page with tabular data.

Chrome's print preview is a great feature. However for firefox and IE, we don't have a built in print preview. So my best and fastest approach was to select a fax option on the prompt on click of the print button. I had used the window.print() javascript function. When you click print to fax, you get a image which most likely represents how your printed page will look.

Now jumping to the issue, since I had tables with lot of text, when I previewed for print, it would display just few columns and not lot. As I already mentioned, columns had lot of sentences. However it did not strike me at first to check for the css white-space property. In my CSS it was set to "no-wrap" which caused the width of the column to increase causing all the other columns to hide not in printable view. When I realized this could be the issue (ofcourse with help from someone), I felt so naive. Well that's the reason I call myself a noob. NOOB!!!

Anyways one more time I learn that there is no magic in programming, everything what you see is for a reason. The fix was to override the white-space property to normal in my print functionality
@media print{
  .className {
     white-space : normal
  }
}

Firebug UI location
There is a stackoverflow question for almost everything. Made me realize how much I am dependent on Google. I make me feel good by counter thinking that, google gets work done and I have saved macro seconds of time, also I get to write it here. Naive.

http://stackoverflow.com/questions/7319525/open-firebug-in-right-side

Unwanted space when stacking HTML elements in columns

Let's say you want to stack your div in columns of 3 or 4 and the number of div's can add up depending on user action. See below screenshot for example.


What we can do is provide a width to the parent div, and then all the subsequent div's, you can assign a float:left property along with a width in percentage and some padding as per your requirement.

Even though above works fine, sometimes what happens is there is an unwanted space between the div's. That is, 3 div's in a row, followed by 1 div at the extreme right and then all other div's. See below screenshot for reference.


This is a very annoying problem and I was not able to find the exact reason for it. However what solved the issue was removing the float property from the individual element and applying a display:inline-block.



Tested on all the major browsers on windows system i.e IE 10, Chrome, Firefox and Safari.

Friday, May 15

Gulp 101 - Getting started with Gulp.js - Lesson 1

Gulp is javascript task runner. Sounds interesting. I had heard about grunt.js but never got a chance to work on it. Some days back i learned about gulp.js and how well it is being taken by the web dev community.

What I know?
Gulp is a javascript task runner. In front-end now a days we need to take care of many things before we ship our code to production. Task such as minification of CSS and JS files, concatenation of multiple css and js, image optimization, converting the sass files into css files or for that matter the less files into css files, and many many more.

As far as minification goes, I would copy my development code and paste it in some minification app, a manual process. I had to ensure that I had a backup of the unminified version for development. Same with js.

However with tools like gulp.js, working on automating tasks is become very easier.

What is gulp.js?
Gulp is a JavaScript task runner. It has 4 major api's which are
1) gulp.task => Defines a task.
2) gulp.src => Reading of files.
3) gulp.dest => Writes all the files.
4) gulp.watch => Watches files.

Getting started with Gulp
1) Install node.js first. Make sure you also have npm installed. For windows, running the node.js exe file does the trick. Once you have installed node, check in your command prompt by typing
node -v
2) Install gulp globally.
npm install gulp -g
 You can verify if gulp is installed correctly by looking for the gulp version using the command
gulp -v
2) Installing gulp locally. Make sure you are in the project folder in your command prompt.
npm install --save-dev gulp
 --save-dev saves it to the devDependencies in package.json file. A devDependency is something that is required during development. For example out gulp task runner. package.json also has a dependency key which means that all the packages inside these are required during runtime. For example angularjs. This package would be required when we run the application.

3) After you have installed gulp locally, create a gulpfile.js file in your project. Lets create a simple gulp task that would print a message to the console.


Creating our first useful task
Let's create a simple task that compiles our less files into css files.

1) Install the gulp-less plugin
npm install --save-dev gulp-less
Make sure you are in the right project folder when running the command. Your command prompt should look something similar to this




See below gist along with comments

Tuesday, May 12

Learnings #0006 - Miscellaneous

A very interesting read about gamification. https://medium.com/backchannel/this-video-game-solved-the-problem-of-learning-guitar-d0fcea6f0d3b

A game that helps you learn guitar, isn't that cool? I have had this guilt feelings of not being productive after a hour of online gaming. But game sessions like these, remain with you even after you've stopped playing. Recently I had this idea of an android game using corona SDK, which would test your math skills along with game fun. It could test your focus. Anyways this is just an idea which was with me for some time now and I just put it online via this blog post, though it does not reveal much. Stupid me.

 Ruby on Rails : Request Response Cycle
1) User visits a web page from his browser. He enters the address in the address bar.
2) The request hits the rails router at (config/routes.rb)
3) In routes.rb, the router maps the URL to the correct Controller followed by the correct action to handle the request.
4) The action receives the request and asks the model to fetch the data from the database.
5) The model than returns the required data to the controller.
6) The controller's action than passes the data on to the view.
7) The view renders the page as HTML.
8) The controller send the HTML back to the browser and the page loads on browser for user to see.


Refer : http://www.codecademy.com/articles/request-response-cycle-dynamic
Image : http://s3.amazonaws.com/codecademy-content/projects/3/request-response-cycle-dynamic.svg

Completed the rails tutorial on codecademy.com. It was fun, easy though sometimes it would not work and take some time to load, but all in all quite enjoyable.