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.

Friday, May 8

Lotus Notes : Setting Meeting Reminder

I have been using Lotus notes for a month now and I think I have got the hang of it. Initially I thought it was not as friendly as Outlook, but Lotus notes has its own advantages. I am yet to figure out many things in Lotus notes. Being used to the outlook's meeting reminder popup's, I was surprised that Lotus notes did not have this feature. Digging further through the inter-webs, realized that there is indeed an option to set up reminders for meetings. Manual work, but still very useful.

Using notes version 9, if you get a meeting invite, you need to open that meeting in a new window, click on edit and then check the box that says "Notify Me"



You can click on the clock icon to get more options, such as when you want the reminder Alarm to go off, etc.




After you have made the changes, don't forget to "save and close" to reflect the changes.




There could be a shorter way, I found this quick and handy way and it works for me. In case if you know any better way, do let me know in the comments. 

Thursday, May 7

Learnings #0005 - Life and Work and et cetera

Life after 50?
Stumbled upon this interesting post and it actually gave me goosebumps.
http://blogs.law.harvard.edu/philg/2015/04/

Interesting and thought provoking paragraph, I actually typed it instead of pasting it directly from the source, for the fact that I really wanted to have an impression in my head.

Lesson : Unless you are confident that your skills are far above average, don't take a career path that subjects you to the employment market once you're over 50 (and/or make sure that by age 50 you've saved enough for a retirement that begins at age 50 or 55 and during which you won't have employer provided health insurance for up to a 15-year gap between age 50 and Medicare age)
Documentation : I personally feel that in Software development, documentation is very important. Not just write long lengthy words, but have screenshots attached wherever possible. In fact, I usually prefer screenshots over text. But the bottom line is to have everything documented.

Perforce : Get the difference of files in a particular pending changelist. It should support additions, deletion and edit of files.

I remember using a batch file which would automagically send an email of all the files in changelist along with difference, which we would then send it to peer review. I am now looking for same solution, and get to learn how I can achieve automation in this area.

Posted a question on stackoverflow, hope to get some pointers. http://stackoverflow.com/questions/30099351/perforce-get-the-differences-for-a-particular-changelist

Lesson learned : Don't just assume/work blindly, try to understand how things work. Had I spent some time understanding the batch file, it would have been quite useful today.

Tuesday, May 5

Learnings #0004 - Web Development

CSS Cursor property
Recently came across this CSS style where for cursor it was defined as both pointer and hand i.e
.myClass {
cursor : pointer;
cursor : hand;
}
Searching online, came to know that hand was the Microsoft's way of saying pointer and it would work on IE6 below. I feel hand should have been an appropriate way to use in a style-sheet, well, to actually represent a hand. :)
Refer : http://quirksmode.org/css/user-interface/cursor.html#note
and http://stackoverflow.com/questions/3087975/how-can-i-make-the-cursor-a-hand-when-a-user-hovers-over-a-list-item

Deleting Browser Cache
Even though we have keyboard shortcuts in Mozilla and chrome to clear cache, it is a two step process, i.e ctrl+shift+Delete and then click to clear cache. Clear cache in chrome and Empty Cache button in Mozilla Firefox are a real handy utility. One click to clear the cache. I am looking forward to minimize the manual work as much as possible and automate things. Mundane task like this should be automated.