DEV Community: Itsopensource

Rainbow text with CSS

Trishul — Mon, 12 Feb 2024 07:39:18 +0000

Some designers can not get enough of colors and want the text not to be in solid color but rainbow colors. Traditionally developers achieve this by using a PNG image, something like this:

But with modern day CSS, this can be achieved with just few CSS rules.

How

Create a Div
Add some text
Add some basic styling like font-size, line-height etc.
Add a background color background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);: Rainbow 🌈
Add this property to the div background-clip: text: This makes sure the background is only used for the available text
Add color: transparent: This makes sure that the clipped background on text is completely visible.
That's it 😎

Code

.rainbow-text {
   background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
   background-clip: text;
   color: transparent;
   font-size: 40px;
}

DEMO

https://itsopensource.com/rainbow-text/#:~:text=DEMO

Hope this helps 😊

Identifying non ES5 packages

Trishul — Sun, 15 Aug 2021 17:39:31 +0000

To the delight of Frontend developers around the globe, Microsoft finally decided to kill its dreaded browser Internet explorer. But it's not done yet, and still we need to support IE in our Frontend builds, due to which almost all our JS bundles are transpiled in ES5 formats.

We generally exclude all the node modules from the transpilation process as we believe all the npm packages serve ES5 packages, which is not true for every package (learned that hard way ☹️).

{
    test: /\.(ts|tsx|js)$/,
    loader: 'babel-loader',
    exclude: /node_modules/
},

For example, I am working with an e-commerce app and we have to support IE11 atleast for this app, one fine day our app stopped working on IE and we spent almost 2 days figuring out what's wrong. Turned out a developer introduced new state management library recoil, which is an amazing tool. But, it does not serve ES5 build. This broke our application on IE.

To fix this all we need to do is, not exclude these packages from our transpilation and done.

{
    test: /\.(ts|tsx|js)$/,
    loader: 'babel-loader',
    exclude: /[\\/]node_modules[\\/](?!(config|recoil)[\\/])/
},

But still, we need to find manually which packages are not being served as ES5. While figuring out this problem I stumbled upon an amazing tool that automatically identifies all non-ES5 packages for us in the node modules are-you-es5. And in bonus, it provides a regex to exclude these packages from our excluding node modules from transpilation.

ReadabilityJS - adding Reader View Mode to websites

Trishul — Mon, 18 Jan 2021 09:03:59 +0000

One of the features I absolutely love in Firefox is Firefox Reader View. This removes all the clutter and present the content in text format for better readability and relief for eyes(It also removes the ad banners 😉 ).

Not all the browsers (Chrome needs special flag to enable this 😐 ) have a readability mode thus, providing an option for reader mode within your website would be a huge help to your users and would make your webpage more accessible.

The good news is you do not have to implement this on your own, Mozilla has a standalone version of the readability library used for Firefox Reader View - Readability.js.

The usage is pretty simple and straight forward:

We need to include the readability.js in our code in either of 2 ways:
1. Download the file via https://github.com/mozilla/readability/releases
2. Install npm package - https://www.npmjs.com/package/@mozilla/readability
Create a new Readabilty object from DOM document node
```
  const article = new Readability(document).parse();
```
This article object will have following properties
- title: article title
- content: HTML string of processed article content
- textContent: text content of the article (all HTML removed)
- length: length of an article, in characters
- excerpt: article description, or short excerpt from the content
- byline: author metadata
- dir: content direction (LTR or RTL)
Note Readability morphs the actual object so better to pass a clone node.
```
const documentClone = document.cloneNode(true);
const article = new Readability(documentClone).parse();
```
Substitute this article.textContent in the desired div and done 😎

See this in action here - https://itsopensource.com/demos/readability

HTML View

Text View

Reference: https://github.com/mozilla/readability

Publish GitHub pages with GitHub Actions

Trishul — Sun, 13 Dec 2020 11:22:13 +0000

GitHub pages are the best way to host static blogs like Gatsby. One of the most common ways to do this is, maintain your code in main/master branch, build it, and then push the code to gh-pages branch.
There are various CI that easily automate this process like Travis CI, CircleCI, etc.
With GitHub actions, this would be a piece of cake, and without depending on any third-party provider. From the docs:

Automate, customize, and execute your software development workflows right in your repository with GitHub Actions

If you are not sure what are GitHub actions please visit here.

Workflow

Prerequisites

