Workout log

Thursday, April 30

Tabindex : Normally in a form, if we want to provide a focus order on elements such as radio, input, textarea using your tab key, we would apply the tabindex html attribute. This is not entirely correct. It appears that tabindex can be applied to non focus-able elements as well, such as div, span etc. I think this is how the accessible website help navigate via the tab key.
Another interesting fact I learned today was that it is not just the tab key, but we can apply focus to the said element via touch or even the click. Interesting.

Chrome applies its own focus styles to such elements, to remove the default styles, you can apply below CSS

*:focus{
outline : none;
}

The above works, however I am not sure if that is the correct method. If you have better suggestion, comment here or update at stackoverflow

Perforce : Was trying to resolve a file however the popup which had all the settings neither allowed resolving the file nor did it show any error message. Google to rescue, was surprised to see this being asked on stackoverflow. As per the thread, the latest version of perforce does not support code hosted on older server(?). Softwares like these make a developers life easier, however I was more surprised when the software just hung on me, should it not show some legible error message and make our lives easier?

P.S : I don't know much about perforce, for the fact that it is code version tool.

One thing I have realized, no matter how complex code you write, if your software is not self explanatory and makes a user vomit, your efforts are wasted. Our client facing Softwares should be such that no user would require help of documentation.

Wednesday, April 29

Sublime Text : Viewing the same file in different panes.There was this huge 1.5K+ lines of CSS files and class names were defined at the top of the file. I had to refer to the file and make changes at the end of file. Kind of tedious. Here is what I did.
a) Have a two column layout. Goto view -> Layout -> Columns 2 or Alt+Shift+2
b) Open the same file in another tab. Goto File -> New View into File
c) Drag the file to other layout.

Tuesday, April 28

#1 : Iframe height issue : An iframe displayed inside a page, however it was not accommodating to the height of the web page.
Solution that worked : Give "width:100%, height:100% and overflow: hidden" CSS properties to your iframe. Give the same properties to the body tag or any parent tag inside which this iframe is included.

Sunday, April 26

Star world had this series running over the weekend. The title appeared very promising during the promo, so I decided I'll take a look at it. However I felt it had something missing, it appeared to me as if I was not able to focus much on the details, possibly the story tried to reveal quicker than I could process.

I have watched Prison Break and Breaking Bad, PB was by far the most thrilling series. It was then I decided to start watching such series.

Apart from that, this is an attempt to finish entire post in hundred words.

Tuesday, April 21

Automation is something that I should have considered a long time back in my career. Nevertheless it is not too late, in fact learning has no age limit.

I read a very good blog post about "What you learned today" at beginning of the day today and while doing random email checks and later starting my actual work, I realized that I would be required to run a command every day morning to start working on my projects.

CD'ing my way in the command prompt, I thought it was time to create a batch file and let the double click do the work. So I sat down, spent 5 minutes googling how to create batch files and yay, I created my own batch file.

What I learned?
1) Batch files to execute should end with a .bat extension if you are using windows operating system.
2) You just write simple commands in your notepad, the same one's which you would have entered while in actual command prompt and you should be good to go. There is a lot available out there to learn, but this simple trick worked for me.

That's it for now, I guess the command is executed and my server is running. Baby steps towards automation.

Monday, April 20

Disclaimer : Read css-tricks.com or MDN for in depth knowledge about length of CSS. This post is just a documentation of my day-to-day learning. I am documenting it here as a blog post for my own future reference.

While creating shapes or inserting
images or anything visual in your web page you require to use CSS
measurement units such as “px” etc. Below is what I know

“px” is for pixels, most
commonly used. While converting designs from psd files, I normally
would look for pixels and then apply the same measurement in my CSS
document.

“em” another measurement
units, lets say if you have a child “p” tag inside a “div”
tag and if the “div” is of font-size “16em” then your “p”'s
font size would be relative to your parent element. Usually used in
responsive web design.

“rem” is same as “em” but
with functionality that all the child elements are in relation to
the “rem” defined to the main root element.

“%” ie percentage, I've
usually used in scenarios where images needs to be 100% width and it
automatically scales in different resolutions, also giving width to
table data elements.

Research from Internet

We have absolute units and relative
units

Absolute Units : cm, mm,
in, px are absolute units. The value that you give is same
across all the different devices. The absolute units are normally
used for print devices instead of display devices. They can also be
used across high resolution devices.

