PiSquare - Responsive and Search Optimized Blogger Template

A template plays a very important role in the exposure of your blog on the web and major search engines, if your blog is lacking search visibility then it obviously needs improvement in it's structure and design.

Get it Live Preview

PiSquare Blogger template is a clean and minimalist Blogger template with a lot of customization options like color scheme editor and header image customization.

It is a responsive blogger template which means you don't have to switch between mobile and desktop template to view your blog on mobile phones and tablets or any small device.

Features

You will be able to experience the feature of the templates only when you install it on your own blog and have the full access to customize it according to your needs but let us tell you a few features of this template

RWD: Responsive Web Design

As already discussed, Responsive Web Design let's your blog display on mobile devices without having to scroll horizontally or zoom in or out to view the content properly. The columns automatically adjusts itself to fit the view port and provide the reader a seamless experience.

Search Engine Optimized

As always we make a template one thing in mind and that is to make it comply with all the search engines with proper methods and techniques. The template is search optimized which means your blog's content will appear on search engines in a well manner which might increase traffic to your blog.

Insanely Fast

Being fast is one of the most important aspects of SEO, if your blog isn't fast and it takes time to load then it's a disaster and search engines might not give you any priority even though you have great content. PiSquare uses techniques that loads the most important part and resources first and then the rest.

These are some of the major features of the template, other visual and customization features are on the following list:

1. Color Scheme Customization: Change the default color scheme to anything you like in the Blogger's Template Editor, under "Advanced" option (listed in the documentation)
2. Video and Image Post Summary: The template displays your posts as summaries with a big image or video from the post and a short text snippet. 
3. Responsive Videos: If you post videos on your blog then you might want to make them responsive too, well we have got you covered! Make videos responsive as you like (listed in the documentation)
4. Pre-added Sharing Button: Sharing buttons of the major social sites are already present on the blog posts so that users can share your content easily. 

This Template is For ?

This template is multi-purpose Blogger template which means you can use it for any niche or topic. Travel, Cooking, Sport, Video Blogger, Photography or anything you can think of. With a little customization you can personalize the template to make it fit your blog.

Buy or Download for Free

You can either buy or download the template for free from MasTemplate.com. The premium version costs only $10 and you can get support and free updates with the ability to use the template without the the attribution in the footer.

Google Code Project Hosting Is Going Away

Google Code, a project hosting service that Google started in 2006 has finally came to its end. Google Code is now closed for open projects and all the projects will become read-only in August 2015 and finally the website would be shut down early next year as they stated in their email.

Google took this hard but important decision as there are even better project hosting services available like GitHub, SourceForge etc. And it doesn't even feel like Google worked on it to make it better, it is just simply functioning and can host projects and no extra features that other services provide and probably that's the reason they've decided to shut it down next year.

There are more than a million projects being hosted on the website by hundreds of thousands of users, now that it is going to die all the projects must be transferred to another Project hosting service. Many projects on Google Code hasn't been touched in years, and that's the case with most of the projects, as people opt-in to better alternatives and never looked back.

How Does That Affect Me

If you are a developer then you know what to do next, so I would just skip this for you.

And if you are not, then you probably might own a website, a blog or a web app. There is a chance with Blogger platform that you have had added a plugin for example a "Related Post Widget" and its source code is being hosted on Google Code, and that's where you are linking to get the source code.

There wouldn't be any difference until next year when they shut it down completely and no data will be available.

What Must I Do As A Blog Owner

If you are a kind of blogger blog owner who loves adding a lot of third-party widgets and features from "vague" sources then you probably have got a reason to worry. 

All you have to do is make a list of third-party widgets and functions you have stuffed in your blog and contact the original authors of the widget and ask them if the users are safe or not, and are they hosting and hotlinking to Google Code for the source codes. Hotlinking is the term for direct linking to files on a destination, here Google Code, which is going to be shut down next year.

What if I Fail

Oh no! Don't worry though, there wouldn't be any "zombie apocalypse", if your site's functionality relied on Google Code then only those specific things will stop working, only in rare cases it might break the whole website, only in RARE cases.

Farewell, Google Code 

So Google Code, good bye. 

Remote Debugging Intex Cloud Fx. (Firefox OS) using ADB and WebIDE on Firefox

Recently Mozilla's Firefox OS came to India with the brands Intex and Spice. If you are a developer and trying to test apps or debug your phone using ADB then you might have had a hard time. The official tutorial on Mozilla Developer Network just have listed the basic steps, but to make our Intex device work we need to get our hands somewhat dirty in code.

