Love For Javascript

When it comes to choosing a programming language, I am an **. I have to admit that. Nevertheless, let’s talk about my new love, Javascript.

When I first saw Javascript, it looked like a great language for client side scripting. Yes, a wonderful toy in the delicate hands of an UI designer. It seemed like a little language, with a small set of grammar and pretty straight forward. There wasn’t much to look at, and I found myself using the language before even understanding anything about it. That is how intuitive it was, and easy to pick up.

Years later, I still thought I knew like 90% Javascript. What else could one think. Javascript was all but these basic loops, sloppy, forgiving syntax parser, coupled with those self explanatory event listeners that just worked. There wasn’t much to think about here, so Javascript didn’t even qualify as concern when working with web apps, being a backend guy.

This changed with my introduction to Node. The asynchronous behaviour of the APIs made me wow. Node was interesting, new and fun to write. It was everything that I never thought Javascript was, but then it was Javascript. Interestingly, as I went to write more and more code in Node and Express, I began to get stuck at even the tiniest problems. Suddenly, I was surrounded with words like callbacks, closures, event loop and prototype. Felt like I got a reintroduction to Javascript, but this time, it was not a toddler playing in it’s cradle, it was something of a mysterious monster, challenging me on every other step for not having taken it seriously.

I spent around a month on learning Js throughly. As it turned out, understanding first class functions and object literals and many other concepts, Javascript was the most interesting thing I have touched in years. I can now see all the hustle over the Internet regarding Js. Javascript is powerful, only if you think and use it that way. The language is small, with little built in libraries that seem tiny when compared to the vast set of built in methods in Python or Ruby.

Having said that, I’ll have to admit now, after having learnt most of the language features (finally..), that out of the many languages I have touched, Javascript is one of the most errornous language, with literally places where you shout, ‘what on earth were they thinking’, but then, language designers are humans as well, and I have learnt to ignore the bad parts. Things are going smoothly ever since.

I would really love to write more on Js, but maybe when I actually have something. Till then, assume I am on it, and I would encourage you to take up learning something wonderful too, in case you haven’t. See you then.

The October Dance With Some Cool Indians

I really took long to write this story. I didn’t feel like it was anything worth the time or the efforts to write one. But I really felt something recently. I got called up by a passed out senior from my college. He wanted me to work on a project he initiated. Although the project was fine, I didn’t actually have the time to do it. I said ‘No, I don’t think I would be able to make it’.

I never responded in negative with people who came to me with any tasks. That is the way I was. I just wanted to get all the experience I could, no matter how inconvenient it was for me. Mom always said, ‘but you must see if you are free before accepting some work’, I would be like, ‘Chill, I am learning’. I continued that way, because maybe, I never actually had to sacrifice anything for this ‘extra work’.

This was to change on 30th September this year. I got a call from a senior at night at around 10. He asked if I was willing to do web development for a company, and those guys were willing to pay too. I replied with a yes, after which I was asked to visit their office the next day, some 80KMs from my house. I even went there, to learn something about the task and quickly went on to make a rough skeleton. Pretty easy it was.

I came home and started working towards the final layouts as shown in the PSD file that I was given, extracting layers and cropping graphics, linking them in the one page application. Things were not as neat as it was expected from us, me and my design partner, Rajashree. The backend was finalized by 3rd October, my birthday. I didn’t enjoy or celebrate a single second on that day, even though I had relatives arrived at my house. It was really stressful time. I was still trying to finish things up by 5th, working from 8am in the morning to 1-2am at night, constantly receiving calls from the guys to improvise, make changes and add features.

By 6th, I was done. Those were really stressful 5 days. I hadn’t looked at myself in those days properly. I had submissions and exams coming up, and I wasn’t a cent prepared. And it was not just about me, I had Rajashree taking up equal or in fact, even more efforts, facing similar situations. Finally, I gave up. Mailed them that I couldn’t keep up any longer. We did not get paid, and that can either be justified or not depending on how you see it. Anyways, it was a great experience.

From a technical perspective, I didn’t learn much. But somewhere I learnt what to value. Myself and my time. It is pointless to try to do everything. You just can’t. No one can. A much better approach would be to give 100% to the few things that matter the most. This was a lesson for a lifetime. Now it is just me and the things that matter. Cheers!

The Bug Bounty Dance

Starting with the update, I finally made myself some money with my first ever bug bounty. It was a simple logical flaw that was rewarded. I was, of course, very happy. I had dinner with my parents in a good restaurant, bought a backpack for my new laptop computer, kept some of the cash and gave rest to my mom and dad, equally.

