Forem: Pranav Arora

What is an alternative to Postman? Bruno

Pranav Arora — Sun, 13 Oct 2024 14:18:05 +0000

Ever tried the Bruno API Client?

In this post, I’d like to share my experiences with Bruno, but I’ll leave it up to you to decide which tool best suits your use case.

Accessibility

Bruno works offline, so there's no need to log in just to test an API. It creates a repository of API requests within the same directory as your code, making it easy to version control these requests alongside your codebase.

Bruno’s developers introduced a simple markup language, Bru, which stores essential API data such as metadata (name, protocol type), request type, and body. This makes the request easy to read and understand for other developers when collaborating.

Interface

Bruno’s interface is highly reminiscent of Postman, making it easy for new users to pick up quickly.

Much like Postman, you can create collections and environment variables, which are also stored in the repository for easy access by other developers.

Bruno can be used as a Desktop App, a CLI tool, or even integrated as a VS Code extension.

By default, Bruno verifies SSL certificates when testing APIs. If you're working on localhost, you'll need to disable SSL/TLS certificate verification, but you can enable it again for secure connections. You can adjust this setting under Collections > Preferences > General.

Final Thoughts

Overall, I found Bruno to be a fun and effective tool for API testing. I encourage you to give it a try and share your feedback—whether you love it or see room for improvement to make it a more comprehensive API client.

PS: This is not a sponsored post; I’m simply sharing my personal experience with Bruno. I strongly encourage you to explore the following resources for more information:

About My Project

I used Bruno for API testing in one of my personal projects related to authentication. This full-stack authentication app was built using NextJS with MongoDB as the database, and MailTrap as the email delivery platform for email verification. Don't forget to check out my project's demo video.

pranavarora1895 / next-auth

Full-Stack Authentication System in NextJS including email verification and forgot password

This Full-Stack authentication app is developed in NextJS and MongoDB as its DB. MailTrap was used as an email delivery platform for email verification.

Checkout this demo

next_auth_video.mp4

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app…

View on GitHub

Mastering Angular Component Styling: A Guide to CSS Layering and Dynamic Class Management. No ng:deep required!

Pranav Arora — Wed, 01 May 2024 20:04:13 +0000

Introduction

Component libraries make developers' lives easier as all the components developed are collected in a single library and can be reused in different applications. While creating an Angular Component library, the issue comes when we have to tweak a specific component according to the particular application requirement without touching the component library's styles. After the deprecation of ng:deep, it was hard to tweak such changes.

I studied how PrimeNg does CSS customizations to its components without ng:deep. This blog will share my findings and steps to implement these component styling techniques in your component library and its consumer applications.

In this blog, we will explore two powerful concepts used by PrimeNg to customize component styles without affecting other components: CSS Layering and Dynamic Class Management. These techniques allow developers to efficiently tweak the appearance of components within their own consumer application, while maintaining a clean separation of styles in their component library.

Layering

One of the key strategies employed by PrimeNg is CSS Layering. All component styles are placed within the @layer primeng rule. This approach ensures that when styling the components in our component library, the styles defined in our library take precedence over the styles defined in PrimeNg.

To facilitate this, encapsulation in PrimeNg is set to None. By setting encapsulation to none, it allows the PrimeNg components to be styled from our component library, enabling greater customization options.

Dynamic Class Management

Another important concept employed by PrimeNg is Dynamic Class Management. Without this concept, any CSS changes made for one component within our component library would inadvertently affect another component in the consumer application if the same component is used.

To address this issue, Dynamic Class Management introduces a new input attribute, let's say, styleClass, which is bound to the class of the component. The component is then wrapped in a <div> element with the attributes [class]="styleClass" and [ngClass]="'parent-component-class'". When the styleClass attribute is provided by the user, it overwrites the styles defined in the parent-component-class. This allows for the coexistence of both classes, with the styles specified in the styleClass attribute taking precedence over the ngClass.