You have a static blog(let's say gatsby) setup, the code for your blog is in master branch.
You have a build script in your package.json
You have setup your GitHub pages (or pointed to your custom domain) in gh-pages branch.

Process

Step 1

Install gh-pages npm package in your project, this is a small utility package which helps to publish your code to gh-pages branch.
You can skip this step in case you want to push all contents from master to gh-pages branch.

Step 2

Add a deploy script in your package.json. This script should do 2 jobs

Build the project, make it ready for being published.
Push the changes to the gh-pages branch.

For example, this pushes the code to gh-pages via npm package.

"deploy": "gatsby build && gh-pages -d public -r https://$GH_TOKEN@github.com/<username>/<repository_name>.git"

Step 3

Generate an access token and add it to secret of your repository.

Create an access token: goto https://github.com/settings/tokens, create a new token, give it access for repo and workflow.

Add this token to secret of your repository: goto https://github.com/<username>/<repository_name>/settings/secrets/actions, click new repository secret.

Step 4

Create a workflow file, you need to create a file in following path: .github/workflows/<some-name-you-like>.yml, its important to have .yml extension and have exact same path.
Following action file is complete enough to publish gh-pages, every time a new commit is merged in master branch. ✅

   name: gh-pages publisher 🚀

   on:
   push:
      branches: [ master ]

   jobs:
   publish-gh-pages:
      runs-on: ubuntu-latest
      steps:
         - uses: actions/checkout@v2
         - uses: actions/setup-node@v1
         with:
            node-version: 12
         - run: npm ci
         - run: git config user.name "<user name>" && git config user.email "user email"
         - run: npm run deploy
         env:
            GH_TOKEN: ${{secrets.SECRET_GITHUB_TOKEN}}

This script is pretty self-explanatory, it performs the following tasks.

It specifies to work only on push on master
Sets up a node 12 environment
Installs dependencies via npm ci
Sets up git requirements for username and email (required to do a push to branch)
Run the deploy script
In case you don't use gh-pages npm package, you can write another step for git push to gh-pages branch.
At last, we set up env variable GH_TOKEN from our action secret (which you set up in step 3), this env variable would be available in package.json

Step 5

Commit this file and see your first action in action (sorry for the pun 🙈 )

Hope this helps 🙏🙏🙏

You can see the actions running here: https://github.com/<username>/<repository_name>/actions.
Workflow file for itsopensource.com can be viewed here.

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.

Content Security Policy - protect your website from XSS attacks

Trishul — Sat, 31 Oct 2020 11:05:30 +0000

Problem

It's very common while building any project we use certain third party libraries, in the case of Javascript; npm packages, which recursively use more packages, and eventually your code includes a huge chunk of third party code.

There is nothing wrong with it, there is no point re-inventing the wheel. We include the required library, make our code work, write tests. Deploy to a staging environment, pass through automation and finally deploy to production.

The problem is when a library tries to load remote content on our website. It can be an image, font, style, or even Javascript. This content bypasses all our tests, checks, and is executed directly on production. Even worse we don't know where the content is being served from.

Content Security Policy

Content Security Policy (CSP) is a W3C specification that helps to avoid XSS attacks. CSP enables developers to define rules for fetching the resources(images, javascript, fonts, etc.) on the client browser. Developers can define policies to allow/restrict loading any resource, restrict resources to load only from certain domains, and disallow from any other domain. For example, you can write a CSP to restrict browsers to load images only from example.com, any images from other domains will be not loaded and would throw errors. In addition to resources, CSP also offers control over the embeds.

In the following example, the CSP forces to load images/scripts only from self domain and prevents the loading of images from other domains.

From the W3c specification docs:

One of the CSP goal is to mitigate the risk of content-injection attacks by giving developers fairly granular control over

The resources which can be requested (and subsequently embedded or executed) on behalf of a specific Document or Worker

The execution of inline script

Dynamic code execution (via eval() and similar constructs)

The application of inline style

How

CSP can be implemented in following two ways:

Specify in HTTP headers

   Content-Security-Policy: __Policy__

Specify in META tags

   <meta http-equiv="Content-Security-Policy" content=" __Policy__ ">

Defining a policy

The Policy is the accumulation of directives which defines the allowed location of each resource, no directive means allowed for all. Some of the useful directives are the following:

default-src : This defines the loading policy for all types of resources.
script-src : This defines the loading policy for all javascript, from where javascript can be loaded.
img-src : This defines the loading policy for all images, from where images can be loaded.

List of directives for the other resources is here.

Some examples of policies are:
1.

   Content-Security-Policy: default-src 'self';

This would allow resources only from the same domain, and all other resources will fail to load.
2.

   Content-Security-Policy: img-src example.com;

This would allow images only from example.com, and all other images will fail to load.
2.

   Content-Security-Policy: default-src 'self'; img-src example.com;

This would allow any resources to load only if from the same domain, except images which can be from example.com too.

Reporting

CSP also provides a way to send violation reports, in case any logging is required, via report-uri directive.

`Content-Security-Policy: default-src 'self'; report-uri http://example.com/cspfails`

The reports will be sent as POST request and with following JSON:

{
 "csp-report": {
   "document-uri": "http://example.com/",
   "referrer": "",
   "blocked-uri": "http://example.com/some_malware.js",
   "violated-directive": "default-src self",
   "original-policy": "default-src 'self'; report-uri http://example.com/cspfails"
 }
}

Risks

Before defining a CSP you should be completely aware of all the resources and respective origin required for your webapp, else some vital resources may be blocked and eventually random bugs.
In case you are not sure what all resources are being required for running your web page smoothly, you can implement the CSP in reporting mode, in this way the violations will be reported but no resource will be blocked, once you are sure what are the resources really required, you can implement CSP. To do this instead of Content-Security-Policy we need to use Content-Security-Policy-Report-Only header.

Content-Security-Policy-Report-Only: __Policy__ + report-uri

Resources

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

Decoupled DRUPAL 8 With JSON API

Dipali Goel — Wed, 09 Sep 2020 14:42:11 +0000

Benefits of decoupled architecture

A decoupled architecture does great work in reducing or completely eliminating problems that are a part of the monolithic content management systems.
CMS data is exposed to and consumed by a front-end JavaScript framework. The framework can be React.js, Angular.js, and many more.

Json API

In JSON API, the consumer can get all the data with a single query, tracing relationships between objects and returning the desired output in a single shot.
A single request from a consumer can return multiple entities. For the same API, different consumers may use different embedding patterns, depending on the requirement.
All API can be customized according to the requirement which we can achieve by downloading and enabling JSONAPI Extras module.

Enable json API

Using Drush
$ drush en serialization -y
$ drush en jsonapi -y
$ drush dl jsonapi_extras && drush en jsonapi_extras -y

Using Drupal Console
$ drupal module:install serialization
$ drupal module:install jsonapi
$ drupal module:download jsonapi_extras && drupal module:install jsonapi_extras

Configuration

JSONAPI is a zero-configuration module that gives access to all Drupal entities for reading out of the box.
You need to go to the module settings page (/admin/config/services/jsonapi) and make the changes according to the requirement.

Retrieving resources with JSON API

JSON API specification recommends that all requests include an Accept header with the correct MIME type for JSON API,
the JSON API module accepts requests without any request headers present.

Retrieving resource collections

Key motivations for using JSON API instead of REST is the possibility of retrieving multiple resources using JSON API collections.
There is only Views rest export to get the collection entities can be retrieved. In JSON API, simply issue a GET request against the following URL to retrieve a collection of entities eg for articles:
/jsonapi/node/article

Using JSON API specification, you can use certain query parameters to operate on the collections retrieved through the API.
Eg page[limlit],sort
/jsonapi/node/article?sort=nid
/jsonapi/node/article?page[limit]=30&page[offset]=25
/jsonapi/node/article?page[limit]=30

Retrieving limited subsets of fields

To capture only the title, created and modified timestamps, and body of the entity, you can provide fields query parameter.
Note that with the parameter, the type and bundle must be included as well.

/jsonapi/node/article?fields[node--article]=title,created

Creating resources with JSON API

The JSON API specification allows for individual resources to be created through an API.
The following request headers are obligatory on all POST requests in order to generate a standard response:

Accept: application/vnd.api+json
Content-Type: application/vnd.api+json

To POST request that creates an article, use the same URL that we used to retrieve collections of articles:

/jsonapi/node/article
For creating an article, you can include a relationship to a user to indicate that they were the one to create the article.
The following payload reflects a relationship that connects the entity to an existing user ({{user_uuid}})
whose authorship is assigned in this POST request.

{
  "data": {
    "type": "node--article",
    "attributes": {
      "title": "My snazzy new article",
      "body": {
        "value": "Hello world! Lorem ipsum dolor sit amet consectetur adipiscing elit",
        "format": "plain_text"
      }
    },
    "relationships": {
      "uid": {
        "data": {
          "type": "user--user",
          "id": "{{user_uuid}}"
        }
      }
    }
  }
}

This request will result in a 201 Created response code with the JSON API response of the created entity.
Sample response from postman

Updating resources with JSON API

PATCH requests also require the following headers.

Accept: application/vnd.api+json Content-Type: application/vnd.api+json

We use PATCH to modifies an article, find the UUID of the article in question and append it to the end of the
URL, as follows:
/jsonapi/node/article/{{node_uuid}}

And include a request payload that contains only the fields that you intend to modify and the UUID of the entity in question:

{
  "data": {
    "type": "node--article",
    "id": "{{node_uuid}}",
    "attributes": {
      "title": "Change in article"
    }
  }
}

Deleting resources with JSON API

We can delete the artcile which we have created using DELETE method
Headers :
Content-Type: application/vnd.api+json

With DELETE requests no payload is required. We need to add the correct resource using its UUID and use the Delete method for that URL.
/jsonapi/node/article/{{node_uuid}}

It will result in a 204 No Content response code .

Conclusion

With the evolution of web-based APIs, this json format is a better approach than XML.
JSONAPI has a great experience by making the Drupal entities (users, comments and more) available via a web service API.
URLs can be manipulated as per the requirement to access the entity types and bundles using HTTP methods.

Conversion of SSH2 private key to openSSH format using PuTTYgen

palgoel — Sun, 06 Sep 2020 07:31:19 +0000

Problem Statement

While working on mercurial(Version Control System), we need to generate different public/private keys for windows & Linux, which leads to have multiple keys for single user.

Solution

If we want to access mercurial through Linux with your same key as Windows, then instead of generating a new rsa key pair ,we can reuse same public/private key pair to access mercurial from linux.
Hence same repository you can access via windows or linux without creating separate public/private key pair for both.

STEPS :

Pre-requisite: There must a key pair existing in SSH2 format to access mercurial`

Open the PuTTY Key Generator
On the menu bar, click "File" -> "Load private key"
Select your .ppk file
On the menu bar, click "Conversions" -> "Export OpenSSH key"
Save the file as (without an extension) e.g. mercurial_rsa `

You are all done. Same private key on windows can be reused(with above steps) with Linux.

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.

Best way to keep users safe while using Google Analytics

Trishul — Sun, 12 Jul 2020 15:54:17 +0000

Google Analytics is the most used web analytics service over the web, Google has made it pretty easy and effective in terms of implementation and dashboard UI. It gives detailed demographic data and many other features that justify its vast usage.
The most common and easiest way to enable google analytics on any website is by adding the tag manager (the code snippet provided) to the website.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXXX-1');
</script>

Problem

Adding a Tag manager is allowing google to run some code on your website whenever someone visits the website or do some action (I would request to read this line once more). Based on the options selected on the analytics UI, Google inserts the scripts into the website, sends the data back with HTTP requests. Data includes the complete URL(with query params) and many other details that may be classified as Personal Identifiable Information(PII). Konark Modi, a privacy advocate, has written a detailed case study on how sensitive user data or PII is getting leaked to third parties, including Google Analytics, in this blog.
As a developer, we always want to have complete control over whatever is being served on our website. Google tag managers kind of blow this up.

Solution

This can be avoided by using Google Measurement protocol.

From the docs

The Google Analytics Measurement Protocol allows developers to make HTTP requests to send raw user interaction data directly to Google Analytics servers

TLDR; Do not load google scripts but, create and send HTTP requests by yourself. This gives way more control over what you want to send to google and ensures your complete control over your website. You can send Requests for whatever action needs to be recorded for analytics. It can be just page visits, clicks, or any event.

How

Analytics tool receives the data via query parameters of the request, a typical request looks like this

POST /collect HTTP/1.1
Host: www.google-analytics.com

payload_data

Mandatory parameters are

v=1              // Version of the tool.
&tid=UA-XXXXX-Y  // Tracking ID / Property ID.
&cid=555         // Anonymous Client ID.
&t=              // Hit Type

Google provides a number of parameters in case you want more detailed analytics say for e-commerce, check the parameter guide here, some interesting parameters which can be controlled are

dr - Document referrer // = document.referrer
dl - Location URL // = document.location.origin + document.location.pathname (also may be document.location.search)
aip - Anonymize IP, if present the IP address of the sender will be anonymized // = 1
npa - Disable advertising personalization - if enabled it won't be used when populating a remarketing audience for "past purchasers" // = 1

Lesser the parameters, lesser the data sent, better the privacy.

Google also provides a tool to check and create a proper hit via Hit Builder

If you find this a bit exhausting, then at least follow the best practices to make sure you are not sending the user's personal data to google.
https://support.google.com/analytics/answer/6366371

--- Keep your users safe ---

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!

DEV Community: Itsopensource

Rainbow text with CSS

How

Code

DEMO

Identifying non ES5 packages

ReadabilityJS - adding Reader View Mode to websites

Publish GitHub pages with GitHub Actions

Workflow

Prerequisites

Process

Creating accordions with native HTML

Using <details> tag

References

Content Security Policy - protect your website from XSS attacks

Problem

Content Security Policy

How

Defining a policy

Reporting

Risks

Resources

How to checkout github pull requests locally like Pro

Decoupled DRUPAL 8 With JSON API

Benefits of decoupled architecture

Json API

Enable json API

Configuration

Retrieving resources with JSON API

Creating resources with JSON API

Updating resources with JSON API

Deleting resources with JSON API

Conclusion

Conversion of SSH2 private key to openSSH format using PuTTYgen

Problem Statement

Solution

STEPS :

How to move forward and backward between commits in git

Best way to keep users safe while using Google Analytics

Problem

Solution

How

How to Reduce Node Docker Image Size by 10X

Why the Size matters

Let’s Start The Optimization

Conclusion

Using `<details>` tag