DEV Community: Gijo Varghese

How I made WordPress Faster with 1KB JavaScript

Gijo Varghese — Thu, 28 Nov 2019 10:13:24 +0000

Clickbait title right? 😉

Released 4 months ago, the script is currently used by 4k WordPress sites.

gijo-varghese / flying-pages

Load inner pages instantly, intelligently

Flying Pages

Flying Pages prefetch pages before the user click on links, making them load instantly

Quick Links

Demo: Open https://wpspeedmatters.com and click on any post
WordPress Plugin
Quicklink vs Instant page vs Flying Pages
Join our Facebook Group, a community of WordPress speed enthusiasts

Usage

Quickstart:

<script src="flying-pages.min.js"></script>

With options:

<script>
  window.FPConfig = {
    delay: 0,
    ignoreKeywords: [],
    maxRPS: 3,
    hoverDelay: 50,
  };
</script>
<script defer src="flying-pages.min.js"></script>

delay: Start prefetching after a delay (in seconds). Will be started when the browser becomes idle, using requestIdleCallback. Default to 0.
ignoreKeywords: An array of keywords to ignore from prefetching. Example ['/logout','/cart','about.html','sample.png','#'].
maxRPS: Maximum requests per second the queue should process. Set to 0…

View on GitHub

<script src="flying-pages.min.js"></script>
<script>
  flyingPages({
      delay: 0,
      ignoreKeywords: [],
      maxRPS: 3,
      hoverDelay: 50
  });
</script>

How it works?

Flying Pages injects a tiny JavaScript code (1KB gzipped) that waits until the browser becomes idle, detect links in the viewport (also on mouse hover) and prefetch them so that browser doesn't have to wait while navigating through pages.

The prefetching is done using the prefetch tag:

<link rel="prefetch" href="URL_TO_PAGE">

Prefetch pages in the viewport – Detect links within the viewport (current viewing area) using ‘Intersection Observer’ and tells the browser to prefetch them using ‘prefetch’
Prefetch pages on mouse hover – On hovering links, if it’s not prefetched yet using above ‘viewport’, then Flying Pages will prefetch them instantly (similar to Instant.page).
Limits the number of prefetches per second – If your page has too many links, prefetching all at the same time will cause the server to crash or slow down the website to visitors. Flying Pages limits the number of prefetches per second (3 req/sec by default) using an in-built queue.
Stops prefetching if the server is busy – In case the server starts to respond slowly or return errors, prefetching will be stopped to reduce the server load.
Understands user’s connection and preferences – Checks if the user is on a slow connection like 2G or has enabled data-saver. Flying Pages won’t prefetch anything in this case.

WordPress Plugin

Prefetching links to logout, cart page etc can cause issues. So we need to exclude such links as well as few other options like:

Set maximum requests per second
Delay to start prefetching
Mouse hover delay
Disable for logged in admins

The Flying Pages WordPress plugin comes with a settings panel to configure all these:

Demo?

Check out my blog WP Speed Matters

How my side project became my full-time Startup!

Gijo Varghese — Wed, 13 Mar 2019 17:48:15 +0000

This is the story of how a side project I created for an e-commerce website, that later became a full-time startup.

I hope every developer's dream is to build a product themselves and live with it. Here is how I did it!

How it all started

Back in 2017, I was working on a startup called Quotzap. It's an RFQ (Request for Quote) platform where users can request the price for building materials

To get more conversions we tried several chat widget like Crisp, Intercom etc. As expected users put their email address and asked a few doubts. Things went well. But...

We got a problem

As soon as we get back online and reply to those conversations via email, we found that only 10-30% is opening their emails!

The hack!

So I made a quick hack. I used the Facebook Page plugin (an iframe) where users can directly message to a page from website

Directly embedding this on to the website didn't have many conversions, so I made a beautiful wrapper around it with the help of my designer.

Result?

Since users don't need to type the email address and they're already logged into Facebook, they were more likely to ask questions. The replies we sent were directly delivered to their Facebook Messenger. Guess what? We got 90% open rates and 4-10x conversions!

The turning point!

I thought why not others could benefit from it? So I made it available as a plugin so that others can embed it on their website. I offered a free version and a paid version with customization for $29.

Messengerify is born!

That was my MVP (minimum viable product). After a few weeks, I launched it ProductHunt and the results were amazing. I got 500+ purchases that resulted in $5500.

Spend time on talking to customers, less code

As developers, most of our focus will be adding new features. Instead, we should put more focus on talking to customers and get their feedback.

// Detect dark theme var iframe = document.getElementById('tweet-929592267664265216-251'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=929592267664265216&theme=dark" }

I followed these golden rules and I revamped my product to MFY.im for creators.

The new MFY.im (previously Messengerify)

Facebook didn't like the name "Messengerify" 😢. So I renamed it to MFY.im. The initial version was just an MVP. After hiring a few engineers I revamped it focussing on creators (Bloggers, YouTubers, etc, the niche I picked)

I built two widgets (Subscription box and corner widget) so that it's easy for visitors to subscribe to your blog/youtube. Later you can send them broadcasts and automated messages on new blog posts/youtube videos

Subscription box

Corner widget

Broadcast sent to Messenger

Launch on ProductHunt

I just launched in on PH today. It would be great if you can spare 1 min to support and give me your feedback about my product in ProductHunt. Check out MFY.im in ProductHunt

If you aren't aware of ProductHunt, it's a website that showcases top (5-10) products every day.

If you've built a product, do launch it in PH. I'm also writing a blog post on how to launch in ProductHunt!