Since ng:deep is deprecated and no longer recommended, using Dynamic Class Management is a more modern and maintainable approach to styling components without affecting other components in the consumer application.

By utilizing the bStyleClass attribute with specific styling attributes, it is possible to override attributes defined in the parent class (ngClass). Both [class] and [ngClass] will be applied, but the styles defined in [class] will take precedence over ngClass. Any styles not specified in [class] will be inherited from the class defined in [ngClass].

Example: In the case of the button component, the styles specified in our component library were overridden by the styles in the consumer apps (App 1 and App2). However, other attributes (such as text and size) from our library were applied since there was no override for them in button.

Steps to Adopt Layering and Dynamic Class Management in the Component Library

To implement layering and dynamic class management in our component library, follow these steps:

Layer all the CSS in the component library using @layer component-library{}.
Introduce a new input attribute, let's say, bStyleClass.
Wrap the component template in a <div> element with the following attributes: <div [class]="bStyleClass!" [ngClass]="'parent-component-class'">...</div>.
Set Encapsulation to None for all components in the component library.

Steps to Adopt Layering and Dynamic Class Management in the Consumer Application

To implement layering and dynamic class management in the consumer applications, follow these steps:

Set encapsulation to None for all components in the consumer application.
Add the bStyleClass attribute to the components and assign a className.
In the component's CSS, style the component with the given className as the parent-component-class.

It is important to note that if we use the @layer, the behavior of @layer changes when !important is used. The style precedence of attributes with !important reverses the concept of precedence in layers.

Additionally, when styling consumer applications, it is advisable to focus on application-specific attributes rather than core-specific attributes. Application-specific attributes include padding, margin, color, width, height, etc. By leveraging the use of !important on core-specific attributes and avoiding it on application-specific attributes, we can maintain better control over style precedence. When mentioning !important in the component library, it is important to specify if it has been used on a core attribute that should not be changed in the consumer application.

Conclusion:

By employing CSS Layering and Dynamic Class Management, developers can effectively customize component styles without impacting other components in their component library. These techniques, as demonstrated in PrimeNg, provide a robust approach to component styling and enable greater flexibility and control over the appearance of applications.

To further enhance component styling, concepts like [style] and [ngStyle] can be utilized to programmatically change inline CSS in the consumer application.

Remember, with CSS Layering and Dynamic Class Management, developers can create visually appealing and highly customizable applications while maintaining a clean and organized codebase.

Attributions

hardWareHouse Inventory Management Application

Pranav Arora — Mon, 08 Aug 2022 08:49:00 +0000

Overview of My Submission

Inspiration behind the idea: While having a discussion with one of my friends, she stated a problem that she faces daily in her shop. She needed an app to manage her inventory which is easy to use and can be scalable as per the demand. She didn't want to use MS-Excel because she wanted her data to persist and available whenever she needed. So I thought to build a model Inventory Management App using Redis Database that can solve her problems of scalability, data persistence and availability.

hardWareHouse is a hypothetical model shop that could be used to showcase the features of Redis Database. It uses Redis as its primary database, Flask as the backend that connects with Redis, and React as the frontend that renders the data on the browser.

Link to the repository: hardWareHouse Inventory Management App

License: MIT

Submission Category:

Wacky Wildcards

Video Explainer of My Project

Language Used

Python

Link to Code

pranavarora1895 / hardWareHouseInventory

An inventory management app for a hypothetical shop hardWareHouse that uses Redis as its primary database.

hardWareHouse Inventory Management Application

Runner-up of Redis x DevTo Competition. View here ->

An inventory management application for a shop to keep the track of its products data. It uses Redis as its primary database, Flask as the backend that connects with Redis, and React as the frontend that renders the data on the browser.


hardWareHouse Inventory Dashboard


Way to Add a new Product


Way to Update any Product


Search a Product and the table will render accordingly

Overview video

