teleren/devto huggingface dataset:
Things you should do as a developer in 2022...
Tags: webdev, beginners, javascript, productivity
Published: 2022-02-26 15:44:26

1. Build a website with HTML, CSS, and JavaScript
2. Build a frontend web application with React or Vue
3. Build a backend web application with Flask
4. Build a backend web application with Node.js
5. Build a backend web application with Ruby on Rails
6. Build a mobile application for iOS with Swift or Objective-C
7. Build a desktop application for macOS with Swift or Objective-C
8. Build a cross platform desktop application with Electron
9. Build a cross platform mobile application with React Native
10. Learn a programming language outside of class
11. Use Git
12. Write unit tests
13. Use continuous integration
14. Create a pull request
15. Use a package manager
16. Publish a project to a package manager
17. Use a REST API
18. Build a REST API
19. Use a GraphQL API
20. Build a GraphQL API
21. Contribute to Open Source
22. Ask a question on Stack Overflow
23. Answer a question on Stack Overflow
24. Use Linux as my primary development environment
25. Use Windows as my primary development environment
26. Use macOS as my primary development environment
27. Demo a project at a hackathon
28. Get a coding internship/full-time job
29. Give a tech talk
30. Debug someone else's code

Feel free to add more and let's be friends @[keshav44483499](https://twitter.com/keshav44483499)
React Button Component with an Icon
Tags: css, react, component, button
Published: 2022-02-26 15:32:29

#**Creating a Button.js file to be imported as a component**

![Button.js File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89pwev9yll0b53m3l45j.png)

#**Creating a CSS file for the above mentioned component**

![Button.module.css File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vkj4vtzr583q82be87g.png)

As it is clear from the Button.js file that quite a few properties can be passed to the button component, you can always choose which properties you need to pass. 

Major properties to be passed are the "text" and "icon" properties.
You can also add more CSS properties through className property. It can be seen on the 9th line of Button.js file image above.

For icons, FontAwesome CDN has been used. The single line code is to be pasted in your main index.html file of your project which you will find in the public folder.

![public folder with index.html file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26c58hmk71gwbfqtw8md.png)

The CDN is to be pasted in the head tag of index.html file. Your CDN may look like the image given below:

![CDN Script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcl6mo6z5010u04w3gml.png)

The component can be used as the image given below:

![Button component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k116wnttqn93b3d978mr.png) 