px is
the most widely used, best thought as device pixels.

in (inch) are
physical measurement but in CSS they directly map to pixels. 1
in == 96px.

cm are
physical measurement but in CSS map to pixels. 1Cm ==
37.8px

mm 1mm
== 0.1cm == 3.78px

Relative units such as em and
ex depend on the font
and may be different for element in the screen. Em is
widely used, ex rarely
used. The purpose of ex is
to express sizes that must be related to the x-height of the font.

EM is
a typographic measurement, normally used over font sizes. The idea is
to use it in relation to the device default size. So for example, if
you define your h1 to 2.5em, then it means that your h1 is 2.5 times
your device size. Thus the font readability is adjusted on different
devices.

1em == 16px

Point to note : em
units multiply upon themselves when applied to font-size. So if an
element has font size 1.1em and within it there is another element
which has font size 1.1em followed by another element of font-size
1.1em, then the resulting size is 1.1x1.1x1.1 which is 1.331em.

REM is a relative
unit like em but it is always in relation to the root element ie.
:root {}

Points ie. pt
is usually used for print media instead of display.

Pica is
same as points however 1pc == 12pt

ch is
based on the width of zero (0) considering the x-height.

The viewport lenghts

vw is
the viewport width and 1vm is equal to 1% of the width of the
viewport. It is similar to percentage however it the value remains
consistent regardless of the parent element.

vh is
the viewport height for the device.

There
is also vmax and vmin,

What I learned

It is not
exactly measurement units, it is called as the length of CSS.

There are two
types of measurements, absolute and relative.

There are
various types of units available but most common and widely used are
px, rem, em. However you can use pt to have your webpage on print
media.

Take care
when using em and rem. Em is relative to the parent element whereas
rem is relative to the root element.

Friday, April 17

Today on my commute to work, I was thinking about life, work and my knowledge and realized how little I know from the Ocean full of knowledge out there. So I asked this question, What is SVG? And I was surprised to learn I knew almost nothing.