Here's a short video that explains the project and how it uses Redis:

Technical Stack

Database: Redis
Backend: Flask
Frontend: React

How it works

How the data is stored:

From redis_om module, following are used to create the Product schema:
- JsonModel
- Field
The product data is stored in various keys and various data types.
- product_name: str
- product_desc: str
- price: PositiveInt
- units: PositiveInt
- lower_limit_stock: PositiveInt
- timestamp: datetime

from redis_om import Field

…

View on GitHub

Additional Resources / Info


hardWareHouse Inventory Dashboard


Way to Add a new Product


Way to Update any Product


Search a Product and the table will render accordingly

⏳ Time taken to build this app:

Collaborators

myself: dev.to/pranavarora1895

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

Quick Notes for Blockchain. Concepts Simplified!!

Pranav Arora — Fri, 25 Mar 2022 04:06:04 +0000

Hello Guys!! Recently, I have been learning some Blockchain Concepts along with Smart Contracts using Solidity and Web3.py. While I was preparing some notes for further reference, I thought to share them with you. I have tried my best to simplify these notes so that anyone with zero knowledge of Blockchain can also understand from them. Save this post as these notes can also help you for quick reference.

You can also refer my GitHub blockchain repository: Blockchain Fundamentals

As soon as I learn more concepts, I will be updating this post. Meanwhile you can comment down your suggestions and I will include your contributions into this post.😀

Smart Contracts - Nick Szabo

Smart contracts are self executing sets of Instructions, without 3rd parties.

Smart Contracts are written in code. Ethereum does that.

Oracles

Oracles bring data to blockchain or allows computation outside the blockchain environment.

Smart Contracts = Decentralized Applications = Dapps

Chainlink - Decentralized modular oracle network that allows to bring data to smart contracts.

Advantages of Smart Contracts

Decentralized
Transparent
Speed
Immutable
Remove Counterparty Risk
Allow for trust minimized agreements
Hybrid smart contracts combine on and of-chain.

DAOs

Decentralized Autonomous Organizations are the applications that live in the smart contracts. Similar to traditional orgs. Used for governance.

🦊 Metamask - An Ethereum wallet

Testnets

Free for testing smart contracts.

Mainnet

Mainnet costs money and considered live

Faucet

Is an application that gives us free test tokens, like free test rinkeby ethereum.

Block Explorer

Etherscan is a block explorer. An application that allows us to “view” transactions that happen on a blockchain.

Gas

Gas is a unit of computational measure. The more computation a transaction uses the more “gas” you have to pay for.

Every transaction that happens on-chain pays a “gas fee” to node operators.

The amount of “gas” used and how much you pay depends on how “computationally expensive” your transaction is .

Sending ETH to address would be “cheaper:” than sending ETH to 1000 addresses.

Gas Price: How much it costs per unit of gas

Gas Limit: Max amount of gas in a transaction

Transaction fee: Gas Used * Gas Price

example, 21000 gas @ 1 GWEI per gas = 21000 GWEI

Hash

A unique fixed length string, meant to identify a piece of data. They are created by placing said data into a “hash function”.

Eth uses Keccak-256 (SHA 3) algorithm.

Blockchain Demo

Mines have to solve a problem inorder to create a block. For example, in this site’s example, the hash should be started from 4 zeroes. For that, the nonce is solved in such a way where the hash brings 4 zeros.

Block

A block contains a list of transactions mined together.

Its distributed as many independent users are running the blockchain software which then compares each other’s blockchain.

Genesis Block

First block in a blockchain. Its prev block value is 0.

Block in blockchain Consists of:-

Block number
Nonce
Data
Prev
Hash

Mining

The process of finding the “solution” to the blockchain “problem”.

In our example, the “problem” was to find a hash that starts with four zeros. (algo used = SHA256)

Nodes get paid for mining blocks.

Nonce

Number used once. It is used to find the solution to the blockchain problem.

