DEV Community: Marina Yamaoto

Learn Node.js for beginners

Marina Yamaoto — Wed, 09 Jun 2021 00:25:29 +0000

Hi there.
This article is for beginners who want to learn basic Node.js.

What is node.js?

At first, let's talk about what is node.js.
Node.js is an open-source server side runtime environment built on Chrome's V8 JavaScript engine.
It provides an event driven, non-blocking (asynchronous) I/O and cross-platform runtime environment for building highly scalable server-side applications using JavaScript.
It mean, Node.js was created to control server-side processing with JavaScript, and has the feature of being able to handle large amounts of access at high speed.
You can run Node.js not only on the web, but also in various fields such as IoT and smartphone applications.
Recently, Node.js is also being used for front-end (client-side) development.

What applications use Node.js?

These are just a few companies that use Node.js. There are many more, for the same or different reasons.
First, Node.js is extremely fast, as exhibited by its reputation in speeding up web pages.
Node.js can also be used for UI development, and many of the companies that use Node.js primarily use it for that reason.

Uber

Uber, a cab dispatch service, also uses Node.js for their core system.

Node.js was chosen because the Uber service is used all over the world and requires a huge network system to operate.
Uber now can process over 2 million remote procedure calls (RPCs) per second.

Paypal

Paypal is a payment service that uses email accounts and the Internet.

By switching from Java to Node.js as the server-side development language, the gap with the front-side development has been reduced.
Senior Director of Payments Products and Engineering at PayPal says, The Node.js app was built almost twice as fast with fewer people, in 33% fewer lines of code and 40% fewer files (in comparison with previous Java-based application).

LinkedIn is the social network for professional connections. It is best suited for people looking to make serious career moves who want to get noticed by relevant companies.

Previously, Ruby on Rails was used, but in order to increase the speed of access, it was moved to Node.js.
They were able to drastically cut down on server resources and the app is said to run 20 times faster than its predecessor. HTML5 was also a big factor in LinkedIn’s mobile app development.

Netflix

Netflix is the world’s biggest global provider of video streaming including movies and television series, available in over 190 countries. As of July 2020, Netflix reported over 192 million subscribers worldwide, with more than 72 million in the U.S itself.

Previously, Netflix was using Java on the back end and JavaScript on the front end, which required the developers to be proficient with languages.

Now, The user interface (UI) of Netflix was built using Node.js.
According to the Netflix team, the modularity of the framework encouraged them to use Node.js. Netflix is also almost two times faster during startup as a consequence.

What is "npm"

Next, his is an explanation of the Node.js package management tool "npm".
"npm" stands for "Node Package Manager" and is a tool for managing Node.js packages. npm manages the many packages that are available for development in Node.js.

npm is automatically installed when Node.js is installed.

"Global" and "local" installation

There are two ways to install packages with npm "global installation" and "local installation".
Global installation allows you to use the package in all your projects.
Local installation installs the package on a project-by-project basis, so the package can be used only in the installed project.

package.json

npm allows to create a file called "package.json".
When you describe a package in this file, you can use it to install the package at once. It is also possible to make the description automatic when installing the package.

Basic command

These are useful command of npm.

update npm

npm install npm 
npm i npm

Local package

Install package

npm install [package name] 
npm i [package name]

Uninstall package

npm uninstall [package name] 
npm rm [package name]

update package

npm update [package name] 
npm up [package name]

check the package

npm list 
npm ls

package.json command

make package.json

npm init

conclusion

Today, I explained about basic Node.js.
I hope this article helps you understand node.js!
Happy coding! :)

Why Designers Should Learn To React?

Marina Yamaoto — Mon, 19 Apr 2021 13:48:03 +0000

Hi everyone.
If you are a designer, how do you work with front-end developers?
In this article, I will show you how to use react to solve the problems that arise between the designer and the front-end developer.

The process of creating a website

I work in the following order when creating websites for my company.

branding with the client. Determine the purpose of the website.
Create a design using design tools such as AdobeXD, Sketch, Figma. and get confirmation from the client. Create instructions for the design system, etc., and pass the design to the front-end developer.
The front-end developer reviews the code and implements it. Repeat design check.
production environment

I am mainly in charge of steps 1 and 2.
However, the most important part of the website, the coding part, is always under pressure due to deadlines, and if there is a problem with the design, the code becomes more complicated, or if there are design changes, it may take longer than usual.
In other words, there is a gap between the design part and the coding part of website production.
I believe that designers and front-end developers should always work together to solve problems.

The gap between designers and front-end developers

There is a gap between designers and front-end developers when creating websites.
How can we solve this problem?
First of all, there is no better way than communication between the designer and the front-end developer, and the designer's understanding of coding.

Understand React

At first, what is React?
React is a JavaScript library developed by Facebook for building UI parts on websites.