What I know about SVG?(Don't read, Posting it below just for my understanding. Read blogposts from css-tricks.com or read from MDN)

It is full form for Scalable Vector Graphics. Literal meaning would for a graphic format. Nowadays it is extensively used on the web, mostly as Icons. Since it is a Vector Graphic, the image can scale on any device, any resolution, almost all browsers without actually getting distorted. For example, If you are using jpeg icons, then for a Apple iPad Retina display, you would need to have the image twice in resolution compared to the one you would use for a Chrome browser in your windows machine. However, with the use of SVG, you wouldn't have to worry about having different resolution images.

Also with SVG, you can animate your icons and it would work across multiple devices.

P.S : Spent some time reading through SVG from good articles out there. Posted it below in my own words for future reference.

It is a image format for Vector Graphics. SVG has a small file size and it compresses well. It scales to any size without loosing clarity. You can have interactivity and filters applied to your SVG image. Wikipedia has a very important point I forgot to mention, that it is in XML format (SVG images and their behaviors are defined in XML text files)

How to use SVG in your web development?

You can use it just like how you would use it in case of jpeg and/or png. For example,

<img src=”main_logo.svg” class=”logo” alt=”Company Main Logo” />

And you can give dimensions to this image and it should work fine. This method does not work for IE8 and below and android 2.3 and below.

You can also use it as a background-image in your css, howeveer you need to have background-size css property defined.

Using SVG 'inline”

You can grab the SVG code, if you open it in a text editor (it is in XML format, remember?) and place it directly inside your HTML document and it should work fine.

<div>
<!--Your SVG Code-->
</div>

The above method has its own pros and cons. Cons being, bloated code, no caching etc.

One of the advantage can be that since SVG is in XML format, you get tag names, inside this tag names you can provide your own classes and then style them. An added advantage of including SVG inline.

Using SVG as an <object>

<object type=”image/svg+xml” data=”your_svg_image.svg” class=”logo”>

Some Logo <!--fallback image in CSS of I think you can even use fallback <img> tag here-->

Just like HTML, which has header, nav, body, p etc. tags that define a document, SVG has elements for circle, rectangle, simple and complex curves etc. So a SVG consists of a root element with various shapes to build a graphic. The g element is used to group various shapes together.

SVG has a grid or a coordinate system wherein it starts from (0,0) from top left of the document. X axis is from top left towards right and Y axis is towards bottom.

Various shapes that can be drawn in SVG are rect, line, circle, ellipse, path where path being very useful to create complex shapes. All this shapes accepts different attributes such as rect expects a x and y attribute with width and height, circles requires cx and cy and r (for radius) attribute, etc.

Apart from the basic attributes, the shape of elements in path is defined by “d” attribute, and the d contains series of commands. Each command is instantiated by a specific letter, for example, “M” is for “Move To”. The “Line To” ie. “L” command helps draw a line, the “H” helps draw a Horizontal line and similarly the “V” helps draw a vertical line.

These are just the basics to get some understanding on SVG. With SVG you can do a lot of other things such as Styling using CSS, Gradients effect, patters, clipping and Masking, incorporating external images, rotation, skew, animation using Javascript, Interaction etc.

SVG has a very good advantage over other methods of using images on the web, however it requires good domain understanding.

Note to Self : I just had basic knowledge of SVG, not sure if that even counts as knowledge, but spending an hour on css-tricks.com and Mozilla Developer Network, I now have some understanding of SVG.

Thursday, April 16

This was a very important topic for me and today I had an opportunity to attend a session on the same. Being ambitious, career oriented and hunger for more knowledge is very important. Gone are the days when our parents completed their graduation took up a job and lived with it happily forever after. It sounds simple, straightforward and minimal. No Efforts required. I don't want to judge and I know it must have been damn difficult for them, however I am of the opinion that the earlier generation never thought about Career Growth.

So why is it important now?

Getting a medical or an engineering degree was a privilege in the early years. So the best of the jobs would be filled by only the few. However, now, it is a different ball game. With so many, to profit, Educational institutes and a hell lot of students passing out each year, it is a competitive world out there.

Darwin’s law comes in my mind “Survival of the fittest”. However, now it is “Survival of the smartest”.

With a lot of competition, you cannot just be stuck in a job in your comfort zone and live your life. Within no time, you would find out that employees with desirable qualification, does not matter if they are less experienced, would get wages much higher then you are getting now after serving so many years. Why? Because

Companies are willing to pay for good qualification and desired candidates.

If you don't grow in your career, you are not that important to your company.

How to grow in your career and what
I learned by attending the session?

One should ensure they have desired
SKILLS and CAPABILITIES.

What are Skills?

As per Wikipedia, A skill is the
learned ability to carry out a task with per-determined results often
within a given amount of time, energy or both. In other words the
abilities that one possesses. Skills can often be divided into
domain-general and domain-specific skills. For example, in the domain
of work, some general skills would include time management, teamwork
and leadership, self motivation and others, whereas domain-specific
skills would be useful only for a certain job.

In my case, lets talk about domain
specific skills. Front end engineering including HTML, CSS and
JavaScript. I plan to take up full stack development and am deeply
looking at Ruby on Rails. I also have a game idea which I plan to
develop using Corona SDK. I was able to work on one project but I
haven't worked on it past 3 weeks. Laziness.

A lot of jibber jabber, right? But that
is the truth. Everyday it is a new story in the world of Front End. I
have to have knowledge of things. So to get the required skills
you can do the following

Read
online and be up to date with what is happening around your domain.
Lots of blogs and websites. Now that I have gReader app installed,
it is become easy. Before, I would regularly visit css-tricks.com,
HTML5 weekly, JavaScript weekly and during work sometimes I would
listen to shoptalkshow or the 5by5.tv.

Practice
what you learned.

Take
up certifications whenever possible. I had taken a w3 CSS
certifications a year back, which was a complete disaster because it
took me two attempts to get certified. I am looking at the PMP
certification and also Microsoft's HTML5, CSS3 certification. As and
when I get to know more about them, I will update on this blog.

Participate
in online courses such as Coursera, edX, udemy etc.

Write
what you learned. Blogging really helps. It forces me to write and
then helps me remember for a long time. Also, I like to write so
that is that.

Teach,
you can take up teaching others, become mentor etc. Really helps,
trust me. (That gives me a good blog post idea about my teaching
experience.)

What is Capability?

Let's say you've
worked hard to get the desired skill sets. But what next? Are you
capable of taking up that job role? Would you be able to take
complete ownership of a project, can you be a leader and start making
decisions? Can your team mates, people around you trust you? You may
be wearing those shoes because you have the desired skills, however
are you capable enough to take complete your tasks with those skills?

As per Wikipedia.
A Capability is the ability to perform or achieve certain actions or
outcomes through a set of controllable and measurable faculties,
features, functions, processes or services.

How can you know your capability?

The most important
aspect is “Communication”. You are, the way you communicate. Can
you get your thoughts out your mouth and into someone's ears? You
should know how to Network, ask for help, of course without wasting
anyone's time. If you want to grow in your career, you need to get up
and show that you are really interested about it. Talk to people,
your network, your manager, anyone but make sure your goals are
inline to what you are doing and that you have communicated them
well.

For example, down
the line if I want to take up a managerial position, then first thing
that comes in my mind is if I am a good spokesperson. Can I
communicate well? I can take that PMP certification and clear it, so
I have the desired skill set, however am I capable?

So basically, it
all boils down to how you present yourself, are you working towards
your goals and are you capable to handle any different but desired
role? And to be capable of anything, you should get up and start
involving yourself into things that matter. Start from small, but get
a live feel of things around. Take up ownership, start teaching what
you learned, participate in events that occur in your company,
network and most important, try to communicate your mind.

Who is your Inspiration?

This is a very
important question and I had a perfect answer for this. When I have
to look for inspiration it is M.D (A colleague). True, organized, has
good domain expertise and he is the best. I look down upon him for all the
positive energy and whenever I have a doubt, a question, I keep M.D
in that situation and think what he would have done.

So we have our
colleagues, teachers, parents, Manager, HR people etc around us that
we look up for an inspiration. However (I learned this in the
training, and it is very much true, I feel), the most person who
shapes you is “I, Me and Myself”. Yes, it is you as your own
inspiration, your own mentor, teacher and the people around you are
there just to trigger, boost, accelerate your thoughts. Sounds
strange, but I feel it is the truth.

Saturday, April 11

These days Front end is become an essential part of IT industry because everything is getting online. The responsibilities of a Front End developer have increased exponentially. I remember during my earlier years, a designer would write the HTML and CSS, but now we have a department in every organization with such expertise. And as front end developers we always have to keep ourselves informed with the latest. As uncle Ben would say, "With great powers, comes great responsibilities", and I totally agree to it.

Enough of all the exaggeration, this post is basically what I would have said to the 5 year earlier me.

1) Write Code.
2) Don't just read, but write more Code.
3) L:earn to use version Control and upload all your code to Github.
4) Learn to write documentation of your code on Github. Write simple to follow steps for how to install and configure your software. Make everyone's life easier. This also includes you, because down the line, somewhere in future you would want to revisit your code.
5) Have yourself ask and answer questions on Stackoverflow.
6) Earn certifications in Coursera and such educational websites.
7) Have IE as a major testing browser, when working on projects.
8) At start of the year, make goals and have yourself at least 5 Side projects assigned to you.
9) Important point, document everything. I had read somewhere about this and I am trying hard to follow it. However the point here is, if you learn something exciting, no matter how small it is, try to document it somewhere, may be online in your blog or in a book. Writing what you learned always helps you and keeps you a step ahead. You tend to remember things easily if you had made some attempt in documenting it. In case you don't remember the specifics, you at least know where to look for it.
10) Have a blog and regularly update it.
11) Read and Repeat. Go to Step 1.

Saturday, April 4

[Update 26th April 2015] : It appears that gReader app does allow creating of folders. More details later.
I was a big fan of Google reader and I had subscribed to awesome websites for my daily dose. After the sudden shutdown of google reader, I tried many other feeds reader but was not actually satisfied.

While trying the import, it failed. I wasn't sure what was the reason, until after trial and error I figured out that the main reason was grouping of the feeds in the opml file. Paul Irish had grouped feeds, and this format was not being accepted by gReader. I than found a github repository of frontend feeds by impressivewebs which is an extension of the work done by Paul Irish.

Thanks to all the hard work already done, I forked a copy of the xml file and did minor changes to accommodate for gReader app. You can get find the xml file here.

What did I learn?
1) How to fork existing code in github, get a clone of it on your computer and push back the changes to your repository.
2) gReader App, some trial and error and a little digging into the issue, some passion and a wonderful experience.