In eth, It’s also used to define the transaction number for an account/address.

How Transactions occur

By using Public and Private Keys

Private Key

Only known to the key holder, it’s used to “sign” transactions.

Public Key

Key which is made out of private key by Elliptic Curve Digital Signature Algorithm(ECDSA) in ETH.

How the address is created

Private Key —> Public Key —> Address (in Hexadecimel)

Node

A single instance in a decentralized network. (one of the Peer A, Peer B and Peer C running those blockchain software)

Blockchains are resilient. If any node goes down, since there are so many independent nodes running and the requirement is only one node should run at all times.

Blockchain nodes keep lists of the transactions that occur.

Blockchain can run decentralized database and with ETH it can run decentralized Computation

Consensus

Consists of Proof of Work and Proof of State. It is the mechanism used to agree on the state of a blockchain.

ETH and bitcoin use Nakamoto Consensus.

Proof of Work

When we press that mine button, means we are showing proof of work. If any node’s blockchain differs and that is ignored, that’s called consensus.

Consensus broken of two pieces:

Chain Selection
Sybil Resistance - proof of work.

Sybil Resistance

ETH and Bitcoin uses sybil resistance mechanism.

It finds out who is the block author node who mined, and the other nodes verify it.

It prevents users to make fake nodes and blockchains.

PoW(Proof of Work) and PoS(Proof of Stake) comes under SR.

PoW

Mining comes under PoW. Computational Expensive activity.

Block Time - It is the time taken by block to publish. If Block time is more, the problem is hard, if it is less, the problem is easy.

Chain Selection

How to know that which blockchain is the real blockchain or true blockchain.

Nakamoto consensus which is the combination of the proof of work and the longest chainrule. (most number of blocks)

Block Confirmations

Number of block confirmations are defined as number of blocks that are added after our transaction block.

Therefore, if your transaction has 13 block confirmations (see above graphic), then there have been 12 blocks mined since the block was mined that included your transaction.

Gas fee is obtained by the miners in PoW and by the validators in PoS.

Solving the problem is highly competitive as the one who solves it first gets Tx. fee as well as block reward given by protocol/blockchain. ( halving reward → block reward cut in half for some period of time.)

Attacks

Sybil Attack

When a user creates whole bunch of pseudo-anonymous accounts to inflience the network. Really difficult in ETH BTC.

51% Attack

In ETH Classic there was a rule that if blockchain is 51% matched in Longest chain rule, its good to go. The intruders then could fork the network and bring it to their network and make that 51%. Now they have the power to influence the network as they have the longest chain.

Drawbacks of PoW

Uses a lot of energy

To overcome this drawback, many companies are now using Proof of Stake (PoS). ETH 2.0 will have Proof of Stake.

Proof of Stake

ETH 2.0, Avalanche, Polygon use PoS. Different sybil resistance mechanism.

Proof of Stake nodes put up collateral as a sybil resistance mechanism.

For example, ETH 2.0 will put some ETHs as a proof of stake. If they misbehave, they are going to lose those ETHs.

Here miners (that were in PoW) are called Validators. They validate other nodes. Nodes are randomly chosen to propose a new block.

Randomness

ETH 2.0 uses RANDAO which collectively chooses the random number.

Advantages

Uses much less energy
Scalable unlike highly variable gas prices
Sharding - a blockchain of blockchain - it can increase number of blocks significantly and controls gas price.

Drawback

Slightly away from decentralization - You need to pay a stake(cost) to participate.

Layers in Blockchain

Layer 1: Base Layer blockchain implementation
- BTC
- ETH
- Avalanche
Layer 2: Any application built on top of layer 1 or blockchain
- Chainlink
- Arbitram
- Optimism
Both Arbitram and Optimism solve scalability issues are called rollups. They roll up their txs. into ETH, which makes shards. They derive their security from Layer 1 and they send their txs. to layer 1.