The class "fa-solid fa-arrow-right-to-bracket" is a font awesome class which you can explore on [FontAwesome Website](https://fontawesome.com/).

If everything is done right, your button will look something like this

![Button with icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/311si0sehbuq3t2r0xys.png) 

So this is how you can create your own reusable button component with icon. The steps mentioned are React specific, if you find any difficulties creating your own Button component, please reach out to me on [Twitter](https://twitter.com/_ansh47).
Easy fix for a simple problem
Tags: postgres, windows, cmd, problem
Published: 2022-02-26 15:29:26

## Introducion 💻

Hi, I'm writing this after almost 30 minutes looking into this problems, just to know it was an easy fix.

So... Let's go!

## The problem 💾

The problem was when learning about creating a [back-end server](https://www.youtube.com/watch?v=-iwjiiCGiO0), at some point it says to create a new database with the name that you used in the orm. The command used in the video to create was `createdb server_name`, but it gave a problem about password in my windows 10 machine. 

The problema was the following:
``` bash
createdb testdatabase 

createdb: error: connection to server at "localhost" (::1), port 5432 failed:
FATAL:  password authentication failed for user "<username_placeholder>"
```

So after around 30 minutes investigating I discovered that was symply about the command used.

The right command is the following:

``` bash
createdb -U postgres testdatabase
```

Hope it answer your search to solve it. Also, hope you don't lost 30 minutes searching!

See ya!
Chapter one. Can we start from the bottle of beer? Or ... 99? 
Tags: programming, prolog
Published: 2022-02-26 14:42:26

My first code {frankly speaking, basically copied from Wikipedia :o Shame on me!} - the classical problem, how to count down in current language and write on the screen something more than "Hello World". Boring ;) 
So I added to it one of Polish grammatical rule - conjugation of a feminine noun after a numeral. The name of the rule is almost as long as it solution in Prolog. 
https://github.com/drekzt/Prolog/blob/main/99botles.pro
[](https://github.com/drekzt/Prolog/blob/main/99botles.pro)
Paracetamol.js💊| #65: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-02-26 14:27:07

## **Explica este código JavaScript**

```js
const sayHi = () => {
  return (() =>"Hi Javascript!")();
}

console.log(typeof sayHi());
```

- A. `number`
- B. `object`
- C. `string`
- D. `TypeError`

Respuesta en el primer comentario.

---
TypeScript generic types
Tags: typescript, javascript, beginners
Published: 2022-02-26 14:25:49

When working with types in TypeScript, we assume that we know what kind of type we will be working with.

For instance to define this log function:

```js
const logAndReturn = (input: string): string => {
  console.log(input);
  return input;
};
```

In this simple function, we expect a string, return a string, and that's it.
But why should this be limited to just strings?
What if we try to pass a `number`?

![Number type error](https://cdn.hashnode.com/res/hashnode/image/upload/v1644901814375/ctmDETyQN.png)

Hmm, that's a bit silly. We can't pass numbers to this function.
And it makes total sense.

One possible way of solving this would be to use `any` as the type.

```js
const logAndReturn = (input: any): any => {
  console.log(input);
  return input;
};
```

But using this makes it impossible to identify the type from outside.
It's basically as if you didn't use TypeScript at this point.

By the use of outside, I mean wherever we call this function, you should see what type it is being cast to like so:

![TypeScript any type](https://cdn.hashnode.com/res/hashnode/image/upload/v1644902001989/F4_0zUeyU.png)

So what then?

## TypeScript generic type

This is precisely where generic types come in handy. They can be used to identify that specific called function as a type.

Making the function itself unaware of which type it's working with.

To identify a generic type, you must prefix the function with `<Type>` where `Type` is the generic variable.

> Note: We often use `T` for generic types. However, it's not limited to any name.

Let's redo the above function as a generic typed function.

```js
const logAndReturn = <T>(input: T): T => {
  console.log(input);
  return input;
};
```

Now, if we want to use this function and pass a string, we can do the following:

```js
logAndReturn<string>('a string');
```

And on inspection, it states the following:

![Generic string type](https://cdn.hashnode.com/res/hashnode/image/upload/v1644902364646/wCle31fW1.png)

And if we want to convert this to our number, we can change the generic type used.

```js
logAndReturn<number>(123);
```

![Generic type number cast](https://cdn.hashnode.com/res/hashnode/image/upload/v1644902422256/G4T0SGgfZE.png)

As you can see, this is super powerful as we don't need to know the type upfront, but keep the reference to the correct types.

This method is not limited to these existing types. We can even define a custom interface that we want to use.

```js
interface User {
  firstname: string;
  lastname: string;
}

logAndReturn<User>({firstname: 'Chris', lastname: 'Bongers'});
```

And in that case, our function will expect the `User` type.

## Conclusion

I hope you got an excellent first look at Generic types and how we can use them.
I'll go deeper into specific use-cases that will shed a broader light on them in the following articles.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Prolog
Tags: programming, prolog
Published: 2022-02-26 14:24:17

Why Prolog? 
I have an experience in some of "clasic" languages, starting from TurboPascal, through couple of Basic's, Linux/Unix shell scripting, PowerShell, Python, C#. All of them are quite similar ;) so I'm tried to find something different, things which "refresh" my mind and change understanding of which problem is or isn't hard to code down.
won my first hackathon
Published: 2022-02-26 14:24:07


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcpub1xsu3zg1u3dwwdu.png)

I am glad to share that we are the JUET BUIDS WINNER(sophomore year) in the Devfolio Hackathon. our team(5 members) developed a decentralized app अश्वस्थ(our app name) which helps to find out early signs of depression among people through their chat messages using a sentiment analysis model of emotion recognition.

devfolio link : [](https://devfolio.co/submissions/-5f8d)
Best websites for illustration
Tags: webdev, ux, resource, design
Published: 2022-02-26 14:15:12

Hello everyone

I found some great websites where you can get nice illustrations for free

1. [Manypixels](https://www.manypixels.co/)
![Manypixels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tuo0knv9gb4a9l0l7xwk.png)

2. [DesignStripe](https://designstripe.com/)
![DesignStripe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv27zsczgpmifqexso06.png)

3. [Craftwork](https://craftwork.design/)
![Craftwork](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1k0jtkvjy35xpt7zswz6.png)

4. [Ouch](https://icons8.com/illustrations)
![Ouch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnw6lniaq8lfvx19pn06.png)

5. [Undraw](https://undraw.co/illustrations)
![Undraw](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6j0j9rp4owg4uro0ahhz.png)

6. [Pixeltrue](https://www.pixeltrue.com/free-illustrations)
![Pixeltrue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8to8ohnbprbxtv9cwdov.png)

7. [Skribbl](https://weareskribbl.com/)
![Skribbl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53avic0j9keitkfmdmxx.png)

8. [Reshot](https://www.reshot.com/)
![Reshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9rgnopkaue3bewuk4ni.png)

9. [Glaze](https://www.glazestock.com/)
![Glaze](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ye4masptc26dciwaz7mo.png)
How to use Tailwind CSS with Next.js Image
Tags: tailwindcss, react, nextjs, image
Published: 2022-02-26 13:53:49

Hello guys, hope you are doing well. In this post I am going to discuss how to properly use tailwindcss classes with next.js. 

I don't know about you, but these days I am only using tailwindcss. I can't think of a better alternative to writing a bunch of css and css classnames (ugh...😒). Also, I have been using next.js as a react alternative in my workplace lately. 

As you probably know, Next.js now supports image optimization. But in order to do that, we had to set the height and width of the image when defining the component. 

```
  <Image
    src='/images/logo.png'
    alt="Logo"
    width="200"
    height="200"
    className="h-48 w-48 md:h-96 md:w-96" // this won't work
  />
```
This works to an extent. But maybe you don't want that much height and width in the small screen. Next.js does some kind of optimization for you here, but maybe that's not enough. Maybe, you want to control the height and width of this image with tailwind classes. So how can we do that?

It turned out we can use a property called `layout` in the Image component and set it to `layout="fill"`. Then we don't need to specify the height and width of that image.

### Important
> You need to set the parent of this image as relative because `layout="fill"` actually makes the image an absolute component.

So, the final code should look something like this.

```
  <div className="relative h-48 w-48 md:h-96 md:w-96"> //"relative" is required; change height and width if needed
    <Image
      src='/images/logo.png'
      alt="Logo"
      layout="fill" // required
      objectFit="cover" // change as you like
      className="rounded-full" // you can use other classes here too
    />
  </div>
```

I really hope this helped you and feel free to comment if you want to know something else.
I have been Pranta and you have been excellent. Thanks 🥰.
7 data structure you must know as a programmer

Published: 2022-02-26 13:16:52

when I started programming at college I didn’t care very much about data structure and in the last year of college I decided to learn web development and i started learning html , css , js , react … etc .

finally it’s time to work !!

here I realized the importance of data structure and how it make me better as a developer so I learnt main data structures to be able to complete my work , so I hope any begginer focus on data structure and algorithms more than any other topics becuase these topics is a backbon of programming

so lets get startde :

there are two types of data structure related to how data is stored:

## 1- linear data structure :

1- arrays
2- hash tabels
3- linked list
4- queue
5- stack

## 2- non-linear data structure :

1- trees
2- graphics

there are more than these DS but these are the most widely used and popular.
Golang Struct Validator
Tags: go, programming, devops, tutorial
Published: 2022-02-26 12:43:57

We are presenting you a fresh Struct validator for Golang.

Neo's Struct Validator for Go
Repository : https://github.com/neo7337/go-struct-validator

Documentation : https://github.com/neo7337/go-struct-validator/wiki/Documentation

The validator comes with an easy to use implementation and quick to scale. We are continuously improving on the performance of the validator.

Do check out the validator!!
What is HackForChange & why you should join it.
Tags: productivity, career, opensource, devjournal
Published: 2022-02-26 10:31:25


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0afhlb5rh4bpvc78fapw.png)Have you ever thought about how #technology for social good can #impact on a larger number of people from our #society ?

Of course, you'd know what tech for social good is but here you can find all the next steps about how it works and how **[Hack For Change (HFC)](https://www.hackforchange.co.in/)** is taking initiative to perform technology driven solutions for social good.

Link to blog: **[What is HackForChange & why you should join it.](https://www.hackforchange.co.in/blog/what-is-hackforchange-why-you-should-join-it)**
We've a #blog written by **[Abhijit Bhat](https://twitter.com/AbhijitBhat6)** it is just a two minute read to know more about What is #HackForChange & why you should join it. 

If you're looking for opensource projects to contribute to and want to work towards technology driven solutions for social good you should definitely have a look on this blog.
Javascript Variables Scope
Tags: javascript, beginners, programming
Published: 2022-02-26 12:42:41

The visibility of the variables is referred to as the scope.
Javascript has 3 types of scope

1. Block scope 
2. Function scope
3. Global scope

## Block Scope

There was no idea of block scope before ES6. The let and const keywords in ES6 introduced a new feature called block scoping. The block's variables can't be accessed from outside of it.
**Example**
`{  
let x = 10;
}
// x cannot be used here`

## Function Scope

Variables defined inside a function are not accessible (visible) from outside the function.
Variables declared with var, let and const are quite similar when declared inside a function.
`function Person() {
  var personName = "Volvo";   // Function Scope
}`

## Global Scope 

Global scope variables can be accessed from anywhere in the program. When defined outside of a block, variables declared using var, let, and const are very similar.
`let x = 20   // Global scope
`
Differences Between Arrow and Regular Functions
Tags: javascript, programming, webdev, vue
Published: 2022-02-26 12:37:46

The fat arrow function is another name for an arrow function. It's a new feature in ES6 that allows you to write function expressions in a more compact manner. Regular JavaScript functions and arrow functions are similar in operation, although there are several distinctions. Let's have a look at the differences: 

1. Syntax
2. Arguments binding
3. Use of this keyword
4. Using a new keyword

-  **Syntax**
        By writing a few lines of code using arrow functions, a programmer can get the same result as ordinary functions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njbvlctq1s4mbqhrm82e.png)

-  **Arguments binding**
     arguments object inside the regular functions contains the list of arguments.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k0c1llsnf3yussvrxj2.png)
The arrow function, on the opposite, doesn’t define arguments i.e. they do not have arguments binding.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1r3cjfqo1dsfngyy9e5.png)

- **Use of this keyword**
      This value is dynamic inside a standard JavaScript function. Because of the dynamic context, the value of this variable changes depending on how the function is called.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4kmeaauc9ichydyr8h4.png)
Because an arrow function lacks its own "this" keyword, the behaviour of this inside an arrow function differs significantly from that of an ordinary function.
This inside an arrow function has the same value throughout its lifetime and is always linked to the value of this in the nearest non-arrow parent function, which means This value inside an arrow function always equals this value from the outer function, regardless of how or where it is executed.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tw6olrqwzm3a18s0lg46.png)

- **Using a new keyword**
        Regular functions can be built and called. The new keyword can be used to call them.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgp4q97ry44rkhyh3bs4.png)
But, the arrow functions are only callable and not constructible, i.e., arrow functions can never be used as constructor functions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iugg8ymew20ayasi22j5.png)
**summary**
       Inside a normal function, this value is dynamic and changes depending on how the function is called. However, the inner arrow function is lexically bound and equals the outer function. This a value is always bound to the class instance using fat arrow methods.
Variables in languages
Tags: beginners, codenewbie, javascript, python
Published: 2022-02-26 12:11:14

There's been many posts about how to say `Hello World` in different programming languages, but is there many about variables?
Well this post will tell you about how to declare variables (specifically a string) in different programming languages.

---

- `Python`

```py
variable = "Hello World!"
```

- `JavaScript`

```js
var variable = "Hello World!"
```

- `Java`

```java
String variable = "Hello World!"
```

- `C++`

```cpp
string variable = "Hello World!"
```

- `PHP`

```php
$variable = "Hello World!"
```

- `C#`

```csharp
string variable = "Hello World!"
```

- `R`

```r
variable <- "Hello World!"
```

- `Rust`

```rust
let mut variable = "Hello World!"
```

- `Swift`

```swift
var variable = "Hello World!"
```

- `ruby`

```ruby
variable = "Hello World!"
```

---

That's it for now!
I hope you learnt something new and make sure to view all of my posts (and maybe follow).
Get results and total count of Sanity records by GROQ
Tags: sanity, groq
Published: 2022-02-26 11:57:05

To retrieve the results and the total, using GROQ for Sanity.IO, you need to start by casting to your model like this (this is passed in query)
```javascript
query = `{
    "items": *[_type == "post"] | order(publishedAt desc)[1...5],
     "total": count(*[_type == "post"]) 

}`
```
The result looks like this
```json
{
    "ms": 65,
    "query": "...",
    "result": {
        "items": [
            {...}
        ],
        "total": 34
    }
}
```
It looks obvious, but I had to read How Queries Work all the way to the end to figure out I can project my own outside model. Hope this helps someone.

RESOURCES
- [Sanity Functions](https://www.sanity.io/docs/groq-functions#cf13eedb92c4)
- [Learn GROQ](https://hdoro.dev/learn-groq)
- [Queries that don't start with an *](https://www.sanity.io/docs/how-queries-work#79c4c511e09b)
3 Things to learn while Programming.
Tags: webdev, beginners, programming, javascript
Published: 2022-02-26 11:50:12

When its come to programming most people think that it is just a programming language that they need to gear up thier programmig journey.

But the **[reality](https://withinbracket.com/posts/which-programming-language-to-learn-and-why%20%E2%80%94%20typical-answer/)** is far different than that.

Yeah there is a _stereotype_ of programmers who just write code sitting in the corner, but as a programmer you also need to have some soft skills like communication and collaboration.

We’ll discuss about soft skills in our future article but in this one we’ll discuss about some essential things you need to learn along with programming.

So let’s get started:

## 1. Understanding of English Language

As a programmer you need to aware of english language, because majority of the articles and contents are in english language — and if you know english then it would be better to find relevant contents. And it also help to improve your communication skills. So you better have it.

You can improve your english skill by:
- Reading articles on Medium
- Participate in discussion on Quora

## 2. Logical Thinking

Programs are built upon logics and as a programmer you gonna spend most of your time in thinking rather than just coding. So you need to train your brain to think logically; otherwise you gonna have hard time with a bit complex code.

And in my opinion problem solving and logical thinking is the one of the important tools, a programmers should have.

## 3. Knowing Pseudocode

As I mention earlier, you don’t need to worry about choosing your first programming language, but you should know how to write pseudocode.

Pseudocode are just the simple awy to write your logic without using any complex syntax. And knowing pseudocode will also halp you in long run. As it is language independent, so anyone from any programming background, can understand your logic easily.

## Conclusion

With that being said. In my opinion these are the three essential things you need to know before gear up your programming journey further.

- English Language
- Logical thinking
- Pseudocode

Although there are other things you may consider, but these are the bare minimum stuff one need to have.

You will eventually find other skills along with your journey.

And btw, I also have a video version of this article. So if you better prefer video, then you can have a look on that too.
**[Here is the link.](https://www.youtube.com/watch?v=j6X4xSv6Mf4)**

Thanks for sticking around. Keep Learning.

> **This article is officially published on [Within Bracket](https://withinbracket.com/posts/3-things-to-learn-while-programming/)**