Forem: Balvinder Singh

Setting Up a ReactJs and Nextjs Project

Balvinder Singh — Sat, 19 Oct 2024 07:09:44 +0000

Introduction to Setting up a ReactJS project

In this blog post, we’ll guide you through the process of setting up a new React and NextJS project. We’ll cover the essential steps involved, including creating a project, installing dependencies, and running the development server. Please also check previous post where we explained about React Basics and NextJS Framework from the link below.

React Basics and NextJS Framework

Prerequisites for setting up ReactJS Project

Before we begin, ensure you have the following tools installed for starting ReactJS project:

Git Version Control

A version control system used for tracking changes to your code. By default, it will create a master/main branch project to track changes to your code. It also helps you to keep track of changes during your development, you can restore any changes, discard changes and even test different versions without messing up the code. Also, you will be getting additional knowledge as most of the companies use Git for code management, and is an essential skill for your resume.

Download Link for Git

We are using Windows for our project, but you can also use Linux. Choose the download accordingly for all requirements we share next.

Node.js and NPM

Node.js is a JavaScript runtime environment that is used to run your code, do application build and compile scripts. It also provides some compiler dependencies we need for executing ReactJS code. You can download any of the LTS version available.

Along with NodeJS, we get NPM which is the package manager for Node.js. With NPM you can install dependencies to your project like Axios for making API calls, Chakra UI for UI components and theming, DatePicker for adding date inputs and much more.

Both are essential for working with React and Next.js projects. There is only single installation required for both NodeJS and NPM

Download Link for NodeJS LTS 20

You can check installation success with Commands below to test versions as well.

PS C:\Users\balvi> node -v v20.9.0 PS C:\Users\balvi> npm -v 10.1.0

VS Code Editor

What can be better to learn JavaScript with a JavaScript based IDE built using electron. A popular code editor that provides excellent support for JavaScript development, including React and Next.js. You can get it from the Microsoft website and also enjoy various extensions available for the VS Code.

Download Link for VS Code

We mention VS Code as Editor because it needs extensions to work, so it is lightweight by Default. Eclipse or IntelliJ Idea on another side is a fully integrated Development environment but for heavy use. So, they are known as IDE and not editor.

Terminal/Powershell

For most of the tutorial we will be using the terminal. You can also use that or if you don’t have terminal in your windows, then you can use PowerShell as well. For Linux terminal will be available, so feel free to use that.

Creating a New React Project

Follow the below steps to start with a React based Application. You also have options to start with different templates such as Typescript Project, Typescript with Redux Project or just plain old JavaScript. We will use the default one for this. Irrespective of the templates, it will be same. Just a few differences how you define variables and its types with Typescript, whereas JavaScript doesn’t even care until you run and get an error. Thats why dev now a days prefer Typescript to be safe from unexpected errors with type safety. Example you can declare a variable as string if you expect text.

Note: Check Official ReactJS Docs for Custom Template Usage

1. Install Create React App (CRA)

Create React App (CRA) is a tool that simplifies the process of setting up a new ReactJS project. It provides a pre-configured environment with all the necessary dependencies and tools.

npm install -g create-react-app

2. Create a new project

npx create-react-app my-react-app

If you get any execution error for script related error, then execute below command in terminal/powershell for windows

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Also, if you get any error related to ERR_SSL_CIPHER_OPERATION_FAILED, then execute below command in terminal.

npm cache clear –force

These are the errors we faced in windows, but on Linux there might be no issues. Still feel free to comment if you face any issues. We will help to solve it in comments as well or update the solution in article itself. Thanks.

3. Navigate to the project directory

With below command you can change to directory where you created project files. Use the same name as the previous step if you have named it differently.

cd my-react-app

4. Start the development server

Now that you have everything ready, you can start the application and can access development version locally in your browser. Just keep the command running in the Terminal/Powershell and don’t close unless you want to kill the dev server. Closing will also make the application down, and when you are done with, you can turn it down.

npm start

You can navigate to address http://localhost:3000 to check the project. If you see image same as above then congrats you finally created a ReactJs project. Let’s move to NextJS Project creation.

Creating a New Next.js Project

Next.js is a popular React framework that provides features like server-side rendering (SSR) and static site generation (SSG). It simplifies the process of building fullstack React applications. A few steps will be the same as above ReactJS project, so we will keep it short.

1. Install Next.js

You need to run following command to install dependency for creating a next project.

npm install -g next

2. Create a new project

Enter below command to start creating NextJS Project. Same way select a name for your project.

npx create-next-app my-next-app

For most of the questions, you can answer yes as they will add helpful configurations and integration for the project. You can select typescript for this or choose no if you just need to use javascript. But we recommend using typescript with NextJS as you can expect what you will get from the declarations and functions in NextJS.

With these selections it will install ReactJS dependencies, so yes, you can do use same features of React along with Functionalities provided by Next as a bonus. You also get option to use Tailwind CSS which is a modern CSS framework and gives you pretty nice design from the start without any effort.

As we have selected Typescript, we also get Types package, along with ESLint for linting issues such as spacing, formatting, clean up etc basic code cleanup tasks to make it beautiful and structured well. In short, does the cleaning up for you and keeps code in check for any standards we need.

PostCSS is just a CSS preprocessor for processing and optimizing Sass/CSS files.

3. Navigate to the project directory

Now enter below command to change the project directory and for running the code.

cd my-next-app

4. Start the development server

Enter the below command to run Next Project. You might have noticed that its different from the above React project because both have different structure accordingly as well tools, and scripts. So next project runs with different scripts and need a different command.

npm run dev

Open the address http://localhost:3000 to open the application in your browser. If you see the below output then congrats, you have successfully generated the NextJS project.

Project Structure of ReactJS and NextJS

Both React and Next.js projects follow a similar structure:

src: Contains the source code for your application. Most of the code related to pages, components go here as its the root and we use it for importing files relatively as well modules/packages.
public: Contains static assets like images and favicons. Also the Stylesheets for CSS.
package.json: Describes your project’s dependencies and scripts. You can configure the project name, license, author info, git repo link as well the scripts you might need other than the default.
node_modules: Stores the installed dependencies. Its a big folder containing all your installed dependencies. It exists only while deployment and in production, we don’t use that. You also need to make sure to ignore node modules folder with git ignore.

There might be other config files for the custom dependencies you install later like postcss or ESLint config. You can edit these files to change the config as per need of the project. It can be customized anytime but recommended to set at the start to avoid any additional work later.

Installing Dependencies

You may need to install additional dependencies based on your project requirements. For example, to install a state management library like Redux, you can use:

cd my-react-app 
npm install redux react-redux

Same way you can install any additional library you need from NPM repository by replacing dependency name like axios,react-redux, moment etc.

If there are dependency conflicts for peer dependency, you can force dependency.

npm install axios –legacy-peer-deps

This will ignore version mismatch issue and let you install a package. You can also mention a version like this:

npm install axios@4
npm install axios@4.2.1

The first version of the command will install the latest version under 4 or the version specified, and the other command will do the subversions under main version 4.

You can check and find dependencies on the NPM official site.

Browse NPM Packages on NPM Repo

In programming, especially in projects, we do use following syntax like 1.0.0 where the first denotes the major change when we have something different from the existing functionality. Second denotes a small change to the existing functionality and the third one shows a minor change or usually the fix to the issues.

So, 1.0.0 is usually the starting version, whereas 2.3.4 can denote, it’s a 2nd major version of the software with minor additions as well fixes to some features. This type of versioning helps dev to avoid issues with incompatible dependencies, as well avoiding missing functionality in updated dependency versions.

Running the Development Server

Once you’ve created your project and installed dependencies, you can start the development server to view your application. The development server provides features like hot module replacement, which allows you to see changes to your code reflected in the browser without having to refresh the page.

