How To Add A Countdown Timer To Your Blogger Site

Countdown timers can be very effective in terms of getting user engagement. It could be for an event, a sale or simply a New Year countdown. But can you add it in a Blogger/Blogspot site? You most certainly can. You can add it as an HTML/JavaScript gadget. Just follow the below easy steps to add a beautiful, animated timer in just about 5 minutes.

1. In your Blogger dashboard, go the option ‘Layout’ in the sidebar.
2. You’ll see your blog’s layout. Click ‘Add a Gadget’ wherever you want to add the countdown timer.
3. You’ll see a list of available gadgets. Choose ‘HTML/JavaScript’.
4. Now, you can generate a script from any ‘timer’ service and add it there.
   There are many such awesome platforms out there that can be used for free. One such app is MotionMail. It’s generally used for adding a countdown timer in emails but can be just as well used on websites/blogs.
5. Once you sign up on MotionMail, you can create a timer from four different design options. You can add the details like timer end time, timezone etc. and apply design customizations like text colour, background colour etc. and simply save the changes to create the timer.
   
6. After saving the timer, you’ll get a screen like below. Click on ‘Copy’.
   

7. Paste it in the ‘Content’ field as we have in step 3 and click on ‘Save’.
   

I added this gadget in the footer area and as you can see in the screenshot below, we have the countdown timer appeared and working.

I added this timer only for the demo. You can make better, more relevant design enhancements like transparent background, blog theme colours etc.

Happy blogging!

How To Add Facebook Like Box Into Blogger Blog 2017

Many other blog posts on adding a Facebook likebox on Blogger have become outdated since, earlier, like box plugin was used for this purpose but now it has been deprecated by Facebook.

Let's see how we can add a Facebook like box widget as in the below image on Blogger blog page.

Step-1: 

Head over to Facebook's Page Plugin docs → https://developers.facebook.com/docs/plugins/page-plugin.

Step-2: 

Enter your Facebook page URL as asked on that page. You'll get the preview of how your like box will look as shown in the image below.

If the preview doesn't show up, it means that your page is not published yet. In that case, head over to your Facebook page and publish it first.

Step-3:

By default, the box shows the page's posts too. Now, many of us including me wouldn't want that. So for that just remove the value 'timeline' from the field 'Tabs' and let it be blank.

Step-4:

Next click on the button 'Get Code' right below the preview. You'll get a popup as shown below.

There are two tabs at the top. Click on 'IFrame'.

Copy the code in the IFrame tab.

Step-5:

Now you need to paste the code wherever you want the like box to appear. 

For that, go to your Blogger dashboard and click on Layout option in the sidebar. There, click on 'Add a Gadget' where you want the box to appear.

I want it in my right sidebar so I click on the option there as seen below.

Step-6:

Click on the gadget HTML/JavaScript.
Add your code in the 'Content' box and the 'Title' field blank.

Step-7:

Click on Save. Then click on Save Arrangement button in the top right corner.

And, you're done! Your blog now has a Facebook like box of your page.

Wanna go a step ahead and add a Facebook Like button too for each of your posts?
I have done that for my blog and have written about it too here,
How To Add A Facebook Like Button To Each Blogger Post

You can do a similar thing with Twitter by adding 'Click to tweet' links which I've covered here, How To Add A Click To Tweet Link To Your Blog Or Website

What Google's Co-Founder Sergey Brin's Resume Looked Like

Ever wondered what Google's Co-Founder's resume might have looked like? Well, here's how Sergey Brin's resume looked like during his Ph. D. days.

Quoting from the source,

Sergey Brin

Computer Science Department,
Stanford University,
Stanford, CA 94305
(415)723-9273
sergey@cs.stanford.edu

---

Education

September 1993 - Present: Stanford University, Computer Science Department

Ph.D.: expected June 1997.
M.S.: received August 1995.
Advisor: Professor Hector Garcia-Molina.

September 1990 - May 1993: University of Maryland

B.S. in Mathematics and Computer Science. Graduated with high honors in Mathematics and honors in Computer Science.

---

Publications