Side chains derive their security from their own protocols unlike rollups.

Smart Contract and Solidity

// SPDX-License-Identifier: MIT

pragma solidity ^0.6.0;

contract SimpleStorage {
    // This will get initialized to 0
    uint256 favoriteNumber;

    struct People {
     uint256 favoriteNumber;
     string name;
    }
    People[] public people;
    mapping(string => uint256) public nameToFavoriteNumber;

    People public person = People({favoriteNumber: 2, name: "Pranav"});

    function store(uint256 _favoriteNumber) public {
        favoriteNumber = _favoriteNumber;
    }

    // view, pure functions do not led to transactions, they are just for viewing.
    // pure is used when we do some math.
    function retrieve() public view returns(uint256){
        return favoriteNumber;
    }

    function addPerson(string memory _name, uint256 _favoriteNumber) public {
        people.push(People({favoriteNumber: _favoriteNumber, name: _name}));
        nameToFavoriteNumber[_name] = _favoriteNumber;
    }

}

Storage Factory - How to deploy user defined contracts in Blockchain out of a contract:

// SPDX-License-Identifier: MIT

pragma solidity ^0.6.0;

import "./SimpleStorage.sol";

contract StorageFactory{

    SimpleStorage[] public simpleStorageArray;

    function createSimpleStorageContract() public {
        SimpleStorage simpleStorage = new SimpleStorage();
        simpleStorageArray.push(simpleStorage);
    }

    function sfStore(uint256 _simpleStorageIndex, uint256 _simpleStorageNumber) public {
        // Address
        // ABI - application binary interface
        SimpleStorage simpleStorage = SimpleStorage(address(simpleStorageArray[_simpleStorageIndex]));
        simpleStorage.store(_simpleStorageNumber);
    }
    function sfGet(uint256 _simpleStorageIndex) public view returns(uint256) {
        return SimpleStorage(address(simpleStorageArray[_simpleStorageIndex])).retrieve();
    }

}

ABI

ABI = Application Binary Interface

The ABI tells solidity and other programming languages how it can interact with another contract.

Interfaces compile down to ABI.

Anytime you want to interact with an already deployed smart contract you will need an ABI.

Fund Me application on Solidity

// SPDX-License-Identifier: MIT

pragma solidity >= 0.6.6 <0.9.0;

import "@chainlink/contracts/src/v0.6/interfaces/AggregatorV3Interface.sol";
import "@chainlink/contracts/src/v0.6/vendor/SafeMathChainlink.sol";

contract FundMe{
    using SafeMathChainlink for uint256;

    mapping(address => uint256) public addressToAmountFunded;
    address[] public funders;
    address public owner;

    constructor() public{
        owner = msg.sender; 
    }

    function fund() public payable{
        // $50
        uint256 minimumUSD = 50 * (10 * 18);
        require(getConversionRate(msg.value) >= minimumUSD, "You need to spend more ETH!");

        addressToAmountFunded[msg.sender] += msg.value;
        funders.push(msg.sender);
        // what the ETH -> USD conversion rate.

    }

    function getVersion() public view returns(uint256){
        AggregatorV3Interface priceFeed = AggregatorV3Interface(0x8A753747A1Fa494EC906cE90E9f37563A8AF630e);
        return priceFeed.version();
    }

    function getPrice() public view returns(uint256){
        AggregatorV3Interface priceFeed = AggregatorV3Interface(0x8A753747A1Fa494EC906cE90E9f37563A8AF630e);
        (,int256 answer,,,) = priceFeed.latestRoundData();
        return uint256(answer);
    }

    function getConversionRate(uint256 ethAmount) public view returns(uint256){
        uint256 ethPrice = getPrice();
        uint256 ethAmountInUSD = (ethPrice * ethAmount) / 1000000000000000000;
        return ethAmountInUSD;
    }

    modifier onlyOwner {
        require(msg.sender == owner);
        _;
    }

    function withdraw() payable onlyOwner public{        
        msg.sender.transfer(address(this).balance);

        for (uint256 funderIndex=0; funderIndex < funders.length; funderIndex++){
            address funder = funders[funderIndex];
            addressToAmountFunded[funder] = 0;
        }

        funders = new address[](0);
    }

}