Hot Module replacement is a process with which you dont need to close and run project again, as the code changes are detected automatically and the new code is available. Sometimes we have the browser sync as well, that refreshes the browser as well. But you can also manually refresh to update the page, once you make changes, without closing the running command.

Additional Tips to Explore on your own

Use a code editor or IDE: A good code editor or integrated development environment (IDE) can greatly enhance your development experience. Popular choices include Visual Studio Code, WebStorm, and Sublime Text.
Utilize version control: Use a version control system like Git to track changes to your code and collaborate with others.

-Explore the documentation: Both React and Next.js have extensive documentation that can be a valuable resource for learning more about their features and best practices.

Consider using a linter: A linter can help you catch potential errors and enforce coding standards in your project. Popular linters for JavaScript include ESLint and Prettier.
Set up a task runner: A task runner like Webpack or Parcel can automate common development tasks, such as bundling your code and optimizing assets.
Install a CSS preprocessor: A CSS preprocessor like Sass or Less can improve your CSS workflow by adding features like variables, nesting, and mixins.

By following these steps and incorporating the additional tips, you’ll be well on your way to setting up a solid foundation for your React and Next.js project.

Summary

In this blog post, we’ve covered the basic steps involved in setting up a React and Next.js project. By following these steps, you’ll have a solid foundation to start building your web application. In the next post, we’ll delve deeper into understanding components and JSX. We will keep posting more articles in this series, so stay connected. Thanks for reading.

Originally published at https://tekraze.com/setting-up-reactjs-nextjs-project/

Introduction to React Basics and Next.js

Balvinder Singh — Sun, 06 Oct 2024 11:49:11 +0000

Introduction of React and Nextjs

React and Next.js have become two of the most popular JavaScript libraries for building modern web applications. In this blog post, we’ll provide a comprehensive overview of both libraries, their key features, and how they can be used together to create powerful and efficient scalable web applications.

Before we dive into React and Next.js, let’s clarify the difference between a library and a framework.

Library vs. Framework

Let’s know the difference between a Library, which is here React and the Framework which is Next.js.

Library: A collection of pre-written code that you can use to perform specific tasks within your application. You have control over how and when the library is used. Examples of libraries include Lodash, jQuery, React and Axios.
Framework: A complete structure or foundation for building applications. It provides a set of rules and conventions that you must follow. The framework often dictates the flow of your application. Examples of frameworks include Nextjs, Nestjs.

Basically, a Library provides us with UI components that we can use in a project and is limited to that, whereas a framework contains things additional to library, such as tools and functionalities that helps one to use directly rather than working from scratch. We will know more differences in upcoming tutorials. For now, React is a Library and Next.js is a React Library based framework with additional tools and functionalities that makes our development easier.

Example of React Functional Component

What is React?

React or ReactJS is a JavaScript library for building user interfaces for web applications. It’s known for its component-based architecture, which makes it easy to create reusable and maintainable code. Key features of React include:

JSX

A syntax extension for JavaScript that makes it easier to write HTML-like structures within JavaScript code. We can write both HTML and JS together to make it easier for conditional rendering and formatting text. Also, we can use a single file to write the complete code in comparison to Frameworks like Angular, where we write template and functionality different.

const fruitsList = (<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>);

Components

Components are the basic Building blocks of React applications that encapsulate logic and render UI. Take it as a lego block, where each block combined makes whole thing together. We write multiple components to have smaller functionality without any coupling or dependency. In the below example, we have shared functional component that can be written two ways, one with lambda expressions and another with normal functions. There used to be Class Components as well, but now a days, everyone uses functional components which are simpler than class components and use Hooks over lifecycle class methods in class component and reduce code as well.

const TestComponent = () => <div> <h2>Hi I am a component </h2> </div>

function TestComponent() { return <div> <h2>Hi I am a component </h2> </div> }

State and Props

Mechanisms for managing data and passing it between components. Props are basically the properties that don’t change, and state are the values related to properties that can change over the time. Let say we need to show the list of fruits on a page.

For example, we create a component that renders the list of fruits from a list passed to it. let say variable fruitNames[] is a list of fruits as [‘Banana’, ‘Apple’, ‘Orange’]. This list can change, so it is a state variable.

and, another variable sectionLabel as ‘Fruits List’ is the same irrespective of the fruits list, as we need to say this component have a list of fruits.

So, we use Props usually to pass from Parent component to Child component, where it does not change. And the state variable, where we need to change its value during the lifecycle of the component.

Virtual DOM

DOM refers to Document Object Model where the HTML code is the document, and the object and the model is the data that we want to render on a web page. Virtual DOM is a lightweight representation of the actual DOM that allows for efficient updates because it is efficient and fast than updating the actual DOM which makes React loved by everyone.

To understand this Virtual DOM concept, Let compare Angular where on the refresh of data, we get a new view, which updates everything on the user screen whereas the React on other side, only updates the data that is changed, instead of updating whole screen. This process makes React efficient and fast, with low memory usage and performance friendly.

What is Next.js Framework?

Next.js is a React framework that simplifies the process of building server rendered React applications. SSR or Server-Side Rendering is a useful process to improve Speed of a web application and also a key factor for SEO as it helps site ranks faster. It provides features like:

Server-Side Rendering (SSR)

SSR is a concept of Rendering the component at server side and serving a page directly to the user rather than rendering at the user end. Nextjs provides rendering components on the server, improving SEO and initial page load performance. The performance is due to reduced page size as well reduced scripts/files to load with on time rendering.

Static Site Generation (SSG)

With Static Site generation we just make static pages that can be rendered without any running servers using Static Site Hostings like Vercel or Github Pages. This makes serving sites cost efficient as well fast and mostly used for static blogs or information pages where we don’t need dynamic data. With Next.js pre-rendering pages at build time, provides fast load times and reduced server load. This makes it friendly to create simple sites that can be served easily on Static Hosting sites.

API Routes

With Next.js you can also create APIs directly, without having a separate backend to manage API logic. With SSR you can add dynamic APIs like loading a user details, checking cart, updated products and more business logic.

File-based routing

Automatically creates routes based on the structure of your project. What this means is based on your file names, pages can be created. For example, we create pages named about, home so by visiting /home and /about we can navigate to pages in the NextJS application, this makes routing easier without any extra logic. You can simply add more pages this way to the application.

Why Use React and Next.js Together?

Now we know features of both, So Combining React and Next.js offers several advantages:

Faster Page Loads

With support for SSR and SSG, one can significantly improve the initial page load time of web application. Can create faster and efficient web application with standards.

Better SEO

SSR makes it easier for search engines to index your content as you can optimize your web application for SEO related config that is available to search engine like any other static site. Because of better performance, Search engines recommend and index your site faster than other sites.

Improved User Experience

Faster load times and a better user experience can lead to increased engagement and conversions. If you site loads fast, Users will love to visit your applications.

Simplified Development

Next.js provides a convenient way to structure and manage React applications. It also provides additional functionality to make ReactJS better and also provide a nice documentation with active community support and powered by the Vercel Team itself making it a Premium Experience Framework for Development with High Standard and optimisation.

Note: You can read more about Next.Js framework on the official website.

Conclusion

In this blog post, we’ve introduced React and Next.js and discussed their key features and benefits. In future posts, we’ll dive deeper into specific topics, such as setting up a React and Next.js project, understanding components and JSX, and working with state and props.

We will also add a project and some code snippets to explain things. So feel free to comment your views about our comment and share the feedback with us. We will also share the link to telegram channel where we share our blog post as soon as they are posted.

Originally Posted at Introduction to React Basics and Next.JS Framework

13 Free AI Based ChatGPT tools that can help with your daily work

Balvinder Singh — Sun, 17 Dec 2023 12:39:50 +0000

Introduction to AI Based ChatGPT Tools

AI based ChatGPT tools are a powerful new breed of software using artificial intelligence (AI) to mimic human conversation and perform various language tasks. These tools excel at natural language processing (NLP), allowing them to understand and respond to prompts and questions in a way that feels natural and engaging. Tasks like

