DEV Community: Sanket Patel

`useWindowSize` React Hook To Handle Responsiveness In JavaScript

Sanket Patel — Thu, 05 Mar 2020 09:39:58 +0000

It is sometimes helpful to know the responsive breakpoints in JavaScript to tweak and run the logic depending on the screen size.

We will be creating a Custom React Hook. It will determine the screen size. And, we will be able to use the screen sizes just like we do in CSS media queries to update the UI or make the logic run a specific way.

The code is dependent on the window object of the browser. The solution won't work in case of server-side rendering where the window object won't exist.

We will name the custom hook useWindowSize. We will have a state variable called windowSize which will be exported to be used by React Components.



import { useState, useEffect } from "react";

function useWindowSize() {
  const [windowSize, setWindowSize] = useState(undefined);

  ...
  //code to determine the screen size will go here

  ...

  //expose windowSize variable to be used by Components
  // to make responsiveness related chanegs
  return windowSize;
}

export default useWindowSize;

Now to determine the screen size, we will first check if the client is a browser, by checking if we have access to window object. If we have, we can get the width of the screen using window.innerWidth and assign into the state variable as default value.



import { useState, useEffect } from "react";

function useWindowSize() {
  //👇
  const isWindowClient = typeof window === "object";

  const [windowSize, setWindowSize] = useState(
    isWindowClient ? window.innerWidth : undefined
  );
  //☝️

  return windowSize;
}

export default useWindowSize;

You can use this hook in the component as below,



import React from "react";
import useWindowSize from "./useWindowSize";

export default function App() {
  const windowSize = useWindowSize();
  return (
    <div>
      <h1>The screen width is: </h1>
      <span style={{ fontSize: "30px" }}>{windowSize}</span>
    </div>
  );
}

However, on resize of the window, this hook won't inform us about the change in size(as shown above gif). To achieve it, we will have to implement window's on resize listener. We will use it in useEffect so that we won't register the listener each time it renders and we make sure that it gets unregistered when it needs to.



import { useState, useEffect } from "react";

function useWindowSize() {
  const isWindowClient = typeof window === "object";

  const [windowSize, setWindowSize] = useState(
    isWindowClient ? window.innerWidth : undefined
  );

  //👇
  useEffect(() => {
    //a handler which will be called on change of the screen resize
    function setSize() {
      setWindowSize(window.innerWidth);
    }

    if (isWindowClient) {
      //register the window resize listener
      window.addEventListener("resize", setSize);

      //un-register the listener
      return () => window.removeEventListener("resize", setSize);
    }
  }, [isWindowClient, setWindowSize]);
  //☝️

  return windowSize;
}

export default useWindowSize;

Now if we want to have breakpoints instead of this absolute widths, we can convert the sizes into specific breakpoints (let say sm, md, lg, xlg) using a simple util function.



import { useState, useEffect } from "react";

//👇
//a Util function that will conver the absolute width into breakpoints
function getBreakPoint(windowWidth) {
  if (windowWidth) {
    if (windowWidth < 480) {
      return "sm";
    } else if (windowWidth < 1024) {
      return "md";
    } else if (windowWidth < 1200) {
      return "lg";
    } else {
      return "xlg";
    }
  } else {
    return undefined;
  }
}
//☝️

function useWindowSize() {
  const isWindowClient = typeof window === "object";

  const [windowSize, setWindowSize] = useState(
    isWindowClient
      ? getBreakPoint(window.innerWidth) //👈
      : undefined
  );

  useEffect(() => {
    //a handler which will be called on change of the screen resize
    function setSize() {
      setWindowSize(getBreakPoint(window.innerWidth)); //👈
    }

    if (isWindowClient) {
      //register the window resize listener
      window.addEventListener("resize", setSize);

      //unregister the listerner on destroy of the hook
      return () => window.removeEventListener("resize", setSize);
    }
  }, [isWindowClient, setWindowSize]);

  return windowSize;
}

export default useWindowSize;

The codesandbox of the final code is below

All the best for making your users happy with all size of devices! 😄

Cover Photo by Hal Gatewood on Unsplash

Running Out Of Free Build Minutes On Netlify? Try This.

Sanket Patel — Sat, 22 Feb 2020 18:09:47 +0000

