Confirm Friend Request on Facebook All At Once

Popular on Facebook? So you have got 100s of friend requests pending on your Facebook profile, confirming them one by one can be a pain. This small block of JavaScript code can save you time and energy.


Before we start I want to tell you that it's not guaranteed this code might work in the future. If Facebook's website structure changes, there's a possibility that this code might become obsolete, but that doesn't mean you can use a script to do that, we will work on a new script and update it on the blog.

Last Tested: 28 September 2014 (Works)

But for now this code must work perfectly for confirming all the friends request at once. Login to your Facebook profile and go to the friend requests page where you can view your pending friends requests, use either Mozilla Firefox or Google Chrome or Safari.

Keep showing up more friend requests pending by clicking on "Show more" button until you reach the end.

The Magic Charm (JavaScript Code)

var confirmBtns = document.getElementsByTagName('button');
for (var i = 0; i < confirmBtns.length; i++) {
    if (confirmBtns[i].innerHTML == "Confirm") {
        confirmBtns[i].click();
    }
}

Copy the JavaScript code

Now Run The Code

We assume you have the code snippet on your clipboard, copied. Now you need make use of the developer tools in the browser.

Developer tools are small set of tools use to debug web sites. To learn more about using developer tools see - How to open developer tools.

To open Developer Console

Press CTRL+SHIFT+J (for Chrome), CTRL+SHIFT+K (for FireFox) to open the JavaScript Console.

Paste the code in the console and press enter to run the code. If done correctly your pending friend requests will get confirmed one by one in a matter of seconds.

Note: Facebook might show up a big warning message to do not copy-paste codes and tell you it might be scam and yes never ever run suspicious or codes not from trusted sources in the console, the scripts can do malicious things on your Facebook account. 

Easiest Way To Use WhatsApp on PC

Using WhatsApp on PC has been really a hot topic, one obvious answer is to use an Android emulator and then use WhatsApp, but it has its own difficulties. I will show an easy way to use WhatsApp on PC or even Mac.

I don't usually write about such things on my blog, but the method I am using is closely related to one thing I love the most, and that's web technologies.

The most popular method and the only one known to be legit is using the Bluestack Android Emulator, then download WhatsApp and use it, but getting Bluestack to work on your system is a challenge in itself, and if you have a system with old graphics card or low memory then you have no chance of getting it work!

UPDATE: WhatsApp launched WhatsApp Web a while back, and it now also launched Windows and Mac OS version of WhatsApp, download WhatsApp for Windows and Mac. You can continue with this tutorial for learning purpose :)

How? Let's get this started!

Let's first compare the size of things you need to download to get started with using Whatsapp on PC:

BlueStack Method : 103MB (Bluestack Download) + 40MB (Whatsapp Download) =  143MB
Firefox Method : 87MB (Firefox OS Simulator Download) + 38MB (Firefox Browser Download) + 3MB (ConnectA2 App) = 128MB, and no need to download Firefox if you already have Firefox > 32 (latest version)

We will move ahead step by step, as even this isn't easy, just require proper concentration on what you are doing.

1. Download Mozilla FireFox 32+

If you already have the latest version of FireFox then skip this step, else go to http://www.mozilla.org/firefox and download and install the latest version of Firefox on your computer.

2. Installing Firefox OS Simulator

Using your Firefox browser, go to the following URL https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/ and install Firefox OS 2.0 or the latest stable release (note: downloading older version might not work properly.)

Running Firefox OS Simulator

We are halfway down there! If you have successfully passed the previous steps then bravo, the next steps are really easy.

In Firefox, open the App Manager from Tools -> Web Developer -> App Manager 

Now start the Emulator by click on the blue "Start Emulator" button at the bottom menu

You are now ready.. select the Firefox OS 2.0 or any version of emulator you have installed and a new window might open:

Installing ConnectA2

Whoa! See you are using a mobile OS, that's the fun of Firefox OS simulator. Unlock the lock screen and use it the way you would use any other smartphone OS.

You would need ConnectA2 app to use WhatsApp, so open the Firefox App Marketplace

After it's downloaded, open it and enter your country and phone number, you will be sent an SMS for verification. Enter the code and you are ready to use it!

To add new contacts in your chat list you first have to add that contact in the Contacts list on the Firefox OS. Use the Contacts app to add contacts and then you can simply add them in your WhatsApp.

If you didn't understanding some or not working, you can leave your comments and we will try to solve the problem. Enjoy using WhatsApp on your PC now.

Fun With The Developer Console: Styling Console Output

This post is for people who are familiar with the Webkit JavaScript console you find in Chrome and Safari browser. Did you know you can do a lot more with the console than just logging output ?

Console is a great tool for any developer to debug web sites and apps. But did you know you can even style your output with CSS ? Nope ?

Okay, so copy the following code and run it in the console (CTRL + Shift + J)

console.log("%cSee, you can style me!", "font-size:6em; color:#60B660; border:1px solid #eee; font-family:'Open Sans', Arial, sans-serif; text-transform:uppercase;");

See! It is that easy. With a few more parameters in console.log() you can get a style output of the text you pass in as the first parameter with prefix of %c . You pass regular CSS styles in the second parameter to style the output.