Generating product summaries from the product description
Generating summary from research paper
Generating summary of meeting notes
Generating new content from Existing content

Here’s a breakdown of what makes them so special:

1. Conversational fluency:

Chatbots built on ChatGPT-like technology can hold open-ended dialogues, answer your questions, and even tell jokes!
They adapt their responses to your specific phrasing and context, making the interaction feel more organic.

2. Creative content generation:

Beyond conversation, these tools can generate text formats like poems, code, scripts, emails, and even musical pieces.
They can help you brainstorm ideas, overcome writer’s block, or simply explore different creative avenues.
Even famous OnePiece writer ODA used ChatGPT for writing some episodes for the series as even he can not create new ideas by himself now. And the results were amazing.

3. Information and research:

Many tools leverage their vast knowledge base to answer your questions accurately and informatively.
They can be valuable research assistants, summarizing complex topics or finding specific information within massive datasets.

4. Personalization and assistance:

Some tools take it a step further, offering personalized experiences like emotional support, travel recommendations, or website-building assistance.
They adapt to your preferences and needs, becoming helpful companions or productivity boosters.

List of 13 AI-Based ChatGPT tools you can use.

We can divide ChatGPT based tools or chatbots based on their use case. It can either be

General Purposes like ChatGPT or Bard
Specialised like Replika

So, let’s check the list.

General Chatbots

1. Bard

Bard tool can converse, write different kinds of creative content, and answer any questions in an informative way. Great for open-ended discussions and creative exploration. Can help with code as well as content

2. Microsoft Bing Chat

Ask Bing anything and get informative, comprehensive answers. Good for research and factual queries.

3. DialoGPT

Engage in casual, open-ended dialogue with this model trained on Reddit conversations. Fun for informal chats and exploring interesting topics.

4. LaMDA (Google’s conversational AI)

Experience next-gen conversational AI from Google, focusing on open-ended, informative dialogue. Ideal for in-depth discussions and exploring complex topics.

5. NeevaAI

Get answers to your questions with Neeva’s private search engine AI. Focuses on privacy and factual accuracy.

Specialized Chatbots:

6. Replika

Build an emotional connection with an AI friend who listens and learns from your interactions. For companionship and emotional support.

7. Wonder-AI

Get personalized travel recommendations and suggestions based on your preferences. Perfect for trip planning and exploration.

Check the complete article at https://tekraze.com/13-free-ai-based-chatgpt-tools-for-ai-art/

How to use any NPM module with Browserify in the browser

Balvinder Singh — Wed, 25 Jan 2023 15:52:36 +0000

Hi everyone, while working on something came across some issues where the code reference available did not work as we can not import npm modules directly on the web.\
There are CDN versions but not everything it supports. So, what can be done?

NPM modules are built mostly for node.js system and may not work directly in the browser because of different dependencies used within any module. In that case, it becomes difficult to use that script. So, here is a better way to use any NPM module in the web without worrying for any dependencies.

Using Npm Module with Browserify

So, after looking for a way I found the way to do that.

The idea behind this approach

is to create a project with NPM that will give us a package.json for installing npm packages
add all dependencies whatever you want like Buffer
assign them to the window object that will be used to call the modules in the web script
generate a JS bundle to be exported later
serve locally in the same folder or via CDN as per your ease and requirement

Now, you have the idea. Let's see how to do this.

Steps to make a JS bundle with Browserify NPM

1. Install the Npm package globally

Enter the below command in your terminal

npm i -g browserify

2. Create a folder and initialize the NPM project

Create a directory and move to the directory

Enter the command in the terminal

mkdir example cd example npm init -y

this will create an npm project where you can add your dependencies.

3. Let's add Some npm packages for example

Let's say we need to have the Buffer package installed and use it to convert while file upload

Then add via command

npm install buffer

4. Create a file to import npm modules you need

You can name the file anything, let's say we create the file with the name main.js and import our modules in the same file. Then we need to assign that variable to the window object that is available globally in the browser. As the window object is globally available in the browser, we can simply call the module by window.module syntax where we call the module name we assign in the main.js file.

Enter command

touch main.js

Open in the editor or even edit with the nano editor in the terminal

nano main.js

Paste the following code in the main.js file

// Here we import the module we need

const Buffer = require('buffer').Buffer;

// here we assign the imported module to use in the window later.

window.Buffer = Buffer;

Then save the file.

5. Create a Browser Bundle to export npm modules bundled as one

Now, we need to convert this file to a static JS script, which will pull all code from the NPM modules and make it a simple script that works in the browser locally or using CDN.

Enter the following command in the terminal

browserify main.js -o example.js

here main.js is the file with our imports and example.js is the output file. You can name it anything you like.

6. Import the bundle into the project

Now just copy this file in the root or any folder as the index.html where we want to use this.

Let's say we have the files index.html and example.js in the same folder. then to import we can include the script tag and use the code. In this method, we can import our buffer module easily.

<script src="./example.js"></script>

<script>

async function someMethod() {

const res = window.Buffer.from('somestring');

}

</script>

So, this is how you can make use of NPM modules in your web project in the browser or even just a simple HTML + JS project.

We will be sharing more of these tips often.

Thanks for reading.

Cross Posted from https://tekraze.com/how-to-use-npm-module-with-browserify-in-the-browser/

A simple script to create Rest API in Python with Dockerization as Bonus

Balvinder Singh — Fri, 21 Jan 2022 08:38:26 +0000

One day, I was working with a code where I had to pull JSON data from Github and make use of it in a react app. But the data also contained different keys so, it was like name, then child data but I wanted some different format. I wanted to have an array of these records together. So, I decided to write API in python. I do not know python much, but remembered one of my friends, all these questions our answer is quickly creating up APIs in python with a few lines, so I gave it a try.

So, what I used to create Rest API in python

Here is the code with different methods which I will explain ahead

#author @tekraze

import falcon

import requests

class Hello:

def  on_get(self, req, resp):

# we just send back a string here

resp.media = 'hello'

class HelloJSON:

def  on_get(self, req, resp):

# we just send back a string here

resp.media = {'greet': 'hello'}

class JSONfromURL:

def  on_get(self, req, resp):

# here we get data from url and then send it back as a response

fakeUsersAPIUrl = 'https://jsonplaceholder.typicode.com/users'

usersRequest = requests.get(fakeUsersAPIUrl)

usersResponse = usersRequest.json()

usersRequest.close()

resp.media = usersResponse

class JSONfromURLChange:

def  on_get(self, req, resp):

# here we get data from url and then send it back as a response

fakeUsersAPIUrl = 'https://jsonplaceholder.typicode.com/users'

usersRequest = requests.get(fakeUsersAPIUrl)

usersResponse = usersRequest.json()

usersRequest.close()

# here we additionally create new data and send back to show how manipulation works

# to hold new data

newDataArray = []

print(type(usersResponse))

for key in usersResponse[:10]: ## to just get n items instead of whole list

newData = {}

newData['serial'] = key['id']

newData['name'] = key['name']

newDataArray.append(newData)

resp.media = newDataArray

middle = falcon.CORSMiddleware(

allow_origins="*"

)

api = falcon.App(middleware=middle)

api.add_route('/greet', Hello())

api.add_route('/greet-json', HelloJSON())

api.add_route('/json-from-url', JSONfromURL())

api.add_route('/json-from-url-change', JSONfromURLChange())

So, what is happening here

falcon we have imported to run an API server, and request will help us fetch data from the URL in json format

The below code will create an API server

api = falcon.App()

and these lines will map the API endpoints to specific methods

api.add_route('/greet', Hello())
api.add_route('/greet-json', HelloJSON())
api.add_route('/json-from-url', JSONfromURL())
api.add_route('/json-from-url-change', JSONfromURLChange())

So, Falcon is a lightweight package allowing one to create APIs lightweight but powerful when you need to quickly access data without a full app.

Testing in local