Bug bounty isn’t new to me. I have been living in a community where it was not uncommon to read some or the other friend getting rewarded a bounty, every other day. As far as I remember, things were not like this in my early days. I started interacting with people in cyber security in early 2011. At that time, there were no bug bounty hunters. Some of us were into defacing websites and getting root of web servers for the fun of it. Others were more into blogging about the same. Blogs written on hacking tutorials, news updates and tool guides were dime a dozen. In fact, that was the only way in which most of the amateur pentesters could make some money out of their knowledge (see Adsense and link exchange).

I miss the old friends, the ‘Killerz Hackerz Zone’ group we had on Facebook, where we had some helpful people, who used to guide everyone when needed, and were excellent people to talk to. A particular friend I remember had the handle ‘Dexter India’. He was virtually my brother. There were others too, teaching and learning from each other. After a while, I was made admin of that group, which was, for me, something extraordinary. I learnt a lot from people there, about what a hacker really is, and most important of all, how to keep digging to get what we want. There was this thing written in the group’s description that read “Don’t be smart, be sincere. Then you’ll become a hacker”. A simple statement, but how true that was. It was from that time on, sincerity towards self that became a goal in my life. Learn, not for family, nor friends, nor in the least for society, but for yourself.

Then there were cyber wars, defacements of thousands of sites which included the top government ones. My group vanished. Friends, whom I knew by their handles, fell off the grid. I never got to hear from them again, till date. At some point in around late 2012, everyone realized at once that these cyberwars ain’t helping anybody. It stopped, and the age of hunting bugs for bounty and hall of fame began. It was something new altogether. Spend your time and skills finding bugs and shortcomings in sites that offer to pay for the bugs you report them. The payouts are usually quite high, and if done consistently, much higher than what the average engineering and business school joe gets as a salary.

This triggered a race between researchers, which for most of them, somehow got converted from finding the deepest flaws to finding the hidden low hanging fruits that make a quick buck and take less time to find. Suddenly, it wasn’t about the skills one had. It was all about who gets it first, that gets the bounty. And when a simple bug gets you around 500 in US$s, critical ones going well over few thousands, there was no reason to not invest time in this new business.

But I didn’t. I simply lacked the guts and determination to test an application thoroughly. Maybe it was the skills that I didn’t have. Whatever it was, I used to always get excited to read about bounties. It was raw money, for your time. I had, at times, tried to test an application, but never succeeded. Maybe that’s why I moved from web security to web development. Right down my alley.

Then later in July this year, my mate Kunal got rewarded for a cross site scripting bug he found in a popular social network. It was a respectable sum of money, which he used to build his own PC. You know the thing with money? You don’t fall for it’s greed until you see the possibilities that arise from having good sum of money in your pocket. No one wants to just have loads of cash. It is the things that you can do with it, makes you want it. Similar was the case with me. I needed funds to fulfill some of my long term materialistic dreams. That was the sole motive behind ‘researching’. No, it wasn’t to learn or anything, or test my skills (giggles), it was just the pure greed, that I have now tasted. Although not an awful lot, it was enough to get me a few things. Now I crave for more. Suddenly, the needs have increased. Branded bag, a prestigious phone, ultrabook. Damn.

The quote is still stuck on my mind. I miss those days badly.

Don’t be smart, be sincere. Then you’ll become a hacker

Vim Cheatsheet

Started using vi, although the only reason is it being light weight [I am taking a leap of faith, hoping that it will increase my speed after some practice, as most vi gurus say]. Let me first admit it. Vi feels awful in the beginning. It is really intimidating, and I am having a hard time to remember the commands and stuff. Hence I started writing the commands I learn from google and stackoverflow in a file. Thought to post it here, for everyone.

I will keep the list updated as I learn more and more commands and tricks. It serves me as a reference, and hopefully will do the same for some of you.

Open file

vim file.js

Swtich to insert mode

i

Switch to append mode

a

Switch to command mode

[ESC]

Save file

:w

Save and exit

:wq

Exit [if no changes were made]

:q

Exit, discarding changes

:q!

Moving through text

h - left
j - down
k - up
l - right

Undo last operation

u

Copy current line

yy

Cut current line

dd

Paste last copied line

p

Select text

[CTRL] + v
h,j,k,l ;for moving and selecting

Selecting multiple lines

[SHIFT] + v
j,k ;selecting lines

Search through text

:s/pattern

Search and replace

:s/pattern/replacementString

Working with multiple files

vim file1.c file2.c file2.c

Next file

:n

Previous file

:prev

Go to particular file

:b file3.c

Working with multiple files [tabs]

