DEV Community: Damanpreet Singh

npm ERR! Unexpected end of JSON input while parsing near...

Damanpreet Singh — Fri, 19 Nov 2021 05:37:17 +0000

Actual Behavior:

User tries to install npm packages using npm i, and gets an error message saying:

npm ERR! Unexpected end of JSON input while parsing near...

Possible Solutions:

Clear the npm cache:

npm cache clean --force

Try updating to the latest npm:

npm i npm@latest -g

Try deleting package-lock.json file. It keeps track of exact version of every package that is installed.

rm package-lock.json

Git: The common solutions.

Damanpreet Singh — Wed, 30 Dec 2020 16:54:54 +0000

I have been using git for quite some time now. It seems quite easy to use at first but as one keeps using it, one may face certain difficulties. Thankfully, Git provides solution for relatively common scenarios.

Scenario #1 :

Suppose, I've created a project that has use private or secret tokens. Obviously, I would not let my private token end up in the version control. So, I'll have to make sure the file is not accidentally added to the version control.
Also, I may have some files or directories that I don't want to add to the version control( eg - node_modules/ ). But these will keep there as untracked files.

Solution - GitIgnore

In order to handle the above scenario, git provides gitignore. It is basically a file that you create in your git repository to ignore some files and/or directories while committing.
Inside the git repository, create a file named .gitignore and in that file, add all the file names which you don't want to add to the version control. Once you have committed this file, the file or directory names in .gitignore will be ignored by git.

A .gitignore may look something like this -

It will ignore npm-debug.log, config.js, and node_modules/ directory. If you want to ignore all .js files within your repository, then you may add *.js in your .gitignore file.

Scenario #2 :

The workflow with git is something like this -

Clone a repository to local machine using git clone.
Make the required changes.
Commit files.
Push the files to remote location using git push

Seems simple isn't it? Well, it is simple but if there all multiple files, it will take a lot of time to clone. Further, if it has a lot of commit history, then the time consumed in cloning increases. For Example- If a repository has >4K commits, every git clone will fetch all of the commit history.

Solution - Git Shallow Clone

Let us talk about the above example. The repository has >4K commits. I may not require all of this commit history. The cloning process will be faster if we only wanted the latest commits. Git provides a feature to only clone the required commit history. This is called Git Shallow Clone.

To use it, along with the git clone command pass a flag --depth and specify the depth of commit history you want. Here is an example -

Here, I'm trying to clone Linux kernel source tree. It has total of 704,972 commits.

So, a git clone will download 5608186 objects while with --depth 1 the size is reduced to 65237 objects.

Scenario #3 :

In order to work on a new feature, I've clone the repository. Now, my new changes may break the code. In other words, I'm not 100% sure that my changes will work perfectly. Suppose, while adding new feature, I received a call that another issue is critical and I need to fix it as soon as possible. So I fixed the issue and now I cannot push the code. Why? because the new feature is not fully functional. But the fix has to be deployed. What to do?

I can again clone the project and fix the critical bug. But, it I'll need to do all the work again.

Solution - Git branch

Git provides an independent line of development. We may think of them as a way to request a brand new working directory.

The commits in branches are isolated from other branches. This means if I've committed a change in one branch, it will not be visible in other branches. By default, we are on the master branch but we can make as many branches as we need.

git branch -> list all available branches

The output will be like this-

* master
branch_bug_fix

Currently I'm in master branch. In order to change branch I can use -
git checkout <BRANCH_NAME>

To create a new branch using current branch as source: git checkout -b <NEW_BRANCH_NAME>

To delete a branch use: git branch -d <BRANCH_NAME>

Scenario #4 :

So, I'm working on a feature and I need to change branch and work on something else. But wait! I haven't committed the code and git would not allow me to switch branches without committing. Also, the work is not complete so I cannot commit changes. The simplest solution is to commit changes with commit message like - feature x incomplete. It will work but it will add unnecessary commit history.

Solution - Git Stash

Git stash - Stash the changes in a dirty working directory away.

It stashes or saved changes temporarily so that user can work on something else, and then user can come back and re-apply them later on. It is very useful if there is a need to switch between different branches and switch the work mid-way through a code change.

In order to stash changes, use:

$git stash

We can reapply the changes using:

$git stash apply

Vim: Delete all lines containing a pattern

Damanpreet Singh — Sun, 16 Aug 2020 18:27:15 +0000

Use this command to delete all lines containing pattern -

:g/pattern/d

Vim - add string to end of each line

Damanpreet Singh — Wed, 12 Aug 2020 12:05:50 +0000

Use this command to append , to end of every line -

:%norm A,

Format JSON in vim

Damanpreet Singh — Wed, 12 Aug 2020 12:03:28 +0000

Vim command to format JSON file:

:%!python -m json.tool

Create a Google Chrome Extension in 15 minutes.

Damanpreet Singh — Sun, 09 Aug 2020 17:01:18 +0000

In this blog, I'm going to build a simple Chrome Extension that gives user a healthy habit whenever he clicks on the "Get a Healthy Habit!!" button.

The source code is available here

Initial Set Up

A chrome extension required following files -

icon.png - this is the icon displayed to user.
manifest.json - This file contains properties like extensions' name, extension's version, author's name, and most importantly what permissions the extension requires.

Setting up manifest.json

Our extension does not require any special permission. So our manifest.json will look this-

