DEV Community: Margia Sultana

CRUD Operation

Margia Sultana — Thu, 23 Dec 2021 17:27:08 +0000

CRUD stands for create, read, update and delete. These are the four basic functions of persistent storage. Organizations that keep track of customer data, accounts, payment information, and other records require data storage hardware and applications that provide persistent storage. This data is typically organized into a database.

Create:
To create resources in a REST environment, we most commonly use the HTTP POST method. POST creates a new resource of the specified resource type. let’s imagine that we are adding a new package to the stored list of packages for this tourism website, and the package objects are stored in a packages resource. If we wanted to create a new item, we would use a POST request.

Request:
POST http://www.tourism.com/packages/
Body -
{
  "package": {
    "name": “Goa Tour”,
    "price":20,000
  }
}

So, This creates a new package with a name value of “Goa Tour” and a price value of 20,000BDT.
After Created successfully the server should return a header with a link.For example,

Response:
Status Code - 201 (CREATED)
Body -
{
  "package": {
    "id": 123,
    "name": “Goa Tour”,
    "price":20,000
  }
}

So, for this response, we can see that the newly added package was created successfully.

Read:
We use the GET method to read resources in a REST environment.GET can be used to read an entire list of items. If we call GET on the same information 10 times in a row, you should get the same response on the first call that we get on the last call.

Update:
For UPDATE we use the PUT method for the CRUD operation. For example, if the price of the Goa Tour has gone up, We can do this with a PUT request.


PUT http://www.tourism.com/packages/123
Body -
{
  "package": {
    "name": “Goa Tour”,
    "price":21,000
  }
}

This request should change this package with id 123 and now still have the name “Goa Tour”, but the price value should now be 21,000, whereas before it was 20,000. The response includes a Status Code of 200 (OK) to signify that the operation was successful. For example,

Response:
Status Code -200 (OK)
Body -
{
  "package": {
    "name": “Goa Tour”,
    "price":21,000
  }
}

Delete:

For Delete, we use the DELETE method for the CRUD operation. For example, if we want to remove this Goa tour package we know has an id of 123.

Request:
DELETE http://www.tourism.com/packages/123

So after this DELETE call would return the original list of dishes with the {"id": 123, "name": “Goa Tour”, "price": 21,000} entry removed. All other dish objects in the package resource should remain unchanged.

React JSX

Margia Sultana — Wed, 22 Dec 2021 17:08:08 +0000

JSX is simply a syntax extension of JavaScript.It stands for JavaScript XML.JSX is an HTML-like syntax that we can use with React to make it easier and more intuitive to create React components. It is only purpose is to make it easier to create React components.

Benefits of using JSX:
It is type-safe, and most of the errors can be found at compilation time. It makes it easier to create templates. It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.

JSX Expression:
JSX supports expression in pure JavaScript syntax. A JSX expression starts with an HTML-like open tag and ends with the corresponding closing tag. JSX tags support the XML self-close syntax so we can optionally leave the closing tag off. JSX expressions evaluate to ReactElements.

Function:
JSX supports user-defined JavaScript functions. Function usage is similar to expression.

Attributes:
JSX supports HTML like attributes. All HTML tags and their attributes are supported. JSX uses camelcase naming convention for attributes rather than the standard naming convention of HTML such as a class in HTML becomes className in JSX because the class is the reserved keyword in JavaScript. We can also use our own custom attributes in JSX. For custom attributes, we need to use data- prefix.
Example:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     return(  
         <div>  
             <h1>react JSX</h1>  
             <h2>JSX atributes</h2>  
             <p demo-Attribute = "demo">This is custom attribute.</p>  

         </div>  
      );  
   }  
}  
export default App;

In this example, we have used a custom attribute demo-Attribute as an attribute for the

tag. In JSX, we can specify attribute values in two ways.

As String Literals:
We can specify the values of attributes in double quotes.
As Expressions:
We can specify the values of attributes as expressions using curly braces {}.

JSX Comments:
JSX allows us to use comments that begin with /* and ends with */ and wrap them in curly braces {} just like in the case of JSX expressions.

JSX Styling:

React always recommends using inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements.

Example:

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     var myStyle = {  
         fontSize: 80,  
         color: 'black  
      }  
      return (  
         <div>  
            <h1 style = {myStyle}>JSX styling</h1>  
         </div>  
      );  
   }  
}  
export default App;