vim file1.c file2.c file3.c -p

Move to next tab

gt

Move to previous tab

gT

List all open files [or buffers]

:ls

Commenting multiple lines

[CTRL] + v ;to enter visual mode


[ESC]

Uncommenting multiple lines

[CTRL] + v ;to enter visual mode
jjjl ;selecting multiple rows and columns
d

Auto-indenting

=

Move to the start of the file

gg

Move to the end of the file

G

Auto indent entire file

gg=G

Indenting a block [starting from a paranthesis]

=%

Indenting selected lines


jj ;move down through required lines
>

Starting a shell

:shell

Executing bash without shell

:command ;eg. :pwd

Fujitsu Lifebook A514 Review

Hey guys, I bought the Fujitsu Lifebook A514*. I had a strict low budget of INR 20k and I had to squeeze the most out of that. I don’t play games, nor do I watch movies and hence I could cut on the graphics card and hard disk space. A powerful processor was also not much necessary. All I needed was lots of RAM and a speedy disk. I got that.


Main Highlights

  • Intel i3 4005U 3rd Generation 1.7Ghz Dual Core (4 threads)
  • 8GB DDR3 1600Mhz RAM
  • 500GB HDD 5400rpm SATA III (Which I upgraded to a 120GB Kingston SSD* worth INR 3,400)
  • 15.6in anti-glare display 1366×768
  • Comes with no OS, clean
  • VGA, HDMI, 3 USB 3.0s and 1 USB 2.0, SDHC, Mic, 3.5mm, DVD-RW, Gigabit Ethernet, Wifi a/b/g/n, Bluetooth
  • Looks great, feels sturdy

Complete spec list on fujitsu.com

The Design

Top view
Security lock, ethernet, exhaust, VGA, HDMI, 3 USB 3.0s
Earpiece, mic, USB 2.0, DVD, power
Indicator LEDs, SSHD slot

The laptop looks beautiful on the outside. The plastic feels premium, not glossy. It has a brushed metal finish, with a sparkling Fujitsu logo right at the back which looks fantastic. On the right, you have a DVD drive, earphone and mic jacks and a USB 2.0. On the front, there are some usual indicator LEDs and a SDHC reader. On the left there is a physical lock, ethernet, VGA, HDMI and 3 USB 3.0s. One of the 3.0s is an always on anytime charge USB, meaning that you can connect your phone to it and it will get charged even if the laptop is switched off. Overall the notebook is just like any other notebook, with most of the default functionalities and you won’t miss on that.




On opening the lid, you’ll notice a somewhat odd placement of keys. For example, the right Shift key is smaller that usual, and a double pipe (‘|’) key is present in that place. The Enter key is a little odd shaped too. Apart from these little changes, everything is pretty standard. A power button, web cam, trackpad (larger than average). The screen is not that awesome, but pretty common for something at that price. Viewing angles are average, and it becomes hard to see beyond about 30 degrees on either side. Brightness is, too, average. The anti-glare thing works, but don’t expect it to perform extremely good under the sun. The overall built quality is above average, and can easily match the slightly higher ended models from HP, Lenovo and Dell.

About Performance

Turning the device on for the first time, you will be greeted with a message to install an operating system. I went with Debian Jessie. Boot up times were good, and the laptop felt snappy. The performace is good if you are not much into graphics and animated stuff. I haven’t tested it but GNOME felt smooth and XFCE is, of course, lagless. There was no problem finding drivers for Wifi (you can actually just apt-get them), and sound was smooth too. Pulse ran without a problem, and though the sound of the notebook speakers is not an awful lot, it just works.

Getting SSD

As I mentioned, I replaced the stock 500GB hard disk that came with it with a Kingston 120GB solid state drive. My needs were not a lot of disk space, but a fast disk. The benefits can be seen right from the time you install the OS. It takes about a third of the time to get the OS installed and I was done with Debian stable in under 15 minutes. The boot up time went down from 15-20 seconds to 3-4 seconds. Is it worth to go for an SSD and sacrifice on disk space? Well, it depends. Do you do a lot of compiling, I/O and work with Intellij IDEs, Android Studio and stuff? Do you not care about backing up important data like photos, songs and movies or have a secondary storage device for it? Your productivity increases on a fast system (which is pretty obvious)?. You are not planning to dual boot it? If all or most of your answers to the previous questions are yes, then you can say it is time to invest in an SSD.

Lastly..

The battery life is good. I had it running for about 3 hours and the battery has gone down from 100% to 64%, doing all kinds of stuff like installing softwares off the internet and the like. The laptop is producing very little heat, probably due to the low clock of the CPU.

