teleren/devto huggingface dataset:
React Hooks - useState
Tags: javascript, react, beginners, usestate
Published: 2021-03-14 14:16:40

## What is useState?

The useState hook is the most popular and widely used hook in React. It lets you have state in a functional component. Before the useState hook came out, (React 16.8 &#127881;), you could only have state in class based components &#128557;.

## How do you use it?

![ill_show_you_jurassic_park](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y09xfbpknqsm62f7zzih.gif)

useState is a function. 

```react
useState()
```

That function returns 2 things: the state, and a function to update that state. You typically access those through array destructuring.

```react
const [state, setState] = useState()
```

You can pass that function an initial state. 

```react
const [state, setState] = useState(initialState)
```

That initial state can be anything: a number, a boolean, a string... It can even be a function that returns the initial state.

> &#128161; That function would only be called on the 
> initial render. Not every time the state is updated or on
> every re-render. So having a more expensive function here is
> ok if you need it.

We'll start off with the classic counter example. So the initial state will be 0.

```react
const [state, setState] = useState(0)
```

It's good practice to name the state (and setState) something that refers to that state. Since we're using our state as a counter, we'll name our state count (and our updater function setCount).

```react
const [count, setCount] = useState(0)
```

## Accessing the State

We can access our state in our component simply by using the const variable we assigned to our state. In our case, `count`.

```react
<p>Our count number is: {count}</p>
```
This will render:

![Screen Shot 2021-03-14 at 7.53.27 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8vcewkz8crn3x7z3mk4.png)

## Updating the State

Now we'll create a button that when clicked, it will update the state.

```react
<button onClick={() => setCount(count + 1)}>count it!</button>
```
![5dc6bdd97b5861dd5b00b7bff123343a](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/im9a1gnn4ybbq1hdzqdv.gif)
 
In this example, we're inserting the code to update the state right inside setCount (count + 1). We could also call a function that has more logic, then update the state in that function.

```react
const countHandler = () => {
  // more logic could go here 
  //(reach out to an api, more calculations, etc..)
  const updatedCount = count + 1;
  setCount(updatedCount)
}
<button onClick={countHandler}>count it!</button>
```
This would have the same behavior.
 
## Conclusion
useState can be used for all sorts of things: grabbing a user's input from a form, toggling a boolean for a mobile sidebar, or even having an array of blog posts you retrieved from a database and mapping over them to display each post.

I go over a lot more examples in my YouTube video about useState [here](https://youtu.be/4mSxNGLlWJ8), and I focus specifically on form handling [here](https://youtu.be/faabxyOObwk).

Hope this helped someone and thank you for reading!

-Andrew
Text Generation With GPT-2 in Python
Tags: python, machinelearning, deeplearning, tutorial
Published: 2021-03-14 14:13:41

{% youtube YvVQgvAz9dY %}

Language generation is one of those natural language tasks that can really produce an incredible feeling of awe at how far the fields of machine learning and artificial intelligence have come.

GPT-1, 2, and 3 are OpenAI’s top language models — well known for their ability to produce incredibly natural, coherent, and genuinely interesting language.

In this video, we will take a small snippet of text and learn how to feed that into a pre-trained GPT-2 model using PyTorch and Transformers to produce high-quality language generation in just eight lines of code. We cover:

PyTorch and Transformers

- Data

Building the Model

- Initialization

- Tokenization

- Generation

- Decoding

Results
react-keyboard-key NPM package
Tags: react, npm, package
Published: 2021-03-14 13:53:12

I created an NPM package mostly for developers, who are working with ReactJS.

The package includes Container with `keydown` and `keyup` events. The container is handling the state of pressed key information and pushes it further.

There is also created hook called `useKeyboardKey` which is a substitute for Container so you can use it across the whole application wherever you want, you will just use the hook function.

Package link: [react-keyboard-key](https://www.npmjs.com/package/react-keyboard-key)
7 Best Places to find Hackathons!👩‍💻
Tags: programming, codenewbie, javascript, python
Published: 2021-03-14 13:48:30

Hackathons are probably one of the best places to network with people and simultaneously learn and enhance your skills and also who doesn't love swags? Here are the 7 best places to look out for in order to attend a hackathon👇

1. ***Major League Hacking*** [(mlh.io)](mlh.io)

![MLH](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fcdz95nlz4yutzebt8q.png)

Major League Hacking is one of my favorites and one of the best places to find hackathons. MLH organizes many hackathons for University students and it also provides .tech, .space, and .online domain free for a year. I have been a part of 2 MLH hackathons and the experience is amazing.

2. ***Devpost***[(devpost.com)](devpost.com)

![Devpost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adcwivuwm3dnrpnvjxg2.png)

Devpost also has many exciting hackathons listed but mostly Hackathons use Devpost to help you find a team, submit your project, and look at other projects. I love Devpost as I can see other people's projects and get good ideas, isn't it cool?

3. ***Devfolio***[(devfolio.co/hackathons)](devfolio.co/hackathons)

![Devfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsiih047bjp1wk4qm28d.png)

I came across Devfolio in the quarantine while searching for virtual hackathons. I haven't used it much but I like the UI/UX of the website and also I had an amazing experience during the hackathon.

4. ***HackClub***[(hackathons.hackclub.com)](hackathons.hackclub.com)

![Hackclub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01wg2aj1zq9ms5wwwkde.png)

HackClub is another great website to look for international hackathons for High School and University students. It has a wide list of hackathons to choose from.

5. ***Hackalist***[(hackalist.org)](hackalist.org)

![Hackalist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ovleix6cfont9acgef8.png)

Hackalist is a website that provides a list of upcoming hackathons around the world and also it is Open-Source. It also has a filter for hackathons that give travel reimbursement so it is awesome for people who like to travel.

6. ***Hackathon IO***[(hackathon.io/events)](hackathon.io/events)

![HackathonIO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwz5w4og7lj52177a6p2.png)

Hackathons IO includes almost every hackathon that is going on around the world. It even has a network tab where you can find hackers from all around the world and attend the hackathon with.

7. ***HackathonsNearMe***[(hackathonsnear.me)](hackathonsnear.me)

![HackathonsNearMe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq2k99dlosx450fu0ic1.png)

Hackathons near me helps you find hackathons based on city and find local hackathons, I haven't used this website a lot but It has some good reviews. 

**These resources are more than enough to find and attend a hackathon, so what are you waiting for? Attend a hackathon and upskill yourself. Follow me on Twitter [Deveshb15](twitter.com/Deveshb15) and do let me know how was your experience.**
From developer to PM
Tags: teamwork, projectmanagement, management
Published: 2021-03-14 13:27:03

It's very important to understand when you're working as a developer you focus only on diffrent project problems and trying to solve them from the point of view of the development.

So, just 4 months ago I was a frontend developer and then got promoted as a Project Manager. The list of my duties has been expanded and it wasn't easy to rebuild my mind about my work. Now I should think both about my team and client. The team is my family and I love to work with my collegues, but at the same time I need to take into considiration diffrent requests from the client side. I'm trying to do my best in order to regulate the load level on my team, but sometimes I've to fire people because it's not profitable for our company to work with them (the reasons maybe very diffrent, but anyway it's the most difficult part of my job).

I suppose here I may find some recomendations from other PMs. It's very interesting for me to collect some cool cases of your daily work, maybe you may recomend some tips/articles/books about managment in the IT sphere.
Secure Session Storage for Web Apps
Tags: security, privacy, webdev, gdpr
Published: 2021-03-14 13:25:29

When creating web applications you need to save data in a **session object**. This data can include user email address, user permissions, last operation code, error messages.

Some of this information is considered **Personal Identifiable Information**. In short, **PII**, as defined by **GDPR**.

Europeans (and the European Union in particular) care a great deal about online privacy and data protection.

In this article, we’ll be taking an in-depth look at the GDPR and how it could affect the **storage of user-session information**.

Full article:
https://databunker.org/use-case/secure-session-storage/

**Click on ❤️ if you like this article ;-) Thanks**
POM In Cypress and Playwright
Tags: cypress, pom, cypressio
Published: 2021-03-14 13:20:00


Explain with :
- Without POM with example
- With Implementing POM In Cypress with example

https://www.youtube.com/watch?v=9jul26uOutE&t=411s


https://www.youtube.com/channel/UCrRPMnWk2slXl4xFOVXfTmQ?sub_confirmation=1

Also See Pom In Playwright
https://qaautomationlabs.com/page-object-model-with-playwright-with-java/
3 Good quality apps for windows to make your computer seems modern
Tags: productivity, webdev, github, showdev
Published: 2021-03-14 12:55:39

Are you bored with the layout of windows apps? Try to make your computer modern with these three open-source applications!

Before going through, here's a video of these three applications:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozqpurc6duzoq4v4b1wv.gif)
 

1. Xplorer
![Xplorer win](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpsxeztbtyxxpt124wrn.png)
 

Xplorer is a file explorer built from ground-up to be fully customizable and without customization, it also looks modern!
It is cross-platform, built using Electron Technology that allowed our File Explorer to be run not only in Windows, but also Linux and MacOS alike.
It also allowed file preview directly inside it, not only pictures or documents, but also videos!

So to summary, Xplorer's features contain:

-   Looks modern
-   Easy to use
-   Cross-platform
-   File Preview, even videos!
-   Most importantly, FOSS, Free and Open Source, which mean you can change components inside if you see fit

Documentation site: https://xplorer.vercel.app
GitHub link: https://github.com/kimlimjustin/xplorer

2. Modern Flyout
![Modern Flyout)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3lazyv88gh8mez7puoc.png)
Modern Flyout is an open-source, modern, and Fluent Design-based replacement for the old Metro-themed flyouts present in Windows 10. This application aims to provide a Fluent Design System based replacement for the old, built-in, Metro Design based Audio/Airplane mode/Brightness flyouts present in Windows.

Documentation site: https://modernflyouts-community.github.io/
GitHub link: https://github.com/ModernFlyouts-Community/ModernFlyouts
Get it from Microsoft Store: https://www.microsoft.com/store/apps/9MT60QV066RP?ocid=badge

3. Lively Wallpaper
![wallpaper_video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxge1eivu0q7st4vj07i.gif)
 
Lively is a Free and Open-Source Software (FOSS) for animated desktop wallpapers. Lively turn Video & GIF Files, Emulators, HTML, Web address & Shaders, Games into Windows desktop wallpaper or screensavers; Wallpapers will completely pause playback( 0% cpu & gpu usage) when fullscreen application/games are running.

Documentation site: https://rocksdanister.github.io/lively/
GitHub link: https://github.com/rocksdanister/lively
Get it from Microsoft Store: https://www.microsoft.com/store/apps/9NTM2QC6QWS7?cid=storebadge&ocid=badge

Please star this article and share it if you like it :)

### Happy Coding! 🎉

You might also like these articles:
{% post https://dev.to/kimlimjustin/google-keep-clone-with-django-and-vanilla-javascript-4pnl %}{% post https://dev.to/kimlimjustin/abstractmark-the-modern-markdown-language-2ch1 %}{% post https://dev.to/kimlimjustin/google-forms-clone-with-django-and-vanilla-javascript-7ha %}
Pastes in posts
Published: 2021-03-14 12:23:39

Hi all

I'm putting together another post on using Hapi, this time with Vision and Joi for rendering and validation. I was wondering if people prefer long but complete posts, or shorter posts which reference external files.

Some of the templates are 40-50 lines long, so I'm a bit reluctant to just paste them in. On the other hand without them the post won't make as much sense, and I don't really want people to have to read it with Github open in the next tab.

Any thoughts?
CSS image reflections with box-reflect
Tags: css, webdev
Published: 2021-03-14 12:11:47

Did you know CSS has a custom reflection property?
It's a pretty cool addition to reflect an image to a specific side.

We can create these reflections using the box-reflect property.

Curious to see what the reflection can look like, check out this Codepen using box-reflect.

{% codepen https://codepen.io/rebelchris/pen/QWGJyBO %}

## Reflecting image using CSS

For our example, we are using a super simple markup using just one image.

```html
<img src="myimage.png" />
```

Then we can use the box-reflect class to enable our reflection:

```css
img {
  -webkit-box-reflect: below;
}
```

This will give us the following result:

![CSS Box-reflect below](https://cdn.hashnode.com/res/hashnode/image/upload/v1615304615973/QuTN7iU2M.png)

We can use the following options:

- below
- above
- left
- right

And even place a offset:

```css
img {
  -webkit-box-reflect: right 20px;
}
```

![Box-reflect offset right](https://cdn.hashnode.com/res/hashnode/image/upload/v1615304713709/5Wq5qPT9B.png)

And even cooler, we can add a gradient as the fade-out effect using the third parameter.

```css
img {
  -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
```

## Browser support

Box-reflect doesn't have the best support, but it's upcoming. So far, Firefox and IE have no support at all.

![CSS Box-reflect browser support](https://caniuse.bitsofco.de/static/v1/mdn-css__properties__-webkit-box-reflect-1615304850311.png)

### 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)
HTML ordered list options
Tags: html
Published: 2021-03-14 12:07:30

I'm sure we all know the ordered list, which can be created by using a `<ol>` (Ordered list) element.

A basic structure looks like this:

```html
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
</ol>
```

And it will return this:

1. Number 1
2. Number 2
3. Number 3

But did you know there's super cool stuff we can do with ordered lists?

## Defining an ordered list type

By default, it will show the numbers as you can see above, but did you know we can specify the type in HTML?

```html
<ol type="I">
  <li>Daily</li>
  <li>Dev</li>
  <li>Tips</li>
</ol>
```

Will return:

I. Daily
II. Dev
III. Tips

We can use the following types:

- `1`: The default numeric list
- `I`: Uppercase roman numbers
- `i`: Lowercase roman numbers
- `A`: Uppercase letters
- `a`: Lowercase letters

## Set the start number for ordered lists

Next up is the start. By default, a list will start on one, but we can manually offset this.

```html
<ol start="5">
  <li>Daily</li>
  <li>Dev</li>
  <li>Tips</li>
</ol>
```

This will render the following. It can be super useful in a list with paragraphs between.

5. Daily
6. Dev
7. Tips

## Reverse an HTML ordered list

Another cool thing we can do with lists is reverse them.
It's just as easy as adding the `reversed` tag.

```html
<ol reversed>
  <li>Daily</li>
  <li>Dev</li>
  <li>Tips</li>
</ol>
```

This will result in the following:

3 Daily
2 Dev
1 Tips

You can try all these out in the following Codepen.

{% codepen https://codepen.io/rebelchris/pen/ExNdVmo %}

### 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)
Daily Developer Jokes - Sunday, Mar 14, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-14 12:00:11

---
title: "Daily Developer Jokes - Sunday, Mar 14, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Mar%2014%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125997196ca.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q___: Why are keyboards always working so hard?

___A___: Cause they have two shifts!
 -->
TIL: CSS defines functions to repeat gradients
Tags: webdev, css
Published: 2021-03-14 11:54:02

---
title: TIL: CSS defines functions to repeat gradients
published: true
description: CSS defines functions to enable and draw repeating element gradients.
tags: webdev, css
canonical_url: https://www.stefanjudis.com/today-i-learned/css-defines-functions-to-repeat-gradients/
---

Today I learned a nifty and quick fact about CSS gradients. It surprised me that I didn't come across it before. CSS includes functions to define gradients as background images:

- [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient())
- [radial-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient())
- [conic-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient())

The linear, radial and conic gradients are not the only gradient functions, though. There are three very similar CSS functions that enable you to repeat a pattern in CSS.

```css
.repeating-linear {
  background: repeating-linear-gradient(
    var(--primary) 0 1em,
    var(--secondary) 1em 2em
  );
}

.repeating-radial {
  background: repeating-radial-gradient(
    var(--primary) 0 1em,
    var(--secondary) 1em 2em
  );
}

.repeating-conic {
  background: repeating-conic-gradient(
    var(--primary) 0 36deg,
    var(--secondary) 36deg 72deg
  );
}
```

You can read more about these functions on MDN:

- [repeating-linear-gradient()](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient())
- [repeating-radial-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient())
- [repeating-conic-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-conic-gradient())

Have a look at [the devsheet](https://twitter.com/search?q=%23devsheets) below to see the difference between all these CSS functions.

![Devsheet showing normal and repeating CSS gradients](//images.ctfassets.net/f20lfrunubsq/1bG8PeQnDqkfRy5WwjTyRK/8bff7b3704ecc34307d7bf9e83355e7f/Screenshot_2021-03-13_at_23.11.55.png)
The laws of TDD
Tags: tdd, cleancode, testing
Published: 2021-03-14 11:30:40

##What is TDD?

TDD - Test Driven Development is a software development approach in which test cases are developed to specify and validate what the code will do. In TDD the tests are not done at the end of the software development, the tests are done before writing any production code.

##Why use TDD?

* Is your code difficult to test?
* Don't you know if you have 100% test coverage on the project?
* Are you afraid to make changes to the project because you don't know where it will go wrong?

TDD solves these and other problems because with the laws of tdd every single line of code that you write will be tested.


##The three laws of TDD

1.You are not allowed to write any production code until you have first written a failing unit test;
2.You are not allowed to write more of a unit test than is sufficient to fail and not compiling is failing;
3.You are not allowed to write more production code that is sufficient to pass currently failing unit test.

You begin by writing a small portion of unit test. But within a few seconds you must mention the name of some class or function you have not written yet, thus causing the unit test to fail to complete. So you must write production code that makes the test compile. But you cant write any more code than that, so you start writing more unit test code.

Round and round the cycle you go. Adding a bit to the test code. Adding a bit to the production code. The two code streams grow simultaneously into complementary components. The tests fit the production code like an antibody fits an antigen.


##Conclusion

TDD allows us to be more productive since the project only grows **“if I can say so”** after all the tests have passed.

Once the TDD is embraced it will be a step towards the Clean Code.

In the TDD scenario developers need to be very disciplined because sometimes when the calendar starts to get tight some tests may start to be ignored and if you haven't tested the code how will you know there is a hidden bug ?.

Cheers,
**Bc**.