teleren/devto huggingface dataset:
Creating Custom Hooks in React and TypeScript 👨‍💻
Published: 2023-01-04 22:16:10

React is a popular JavaScript library for building user interfaces, and TypeScript is a popular superset of JavaScript that adds optional static typing and other features. Together, React and TypeScript can provide a powerful toolset for building scalable and maintainable web applications.

One of the key features of React is its ability to reuse code through the use of custom hooks. Custom hooks are functions that allow you to extract component logic into reusable functions. They are a powerful way to share logic across your application, and can help to reduce the complexity of your code.

To create a custom hook in React and TypeScript, you will need to follow a few steps.

First, create a new file in your project and name it useMyHook.ts. This file will contain the code for your custom hook.

Next, define the function signature for your custom hook. A custom hook should always begin with the word "use" and should follow the rules for naming functions in TypeScript. For example:

```ts
import { useState, useEffect } from 'react';

export function useMyHook(): [number, (n: number) => void] {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`count is ${count}`);
  }, [count]);

  return [count, setCount];
}
```

In this example, the custom hook is named `useMyHook` and it returns a tuple containing the current value of `count` and a function for updating `count`. The hook also uses the `useState` and `useEffect` hooks from React, which are used to manage state and side effects in a functional component.

To use your custom hook in a React component, import it into the component file and use it like any other hook. For example:

```ts
import { useMyHook } from './useMyHook';

function MyComponent() {
  const [count, setCount] = useMyHook();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
```

This component uses the `useMyHook` custom hook to manage the count state and render a button that increments the count when clicked.

----------------------------

Custom hooks are a powerful way to share logic across your React components and can help to reduce the complexity of your code. By following the steps outlined above, you can easily create custom hooks in React and TypeScript and take advantage of the benefits they offer.
Things that will make you hate being a Software Engineer... Sometimes!
Tags: beginners, programming, productivity, career
Published: 2023-01-04 22:13:48

Photo by <a href="https://unsplash.com/@sashafreemind?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sasha  Freemind</a> on <a href="https://unsplash.com/s/photos/loneliness?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  

There are a lot of them. Let me just highlight a few…

### You can be slow.
Yes, you can be slow and by slow I mean a lot of jiras behind your teammates and this isn’t a funny situation to be in. But it’s going to happen at least once in your project. It might not be because you are sick or had an emergency but simply because you do not know everything. For instance, in that new task/project, you might need to learn a new language or framework and it is going to be challenging for the first time no matter who you are. So whenever the imposter syndrome kicks in, just remember that you can be slow sometimes and it’s perfectly ok. You will get faster with experience.

### People are busy.
People will often say that in our software engineering field you cannot do the work alone and it is true but, the reality is that you won’t always find the help you need when you need it. People are just busy working on their tasks or fixing their own bugs. Trust me, the reality in this field is far away from your regular “ A day in the life of a Software Engineer ” video on YouTube. It can take long before someone decides to look into what you are doing and offer to help. The solution to that is to develop resilience and knowing how to work as a freelancer within a team - at least that’s how I can label it - the less you ask for help or need help, the better off you are. Don’t get me wrong though. Ask questions for clarifications but don’t ask people to do your job for you. 

### Unconsciously seek validation.
When you are just getting started working on a new project, you will be tempted to show to your team what you are capable of and it’s good. But what if it fails, what if it takes longer? What if you actually need a lot of help to come through? And so many other things that can fail. My advice is to step into the job and impress yourself by giving your best. Look at the task, analyze it and ask for clarifications as many times as you need to get the job done. Think of it this way. After being assigned a task, set a goal for yourself like how long will it take you to raise your first Pull Request and after the PR has been reviewed, take note and improve upon it. As time goes on, try to reduce the time and raise more PR and above all, do not forget to document it.


I hope this post will not give you a reason to quit but rather an exposure to what can be your reality. If you are lucky, you may not even feel that way at all then know that you have hit the jackpot which is a company with an amazing culture. My advice is that you stick around for as long as you can.
Every C program has main()? (False)
Tags: c, main, myth
Published: 2023-01-04 22:09:28

actually, `_start` is real magic word.

nomain.c:
```c
#include <stdio.h>

extern void _exit(register int);

int _start(){
	printf("Hello world!\n");
	_exit(0);
}
```

```shell
$ gcc -o nomain nomain.c -nostartfiles
$ ./nomain 
Hello world!
```
Is programming in TypeScript simply another excuse not to write test in JavaScript?
Tags: typescript, javascript, tests
Published: 2023-01-04 21:53:58

