Thursday, April 30

Learning #0003 - Web Development

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.

Refer : http://nemisj.com/focusable/

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

Learning #0002 - Web Development

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.

Sublime Text : Keyboard shortcut for comments
ctrl + / does the trick.

Node and Express Installation
> node install --global express
> node install --global express-generator
> cd myprojects
> express project_folder
> cd project_folder && npm install

To start the default project and view it in your browser,
> npm start

You can than navigate to http://localhost:3000 and you should see the express default page.

P.S : node app.js is deprecated, use npm start command to start the express app.
 


Tuesday, April 28

Learning #0001 - Web Development

#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.

Refer : http://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100

#2 : While working on codepen, CSS had options for SASS and SCSS. Earlier I was under impression, that both were same, but there has to be some difference for codepen to have these options.

Refer : http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass

#3 : SCSS, variables are defined and declared as
$variable_name : #000;
The variable name starts with a "$" and its value is separated by a color. Should not have the value as a string i.e enclose it inside "", to make it a string.

Sunday, April 26

How to get away with Murder

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

Creating a batch file - Baby step towards Automation

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

The Length of CSS (Measurement units in CSS)

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
  1. “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.
  2. “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.
  3. “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.
  4. “%” 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
  1. It is not exactly measurement units, it is called as the length of CSS.
  2. There are two types of measurements, absolute and relative.
  3. 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.
  4. Take care when using em and rem. Em is relative to the parent element whereas rem is relative to the root element.
  5. Percentage is not technically a length unit. You can refer https://css-tricks.com/the-lengths-of-css/ for more details.

Friday, April 17

SVG (Scalable Vector Graphics) and My Knowledge about it.

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.

What is SVG? (Research from Various Internet Websites)
css-tricks.com has it summarized very well. https://css-tricks.com/using-svg/
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-->
</object>
Styling SVG inside an <object>
  1. You can use <style> tag inside your <svg> XML file</svg>
    <svg ...>
        <style>
        <!-- you CSS styles here-->
        </style>
    </svg>
  1. You can use an external Style sheet especially only for the type.
    <?xml-stylesheet type=”text/css” href=”svg.css” ?>

More Theory that I found interesting on MDN
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.

The latest SVG version is 1.1

SVG Example
<svg version=”1.1”
        baseProfile=”full”
        width=”300” height=”200”
        xmlns=”http://www.w3.org/2000/svg”>

<rect width=”100%” height=”100%” fill=”red” />
<cicle cx=”150” cy=”100” r=”80” fill=”green” />
<text x=”150” y=”125” font-size=”60” text-anchor=”middle” fill=”white”>SVG Text</text>

</svg>

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.

SVG Example
<?xml version="1.0" standalone="no" ?>
    <svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H 90 V 90 H 10 L 10 10" />
    <!--points-->
    <circle cx="10" cy="10" r="2" fill="red" />
    <circle cx="90" cy="90" r="2" fill="red" />
    <circle cx="90" cy="10" r="2" fill="red" />
    <circle cx="10" cy="90" r="2" fill="red" />
</svg>

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

Career development and Growth

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
  1. Companies are willing to pay for good qualification and desired candidates.
  2. 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
  1. 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.
  2. Practice what you learned.
  3. 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.
  4. Participate in online courses such as Coursera, edX, udemy etc.
  5. 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.
  6. 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

Important Points - Front End Development - Things I wish I had told the 5 years earlier me.

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.

Keep learning, Keep Rocking!!!!

Saturday, April 4

FrontEnd feeds and gReader App for Android

[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.

Recently I came across gReader app for android. I loved it. Apart from that the 5inch phone helps me scan through articles easily so it isn't a eye strainer. Subscribing to the websites one at a time would have been tedious, but I remembered that Paul Irish had created an OPML file of the best of the best frontend feeds. And the best thing, gReader app allows to import the file. Bingo!


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.