Forem: Naman Gupta

Starter Kit for Static Websites 🚀

Naman Gupta — Wed, 14 Oct 2020 20:51:58 +0000

parcel-static-site-starterkit

A minimalistic(simple) starter kit for Static Websites with out of the box ES6+ and SCSS support. No Config needed. Project On Github

Features 🚀

1- Compatible with All Static Site like Bootstrap Template

2- Out of the box Uglifying/ Minifying of CSS, HTML, JS

3- SCSS Support

4- ES6+ Support

5- Hot Reloading

6- Runs on a local server

7- Auto prefixing - Support IE10 and last 4 versions of all browsers

When and Why should you use this project? 😯

1- No setup required. Just one command to start developing.

2- Provides out of the box ES6+ and SCSS support. No config needed.

3- If you are a beginner and following some tutorial then you can code on your machine hassle-free.

4- If you want to test something locally and you need a preconfigured environment for a static site.

5- You have a website and want to deploy it on production.

How to use 🧐

Make sure you have node installed. If not, I recommend installing via nvm(Node Version Manager)

1- Clone project -
👉 git clone https://github.com/InsaneNaman/parcel-static-site-starterkit.git

2- Navigate to that directory
👉 cd parcel-static-site-starterkit/

3- Install dependencies
👉 npm i or yarn

This would install dependencies (required libraries) under node_modules folder.

4- Run Project
👉 npm run start

🎉🎉🎉🎉 That's it. Your website is live on localhost:1234

5- Put/Write your code in src folder

There are sample files already present (feel free to delete them and add yours) to give you an idea about the architecture. You only need to care about just one file i.e, index.html and that you must put/create at the src (src/index.html) folder level.

Ready to build?

👉 npm run build or yarn run build

This will generate dist folder that you can deploy to anywhere like Netlify, Firebase or wherever you like.

Here is a list of Free hosting Services 🔥

Starter Kit On Github

That's it for today. Feel free to provide any type of feedback/report error. I do appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.

For every minute you are angry you lose sixty seconds of happiness. So, keep smiling. 😉

JS.introduceYourself() - A JS Codelab for beginners 🤓

Naman Gupta — Thu, 08 Oct 2020 09:27:22 +0000

I designed this beginner-friendly codelab which can be helpful in understanding the basics of JavaScript. It has 5 steps with code snippets that you can run and see. (Though, I have attached some GIFs to help you with those snippets).

Codelab Link - https://commudle.com/labs/javascript-introduce-yourself

A Glimpse at CodeLab

I hope you would like it. Don't forget to leave a ⭐️ if do so.

That's it for today. Feel free to provide any type of feedback. I do appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.

Using Redaxios, an 800-byte Axios alternative (Fetch wrapper)

Naman Gupta — Sun, 04 Oct 2020 21:30:51 +0000

Hi there, Its Naman. This blog is for devs like me who use Axios frequently. I love Axios as it provides a clean API and advanced way to play around REST calls. Not only this, I even use Axios for simple GraphQL requests but sometimes I find myself just doing simple CRUD operations (GET, POST etc) using Axios which is overhead in my opinion. So, a couple of months back I found Redaxios. Its a nice little alternative and has been built by Jason Miller (creator of Preact).

Why would you use Redaxios instead of Axios

👉 Just one reason - Import Cost
I try my best to decrease the build size wherever I can. So, if you are someone like me and you are just doing basic RESTful calls then Redaxios is a great choice.

📦 Import cost according to Bundlephobia

1- Axios (Link)

2- Redaxios (Link)

🤔 How to use it?

The best thing about Redaxios is that it doesn't provide its custom API. Just use it like you use Axios.

🛠 Installation

npm i redaxios --save

🛠 Usage

import axios from 'redaxios';

(use as you would normally)

Tip: Start with Redaxios (if you are not sure) and down the line if you find that you need advanced features and Redaxios is not your cup of tea then just change the imports. That easy 😉