React distinction.
In React, the DOM (Document Object Model) operations for manipulating web pages use a virtual DOM to display the difference from the actual DOM, which makes it difficult to increase rendering costs even in large-scale development.

Also, React.js for web development and React Native for native application development are available, and one of the appealing features of React.js is that both web applications and native smartphone applications can be developed using almost the same writing style.

There are more basic distinctions from React official site.

Declarative.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.

Component-Based.
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Learn Once, Write Anywhere.
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

Tha’s its high levels of performance and development efficiency, This library is used all over the world, including Netflix, Airbnb, Wix, and Reddit.

Why designer should learn to React?

React is mainly for creating UI parts (components), and is said to be an effective framework for web applications that use a lot of buttons and text boxes.
A lot of designers must be using Atomic Design for their web and app designs. Atomic design is one way of thinking about design systems. They are similar to Atomic Design.
Components are the Atoms and Molecules of Atomic Design.
Because components can not have more than one element.
If designers know about the components, they can help close the gap by reducing the amount of redesign work involved in creating a design system.

A better understanding of React components

As mentioned earlier, React is a library of components. Every part can have its own state and data. For similar 　areas, only the data of the parts can be changed and reused many times.
In React, you can create components in several ways depending on their roles. The first thing to keep in mind is the following two components.

Class components

A class component is a classic method of defining components, using the class keyword to define components. A class component can have a state and lifecycle, which allows for flexible changes in content.

Function components

Function components are very simple, have no state, and have no control. It is just a placeholder that draws a specific fixed element according to the value passed to it. In short, it is just a "function".

Hmmmmm, sounds like class components are better than function components. because they can have a state. But function components can not have any state.
Don't worry, we have "Hooks"!

Hooks

A hook is a function that "hooks into" a function component with React features such as state and lifecycle. Hooks are a feature for using React without classes, so they do not work within classes.
Yay! Now we can use function components like class components!!

At last, what difference between class components and function components?

Pros of hooks

At first, coding will be clear.
Because hooks can make shorter code than classic components.
So it looks brevity and easy to read.

For Example,
this is class component that wrote a counter system.

class Example extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 render() {
   return (
     <>
       <p>You clicked {this.state.count} times</p>
       <button onClick={() => this.setState({ count: this.state.count + 1 })}>
         Click me
       </button>
     </>
   );
 }
}

Function component

import React, { useState } from 'react';

function Example() {
 const [count, setCount] = useState(0);

 return (
   <>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
       Click me
     </button>
   </>
 );
}

This function component is less than 6 line class component!

Cons of hooks

Components areas are different for each developer. So before you make components you have to communicate and find common ground with them.

should we use function components for everything?

The official site said you should use function components at first.
But depends on the situation. Hooks also have rules.

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.
Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.) Rules of Hooks

Material UI

At last, I'd like to introduce a popular React UI framework
"Material UI".
It is a UI component framework developed based on Google's Material Design.
There are a lot of component types so it helps make your design system faster.

Conclusion

Today, I show you "Why Designers Should Learn To React?".
Designers think that the designs they come up with work quickly and as a matter of course. But if you understood front-end development, you will realize what is the design problems in development. It will help the project going faster.
I'm happy if some designers are a bit interested in React by this article!
Happy Coding!

Why you need Branding into Your Website?

Marina Yamaoto — Mon, 08 Feb 2021 13:33:43 +0000

Hi there!
Have you ever created your own website?
I know many developers are reading this web site. It's easy to make websites for you. But don't miss the branding part ;)
With the spread of COVID-19 around the world, I'm sure you have more time to spend on yourself. Many people have started new hobbies.
I think there are more and more people who want to start their own businesses, products, blogs or introduce their hobbies. If you are going to create a website, you want to make sure that many people will visit it.
When creating a website, we tend to concentrate on the structure and logo design, color, and visual design. However, branding can improve the quality of your website.
In this article, I would like to talk about how to incorporate branding into your website.

"BRANDING"

At first, let's think about branding.
Why do we need the branding to create a website?
Branding helps to clarify the concept and identity of your website. It also makes it easier to understand what you need and what you don't need, and which pages should be prioritized, even if you need a complex site map like a corporate website. From the user's point of view, it is also easier to understand the purpose of the website and leave a good impression.
Let's take a look at the basic process required for branding.

■ Make a brand concept

A brand concept is a general idea or abstract meaning behind a brand. A brand's concept is used to give consistency to a brand's identity. It can be described as the first thing you want to pop into your customer's heads when they think of your brand.
That's what I mean users can understand what it is in an instant, and immediately visualize it.

1. What kind of website do you want to create?