"Near Neighbor Search in Large Metric Spaces", S.Brin, Proceeding of Very Large Data Bases (VLDB) 1995. (html)

"Copy Detection Mechanisms for Digital Documents", S. Brin, J. Davis, H. Garcia-Molina, ACM SIGMOD 1995. (html)

---

Research Projects

GNAT's

This project involved indexing multidimensional data for near-neighbor searches. The kind of applications I envision are identity comparisons, information finding, molecular biology, ... A paper (html) appeared inVLDB '95. Different versions of the data structure were implemented using Mathematica, C, and finally C++.

COPS

I worked on a project with Hector Garcia-Molina involving automated detection of copyright violations. Together with James Davis (another Ph.D. student here), we developed COPS, the COpyright Protection System. The paper (html) appeared in SIGMOD '95.

---

Current Research Directions and Hacks

Movie Ratings

A new project I have just started is going to generate personalized movie ratings for users. The way it works is as follows. You rate the movies you have seen. Then the system finds other users with similar tastes to extrapolate how much the you will like some other movies. It is currently written entirely in Python.

LaTeX to HTML Converter

I've been hacking on a LaTeX to HTML converter which was used to generate the HTML versions of the papers above. It is unique in that it is in written mostly TeX and hence is a somewhat more elegant design than other converters. A small portion of it is written in Perl.

---

Work Experience

Summer 1993: Wolfram Research

I developed a code analysis and extraction tool for the Mathematica source code.

September 1992 - May 1993: University of Maryland Systems Design and Analysis Group

At SDAG, I developed algorithms for scheduling in real time systems. This involved finding approximations for NP-complete problems. Additionally, I worked on profiling tools for real time systems.

Summer 1991 and Summer 1992: General Electric Information Services

In 1991, I developed a macro language library which could be embedded into any application. This was important for GEIS because it demonstrated the use of C++ to them. The following summer I developed a graphical front end for a file transfer program using C++

December 1991 - June 1992: Mathematics Department

Dr. Goldman is in the Mathematics Dept. at the University of Maryland and works in the fields of geometry and topology. I worked with him to develop a portable C++ library for the visualization of objects in non-Euclidean geometries.

June 1990 - June 1991: University of Maryland Institute for Advanced Computer Studies

I developed and implemented of parallel algorithms for image processing. These included connected component analysis, image smoothing, and image enhancement. Additionally, I developed parallel 3-D graphics routines suitable for a flight simulator. Both projects were implemented using C/PARIS and C* (6.0+) on a Connection Machine 2 with 16384 processors.

---

Interesting isn't it?

I'll tell you another interesting thing that you might not have noticed.
If you look at the HTML source code, you'll find the following block commented out:

<!--<H4>Objective:</H4>
A large office, good pay, and very little work.
Frequent expense-account trips to exotic lands would be a plus.-->

Well he did get all of that, didn't he?

Source: http://infolab.stanford.edu/~sergey/resume.html

How To Embed A Google Form On Your Website

Sometimes we get stuck at stupid things and it never hurts to get a quick solution rather than trying to figure out on your own.

"How To Embed A Google Form On Your Website" was one of them for me.
Unfortunately, I didn't find any such quick solution. All the top related posts were based on old format of Google Drive. For a second I thought, 'Could it be that Google has removed this feature?'.

But ultimately, I did discover it, and it's pretty darn simple.

So,

Here's what it looks like when you go on to create a new form.

Now, once you're done with crafting your Google form, just click on that SEND button in the top-right corner. A popup like the the one shown below will appear.

Now, to embed the form on your blog or website, click on the third '< >' option next to 'Send via'.
It will be something like this.

Now simply copy and paste the code wherever you wish to embed the form.

Building apps using React Native App Generator

React Native has been around for quite a while now and is gaining huge popularity within the developer community since its launch by Facebook in March 2015 having received 5629 commits  and 30,206 stars on their Github repo in such a small span.

Those who are not or little familiar with it, React Native is a framework for building native apps using React and Javascript.

The best parts about it,