This guide is meant for Windows users only. Alternatively you can use the vendor ID for the Intex Device if you are on another system and just need the vendor ID.


Before we start, we need to have the following things:

1. ADB and Fastboot - ADB is included in the official Android SDK, but it is about 800mb, and for one simple application downloading the whole heavy SDK wouldn't be a nice idea. So download this 15 Seconds ADB Installer from the link and install on your system.
   
2. Mozilla Firefox 35+ - Currently Mozilla Firefox 35+ is a Nightly Build. But if you don't want to download an 80mb thing again, you can alternatively use the latest Mozilla Firefox which has the App Manager.
   
3. ADB Helper Addon - Install the ADB Helper on your Mozilla Browser.

For now we just need these two things in order to get start. 

You need to learn a little bit about using Windows Command Line and ADB. If you know about how to use them you are all set to go!

Connect Your Device

Connecting your device is more than just plugging the USB cable. We need to make some changes on our device so it works without any problem.

Disable Screen Lock

If you have screen lock enable on your device, simply disable it by going to  Settings > Screen Lock (Under "Privacy and Settings")

Enable Remote Debugging

Disable USB Storage in your devices' settings before you enable remote debugging.

Now you need to enable remote debugging in the settings of your phone. Go to Settings >  Device Information > More Information > Developer > And under "Remote Debugging" choose "ADB and Devtools"

We Need USB Drivers for our Device

For ADB to detect our device Intex Cloud Fx. it needs its OEM USB Driers, but the problem is that Intex doesn't provide it, so bad.

But we have got a workaround. By specifying the vendor ID in the adb_usb.ini file in the ADB application directory we can get our device connected to ADB. Here's how:

The vendor ID of our Intex Cloud Fx. Device: 0x1782

Download this file: adb_usb.ini (Dropbox) 

Where to save it? C:// drive > Users > {username} > .android > Paste the adb_usb.ini file there.

Start ADB

Open the "RUN" window by pressing 

Window + R then type "cmd" and hit enter to open the command prompt window.

Now you must connect your device using an USB cable with all the settings mentioned above.

We are now ready to see if the devices is connected to ADB or not. Run the following command and see what it returns:

adb devices

If successful it will show something like:

If not, then you must try unplugging and then plugging the USB cable. Also try it on different USB ports too and check if you have done everything mentioned in the "Connect Your Device" section above.

Now we need to tell ADB to forward the port to the WebIDE or App Manager on Firefox browser to actually get started with debugging. To do that run this command:

adb forward tcp:6000 localfilesystem:/data/local/debugger-socket

You are done! Continue to the final step.

Open Firefox Browser (with either App Manager or WebIDE)

First let's clear the confusion between App Manager and WebIDE, on Firefox 33 and prior App Manager is the default app to manage and debug apps on Firefox OS, and in later version WebIDE replaced the App Manager.

See:
    WebIDE Documentation
    Using the App Manager

I am going to provide instructions for both application. The overall functionality of both the apps are similar, except for that WebIDE is newer it has more updates than the previous App Manager,

Connecting your device with WebIDE

Open your Firefox browser. Go to Tools > Web Developer > WebIDE or simply hit Shift + F8.

Now in the WebIDE Interface, click on the dropdown on the right that says "Select Runtime", if you can see "Cloud Fx." under the USB Devices, then simply click on it and it will get connect.

Else click on "Remote Runtine" and enter the port as localhost:6000 and the WebIDE will be connected to the device. If it succeeds the icon will turn blue and you can access the apps in your devices on the left pane of the user interface.

Now you can debug apps, install your own apps on the device remotely.

Connecting with App Manager

The process is pretty much the same. Connect your device with the adb command prompt first. Then open Firefox browser.

Go to Tools > Web Developer > App Manager 

At the bottom of the screen, you will see the device id in the list of connections available. Click on it and the device will be connected to the app manager.

When connected you will see something similar to this:

Yay! We are done. Now debug the way you want, but just don't damage your phone ;)

Fun things to do!

You can debug system apps like Gallery, Camera etc. And you can edit the HTML, CSS or JS of those apps live and can see the result on the device screen.

If you know HTML/CSS/JS you can really have fun tweaking things on your device. That wouldn't be permanent, as once you close and re-open it will go into its original state.

But you can create your own apps and install it on the phone. 

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