Skip to main content

JavaScript: Pill 1kB library.


This article is about Pill library which adds dynamic content loading to static sites
and makes content loading smooth for users and also at the end of this article, I have share  Interview Questions.

The development of Pill started with this tweet:
https://twitter.com/sitnikcode/status/1109626507331338240
Its size is 1kB when minified and gzipped.

Nowadays, everybody uses a single page application(SPA).
SPA is a web application where the page is loaded only once throughout
the session but the web components will keep loading as per the user action or the business process.
But for the static page's website, there is no need to use SPA.
We can use the traditional approach of multi-page application and for that purpose, Pill
library will be one of the good solutions.

It fetches the content of other HTML files on the server and replaces the current content with the new, fetched one which leads to massive performance improvements.
It does not request a whole new page, just the important content is replaced and this is done automatically.
Yuss, It uses AJAX internally.
Also, it is documented pretty well with a great example.
so make sure to check everything out.

Example Link: https://rumkin.github.io/pill/

Github Link: https://github.com/rumkin/pill/tree/master/example

Here are some of the Interview Questions that were asked to me for the position of Angular Developer(For those who don't know):

Interviewer: Why should we use Angular?
Ans: One of my answers was, we can make a single page application using angular.

Interviewer: So before Angular, it was not possible to make a SPA?
Ans: My answer was no. (Which was wrong. We can use AJAX to make an application to behave like SPA with rich user experience.)

Detail:
Before AJAX most web sites would round-trip to the server to reload the page on most interactions.
There were very few sites/applications that felt dynamic the way the web does today.
AJAX was one such technology that changes everything. It added a rich user experience.

AJAX: Is the method of exchanging data with a server and updating parts of a web page,
without reloading the entire page.

I hope you like this article.

Please do share your feedback in the comments section.
Subscribe this blog for more articles on Node.js and JavaScript.
You can also follow me on Twitter or Linkedin for the latest updates.

Written By:
Saurabh Joshi

Comments

Post a Comment

Popular posts from this blog

Globant part 1

 1)call,apply,bind example? Ans: a. call Method: The call method is used to call a function with a given this value and arguments provided individually. Javascript code: function greet(name) {   console.log(`Hello, ${name}! I am ${this.role}.`); } const person = {   role: 'developer' }; greet.call(person, 'Alice'); // Output: Hello, Alice! I am developer. In this example, call invokes the greet function with person as the this value and passes 'Alice' as an argument. b. apply Method: The apply method is similar to call, but it accepts arguments as an array. Javascript code: function introduce(language1, language2) {   console.log(`I can code in ${language1} and ${language2}. I am ${this.name}.`); } const coder = {   name: 'Bob' }; introduce.apply(coder, ['JavaScript', 'Python']); // Output: I can code in JavaScript and Python. I am Bob. Here, apply is used to invoke introduce with coder as this and an array ['JavaScript', 'Pyt...
Post a Comment
Read more

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som...
1 comment
Read more

CSS INTERVIEW QUESTIONS SET 2

  You make also like this CSS interview question set 1. Let's begin with set 2, 5)What is the difference between opacity 0 vs display none vs visibility hidden? Property           | occupies space | consumes clicks | +--------------------+----------------+-----------------+ | opacity: 0         |        yes      |        yes       | +--------------------+----------------+-----------------+ | visibility: hidden |        yes       |        no        | +--------------------+----------------+-----------------+ | display: none      |        no       |        no        | When we say it consumes click, that means it also consumes other pointer-events like onmousedown,onmousemove, etc. In e...
Post a Comment
Read more