Ganache is a simulated blockchain

Introduction to Web3.py

web3.py helps deploying smart contracts from local development to blockchain. We can use ganache to test our contract. Then we can finally deploy it on Rinkeby or Mainnet via Infuria.

from typing import Callable
from solcx import compile_standard, install_solc
import json
from web3 import Web3
from dotenv import load_dotenv
import os

load_dotenv()

with open("./SimpleStorage.sol", "r") as file:
    simple_storage_file = file.read()

install_solc("0.6.0")

compiled_sol = compile_standard(
    {
        "language": "Solidity",
        "sources": {"SimpleStorage.sol": {"content": simple_storage_file}},
        "settings": {
            "outputSelection": {
                "*": {"*": ["abi", "metadata", "evm.bytecode", "evm.sourceMap"]},
            },
        },
    },
    solc_version="0.6.0",
)

with open("compiled_code.json", "w") as file:
    json.dump(compiled_sol, file)

# get bytecode
bytecode = compiled_sol["contracts"]["SimpleStorage.sol"]["SimpleStorage"]["evm"][
    "bytecode"
]["object"]

# get abi
abi = compiled_sol["contracts"]["SimpleStorage.sol"]["SimpleStorage"]["abi"]

# for connecting to rinkeby
w3 = Web3(
    Web3.HTTPProvider("https://rinkeby.infura.io/v3/ba5dc926e8c1459eb85dda1521f33b88")
)
chain_id = 4
my_address = "0xb0a047E246656327079c92adEd60d3F97DE2DDF6"
private_key = os.getenv("PRIVATE_KEY")
print(private_key)

# create contract in python
SimpleStorage = w3.eth.contract(abi=abi, bytecode=bytecode)

# Get latest transaction
nonce = w3.eth.getTransactionCount(my_address)
# 1. Build a transaction
# 2. Sign the transaction
# 3. Send the transaction
transaction = SimpleStorage.constructor().buildTransaction(
    {
        "gasPrice": w3.eth.gas_price,
        "chainId": chain_id,
        "from": my_address,
        "nonce": nonce,
    }
)
sign_txn = w3.eth.account.sign_transaction(transaction, private_key=private_key)

# Send the signed txn
print("Deploying contract...")
tx_hash = w3.eth.send_raw_transaction(sign_txn.rawTransaction)
tx_receipt = w3.eth.wait_for_transaction_receipt(tx_hash)
print("Deployed!!!")

# Working with a contract, you always need
# Contract Address
# Contract ABI
simple_storage = w3.eth.contract(address=tx_receipt.contractAddress, abi=abi)
# Two ways to interact
# Call
# Transact

# print(simple_storage.functions.store(14).call())
# print(simple_storage.functions.retrieve().call())
print("Updating Contract...")
store_tx = simple_storage.functions.store(783).buildTransaction(
    {
        "gasPrice": w3.eth.gas_price,
        "chainId": chain_id,
        "from": my_address,
        "nonce": nonce + 1,
    }
)
signed_store_tx = w3.eth.account.sign_transaction(store_tx, private_key=private_key)
tx_store_send = w3.eth.send_raw_transaction(signed_store_tx.rawTransaction)
tx_store_rec = w3.eth.wait_for_transaction_receipt(tx_store_send)
print("Contract updated!!!")
print("Retrieving the updated contract...")
print(simple_storage.functions.retrieve().call())

Tests

Testing can be classified in 3 categories:

Arranging
Acting
Asserting

As soon as I learn more concepts, I will be updating this post. Meanwhile you can comment down your suggestions and I will include your contributions into this post. Thank You 😀 !!