Finally, I think Fujitsu is a great brand which I realized after getting my hands over it. Maybe like most of you reading this, I was quite skeptic about putting 20 grands on a company which I had not heard much about. I would have well settled for a ‘reputed’ brand like HP or Dell with half the features, but I risked it a bit, and in the end, I am extremely happy about me choice. If you are at a stage where you are not able to decide whether or not to go for this brand, I hope to have given you an answer. This review is for those like me, who buy smartly, decide which product to buy, read reviews and stuff online, before handing over their hard earned money to someone else.

Have a thought? Drop it in the comments below. Peace

*Links contain affiliate code. If this review helped you, please consider buying the laptop (or anything else) from my affiliated link. Thank you for the support!*

Guide To Online Passport Application In India

If you read my recent posts, you know I went to the passport office for the purpose of document verification. It went as smooth as it could, but before all this, before submitting the form, I didn’t have the slightest clue what all I had to do, and I learnt most of the technicalities from various sources on the Internet. So here I am, writing this guide.

There are three parts to this guide, as well as the entire process. Firstly, there is the online form filling part, followed by the onsite documents verification and lastly the police verification. Before you get into the process, make sure you have some documents. Documents that are required vary person to person according to your details (you can use the document advisor on their official website), but you’ll basically need one proof of date of birth, one residential proof and a Non ECR category proof. Ideally, you should keep at least 2 of the former two proofs handy (You’ll know why in a moment). For most of you reading this, the Non ECR would mean SSC (matriculation) certificate. Yes, that is all. In my case, I had my birth certificate as the proof of date of birth, BSNL landline bill as the residential proof and matriculation certificate as the proof of non ECR.

Form Filling

  • Handy tip; Since the form is quite large compared to other forms you might have filled and requires your attention, if you happen to take a break while filling in the form, you can click the ‘Save my details’ link at the bottom of the page to save your progress in case of any failure.
  • Go to Passport India’s website and click “New User Registration” link. Create an account on the following page. NOTE that this is just an account so the details here are of little value.
  • After setting up the account and verifying the email address, go to ‘Applicant’s Home’ and select apply for a fresh passport. You will be presented with options to either download the form or fill it up online. Since you are reading this article on the Internet, you can freely select the ‘fill online’ option.
  • Passport Type: You should select the ‘fresh passport’ radio button, since this is your first application. Otherwise, accordingly. The type of application can be any one of ‘normal’ or ‘tatkal’ depending on your need, and so is the option for passport booklet size. It will increase the total cost of the application, if you go for them. I kept it to normal and 36 pages.
  • Applicant Details: Add your personal details here. Triple check everything for spellings and numbers. It will save you a lot of headache. Try to enter as much information as possible, and also cross check if the same details are present on your document proofs. Give special attention to spellings in your name.
  • Family Details: Fill in your family details. Same instructions as that for applicant details.
  • Present Residential Address: Fill in your address, and make sure it matches with the one on your bills and other documents that you are planning to submit at the passport office. You’ll need to provide previous address proof if your current address is newer than 1 year (i.e. you are living in your current residence for less than 1 year)
  • Emergency Contact: Person to contact in any case of emergency.
  • References:People in your neighbourhood who can confirm your identity and address, like friends, relatives or any neighbours.
  • The next few pages should be usual form filling, and doesn’t carry much information weightage, compared to the previous sections. Once done, verify the details of your passport. Verify it again, and ask someone else to do it too.
  • Verify the self declaration, and when sure everything is all right, submit the application.
  • This will do for now. Your application is filled and ready. Now you can browse to the ‘View Saved/Submitted’ applications and your application should be there. There are some things that you can do from here. First of all, you will have to ‘pay and schedule the appointment’. If you had been following as per the normal procedure, you should have an invoice of INR1500 here. You can either pay online or as a chalan from SBI. I would, of course, recommend you to pay it online, and save yourself the hassle.
  • The payment process is similar to any online transaction. No surprises here.
  • After the payment, the system will show you available appointment dates and their locations. Select one from those, or you can schedule it later. Select the nearest one and note the exact time. They don’t tolerate latecomers and you would have to reschedule the appointment if you miss it, even by 10 minutes.
  • After confirming the appointment date, take a printout of the application, get your documents attested with 2 copies of each.
  • You are now ready for the next step, visit to the PSK – Passport Seva Kendra

