Saumya Majumder isaumya

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

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

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}`
 )

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

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.

	/** IMPORTANT NOTE:
	* Make sure you put this JS in the footer of your site
	* and not to include in a file and then load it in the defer or async way
	* Otherwose the script may not work properly.
	*
	* Though this script was written keeping WordPress in mind, but it can be used
	* on any CMS or in any sites. Enjoy :)
	*
	* Custom script written for www.iSaumya.com/blog/ by Saumya Majumder in 2016
	**/

	<!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>

	#----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]

	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;
	});

	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"
	});