To run API we need to host the python script, which we can do using gunicorn.

Install gunicorn

apt install gunicorn
or
pip install gunicorn

Run script

gunicorn main:api

here main is name as main.py file and api is our api server variable we defined.

You can see below output for the same

You can open the URL on port 8000 by default

Output for running API with gunicorn

Methods Explained

1. Hello and HelloJson

Both methods basically give data in form of string and json. This can be used if we need to pass some data normally or read from a local file and send it.

I have not added the code to read a file but below you can see how to add

with open("test.txt", encoding = 'utf-8') as f:

resp.media = f;

2. JsonFromUrl

So, in this method, we are using one fake rest API which provides us with a users list. So we use request to fetch the URL and send the json back as a response from the API.

You can see in the screenshot

The output of JSONfromUrl method

3. JsonFromUrlChange

In this method, we just add up to the previous method and create a new record from the fake API json. Sometimes we need to get only some data or to process new data from different key-value pairs, then we can use this way.

You can see how the output changed now

The output of JSONfromUrl change method

So, this is how we can create simple rest APIs and tag different methods with Falcon and python

Bonus

So, yes the bonus part on how to dockerize you can check below

FROM python:3.11.0a3-alpine3.15

EXPOSE 8000

# Install gunicorn & falcon

RUN pip install gunicorn requests falcon --trusted-host=pypi.python.org --trusted-host=pypi.org --trusted-host=files.pythonhosted.org

# Add demo app

COPY ./app /app

WORKDIR /app

CMD  ["gunicorn", "-b", "0.0.0.0:8000", "main:API"]

We just created a folder with a structure like

- app
  - main.py
- Dockerfile

so, we put our main.py file in the app folder that will be copied to docker.

then we install packages required and execute gunicorn with CMD.

Note: you can also use requirements.txt in place

Building the image

sudo docker build . -t myfalconapi:latest

Running the app in docker

sudo docker run --name falconapi --port 8000:8000 myfalconapi -d

Access the same way on localhost:8000 or via domain if you running a caddy or Nginx

So, this was for now. Thanks for reading.

We are currently running a survey on a tool, feel free to answer

https://yubpg57axrr.typeform.com/to/MNeVchim

Also feel free to visit our company site to know more on services available

https://dehazelabs.com

So, we showed how to create a simple rest API in python using falcon and gunicorn along with docker. We hope it will help you. To read more articles like this stay connected. Have a happy reading. Feel free to share and comment below for your views on this.

Cross posted from https://tekraze.com/simple-script-create-rest-api-in-python/

# Follow me on my social networks * * * * * [Tekraze Blog](https://tekraze.com/ "This link will take you away from blurt.blog")\ [Instagram Personal](https://instagram.com/balvinder294 "This link will take you away from blurt.blog")\ [Instagram Blog account](https://instagram.com/tekraze786 "This link will take you away from blurt.blog")\ [Instagram Gaming Account](https://instagram.com/tekraze.gaming "This link will take you away from blurt.blog")\ [Youtube Gaming](https://www.youtube.com/channel/UCj4z8phwJn4yCXrtlEYxnVA "This link will take you away from blurt.blog")\ [DTube](https://d.tube/#!/c/tekraze786 "This link will take you away from blurt.blog")\ [Tekraze on Medium](https://medium.com/tekraze "This link will take you away from blurt.blog")\ [Dehazelabs on Medium](https://blog.dehazelabs.com/ "This link will take you away from blurt.blog")\ [Dev.to](https://dev.to/balvinder294 "This link will take you away from blurt.blog")\ [Hashnode](https://tekraze.hashnode.dev/ "This link will take you away from blurt.blog")\ [Noise](https://noise.cash/u/tekraze "This link will take you away from blurt.blog")\ [Hive](https://hive.blog/@balvinder294 "This link will take you away from blurt.blog")\ [Steemit](https://steemit.com/@tekraze "This link will take you away from blurt.blog") [Serey](https://serey.io/authors/tekraze)

How Bounty Hunting changed from Web2 to Web3

Balvinder Singh — Wed, 12 Jan 2022 09:30:13 +0000

With the change in cryptos and decentralization everywhere the industry is moving from Web2 to Web3.

Examples such as

AWS to AkashNet
Digital Ocean, S3 to Filebase, Skynet
Social Logins to Crypto Logins with Metamask and similar wallets
Normal Domains to Handshake Domains
Expressvpn to DVPN

We now have almost every option for web3 similar to web2 if one wants to migrate his data and use the web3 tools. But what has changed with this?

Decentralization and Open Source Contribution with web3

So, if we talk AWS we talk amazon as a web2 company providing services as one identity, whereas Akash is a web3 company providing services from community-run hosting which goes from centralized to decentralized.

This decentralization is working faster and more people are adopting, but one problem here that the new web3 company face.

What do you wonder?

Well the main backbone for any software, the developers. So, with the big companies like Google, Amazon they have a fund with which they can buy thousands of employees in a day and build a product. The bounties work when someone finds a bug and reports it, but not all fixes may be approved as it is hard to convince a company of an issue.

But for web3 companies, mostly are startups with a team starting from one dev to 2 dev or more, mostly under 10 persons as a team. So, the work done may be slow as the hiring does not even make sense, even if it did, the pocket does not allow it. With pocket, I seriously mean the budgets, as startups do start with minimal or no capital at all.

So, how does web3 manage the development with a small team?

What do you wonder again ?

Most of the development work comes from the open-source community who are either using the product or involved as running validators or witness nodes, or just web3 enthusiasts.

These contributions are compensated by the company using either a future stake promise or by giving the tokens which are very early with no values and can be worth more in the future.

For example, if a web3 company creates some X token for his company and gives 10$ worth of tokens to the dev, 10k tokens each. If in the future 1 token goes to 50 cents then the dev will be holding tokens worth 5K. Sounds interesting, yes, this is the power of tokens. People in the cosmos may agree with this as they witnessed this potential.

But the question here is how one can get these compensations or in other words, a bounty as some people term it. There are some ways

Going to Git Repo
Company Website
Discord Channel
Discourse Forum
Reddit
Stackoverflow

and 100 other Forums

But there is no guarantee, you will

first of all, find a bounty,
second, you will be able to complete the bounty,
third and last, you will be compensated for the bounty you solved and one thing we missed, how you connect with them in case you picked from git and done.

to, all these questions our answer is

Bounty X Hunter

We came to a point previously, that web3 has provided the dev opportunity to work with the bounties, but there is no single place for this. Also, the companies looking for more devs who are not easier to find (saying from our experience)

So, what we found is the requirement for a single place where

Web3 companies can post a bounty
Dev can solve the bounty and get rewards
We get the devs to work with as we are involved with a hiring process
Alternative to jobs for web2 developers

we run a staffing and placement platform https://thestaffbox.com

We expect to build this initially on Avalanche with smart contracts as it is better to be in web3.

The idea is to enable people to sign up with their metamask wallet, and do operations and provide a platform for easy bounty findings.

A simple flow where

An application owner from Web3 company comes and post a bounty
Dev visits the BountyXHunter site and looks for a bounty, he finishes and posts the work or optional proof of work done
Bounty poster verifies and provides the bounty in form of tokens to the connected wallet address of the dev

Other features we are thinking of adding

A unified profile where all web3 companies can see devs bounties and their experience
A voting system to highlight profiles
Long term feature bounties where it's more than just fixing and bug requires more time off work with a company
Points system

We have not built anything yet, but we plan to do so. The app will be open source so we can get contributions from the community and community themselves to work on adding a feature, that they want.

To help us in our initiative we need to have some data by which we can make our finance team grant us some pocket money for this project. It's not easy to convince them, but your answers may help this.

Please respond to the given survey and help us.

https://yubpg57axrr.typeform.com/to/MNeVchim

If you also want to help us in another way, do let us know in the comments. We will soon create a discord community to have more ideas and share our status.