That's it for today. Feel free to provide any type of feedback. I do appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.

15+ Easy-Peasy Services to deploy your Static WebApp for Free 🤑

Naman Gupta — Fri, 02 Oct 2020 11:55:49 +0000

Free for Static Site (at least) 🤑

1- Netlify
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Hosting, Serverless, Forms, Analytics etc.
💬 Description - Netlify allows developers to create unlimited websites. Its free tier includes 100GB/Month Bandwith, HTTPS-enabled Custom Domains, Cloud Function (125k per site /month).

2- Vercel (Formerly Ziet Now)
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Hosting, Serverless etc.
💬 Description - Vercel is the company behind Awesome Framework Next.js and that's why provides a smooth process to deploy Next.js app. One can also deploy any statically generated website (Gatsby, HUGO etc) too. Also, the Individual plan is pretty good for creating an MVP or running a side project.

3- Render
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Hosting, Serverless, Database, Cron Jobs, Background Workers.
💬 Description - Render has all services under the hood and all pricing are cost-efficient. Hosting is covered in the free tier.

4- Surge
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Hosting
💬 Description - Surge calls itself "One command hosting" as it allows you to deploy your app in a simple command. The free tier is good for small projects.

5- Firebase
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Hosting, Authentication, Database, Storage, ML, Serverless
💬 Description - Backed by Google, it provides a one-in-all solution. You can prototype a complete app in just some hours. Free tier also covers all products.

6- Zoop
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Hosting, Serverless
💬 Description - Zoop is also one command deploy. One can use their serverless architecture and deploy a website in minutes.

7- Heroku
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Hosting, Database, Caching, VMs and many more.
💬 Description - Heroku is a complete cloud platform and provides almost every type of service. They do have a free tier so you can not just host a static website but also can deploy your Nodejs/PHP backend app.

8- Clodui
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Hosting.
💬 Description - ClodUI is a very simple hosting provider which offers a decent free plan.

9- Deta
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Micros(Small VM), Drive, Authentication, Database.
💬 Description - A modern solution which lets you deploy your backend apps (Nodejs, Python etc). If you are serving static solution using NodeJS then it can be your go-to option.

10 - Aerobatic
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Hosting (30 Days Trial)
💬 Description - Static site deployment solution which offers a free 30 days trial.

11- Github Pages
💰 Pricing - Free
📦 Products - Hosting
💬 Description - Github pages allow you to deploy your static website per repository. You can build a landing app for your page or even portfolio in seconds.

12- Gitlab Pages
💰 Pricing - Free
📦 Products - Hosting
💬 Description - Gitlab pages is the same as Github Pages. You can put your code on Gitlab and deploy your Website/Landing Page/Portfolio.

13- IBM Cloud
💰 Pricing - Free and Paid Plans(Pricing)
📦 Products - Cloud Solution
💬 Description - IBM Cloud is a fully-fledged cloud provider and it provides a free plan without requiring any Credit/Debit card which makes it different from its competitors(AWS, GCP, Azure).

14- GearHost
💰 Pricing - Free and Paid Plans(Pricing)
📦 Products - Cloud VM
💬 Description - It provides a free cloud VM which you can use to deploy any stack.

Complete Cloud Solutions but do have a free tier

Note: Services listed in this particular section may need you to provide Credit/Debit card for verification process 🥺

1- Amazon S3
💰 Pricing - Free and Paid Plans(Pricing)
📦 Products - Cloud Platform
💬 Description - Complete cloud solution provided by Amazon. Amazon S3 is the bucked/Blob Storage to deploy a static website.

2- GCP
💰 Pricing - Free and Paid Plans(Pricing)
📦 Products - Cloud Platform
💬 Description - Complete cloud solution provided by Google. It uses Cloud storage (same as s3) to deploy a static website, CDN, load balancer.

3- Azure Static Pages
💰 Pricing - Free and Paid Plans
📦 Products - Cloud Platform
💬 Description - Complete cloud solution provided by Microsoft. It provides a simple service to deploy the static website.

