DEV Community: Mayu Hayakawa

What is formik-yup ?

Mayu Hayakawa — Sun, 19 Mar 2023 00:08:41 +0000

Hi! It's Mayu.

In this post, I will explain how to use formik-yup.
This is a very useful framework for creating and validating Forms in React.
https://www.npmjs.com/package/formik-yup

How to use formik to create form?

Formik allows us to create form function easily

1)install

npm i formik-yup

2)import

import { useFormik } from  "formik";

3)set the initial value

const formik = useFormik({
    initialValues: {
        // you can set values as much you need
        name: '',
        email: '',
        country: 'Canada',
        terms: ''
    }
});

4) set formik value and handleChange on each input fields

<input 
    type="text" 
    name="name" 
    value={formik.values.name}
    onChange={formik.handleChange}
/>

5) also you can set submit function with handleSubmit() on form tag

<form onSubmit={formik.handleSubmit}>
    <!-- input field -->
</form>

6) then you can get user's input data with setting submit form inside useFormik function

const formik = useFormik({
    onSubmit: (values) => {
        console.log(values); //you can get input data as object
    }
}

Way to use Yup in form

Yup is a schema builder for validation.

1)import

import * as Yup from "yup";

2)set validate form inside useFormik Function

const formik = use Formik({
    validationSchema: Yup.object({
      name: Yup.string()
        .max(20, 'Name must be 20 characters or less')
        .required("Name is repuired"),
      terms: Yup.array()
        .required('Terms of service is must be checked')
    }),
})

3) then when the user submits data with something wrong, it returns 'formik.errors' object has the error message.

What in the world is DOM?

Mayu Hayakawa — Mon, 13 Feb 2023 00:14:44 +0000

Hi! It's Mayu.
In this post, I'm going to explain about DOM.

What is DOM ?

DOM stands for Document Object Model, it is the mechanism for operating HTML elements.
In the DOM, elements contained in the HTML document and the text data contained in the elements are treated as objects. These objects are calle “nodes”, and the DOM views an HTML documents as tree of nodes.

The DOM world

Here is image of DOM stracture.

Each boxes are elements be called “nodes”
All nodes connects with other nodes as parents or children relations.
ex) HTML is parent of Head and Body, and child of Document.

What can we do with the DOM ?

The DOM allows us to get, change, remove nodes from HTML documents.
For example, I’ll show some method the way to get nodes! :)
Here is sample document.

<body>
    <header>
        <h1>Page title</h1>
    </header>
    <main>
        <h2>Main</h2>
        <div>
            <h2 id="section-name">Today's topic</h2>
            <ul>
                <li class="topic-name">Topic 1</li>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                <li>Topic 2</li>
                    <p>Aenean commodo ligula eget dolor.</p>
                <li>Topic 3</li>
                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </ul>
        </div>
    </main>
    <footer>
        <p>this is footer</p>
    </footer>
</body>

When you want to get any node, you have some choices depends the propaties that the node has.

Get element using element’s id

If the target node has id, you can get it with getElementById() method.

let elementGetById = document.getElementById("section-name");

It returns an HTML element.

console.log(elementGetById);
// <h2 id="section-name">Today's topic</h2>

Get elements using element’s class name

If the target nodes have class name, you can get these with getElementByClassName() method.
Because of more than two nodes can have the same class name, when you get element with getElementByClassName() the element is returned as array. So you need to know it is not single element.

let elementGetByClassName = document.getElementsByClassName("topic-name");

It returns an array as HTML Collection (in thin case, its length is 3)

console.log(elementGetByClassName);
// [ {0:li.topic-name}, {1:li.topicname}, {2:li.topicname,} ]

Get elements using element’s tag

Also you can get element with tag name by getElementByTagName() method. This method gets an array as well as getElementByClassName.

let elementGetByTagName = document.getElementsByTagName("p");

It returns an array as HTML Collection (in thin case, its length is 4, 3 are children of li tag and 1 is footer’s.)

console.log(elementGetByTagName);
// [ {0:p}, {1:p}, {2:p}, {3:p} ]

Get elements using CSS selector

When you want to get element with CSS selector, you can use querySelectore() method.
This method returns the first element that matches a specific CSS selectore. And you can get element with many ways.

with id

let elementIdWithClass = document.querySelector("#section-name");

It returns an HTML element.

console.log(elementIdWithClass);
// <h2 id="section-name">Today's topic</h2>