As mentioned earlier, the format of your website will vary depending on whether you want to create a corporate site, sell products or services, start a blog, or show your own work.
Once you have decided on the type of website you want to create, search to find out what types of websites are currently available. You will find that there are similarities in current trends, color trends, illustration taste, and even the structure of the website.

2. Brainstorming

Brainstorm ideas for the features of your website.
The important thing here is to come up with as many words as you can think of. For example, if you want to make a Bicycle store, it doesn't have to be directly related to a Bicycle store -> Bicycle -> City -> Cafe -> Coffee. Think of all the images that come out of your main theme.
Brainstorming will give you "an idea of where the demand for your main theme is", "the positives and negatives", and "how you want your website to be seen".

3. Think about who you want to deliver to.

Who do you want the website to be seen by?
It is also a good idea to create personas that assume the user's age group, gender, and behavior.
If you are targeting a wide age range, think about the behaviors, hobbies, and personalities that they share.
For example

A man in his 30s who is looking for cycling as a sporting activity

4. What does the brand offer?

Think about the strengths and features of the brand and the value users will receive from the service.

Maintenance and customization
A cafe where you can take a break
hold events
Test ride
Enjoyment of holidays
Peace of mind about something you use every day
More relevant to users' lives

5. Summarize in abstracted terms

Finally, summarize the words you have written down.

the bicycle store where you can enjoy a free holiday
the place that gives you a sense of security every day
The bicycle store that makes you want to come back It doesn't need to be as cool as a catchphrase. It is important that the concept "conveys the information correctly". Based on this concept, we will go to the next step.

■ Create a mood board

What is a mood board?

A mood board is a visual tool that communicates our concepts and visual ideas. It is a planned arrangement of images, materials, pieces of text, etc. that is intended to project a particular style or concept.

Why we need it?

Using a mood board helps you to express the vision you have in mind for the project. A mood board is a good starting point to get things done. It will help you collate and focus your ideas, and help to define the project.

How to create a mood board

it's easy to create. Internet, magazines, anything is fine. Gather all the visual images you can think of. Then put them all together.
Key visuals, fonts, color usage, brand image, etc, move the images about on the board to create different compositions. Play around with the images until you are happy with the images that you have.
What's important is that they tell your story.
Even once a mood board has been created, it is important to make sure that only the image you are really looking for is there.
Once the mood board is created, if any items do not match what you are looking for, you can exclude them as mismatches. However, instead of deleting the excluded items, keep them in the "exclusion list".
In this way, you will be able to visualize that "this kind of image is not required", and the exclusion list itself will serve as a reference for future designs.

Conclusion

In this article, we talked about the basics of branding and how to incorporate branding into your website.
Branding is the foundation of anything you create.
It is not an abstraction but can be verbalized. It can be shared with all people, not just yourself so that the value can be easily understood and communicated.
It's easy to focus on the visible things like logos and designs, but once you think about who your website is for, what it's for, and how it communicates, your website will become even more attractive.
Thank you for reading! Have a nice day :)

How to use built-in array methods in JavaScript

Marina Yamaoto — Mon, 18 Jan 2021 16:29:51 +0000

When using an array, you will find that you have to do long iterations in many situations.
Do you want to make your code readable and simple?
Can be done by using built-in objects.
There are various built-in objects in JavaScript.
In this article, I will explain how to use the built-in array methods.

What are built-in objects

At first, what are built-in objects?
Built-in objects provided from the beginning in JavaScript.
There are four built-in objects: Array, Date, Math, and String for efficient handling of these objects. Each object has special-purpose properties and methods associated with it.

Array methods

There are many array methods on the list.
let's see the top of useful methods.

"ADD & DELETE"

push()

add a new element to the end of the array. It returns the new length of the array. The original array will be modified.

what is the good thing when you use push method?
Let's see the example.

The example above shows two ways to add an element.
the first method is to specify the element number[4], which is the number added by one from the current last element number of the array you want to add and assign 'squirrel' to it.
The elements of an array do not have to be contiguous. Therefore the index of the element to be added does not have to be the current last index plus one. If the number is not the current last index, it will be null between the new element.

The second is push method.
When you use push method, you don't need to count the current last element number of the array.

But push() returns the new length of the array.
when you print the 'push', you can see the length.
So when you would like to print the new array, you have to write 'pets'.

unshift()

Add a new element or multiple elements to the top of an array and returns the number of elements after the addition. The original array will be modified.

It is used in the same way as push method, but if you are adding multiple elements at the same time, be careful about the order in which they are added.

Alphabet1 Result is adding multiple elements at the same time. The alphabet starts "A".
Alphabet2 result starts C. Because alphabet2 is adding elements in each method.

pop()

Removes the last element of an array. It returns the element and changes the length of the array. If the array is empty, it returns undefined. The original array will be modified.

shift()