Passport Seva Kendra

  • Depending upon how far you stay from the PSK, try to reach the place at least 30 minutes ahead of reporting time. PSK will have an ATM machine, snacks counter, zerox machine, PCs with Internet access and washroom, in case you were wondering. Make sure you carry the application letter’s copy, document proofs (original and attested zerox), extra documents that you have.
  • Keep the documents handy. When it is time, you will first be checked by the security for valid documents and application letter, along with other security stuff. Only the applicant is allowed inside the PSK, unless there is a special exception or your applicant is a minor.
  • After you get inside the PSK, you should notice queues, with some marked ‘tatkal’. Get into the non-tatkal queue (of course, if applicable). You will be asked to show your originals and zeroxed documents. The person at the counter should inspect them and put them into a folder marked ‘confidential’. Along with it, you will receive a token slip. Keep it infront of you and note the token number.
  • Next up, you will be waiting for your token number to appear on the screen. When it appears, note the associated counter number (like ‘A13’) carefully.
  • Counter A: Here, you will have to show your documents. The person at the counter will assess them, ask you to add something if something is missing and point out other errors. It is likely that you will get stuck at this stage if there are any problems with your documents. If not, then you’ll be asked to smile for a photo, and give away your finger and thumb prints. You’ll also be asked if you would like to have SMS alerts for further notifications at INR35. Get it if you need, although not necessary. If all goes well, they’ll ask you to move to the next counter.
  • Counter B: Same procedure goes here, only the document verification is done strictly at this stage. Every detail is cross checked line by line, and errors are noted. You’ll be told if you have any errors that need to be taken care of. Otherwise, you are good to go.
  • Counter C: Here, the person will check the originals lightly, question you a thing or two if there were any errors at the B or A counter, and if everything goes right, the person will keep your zeroxed documents’ folder and ask you to submit the token slip.
  • Submit the token slip at the next counter, and you will receive an acknowledgement stating the status of your application, and the token slip back. Fill in the feedback form on the back of the token slip, and submit it to the exit security.
  • If your acknowledgement form reads ‘status: granted‘ then it means all went well. You can return home and wait for the call from your local police station for police verification. In case it doesn’t, then the exact error will be written. Rectify those and visit the PSK on the given appointment date, and get your application granted.

Police Verification

Now that you are done with things from your side, you can wait for a call from the police department of your area. Meanwhile, you can visit your profile and click ‘track application status’ to check on what stage your application currently is. During this time, authorities will inspect your civil/criminal records and stuff like that to make sure you’re a good citizen. It should not be a problem for most of us.

This section will be updated with more details as soon as I go through this phase.

The police verification step for me involved visiting the police station with identity proof, along with two references who came with me to the police station. For me, it was my school friend and other school friend’s dad. Didn’t take much time, a couple of hours and we were done.


Next

Assuming that you are done with the police verification, the police will send the recommendations back to the passport office. It would contain details and depending on those, they’ll further enquire and review your application or they will send the passport to print. If the latter is the case, then you can expect your passport within a month via speed post.

Edit Got the passport via mail in about 15 days after the police verification. All in all, a good experience.

Passport Office

Today, I had an appointment at the passport office for document verification at 10.30 in the morning. To be honest, I was worried, not because I had any problem in any of the documents, but because the thought of visiting a government office makes me nauseatic.

Have you ever visited a Government office, where you spent hours rushing from one counter to other, facing people at every stage who don’t give the tiniest bit of importance to your existence, and you felt like you are in a totally different hostile country altogether? If yes, then you know exactly what I’m talking about here.

But today was something different. Although the reporting time was 10:30, I reached the place by 10, just in case. I was expecting hour long queues and chaos, but to my surprise, it was not that way. There was a queue, but there were hardly 10 people in it. After about 10 minutes of reaching, the security guard, who stood by the entry gate, called upon every one who had the reporting time of 10:30. He looked at our documents at a glance, did the physical security checks and we were in. It was still 10:20 on my watch. I went inside, where there were multiple counters. I stood in one of those. When my turn came, the lady at the counter took all my zeroxed documents and attached them to a file along with the application form. She gave me a form which had a token number on it. I was unsure about what to do next, but a helpful voice again called me and guided me towards the next room.

The next room was a large air conditioned hall, with a canteen, a zerox machine and many such convenience stuff. More importantly, it had three large LCD displays which displayed a table of token numbers and their corresponding counter locations. I sat there for around 10 minutes when I saw “N150 – A7” on the screen. I got up and went to the A7 counter. A lady there read all my documents and asked me to zerox a few more things. I did as she said. Then she captured my photograph, took my finger and thumb prints, and asked me to go ahead. All in all, the entire main hall and ‘A’ section took 30 minutes.

