Forem: Trishul

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.

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

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 call a function on path change in Javascript

Trishul — Fri, 03 Jul 2020 13:36:50 +0000

Modern JS frameworks tend not to reload the page but manipulate DOM and change URL path for internal navigation, for performance and smooth UX. But since there is no page reload, window.onload event does not get triggered for subsequent navigation. We run into a situation where we need to call a function whenever URL path changes (not the hash).

Problem

The itsopensource.com blog is built using gatsby, we wanted to add google analytics to this, but instead of using google tag manager, we tried to restrict what data is sent to google and in this process, we need to send XHR request on every page load. We created a function sendTelemetry and called it on window.onload. This works as expected (partially), whenever the page is loaded the XHR is sent, but gatsby do not reload the page while changing the URL when any blog link is clicked, so XHR is sent only once per session and not on subsequent page loads.
Javascript does not provide any native listener to path change (not hashchange).

Solution

The history API maintains complete the navigation state. Whenever a new page is navigated history.pushState is called and page is added to the state. That means this event is called whenever the URL changes. We hooked our function on this, and done :)

(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
      // YOUR CUSTOM HOOK / FUNCTION
      console.log('I am called from pushStateHook');
      return pushState.apply(history, arguments);
    };
})(window.history);

Demo

A quick demo can be the following:

Open the browser console on this very page.
Paste the above-written code snippet.
Keep console open and navigate various pages on this blog
You should see a message in console on every navigation.

The first choice for the title was how to hook a function on history.pushState.

Reference: stackoverflow 😉

How to use console command effectively

Trishul — Wed, 24 Jun 2020 14:20:19 +0000

console.log is the most widely used debugging technique used by Javascript developers. While debugging console.log is sprinkled almost anywhere in the code, after code execution, console panel is full of console messages, this blog lists some useful console commands which can help to format and declutter console panel for more meaningful console messages.

console.(log/info/warn/error)

Basic usage

console.log(123);
// 123

console.log("abc", 123);
// abc 123

console.log([1,2,3], "abc", 123);
// Array(3) [ 1, 2, 3 ] abc 123

Substitution in console

console.log("This is a %s example also accept %d number, and %o object too", "substitution", 33, { a: 1 });

Please take care of the sequence of params

Styling in console

console accepts CSS styles we can use %c to pass CSS styles 😎. Styles apply to whatever text is after %c. It can be mixed with substitutions too, but again make sure of the sequence of parameters.

console.log("This is some %cShow off console message", "font-size:30px; color: #fff; background: #3d7e9a");

console.assert

This is generally used for conditional logging, accepts a condition as the first param, and logs the next params only if the given condition is false with Assertion failed error.

const a = 1;
console.assert(a===1, "a is not equal to 1");
//undefined
console.assert(a===2, "a is not equal to 2");
// Assertion failed: a is not equal to 2

console.(time/timeLog/timeEnd)

When we try to measure the performance of a website or a function we use to add console.log(Date.now) before and after a function and do the maths to get execution time. Javascript has a native way to achieve this. console.time marks the start of time, console.timeEnd stops the timer and gives the total time taken. console.time takes label as a parameter in case you want to use multiple timers. console.timeLog can be used anywhere in between to check time elapsed till then.

function checkTime() {
  console.time("checkTime");
  for (let i = 0; i <= 300000000; i++) {
        if (i === 15000000) console.timeLog("checkTime");
    }
    console.timeEnd("checkTime");
}
checkTime();

// checkTime: 24ms
// checkTime: 396ms - timer ended

console.(count/countReset)

There are times where we want to count how many times a function is called, we need to create a dummy counter just for logging, console.count handles this, every time it is called it increments by 1 and consoles the value against the passed label or default. We can use multiple counters in the same code with different labels. Any counter can be reset with console.countRest passing respective label or nothing in case of default.

console.count("myCounter");
// myCounter: 1
console.count("myCounter");
// myCounter: 2
console.count("myCounter");
// myCounter: 3
console.countReset("myCounter");
// myCounter: 0
console.count("myCounter");
// myCounter: 1

Safari adapting webextensions APIs

Trishul — Tue, 23 Jun 2020 20:56:46 +0000

We can write cross-browser extensions using Webextension APIs which were installable on Firefox and Chrome (or chrome based browsers, like Brave, Opera), at WWDC 2020 event, Apple announced that Safari will also follow the Webextension APIs Suite for Safari extensions, adding one more possibility for cross browser extensions 😎.

Announcements

How to serve an API locally with webpack

Trishul — Tue, 23 Jun 2020 06:56:05 +0000

While developing a data driven web-app, the frontend may need to fetch data from various APIs provided by backend which may not be ready at the given time. In this case, we need to mock the response and serve it via dummy server, either local or remote. With Webpack this can be achieved without any dummy server. Webpack devserver allows custom handlers which can be used to serve the API response.

We need to add a devServer entry to the webpack config, which would look something like this:

const data = require("./data.json");

module.exports = {
  mode: "development",
  entry: "./src/index",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build")
  },
  plugins: [],
  devServer: {
    before: function(app) {
      app.get("/getData", function(req, res) {
        res.json(data);
      });
    },
    open: true,
    port: 3000
  },
  resolve: {
    extensions: [".js"]
  },
  module: {}
};

There are various amazing things that we can do with devserver (check here), we consider three of them here

open - launch the browser once the app is compiled
port - set the port to serve the app
before - We can define custom paths with endpoints in this function, from the docs -

Provides the ability to execute custom middleware prior to all other middleware internally within the server. This could be used to define custom handlers.

So for given webpack config, if the content of data.json is - [{a: 1}, {b: 2}, {c: 3}] then response for http://localhost:3000/getData will be

