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

Coding Interview Questions Set 1

From this article, I will be sharing with you all a series of articles on coding interview questions. So please stay connected for the latest set of questions. It will be a good brainstorming exercise and will also prepare you for coding interviews and will definitely boost your confidence. So let's start, 1)Reverse of a string with only O(1) extra memory. Solution: var reverse = function(string) { let result = '' for(let i= string.length -1; i >= 0; i--){ result += string[i]; } return result; }; 2)Fizz Buzz: Write a program that will accept a number n and will output number till n but for multiples of three it should output “Fizz” instead of the number and for the multiples of five output “Buzz”. For numbers which are multiples of both three and five output “FizzBuzz”. Solution: var fizzBuzz= function(n) { const arr=[] for(i=1; i<=n; i++){ ...

JavaScript: Debouncing | Flipkart UI Interview Question.

To understand this programming practice will go with a quick example. We all do online shopping and we do search for products on Flipkart on the search bar. So when we type on search bar i.e on every keypress we are actually giving API requests to the server, which in response gives us suggestions. Actually, it's a time-consuming task and may degrade the performance of the webpage. So to improve the performance we use debounce function which actually acts as a controller which reduces the API request to the server on keypress event. In simple terms, we are giving API request only after a certain amount of time between two keypress events. A debounce is a higher-order function. Higher-order function: A function that returns another function. Let's dive deep: HTML Code: <input type="text" onkeyup="searchProducts()"/> Consider this as a search bar for Flipkart. On any keypress, we are calling searchProducts() function. Javascri...

Node.js: Bundling your Node.js application to single executable for Windows.

In this article, we will see how to bundle Node.js application to a single executable for Windows. What's the need? Well recently, I had taken a work where I needed to convert pdf's(Of similar format) to excel sheet. So I was reading the pdf's from a folder in desktop and I was storing the output excel sheet into a separate folder on the desktop. I used Node.js for the program. Now the client wanted it to install the program on 25 windows machine and his budget was really low. So it was also not possible for me to install node.js for 25 machines and then install the required dependency for each one. One of the solution: While I was searching for an easy solution I found this amazing npm module pkg . This module can make your node.js app work like plug and play type. No need to install Node.js on the client machine or any other dependency. It helps to make a commercial or trial version of your node.js application without exposing the source code. I found ...

Explore Learn and Grow

Search This Blog