Next up, I was in a waiting room with other people, where there were the same monitors. Here I had to wait around 15 minutes before I saw “N150 – B3”. On this ‘B’ counter, a lady verified every detail line by line, going through each minor issue. After this, she returned my documents and told me to wait for the third counter. I went into the same room as that earlier and waited for the next call. Somewhere around 15 minutes later, I saw “N150 – C7” on the screen. Here, I was greeted by a very pleasant man, who smiled as I entered. He looked at the documents, doing some typing at the same time. After about 30 seconds, he kept the folder, returned me my originals, and said, “You’re done here. Submit the token, and then you may leave”. I smiled and gathered my originals, giving way to the next guy standing behind me. I checked my watch. It was 11:15. I returned the token slip, and went towards the exit. A very polite guard asked me to fill the feedback form, which had all sorts of questions. It should not be surprising that they deserved an ‘excellent’ in almost all questions. I then left the premises, got into a rickshaw and went home, with a totally changed mindset for Government offices. Oh boy, I wish all government offices were like that.

Summarizing my experiences, the entire process was smooth as silk. It was because of the excellent management of the people who worked there. They deserve the entire credits. Not a single person looked like he/she was forced to work there, something you often see in such places (My personal experience with SBI bank). Everyone made me feel good, and my work important. I was treated nicely, even though I didn’t get down from a VIP car at their premises, or had a call from a bureaucrat beforehand. The entire process was way better then what I could have ever imagined.

Lastly, a big thank you on behalf of me and the thousands others who visit these Passport Seva Kendra all over the nation with dreams in their minds. While I was sitting in the initial hall, I noticed a quote from Mahatma Gandhi, that hung down a large poster. I couldn’t photograph it since it was prohibited, but this was the exact quote. I am happy that they didn’t just put it, but were following it on every step. Thank you!

“A customer is the most important visitor on our premises. He is not dependent on us. We are dependent on him. He is not an interruption in our work. He is the purpose of it. He is not an outsider in our business. He is part of it. We are not doing him a favor by serving him. He is doing us a favor by giving us an opportunity to do so.”

CSS Crash Course

I have a friend, who happens to be a good C and assembly programmer, but simply hates anything related to web, then be it HTML, CSS or anything way too much abstracted for that matter. Since it was compulsory for us to make our own web application project for college, he struggled to learn it (CSS and HTML) from here and there, cursing it at the same time. Hence this little guide, for all those of you who hate it, but still want to get your work done.

A thing or two about CSS

CSS isn’t a markup language. It is a styling language, and hence, it won’t really work if you have no document in the first place. Creating a document simply means adding some data to HTML tags in a web page. Here onwards, document would mean the HTML page that we are working on. Let us create one as an example.

<!DOCTYPE html>
<html>
<head>
  <title>Testing</title>
</head>
<body>
  <h1>Awesome Site</h1>
  <h3>A little heading</h3>
  <p>A paragraph containing some text</p>
  <h3>Some information</h3>
  <p>More text...</p>
</body>
</html>

This is a very basic example that would display something like the following. You can guess what each tag stands for here, if not, ‘h’ tag stands for heading, ‘h1’ being the largest to ‘h6’ being the smallest. ‘p’ stands for paragraph, and there are many such tags, which are used as and when required.

Now it is time to style our document. I will place all the CSS styling in a <style> tag, which I will be placing into the <head> of the document. Now you must know that I could do the exact same thing by using an external CSS file and linking it, or by styling individual elements using inline CSS. We will see what those are later. I think the main heading should be red, the subordinate headings should be green and the paragraphs should be orange. I also think the background should be a little off white. Let’s see how that translates into CSS.

body {
  background-color: #eee
}
h1 {
  color: red
}
h3 {
  color: green
}
p {
  color: orange
}

Now that we have styled our page, let’s take another look at it.

Looks like it works, although it is looking ugly. Anyways, what we have used here is the element selector of CSS which, not surprisingly, selects the elements matching the tag name and applies the properties defined for it.

ID and Class selectors

Now, there may be times when you have multiple elements with same tag names but you want to apply CSS properties to only specific element(s). That is where the ‘id’ and the ‘class’ selector comes in. Note that however, the class here does now refer to anything from your object oriented programming books. It only gives those elements with that class a particular grouping. You can use any one of ‘id’ and ‘class’ as per your liking for now, but conventionally, we use ‘id’ for uniquely identifying elements and ‘class’ for grouping similar elements. Technically, there is an additional difference of precedence here, with the ‘id’ having more precedence than ‘class’. My personal rule is that, for custom CSS use ‘id’, since frameworks like Bootstrap (which we will check out later on) usually use ‘class’.