Short Answer

The Netlify provide a feature called Build Hooks. It is a URL, which we can hit via curl to trigger deployment for the specific branch.

Long Answer

What is Netlify?

It is a great service to configure and deploy our web apps in no-time. The UI, features and their reliability everything is so slick. They are now not only the deployment solution but also expanding towards serverless functions, auth, storage, analytics and many more.

What is build minutes?

The computation time(in minutes) on Netlify Server to build your app and generate the production files during deployment. On free plan netlify provides 300 free build minutes.

The Problem : They may fall short?

Many times we need to have our development going on in several branches. If we have multiple developers working on the project, we generally keep pushing the code frequently. And if the changes on these branches need to reviewed, we configure them as continuous deployment. So with each push, if your branches are deployed, you may cross the 300 free minutes.

The Solution

One of the awesome feature Netlify provides is deploy via calling a build hook. It is nothing but a URL which we should hit or run curl on it to trigger the deployment of the branch. And this is really helpful as except production we are generally okay not to deploy the branches on each push. These command will make our code deployment on-demand and will save the build minutes.

To keep them handy, we can configure it to the script section of package.json as below,

...
"scripts": {
    "start": "<start command>",
    "deploy-dev": "curl -X POST -d {} https://api.netlify.com/build_hooks/5e3d300exxxxxxxca2246926", //<--
    "test": "<test command>",
}
....

Conclusion

If you think the non-master branches are unnecessarily using the build minutes and you are running out of free quota just due to that, you should use build hooks.

Few Awesome CSS Snippets I Recently Learned

Sanket Patel — Thu, 31 Oct 2019 14:15:18 +0000

Center the absolute positioned content

.center{
  top : 50%;
  left : 50%;
  transform : translate(-50%,-50%);
}

Codepen: https://codepen.io/3sanket3/pen/LYYOWwV

Maintain aspect ratio of the container

.container{
  padding-bottom:56.4%; /* aspect ratio 16:9*/
}

The percentage should be calculated as: 16:9(w:h) = h*100/w => 56.25%. Similarly,

1:1 => 100%
4:3 => 75%

Codepen: https://codepen.io/3sanket3/pen/dyyZWMX

Truncate the text