with class name

let elementClassNameWithClass = document.querySelector(".topic-name");

It returns an HTML element.

console.log(elementClassNameWithClass);
// <li class="topic-name">Topic 1</li>

with tag name

let elementTagNameWithClass = document.querySelector("p");

It returns an HTML element.

console.log(elementTagNameWithClass);
// <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

with more specific CSS selector

let elementWithSpecificClass = document.querySelector("footer p");

It returns an HTML element.

console.log(elementWithSpecificClass);
// <p>this is footer</p>

Get more than 2 elements using CSS selector

When you want to get all elements that matches a specific CSS selector, querySelectorAll() method allows it. And you need to know it returns a NodeList, not single HTML element, not an array.

let elementAllWithClass = document.querySelectorAll("p");

It returns a NodeList.

console.log(elementAllWithClass);
// [ {0:p}, {1:p}, {2:p}, {3:p} ]

What is difference between HTMLCollection and NodeList ?

As I mentioned earlier, only querySelectorAll() returns NodeList. The differences between the two are...

Dynamic or Static

When number of elements of HTMLCollection or NodeList changes,
HTMLCollection is dynamic then it can catch the change. But NodeList is static then its number of elements doesn't change.

Availability of forEach()

Available methods are different between HTMLCollection and NodeList. And common one is forEach method. HTMLCollection is available forEach(), but NodeList is not. So when you use loop process with NodeList, you should other method.

How capitalize the first letter of each word in a string?

Mayu Hayakawa — Fri, 16 Sep 2022 22:50:40 +0000

Hi! I'm Mayu.
In this post, I introduce how to change letter's case in JavaScript.

Now, here is a sentence about me.

i LOVE JaVa SpaRRoW!

How do you feel when you read this sentence?
A little weird...is it?
(By the way, recently I realized this is an expression of interesting intonation. I didn't know this before I started learning English, so I am happy about this realization!)

So, let's make function to the sentence to be more readable :)✨

function changeLetter(text) {
    let word = text.split(" ");
    let arr =[];
    for(let i= 0; i < word.length; i++){
        arr.push(word[i].charAt(0).toUpperCase() + word[i].substring(1).toLowerCase());
    }
    return arr.join(" ");
}

console.log(changeLetter('i LOVE JaVa SpaRRoW!'));
// I Love Java Sparrow!

1. Set space as separater and split sentences into words.

split() to split sentence with spaces(" ").

2. Add elements that capitalized only the first letter to the array.

use loop because each texts have more than 2 words.
charAt() method that returns new string
toUpperCase() method returns the calling string value converted to uppercase
substring() method that returns the part of the string
toLowerCase() method returns the calling string value converted to lowercase
push() method that adds elements to the end of an array

3. Return to a sentence with a space between words.

join() method creates and returns a new string by concatenating all of the elements in an array, separated by commas or a specified separator string.

reference: mdn

How to push your file to git hub?

Mayu Hayakawa — Sun, 04 Sep 2022 22:29:51 +0000

The first way
Commit Local repository to Remote repository

1) Create directory and some files on your computer

1) Create Remote repository on git hub
Push "new button"

set about repository name, Public or Private, if you need add a README file.
Then push Create repository.

Did it!

2) Create Local repository on directory you just made
Command: git init

-git folder(hidden) appear

3) Add file to index
?What is Index?
-Index is an area where changes are temporarily stored before commit, and only files added to the index are subject to commit.
command: git add bun.index(👈file's name)
;If you want to commit all files, command: git add .

4) Commit file to local repository
?What is Commit?
-Commit means the operation of reflecting file additions and changes in the local repository.
Command: git commit -m "some comment"(👈kind of memo)

You can check the change history including commit messages by entering git log command.
Command: git log

When you want quit checking log, please enter "q".

5) Linking local and remote repositories
Command: git remote add origin repository's URL(👈You can copy this from your git hub)

6) Push file to remote repository
?What is Push?
-Push is to reflect changes in a local repository to a remote repository on GitHub.
Command: git push origin branch's name(👈You can check with command: git branch)

Ta-da!

The second way
Clone source codes from Remote repository on your Local

1) Clone source codes from Remote repository

2) Make your branch
?What is branch?

3) Commit files to branch you made

4) Push file to remote repository

reference(Japanese)
https://tech-blog.rakus.co.jp/entry/20200529/git

Why I want to be an engineer