If you want to style multiple parts of the string you are outputting, you can do this:

console.log("%cLarge Text!  %cSmall Text", "font-size:52px;", "font-size:12px;")

So here we have two %c, to style them differently we need to pass two different strings with the CSS styles to apply on the corresponding part of the string. For more details check the docs on Chrome developer site

A Little More fun

Using this feature of the Webkit Developer tools, I wrote a JavaScript code which does magic on your console ;) Want to see what? Check out this pen (http://codepen.io/depy/pen/uxdpw) and open your developer console.

I Am Back!

It's been more than 6 month since I have posted [anything worth reading] on my blog. So I am making a comeback.

Going to give this blog and makeover and will be posting new and interesting stuffs soon, everything from codes to coffee  ;)

Stay tuned! New adventures are coming soon.. 

Is Your Facebook Down ? You're not alone!

Facebook, the second largest website on the internet has suddenly stopped working everywhere!

Update: It is up now
Millions of (almost everyone who uses FB on a daily basis) people encountered error while trying to access the Facebook website. None of the pages is accessible.

It shows the following page (Facebook's current status) :

Sorry, something went wrong
We're working on getting this fixed as soon as we can

This  is all Facebook has for the users now, no technical details about the errors are out yet. Plus there has been no updates on when it will be fixed and Facebook will be accessible again.

Don't worry, no one is able to access Facebook for now, so use an alternative to connect to your friends and family.

What you can do:

1. Go out.. meet your friends in real, chat with them and click some photos and share it using bluetooth.
2. Use Twitter or Google+ to show your condolences for the sudden demise (temporary) of Facebook (#kidding huh!)
3. Remember the old days? We used Text Messaging!

What you can't:

1. Update your status about Facebook's error.

Some Twitter updates on #facebook

Facebook Took Action to Block Developer Tools - Know Why

If you recently tried accessing the developer tools in your browser on Facebook you might have noticed a large notification in the console highlighted in red. Well, that's for a reason, if you haven seen that scam/spam yet let's tell you more about it.

Developer Tools are great for debugging websites and running scripts manually on a web page, it could be done on any website including Facebook. By writing a script, the author can make anything do with the site on Facebook they can use it for sending friend requests, making comments etc. anything that is possible. Because all that functions are controlled by JavaScript onsite.



Taking advantage of these awesome feature of a browser, some notorious spammers have wrote a script which auto-tags people and like pages associated with them on their statuses where they post instruction to use their code they wrote by claiming that the user will get a new theme for their Facebook, which would seem to work but what it does in the background will terrify you.

The code would send unwanted likes to the pages the spammers wants, it will auto-tag your friends in 100s of status automated by the script and much more as they might even get access to your account. The spam have got amazingly viral as people do really think it's going to work and try it without giving it a thought.

How does it actually look ?

This is an example of well planned viral spam by some script kiddies originating probably from Indonesia.

The link they tell you to open contains the code which they ask you to run in the browser's console which then do what it is supposed to - screw you.

If you see any such things in the future don't let it make you look like a fool! Just block that person and you are good and safe.

Facebook Took An Action to Control it

By disabling developer tools temporarily. Developer Tools is a great tool for developers so they didn't disabled it permanently on their site, but it let's you choose what you want to do. And will also show you what could be the consequences of running scripts from Unknown sources.

Not all scripts are dangerous, for example see my "How to Select All Friends at Once on FB" script, it just automatically selects your friends for inviting them in events etc. But you can clearly understand from this that code can do things that you don't expect to be automated.

Beware before you run scripts from third-party sources especially from these so-called lucrative offers. And even though the script seems fine to you make sure to see what others say about it, what's their opinion to get an idea about it.

It's all, be safe online :) 

Making Images Fit in Post Body on Blogger

If you are working on a responsive design for your Blogger blog, or you are just tired of resizing your images in post editor to fit in the post container then this tutorial will show you an easy way to make images fit with it's surrounding.

This problem occurs often when you try to post images of the dimension larger than your content area or you are just using a responsive layout and when it down-sizes, the images overflows the content area.

Before you continue with the tutorial, check the demo:
Demo: Without the CSS Demo: With the CSS

In the first demo, the image in the container overflows because the width of the image is larger than that of the image, but in the second demo, if the image width is greater than the container's, it will fit itself to the container.

The Code!

All this can be achieved with a small block of CSS code. Before I start giving you lectures on how this works, here's the code for you to use (can be used in most Blogger Templates, but you might need to change the selectors if you are using a custom designed template):

.post-body img {
    max-width:100%;
    max-height:auto;
}

Now you just need to apply this code to your blog, check this tutorial to learn how add CSS in Blogger.

How does it work?

If you are not a web designer or coder, then this might all seem like a magical charm to you, but it's just code, code that's made to make your life easier. Well, so if you are ready to get bored then I am starting my chapter on CSS.

What actually does the magic is the max-width CSS property which gives any element a maximum width limit. So if you specify an element the the maximum width of 200px, it wouldn't exceed it. The 100% value tells the browser that the element(s) must not exceed the full content width of the container.

The max-height property helps in keeping the original proportion of the image intact. To know more about what would happen if you specify a value in percentage then try and check the results ;)