DEV Community: Sarmin Akter Dipty

CRUD Operation,Relational database (MySql),Express

Sarmin Akter Dipty — Sat, 25 Dec 2021 14:43:19 +0000

CRUD Operation

CRUD Meaning: CRUD is an acronym that comes from the world of computer

programming and refers to the four functions that are considered necessary to

implement a persistent storage application: create, read, update and delete.

Relational database (MySql)

Enhance Your MySQL Databases For Free With Amazon Web Services.

Get Started Today. Flexible & Secure Open Source Relational Database

Services. Try It For Free For 12 Months. Sign Up For Free. Create a Free Account. Free Tier Details. Hands-On Experience.

Express

Express is a minimal and flexible Node.js web application framework

that provides a robust set of features for web and mobile applications.

APIs. With a myriad …
Mongoose

Let's face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That's why we wrote Mongoose.
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/test');

const Cat = mongoose.model('Cat', { name: String });

const kitty = new Cat({ name: 'Zildjian' });
kitty.save().then(() => console.log('meow'));

React Virtual DOM and diffing- algorithm Simplified, Context API

Sarmin Akter Dipty — Sat, 25 Dec 2021 14:22:40 +0000

React Virtual DOM and diffing- algorithm Simplified
Virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. ... Since “virtual DOM” is more of a pattern than a specific technology, people sometimes say it to mean different things.

Diffing-Algorithm:
React uses the "Diff" algorithm to do this comparison. With that, React can understand which places have changed. React then changes only the part of the dom where the change was made.

Context API

You might think to yourself: "Well, I'm convinced. How do I implement Context API in my app?" First, make sure you need it. Sometimes people use shared state across nested components instead of just passing it as props. And if you do need it you should follow these very few steps:
Create a folder under your app root named contexts (not required. just a convention)
Create a file named Context.js, e.g. userContext.js
import and create a context like so:
import React, { createContext } from "react";
const UserContext = createContext();
Create a component that will wrap the provider named Provider e.g. UserProvider
Example using React Hooks:
const UserProvider = ({ children }) => {
const [name, setName] = useState("John Doe");
const [age, setAge] = useState(1);
const happyBirthday = () => setAge(age + 1);
return (

{children}

);
};
Create a higher order component to consume the context named: with e.g. withUser
Example using React Hooks:
const withUser = (Child) => (props) => (

{(context) => }
{/* Another option is: {context => }*/}

);
The difference between the two options above is if you want the context to be a single nested property by this name, to explode it to its properties (which in my opinion is more convenient).
Finally export them
export { UserProvider, withUser };

API, event loop stack and queue,DOM

Sarmin Akter Dipty — Sat, 25 Dec 2021 13:53:09 +0000

More Javascript
What is an API?

An API (Application Programming Interface) is a set of functions that allows applications to access data and interact with external software components, operating systems, or microservices.
GET – Gathers information (Pulling all Coupon Codes)
PUT – Updates pieces of data (Updating Product pricing)
POST – Creates (Creating a new Product Category)
DELETE – (Deleting a blog post)
How Javascript works event loop stack and queue
The Event Loop has one simple job — to monitor the Call Stack and the Callback Queue. If the Call Stack is empty, the Event Loop will take the first event from the queue and will push it to the Call Stack, which effectively runs it. Such an iteration is called a tick in the Event Loop.
What is DOM
The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document
For example, the DOM specifies that the querySelectorAll method in this code snippet must return a list of all the

elements in the document:
const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first

element
// paragraphs[1] is the second

element, etc.
alert(paragraphs[0].nodeName);

Arguments and Parameters,Generator Functions

Sarmin Akter Dipty — Sat, 25 Dec 2021 13:23:15 +0000

Arguments and Parameters
In the following code block, you will create a function that returns the cube of a given number, defined as x:

The x variable in this example is a parameter—a named variable passed into a function. A parameter must always be contained in a variable and must never have a direct value.
Now take a look at this next code block, which calls the cube function you just created:

// Invoke cube function cube(10)
This will give the following output:
1000
In this case, 10 is an argument—a value passed to a function when it is invoked. Often the value will be contained in a variable as well, such as in this next example:

// A
ssign a number to a variable const number = 10 // Invoke cube function cube(number)
This will yield the same result:
1000
If you do not pass an argument to a function that expects one, the function will implicitly use undefined as the value:
// Invoke the cube function without passing an argument cube()
This will return:
NaN

Generator Functions

A generator function is a function that returns a Generator object, and is defined by the function keyword followed by an asterisk (*), as shown in the following:

// Generator function declaration function* generatorFunction() {}

Occasionally, you will see the asterisk next to the function name, as opposed to the function keyword, such as function generatorFunction(). This works the same, but function is a more widely accepted syntax.

Generator functions can also be defined in an expression, like regular functions:
// Generator function expression const generatorFunction = function* () {}

Position Sticky With CSS Grid, Conditional Border Radius In CSS, Custom Scrollbars In CSS

Sarmin Akter Dipty — Sat, 25 Dec 2021 06:20:00 +0000

CSS Blogs

Position Sticky With CSS Grid
Have I ever come across a case where the sticky position isn’t working as expected with a child of a grid container? A few days ago, I was helping youtube in fixing that exact problem and wanted to finally write about it.

HTML__:

CSS__:

 .wrapper {
display: grid;
grid-template-columns: 250px minmax(10px, 1fr);
grid-gap: 1rem;

}

Conditional Border Radius In CSS
We have a card component with a border-radius of 8px. When the card doesn’t have margin or is taking the full viewport width, we want to flip the border-radius to 0.

CSS__:

 @media (min-width: 700px) {
.card {
    border-radius: 8px;    
}

}

Custom Scrollbars In CSS

First, we need to define the size of the scrollbar. This can be the width for vertical scrollbars, and the height for horizontal ones.
CSS__:
.section::-webkit-scrollbar {
width: 10px;

}

CSS Scroll Snap
To create a scrolling container, here are the basic things that you will need:
Using the overflow with a value other than visible.A way to display the items next to each other inline.
HTML__:

Item 1
Item 2
Item 3
Item 4
Item 5

CSS__:
.section {
white-space: nowrap;
overflow-x: auto;
}