Meanwhile, feel free to give a visit to our site to know more.

http://bountyxhunter.io/

Thanks for reading. Best Wishes for the day.

How to setup a DIG chain Validator

Balvinder Singh — Fri, 17 Dec 2021 12:17:02 +0000

If you already know about Dig, then you can continue. If not, then you can visit official Website below.

https://digchain.org

Basically, DigChain is a blockchain based governance project aimed at linking real estate to blockchain in form of Real Estate NFT and provide a new way of investors to earn doing same things. But it is more than just real estate and aimed at governance of small baby blockchains.

You can check github for more

https://github.com/notional-labs/dig

So, lets come back to Validator

Prerequisites

Ubuntu 20.04
Go installed
GCC installed (for go build tools)

Server with

Min requirements

2 vCPU
4GB RAM
100GB+ SSD

Recommended requirements

4 vCPU
8GB RAM
100GB+SSD

Note: Recommended requirements are for long term but if you plan on keeping economics low, then minimum will work for now

Checkout complete steps at the link below

https://erbalvindersingh.medium.com/how-to-setup-a-digchain-validator-a7b4a274b61f

Thanks

A guide to deploying a Static React App on Akash Network Cloud | Tekraze

Balvinder Singh — Fri, 01 Oct 2021 18:07:21 +0000

Let us know how to Deploy a Static React App on Akash Network Cloud Decentralized Platform

We are gonna show, how to deploy a static react app built using React on Akash Network which is a Decentralized Cloud. This will help you deploy other web applications built with the same or different technologies on Akash Decloud Network.

So, what we will need.

React App
DockerHub Account
Akash Wallet Setup with some AKT Token

Check the article below on reading how to set up Akash wallet and other variables.

https://blog.dehazelabs.com/deploy-docker-apps-on-akash-decloud-network-ca40d2386b9a

1. Setting up the Static React App

So, I have already built one app in React + TS when I was trying to learn functional react (I am from angular background). The GitHub repo can be found at the below link. You can skip this step if you have your own app.

https://github.com/balvinder294/My-React-Resume/tree/dockerized

Download static react app from this link and change data

if you need to add your own data to this. Do steps

replace profile-pic.jpg under public folder to replace image for resume
replace your data in src/data.js file as JSON

and push somewhere like Github/GitLab or keep in local.

2. Dockerizing the static react app

So, now we have the app ready, we need to dockerize it before using it and push the image to the Docker hub so we can use it in our configuration while deploying to the Akash network.

a) Preparing docker file for static react app

This code is already added if you cloned the repo, if not add this to your Dockerfile.

# build environment

FROM node:lts-alpine3.13 as build

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json .
COPY package-lock.json .

RUN npm ci --silent

RUN npm install react-scripts@3.4.1 -g --silent

COPY . ./
RUN npm run build

# production environment

FROM nginx:stable-alpine

COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

b) build docker image of the react app

Run the below command using terminal in linux to create and tag the image.

sudo docker build -t balvinder294/react-resume:1.0.0 .

Here, balvinder294 is the username and react-resume the project name and 1.0.0 the version.

Note: You need to have a docker hub account with a repo configured with username and project. Do replace username and project before running commands.

c) Pushing the built docker image of react app

We built the image but we need to host it over the docker hub. So, we need to push the image.

Make sure you are logged in to the docker hub. If not log in with the below command on your terminal.

sudo docker login

then run the command to push the docker image

sudo docker push balvinder294/react-resume:1.0.0

The output of the docker push command will be like

The push refers to repository [docker.io/balvinder294/react-resume]

5086bf0da252: Pushed

a7c11ed26fd5: Mounted from library/nginx
6e8309ec6bfd: Mounted from library/nginx
7ff80c2c03d5: Mounted from library/nginx
35e4637a9d6c: Mounted from library/nginx
b5d14f4aebad: Mounted from library/nginx
b2d5eeeaba3a: Mounted from library/nginx

1.0.0: digest: sha256:70cf15c59409a8e3aff9826e75ac9607b0728bbca22e91dfc6a3525c3f21685d size: 1778

so, we have pushed the image and now it is ready to be used in deployment. Now we need to move to the Akash configuration.

3. Akash DeCloud Network deployment steps

Please make sure Akash is set up in your system before continuing this. We have already mentioned all steps in the previous article, so we will only tell the configuration for this, keeping other deploy steps the same.

a) Create SDL file for react app we want to deploy

So, we here created our SDL file for deployment which is similar to docker except it includes, hosting configuration and resources we need to rent from Akash for AKT. Edit this file accordingly in your preferred text code editor.

---
version: "2.0"

services:
  web:
    image: balvinder294/react-resume:1.0.0
    expose:
      - port: 80
        as: 80
        to:
          - global: true

profiles:
  compute:
    web:
      resources:
        cpu:
          units: 0.1
        memory:
          size: 128Mi
        storage:
          size: 256Mi
placement:
    westcoast:
      attributes:
        region: us-west
      pricing:
        web: 
          denom: uakt
          amount: 1000

deployment:
  web:
    westcoast:
      profile: web
      count: 1

Note: we have set placement part according to our own provider, please refer to previous article on changing to akash specific providers

B) Now actually deploy react app

Now following deployment steps as same with current deployment file. We can now deploy the static react app.

Just for reference here is how the bid will appear on the query

bids:

- bid:

bid_id:

dseq: "2055098"

gseq: 1

oseq: 1

owner: akash16hu2s7g3uf9ln0veqlv2q9pq7uqhnn6crkr9j6

provider: akash1rt2qk45a75tjxzathkuuz6sq90jthekehnz45z

created_at: "2055101"

price:

amount: "1"

denom: uakt

state: open

escrow_account:

balance:

amount: "50000000"

denom: uakt

id:

scope: bid

xid: akash16hu2s7g3uf9ln0veqlv2q9pq7uqhnn6crkr9j6/2055098/1/1/akash1rt2qk45a75tjxzathkuuz6sq90jthekehnz45z

owner: akash1rt2qk45a75tjxzathkuuz6sq90jthekehnz45z

settled_at: "2055101"

state: open

transferred:

amount: "0"

denom: uakt

pagination:

next_key: null

total: "0"

We selected this provider for deployment.

Here is the output of the app deployment on the Akash decloud network.

{
  "services": {
    "web": {
      "name": "web",
      "available": 1,
      "total": 1,
      "uris": [
        "1ulomkuct9a056t8cmqqroddeo.provider.dehazelabs.com"
      ],
      "observed_generation": 1,
      "replicas": 1,
      "updated_replicas": 1,
      "ready_replicas": 1,
      "available_replicas": 1
    }
  },
  "forwarded_ports": {}
}

Here 1ulomkuct9a056t8cmqqroddeo.provider.dehazelabs.com is the address to the deployment.

Note: We have fixed some issues and changed the URL to https://12eensunnhd31d2fb7fdnlg5ek.provider.dehazelabs.com/

Demo image

Summary

So, here we discussed how to deploy a static react app on Akash Network Cloud. Do let us know in the comments if you get any issues. We will add more Akash network related posts so you can learn web development and deployment with the Akash network.

As we are having a react app that is static and not having any dynamic data to save, we will not be using any database for now. But in the next examples, we may add.

Please do share as sharing is caring. Feel free to comment your views/queries in the comments below.

