DEV Community: ekholil

Mysql database overview

ekholil — Tue, 28 Dec 2021 04:47:12 +0000

MySQL is an open-source relational database management system, typically used with PHP. But it can also be used with python, node and other languages. It is a database which is used for web based applications. It can be used in both small and large applications. Mysql called relational database management system (RDBMS)

Some features of mysql
It is fast and reliable.
It supports standard sql(structured query language)
Mysql is free to download and use.
Mysql is fully multithreaded.
Mysql works on different platforms.
It provides a transactional and non-transactional storage engine.
It can handle large applications.

Who uses mysql :
Mysql is the most popular web based database. Mysql used by
Large websites such as facebook, google, youtube, flickr etc.
Content management systems such as Wordpress, Drupal, Jumla etc.
A large number of web developers worldwide who uses mysql

How to use mysql:

If we want to use mysql it is necessary for us to have it installed whether it be on our local system or on a remote web host. However in order to connect to either we must firstly have an interface to use.
First we need to download mysql from this site : http://dev.mysql.com/downloads/.
After downloading mysql from their website we need to install it properly. The Installation process is simple.
Connecting to database :
After completing installation we need to connect with our database. For connect with mysql database open command prompt and write this following
Mysql [host] [port] username password database name
If everything is ok then mysql database will be connected. So explore the database and learn this amazing database so you can use this database in your dream project.

React Context API

ekholil — Tue, 28 Dec 2021 03:46:55 +0000

What is context api?

Reactjs is a powerful library for making user interface easily. It is the most popular JS library in this moment. When we make an application we have to work with many states or data. Context api allows us to pass down and use data or state whatever component we need in our react app without props. In other words, react context api allows us to share data across our components easily. React Context api provide us to manage complex state, nested state in a simpler and more effective way than using props.

Why use react context api?

A real world react application is going to need to share data or state between different components at different levels of react js hierarchy. They also need to share functions to execute different actions based on user interaction.

There are three main ways to achieve this :
Props: store state directly in the common ancestor component and pass it down as many components it needed, as props, until it reaches it target components. This is the easiest and simple way to share state or data between components. But the problem is when target component is very deep or very many then it is become so complex to pass down state through props. So it is not the proper war to share state in big or deep components.
Library: We can use a state management library such as Redux or Mobx. But this library comes with complexity and an extra learning curve that would not be suitable for some projects. This might be a good thing depending on project requirements. But the role is always to try to do the simplest thing first.
Context API: React context api store the state in a common ancestor component(Provider component) and access it from as many components as needed. Which can be nested at any depth under this ancestor. This is almost same as the props solution but difference is here any component can access the state in any context without props drilling.

How to use React Context API :

There are four steps to use context api in a react application.
Create context using createContext() method.
Wrap the ancestor component with created context using provider.
Put any value or state you like to share on context provider using value props.
Read this value from any component using context consumer

Conclusion
React context api makes our life easy. Now with the help of context api we can easily make react application.

CSS Position Property

ekholil — Sun, 26 Dec 2021 05:54:12 +0000

Position property is one of the most important things in css. To make an awesome layout we need to position our element properly. In this case, with the help of position property we can easily place our elements everywhere. Position property specifies the type of the position method for an element. It can be static, relative, fixed, absolute and sticky.
We will discuss each items clearly so that we can understand this

Position Static:

Html elements are by default positioned statically. Static positioned elements do not support top, bottom, right & and left properties.
An element positioned with static is not positioned in special way. It is positioned with documents normal flow.

Position relative:
When we set an elements position relative then it positioned relative to its normal position. Setting up a relatively positioned elements top, bottom, left and right adjust its position from normal position. Other elements do not adjust to fill its gaps.

Position fixed:
An element with position fixed always stays in the same place relative to its viewport. It always stays in the same place even when the page scrolls. We use top, bottom, right and left properties to position the element. A fixed element does not leave a gap in the page where it would normally have been located.

Position absolute:
When we specify an element's position with position: fixed; then it is positioned relative to the nearest positioned ancestor. If the element doesn’t have any ancestor then it is positioned relative to the document body. Position relative and position absolute are almost the same. Only difference is relative positioned relative to body and absolute positioned relative to its nearest ancestor.

Position Sticky:
An element positioned with sticky positioned based on users scroll. It is the combination of position:fixed and position relative depend on scroll position.