Mayu Hayakawa — Sat, 03 Sep 2022 23:15:55 +0000

Hi! My name is Mayu, from Japan.
Now I'm living in Canada and college student majoring in programming. For my first post, I write a bit about my goal as an engineer and myself to keep it in my mind.

My history of career so far
In Japan, it is generally considered good to get a job right after college. So I was also looking for a job while I was a university student. But at that time I didn't understand what kind of job I wanted to get, I just felt that what I want to do in my career is to solve someone's problem. Then, I decided to become a programmer because I thought that if I became a programmer, I could solve a lot of problems in a lot of different ways.

As I had hoped, I got a job with a tech field company. But I couldn't get a position as a programmer because I didn't have the aptitude to be a programmer. Instead I was placed in an office clerk position.

A little later, I quit that job because I couldn't find my goal. But I had to work to live so I was looking for a job at random with no skills, no goal in my life. And fortunately I found a job as an office clerk in purchasing.

At first I was working just to earn money, but I realized that I could get more than just money through my work. So one day I suggested to my boss that he let me try more other jobs to advance my career. However, he told me that he turned it down because I am a woman. According to him, negotiations are not for women. It was too frustrating. I could understand if he had refused my request due to lack of skill, though.
Like that, I couldn't get a position that I wanted to do because I was not suitable again. But this made me notice I was trying to give up on my goals based on what others evaluated again. Then I decided to try what I am interested in. Someone may think it weird, but it's the biggest challenge for me, who has made safety choices.

That's way, I quit that job and moved to Canada to learn programming and English to achieve my goal in my life that I built in the past. :)

Why did I choose to change my career
As I mentioned earlier, I've always wanted to create something that solves someone's problem. And the desire grew ever more through my experience as an office clerk.
When I was an office clerk, I saw many people working overtime with many tasks everyday. But they were almost simple and repetitive jobs. So I made an easy system with Visual Basic Application for co-workers, and they were happy. This made me realize that programming can really help people and that I can create it. At the same time I felt I wanted to make a bigger system that is able to make things easier for a lot of people.

So why did I choose to study abroad instead of in Japan? The purpose is language. Embarrassingly, I had never studied English outside of school and had no interest in it. Because I can live in Japan without English. But after starting programming I realized that if I could understand, speak English, the resources I could get would be wide. Then I chose to learn programming in English. It has been 6 months since I moved to Canada and it is very difficult to learn anything other than my native language. However, using English as a means to learn programming rather than as an end in itself works very well for me. It is because learning English will become very necessary for me.

By the way, I got married 2 years ago. This event also influenced my career. When I got married, I was working as an office clerk yet. And it is also said to be "common sense" in Japan, after getting married, a couple has children, a house, the husband should work hard mainly at his job and the wife should work hard mainly at her housework. I think this way of life is one of happiness. But at least in the company I was in, it was considered normal and a common idea among everyone. So after I got married, my boss was not going to put me in a position where I could challenge because he thought I would have children within a year or two, despite I told him I didn't have any plan like he thought. This made me felt that I've shouldn't get married if I've wanted to challenge something in my career...(Of course, it isn't true!) But if I had many skills, my boss's mind could change. And I'm not able to change how they think about my gender, but I can build up my skill. So I decided to concentrate to improve my skill, not worry about my environment.

My goal as an engineer
As you know, my goal as an engineer is to create useful applications that are easy to use for everyone.
Aside from continuing to achieve this goal, I have another goal ;) That is to make games. I love games. I've played games since I was 5. Through games I made a lot of friend, I had a lot of experiences like enjoyment, patience,
So I hope that one day I create a game that connects people, a game that triggers different emotions, something that can touch someone's life.

At last
Thank you for reading my first post <3

Pursuing my goal is very hard. I realize that there are many things I can't, I'm upset by my own uselessness. But at the same time, I realize that I'm living my life without being driven by others like I used to be. But I am grateful for my past experiences because they have allowed me to think this way now.

And For...
My parents, sister friends who support me from Japan,
My husband who comes to Canada with me,
My teachers and classmates who always help me,
Everyone who is involved with me and supports me,
I will do my best to return the favor in the form of being useful to society.

To be honest, it took a long time to make this post because of my English skill. And a lot of things that I want to write still remain but I can't make sentences well now. I'm very frustrated but this experiences inspire me to keep going. So I will keep to try new things. I'll keep my effort for my goal!