DEV Community: Shivam Singhal

Creating accordions with native HTML

Shivam Singhal — Sat, 12 Dec 2020 12:43:24 +0000

Accordions are one of the most commonly used UI components for any website. For example FAQs section of the website, where only the question is shown, and when clicked the answer just opens up.
Generally, we handle this by creating 2 divs and adding some javascript to handle the open and close of the accordion. But recently I stumbled upon this hidden gem in HTML that eliminates the need of all this - <details>

We can simply design a simple FAQ or summary section with <details> HTML tag without using Javascript!!! 🤯🤯🤯.
And the best part... it is supported by all the modern browsers (obviously except IE :( ) - browser compatibility.

Using `<details>` tag

There are two elements here: <details> and <summary>. <details> is the wrapper for all the content you want to show and hide, and contains the — well, the summary and title of the section. <summary> is optional, if you do not add it, the browser will use some default text. For example, in Firefox and Chrome, it is Details. Below is a sample HTML markup:

<details>
  <summary>Details</summary>
  <p>Something small enough to escape casual notice.</p>
</details>

And it will render like:

This markup can be designed with CSS as any other HTML element. Now for creating beautiful accordions all you need is just HTML and CSS (and a will to let go of IE).

Demo: https://itsopensource.com/demos/details/

References

MDN: details

Cheers.

How to checkout github pull requests locally like Pro

Shivam Singhal — Thu, 01 Oct 2020 18:57:16 +0000

If you work with the repositories hosted on Github , you have to deal with lot of Pull requests daily generally, and the process to checkout the PR's locally in your machine is quite not easy, you have to see the PR's id and also the branch name.

git fetch origin pull/ID/head:BRANCHNAME

And if the PR is in upstream repository, first you need to add that particular user as remote in your local copy of the project and then pull the particular branch of the contributor. For example

git remote add fayem git@github.com:fayepal/itsopensource.git
git checkout -b fayem fayepal/blog-docker-vm

As we see its quite long process and you will have lot of remote added in your repository as well.

To solve this there is a awesome git alias by gnarf:

[alias]
  pr  = "!f() { git fetch -fu ${2:-$(git remote |grep ^upstream || echo origin)} refs/pull/$1/head:pr/$1 && git checkout pr/$1; }; f"
  pr-clean = "!git for-each-ref refs/heads/pr/* --format='%(refname)' | while read ref ; do branch=${ref#refs/heads/} ; git branch -D $branch ; done"

Either you can add them directly in your .gitconfig file or by doing so:

git config --global alias.pr '!f() { git fetch -fu ${2:-$(git remote |grep ^upstream || echo origin)} refs/pull/$1/head:pr/$1 && git checkout pr/$1; }; f'
git config --global alias.pr-clean '!git for-each-ref refs/heads/pr/* --format="%(refname)" | while read ref ; do branch=${ref#refs/heads/} ; git branch -D $branch ; done'

Now you simply do git pr x and it will do the magic for you:

Cheers

How to move forward and backward between commits in git

Shivam Singhal — Thu, 03 Sep 2020 16:31:52 +0000

We always keep moving forward and backward between commits in git. Once you checked out a previous hash git log no more shows the next commits, we end up rebasing or resetting, but git provides a way to see all the commits, and we can checkout the next commits too from a previous state.

The simple and easiest way to do this is:



git log --online --all

Consider this example:

Here if we check out to commit id 95613ab Fix more TOC links and then see the git history with git log or git log --oneline you will only see:

As we see here we missed the commits ahead of 95613ab. You can see the HEAD with git show-ref --head but it will not show the commits in between the HEAD and the commit you checked out. So if you do git log --oneline --all you will get the whole history with the commit where the HEAD is right now.

Let us know if you know the better solution for this problem.

Cheers.

How to Reduce Node Docker Image Size by 10X

Shivam Singhal — Sat, 04 Jul 2020 09:35:29 +0000

Dockerizing an application is simple, effective, but optimizing the size of Docker Image is the tricky part. Docker is easy to use but once the application starts scaling, the image size inflates exponentially. In general, the node docker image size of the applications is over 1 GB most of the time.

Why the Size matters

Large docker image sizes - Bigger image size requires more space means increased expense.
Long build durations - It takes a longer time to push the images over the network and results in CI Pipeline delays.

Let’s Start The Optimization

Here is our demo application built using the VueJS Application.

Here is the initial Dockerfile.

FROM node:10

WORKDIR /app

COPY . /app

EXPOSE 8080

RUN npm install http-server -g

RUN npm install && npm run build

CMD http-server ./dist

The size of this image is:

It is 1.34GB! Whoops!

Let's start optimizing step by step

1) Use Multi-Stage Docker Builds

Multi-stage builds make it easy to optimize Docker images by using multiple intermediate images in a single Dockerfile. Read more about it here. By using multi-stage builds, we can install all dependencies in the build image and copy them to the leaner runtime image.

FROM node:10 AS BUILD_IMAGE

WORKDIR /app

COPY . /app

EXPOSE 8080

RUN npm install && npm run build

FROM node:10

WORKDIR /app

# copy from build image
COPY --from=BUILD_IMAGE /app/dist ./dist
COPY --from=BUILD_IMAGE /app/node_modules ./node_modules

RUN npm i -g http-server

CMD http-server ./dist

Now the size of this image is 1.24GB:

2) Remove Development Dependencies and use Node Prune Tool

node-prune is an open-source tool for removing unnecessary files from the node_modules folder. Test files, markdown files, typing files and *.map files in Npm packages are not required at all in the production environment generally, most of the developers do not remove them from the production package. By using node-prune it can safely be removed.