ReactJS – Auto Lint & Format on Git Commit with Airbnb Style Guide

Gijo Varghese — Sat, 02 Mar 2019 10:42:08 +0000

When you’re working in a team, each developer will have their own style. It’s very important to have a consistent style across all the files.

Looking at a piece of code, you shouldn’t be able to tell who wrote it 😉

With this guide, you’ll be able to set up auto linting and formatting on Git commit.

If you’re a NodeJS developer, read this – NodeJS – Auto Lint & Format on Git Commit with Airbnb Styleguide

It’s divided into 4 parts

You’ll learn

Setup Eslint with Airbnb Style Guide
Setup Formatting with Prettier
Auto Lint & Format on Git Commit
Configure VS Code for Eslint and Prettier

Why you’ll need Linting and Formatting?

Clean code
Easily find errors, typos, syntax errors
Follow the best practices
Warning on using deprecated/harmful methods
Have a consistent style in code across the team
Avoid committing ‘harmful’ code like console.log
Make PR awesome, less headache for reviewers!

Setup Eslint with Airbnb Style Guide

Eslint is a linting utility for JavaScript and JSX, with some nice rules and plugins. Anyone can write rules for Eslint. An example rule could be “avoid using console.log()“

Luckily Airbnb has written a Style Guide for JavaScript which covers most of the best practices they use. It’s basically a collection of different rules. You can read it here – Airbnb JavaScript Style Guide

Step 1 – Install necessary packages by
npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Step 2 – Create a new file .eslintrc at the root directory of your project and paste the following

{
  "env": {
    "browser": true
  },
  "extends": ["airbnb", "prettier"]
}

Step 3 – Add a new command to lint in package.json – "lint": "eslint 'src/**/*.{js,jsx}' --fix"

Now you should be able to able lint your code by running npm run lint. It will try to fix errors that are fixable. Otherwise will throw errors/warnings

Setup Formatting with Prettier

While Eslint is for Linting and finding errors in the code, Prettier is purely for formatting. Besides JavaScript Prettier also supports formatting json, HTML, CSS, markdown, sql, yaml, etc. Using both Eslint and Prettier is highly recommended.

Step 1 – Install Prettier CLI package by npm i -D prettier-eslint-cli eslint-config-prettier

Step 2 – Add a new command to format in package.json – "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'"

Just like we did earlier you should now able to run npm run format to format the code using Prettier!

Auto Lint & Format on Git Commit

Even though we’ve built commands to run lint and formatting, most of the time developers forget to run it and commit to git. You can set up npm run lint to your CI/CD so that whenever there are some errors it will fail. However, it will be really nice if we would do these checks every time when someone commits.

Husky and Lint-staged to rescue

Husky allows you to add commands to run before committing. It takes advantage of the git hooks.

Lint-staged – “Run linters against staged git files”. Running Eslint and Prettier on all files on every commit will be very time-consuming. With lint-staged you can run those only on the staged files.

Install husky and lint-staged by npm i -D husky lint-staged

You’ll need to edit the package.json to configure it. Here is the full file:

{
  "scripts": {
    "lint": "eslint 'src/**/*.{js,jsx}' --fix",
    "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'"
  },
  "lint-staged": {
    "**/*.js": [
      "eslint --fix",
      "prettier-eslint --write",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "devDependencies": {
    "eslint": "^5.15.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "prettier-eslint-cli": "^4.7.1",
    "husky": "^1.3.1",
    "lint-staged": "^8.1.3"
  }
}

We tell husky to run lint-staged on every commit. Lint-staged will run eslint, prettier, and ‘git add‘ on staged files. The last ‘git add‘ is to add the changed filed back to commit since it might be changed formatting.

Need to commit without these checks?

What if there is a fire 🙂 and you try to commit? “Please remove console logs” or something like that? You tell git not to run these hooks by adding --no-verify (git commit –m -n “Urgent commit!”)

Configure VS Code for Eslint and Prettier

Both Eslint and Prettier have great integrations for VS Code. It will automatically highlight errors/warnings, fix code while typing/saving, etc.

Install Eslint and Prettier extensions by ext install dbaeumer.vscode-eslint and ext install esbenp.prettier-vscode

Once you’ve installed the extensions, open VS Code settings.json (Ctrl+,) file and add the following:

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "prettier.eslintIntegration": true
}

Conclusion

You should now have Eslint and Prettier configured so that whenever you try to commit files, they’ll scan the files and try to fix all error, or show you the errors that are not automatically fixable. Hope you enjoyed it.

Comments below if you run into any problems or has any other feedback!

This article was initially posted in my blog Coffee N Coding. Follow me on Twitter, I share a lot of cool stuff like this.

Subscribe to my blog via FB Messenger

Boost your Website Speed with 2 Lines of Code

Gijo Varghese — Sat, 26 Jan 2019 16:41:18 +0000

Consider you're reading a blog post. While reaching the bottom you can see related posts. What if your browser will preload those pages even before you click?

Super fast inner pages, right?

Introducing Quicklink

QuickLink is a tiny JavaScript code that will detect links within the viewport and prefetches URLs to the links.

Installation

npm install --save quicklink

import quicklink from "quicklink/dist/quicklink.mjs";
quicklink();

Full api docs

But it will load unnecessary data, will it slow down my user?

Quicklink waits until the browser is idle, checks if the user isn't on a slow connection or has data-saver enabled.

Result? Those URLs will load instantly!

Will it slows down my website?

It's only < 1KB minified/gzipped

Did it help?

Follow me on Twitter, I share a lot of cool stuff there