DEV Community: Bin

Using Canvas in vanilla JavaScript

Bin — Thu, 24 Jun 2021 16:04:41 +0000

What is Canvas?

Canvas is HTML element which you could draw graphic or use it to create some fancy animations.

Setup Canvas

In order to setup a canvas in vanilla JavaScript, you need to add canvas element on HTML file.

and then using querySelector to select the element, and setup the size of your canvas and chose the dimensional of context you are going to use, below I using two-dimensional drawing context

Basic Shape

1. Line

We need beginPath() to set a new path and using MoveTo() to create a sub-path of beginning of line and LineTo() to create a sub-path of ending of line. The strokeStyle() is color of line, the stroke() to drawing the line

2. Circle

Similarly, in order to drawing a circle on Canvas, we need beginPath() to set a new path, then using the arc() to create circular arc which require 6 parameters, 1st parameters is x-axis of arc's center, 2nd parameters is y-axis of arc's center, 3rd parameters is radius, 4th parameters is start angle, 5th parameters is end angle (below Math.PI *2 = 360°), the last parameters is determining if drawing the arc counter-clockwise between the start and end angles. The The strokeStyle() is outline color of circle , the stroke() to drawing outline of circle

3. Rectangle

The fillStyle() to set to set the color of rectangle and The fillRect() to create a rectangle

Reference:
Line Circle Rectangle More

Ruby Instance Methods

Bin — Wed, 02 Jun 2021 16:38:42 +0000

Introduction

Below is some instances method in Ruby might help you easily solving the issue.

.flatten()

.flatten() is method will return a new array that flattening of itself and it also taking argument to determine the level of recursion to flatten.

.reverse()

.reverse() method will return a new array containing self's elements in reverse order.

.rotate()

.rotate() method will rotate first element of self and return by new array and it also taking argument to determine how many element need to rotate, if passing negative argument like (-1) then it will rotate in opposite direction

.insert()

.insert() method is taking at least two argument, first argument is index of array, and second argument is value that you are going to insert, if using negative index will insert the value at the end of array

References:
API DOCK

Use State in functional component of React

Bin — Thu, 13 May 2021 16:08:45 +0000

Introduction

This post to understand how to use state in functional component of React. As we know React has functional and class components and we usually using the Class Components whenever we require to use state of components:

But we also able to use React Hooks to add state into Functional components

React.useState Hook

The function of useState is hook that allow you add and maintain state within the Functional components. First of all, you need to import useState from React

Then here we have dog as state variable and setDog as the function to update the dog. The useState Hook only allow one state variable being declare at once, in other words if you have multiple state, you should create multiple variables.

Update state

Like we using setState in Class components, we are going to use setDog in Functional components to updated the value of dog

References:

https://reactjs.org/docs/hooks-intro.html