Skip to content

Instantly share code, notes, and snippets.

View isaumya's full-sized avatar
👨‍💻
Think Twice, Code Once

Saumya Majumder isaumya

👨‍💻
Think Twice, Code Once
View GitHub Profile
@isaumya
isaumya / optimize-svg-files-with-svgo.md
Created April 25, 2020 09:50
Optimize SVG files with SVGO

Install SVGO

Intsll the node js tool SVGO

$ [sudo] npm install -g svgo

Run Command

svgo *.svg --multipass --enable=removeMetadata,removeTitle,removeDesc
@isaumya
isaumya / native-browser-lazy-loading.md
Last active November 14, 2019 10:35
Native Browser Lazy Loading - Take Advantage Of It Instead Of Using JavaScript Plugin (Take Work Out of Your Browser Main Thread) 🥳

Native Browser Lazy Loading - Currently supported in Chrome Desktop & Mobile 🥳

If you are using img or the iframe tag you can take advantage of the loading attribute in your HTML and not only it will use the browser's native lazy loading (without using any plugin or javascript for it) it will also make your page faster.

Moreover as this a browser native feature you can get rid of your JavaScript plugins and in terms reduce work load on your Browser's Main Thread and making your web app/site load faster.

This feature is being supported by Chrome Desktop & Mobile as well as the new evergreen Googlebot. Checkout the Chrome Dev Summer 2019 video, also checkout this Can I Use link in case you wanna see the full browser support.

Native Usage for img and iframe Tags

@isaumya
isaumya / http2-server-push-nuxt-js.md
Created October 27, 2019 16:47
Add HTTP 2 Server Push to Nuxt JS Application (Universal Mode) - Tested in Zeit Now

How to do HTTP/2 Server Push in Nuxt.JS App (Tested in Universal Mode & Hosted in Zeit Now)

While developing my Nuxt.js app, the one thing I tried to do most was HTTP/2 Server Push, as I am hosting my app on Zeit Now which does support both HTTP/2 and Server Push. The main reason I wanted to do it was I was using Bootstrap Vue on my project. Whcih add the Bootstrap CSS + Bootstrap Vue's own custom CSS as inline style to the document which was making the document huge. Moreover in bootstrap vue you can do bootstrapCSS: false which will not add the Bootstrap's default CSS to your page, but it will add it's own custom CSS.

Also, in my nuxt have I had a lot of CSS at the component/layout level, which are also getting added to the document as inline style. It was getting crazy. At this point I can either load the bootstrap from a CDN which costed me another external request or I can host it myself (Zeit does have CDN) on my own CDN and then do HTTP/2 server push. So, that is what I diid. I also load a style

@isaumya
isaumya / get-cleint-ip-and-location-details-firebase-cloud-function.md
Created October 26, 2019 13:06
Get Cleint IP & IP Details with Firebase Cloud Callable Function

Example Firebase Cloud Function - Callable (not onRequest)

exports.checkReq = functions.region('asia-east2').https.onCall(async (data, { rawRequest }) => {
  try {
    const ip = rawRequest.headers['x-forwarded-for'] || rawRequest.connection.remoteAddress

    const response = await axios.get(
      `http://api.ipstack.com/${ip}?access_key=${IPSTACK_API_KEY}`
 )
@isaumya
isaumya / nuxt-js-firebase-auth-and-cloud-firestore.md
Last active September 14, 2023 12:29
Nuxt JS: Keep user logged in with Firebase Auth and also fetch the necessary User data from Cloud Firestore and put it in your Vuex store if the user is already logged in before rendering the page

Nuxt JS: Keep user logged in with Firebase Auth and also fetch the necessary User data from Cloud Firestore and put it in your Vuex store if the user is already logged in before rendering the page

Step - 1

Install the required packages.

  • If you use npm npm i firebase firebase-admin cookies js-cookie

  • If you use yarn yarn add firebase firebase-admin cookies js-cookie

@isaumya
isaumya / http-curd-req-in-firebase-cloud-functions.js
Last active August 21, 2023 16:46
Making HTTP CRUD requests with Firebase Cloud Functions using node request-promise package
const functions = require('firebase-functions');
const cors = require('cors')({ origin: true });
const rp = require('request-promise');
exports.checkIP = functions.https.onRequest((req, res) => {
cors(req, res, () => {
if( req.method !== "GET" ) {
return res.status(401).json({
message: "Not allowed"
});
@isaumya
isaumya / vs-code-git-repo-add.md
Last active August 9, 2023 15:46
Add repo to VS Code Projects

Add Git Repo to your CLI created project in VS Code

Let's say that you have created a project using @vue/cli or some other cli locally. Now you created a github repo. Also at the time of creating the repo you have set the LICENSE file from the web creation portal. Now if you are using VS Cose, here are the following commands that you need to run for the first time to ensure the remote repo gets properly connected with your project.

Step 1. Add Remote Repo URL

git remote add origin https://<AccountName>.github.com/somerepo.git

Step 2. Pull from the Remote Repo with --allow-unrelated-histories flag

@isaumya
isaumya / gf_date_picker_block_synday.js
Created March 25, 2018 07:58
Disable Sunday in Gravity Form (WordPress) Date Picker section
gform.addFilter( 'gform_datepicker_options_pre_init', function( optionsObj, formId, fieldId ) {
if ( formId == 8 && fieldId == 2 ) {
optionsObj.firstDay = 1;
optionsObj.beforeShowDay = function(date) {
var day = date.getDay();
return [day != 0,''];
}
}
return optionsObj;
});
@isaumya
isaumya / .htaccess
Created October 25, 2017 08:37
Dynamic Level Website htaccess code that needs to be converted to the respective nginx varient in the nginx config file in the new LEMP based server
#----Rewrite Rule for New Version-------------
RewriteRule ^chart/charts-technicals-large/(.+)$ wp-charts_technicals_large_report.php?f=charts-technicals&r=$1 [NC,L]
RewriteRule ^crossweb/(.+)$ https://www.dynamiclevels.com/ [NC,L]
RewriteRule ^crossnet/(.+)$ https://www.dynamiclevels.com/ [NC,L]
#------------------RSS Feed URL---------------
RewriteRule ^rss/daily-market-update.rss wp-rss.php?f=1 [NC,L]
@isaumya
isaumya / somepage.php
Created February 2, 2017 10:42
Example code of using AICP WordPress plugin directly inside your WordPress theme code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Some Page</title>
<link rel="stylesheet" href="">
</head>
<body>