Top 10 most important things that every blog must have.2 min read

#Sarcasm

Hey amateur bloggers, here are some tips from the GOD of blogging – myself to increase your blog traffic 10000X fold.

Journey to becoming the blogging god wasn’t easy. But in my zero years of blogging and years of click baiting, I have learnt many things and helped thousands of people waste time and life on the internet.

I decided to take some time of my extremely, exceptionally, outstandingly busy schedule, to share the secrets to my success. Because as wise people say, sharing is caring and Ad revenue.

So today let’s talk about the top 10 things every blog in the whole of cosmos must have.

The 10 Must haves – Secrets Revealed.

  1. An idiot, who has plenty of time to search the web and click on stupid click bait titles like the one which you have just clicked.
  2. A title that would attract idiots like –
    • Top 10 must haves for every stupid person.
    • 99999999… (and counting) things your brain doesn’t tell you.
    • Why you should visit a psychiatrist today?
    • The ultimate guide to – maybe not being an idiot any more.
    • Signs you might be an idiot.
    • Why no one tells you – you are an idiot and why they should.
    • How I made an idiot out of you with just $0.
  3. Images with captions, so that the idiot can scroll through without reading much and move onto to the many click baits waiting below.
  4. Click on these links, buy those products and make me some money. I have successfully helped you spent your ten minutes, which you could have wasted on something completely useless like getting productive. Now pay me back.
  5. You’re still reading this?, OK congratz, you have earned exclusive access to my new eBook Exploiting Idiots for dummies (just $50) and a free subscription to my newsletter spam.
  6. Me– Well, that’s all folks. Now subscribe to my…Idiot– But it’s only been five points the title told te..Me– What?? Common dude, who really keeps count of these things? Now scroll down and view my new tutorial on The ultimate guide to eating a banana.

????

Creating a Javascript load more plugin part 2 – Searching2 min read

In the first part Creating a Javascript load more plugin part 1 , we have created a javascript plugin which loads data from an API page. Let’s build upon on it.

Today we are going to add search option to our plugin, children ? .

Objectives ?

  • Add search bar to the page.
  • On input on search bar, load in relevant content from the API.
  • The API should take in a search parameter and provide relevant results.

As of now we are sending two parameters to the API – start and count. We would add one more q for sending the search query.

For learning how add searching option at the server end, please refer this tutorial from Codecourse – Basic PHP & MySQL Searching.

It uses PHP and MYSQL but you get the idea ? .

Demo page – Javascript load more plugin – search added.

We have to add one more line to our previous HTML code to include the search bar.

We can add this anywhere inside our main container. Only condition is that it should have a class of finder, so that our plugin can identify it.

For styling HTML forms and form elements view this tutorial – Styling HTML Forms .

Updating the Plugin

Now let’s upgrade our plugin. First we would find the search bar.

If you are not able to follow, please go through part one of this series.

Now, inside our lmore.load method we would append the search term to the GET query string.

Let’s add and event listener to the search bar so that, data can be loaded while searching.

We could load data on any event, but I prefer the on-input event because it gives an instant search effect.

I don’t like search bars that have a button which has to be clicked to search. We are in 2016, common guys ( who make me click a button to search ? )  ?.

We could even pass the event, as input for the plugin.

You could also use this plugin to give search suggestions like google. Maybe we could use the plugin two times, one for suggestions and one for showing search results.

Comment below if you want to see this plugin give you search suggestions.

Javascript load more plugin6 min read

When searching the internet for a Javascript load more plugin, I came across a Jquery load more plugin tutorial in this youtube channel – Codecourse.

I highly recommend that the reader watch the Codecourse (formerly PHPacademy) tutorial and subscribe to their channel before continuing.

Link to the tutorial – Load More jQuery Plugin.

The tutorial was a really good and the plugin was very useful. But, with the aim of getting better at javascript and programming in general I tried to customize it.

So I decided to redo it in pure javascript. Here is how it went.

Demo link – Javascript load more plugin demo.

Please refer the above tutorial for creating a server side JSON API. The API would look like this Load more JSON API.

Now let’s get started with our plugin.

How to use?

Parameters

  • elem: The main container.
  • source: JSON API page.
  • count: Number of results to load per request.

HTML

The plugin requires an HTML template to work with and the template would look like this.

Elements included are

  • #cont – Main Container.
  • .rescont – Container where results have to be loaded.
  • .items – Container for .item
  • .item – Individual data container which would be cloned with each result set.
  • [data-field] – The value of this attribute would be matched with the keys in the JSON object and corresponding values would be filled.
  • .nores – The element to be shown when there are no results. .rescont would be hidden and .nores would be shown if there are no results.
  • .load_more – Button which on click would load more results.

JAVASCRIPT

The plugin would take 3 inputs as given in the usage section.

It would have two main functions

  1. load – A function to load data from the JSON API page using ajax.
  2. append – A function to append the loaded data to the DOM.

The plugin

Wrapper

Now we have to set the necessary properties.

Getting load more button and saving it and it’s display property

Cloning .item element and removing it from the DOM.

The load function

The append function

Function to set value of any element

Initial loading

Also setting event listener on load more button to load data on click

And finally the plugin is complete ????.

Download link – lmore.js.

Leave your suggestions below.