{
  "manifest_version": 2,

  "name": "Healthy Habits Plugin",
  "description": "This extension will give show Healthy habits.",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab"
   ]
}

Points to note -

name - name 0f extension
description - description of what this extension does.
version - extension's version
browser_action - here we specify browser actions.
default_icon - this is the default icon of extension.
default_popup - this is the html that will appear if user clicks on extension icon.
permissions - we only need activeTab permission

popup.html

Our popup.html will look something like this -

<!doctype html>
<html>
  <head>
    <title>HealthyHabits</title>
    <script src="popup.js"></script>
    <style>
        #habit{
            font-size: 22px;
            text-align: center;
            border: 1px solid red;
            margin-bottom: 10px;
        }
    </style>
  </head>
  <body>
    <h1>HealthyHabit</h1>
    <div id="habit"></div>
    <button id="getHabit">Get A Healthy Habit!!</button>
  </body>
</html>

popup.js

This file contains the logic to handle the button click. It will look something like this -

document.addEventListener('DOMContentLoaded', function() {
    var getHabitButton = document.getElementById('getHabit');
    var count = 0;
    getHabitButton.addEventListener('click', function() {
        var data = {
            "habits":[
                {"habit":"Eat Breakfast Every Morning"},
                {"habit":"Add Fish & Omega-3 Fatty Acids To Your Diet"},
                {"habit":"Get Enough Sleep"},
                {"habit":"Make Social Connections"},
                {"habit":"Exercise For Better Health"},
                {"habit":"Practice Dental Hygiene"},
                {"habit":"Take Up A Hobby"},
                {"habit":"Protect Your Skin"},
                {"habit":"Snack The Healthy Way"},
                {"habit":"Drink Water & Eat Dairy"},
                {"habit":"Drink Tea"},
                {"habit":"Take A Daily Walk"},
                {"habit":"Plan"}
            ]
        }
        document.getElementById('habit').innerHTML =
            data.habits[count%13].habit;
        count = count +1;
  }, false);
}, false);

Whenever the button is pressed, it chooses next habit from data and will set it in our div's content.

Testing it out

It’s really easy to test a new extension in Chrome. Type “chrome://extensions” in a tab to bring up the extensions page.

Once on this page, check “Developer mode” to enable loading unpacked extensions. This will allow you to load your extension from a folder. Finally, click “Load unpacked extension” and select the extension folder to load up the extension. You should immediately see the extension show up as a Browser Action with your icon in the toolbar window of the current tab.

To test out the extension, Simple click the icon for our extension. When the HTML page comes up, click “Get a Healthy Habit!!” and you should immediately see a healthy habit being displayed.

And that’s it! We have created our first Google Chrome Extension.

Resources -
https://developer.chrome.com/extensions/overview

Dockerize Flask App

Damanpreet Singh — Sun, 26 Jul 2020 14:55:25 +0000

In this post, I'm going to create a simple Flask app and will run it inside a docker container.

Requirements

docker - We need to install docker for this. To install docker on your system follow this link.
A Flask app - You can find the sample code here.

The Docker Hub image

Since Docker Hub doesn’t have an official Flask repository (at the time of this writing), I’ll be building my own image. There are some non-official images available but it's generally recommended to make your own Dockerfile.

Let's Create Our Dockerfile

Make Project directory

Start with creating a new directory; let’s call it flask_project:

mkdir flask_web

Our flask_app.py file will look something like this:

# simple Flask app
From flask import Flask

app = Flask(__name__)

@app.route("/hello")
def hello():
 return "hello user!!"

@app.route("/")
def index():
 return "hello. You have arrived at '/'"

if __name == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5005)

Now, we need to include Flask in our requirements.txt file:

Flask==0.10.1

Flask Dockerfile

Inside our project directory, we'll create a file named - Dockerfile. your directory will look something like this -

\-Project
  | 
  |-flask_app.py
  |-Dockerfile
  |-Requirements.txt

Open up the Dockerfile and add following -

FROM ubuntu:16.04

MAINTAINER Damanpreet Singh "daman.4880@gmail.com"

RUN apt-get update -y
RUN apt-get install -y python-pip python-dev build-essential

# We copy just the requirements.txt first to leverage Docker cache
COPY . /app
WORKDIR /app
RUN pip install -r requirements.txt
ENTRYPOINT [ "python" ]

CMD [ "flask_app.py" ]

Explanation -

FROM ubuntu:16.04 - We are using ubuntu 16.04 as base image

MAINTAINER - Used for author field of image( used when pushing image to docker hub).

RUN - It tells docker to run the commands specified. In our case, the commands are apt-get update and install

COPY - copies file from first parameter( . ) from host to the destination parameter(/app).

ENTRYPOINT - configures the container to run as an executable; only the last ENTRYPOINT instruction executes.

Building Docker Image

To build docker image from our Dockerfile, run following command -

$docker build -t flask-web-app .

-t - lets you add custom tag name to the image- for me it is flask-web-app.

. - here we need to specify the location of Dockerfile. Since, I'm in the same directory, I'm using .

Running Docker Image

To run the Docker Image, run following command -

$ docker run -p 5000:5005 flask-web-app

-p is used to specify port forwarding. Here we are specifying docker to forward port no. 5005 of image to port no. 5000 of host OS.

flask-web-app is the name of the image that we want to run.

We can find the container runtime details using following command -

$ docker ps -a

See the Results

To see the results, open the web browser and point it to http://localhost:5000/