[
  { a: 1 },
  { b: 2 },
  { c: 3 }
]

The app param of before function can be considered as express object and be used in the same context, app.get has req and res params, which are request and response object for the API call made.

To see this in action please checkout this project on github.

Bonus: I use this technique to get around with CORS on my local setup, the following code does the trick for me:

  devServer: {
    before: function(app) {
      app.get('/api', async function(req, res) {
        try {
          const queryURL = req.query.q;
          const resp = await fetch(queryURL);
          const body = await resp.text();
          res.send(body);
        } catch (e) {
          res.status(500);
          res.send(e);
        }
      });
    }
  },

Here I fetch the remote URL on the server rather than the browser, so there is no CORS restriction and then serve on the response on the same server hence, eliminating CORS.

I highly recommend to look into devserver options, this can save a lot of your efforts 😊

Resource coverage in the browser

Trishul — Mon, 22 Jun 2020 13:41:04 +0000

One of the performance wins for the websites is the deferred loading of JS or CSS which are not required at the first load.
While starting a project it's easy to maintain this, over the period of time when there are consistent developments and multiple devs contributing to the project, it may not be that smooth.

The unused code in general results in slower websites.

Unused CSS or JS are generally render blocking resources, which are executed even though they do not make any impact on the loading of the page.
Unnecessary data usage impacts more if user is on cellular data.
It results in reduced maintainability.

Chrome devtools have a coverage panel, where we can observe all the loaded resources(CSS/JS). It displays all the downloaded resources and displays used and unused bytes.

This panel is not by default visible in devtools, following is how it can be used:

Go to the command panel (command/Ctrl + shift + P)
Once the command panel is up, type coverage
This will open the coverage panel. Click the reload button in coverage panel.
Each resource is detailed with resource URL, type, size, and used/unused bytes/percentage and a small bar graph of the same.

This just helps us to visualize how much code/CSS is unused at the given page, we need to optimize the code by ourselves ;) For Javascript this is a bit difficult to achieve this via any tool, its more of structuring the code while development and review cycles. For CSS there are few tools that can help to achieve this, some of them can be integrated into the build process.

Examples :

Offline caching with serviceworkers

Trishul — Mon, 22 Jun 2020 11:55:04 +0000

Caching always has proven to be the winner when it comes to performance.
Browser by default caches the resources on its end, but to get these resources it still needs the internet. A browser can serve resources from its cache only when a network request is made

Service workers provide a way to bypass the network request. It sits between the network and browser and can decide where to serve resources from.

The basic lifecycle of the service worker is as follows:

Setup

Register Service worker:

We need to check if the browser supports service workers and then register by providing the path to the serviceworker file.

In Page

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

Install Service worker:

When the serviceworker is installed (initiated by the script from website), we need to define the resources which we wish to cache, These are cached and linked to specific Cache key.

Ideally, we should not cache any third-party resource but only of which are served from the same domain.

In Service worker

self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open('cache-key').then(function (cache) {
            return cache.addAll(
                [
                    '/css/style.css',
                    '/js/script.js',
                    '/index.html'
                ]
            );
        })
    );
});

Activate Service worker:

In this step we can delete all the unused cache and also bump the cache version (using cache-key).

In Service worker

self.addEventListener('activate', function (event) {
    event.waitUntil(
        caches.keys().then(function (cacheName) {
            return Promise.all(
                cacheName.filter(function (name) {
                    return name !== 'cache-key';
                }).map(function (name) {
                    return caches.delete(name);
                })
            )
        })
    )
});

Handle network request:

Listen to the fetch event and capture the network request, depending on your cache strategy handle and return the response.

In Service worker

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request).then(function (response) {
            if (!response) response = fetch(event.request);
            return response;
        })
    );
});

Caching techniques

Cache only - This serves the files only and only from the cache, it will never make a network request. Use this if you don't want to update your resource frequently

In Service worker

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request));
});

Cache, fallback Network - This serves the files from the cache if the file fails to load from the cache it will make a network request.

In Service worker

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request).then(function (response) {
            if (!response) response = fetch(event.request);
            return response;
        })
    );
});

Network, fallback Cache - This makes first a network request and if network request fails then it fallbacks to cache response, please note the cache will be returned only when the network request is completed and gives a failed response.

In Service worker

self.addEventListener('fetch', function (event) {
    event.respondWith(
        fetch(event.request).catch(function () {
            return caches.match(event.request);
        })
    );
});

Cache then network - The response is first served from the cache on the page, and then network request is made. When the response from network request is received then again the response is served and the page is updated (or whatever the logic required to do).

In Page

caches.match('/data.json')
    .then(response => {
        updatePage(response);
        fetch('/data.json').
            then(result => {
                updatePage(result);
            })
    })
    .catch(() => {
        fetch('/data.json').
            then(response => {
                updatePage(response);
            })
    });

In Service worker

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.open('cache-key').then(function (cache) {
            return fetch(event.request).then(function (response) {
                cache.put(event.request, response.clone());
                return response;
            });
        })
    );
});

Serving custom response - This can be the best way to notify the user for an offline connection or some other custom pages.

In Service worker

self.addEventListener('fetch', function (event) {
    event.respondWith(
        // Try the cache
        caches.match(event.request).then(function (response) {
            if (response) {
                return response;
            }
            return fetch(event.request).then(function (response) {
                if (response.status === 404) {
                    return caches.match('/404.html');
                }
                return response
            });
        }).catch(function () {
            return caches.match('/offline.html');
        })
    );
});

While most of the time serviceworkers are constrained to progressive web apps, but these are also used to make websites more performant and better user experience.