Chat GPT - 5 Ways to Use Right Now
Chat GPT - 5 Ways to Use Right Now

ChatGPT is extremely powerful tool this is why lots of people are talking about it and trying it now. Here are 5 different ways to use ChatGPT and solve your everyday needs.

The future of our children

A lot of people in schools and universities started to use ChatGPT extensively to solve their homework. Because you can type whatever you need in ChatGPT and get a result with good explanation.

Homework

For example here we asked to compare -2/3 and 9/-4. Here we directly got an answer to this question.

The typical way previously to solve such problem would be to google what is the topic about, study documentation about comparison rational numbers, understand how it works and only then you can solve something.

With ChatGPT is it not needed at all because you are getting here not only an answer but the understanding how it works and how it can be calculated.

But obviously ChatGPT can make mistakes so it is completely possible that the result is wrong and you must double check it.

And it is not all. You can ask ChatGPT to write an essay.

Essay

For example here I asked ChatGPT to write an short essay about Harry Potter and as you can see it looks quite nice, without any mistakes and we can use it in school or university.

Writing official documents

Another way to use ChatGPT is to write official emails and documents. A lot of people like me hate to write official documents because we don't know how to write them correctly. It is much easier for me to just write "Hi, I have such problem...". But it is not how it works for a lot of companies.

This is why we can paste in ChatGPT something like this.

How to write an official email to home owner regarding broken window.

Broken window

Here we are not just getting a letter example but also some guidelines if we want to try and write it on our own.

Solving bugs

Now we are coming to programming problems. And actually ChatGPT can help a lot in solving bugs. Here I have an Angular project with a Typescript error.

Typescript error

Typically I just copy paste this error in Google and try to understand answers from Stack Overflow. But now we can just paste it inside ChatGPT and ask what is the problem.

Typescript solution

Here we get a short and understandable documentation that the problem is that we didn't assigned initial value. We also get here an example how we should change our code to make it working. Alternatively we could use here a questing mark to tell that it is undefined.

What is more interesting that these are 2 solutions for this problem. And I tried exactly this error a week ago and got only one solution.

This means that ChatGPT is evolving really fast

Code refactoring

The next way to use ChatGPT is to ask it to refactor code. It can do it quite good and can help in a lot of cases.

Bad function

So this is a function which I pasted which can be optimized.

Good function

So ChatGPT analyses our function completely, understood it's problems and refactored it. As you can see the refactored version is just 3 lines of code. Also it wrote a list of advantages between old version and the new version.

So as you can see especially for beginner this tool is really helpful. It can help you to understand if your code is good enough and how you can improve it.

Guidance helper

Another way to use ChatGPT in programming is to ask it for guidance. Let's say that I'm a developer and I need read query parameters inside JavaScript but I don't know how to do it or what is the best possible variant.

Url params

Here we are getting the best possible answer. It suggested to use URLSearchParams to get parts of our URL. We get back a small amount of documentation to understand the problem. So we can easily understand how to use it.

So it is not like it happens really often on Stack Overflow where you get lots of bad structured or unclear answers or you copy paste it and it is broken.

Bonus: Writing comments

Here is my bonus point how you can use ChatGPT to write code. Actually sometimes you need to cover your code with comments. I always try to minimize the amount of comments that I'm writing and I want my variables to be understandable. But in some teams you must write more comments so all people understand the code, especially if they are beginners.

Additionally to that you might be an advanced developer and then it is more difficult for you to check other people and show them your code. This is why I asked ChatGPT to cover my code with comments to it is readable for other people.

import { useEffect, useState } from "react";
import "./usersTable.css";

// HeaderCell is a functional component that represents a cell in the table header
// It displays the column name and a sort arrow depending on the current sorting state
const HeaderCell = ({ column, sorting, sortTable }) => {
  // Determine if the current column is being sorted in ascending or descending order
  const isDescSorting = sorting.column === column && sorting.order === "desc";
  const isAscSorting = sorting.column === column && sorting.order === "asc";
  // Determine the future sorting order when the cell is clicked
  const futureSortingOrder = isDescSorting ? "asc" : "desc";
  return (
    <th
      key={column}
      className="users-table-cell"
      onClick={() => sortTable({ column, order: futureSortingOrder })}
    >
      {column}
      {isDescSorting && <span></span>}
      {isAscSorting && <span></span>}
    </th>
  );
};

// Header is a functional component that represents the table header
// It displays a list of cells, each with a column name and sort arrow
const Header = ({ columns, sorting, sortTable }) => {
  return (
    <thead>
      <tr>
        {columns.map((column) => (
          <HeaderCell
            column={column}
            sorting={sorting}
            key={column}
            sortTable={sortTable}
          />
        ))}
      </tr>
    </thead>
  );
};

// Content is a functional component that represents the table body
// It displays a list of rows, each with cells displaying the values for the specified columns
const Content = ({ entries, columns }) => {
  return (
    <tbody>
      {entries.map((entry) => (
        <tr key={entry.id}>
          {columns.map((column) => (
            <td key={column} className="users-table-cell">
              {entry[column]}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  );
};

// SearchBar is a functional component that represents a search bar
// It allows users to search for table entries by name
const SearchBar = ({ searchTable }) => {
  // Use state to store the current search value
  const [searchValue, setSearchValue] = useState("");
  // When the form is submitted, prevent the default action and call the searchTable function with the current search value
  const submitForm = (e) => {
    e.preventDefault();
    searchTable(searchValue);
  };
  return (
    <div className="search-bar">
      <form onSubmit={submitForm}>
        <input
          type="text"
          placeholder="Search..."
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
        />
      </form>
    </div>
  );
};

// UsersTable is the main functional component for the table
const UsersTable = () => {
  // Use state to store the list of users
  const [users, setUsers] = useState([]);
  // Use state to store the current sorting state
  const [sorting, setSorting] = useState({ column: "id", order: "asc" });
  // Use state to store the current search value
  const [searchValue, setSearchValue] = useState("");
  // Define the list of columns to display in the table
  const columns = ["id", "name", "age"];
  // sortTable is a function that updates the sorting state
  const sortTable = (newSorting) => {
    setSorting(newSorting);
  };
  // searchTable is a function that updates the search value
  const searchTable = (newSearchValue) => {
    setSearchValue(newSearchValue);
  };

  // Use the useEffect hook to fetch data from the API and update the users state whenever the sorting or search value changes
  useEffect(() => {
    // Construct the API URL with the current sorting and search values
    const url = `http://localhost:3004/users?_sort=${sorting.column}&_order=${sorting.order}&name_like=${searchValue}`;
    fetch(url)
      .then((res) => res.json())
      .then((users) => {
        setUsers(users);
      });
  }, [sorting, searchValue]);

  // Render the search bar, table header, and table body components
  return (
    <div>
      <SearchBar searchTable={searchTable} />
      <table className="users-table">
        <Header columns={columns} sorting={sorting} sortTable={sortTable} />
        <Content entries={users} columns={columns} />
      </table>
    </div>
  );
};

As you can see all component is covered with description what it does. Every important line is described in the correct way. So ChatGPT fully understands this code and covers it in the best possible way.

And actually if you want to improve your Javascript knowledge and prepare for the interview I highly recommend you to check my course Javascript Interview Questions.