Emmet not working in VS Code ?— Here’s how you can fix this problem!!

Pranav Arora — Wed, 20 Oct 2021 12:21:43 +0000

Emmet is a powerful extension in Visual Studio Code. If you are developing a website or working with any language such as HTML, Emmet helps you to write your code fast and efficiently without making silly mistakes.

But sometimes, while updating VS Code, the VS Code loses the file associations or Emmet stops working for some reason. I encountered the similar problem after I updated my VS Code. I was not able to use Emmet and it seemed annoying to me because I didn’t want to write whole html starter templates while working on website development. So I started finding out the solution and figured out how to fix that.

Step 1: Start your VS Code. Click on the Settings or press Ctrl+, to open the VS Code Settings.

Step 2: Click on the Extensions tab on the left side of the settings. Click on HTML.

Step 3: Click on the “Edit in settings:json” hyperlink to edit the settings in JSON format.

Step 4: Inside the curly braces, enter the following code under the already written JSON code:



“emmet.triggerExpansionOnTab”: true,
“files.associations”: {“*html”: “html”},
"emmet.useInlineCompletions": true

Step 5: Save the file. Now if you try to apply Emmet in your code, it will work smoothly!!

That’s how I fixed this Emmet not working problem which I encountered when I updated VS Code. I hope this solution may be helpful for you as well and serves the purpose.

10 Amazing Web Apps for Web Developers!!

Pranav Arora — Tue, 19 Oct 2021 14:07:04 +0000

While going through my web development career, I came to know about various web apps, that each web developer requires. Let's have a look at them:

1. DEVDOCS

Personally, this one is my favorite website. It has everything that a developer needs. This website is an all-in-one documentation. Containing the docs of more than 100 languages, you won't ever find yourself having 100s of tabs opened. Lol !!!

Link: https://devdocs.io/

2. PEPPERTYPE

Peppertype generates better content copies in seconds with the power of Artificial Intelligence.

Link: https://www.peppertype.ai/

3. UNSPLASH API

The Unsplash API is a modern JSON API that surfaces all of the info you'll need to build any sort of experience for your users.

Link: https://source.unsplash.com/

4. POET

It captures and shares Twitter posts as beautiful images.

Link: https://poet.so/

5. BUILT WITH

Built With can be useful if you need to learn more about what technologies are used for a particular website. For example, you can see exactly what is used on Netflix's website.

Link: https://builtwith.com/

6. SITE POINT

SitePoint has everything you need to help you with your next web development project, including all the latest news, trends, books, UX tips and more.

Link: https://www.sitepoint.com/

7. CARBON

Carbon creates and shares beautiful images of your source code. Start typing or drop a file into text area to get started.

Link: https://carbon.now.sh/

8. APPTION

Adds 3rd party apps embed or create a custom embed for your Notion Document.

Link: https://apption.co/

9. PAGESPEED INSIGHTS

Powered by Google, not only you can see how fast is your website on a scale of 0 to 100, bit it also tells you exactly what you need to change to get a higher score.

Link: Google Developers PageSpeed Insights

10. OVER API

It is the collection of CheatSheets. These are not documentations unlike DevDocs. It's more beginner-friendly.

Link: https://overapi.com/

I hope this blog will be helpful for your web development journey. Make sure to save it for your future reference. Please comment down which tool are you going to use just after watching this post. 😀

Help! Deploy Django website to GCP Cloud Run using VS Code

Pranav Arora — Sat, 27 Mar 2021 15:38:31 +0000

Hello Guys!! I need guidance to deploy my existing django website which is in my windows machine to Google Cloud Platform's Cloud Run using VS Code. I saw there's a documentation related to it but I'm not able to understand what all to change in my django's settings.py and how will the database would be configured. Please guide me as what all should I change to my django app so that I can deploy it through my VS Code.