4- Oracle Cloud
💰 Pricing - Free and Paid Plans
📦 Products - Cloud Platform
💬 Description - Complete cloud solution provided by Oracle. You can deploy your complex solution without worry.

Tools to make your app public temporarily

Note: These tools are great for testing and good for deploying temporarily

1- ngrok
💰 Pricing - Free and Paid Plans
📦 Products - Tunneling tool
💬 Description - It allows you to make your machine act like a server and making your WebApp accessible publicly.

2- Localhost Run
💰 Pricing - Free and Paid Plans
📦 Products - Tunneling tool
💬 Description - Works same as ngrok. Exposes your localhost.

Other

1- FaunaDB
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Managed NoSQL DB, GraphQL Support, Serverless etc.
💬 Description - FaunaDB is amazing in terms of performance, scalability, ease of use. You can use your GQL schema and roll up a DB with custom queries in seconds. Also, the free plan includes 5 GB Storage, 100K Reads per day, 50k writes per day and much more.

2- Nimbella
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Serverless
💬 Description - Serverless platform supporting JavaScript, Python, PHP, GO, Java, Swift, Typescript. It provides built-in SSL, Integrated Object Store, Integrated Key-Value, Loggin, Deploy from Github.

3- Ralley
💰 Pricing - Free tier and Paid(Pricing Details)
📦 Products - Messaging Queue
💬 Description - Zero configuration message queue. The free tier is also good for small projects - 2K requests, 1MB limit and much more.

That's it for today. Feel free to provide any type of feedback/report error. I do appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.

Don't forget to comment your favourite services 😜

Make your WebApp public temporarily using ngrok 🔥

Naman Gupta — Mon, 28 Sep 2020 13:20:06 +0000

Background 🤓

Why would you ever want to make your WebApp public temporarily? (without going through deployment process)🤔

1- Testing - You are a frontend dev and wants to test your app in a different device.
2- Feedback - You want to share the current version of your app/chatbot/server with someone else in your team like other devs/Designers just to get it reviewed. This can save a lot of your time. (No waiting for long deployment process)

So, what's ngrok?
👉 In simple words, ngrok allows you to make you WebApp public without actually deploying on a cloud service. It provides a user-friendly domain that you can share with your remote users/friends/teammates to try/use your WebApp. It does so by making your machine to behave as a server by tunnelling all the traffic to your local port. It handles all the firewall/NAT bypassing itself. PubNub has explained it in a great way. Read here for more standard explanation.

Let the hacking begin 👨‍💻👩‍💻 :

Note: Before moving forward make sure you have Node.js installed in your system. I recommend installing Node.js via nvm(Node Version Manager)

1- Create an account on ngrok ✍️

2- Go to dashboard so that you can get your Authtoken 👀

This will help us to see real-time data about remote connections.

2- Run your project 💨
For Eg- If we consider this basic restify server.

var restify = require('restify');

function respond(req, res, next) {
  res.send('hello ' + req.params.name);
  next();
}

var server = restify.createServer();
server.get('/hello/:name', respond);
server.head('/hello/:name', respond);

server.listen(8080, function() {
  console.log('%s listening at %s', server.name, server.url);
});

Then it will run on port 8080. So, just start your server (it can be a frontend web app too).

^ Let's keep it running and move to our final step.

3- Rollup ngrok and make this port publicly available 📦

👉 Open a terminal and enter this command

$ npx ngrok http 8080

PS: Your app might run on a different port so just replace 8080 with your respective port. Eg - For an app running on port 4000, the command will be $ npx ngrok http 4000

4- Share your URL 🚀
That's it. You are live now at URL - http://917e082e741d.ngrok.io (provided by ngrok in the last step). Share and test your app 🎉🥳.

Note- You can even run ngrok your own cloud infra, customize subdomain, set region and do many more things using ngrok but that's really out of the scope of this blog. Many enterprises use ngrok for many different operations. You can read about those use cases here

