teleren/devto huggingface dataset:
Uncaught TypeError: _util_validationUtils__WEBPACK_IMPORTED_MODULE_1__.validateField(...) is null in React
Published: 2022-08-02 17:35:52

I'm making a React app which has some util functions related to validation of forms. A custom hook called `useForm` calls the validation util functions to validate its data but this error gets thrown when I call the util function. Error:

```js
Uncaught TypeError: _util_validationUtils__WEBPACK_IMPORTED_MODULE_1__.validateField(...) is null
    handleBlur useForm.js:18
    onBlur SignUp.js:90
    React 23
    js index.js:6
    factory react refresh:6
    Webpack 3
2 useForm.js:18
```

Here's my hook:
```js
import { useState } from "react";
import { validateField, validateForm } from "../util/validationUtils";

export const useForm = initialState => {
	const [formState, setFormState] = useState(initialState);
	const [formErrors, setFormErrors] = useState({});

	const handleChange = e => {
		setFormState(formState => ({
			...formState,
			[e.target.name]: e.target.value,
		}));
	};

	const handleBlur = (e, ...args) => {
		console.log(e.target.value, ...args);

		const [error, secondaryError, field] = validateField(e, ...args);

		setFormErrors(formErrors => ({
			...formErrors,
			[e.target.name]: error || "",
		}));

		if (field) {
			setFormState(formState => ({
				...formState,
				[field]: secondaryError || "",
			}));
		}
	};

	return [
		formState,
		formErrors,
		handleChange,
		handleBlur,
	];
};
```

And here's my validation function:
```js
export const validateField = (e, ...args) => {
	const { name, value } = e.target;
	let error = null;
	let secondaryError = null;
	let field = null;

	if (value.length === 0) return error;

	switch (name) {
		case "username":
			error = validateUsername(value)
				? null
				: "Username must not contain spaces";
			break;
		case "email":
			error = validateEmail(value) ? null : "Invalid email";
			break;
		case "password":
			error = validatePassword(value)
				? null
				: "Password must be at least 8 characters, have an uppercase and lowercase letter and one special character";

			if (validateMatchingPasswords(value, ...args[0])) {
				field = "confirmPassword";
				secondaryError = "Passwords do not match";
			}
			break;
		case "confirmPassword":
			error = validateMatchingPasswords(...args[0], value)
				? null
				: "Passwords do not match";
			break;
		case "imageUrl":
			error = validateUrl(value) ? null : "Invalid URL";
			break;
		default:
			break;
	}

	return [error, secondaryError, field];
};
```

**In the form component I call the function handleBlur, exported from the hook. When I need `...args` like `confirmPassword` field's value I pass it on. I think the problem happens when I give the field an empty value (`e.target.value` is `""`)**
Onigiri Meterverse :- The first P2E MMORPG to launch on ETH quicker than any other ETH project.
Published: 2022-08-02 17:20:21

Have you guys heard of the Onigiri Metaverse NFT project?

The art looks super sick and they already have a playable game on the steam store. ONIGIRI is an MMORPG set in the mythical land of ancient Japan. In the vast world of ONIGIRI, a unique Japanese fantasy world awaits players, with many unique characters and architecture appearing in each field. The best part of ONIGIRI is that you have the ability to explore this world with other players.

Mint Date: August 3rd 
Supply: 3000
Pre-sale: 0.025 ETH
Public: 0.03 ETH

Official Links:
https://onigirimetaverse.com
https://twitter.com/onigirisNFT
https://discord.gg/onigiri
⚙ This new GIT push config will save you lot of frustration!
Tags: git, beginners, github, tutorial
Published: 2022-08-02 17:09:00

If you have 59 seconds and in particular you're also on mobile, you might enjoy watching the YouTube #Shorts video.

