Forem: Anshul Gupta

How to write Netlify lambda function?

Anshul Gupta — Tue, 21 Jul 2020 16:13:49 +0000

Netlify is an awesome service that offers Webhosting, Analytics, Free SSL, Netlify lambda functions, etc.
Today I will demonstrate Netlify lambda functions. Netlify lambda functions is a serverless backend service which can be used to perform any serverside task. Under the hood, it uses AWS lambda functions, but Netlify removes all the complexity and gives an easy to use interface and the best part it has a great free tier.
Before proceeding, I assume that you know how to deploy your website in Netlify, If not check out my article How to use Netlify on GuideFather.

Steps to write Netlify lambda functions

To create a lambda function create a folder with any name you want (I am using API), inside that folder create a JS file( I am creating getJoke.js). keep in mind that the folder and file name will be the URL.
Add the following code to the JS file (getJoke.js)
Create a netlify.toml file and add the following code. This file will indicate which one is the function directory and what command to run
Commit and push the code to GitHub, If the continuous integration is activated then your functions will be automatically deployed. You can verify the functions in the functions tab Netlify will provide you an URL from which you can access the code For more info check my article

Thank you for reading

Create a desktop application from your website in 10 minutes

Anshul Gupta — Tue, 30 Jun 2020 18:35:48 +0000

If you have ever tried to build a desktop application in a traditional way i.e. in C, JAVA, .Net then you will agree it no only time consuming but costly.
Using a cross-platform framework helps you to reduce the cost and time to build a production-ready application.
Electron is one of the most famous frameworks to build a cross-platform application. Many famous Softwares like VS Code, Atom, Slack are build using Electron.
I would suggest to give it a try, it will hardly take 10 min.
I've built a small application to get you started where you can create a desktop application from your website and maintain a history of your navigation.
I've explained it in detail in my blog how to create a desktop app

What is electronJs

With the help of ElectronJs one can build cross-platform desktop applications with HTML, JavaScript, and CSS. It was introduced in 2013 to make cross-platform text-editors, later its scope was extended to build other utility apps. Electron has chromium in it.
Electron has two processes
Main Process: It manages the bootstrapping the application and lifecycle events like starting, quitting, etc. This main process is responsible for interacting with the native GUI of the Operating System. It creates the GUI of your application.
Rendering Process: It is created by the main process and its main purpose is to render the UI.

Clone the project from my Github Repo and change my website URL www.blog.guidefather.in to your website URL and if you are interested then you can check out my blog how to create a desktop app to learn more.

How to check the browser is offline?

Anshul Gupta — Sat, 20 Jun 2020 03:59:59 +0000

Let the user know that he/she is offline is not only a good feature but it helps developers to avoid unexpected conditions and handle errors gracefully. By detecting the client has gone offline you can perform all the security measures to ensure the security of your applications.
I have identified four ways to detect browser is offline which are briefly discussed in my article How to detect Browser is online or offline?

As mentioned in this there are two categories

Client-Side Approaches
Server-Side Approaches

You can't rely on client-side approaches to check that the user has internet or not because the browser checks that the system is connected to a network or not which means the user may be connected to a local network that doesn't have access to the internet so I will discuss Sockets approach which is nice and easy to implement if you already using sockets in your project

let interVal=null; const socket=io() socket.on("connect",function(){ updateIfRequire("online"); clearInterval(interVal) }) socket.on("disconnect",function(){ interVal=setTimeout(() => { updateIfRequire("offline") }, 100); })

You may be wondering, why setTimeout and clearInterval?
Because Sockets are very fast and in real live projects, small errors can occur any time which may interrupt the socket connection, however, sockets will try to reconnect and establish the connection within few milliseconds that's why I have used setTimeout to update the state after 100ms, meanwhile, if the sockets get connected just clear the setTimeout to stop code from updating the state.
You Can get the complete code from here
Check the article more info

Please let me know if you have a better approach.

t̷h̷a̷n̷k̷ y̷o̷u̷ f̷o̷r̷ r̷e̷a̷d̷i̷n̷g̷

Serve Website/Api from your own system

Anshul Gupta — Wed, 10 Jun 2020 03:05:08 +0000

Have you ever seen a condition when you need to change your design or API frequently to meet the demand?
I did, a few days back. Because of lockdown, My colleagues and I were working on a project from home. We are not in the same local network, so to connect backend and frontend I had to push to code to server then my colleagues start working.
Then I found a service called NGROK

Ngrok is a cross-platform service that enables you to expose your local development server to the internet.

How to use NGROK

Go to their website
Download setup for your OS and exact it.
Open terminal in the same folder and type

./ngrok http port_to_map

example ./ngrok http 3000
Ngrok will provide you an URL. Using which you can access your api/website publically.

If you want to know more you can check this link Host website from local system.
I believe using NGROK is more easy than reading this article.
If you have a better alternative or solution, please let me know. I would love to explore.

▀█▀ █░█ ▄▀█ █▄░█ █▄▀ █▄█ █▀█ █░█
░█░ █▀█ █▀█ █░▀█ █░█ ░█░ █▄█ █▄█