That's it for today. Feel free to provide any type of feedback. I do appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.

Spice up your Web App with Animation using Lottie 🔥

Naman Gupta — Mon, 07 Sep 2020 11:02:27 +0000

Background:

Hi there, Its Naman. I am sure you would have seen animations like this all over the places.

But have you wondered how you can also apply animations like these in your app?

If yes, let me introduce you to one of my favourite libraries i.e, Lottie(created by Airbnb). Lottie is not restricted to Web but also available for Android, iOS, React-Native and many more.🤩

Right now we will look at Lottie implementation in Preact(or you can use React).

Let the hacking begin 👨‍💻👩‍💻 :

Note: Before moving forward make sure you have Node.js installed in your system. I recommend installing Node.js via nvm(Node Version Manager)

1- Create a Preact Project 🛠:

npm i -g preact-cli               //only do this if you don't have preact cli
preact create default my-lottie-app
cd my-lottie-app
npm run dev

You can use create-react-app if using React.

2- Install @lottiefiles/react-lottie-player npm package 📦

npm i lottiefiles/react-lottie-player --save

We are using @lottiefiles/react-lottie-player instead of lottie-web by Airbnb because it provides a clean way(API) to use lottie animations in Preact/React.

Furthermore, there are more wrappers available like react-lottie, lottie-react-web, lottie-react and many others.

3- Introducing lottiefiles.com 🚀

It's a hub for Lottie files. Designers spend a lot of time in building these cool animation for techies all around the world. I do appreciate the hard work they put in designing these creatives.

4- Implementation 🤟

👉 Select your favourite Lottie-file on the above-mentioned website. I am choosing this (by Mikhail Voloshin).

👇 app.js

import { Player } from "@lottiefiles/react-lottie-player";

export default function App() {
  return (
    <div class="container">
      <div class="app">
        Hola <span class="devs">Developers !</span>
      </div>
      <div>
        <Player
          autoplay
          loop
          src="https://assets1.lottiefiles.com/packages/lf20_3vbOcw.json"
          style={{ height: "400px", width: "400px" }}
        />
      </div>
    </div>
  );
}

👇 Code on Codesandbox.io (Full Screen Preview)

👉 Find this code on Github

Note: I cleaned up the unnecessary files, routing structure to keep the demo simple. You can always add your creativity and make it better.

So, that's it. It's that simple and it looks amaaazzing. That's why I ❤️ it.

That's it for today. Feel free to provide any type of feedback. I do appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.

Clone just the sub-folder in GIT 🔥

Naman Gupta — Thu, 03 Sep 2020 09:31:57 +0000

Background

Hi there, Its Naman. I am sure that if you work with Git then you must have stumble across one of these situations at least once:

You need only one subfolder but don't want to clone the entire repo
You only need to play around the code and you don't care about the whole Git history.

For the first problem, there is no straightforward way/command available (Correct me if I am wrong). If the repo is small then you can clone the whole repo. Easy peasy, you won't think twice but if the repo is huge then you might think twice or maybe thrice. 😛

For the second problem, if you don't care about the code history then cloning history is overhead for you. We should skip if we can (A native way available but isn't friendly).

Solving problem 🛠 :

I found this awesome package DeGit, created by Rich Harris (Creator of RollupJS and Svelte) quite a while back. This package is way easy to install and use. I use it frequently.

Note: Before moving forward make sure you have Node.js installed in your system. I recommend installing Node.js via nvm(Node Version Manager)

1- Install npm package 📦

Use sudo npm i -g degit if your terminal shows permission error.

2- Cloning Sub-Folder ⬇️
Syntax: degit <repo-link/subfolder-name> <output-folder>

Here we are cloning components sub-folder and saving in our system with the same name.

3- Cloning whole repo without whole Git history

Syntax: degit <repo-link> <output-folder>

I ❤️ this. It's super fast. 🚀

That's it for today. Feel free to provide any type of feedback. I highly appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.