Feature of ES6

Margia Sultana — Tue, 21 Dec 2021 16:47:56 +0000

JavaScript ES6 is also known as ECMAScript 2015 or ECMAScript 6.ECMAScript 2015 or ES2015 is an update to the JavaScript programming language. I provide a brief summary of some features of ES6 to start quickly in ES6.

JavaScript var:
When we declare a variable using the var keyword the scope of the variable is either global or local. If we declare a variable outside of a function, the scope of the variable is global. When we declare a variable inside a function, the scope of the variable is local. For example:
var variable_name;
Here variable_name is a global variable that is accessible by any function.

function increase() {
var variable_name= 10;
}

In this example, the variable_name variable is local to the increase() function. It cannot be accessible outside of the function.

JavaScript let:
ES6 provides a new way of declaring a variable by using the let keyword. The let keyword is similar to the var keyword, except that these variables are blocked-scope. This means they are only accessible within a particular block. For example:
let variable_name;

JavaScript const:
ES6 provides a new way of declaring a constant by using the const keyword. In ES6 const will have block scoping just like the let keyword. The value of a constant cannot change through re-assignment, and it can’t be redeclared. A constant cannot share its name with a function or a variable in the same scope. For example:
const CONSTANT_NAME = value;

JavaScript Classes:
JavaScript class is used to create an object. Keyword class is used to create a class. Class is similar to a constructor function.For example:
class Person {
constructor(name) {
this.name = name;
}
}
JavaScript Arrow Function:
ES6 arrow functions provide us the way to write a shorter syntax compared to the function expression.For example,

// function expression
let x = function(x, y) {
return x * y;
}
// function expression using arrow function
let x = (x, y) => x * y;
Default perimeter value:
When we do not provide a parameter in a function then it became an undefined value that’s why we specify default parameters to set a default value in the parameters of a function. In the ES6 version, you can pass default values in the function parameters. For example,
function say(message='Hi') {
console.log(message);
}

say(); // 'Hi'
say('Hello') // 'Hello'

JavaScript Destructuring:
The destructuring syntax makes it easier to assign values to a new variable. For example,
// before you would do something like this
const person = {
name: 'Marjia',
age: 23,
gender: 'female'

}

let name = person.name;
let age = person.age;
let gender = person.gender;

//now we do something like this
const person = {
name: 'Marjia',
age: 23,
gender: 'female'

}

let { name, age, gender } = person;

CSS Animation

Margia Sultana — Tue, 21 Dec 2021 14:33:05 +0000

CSS animation is a useful and powerful tool. It makes a website interesting and creatively exciting, In this article, we round up some of the coolest CSS animations. The animation property in CSS can be used to animate many other CSS properties such as color height width. Each animation needs to be defined with the @keyframes.CSS animations are initiated by specifying keyframes for the animation these keyframes contain the styles that the element will have. Now we discuss some CSS animation properties.

1.@keyframes: It is used to specify the animation.
Syntax:
@keyframes slidein {
from {
transform: translateX(0%);
}

to {
transform: translateX(100%);
}
}
2.animation: This is a property, used for setting all the properties, except the animation-play-state and the animation-fill- mode property.
Syntax:
animation
[ name duration timing-function delay iteration-count direction fill-mode play-state ]

3.animation-delay: It specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.

4.animation-direction: This property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

5.animation-duration: It specifies the time duration taken by the animation to complete one cycle.

6.animation-timing-function: establishes preset acceleration curves such as ease or linear. A keyframe's timing function is applied on a property-by-property basis from the keyframe on which it is specified until the next keyframe specifying that property, or until the end of the animation if there is no subsequent keyframe specifying that property.

7.animation-iteration-count: the number of times the animation should be performed. This property is specified as one or more comma-separated values.
6.animation-fill-mode: This property sets which values are applied before/after the animation.
animation-play-state: It specifies if the animation is running or paused.
9.animation-name: It specifies the name of @keyframes animation.

we can comma-separate the values to declare multiple animations on a selector as well. Animating most properties is a performance concern. So, there are certain combinations that can be animated safely:
transform: translate()
transform: scale()
transform: rotate()
opacity