Now we shall rewrite the document adding an id attribute to each tag name.

<body>
  <h1 id="logo">Awesome Site</h1>
  <h3 id="heading">A little heading</h3>
  <p id="content">A paragraph containing some text</p>
  <h3 id="other-heading">Some information</h3>
  <p id="other-content">More text...</p>
</body>

and we shall change the CSS accordingly

#logo {
  color: red
}
#heading {
  color: green
}
#other-heading {
  color: olive
}
#content {
  color: orange
}
#other-content {
  color: purple
}

The resulting page looks something like this, with each of the individual elements appearing in different color.

Note that we could have well written ‘class’ instead of ‘id’ in our document, but then instead of #logo it would have been .logo, which is the class selector. Having learnt two selectors, we can now combine them to get the desired result. For example, h3#heading { color: blue; } would turn blue all the h3 tags that have a id=”heading” attribute declared. Similarly, h3.heading { color: blue; } would result in the same thing to all the h3 tags with class=”heading”.

Group selectors

Group selectors are used to apply properties to multiple elements at once. Multiple elements are separated by commas.

#logo {
  color: red
}
#heading {
  color: green
}
#other-heading {
  color: olive
}
#content {
  color: orange
}
#other-content {
  color: purple
}
/* Selecting all three tag names at once. */
h1, h3, p {
  background-color: yellow
}

Which will look like

Descendant selectors

Sometimes, CSS properties needs to be applied only to tags within a specific tag or id. In such situations, the descendant selector comes in handy.

<!DOCTYPE html>
<html>
<head>
  <title>Testing</title>
  <style>
    ul em {
      font-size: 1.25em
    }
  </style>
</head>
<body>
  <p>Look what I've <em>got for ya!</em></p>
  <p>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li><em>this looks abnormal</em></li>
      <li>item 5</li>
    </ul>
  <p>
</body>
</html>

And this will render

Look how the emphasis at the top is normal but the one in the ‘ul’ is enlarged. There is another similar selector called the child selector. It works similar to descendant selector but demands the child to be DIRECT descendant of the parent. For example, p > a { color: green; } will cause only the anchors directly children to any paragraph to look green. These are the various selectors that you would see and probably use when dealing with web applications. Simple enough, aren’t they?

<div> and <span>

Although div and span are html tags, any modern web application that you will write will heavily make use of these to group sections of the web page together. You might be familiar with the layouts of most websites these days, with a header on top, one or two column in the center with content and other options, and a footer at the bottom. Even on my blog, you’ll notice these three things. How are they made, and how to make them look so distinct that on the first glance, your visitors know what their purpose is. The answer lies in making proper divs and adding appropriate CSS to it. Div is a block element, which means that it is used to style multiple elements at once. Span, on the other hand, is inline, that is, it is used to style little chunks of content.

I will write the 4 sections of a website I mentioned earlier, using divs. Read the code and you would understand what is happening.

<!DOCTYPE html>
<html>
<head>
  <title>Testing</title>
  <style>
    * {
      text-align: center 
    }
    #header {
      background-color: red
      height: 50px
    }
    #container {
      width: auto
      margin: 0 auto
    }
    #body {
      width: 75%
      float: left
      background-color: grey
    }
    #side {
      width: 25%
      float: right
      background-color: blue
    }
    #footer {
      background-color: green
    }
  </style>
</head>
<body>
  <div id="header"><h3>Header Text</h3></div>
  <div id="container">
    <div id="body"><p>Content goes here</p></div>
    <div id="side"><p>Sidebar</p></div>
  </div>
  <div id="footer"><p>Copyrights</p></div>
</body>
</html>

This sure looks beautiful, doesn’t it?

This completes the CSS syntax part. I did mention that you can write all your CSS in a file.css and include them in your document head with <link href="/assets/style.css" rel="stylesheet"> so that it is easier to maintain the code. There is yet another way to add CSS, which makes use of @import syntax. It is better avoided for the linked reasons.

Now that you are well equipped with the necessary things to learn some actual and practical CSS, you must be really excited to read from w3schools. It is a great site to begin, and since it comes on top each time you search for anything related to CSS (or web programming, for that matter), you may use it as your sole reference guide. Nothing bad, but keep in mind that after leaving your nutshell, you should avoid that site, and start using some reputed docs instead, like the ones from Mozilla.

CSS Frameworks