I know TS and i know JS and I prefer JS over TS because of multiple reasons. 

Reading posts where people tells us why it is a good idea to use TS ends with types makes programms more stable because the TS compiler helps to avoid errors at build time.

But this can even better be done with tests, I think.
Tests can describe behaviour and the structure of your JS and that includes the types.

If you add an attribute to an object, your tests should show the problem and so on.
Beginners guide to understanding NodeJS
Tags: beginners, webdev, javascript, programming
Published: 2023-01-04 21:37:25

Traditionally, JavaScript ran in a web browser and added interactivity to websites. Due to this, JavaScript could only be used as a client-side language. To write code on a web server, developers needed to learn expected server-side languages like PHP, Python, and Perl. Ruby, Java, etc.

The introduction of NodeJS enabled developers to use JavaScript on the server.
As NodeJS has a v8 compiler, we can run JavaScript on the server by compiling it into machine code.

The result is that you can now run code both on the server and on the client using one programming language, JavaScript.

## What can NodeJS Do?
NodeJS adds more features to JavaScript and enables you to perform tasks that all server-side languages can do. For instance:

- Create, open, read, write, delete, and close files on the server
- Collect  form data
- Add, delete, and modify data in your database
- Generate dynamic page content etc.
These remarkable features enable us to use NodeJs as a backend for any web application.

## Role of NodeJS
Whenever a user requests a resource through a web browser, the request will be sent to a web server. As soon as a request is received, NodeJS runs some JavaScript on the server and initiates a response process. 

The process could be communicating with a database for specified data, opening a file on the server, reading,  and returning its content to the client. 

## Why use NodeJS

- Eliminate learning another programming language for the server
- Rapid development: short learning curve when moving from frontend to full-stack development
- Massive community support to provide help when needed
- Tons of tools and packages, the Node Package Manager (NPM) allows you to download and use code packages provided by other developers in your own project.

## Companies using NodeJS

- Paypal uses NodeJS to  build the consumer-facing side of its web applications.
- LinkedIn uses Node.js to empower the server side of its mobile app.
- Mozilla uses Node.js as a primary language in many of their web projects. One of them is the Mozilla Persona, a cross-platform sign-in technology.
- Uber has built its massive matching system on Node.js.

## Summary

In this article, we learned about NodeJS and why it is essential to use NodeJs in developing backend application. 

If you have found insight in this article, kindly share, like, comment. I would love to read from you

_This article is the day 4 post on the 30-day challenge I am undertaking to learn backend development._

 Please feel free, to drop some insights, comment, or share the post to your networks
How to Choose the Right Stock Broker for You
Tags: stocks, investment, finance, broker
Published: 2023-01-04 21:32:38

One of the first choices you'll have to make when it comes to investing in the stock market is which stock broker you'll work with. This is an important step in the process. Because there are so many choices, it may be difficult to decide which broker is best for you given all of the available possibilities. When selecting a stock broker, here are some important considerations to keep in mind:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pb4b3buu4olizmip7vsn.jpg)
When selecting a stock broker, one of the most crucial considerations to make is the costs that are associated with that particular broker. Commissions on transactions, fees for maintaining an account, and many other miscellaneous costs may fall under this category. It is essential that you examine the prices charged by a number of different brokers to ensure that you are getting the most for your money.


Account minimums: In order to create an account or to obtain certain services, some brokers can demand that you have a particular amount of money in your account beforehand. Look for brokers that offer low or no account minimums if you are just starting out in the stock market and don't have a lot of money to invest. This is especially important if you don't have a lot of experience under your belt.