We can use this to remove Development Dependencies:

npm prune --production

After making these changes Dockerfile will look like:

FROM node:10 AS BUILD_IMAGE

RUN curl -sfL https://install.goreleaser.com/github.com/tj/node-prune.sh | bash -s -- -b /usr/local/bin

WORKDIR /app

COPY . /app

EXPOSE 8080

RUN npm install && npm run build

# remove development dependencies
RUN npm prune --production

# run node prune
RUN /usr/local/bin/node-prune

FROM node:10

WORKDIR /app

# copy from build image
COPY --from=BUILD_IMAGE /app/dist ./dist
COPY --from=BUILD_IMAGE /app/node_modules ./node_modules

RUN npm i -g http-server

CMD http-server ./dist

By using this we reduced the overall size to 1.09GB

3) Choose Smaller Final Base Image

When dockerizing a node application, there are lots of base images available to choose from.

Here we will use alpine image; alpine is a lean docker image with minimum packages but enough to run node applications.

FROM node:10 AS BUILD_IMAGE

RUN curl -sfL https://install.goreleaser.com/github.com/tj/node-prune.sh | bash -s -- -b /usr/local/bin

WORKDIR /app

COPY . /app

EXPOSE 8080

RUN npm install && npm run build

# remove development dependencies
RUN npm prune --production

# run node prune
RUN /usr/local/bin/node-prune

FROM node:10-alpine

WORKDIR /app

# copy from build image
COPY --from=BUILD_IMAGE /app/dist ./dist
COPY --from=BUILD_IMAGE /app/node_modules ./node_modules

RUN npm i -g http-server

CMD http-server ./dist

By using this Dockerfile the image size dropped to 157MB \o/

Conclusion

By applying these 3 simple steps, we reduced our docker image size by 10 times.

Cheers!

How to get rid of branch name from git push origin master

Shivam Singhal — Thu, 25 Jun 2020 10:13:08 +0000

We always type git push origin master, while working on feature branch we type git push origin JIRA-1, sometimes the names of the feature branch is not easy then we use git push origin this-branch-will-do-something to push the code over GitHub or any other hosting service. In each case, we are doing redundant work of copy-pasting or typing branch name which is redundant and annoying as you have to remember the branch name exactly or you might end up pushing the code to the wrong branch. This can be handled by just with one command,

git config push.default current

So this command push changes to .gitconfig file and after change git config file looks like this:

[user]
  name = author
  email = author@itsopensource.com

[push]
  default = current

You can directly append in git config too.

After this, all you need to do is:

git push origin

Note - If you do this inside a git repo, this will only be available for that repo, if you want to do it globally and add --global flag:

git config --global push.default current

This will make these changes to be set globally across all the git repos you are using.

Happy git!

Understand Docker step by step. A tutorial repo for beginners

Shivam Singhal — Mon, 22 Jun 2020 21:52:40 +0000

Hello Everyone, I wrote a simple beginner tutorial for Docker, you can read here https://github.com/championshuttler/docker-basicLearning or https://championshuttler.github.io/docker-basicLearning

If you like it please do not forget to give the repo a ⭐.

Happy Open Source

How to get rid of branch name from git push origin master

Shivam Singhal — Tue, 02 Jun 2020 13:48:55 +0000

git config push.default current

So this command push changes to .gitconfig file and after change git config file looks like this:

[user]
  name = author
  email = author@itsopensource.com

[push]
  default = current

You can directly append in git config too.

After this, all you need to do is:

git push origin

Note - If you do this inside a git repo, this will only be available for that repo, if you want to do it globally and add --global flag:

git config --global push.default current

This will make these changes to be set globally across all the git repos you are using.

Happy git!

Originally published at https://itsopensource.com.

How to always keep files open in Visual Studio Code

Shivam Singhal — Wed, 20 May 2020 20:56:19 +0000

Visual Code is an amazing editor and I use it for my everyday code. One thing bugs me every time is the files are not open permanently until I use the shortcut cmd + k enter or right-click and select keep open on the filename. This happens because the VS Code opens the files by default in preview mode, so whenever the new file name is clicked from explorer, the opened file closes and the new file is visible. But if you are equally frustrated by this behavior here is what you need to do.

The solution is way simpler than expected, just add the following line to your setting.json
(Code Menu > Preferences > Setting)

"workbench.editor.enablePreview": false

Follow me on GitHub and Twitter

Cheers!

How to remove all images and containers in Docker

Shivam Singhal — Wed, 20 May 2020 20:51:25 +0000

Recently I started using Docker in my internship and sometimes you just mess up your docker images and containers, so you wanted to start from clean but first you need to remove all images and containers of Docker locally.

# Delete all Docker containers
docker rm -f $(docker ps -a -q)

# Delete all Docker images
docker rmi -f $(docker images -q)

Also there is a new docker command, that will delete all unused images and volumes.

docker system prune --all --force

You can read more about this command here

Follow me on GitHub and Twitter

Cheers!

DEV Community: Shivam Singhal

Creating accordions with native HTML

Using <details> tag

References

How to checkout github pull requests locally like Pro

How to move forward and backward between commits in git

How to Reduce Node Docker Image Size by 10X

Why the Size matters

Let’s Start The Optimization

Conclusion

How to get rid of branch name from git push origin master

Understand Docker step by step. A tutorial repo for beginners

How to get rid of branch name from git push origin master

How to always keep files open in Visual Studio Code

Cheers!

How to remove all images and containers in Docker

Using `<details>` tag