Removes the top element of an array. It returns the element and changes the length of the array. If the array is empty, it returns undefined. The original array will be modified.

First In First Out (FIFO) can be created by joining with push method as described above.

slice(start, end)

It retrieves the array elements from the array at the position specified in the "start" argument to the one before the array element at the position specified in the "end" argument and returns them as a new array. The original array will not be modified.　The original array will be modified.

If it only "start" argument, it retrieves the array elements from the array at the position specified in the "start" argument to the last array element and returns them as a new array.

The difference between this method and the previous methods is that it does not modify the original array. So the Before array and After array are the same length.

splice(index, deleteCount, element1, …, elementN)

Removes an element from an array or adds an element to an array, and returns the removed element. It can also replace a specified range of elements in an array with other elements.

- Remove

If you do not specify any elements to be added, the elements in the specified range will simply be removed.

- Add

If the deleteCount is specified as 0, the element to be removed will be 0 and the element specified in the argument will be added before the element specified in the start index.

- Replace

If you specify elements to be added, the elements in the specified range will be replaced.

"ORDER"

sort()

Sort array elements by string order or by specified order and return the array after sorting. The original array will be modified.

If the element is a string, it’s very simple. But if the element contains a number, be careful.

Whooops! It didn't sort!
Even if the value stored in an element is a number, it is not sorted by the size of the number, but as a string after the number has been converted to a string. Therefore, the first character is sorted first, resulting in the result as shown above.

In this case, compareFunction is useful.
CompareFunction is a method of comparing two values and switching their order one by one.

function compareFunc(a, b) {
    return a < b;
}

In this example, it takes two arguments, "a" and "b", and returns the result of comparing "a < b" in return. By checking whether "a" is smaller than "b", the order is switched.

"<", ">", "==", and "-" can be used as comparison conditions to change the ascending or descending order.

Let's see the number example again.

Ta-dah! The numbers are now sorted!

To sort in descending order, use the following

reverce()

Sorts of array elements in reverse order. The original array will be modified.

"REPEAT"

forEach()

It executes a provided callback function once for each array element.

What is callback function?

Callback function is Functions passed as arguments.
and after the function "A" is executed, the function "B" specified in the argument can be executed.

if you want iterative processing, you can use for loop.

forEach does not require such initialization and can be written very efficiently.

The forEach method extracts the elements in the array in order from the top and calls the callback function. The callback function is called with the value of the currently fetched element, the index of the element, and the array itself as arguments.

It is also possible to retrieve the contents of an object!

"CONVERT"

map()

It executes a callback function for each element and returns the result as a new array.

In the callback function written as an argument, the value of the element received as an argument is converted to uppercase using the toUpperCase method, and the value is returned as the return value. After the same processing is done for all the elements, in turn, a new array with the returned values as elements is created and returned as the return value of the map method.

The values of the elements in the new array are all uppercase versions of the values of the elements in the original array, but the original array is unmodified because the map method does nothing to the original array. It's called "undestructive method".
for example sort(), splice(), push(), shift(), unshift(), reverse() will be modified of the original array.
It's called "destructive method".
When you want to back to the original array, if you already made "destructive method", you can't back to the original array. Sometimes it make many bugs. so please be careful to use "destructive method" in the code.

What the difference with forEach()?

You noticed these methods are very similar. What the difference between them?
the answer is "return".
forEach() is just an execution method、but map() will return the result as an array after execution.

Let's see the example.

This forEach() and map() are the same program and the result is the same.

But how is "return"?

forEach is "undefined".

Yay! Only map() has returned!
You can see that the execution result is able to get the array data as "return value".

reduce(call back(sum, element),Initial value)

Add up the values of all the elements in the array in order and finally get the total value.

The first process will result in "1 + 2", and the sum will be stored in the accumulated value, and the next process will execute "3 + 3". Total value “15".

What if the array elements contain objects?

In such a case, if you do not specify the initial value, the object that is the value of the first element will be stored as it is as the initial value, which will not produce the intended result.
Like this.

"SEARCH"

filter()

Use a callback function to determine whether or not the elements in the array meet the conditions, and create a new array with only the elements that meet the conditions.

In the callback function as the argument of the filter method, if the length of the element received as the argument is greater than 4, true is returned, otherwise false is returned. After calling the callback functions for all the elements, in turn, a new array containing the elements that returned true is created and returned as the return value of the filter method.

The filter method does not do anything to the original array, so the original array is not modified. This method is undestructive method.

indexOf(element, firstIndex)

Search the array for an element and returns its first index. If it is not found, returned -1.

there is one more character “Cat" in the string, but the program will terminate after returning the first matching position.

What happens if you specify "2" as the "firstInde"?

A second "Cat" will be output!

That's all I introduced useful array methods in built-in objects!
Enjoy coding :)