Goods and services related to investments- Because [many brokers may provide a variety of products and services](https://letsthinkwise.com/5paisa-vs-upstox/) related to investments, it is essential that you carefully assess which ones are most relevant to you. For instance, if you are interested in trading options, you should seek for a broker that provides this service so that you may engage in this activity.

Trading platform: The trading platform is the software that you'll use to make trades and manage your portfolio. You'll utilise the trading platform to place transactions. It is essential to locate a platform that is not only user-friendly but also provides the capabilities and resources necessary to enable you to make educated judgements about your investments.

Customer service is the last factor that should be considered, and it is essential to take into account the amount of customer service that a broker offers. This might offer things like phone help and email support, among other possibilities.
A guide to understanding data exchange on the web
Published: 2023-01-04 21:25:58

We kicked off our 30 day challenge to learn [back-end development](https://dev.to/efkumah/a-30-day-challenge-in-backend-web-development-3g1f) yesterday.

To fully appreciate backend development, a knowledge of how data is exchanged on the web is essential. 

Our goal in this post is to learn what happens when we type in the URL of a site and press enter. 

## Exchanging data on the web
Whenever you type in the URL of a website, for instance, www.youtube.com and press the enter key, you are performing a request to a server (which contains files) to fetch some data or resource.

The server receives the request and responds with the requested data, which get displayed as the user interface on the web browser for the user to interact with your web app.

## HTTP messages
Data is exchanged between the server and the client using `HTTP` messages.
HTTP messages are categorized into two: **requests messages and response messages.**

- Requests messages are sent by the client (web browser) to initiate an action on the server.
- Response messages are answers from the server to the client's request.

## HTTP Request Methods
The request methods inidicate the desired action to be performed on the server for a given resource.
The usually used `HTTP` request methods are: `GET`, `POST`, `PUT`, and `DELETE`.

- `GET`: Allows you to retrieve data from the server
- `POST`: Allows you to add data to an existing resource on a server
- `PUT`: Enable you to replace an existing file or resource on a server
- `DELETE`: Allows you to delete a resource from the server

## HTTP Response
After receiving a request message, the server needs to respond. An HTTP response is performed by a server to a client. 
The objective of the response could be any of the below:
- Provide the client with the requested resource
- Inform the client the action it requested has been performed
- Inform the client an error occured in processing the request

## What is a Web Server ?
The web server is a software application that controls how web users access resources hosted on the server.

Whenever you enter the URL of a website in a browser, the browser requests the resource containing the requested information from a web server. 

The browser makes this request using HTTP.The web server accepts the request, finds the requested file, and sends it back to the browser using HTTP.
 
Each HTTP response to the browser has a status code indicating whether a specific HTTP request has been successfully completed.
If the server doesn't find the requested file, it returns a 404 response
 

## Summary

Entering YouTube.com into a web browser sends a request to the server that contains these resources, and the server returns them to you.

In the 30 days challenge, we will be responsible for building these servers using NodeJs and the ExpressJS framework.
This will enable us deliver appropriate response messages for each request made

In day 2, we will learn about NodeJS 

In the coming days, we will build our own server where we can host our website files using ExpressJS Framework. 

See you
Lesser Known Features of DEV — Using Comment Templates
Tags: meta, documentation, community, howtodevto
Published: 2023-01-04 21:08:55

Did you know that on DEV you have the ability to set up templates for comments that you can use in the comment section of posts? 

If you find yourself dropping the same GIF over and over again or offering the same words of wisdom to folks, consider creating a template!

## How to create a comment template

In order to create a template, you'll need to go to the extensions section of your settings located [here](https://dev.to/settings/extensions).

Navigate down to "Add new comment template", type in the comment body content, give it a title, and save it. _Note: you might consider typing out your comment in the discussion section of a post so you can take advantage of the [Markdown toolbar](https://dev.to/devteam/feature-update-markdown-toolbar-coming-to-comment-editor-544o); you can copy/paste it over afterward._

## How to use a comment template

So, you've got your templates, but how to use them? Just follow theses steps:

1. Go to the comments section of a post. (Perhaps the [latest welcome thread](https://dev.to/welcome))
2. Click into the text box to reply to someone or leave a fresh comment.
3. Click the three dots in the bottom right corner of the input box.
4. Click the 4th icon from the left that looks a bit like a book.
5. See your list of available templates and click insert on the one that you wish to have dropped into the input box.
6. Feel free to modify it or send as is.

Boom! You've sent your first comment template. 🙌 

## Loom video tutorial

I filmed a 5 minute tutorial walking you through everything above — how to create and use a comment template!

{% embed https://www.loom.com/share/31c1dc99faaa43d3ac54615d49adb1d8 %}

## Advice on how and how _not_ to use this feature

This feature can be really handy for things like setting up a welcome message that you can drop in the welcome thread each week or making it so you can quickly grab a favorite GIF. It can also be useful if you find yourself regularly showing folks how to do different things on DEV like [embedding YouTube videos](https://dev.to/michaeltharrington/comment/23if0) or [creating a table of contents](https://dev.to/michaeltharrington/comment/23n4c). 

That said, it could be annoying if misused. Please refrain from using templates to promote yourself or business in mass. In the right context it can make sense to mention a post you've created or the company you work for, but don't set up a template with the sole purpose of jumping into each post to promote X. We may suspend those folks who do this as it's against the content policy listed in our [Terms](https://dev.to/terms); don't hesitate to [report](https://dev.to/report-abuse) this kind of behavior to us if you see it.

## That's all folks! 🥕

If anybody has any fun templates they've come up with that they wanna share, please drop'em in the comments.

Hope y'all keep enjoying DEV!
Websites That Will Teach You Any Skill For Free
Tags: webdev, career, beginners, skills
Published: 2023-01-04 21:06:31

## [1. Academicearth.org](https://academicearth.org/)

With 232 courses from [MIT](https://www.mit.edu/) and 43 courses from [Yale University](https://www.yale.edu/), this site takes your learning to a whole new level.

There are more than 25 Universities' free courses available, waiting for you to tune in.

## [2. Alison.com](https://alison.com/)

Alison provides 100% free courses on its website.

If you're interested in:

- IT
- Maths
- Science
- Lanaguage
- Humanities

## [3. Edx.org]

It's a non-profit organization launched by [MIT](https://www.mit.edu/) and [Harvard University](https://www.harvard.edu/).

This website has thousands of free courses such as:

- Computer Science
- Designing
- Data Analysis

## [4. Futurelearn.com](https://www.futurelearn.com/)

[Future Learn](https://www.futurelearn.com/) offers courses from more than 100 universities, that can skill you up within a month.

Although not every course is free here, you'll find plenty of useful resources lying around.

## [5. Kadenze.com](https://www.kadenze.com/)

offering courses from columbia, Princetion and many other universities.

This should be your consideration if you're anything into music production or art creation side.

## [6. YouTube](https://youtube.com/)

Ever tried using [YouTube](https://youtube.com/) for learning?

Give it a shot and you'll know how foolsih everyone is to not use all those free coursese to learn something valuable.

I learnt a lot of skills from [YouTube](https://youtube.com/) and you can too.

> **_NOTE:_** If you found this help. Like and share. Thanks Happy Learning!

---

### Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/), [LinkedIn](https://www.linkedin.com/in/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

### Support Me

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)
New in PHP 8.2: mysqli_execute_query / mysqli::execute_query
Tags: php, mysql, news
Published: 2023-01-04 20:57:33

In continuation of my [previous article](https://dev.to/rozhnev/php-81-mysqli-bind-in-execute-eeg), I want to write about another nice innovation in the `mysqli` module.
Since PHP 8.2.0 there is a new function `mysqli_execute_query` or `mysqli::execute_query` if you prefer object-oriented style.

This is a really nice feature. It allows you to kill two (three) birds with one stone:

- generate a prepared statement
- execute it by substituting values ​​from the array of variables
- retrieve query result as associative array

Let's try this in practice:

```
<?php
$query = 'SELECT Name FROM City WHERE District=? ORDER BY Name LIMIT 5';

/* here the magic */
$result = $mysqli->execute_query($query, ['Nordrhein-Westfalen']);

foreach ($result as $row) {
    printf("%s \n", $row["Name"]);
}
```
You can try this code here: [phpize.online](https://phpize.online/s/LU)
Escape from Bad Math
Tags: beginners
Published: 2023-01-04 20:48:45

Several years ago I started a freecodecamp account. I looked at the all of their offerings and computed "if I take 'x' amount of time to finish each section I can master their whole suite in 2 years."

Along the way I got stuck on one thing or another, fell way behind my projected arc, got discouraged and quit. I have repeated this cycle a few times since 2016; I would be so much further if I had just made slow and steady progress. 

Right now I am giving it another attempt with a Java course by Mosh. I have rough goals for completion, but I won't beat myself up for missing deadlines. 

There was a 2 minute video on escape characters. This topic has always seemed like "eating my veggies" level of drudgery. In the past I watched this on 2x speed and only halfway understood it before moving on and patting myself on the back for making quick progress. 

## This time is different

This time around, I watched the video twice on regular speed AND made a flash card AND consulted further resources from Google.com (if you haven't been to this site I highly recommend it).

This time... I learned something :)
Gluon - A new Electron-like framework but with a new approach
Tags: webdev, javascript, programming, opensource
Published: 2023-01-04 20:21:12

I recently (~1 month ago) started a new framework called Gluon, which is similar to Electron in what it does (websites -> desktop apps), but with a new, different approach:
- Uses system installed browsers instead of bundling Chromium or using webview libraries.
- Supports Chromium *and Firefox* (unlike any other similar frameworks).
- Focusing on developer experience, rapid prototyping, and ease of use.
- Also supports Deno instead of Node (WIP).
- Experimental/early (barely a month since first line written).

Site: https://gluonjs.org/
GitHub: https://github.com/gluon-framework/gluon

Has been blowing up on GitHub recently too (on GitHub Trending the last 2 days), gotten almost 1k stars in last few days. Very open to hear opinions/questions, thanks!