Originally published at [Tekraze.com](https://tekraze.com/deploy-a-static-react-app-on-akash-network-cloud/) and posted under [Dehazelabs blog](https://blog.dehazelabs.com/) by me

21 Top Websites to chat anonymously to random people online in 2021

Balvinder Singh — Mon, 13 Sep 2021 08:27:16 +0000

Chatting online has become an essential thing these days. Be it a workaholic or a loner or an individual with a simple life, and there is a part within us that wants to pass our time. So the first thing that comes to our mind is to talk, share one's time to lighten ourselves. So what's better than chatting online with people with whom we can talk about anything we wish. Often, people want to know about certain websites where they could have a good time and feel better.

Table of Contents

21 Top Websites to chat anonymously with Random People in 2021

Here in this article, we are listing some of the great websites that would provide you a quality time while chatting to a stranger. Some of the sites described support video chat too. One most exciting features of all these websites and that is your identity would not be revealed, and that's a good thing when you are talking to a stranger. It also allows you to use your Fb account to search for the persons whom you are looking for. There are many exciting features too provided by these websites, like one of these websites allows you to draw images, while the other lets you listen to music.

You can chat with strangers about any topic you like on websites to chat online

The website supports multiple languages.
No registration. Chat with random strangers just by signing in using any username.
This platform is a global one and connects you with people in other countries.
We have optimized the page so that it's compatible with your laptops, PCs, and smartphones.
Enjoy a free random chat with men or women.

| Also Read | 5 Best Apps for Programming Students

better than talking your heart out and even keeping your story securely. This website lets you chat with strangers online via a private server after you have logged in. To use our talk to strangers service, log in to our site using any browser, enter your nickname, select your gender, select the gender of the person you wish to talk to and then click on 'Chat'. This starts up a random stranger chat where you've connected to a random stranger anywhere on this planet, who is also logged in at the same time.

You can do chat with people via sending

text message
video call
voice call
photos and videos

Top 5 Websites to Chat Anonymously Banner

Let See a List of Top 21 Websites to chat with people for random chats online

1. Omegle

Omegle is the most popular among all sites to talk to strangers. You can have either text or video chats based on your interest. This is also available for iPhone in the App Store. Omegle is the best website to chat anonymously with real-world actors from your favorite movies and series.

Note: We are not saying you will surely get to talk to celeb, but people were lucky to find celebs randomly.

Avengers on Omegle video

2. iMeetzu

iMeetzu is another well-known site that connects you to the first random person available on chat. It also offers a wide variety of features like map search, user search, and registration for keeping logs. It is also available for the iPhone.

3. A Nice Chat

ANiceChat claims to be the first established "stranger chat" website. Unlike other sites, ANiceChat uses flash for its very simple use of the chatroom.

4. E-Chat

This is another website where you just need to sign in and bam! You get to see the virtual world full of strangers, and known people are waiting for you to talk to you.

5. CamSurf

On Camsurf you can connect with thousands of people from all over the world in a fun environment. It is a lightweight chat platform that makes video chat easy without sacrificing great features. You'll feel like a pro in seconds.

Camsurf has thousands of users online at all times. If you want to meet someone new, simply click the 'next button and you will be connected with a new stranger right away. It's so simple to make hundreds of new friends, maybe you will even find that special someone.

6. Stranger Meetup

Stranger Chat is an online, anonymous, and text-based chat app. Stranger Chat connects you with a stranger and lets the two of you send live text messages to each other. Our chat service lets you text chat with randomly selected people from all over the world in private chat rooms.

The chat service is completely anonymous, the stranger you chat with cannot see who you are.

7. TALK

TALK is an app for anonymous conversations and you can make the chat rooms, you can invite your friends and you can talk about any topic you wish. Anyone in the room can invite new friends so within a few minutes you can have a room full of people discussing and sharing your topic.

You can also join any other room and talk with strangers. TALK is perfect for meeting new people. Not only can you chat with your friends but TALK will connect you with new people interested in your topics. Use it to expand your circle of friends, improve your knowledge of a subject or let other people know what you think.

Photo by Andrea Piacquadio on Pexels.com

8. Meetyou

Meet you.me is a stranger meeting platform that allows its users to meet strangers as well as create disposable chat rooms with or without passwords. It allows sharing of media files like images and videos. You get to talk to strangers without login, without the app, without bots & without spam. This is a female-friendly site with a lot of girl users to talk with. They focus on creating an environment where you can make friends online not dating without registration. Do not flirt with strangers on this site. They have online chat rooms for intellectuals, chat rooms for writers, chat rooms for students, and chat rooms to talk with strangers for stranger meetups.

9. Talk With Stranger

Talk with Stranger is the best anonymous chat website. Find people from all around the world and have chats with them. You can have a free anonymous chat on this chatting site without registration.

You can chat with strangers using the Talk with Stranger mobile app available for Android as well as for iOS. Use this app to chat anonymously with random strangers and make them your friends. This anonymous chat app is fun, you get to know each other and one of the best sites to chat with strangers online.

10. Chat42

Chat42 is one popular chat site where you can instantly chat with random people by entering your name and start. You can chat with people on the web or by mobile apps on android and ios. It is similar to text random people over messaging app natively and provides a similar text chat experience online.

11. Yes I chat

Yes I Chat is an international chatroom where you can chat as you like. No limits on any user. No signup, registration, and log in to use YIC. Random chatting. Free gaming chat rooms. Random chatting with strangers online as guests in public and private chat rooms, anonymous and mobile-friendly. A large number of chatrooms are created by our platform users and us to join when you become a member of our platform.

12. 7Strangers

7Strangers is a great place to meet new friends. When you use chat 7Strangers, it connects you to another random chat user and lets you have 1 on 1 text chat with each other. The chat service is completely anonymous, your chat partner cannot see who you are and you can stop a chat at any time -- it helps you stay safe. To chat is just one click away. No registration is required in order to use our chat service. Have fun and meet new people from other countries or your neighborhood.

This random chat offers you a great time and an opportunity to get more friends online. Share your opinions and interests with strangers who can become your best friends very soon! Enjoy the variety of people that the chat is giving you the chance to chat with. Learn more about different cultures, get to know cool and interesting strangers from all over the world.

13. Connected2.Me

Chat with friends and meet new people from all over the world, safely and completely anonymously. Create your profile through which people can chat with you anonymously!

You won't be able to see who they are, so it will be always fun, they promise 😉

14. ChatSpin

When it comes to anonymous chat, Chatspin has the features you need. Whether you choose to text chat or participate in an anonymous video chat, you will be amazed at what this experience has to offer.

On Chatspin, you can be whoever you want to be. If you are shy and reserved, our fun and free features can help you come out of your shell. There's no limit to the personas you can create with AI facemasks and chatting filters. They keep your personal information private and allow you the confidence of being who you want to be.

Photo by Anna Shvets on Pexels.com

15. Outspoken

Outspoken is a chat app that lets you chat with friends without revealing names to each other. Outspoken is one of the best sites to chat with strangers anonymously online. You can talk to random people about random topics.

16. Tohla

When you are in the mood for some fun and want to share your thoughts sans any fear, log on to the desi chat platform Tohla.in. This site is an absolutely innovative platform for indulging in 1 on 1 chat with people across the globe. It is the best local website to talk to people for the Indian public.

17. Chatzy

Chatzy provides a free private chat service to talk to people online privately. You can create your own chat room and invite people by email to chat with people or text random strangers online. There are no ads, no installation, and no registration required. You can even find chat rooms to talk to someone random person here.

18. ChatRoulette

Chatroulette is the original internet breaking random chatroom to meet guys, girls, celebrities, musicians, comics, bloggers and influencers plus all sorts of fascinating people. It helps you to have a real chat with strangers and meet random person online even random celebrities. It provides video calls support to talk to the random person online.

19. Bazoocam

Bazoocam is one of the websites to talk to strangers and meet. You can talk to a random person who lives close to you and is using a webcam for a video chat with people. bazoocam localisation. It makes you able to chat with a randomly chosen stranger by the algorithm living close to your town (approximate detection by geo points).

20. Roulette.chat

Chatroulette is an online video chat website without any limits. The main rule here is just to have fun, train the language, chat anonymously and make new friends. You don't have to fill in long profiles or register forms like Omegle. It provides the same chat experience as Omegle does.

21. Tinychat

Tinychat is an easy and free video chat room for all. Browse through the free video chat rooms to meet friends or make your own chat room. You can talk to random people here or text online.

Photo by EKATERINA BOLOVTSOVA on Pexels.com

Chatting online can lead to many positive aspects

Socializing and it's an excellent platform for those who love to share things regarding themselves like their hobbies, their interests in any stuff that can be matched with the other person you get to talk to.
There are certainly no barriers to online chatting. One can be from any corner of the world, and there is a better chance of exploring each other's existence. Everything is kept confidential and no fear of talking out.
Sometimes we get to find our long lost friends or long-distance relatives in this way. It is always a joy to have a chat with the people whom you get to see after such a prolonged duration.
People often want to speak out what they feel, but hardly everybody hears it. Online chatting is all about it, you talk to people sharing your joys, pain even you can ask for suggestions, and people are there to listen to you. It creates friendly surroundings and gets away from your loneliness.
Due to these websites, you are always connected with your friends and family sharing your every day's stories, happiness, and knowing about their lives too. It creates a strong bonding between you and them.

So these are the websites and perks of doing online chatting.No more boredom or feeling alone. The world is waiting for you to hear your thoughts, and technology has helped us enough to have given us unlimited internet options. So it's the best way to utilize and give out something best of yours and let others know about it too.

Talking to strangers can sometimes even make you closer to them and more strong bonding if it's with your friends and family. It's all about giving and taking each other your stories and getting on with life. So don't stop yourself anymore. Try it now!!

| Also Read | Top 5 Tips for Newbie Photographer to Manage Photos

Summary

So this was all about Top 5 Websites to chat anonymously, submitted by one from the community. I hope you liked it, feel free to share your view or any opinions in the comments below.

Talking to strangers anonymously is a strange experience for some, but for some is a nice experience. So, what you say on this, feel free to share in the comments below about your experience with the app where you text random people online or have anonymous chat with strangers.

Note: These all sites are anonymous, but still your details can be tracked. Do use any paid or free VPN before surfing any of these sites for additional security.

Let us know in the comments below if you know of any other nice websites to chat with people. Also let us know in the comments, which one you liked. Thanks and keep reading.

Originally published at https://tekraze.com/top-21-websites-to-chat-anonymously/

24 Top Free Graphic Design Websites For Graphic Designers In 2021 “ Tekraze

Balvinder Singh — Mon, 23 Aug 2021 15:27:55 +0000

A list of 24 top free graphic Design websites for graphic designers and web designers

One of the most clever shortcuts I have found as a creative entrepreneur is to use freebies. Whether you’re working on a new website design or designing a package for your product, you can find high-quality resources to help you speed up the process and get things done in a professional manner.
There are tons of communities sharing free graphic design resources for graphic designers such as mockups, icons, fonts, textures, photos, and much more. Let’s check out this list where one can get the best graphic design inspiration for work.

1. Freepik

Freepik helps you to find free vector art, illustrations, icons, PSD, and photos for use in websites, banners, presentations, magazines. They are currently creating hundreds of free vectors daily.

2. Fribble

Fribble is a website for curated design freebies from the biggest online design community called Dribbble.

3. Printasia

Printasia is an Indian printing company for you, which is so Indian that it makes true Indian designing and printing visiting cards, brochures, letterheads, flyers. Printasia comes to the customers, where they want. They can design available that suit your business exclusive, affordable, and of high-class Indian quality and caliber. In this, you can view designs and create yourself.

4. Graphic Burger

GraphicBurger is another large website for design freebies. You can download mockups, UI kits, icons, text effects, backgrounds, and other front end design components.

5. Flaticon

Flaticon is the largest search engine of free icons in the world. Flaticon offers users, high-quality graphic designs: totally editable vectors carefully selected by the design team in order to provide our users with great content that can be used in both personal and commercial projects.

6. Pixabay

Pixabay is a vibrant community of creatives, sharing copyright-free images and videos. All contents are released under Creative Commons CC0, which makes them safe to use without asking for permission or giving credit to the artist - even for commercial purposes. Over 1.5 million royalty-free stock photos and videos are shared by our generous community.

7. Pixel Buddha

Pixel Buddha has a huge collection of free and premium design resources. Everything is in one place for your next design project.

8. Lovesvg

FREE SVG RESOURCES FOR CRAFTERS. They offer free daily SVG cut files for your personal DIY projects. The free cut files include SVG, DXF, EPS, and PNG files.

9. Blugraphics

Free icons, templates, logos, flags, and maps. All of these freebies you will find at Blugraphic.

10.Pexels

By providing free stock photos Pexels helps millions of creators all over the world to easily create beautiful products and designs. Pexels provides high-quality and completely free stock photos licensed under the Pexels license. All photos are nicely tagged, searchable, and also easy to discover through our discover pages.

11. Sketch Repo

Sketch Repo is a freebies website for all designers using Sketch 3.

12. 1001 Fonts

This will help you to use awesome fonts to create a Logo, Poster, Visitor Card, etc.

13. Template.net

25,000+ Beautifully Designed, Easily Editable Templates to Get your Work Done Faster & Smarter. Template.net Offers Premium quality, Editable, Printable templates for Free, With thousands of templates from dozens of categories, Template.net aspires to help SMEs in their journey to success, Most of the templates include suggestive texts to help a user edit the template faster, so you will not have to start from scratch. Carefully Designed, High-quality, Customizable files with Ease of Access and Digital Sharing! Available in Microsoft Word, Publisher, Apple Pages, Numbers, Adobe Photoshop, Illustrator, InDesign.

14. IconDeposit

Every icon on Icon Deposit is submitted by the best designers from around the world. It's a huge community of icon lovers.

15. Coloors

The super fast color schemes generator. Create, save and share perfect palettes in seconds! The Coolors is free for the first two months you can use as a trail. It helps you to match a color with the design as you want like in template design logo design.

16. AdbobeXD

Adobe XD is a user experience design software application developed and published by Adobe Systems. It supports vector design and wireframing and creating simple interactive click-through prototypes.

17. PikWizard

The Pikwizard has over 100,000 completely free images on the site, over 20,000 of those exclusive to this site. They are also adding new images in their library daily. By providing free stock photos Pikwizard helps millions of creators all over the world to easily create beautiful products and designs.

18. Behance

Behance is the world's largest creative network for showcasing and discovering creative work. You can join this site to share your work and get more inspiration for your next web application development or mobile application project.

19. Dribble

Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.

20. Photopea

Photopea Online Photo Editor lets you edit photos, apply effects, filters, add text, crop, or resize pictures. Photopea provides mostly all the options available with local photoshop or gimp installations.

21. Remove.BG

Remove.bg is a tool for removing background for your images easily. You can also add another background with patterns or images using the same tool after removing the background. Removing images with options like Gimp or photoshop is difficult but it makes removing easier.

22. LineIcons

Line icons are specially designed for all types of user interfaces with a strong focus on high legibility. Clearly visible on a computer, tablet, and mobile screens in different sizes. Line icons are a good icons resource.

23. Creative Tim

Creative Tim is a UI Kits, Templates, and Dashboards built on top of Bootstrap, Vue.js, React, Angular, Node.js, and Laravel. Join over 1,648,588 creatives to access all our products! You can find templates, themes, and design libraries for different programming languages or stacks like MEAN here.

24. Canva

Canva can be used to create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations, and more. Canva provides images, elements, shapes, icons, and free images directly in the editor. You can create images, animations, and videos here for different sizes.

Summary

One of the most clever shortcuts I have found as a creative entrepreneur is to use freebies. Whether you’re prototyping a new chat website or designing a package for your product, you can find high-quality resources to help you speed up the process and get things done in a professional manner.

I hope you like the post, if yes then do share with your friends and comment down what you think of this one, and let us know so we can improve our content. Keep sharing as sharing is caring. Stay connected and keep checking for more updates coming.

Originally published on https://tekraze.com/free-graphic-design-websites-graphic-designers/

6 Ways How to Avoid a Cringey or Embarrassing Business Name in 2021 | Tekraze

Balvinder Singh — Fri, 13 Aug 2021 11:09:24 +0000

Businesses with cringey brand names frequently get into difficulty because their brand names—which were designed to help them succeed—become a source of humiliation and disgrace.

Lets check out ways How to Avoid a Cringey or Embarrassing Business Name

Countless companies have fallen prey to the hungry jaws of failure due to a lack of understanding of the effect their brand’s name has on their products. And if you don't want your company to suffer the same fate as Ayds diet candy, make sure you avoid these naming blunders.

1. Avoid Names with Negative International Connotations

With the rate at which everything is becoming digital, don't expect your brand name to be limited to its immediate surroundings. Customers all over the world are watching, and they won't hesitate to dump your products if you make a blunder with your brand name.

Want to know what Spanish customers did when they learned that ‘La Puta' meant ‘The Whore?’ Well, they wasted no time in dumping Mazda's Laputa.

And yes, customers did something similar in Finland when they abandoned Fiat’s Uno because the Italian term for ‘One,’ ‘Uno,’ also meant ‘Fool’ in Finnish.

So, before choosing a foreign brand name, make sure you've done your homework to ensure it won't offend buyers from other countries.

2. Don’t Use Names that’d Offend Customers

Crazy, Irate, Angry, Mad, Upset, Person
Courtesy: Pixabay
In today's world, where customers are much more aware of the brands they buy from, sending the wrong message—from your brand name—about issues of culture and politics will undoubtedly create a chasm between your brand and its customers, much like Aunt Jemima's name did before it was rebranded to Pearl Milling Company.

Understand that insulting your clients is a tried and true formula for brand disaster. Many firms make the mistake of attempting to demonstrate their originality with a cheesy brand name, and they pay the price.

Entrepreneurs must exercise caution when dealing with political difficulties because even after you've chosen a unique name, don't do anything that would make your customers ashamed of your business. So you have to…

Read full article at Tekraze.com

10 Tips on How to Extend the Life of Your Laptop

Balvinder Singh — Mon, 09 Aug 2021 08:16:16 +0000

What we can tell you right away from experience - you shorten the life of your laptop without even realizing it. With its careful use and maintenance, it can serve you faithfully for years. Without battery, your laptop is just another desktop as it needs to be plugged in every time. If you take care of your laptop, it can last for more years.

These are 10 things you should avoid doing to extend the life of your laptop.

Avoid Overheating

SOurce - Teamviewer

High temperatures are the deadly enemy of laptops. Letting it overheat will endanger sensitive components such as the processor, cooler, and battery. So avoid using laptops on soft surfaces that could block the air vents and make cooling more difficult. It is ideal to use it on a table and similar flat surfaces. If you must use the laptop in bed, make sure the air vents are free.

In addition, do not leave the computer near objects that emit heat (such as radiators) or in spaces where the temperature may rise (such as a car in the sun). surrounding temperature can also affect the battery adding up to heating and damage.

Handle It Carefully

Although relatively durable, laptops are still expensive devices with a lot of sensitive electronics that need to be handled with care. They are portable but just to take away from one place to another, not like moving regularly, so better to keep it steady at a desk or a proper place.

For example, avoid lifting or holding the laptop by the screen, forcibly opening it, using it as a drinking pad, or throwing it away. As it can break the hinges, loosen them, or may break the screen as they are very delicate and costly to replace.

Don’t Discharge the Battery Completely

Source wikiHow

Laptop batteries are not meant to last forever - after two years of use, their capacity will start to decline. It is impossible to avoid, but you can slow down this process if you handle the battery carefully. Ideally, do not constantly ‘drain’ it to zero and charge it up to 100 %.

It is better to keep it above 40 % of the capacity and constantly charge it to 80 %. Of course, this will not always be doable, but do it whenever you can.

if you always stay connected to power, make sure to keep power settings optimized as it will allow you not to damage the battery. Power profiles like performance mode use more battery than normal mode and hence it affects battery more than normal use. So, better keep normal profile or power-saving until you really need the full performance of the laptop.

Don’t Play With Electricity

Source - Clipartmax

The laptop uses a solid amount of electricity and is sensitive to sudden increases in mains voltage. The voltage can damage the charging point and so the motherboard short circuit can cause you money to be repaired as the board can get fried.

Most have some kind of protection built-in, but if you have an expensive computer and/or use it in an area where the risks of a sudden voltage rise are high, it is wise to get special surge protection. You may have to replace it after three to five years, but it is certainly cheaper than buying a new laptop.

Also read differences between photoshop and gimp tool

Take Care Of the Power Cable

Source - google

The cable that powers the laptop is the most important part of its accompanying equipment. Usually, it is strong and durable, but the cable can also suffer damage due to constant transport, falls, pulling from the wall plug, or if, for example, you pin it to the door.

A damaged cable can cause power problems, inadequate power supply, and even a fire. Avoid bending cable or pulling, as it can lead to a short circuit of cable and then damaging the laptop. Do replace the cable, if it gets torn or has scratches.

Don’t Waste Time on Unnecessary Maintenance

Source - MiniTool

In the days of Windows XP dominance, regular cleaning and maintenance of your computer made sense. Today, it is unlikely that deleting unused and temporary files will actually speed up your computer. So, do only if you really require and maybe once in a month or two.

In addition, a large number of applications that can be found on the Internet for cleaning and maintenance assistance are in fact useless and potentially harmful (e.g., Windows registry cleaners). You can find almost everything they offer in Windows 10 settings. So, in case you want to delete all unnecessary files for whatever reason study these settings well.

Protection Is Key

Source - PCMag

Be sure to install antivirus and antimalware software on your computer and activate the firewall. Microsoft has built Windows Defender into its operating system, but it is a good idea to look for additional protection (such as Malwarebytes Anti-Malware), especially if you use your computer for business or keep sensitive personal information on it.

Update your software regularly, use a good password manager, and learn how to recognize scams lurking on the web. If you are a regular user, do keep software like a network scanner or VPN to protect your identity.

Keep Your Laptop Away From Those You Don’t Trust

Source - iStock

If you are not sure whether the person you intend to entrust your laptop to use will treat it the way you would, don’t give it to them. Better say no first over crying after.

Keep children and pets away from your laptop

Children and pets are both cute but they unknowingly can cause damage to laptops by pouring water or food items. or they can push buttons or screen hardly causing scratches or button failures. food crumbs can go, or just oil from hands because of food.

Keep Your Laptop Away From Liquids

Source - TechStudioMacAndPcRepair

Watering with liquid is one of the most common ways to put your laptop in an unusable state.

With water, maybe (emphasis on “maybe”) you will be able to somehow get away with a lot of luck but if a liquid with a lot of sugar ends up inside the laptop, it is almost certain that you can say goodbye to it. The water can cause salts to deposit over circuits causing damage to components on the motherboard or worse damage to the keys of your keyboard as they are very delicate.

also checkout top cloud gaming services in 2021

Be Careful What You Clean It With

Source - Tech Radar

Wiping your computer with a wet cloth is not a good idea, nor is using a cleaning agent. The probability that you will do more harm than good is quite high like that. If you use too much liquid it can go down deep and cause damage as the liquid also takes some time to evaporate, but can cause damage even if it stays for a second. Don't clean the sockets and ports nearby while the laptop is turned on.

Ideally, clean your laptop with a dry, lint-free cloth. Do use screen guard or laptop keyboard guard as it helps you keep clean for a long time and saves from dust as well food crumbs to go in while working on laptop and eating together

Summary

So, this was all for today, we hope you like it. Laptops are surely a precious thing and we may use different but we all do have some data and precious memories with our laptops. So keeping care of the laptop is a nice thing to do.

Feel free to share your views in the comments below and let us know what you do to take care of your laptop.

Thanks for reading, keep reading. Also do share as sharing is caring.

Posted from Tekraze.com with Exxp Plugin : https://tekraze.com/tips-how-extend-life-of-laptop/