[![YouTube Video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oorxbnl87cb86fw5jr9p.png)](https://youtube.com/shorts/KrgNpJA0sX4)
 

---

When creating and pushing a new branch, you will get this error:

```sh
fatal: The current branch feature/my-cool-branch has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin feature/my-cool-branch

```

Since version 2.37 git has introduced a new config, called `push.autoSetupRemote` that covers this case.

From the [official documentation](https://git-scm.com/docs/git-config#Documentation/git-config.txt-pushautoSetupRemote):

> If set to "true" assume --set-upstream on default push when no upstream tracking exists for the current branch; this option takes effect with push.default options simple, upstream, and current. It is useful if by default you want new branches to be pushed to the default remote (like the behavior of push.default=current) and you also want the upstream tracking to be set. Workflows most likely to benefit from this option are simple central workflows where all branches are expected to have the same name on the remote.

First of all, make sure you're on version 2.37 or higher by just running

```sh
git --version
```

You can download the latest version from https://git-scm.com/ or via command line, for example with a mac using `homebrew`:

```sh
brew install git
```

Now that you're all set, just run this command:
```sh
git config --global push.autoSetupRemote true
```

It will set in your global git configuration file the value `true` to `push.autoSetupRemote`.

With that set, all first-time push on new branches will automatically set the default upstream.

To see it live, you can have a look at this short YouTube video.
[![YouTube Video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oorxbnl87cb86fw5jr9p.png)](https://youtube.com/shorts/KrgNpJA0sX4)

---
Thanks for reading this post, I hope you find it interesting!
Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}
You can also follow me on [Twitter](https://twitter.com/Balastrong) and [YouTube](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA)!
[![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/Balastrong) [![YouTube](https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA)
How to locate a hanging Node process?
Tags: node, javascript
Published: 2022-08-02 16:53:00

This must be the best way to locate a hanging process.

The 𝗽𝗿𝗼𝗰𝗲𝘀𝘀.𝘁𝗶𝘁𝗹𝗲 property allows you set(and get) the process title. This can be useful to locate the process in your System Monitor/htop/Task Manager, etc.

Keep in mind that different platforms will have different maximum possible length restrictions.

Did you learn something new today?

Like and share this post, and follow me for more!

![process title](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x63q5wwkgdlq1akwvlna.png)
Tools to help with thinking
Tags: productivity, tooling
Published: 2022-08-02 16:39:00

Hej devs,

Here's a website that I recently learned of that contains many helpful thinking frameworks (that they call thinking tools) to solve complex problems.

The website is called "**Untools**" ([https://untools.co](https://untools.co)) and it contains many different resources to help think about problems. It's completely free.

They categorize the tools by "**Systems Thinking**", "**Decision Making**", "**Problem Solving**", and "**Communication**".

Each framework contains a brief description of what it is, when it could/should be used, how it works, and an example of how to use it.

This tool has been extremely helpful for me personally and it's interesting just to browse through the different ways to think about a problem.

**Pro tip:**
If you use Notion, create a database with the tools you find interesting and add some personal tags detailing when you might use it.

The website is great, but it contains a lot of thinking tools you might never have a need for, and, as all websites, it might be gone some day.

My database pages look something like this. Content is the copy-pasted page from untools and it contains a handy link back to the original Untools page.

![Notion page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6emr2sz24pto96v0sre7.png)
Argon Dashboard - Free Tailwind Template
Tags: tailwindcss, dashboards, opensource
Published: 2022-08-02 16:35:32

---
title: Argon Dashboard - Free Tailwind Template
published: true
description: Open-Source Tailwind CSS template crafted by Creative-Tim on top of Argon Design - Free product (MIT License).
tags: tailwind, dashboards, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76aodj781d95qb9ecqmm.jpg
canonical_url: https://www.admin-dashboards.com/argon-dashboard-free-tailwind-template-3n9/
---
Hello Coders! This article presents [Argon Dashboard](https://www.creative-tim.com/product/argon-dashboard-tailwind?AFFILIATE=128200), a pixel-perfect Tailwind Design crafted and released for free by [Creative-Tim](https://www.creative-tim.com/?AFFILIATE=128200). The product comes with 7 sample pages, 50+ UI components, and a permissive license (commercial projects allowed). For newcomers, Tailwind is a utility-first CSS framework used to code mobile-friendly user interfaces with speed. Thanks for reading!

- 👉 [Argon Dashboard Tailwind](https://www.creative-tim.com/product/argon-dashboard-tailwind?AFFILIATE=128200) - product page (`affiliate link`)
- 👉 [Argon Dashboard Tailwind](https://demos.creative-tim.com/argon-dashboard-tailwind/pages/dashboard?AFFILIATE=128200) - LIVE demo  (`affiliate link`)

Argon is a completely new product re-built from scratch with an intuitive codebase that can be customized with ease.

![Argon Dashboard Tailwind - Profile Page (open-source).](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8tguo5ux73r8j3x472y.png)

---

## ✨ Product Highlights

This Dashboard is coming with pre-built examples, so the development process is seamless, switching from our pages to the real website is very easy to be done. Every element has multiple states for colors, styles, hover, and focus, that you can easily access and use.

- ✅ Modern stack: Tailwind CSS
- ✅ Pre-built pages, 50+ UI Components
- ✅ RTL Support, Dark Mode Ready
- ✅ Active versioning and Support
- ✅ Permissive (MIT) License

All components can take variations in color, that you can easily modify using Sass files. You will save a lot of time going from prototyping to full-functional code because all elements are implemented.

Example Pages - If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages.

---

![Argon Dashboard Tailwind - Billing (open-source)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bevy1zywwe8mlpo73few.png)

---

![Argon Dashboard Tailwind - Charts (open-source)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awlhmlzymutpz3vmh0v3.png)

---

![Argon Dashboard Tailwind - VR Page (open-source)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co0b4kdke1de7bixjr36.png)

---

> `Thanks for reading!` For more resources and support, please access:

- ✨ More [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Django, Flask, and `React`
- ✨ More [Admin Dashboards](https://www.admin-dashboards.com/) - a huge index with products
Working on a simple notification & farming system.
Tags: unity3d, beginners, csharp, firstpost
Published: 2022-08-02 16:34:00

Hello!

Today I decided that I would work on a simple notification & farming system and I thought this would be a great fit for my first dev.to blog post! I made a little plant that grows while the local scale is under the set value. When it is grown it switches to the GrownState which then after 5 - 10 seconds harvests the flowers, plants & switches back to the GrowingState. I did this using the state pattern.

I then decided that I would work on my first notification system, which was pretty fun to make. I worked on this over the span of two hours so it is definitely not perfect, however with some work I bet this could turn into a strong, modular system.



![Plant Growing...](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0angmw77cqno5o6tt4g.PNG)



![Plant Grown!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7b4sd5w5m4whutajk12.PNG)


![A code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8hh2913rueklesz1trp.png)

Thanks for reading, 
Sean
Template HTML and JS
Published: 2022-08-02 16:34:00

The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

Example

**HTML**

`<template id="elementTemplate">
  <h1>Title Content</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</template>`

**JS**

`var template = document.querySelector("#elementTemplate");
let content = template.content.cloneNode(true);
document.querySelector(".name__class").appendChild(content);`
Laravel CRUD Authorization with Inertia and Vue - Access control using role and permission
Tags: webdev, laravel, php, vue
Published: 2022-08-09 12:36:26

---
title: Laravel CRUD Authorization with Inertia and Vue - Access control using role and permission
published: true
date: 2022-08-02 16:24:51 UTC
tags: webdevelopment,laravel,php,vuejs
canonical_url: https://blog.devgenius.io/laravel-crud-authorization-with-inertia-and-vue-access-control-using-role-and-permission-bb718f0b3a78
---

[![](https://cdn-images-1.medium.com/max/2600/0*3yrrzdQe9uTS3OIo)](https://blog.devgenius.io/laravel-crud-authorization-with-inertia-and-vue-access-control-using-role-and-permission-bb718f0b3a78?source=rss-17217f29618a------2)

Laravel creates a Vue admin panel from scratch — Part 5

[Continue reading on Dev Genius »](https://blog.devgenius.io/laravel-crud-authorization-with-inertia-and-vue-access-control-using-role-and-permission-bb718f0b3a78?source=rss-17217f29618a------2)
Discussion: What to use in Ionic framework?
Tags: ionic, angular, react, vue
Published: 2022-08-02 15:50:00

Hi folks,

DevOps Engineer with Python and Ruby background here.

I have some ideas for a mobile app and wanted to start developing by myself.

Since I have some knowledge in Python and Ruby, I have no problem in understanding how to develop/learn new programming languages or frameworks.

Since I am now to mobile development I tried some software and initially started using Flutter and be playing with Ionic for some days and I really like it.

But now I have a problem that occurs very often when I have to choose technology ... WHAT TO USE!!!

I played around with all three of them and now I don't know what to choose.

Can I have some input why you use the framework you use?

I really would appreciate to have a conversation with you guys and learn the pros and cons directly from you.

Regards and thanks!

Sebastian
Edge and Embedded Community Site Now Available for Distributed Systems Developers to Share Knowledge
Tags: opensource, microservices, systems, luos
Published: 2022-08-02 15:43:50

“We know how frustrating it can be to be faced with a problem in this domain and not have access to others to help” - Nicolas Rabault, co-founder and CEO, Luos

▶️ [https://news.yahoo.com/edge-embedded-community-now-available-160000688.html](https://news.yahoo.com/edge-embedded-community-now-available-160000688.html)

If you haven't seen it, we are now +2,000 developers from all over the world to have joined the Luos discord community. 🙂
Five free VS Code extensions that will change the way you do web development:
Tags: vscode, webdev
Published: 2022-08-02 15:25:00

## 1. RapidAPI Client

Fulfill all your need for API development.

• Test and consume APIs
• Work with your VS Code theme 
• Generate TypeScript, Swift, and Python interfaces from responses.

🔗 https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client

## 2. Better Comments

Create more human-friendly comments in your code.

• Alerts
• Queries
• TODOs
• Highlights

🔗 https://marketplace.visualstudio.com/items?itemName

## 3. Git Graph

View a Git Graph of your repository and efficiently perform Git actions from the graph.

🔗 https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

## 4. Peacock

Do you have a habit of keeping multiple VS Code windows open?

Peacock lets you change the color of your VS code even if multiple instances are open.

🔗 https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

## 5. CSS Peek

Jump from HTML file to CSS.

Allow peeking to CSS ID and class strings as definitions from html files to respective CSS.

Supports the Symbol Provider, so you can quickly jump to the right CSS code if class or ID are known.

🔗 https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
Markdown as document, by casual-markdown-doc.js
Tags: javascript, markdown, html, document
Published: 2022-08-02 15:23:00

Dear All,

just release [Casual-Markdown-Doc](https://github.com/casualwriter/casual-markdown-doc), which is a quick solution 
to use markdown as document.

* include javascript lib `casual-markdown-doc.js`
* include css style `casual-markdown-doc.css`

then start write document in markdown format!

### Credit

This project based on the design idea of [Strapdown.js](https://strapdownjs.com/). 
but use [casual-markdown](https://github.com/casualwriter/casual-markdown) parser, 
build-in css, vanilla javascript without any dependence. (support all browsers include IE9) 

### Usage 

1. create your document in html format. e.g. `casual-markdown-syntax.html` 
2. use below first 4 line as header, and start draft content in markdown format
3. at line 4, revise title to your document title
4. start draft document in markdown format

```
<!DOCTYPE html>
<link  href="https://casualwriter.github.io/dist/casual-markdown-doc.css" rel="stylesheet">
<script src="https://casualwriter.github.io/dist/casual-markdown-doc.js"></script>
<body title="document title here...">

## Heading

content in markdown format

```

### Sample

* Introduction of Casual-Markdown-Doc. src: [sample.html](https://github.com/casualwriter/casual-markdown-doc/blob/main/source/sample.html) => [preview](https://raw.githack.com/casualwriter/casual-markdown-doc/main/source/sample.html) 
* Supported Markdown Syntax https://casualwriter.github.io/casual-markdown/casual-markdown-syntax.html


Hope you like it.

Have a nice day,
Building a Blog with Hugo
Tags: blog, hugo, go
Published: 2022-07-16 17:39:26


## Why

A couple of months ago I started a new job at [Bitrise](https://www.bitrise.io/) where I’m learning a lot of new things
currently and I'm also in the middle of a [CKA](https://www.cncf.io/certification/cka/) exam preparation. I thought that
the notes I’m taking during my learning sessions or on my day-to-day tasks could be useful for anyone interested in
these topics.

Another reason is I would like to improve my writing skills in english.

## How

Many years ago I had a site built with Jekyll, but now I thought I give [Hugo](https://gohugo.io/) a try as I'm really
enthusiastic about Go and read a lot of great things about it.

The longest part of the process was probably to find a good theme that I could easily customize. I ended up doing my
own, but it’s heavily inspired by [Etch](https://themes.gohugo.io/themes/etch/)
and [Hugo Bear Blog](https://themes.gohugo.io/themes/hugo-bearblog/).

For CSS, I’ve picked Bootstrap without any particular reason other than that I’m (somewhat) familiar with it. I’m pretty
sure it’s overkill for a simple page like this… Other than messing around a little with the typography I didn’t do much.
I’ve also added fontawesome for a couple of icons.

Since the whole page is static I'm hosting it on Github Pages and it is built with Github Actions.

The source code is public at [github.com/duplabe/duplabe.com](https://github.com/duplabe/duplabe.com).
9 websites that will help you learn web development faster (they are free) 🧵
Tags: webs, tutorial, webdev, programming
Published: 2022-08-02 15:19:00

## 1. How HTTP Works

Everything you need to know about HTTP based system.

🔗 https://howhttps.works

## 2. 30 Days of Node

Learn Node step by step with interactive examples and code snippet in 30 days.

🔗 https://nodejsera.com/30-days-of-node.html

## 3. How DNS Works

Learn what happens when you type a website address in your browser

🔗 https://howdns.works

## 4. Git

Check out this excellent free website to learn git visually.

🔗 https://learngitbranching.js.org

## 5. JavaScript

Visualize JavaScript code and learn the workflow.

🔗 https://jsv9000.app

## 6. Algorithm Visualizer

Algorithms are always a little tricky to learn. But this website can make it easier.

🔗 http://algorithm-visualizer.org

## 7. Cryptozombies

Learn to code Blockchain DApps by building simple games.

🔗 https://cryptozombies.io

## 8. useWeb3

useWeb3 is a platform for developers to explore and learn about Web3.

🔗 https://useweb3.xyz

## 9. Sorting Algorithms

Learn sorting algorithms visually and intuitively.

🔗 https://toptal.com/developers/sorting-algorithms


I hope you like this websites.

You can check out my twitter [@hsn_0x](https://twitter.com/hsn_0x)
Learning Data Structures? Master in 6 simple steps.
Tags: datastructures
Published: 2022-08-02 15:10:00

---
title: Learning Data Structures? Master in 6 simple steps.
published: true
description: 
tags: datastructures
cover_image: https://pd.daffodilvarsity.edu.bd/web/image/op.course/243/image_1920
# Use a ratio of 100:42 for best results.
---
Learning a new Data Structure?

⬘  First, check its behavior for the below attributes
    ➊  Linearity
    ➋  Memory Allocation
    ➌  Connectivity
    ➍  Ordering
    ➎  Uniqueness

⬙  Then, implement
    ➏  Common Operations

➊  Linearity

      ❍  Linear
      ❍  Non-linear

✧  It says about the traversal path.

➋  Memory Allocation

      ❍  Contiguous
      ❍  Non-contiguous

✧  It says about how elements are stored in physical memory.

➌  Connectivity

      ❍  One-Directional
      ❍  Bi-Directional

✧  It says about how 2 elements are connected to each other.

➍  Ordering

      ❍  Ordered
      ❍  Unordered

✧  It says if the fetching of elements is always predictive or randomized.

➎  Uniqueness

      ❍  Only Unique Elements
      ❍  Duplicates are allowed

✧  It says if insertion of an element is restricted when a similar element already exists.

➏  Common Operations

      ❍  Traversal
      ❍  Insertion
      ❍  Deletion
      ❍  Get
 
✧  These are the common operations performed on all data structures.

Example ➊ : Array

    ➤  Linear
    ➤  Contiguous
    ➤  One-Directional
    ➤  Ordered
    ➤  Duplicates are allowed

Example ➋ : Set

In case of Array based implementation,

    ➤  Linear
    ➤  Contiguous
    ➤  One-Directional
    ➤  Ordered
    ➤  Only Unique Elements

Example ➌ : Hash Table

    ➤  Linear
    ➤  Non-Contiguous
    ➤  One-Directional
    ➤  Unordered
    ➤  Only Unique Keys

Example ➍ : Doubly Linked List

    ➤  Linear
    ➤  Non-Contiguous
    ➤  Bi-Directional
    ➤  Ordered
    ➤  Duplicates are allowed

Example ➎ : Tree

    ➤  Non-Linear
    ➤  Non-Contiguous
    ➤  Mostly One-Directional
    ➤  Ordered
    ➤  Duplicates are allowed
Emmet problem
Tags: emmet, notworking, errors
Published: 2022-08-02 14:41:01

Hi, 

Please can somebody help me. 
The emmet extension works in another document but in the main document doesn't.
What can be the problem and how can I solve it? 

Thanks a lot.

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