• JavaScript to build native apps
  React Native has JavaScript running in a background thread which prevents the UI from hanging and makes coding easy for JavaScript developers.
  Ultimately, it gives you the user experience of the native mobile platforms, along with the developer experience of building on the web.
  All operations between the JavaScript application code and the native platform are performed asynchronously. Hence, React Native apps are naturally fluid and responsive.
• Native all over
  Unlike PhoneGap, which has webview instead of native UI making it slow, everything about React Native is very much native, native components, native views, native modules, native everything. You can update your UI effortlessly.
  All of that with no compromise in performance because as we pointed out, there is JavaScript running on a separate thread.
• No trouble of compiling again and again
  With React Native, you don’t need to compile every time you make a change. It’s just as simple as you code in the browser; save and reload.

After our amazing experience of working with React, we were more than excited to try our hands on React Native, which led us to build Native Starter Pro, a single Javascript code based iOS and Android starter kit over React Native.

Following the awesome feedback we got from its users, we were inspired to add more to it and that, brought React Native App Generator into existence.

React Native App Generator

The app generator generates apps on the layout of Native Starter Pro in five simple steps.
You choose your colours, app name, a logo, an awesome splash screen, build your menu.
And you're good to go. You can download your app and you'll receive the generated app's source code in your Inbox then and there.

The app generator is free for Native Starter Pro users.
What could be a better head start for your project?

You can take a better look at its features on its official product page on StrapMobile.

You can also analyze the workflow of React Native App Generator even if you're not a user of Native Starter Pro.

We really appreciate feedbacks, so do tell us what you think of it. 
Originally posted on LinkedIn.

2016 Web Design Trends: Will HTTP/2 Rule?

In simplest words, as put by Wikipedia, HTTP/2 is the second major version of the HTTP network protocol.

Earlier, in February 2015, Google had announced that they plan to remove support for SPDY in early 2016 and strongly encourage server developers to move to HTTP/2 and ALPN.

Now,

What does HTTP/2 has to offer?

In a nutshell, better speed, better security, better UX.

In a little detail, Akamai puts the benefits of HTTP/2 pretty well.

Multiplexing and concurrency: Several requests can be sent in rapid succession on the same TCP connection, and responses can be received out of order — eliminating the need for multiple connections between the client and the server

Stream dependencies: the client can indicate to the server which of the resources are more important
than the others

Header compression: HTTP header size is drastically reduced

Server push: The server can send resources the client has not yet requested

You will not need to change your websites or applications to ensure they continue to work properly. Not only will your application code and HTTP APIs continue to work uninterrupted, but your application will also likely perform better and consume fewer resources on both client and server.

Take A Demo

The Akamai Demo demonstrates the loading of their Akamai Spinning Globe via HTTP/1 and HTTP/2. The difference is actually amazing to see.

 Moreover, you can head over to loadimpact to check the impact on your website; in fact any website.

Check it out, here.

There has to be some shortcoming

There are few who don’t seem much impressed.

Author of Varnish, Poul-Henning Kamp, feels that HTTP/2.0 is really just a grandiose name for HTTP/1.2: An attempt to smooth out some sharp corners, to save a bit of bandwidth, but not get anywhere near all the architectural problems of HTTP/1.1 and to preserve faithfully its heritage of badly thought out sedimentary hacks.

Perhaps it would be too soon to make any predictions. Let’s see how it rolls out.

Will HTTP/2 replace HTTP/1.x?

As IETF HTTP Working Group answered in the HTTP/2 FAQ section, the goal of the Working Group is that typical uses of HTTP/1.x can use HTTP/2 and see some benefit. Having said that, we can’t force the world to migrate, and because of the way that people deploy proxies and servers, HTTP/1.x is likely to still be in use for quite some time.

Known Implementations of HTTP/2

You can view the known implementations of HTTP/2 so far, on HTTP/2 wiki.

Know More

This is a detailed document written by Daniel Stenberg describing HTTP/2 (RFC 7540), the background, concepts, protocol and something about existing implementations and what the future might hold.

9 Basic Tips To Make Your Website Actually Stand Out [Infographic]

Web Design is really not a tough game to play. Mostly it is little things that matter huge.
All you need to do is think from the user's perspective.

The following Infographic from Nicole's Classes covers it very well in 9 simple steps.