.truncate{
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Codepen : https://codepen.io/3sanket3/pen/OJJOmqB

Set width as the available rest of the space

It is useful when you have two adjacent containers. One has a fixed width and the other one should adjust according to the available remaining space.

.fix-width-container{
  float: left;
  width: 200px;
}
.adjustable-container{
  width: calc(100%-200px);
}

Using CSS Variable

// Declaring variable at root level, you can set it at common parent level
:root{
  --left-pane-width : 200px; 
}

.fix-width-container{
  float: left;
  width: var(--left-pane-width);
}

.adjustable-container{
  width: calc(100%-var(--left-pane-width));
}

Codepen: https://codepen.io/3sanket3/pen/qBBVjgy

Preserve line breaks in the preview

It is useful when we want to show a preview of the content user entered in let say <textarea>

.preview{
  white-space: pre-line;
}

CSS is something, which has no ends of learning. I would love to learn if you have such interesting snippets or links.

Icon Courtesy: https://thenounproject.com/term/css/60411/

How To Give An Impactful Demo At A Talk

Sanket Patel — Tue, 02 Jul 2019 13:04:57 +0000

Giving code demo at a meetup is a crucial part. And if it goes wrong, it may put you in a tough situation. In addition, the demo should be something that the audience should find interesting, easy to understand and doable. I will explain a few tricks I am using while giving a demo and it's working so far.

Though minimal, it should be a practical application that the audience can relate to 🚗

A demo should be relatable to the practical scenario most of our audience are aware of.

Also, they should feel like, they can do it with little effort, and for that,

Try to make it easily understandable. You can show an architecture diagram to give an overall idea
Use third-party services/libraries so that users try to focus on the core concept and not additionally required supportive code
Keep a very simple file structure.

Code from Scratch 🐣

I found, if we start our demo from creating a project folder itself, the audience feels like no magic going on.

If you are using frameworks, yes you may not want to spend time on long-running scaffolding process. In that case, if you can start from the default scaffolded files itself it would be great. If you need some utilities by default, you can create a package or at least separate folder which audience can consider a third party library and not focus on its implementation.

Use third-party services 👨‍🔧

When we are making demo practical, we may need third-party services like send an email, upload image, pull JSON data of specific business etc. Nowadays in the growing era of No Code solutions, most of such services come with easy integration. So, better we quickly add them and try to make demo as real application as possible.

The services mostly have with free quota limits so just make sure you don't exceed the same during demo itself 😉 I experienced it once 😅

Audience should feel like it will be doable 😎

The actual success of the demo is when your audience tries it out and can implement themselves what you taught. And they will only try if they find it doable. Obviously, there can be people with a variety of experience level. But we should try to make it feel as easy as possible.

Keep some contents in mind to fill-in while waiting for long running tasks 📄

There may be some tasks during demo which may take time like, stop and start the project, deployment, downloading libraries etc. While waiting for those process to complete, we can explain related concepts. So keep some content for the same.

Practice, Practice and Practice 👩‍💻

Practice can only make you write the code quickly with less error. There will be many scenarios that you may fall into which you might not have given thought. By practicing more, you will come across them and get clear before the actual demo. Also, as I suggested in preparing your first talk, you can give a demo to your friends and get feedback.

Keep screen recording as backup 📹

We all know, it's programming! If unfortunately you run into an unexpected situation and getting out of it in limited time is not possible, you can explain the demo from screen recording.

Hope you find them useful. Please add your suggestions as well in the comment. I would love to learn from your experience.

Preparing Your First Talk

Sanket Patel — Thu, 13 Jun 2019 12:20:48 +0000

With this post, I wanted to share my experience of preparing for the talk and things to consider while delivering it.

The target audience of the post is the developers planning to speak for the first time or have just started speaking in meetups or conferences.

The frequent speaker may possibly get very few things out of this post. But, we would like to learn from your experience on the same. Please do share and guide.

You don't have to be an expert 😎

Yes, you should be prepared well and try to justify the amount of time your audience is spending on you. But, you don't have to be an expert.

Sometimes you may not be working on a topic you are going to deliver in your regular project. In such case, try to be aware of the surroundings of your topic at least before a few weeks of delivery. Try to do as many examples as possible. Check out practical solutions and case studies.

It may be possible that you may not be able to answer some of the questions from the audience, but that's fine. You can throw back to the audience. Or, you can get the contact of the person asking, come home, research and reply.

There can be an open discussion topic instead of in-depth on a single topic 👐

We just started a meetup group in Surat, India. During our first meetup, we were not sure which topic the local community would like out of the huge JavaScript eco-system. So, we kept it as an open discussion. Two of us covered various areas of JavaScript briefly and tried to put open to the audience to discuss them.

We found it really helpful, as the first-timers were able to focus on come out and speak instead of worrying about in-depth technical knowledge.

Pairing with someone 👭

It is helpful to gain confidence at the same time, the in-between breaks help you to settle and start afresh with the next topic.

Practice by giving demo talks to your friends 👨‍🏫

This will immensely necessary to practice your talk and get it reviewed. If possible, you can try to give a demo to the friends having a different technology and level of experience. It will make your content perfect for the variety of audiences you are actually going to have.

Practice your code a lot 👨‍💻

If you are going to do live coding(which you should), better you practice at least 3-4 times. That way you can train your subconscious mind for making fewer mistakes even during the nervousness.

Audience learns more if you make mistakes while live coding 🐛

From the mistakes you do while live coding, the audience will learn the complex cases. So don't worry about the mistakes. In addition to that, you are doing pair programming with the whole audience. There are chances they may help you if you get stuck.

Just make sure you are clear with the concepts and have enough practice, so that mistakes may not completely block you and take huge time.

Alternatively, you can also screen record your coding in advance and keep with you, which may help as a rescue if anything goes worst.

Keep the Bio of your social accounts up to date 💄

You will be one of the heroes of the meetup/conf. It's likely that people will try to find you on the internet. Better you show them the latest info.

You have a chance for marketing 📢

If you are building a product, contributing to open source, starting a newsletter, designing course or doing anything exciting, people are there to hear about it.

Be kind and show gratitude 🙏

Show gratitude to the organizing team for giving you an opportunity to be there as a speaker.

In addition, you can also thank the services you have used in your presentations for free. It may be a free PPT template, images, gifs or anything else. It will help those services to reach more audiences and ultimately make it better.

Hope you find this helpful. Also, add your suggestions in the comment for me and others to learn from your experience.

Cover image icon by Adrien Coquet from the Noun Project

Serverless FAQs

Sanket Patel — Wed, 05 Jun 2019 11:39:55 +0000

No Servers? Really? 😲

Haha, don't go with the literal meaning of the name. There are servers 🤦‍, just you won't have to manage the way you typically do. The cloud providers will dynamically manage the allocation of resources.

You just write functions and deploy to the cloud. The cloud providers will store your functions in storage. When you ask to run the function, they will pull from storage, run it and done.

How will I be charged? 💸

It will only charge for the computing time of your function. So, no charge when your code is not running 🤑

Does it support my programming language? 👨‍💻

It depends on the cloud providers. Here is list of languages supported by the cloud providers.

AWS: Java, Go, PowerShell, Node.js, C#, Python, and Ruby
Google Cloud: Go, Node.js, Python
Azure: PowerShell, Node.js, C#, Python, F#, Java

There are many other cloud providers that support running serverless functions like Cloudflare, IBM Openwhisks, Kubeless, etc.

Do I have the flexibility to use any version of the runtime environment? 👩‍🔧

No, your code will run on the versions they support. You can find the supported version from the respective providers' documentation. Like, for AWS you can find here.

Any framework that guides me writing serverless functions or the project? 👨‍🏫

https://serverless.com, is provider agnostic and supports most of the languages.
https://claudiajs.com/ for JavaScript
https://www.zappa.io/ for Python
Serverless Application Model for the AWS ecosystem
https://serverlesslibrary.net : libraries by Azure Serverless Community

If servers run on request instead of being ready all the time, won't it take time to respond to my request? 😴

Yes, you may experience latency when you trigger a function.

When you call the function for the first time, it takes time to set up the container and bootstrap the application. It is called a "cold start". But for subsequent requests, the cloud provider tries to reuse the container. And it depends on cloud providers and other infrastructure factors for how much time it will keep the containers live. So, they always advise writing code in a way that doesn't assume the container will be reused.

The 'cold start' time depends on various factors like:

Programming language - statically typed language takes more time
When you update the functions and deploy, it destroys the containers
How frequently your function is being called and keep the container "warm".
The code size, etc.

It is not a huge problem in most of the cases. But still, if you want to avoid the cold start, you can schedule one function which keeps calling the function you want to keep warm, after every certain amount of time.

How to trigger the deployed functions? ⚡️

They can be triggered in many ways:

Once deployed, you will get a dedicated HTTP URL, using which we can call
You can configure the HTTP URLs to use as a REST Apis
The function can be scheduled to run at a specific time
On other cloud infrastructure events like on data change event of storage, etc.

Are there examples, enjoying being serverless? 😎

You can find case studies managed by frameworks and cloud providers like case studies by serverless framework and by AWS Lambda

I would recommend, you start to experiment with serverless if you haven't already. The easiest way is, making the backend functions of your side projects, serverless. And if you are yet to implement your first idea, the serverless will really helpful to remove the server management headache and ship your idea quickly 🚀

Api Key Authentication for Accessing Serverless API at AWS API Gateway

Sanket Patel — Fri, 31 May 2019 12:42:59 +0000

Any REST API should set up some or the other authentication mechanism to secure from unintended uses. The AWS console and Serverless configuration provide an easy way to secure the API endpoints by setting up the API keys.

I am assuming you already have basic idea about the Serverless Framework and setting up API Gateways for Serverless functions. If not, please quickly check my relevant post once.

First, make the endpoints private

Set private: true in the http section of individual functions as follow.



functions:
  hello:
    handler: handler.hello
    events:
      - http:
          path: hello
          method: get
          private: true

List the API key names in serverless.yml

List all the API key names for which we want to generate the api keys, in provider section of serverless.yml as shown below.



apiKeys:
  - myClientOne
  - myClientTwo

The AWS will generate the actual keys for for each names we provided. The keys will be displayed in the output of sls deploy command.

If you explicitly want to specify the API key

You set your own API key value by specifying value property as below. It should be a string with a minimum length of 20. Optionally you can also provide a description to the value.



apiKeys:
  - myClientOne
  - myClientTwo
  - value: myClientThirdValueOfMinLength20
    description: This is explicitly provided api key

Deploy the changes by running sls deploy, the AWS will auto-generate the name of the api key and set the provided value

The below example will set both name and value explicitly



apiKeys:
  - name: myClientFour
    value: myClientFourValueOfR@n0mStr1n6

Append the stage to the API key name

The API keys are stored globally. So, it is advisable to append the stage name with API key name, if clients are allowed to access the multiple stages.



apiKeys:
  - ${self:provider.stage}-myClientFive

The same way if you want to use the environment variable you can do it by ${self:provider.environment.YOUR_ENV_VARIABLE}

Each time we make any change in serverless.yml, we should deploy using sls deploy to have its effect on AWS.

Tip: You can use sls print command to review the compiled yaml configuration file before running sls deploy

Set quota limits

We can set the quota limits to the API as follow



provider:
  ...
  usagePlan:
    quota:
      limit: 5000
      offset: 2
      period: MONTH
    throttle:
      burstLimit: 200
      rateLimit: 100

We can even categorize the quota, for example, free and paid. We should assign the api keys to the respective categories.



apiKeys:
  - free:
      - myClientOne
      - myClientTwo
  - paid:
      - value: myClientThirdValueOfMinLength20
        description: This is explicitly provided api key
      - ${self:provider.stage}-myClientFive

usagePlan:
  - free:
      quota:
        limit: 5000
        offset: 2
        period: MONTH
      throttle:
        burstLimit: 200
        rateLimit: 100
  - paid:
      quota:
        limit: 50000
        offset: 1
        period: MONTH
      throttle:
        burstLimit: 2000
        rateLimit: 1000

All the configuration we did here, can be seen at API Gateway service of AWS Console

I hope you find the same helpful.

The code

You can find the code explained here at https://github.com/3sanket3/serverless-aws-api-gateway

Credits

Reference: https://serverless.com/framework/docs/providers/aws/events/apigateway/#setting-api-keys-for-your-rest-api

Image Credits : Three Six Five and https://worldvectorlogo.com/downloaded/aws-api-gateway

How To Create Serverless API Functions With AWS Lambda

Sanket Patel — Tue, 21 May 2019 14:31:18 +0000

In this tutorial, we will learn how to create the serverless API functions. We will be using the serverless framework and host the functions to AWS Lambda.

Wondering why serverless?

Please check AWS Lambda or Cloudflare's why use serverless.

Get started

Install the serverless globally

npm install -g serverless

Check if it is installed by running serverless -v command on terminal

serverless -v
1.42.3

Get the boilerplate

We will use the aws-nodejs template to create our service, let say with the name testing-one.

sls create --template aws-nodejs --path testing-one

Where sls is a shortcut of serverless.

The default template will have handler.js. It contains a dummy function called hello. The business logic should go inside it. In the next step, we will deploy the same function to AWS Lambda.

Let's simplify the hello function and return the message as below:

module.exports.hello = async event => {
  return {
    statusCode: 200,
    body: JSON.stringify(
      {
        message: `Hi, there!`
      },
      null,
      2
    )
  };
};

Deploy to AWS Lambda

For deploying the functions to AWS, we need to set up credentials in our machine.

If it is already set up in your machine, the below command should display the access key id and secret access key

cat < ~/.aws/credentials

[default]
aws_access_key_id = your-access-key-id
aws_secret_access_key = your-secret-access-key

Else, please follow this video, to set up the AWS credentials.

To deploy the function, run the deploy command

sls deploy

If you navigate to the AWS Lambda console (https://console.aws.amazon.com > Services > Lambda > Function), you will find the hello function deployed there. (Make sure you have selected the correct region at top-right of the screen)

The function name testing-one-dev-hello displayed is in the following format.

< service name > - < stage > - < function name >

Invoke deployed function

sls invoke -f hello

{
 "statusCode": 200,
 "body": "{\n  \"message\": \"Hi, there!\"\n}"
}

where -f is shorthand of -function.

So the function hello is deployed and running. Let's make it a REST API function.

Use the function as REST API

Events are the things that trigger your functions to run. One of such kind of event is HTTP event. The HTTP event can be generated by one of the HTTP endpoints.

Creating GET endpoint

Let say we want to trigger the hello function when a GET HTTP request made to the path /hello.

That is, GET : https://someurl.com/hello

The file serverless.yml is exactly for such kind of configuration in the serverless project.

YAML (.yml) is a data-serialization language and used for configuration files. It's just like JSON but more human readable friendly.

In serverless.yml, change the functions sections as shown below.

Please ensure you have proper indentation as per YAML standards. You can also learn by playing at http://nodeca.github.io/js-yaml/

functions:
  hello:
    handler: handler.hello
    events:
      - http:
          path: hello
          method: get

Deploy the changes

sls deploy

The deploy command output should return you the URL endpoints that we should use to trigger the function.

You can browse the endpoint in the browser. It will hit the lambda function and will return the below result.

{
  "message": "Hi, there!"
}

Accept Query String parameters

You can also pass the query string parameters and process it in your business logic.

Let's update the hello function to process the name parameter passed in as query string

module.exports.hello = async event => {
  if (event.queryStringParameters && event.queryStringParameters.name) {
    return {
      statusCode: 200,
      body: JSON.stringify(
        {
          message: `Hi, ${event.queryStringParameters.name}!`
        },
        null,
        2
      )
    };
  }
  return {
    statusCode: 200,
    body: JSON.stringify(
      {
        message: `Hi, there!`
      },
      null,
      2
    )
  };
};

Now if you will hit the below URL, you should receive output as below

https://some-random-text.execute-api.us-east-1.amazonaws.com/dev/hello?name=Sanket

{
  "message": "Hi, Sanket!"
}

Creating POST endpoint

You can configure the function(let say submitForm) as POST in serverless.yml as below

functions:
  hello:
    handler: handler.hello
    events:
      - http:
          path: hello
          method: get
  # POST endpoint
  submitForm:
    handler: handler.submitForm
    events:
      - http:
          path: submitForm
          method: post

The submitForm function will be

module.exports.submitForm = async event => {
  if (event.body) {
    return {
      statusCode: 200,
      body: JSON.stringify(
        {
          data: JSON.parse(event.body)
        },
        null,
        2
      )
    };
  }

  return {
    statusCode: 200,
    body: JSON.stringify(
      {
        message: "Received nothing"
      },
      null,
      2
    )
  };
};

Deploy the service using sls deploy

You can POST the data to the endpoint using tools like Postman. It should respond with the data sent in the body.

That's it for now. I hope you find the tutorial helpful to get started using the serverless functions.

You can find the code explained here at https://github.com/3sanket3/serverless-aws-api-gateway

How To Quickly Deploy Node Js App To Heroku

Sanket Patel — Mon, 13 May 2019 14:05:06 +0000

This tutorial will cover how to deploy the Node.js project to Heroku - the cloud application platform. We will have our application up by running few commands.

Assuming you have any node.js app that you want to publish. If not, I have listed the steps in this tutorial. The codesandbox for the same is here to set up the basic app.

Prerequisite

Git
- To use the Huroku CLI we will need to have the Git installed in the machine, so make sure you have it.

You can check if it is already installed or not using

    $ git --version
    git version 2.18.0.windows.1

Node 8+

  $ node --version
  v8.12.0

A registered account at https://heroku.com
- Please sign up and verify your email address, if you haven't.

Initialize the Git for the project (if it isn't)

If your project is the git repository itself then move to install heroku

$ git init
Initialized empty Git repository in your-project-path/.git/

Create a .gitignore file to ignore node_modules

$ echo node_modules > .gitignore

Commit the files to git repository

$ git add -A

$ git commit -m 'initial commit'
[master (root-commit) e79168d] initial commit
 4 files changed, 2047 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.js
 create mode 100644 package.json
 create mode 100644 yarn.lock

Install Heroku

Download and install the Heroku CLI as per your platform.

Check if it is installed by checking version.

  $ heroku --version
  heroku/7.24.3 win32-x64 node-v11.14.0

Login to Heroku

heroku login command will ask us to open a browser using pressing any key. Then you can login in browser and the terminal will catch it. Isn't it cool!

$ heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/browser/06c81181-c988-457f-b415-5789e7abd758
Logging in... done
Logged in as 3sanket3@gmail.com

Create a Heroku app

Create the app using command heroku create <optional-app-name>

$ heroku create nodejs-tutorial-one-3sanket3

Creating ⬢ nodejs-tutorial-one-3sanket3... done
https://nodejs-tutorial-one-3sanket3.herokuapp.com/ | https://git.heroku.com/nodejs-tutorial-one-3sanket3.git

Make sure the `package.json` of your project have a `start` command

...
"scripts": {
    "dev": "nodemon index.js", <-- for local development purpose
    "start": "node .", <-- Heroku will use to start the application
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

Note: If you want to use start command for some other task, you can create a Procfile . It will tell Heroku which command to run while starting the application, as explained here.

Deploy the code

$ git push heroku master

If everything goes fine you should see the last part of the command output as below. It contains the URL at which your app is deployed.

Check deployment logs

Using heroku logs --tail command, you can check logs of deployment. It will be updated realtime so you can keep it open while deployment, in another terminal tab/window keep your eye on it.

Ref : https://devcenter.heroku.com/articles/getting-started-with-nodejs
Cover Photo by Rakicevic Nenad from Pexels

Extend 'pairing' to read docs and watch talks

Sanket Patel — Thu, 14 Mar 2019 20:59:59 +0000

Disclaimer : I am not a good story teller, so feel free to jump to the The Idea direclty.

Story

@ron4ex and I frequently reach to each other offline or via call, if we stuck somewhere or need another perceptive in our tasks. In which, the other guy doesn't necessarily have gone through the same scenario but helps the seeking one with one's view and knowledge base.

Currently we both got to work on React + Firebase stack. Two days before, we discussed that each of our project needs a service to keep common firebase query related tasks in it. So we roughly decided the API of the same. And yesterday both of us worked to add that service in our respective project.

Today we had a call to discuss the service. I found the discussion little different than usual. As we were working on same problem, during discussion we were able to share many cases/ideas/issues to make the service much better, which eventually may be a separate library.

From the story above, I was thinking,

The Idea

Let say to read a blog post like https://overreacted.io/a-complete-guide-to-useeffect/ , if two guys sit an decide to read and understand individually. Then meet on a call to discuss on it. What an amazing level of knowledge and understanding they both will get out of it.

The same is applicable to do side projects in same tech-stack or to watch the conference talks.

I am having below blog posts in my to do list to read and understand. Please let me know if anyone want to pair with me for the same.

CRA typescript is compiling slow

Sanket Patel — Thu, 14 Mar 2019 17:43:17 +0000

CRA with typescript is bit slow even after "skipLibCheck": true. Mostly I find hitting F5 better than waiting for the page to auto reload.

Also the intellisense and error detection just stop working many times. I need to close the VS Code to get it fixed.

Is there any config, extensions or anything can help for this?

Thanks

CC: @swyx

Is 20-20-20 👁️ or Pomodoro 🍅 not working for you? Try this.

Sanket Patel — Tue, 29 Jan 2019 12:56:12 +0000

Not sure why but both the techniques didn't work for me and I was in need of something that can force me to take a break.

So I invented 😉 the following technique that works for me. It might sound funny but it's effective.

Drink 2-3* glasses of water 🥛🥛🥛 (or as many as possible)
Start coding 💻
You will need to pee in about 20-25* min, go and attend to it 🚽
Repeat...

Benefits:

More water is healthier
You will need to take a break
You will need to leave your seat and walk
Once done, you will feel relaxed and your mind will be at peace. It will help you with a fresh perspective on your work.

[EDIT] NOTE: By researching on @simoroshka 's comment below, it is found that to urinate up to 10 times a day is okay, not more than that. More information is curated in the comment itself, I highly recommend you also check the same.

Give it a try!

And yeah, any idea about what should I name this technique? 😂🤔

Stay Productive, Stay Healthy!

Proof read by Ronak Baldha