To speed up the development process, you might want to check out some libraries out there that would ease your life. One of the best is Bootstrap. It would enable you to do rapid development, with minimal typing. Bootstrap comes with jQuery, a Javascript library which also helps a lot dealing with web application stuff you are about to deal with. There is not much point reading the official docs if you only want to get the work done. Instead, I would suggest you to Google out things, pick up code on the way, keep going. That is exactly how I used to do stuff back then, when I hated to write CSS and HTML. Bad advice, but gets the job done most of the times.

Outro

CSS is amazing. Web is amazing. Today is a time when you either have to love the web, or keep fighting a losing battle convincing yourself that you don’t need it. Either way, knowing a thing or two about how the web pages that you spend more than half of your time on, are styled, is always a plus. As always, for anything, the comment box is always there. Corrections, please. Liked the article? Suggest it to your friends! Thank you for reading.

Birthday Week

Here it comes, finally, my birthday. Not that it is something new this time, but surely one of the special ones because I passed another decade here on Earth. Last time this happened, I didn’t realize how important it was, maybe because I was just 10 back then. But this time, it would be different. I realized I have moved around the Sun 20 times now, which is amazing, because I have travelled around 18.8 trillion kilometers, since my birth, relative to the sun. That is a lot.

On 3rd of October this year, I will have lived some 7305 days which comes to about 613 million seconds. Woah! Good going. I travel a lot, and almost all of it is from and to my college. My college is 61 kilometers from home, and I am into it for the last 2 and a half years. Considering a usual semester to be of 3 months (which is lower bound for most semesters) and a usual month to have 22 working days, in the last 5 semesters I have travelled around 40,260 kilometers; a little more than the circumference of the earth at the equator. I wish I had had the fortune to visit another country or even distant parts of my own, but that’s all right.

20 years is a lot of time. From a pilot, to astronaut, to a star gazer and now a computer guy who talks code and science. My ambitions never ceased to motivate me. There have been some really nice moments, like getting into an engineering college, getting a personal computer and a mobile phone, good friends who love food and all. I was fortunate enough to be born in a family where I get all that I needed, to do things that I love, because what I am looking at is 20% of poverty in India

Also, I am sharing my birthday with Free Software Foundation and GNU project. They have turned 30 this year, which is cool. RMS would be real proud at where his initiative has reached today. I would like all of the people reading this to hit the link once and read about GNU and it’s philosophy. I feel they are amazing people, and their contributions to the community, especially.

[ Celebrate 30 years of GNU! ]

You Are Insignificant

I have a lot to write at this point, so much that I am not even sure where to start. Humans are such wonderful creatures, we make things happen, world spin, or at least believe it to be that way. We have a self-imagined feeling of superiority. We are desperate to feel important, to feel blessed, to feel we have some purpose in life, and no one has to right to point at the way you walk on the face of this planet. We humans are so vulnerable.

Life goes up and down all the time, with just about everyone. We all have bad times, spend some days talking about it, and then everything gets back to normal. Now the interesting part comes when you have a logical mind. I judge myself and the decisions I take. It just turned out, when you’re sad, it is not that the day is a little too gloomy, or that the trees are all looking down, or that the world is a little too quite. It is just that you’re sad. That’s it. Done. No one, other that your little brain in there, feels a damn thing. The world is a pretty large place. The Universe, a little larger. You, me, we are too small. No one cares about you, or your thoughts, let alone the Universe as a whole. You only matter if you can make money, and that is very temporary, only applicable on earth. So basically, you are worth a rock floating in space, even less.

I see people crying over little things, things so little that it almost feels a shame to cry over. You can’t ask people to live according to you, of course not. What you can really ask is to show a little respect to the 3.5 billion years of evolution, that they are at the front of right now. Life wasn’t easy. From the hot geysers, to the half dozen catastrophic disasters that shock everything on our little planet. Life made it through them, and for every specie that you see today, at least 1000 have perished, and then you tell me that this guy is trying to ignore you and you are feeling left out. Come on people, don’t be that weak. We are a race that has been here from quite some time. The end might be near somewhere, in the next 100 or 1000 years, if we stop thinking about our individual existence and our special place in this Universe we might make it out to a few thousand years. And unless we move to some other world before that, there is not much probability that we can save us from ourselves. World would completely reset itself, and your current values would be deep buried inside some fossils down the surface. The sun would expand into a red super giant and eat up the earth’s atmosphere. Our galaxy Milky Way would collide with it’s sister galaxy Andromeda. Artistic fiery show of stars and nebulas it would be, for some other civilization far way just opening their eyes to the Universe. The sun would soon die, and there would only be darkness after that, for eternity. No one, yes, NO ONE, would ever know how much you struggled when you existed for those 60 years in that entire 11 billion years of solar system’s history.

So shall we begin the discussion about your life’s struggles now?