DEV Community: Farzana Pomy

Top 50 System Design Terminologies You Should Know

Farzana Pomy — Sat, 28 Sep 2024 14:26:58 +0000

1. Scalability
Definition: A system can support increased load by adding resources.
Example: Add more servers to handle the increase in web traffic.

2. Load Balancer
Definition: Dividing the incoming network traffic among multiple servers so that no one server processes a large amount of load.
Example: Load balancing web traffic across multiple EC2 instances using the AWS Elastic Load Balancer(ELB) Service.

3. Microservices
Definition: It is an architectural pattern forcing the structuring of an application as a collection of loosely coupled services.
Example: Breaking down a monolithic application into independent services responsible for user management, processing payments, and sending notifications.

4. CAP Theorem
Definition: It states that at best, only two out of three guarantees can be gained in a distributed system: Consistency, Availability, and Partition Tolerance.
Example: When to Trade Off Consistency for Availability — And Vice Versa — in Distributed Database Design.

5. Sharding
Definition: It involves breaking down a large database into smaller pieces called shards for better management.
Example: Sharding a user database based on geographic region.

6. Latency
Definition: This gets defined as the time that it takes for data to travel from point A to point B.
Example: Measuring the delay involved in message delivery through a chat application.

7. Throughput
Definition: A measure of the quantity of data a system processes in some timeframe
Example: Requests processed by a web server in one second.

8. Cache
Definition: Any hardware or software component that stores data to obviate future requests for the same data, serving It quickly.
Example: Implementing Redis caching for repeated database queries.

9. Content Delivery Network (CDN)
Definition: A server system, geographically dispersed, that shows Web content to a user based on the geographical location from which he is accessing.
Example: Using Cloudflare CDN for faster web page loading.

10. REST API
Definition: a type of architectural style designed to build web services where data is accessed and manipulated using HTTP requests.
Example: Designing the Social Media API by REST(Representational State Transfer) principles.

11. GraphQL
Definition: It is a language designed to query data, so it is much more powerful, efficient, and flexible than REST.
Example: Using GraphQL to query user information in a single request.

12. ACID
Definition: A set of properties ensuring reliable processing of database transactions. The properties are Atomicity, Consistency, Isolation, and Durability.
Example: Ensuring that a banking transaction has ACID properties prevents corrupted data.

13. BASE
Definition: An alternative to ACID that emphasizes Availability and Partition tolerance over strict consistency. Available, Soft state, Eventually consistent system.
Example: Design of a highly available, eventually consistent NoSQL database.

14. NoSQL
Definition: A type of database designed to promote storage and retrieval of data modelled in ways other than the tabular relationships used in relational databases.
Example: Using MongoDB for a document-based data store.

15. SQL
Definition: It is the standard language for storing, manipulating, and retrieving data in relational databases.
Example: Writing SQL queries to get data back from a relational database.

16. Database Indexing
Definition: It is a data structure technique that allows quick searching and access to data from a database.
Example: Create indexing in the user ID column for search speed enhancement.

17. Replication
Definition: A process of copying and maintaining database objects in a multitude of databases that make up a distributed database system.
Example: It involves allowing a database to be highly available across different geographical locations using replication.

18. Failover
Definition: A backup operational mode in which system component functions are taken over by other system components in case of loss of a primary system component.
Example: Built-in automatic failovers to standby servers in the event of a server failure of your internet applications.

19. API Gateway
Definition: A server that sits at the front of an API, receiving API requests, applying throttling and security policies, and then forwarding them to back-end services.
Example: Using AWS API Gateway to manage APIs.

20. Service Mesh
Definition: A dedicated infrastructure layer for facilitating service-to-service communications between microservices.
Example: Integrating Istio as a service mesh for the management of microservice interactions.

21. Serverless Computing
Definition: A Cloud computing implementation that “dynamically allows for the allotment of machine resources by the cloud provider”.
Example: Run backend code without any server provisioning at your end using AWS Lambda.

22. Event-Driven Architecture
Definition: A software architecture paradigm encouraging the generation, detection, and consumption of, and the reaction to, events in general.
Example: Design a system with event communications between microservices using Apache Kafka.

23. Monolithic Architecture
Definition: A software architecture wherein all the elements are fitted into a single application and run as a single service.
Example: Old traditional enterprise applications built as a single, large unit.

24. Distributed Systems
Definition: A model wherein components located on networked computers communicate with each other and coordinate their actions by passing messages.
Example: Designing a distributed file system like Hadoop.

25. Message Queue
Definition: This method allows asynchronous, service-to-service communication in both serverless and microservices architectures.
Example: Using RabbitMQ to queue messages between services.

26. Pub/Sub Model
Definition: A messaging pattern in which senders (publishers) publish messages so abstractly that any one of them can end up being accessed by recipients without the sender having to even know the identity of the destination receivers (subscribers).
Example: A notification system that uses Google Cloud Pub/Sub.

27. Data Partitioning
Definition: Division of a database into smaller, manageable parts.
Example: Partitioning a table in a database by date to allow super-fast query execution.

28. Horizontal Scaling
Definition: Increasing the capacity by adding more machines or nodes within a system.
Example: Adding more web servers to handle an increasing volume of user traffic.

29. Vertical Scaling
Definition: Upgrading an already existing machine with more power in the form of a CPU or RAM.
Example: Upgrading the RAM of a server so that it can handle more requests all at once.

30. Rate Limiting
Definition: It means controlling the rate of traffic that the network interface controller is sending or receiving.
Example: Throttling an API to prevent abusive behavior.

31. Circuit Breaker Pattern
Definition: A design pattern used in modern software development, applied to detect failures and encapsulate the logic of preventing a failure from constantly recurring.
Example: Handling failed remote service calls using a circuit breaker in a microservice architecture.

32. Data Consistency
Definition: Ensuring that data is the same across multiple instances and is not corrupted.
Example: Maintaining the consistency of user data through multiple replicas of a database.

33. Eventual Consistency
Definition: A model of consistency used in distributed computing toward the goal of high availability, stating that updates to a system will eventually propagate and be reflected by all nodes.
Example: Amazon DynamoDB provides an eventually consistent model for the read operation.

34. Strong Consistency
Definition: A consistency model ensuring every read gets the most recent write on a given unit of data.
Example: Using strong consistency in a financial transaction system.

35. Containerization
Definition: Basically, this is whenever an application and its dependencies are encapsulated into a container to be run on any computational environment.
Example: Using Docker to containerize the applications for deployment in various environments such as dev, test, prod etc.

36. Kubernetes
Definition: An open-source platform that automates the process of application container deployment, scaling, and operation.
Example: Run and deploy containerized applications using Kubernetes.

37. Autoscaling
Definition: Automatically adjusting the number of computational resources based on the user load.
Example: Utilizing AWS EC2 Auto Scaling feature to dynamically adjust the number of instances.

38. Multi-Tenancy
Definition: Architecture where a single instance of a software application serves multiple consumers/customers.
Example: SaaS applications, such as Salesforce, utilize multi-tenancy in their service provision toward their different categories of customers.

39. Load Shedding
Definition: Backing off some demands or degrading services to maintain the health of the overall system under high load.
Example: This will turn off all non-essential services during times of peak traffic.

40. Idempotence
Definition: A property for some mathematical and computer-science operations stating that it has the same effect if repeated more times than once.
Example: An HTTP DELETE request is idempotent.

41. Quorum
Definition: The minimum number of votes needed to commit a distributed transaction.
Example: Basically, quorum-based replication ensures that consistency exists in the distributed database.

42. Orchestration
Definition: A pattern of service interaction where a central coordinator controls the interaction between services.
Example: Using a workflow engine to manage some multi-step business process.

43. Choreography
Definition: A service interaction pattern in which every service is self-contained and interacts with others through events; there will not be any coordinator or orchestrator.
Example: Microservices communicating through an event bus in a choreography pattern.

44. Service Registry
Definition: A database that keeps track of instances of microservices.
Example: Using the Eureka service registry in a microservice architecture.

45. API Rate Limiting
Definition: It means controlling how many requests a client can make against an API within a certain timeframe.
Example: Limiting requests to an API to 100 per minute to prevent abuse.

46. Data Warehouse
Definition: A system that helps in the generation of reports and business data analytics; the hub of Business Intelligence.
Example: Amazon Redshift can be implemented in data warehousing.

47. Data Lake
Definition: A system or repository where data is kept in native/raw format, generally as object blobs or files.
Example: Petabyte scaling for storing and managing structured and unstructured data in a data lake.

48. OLAP
Definition: Online Analytical Processing : The software category that allows the analysis of data kept in a database.
Example: Use of the OLAP cubes for pointy analytical and arbitrary queries.

49. OLTP
Definition: Online Transaction Processing: a class of systems that manage transaction-oriented applications.
Example: Using OLTP systems for transaction data management, as in banking systems, etc.

50. Big Data
Definition: Large, complex data sets that cannot be efficiently managed by conventional data-processing software in the best of cases.
Example: Analyzing social media interactions to predict fashion trends.

Thanks for reading! Please share this guide with others if you, in any way, found it useful so they can also do these sets of exercises.

copied

Frontend Is Easy

Farzana Pomy — Sun, 07 Jul 2024 18:33:51 +0000

If you think a frontend is easy. Then these 8 points are for you—

Take Google Meet: Despite its simple UI, behind the scenes, there’s a lot of video/audio frames processing, decoding, and chunking going on.

Take Google Sheets: A simple grid box UI, but there goes a tons of graphical operations on Canvas, layout calculations, and performant rendering.

Take Discord: With simple video elements, there’s a lot of network-level work with data streaming on Sockets and WebRTC (peer-to-peer)

Take Canva: Purely UI-heavy application, handling tons of UI elements, design movements and calculations, and canvas operations.

Take Photoshop: One of the most complex applications, leveraged Web Assembly to enter the web space, handles image processing operations and beyond.

Take Pinterest: UI / UX friendly application, with lots of asset optimizations and ensuring high accessibility.

Take Mega: Makes file transfers look so smooth, a highly I/O heavy application, handling file processing, chunking, and efficient data transfer techniques.

Take TeamViewer: Controlling remote devices seamlessly on the cloud in real time, a lot of audio, video, image streaming, decoding, rendering, and simulation of keyboard & mouse work. Latency is a big factor here.

Thanks all for today. :D

Become an SEO expert

Farzana Pomy — Sun, 30 Oct 2022 04:49:21 +0000

Become an SEO expert with expert Khalid Farhan
Learn with live projects.
To know about whole course you can visit the below link.
Click Here

Let's Explore React-Chat-Engine

Farzana Pomy — Sun, 24 Apr 2022 20:43:34 +0000

Basically Chat Engine is a free serverless chat API.In this blog we will learn how to use this amazing Chat Engine is a free chat API. have three steps and take about five minutes…

To build this api first we need to build a ear with
Let's build a react-project

npx create-react-app chat-engine-tutorial cd chat-engine-tutorial yarn run start

if you run this code then congratulations you

The next step is :
This next step doesn’t need code.
Let’s go to Chat Engine and get our chat API key.
Register at chatengine.io
Create a Project, I’ll call mine “Tutorial”
Create your first User or two, I’ll call my users “Adam” and “Eve”
You’ll need the Public Key and the Username + Password of a user

The last step is Add the Chat API:
Let’s connect this chat API to your React project.
Take your favourite IDE and open the chat-engine-tutorial project.
Open the src/App.js file, and replace it with the following code:

import React from 'react'; import { ChatEngine } from 'react-chat-engine'; function App() { return ( <ChatEngine publicKey='00000000-0000-0000-0000-000000000000' userName='adam' userPassword='pass1234' /> ); } export default App;

Lastly you can customize your application with reading this article Go Doc

Redux Toolkit

Farzana Pomy — Fri, 15 Apr 2022 14:22:37 +0000

Recently I learned the Redux toolkit. Today I share with you guys what I learn in the redux toolkit.

At first if i explained what is redux toolkit, i want to explain this from their documentation:
Redux is a predictable state container for JavaScript apps.Which is help us write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

*The purpose of Redux Toolkit *
The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:

"Configuring a Redux store is too complicated"
"I have to add a lot of packages to get Redux to do anything useful"
"Redux requires too much boilerplate code"

What redux actually does our website

It's Make our website more Simple: includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.
It can Makes our application Opinionated & Powerful:
Provides good defaults for store setup out of the box, and includes the most commonly used Redux addons built-in.
It more Effective so you can do more work with less code.

Explore react some topics in react

Farzana Pomy — Sun, 26 Dec 2021 18:02:01 +0000

PropTypes: propTypes means in the component we can write what type of props is this. As a data type is a string, number, boolean, or anything we can pass these props types.

What is the difference between State-props:
Props only send the value. It is read-only. can not change the value by props. And we can send anything like hardcoded value, dynamic value, object, function.

State
Props
State can get initial value from parent component
Props also can get initial values from the parent component.
State can not change by parent component
Props can be changed by parent component
State can set default value in the component.
Props also can set default values in components.
State cab change inside the component
Props can not be changed inside component.
State can not be changed in child component
Props can be changed in the child component.

Explain the Component Lifecycle.

=> Lifecycle method happened three ways
Mounting: In mounting, we maintain some order. These are
contractor()
Static getDerivedStateFromPorps()
render()
componentDivMount()

Updating: In updating also maintain some orders. there are
Static getDerivedStateFromPorps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDivUpdate()

Unmounting: when the component deletes from the DOM. Then it is called
componentWllUnmount()

What is hooks in react? Hooks is create a connection with our application to react. We use some hooks: useState: this hook is used to update any value. if anything changes or needs to update In the application useState hooks can update this. useEffect: by this hook, we can load data or fetch data in UI. it’s also like an impure function.if Loaded data is not loaded from the server it can not be rendered.

There are more hooks like this that are building a connection with code and rendering in UI.

Virtual DOM and diffing- algorithm? Virtual DOM: virtual DOM is most like real DOM.in real DOM we trigger any element by methods like getElementById or getElementByClassName and then change the code. Sometimes if needed to change somewhere then all structures should be changed this was very time-consuming and most difficult. But now VIrtual DOM is made our life easier. In virtual DOM initially set a DOM. when we change code then automatically create a new DOM and compare the previous DOM and then update the DOM.this this is created a Tree which is rendered from the root and his parent is app.js. All component is stored in app.js and finally rendered in UI by root. This tree most looks like real DOM. All processes are happened by diff algorithms. It means when anything changes in code then it is compared with virtual DOM and then they create a Diff algorithm. and then reference change or update in UI.

Explore react some topics in react:

Farzana Pomy — Sun, 26 Dec 2021 12:53:15 +0000

PropTypes: propTypes means in the component we can write what type of props is this. As a data type is a string, number, boolean, or anything we can pass these props types.

Explain the Component Lifecycle.

=> Lifecycle method happened three ways
Mounting: In mounting, we maintain some order. These are
contractor()
Static getDerivedStateFromPorps()
render()
componentDivMount()

Updating: In updating also maintain some orders. there are
Static getDerivedStateFromPorps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDivUpdate()

Unmounting: when the component deletes from the DOM. Then it is called
componentWllUnmount()

What is hooks in react? Hooks is create a connection with our application to react. We use some hooks: useState: this hook is used to update any value. if anything changes or needs to update In the application useState hooks can update this. useEffect: by this hook, we can load data or fetch data in UI. it’s also like an impure function.if Loaded data is not loaded from the server it can not be rendered.

There are more hooks like this that are building a connection with code and rendering in UI.

Virtual DOM and diffing- algorithm? Virtual DOM: virtual DOM is most like real DOM.in real DOM we trigger any element by methods like getElementById or getElementByClassName and then change the code. Sometimes if needed to change somewhere then all structures should be changed this was very time-consuming and most difficult. But now VIrtual DOM is made our life easier. In virtual DOM initially set a DOM. when we change code then automatically create a new DOM and compare the previous DOM and then update the DOM.this this is created a Tree which is rendered from the root and his parent is app.js. All component is stored in app.js and finally rendered in UI by root. This tree most looks like real DOM. All processes are happened by diff algorithms. It means when anything changes in code then it is compared with virtual DOM and then they create a Diff algorithm. and then reference change or update in UI.

We know about some important topics from javascript :

Farzana Pomy — Sat, 25 Dec 2021 20:37:11 +0000

Truthy and Falsy values, Null Vs Undefined, double equal (==) vs triple equal (===), implicit conversion.

In javascript truthy value is when input value truthy then returns true as a boolean context. So when a value returns true now we know about that :
If a value is true then return true.
Any string is truthy
Any positive and negative numbers are truthy
Array and object are truthy

So which values are falsy?

If the input is false then this value returns false
Number 0 returns false
If any value is undefined, NULL and NAN then these imputed output values will be false

Scope, block scope, window, global variable, global scope.

Scope: Scope is basically referred to the javascript current context. We can say
it like a box. There are some types of explanations about scopes:
Block Scope: Block Scope in the curly bracket. As we use a switch, if-else loops
expression in the curly bracket.it’s called Block scope.
Global Scope: Global scope means that it declare outside in block scope. Which is
used anywhere in the program.

Window: On the web page, the full viewport on the interface is called a window. Which is contains DOM. we can trigger any id or class using window.document.(which is expected) and can change or manipulate these properties.in javascript, everything is stored in the window.

Global Variable: Global variable declared globally which we use from anywhere.

Closure and Encapsulation:
Closure: in closure return a function in the parent function. Child function store his previous reference and when we can this parent function then child function executes by his previous reference.
In summary, closure is a function is returns a new child function, those functions have created a closure or encapsulation among them. And when we call this function again and again it is executed from his previous stored values.

“this” Keyword:
This means this is. It’s like which context is executed this the “this”. When we globally check this keyword returns the full window because this keyword executes from full context. Some properties of the ‘This’ keyword:
If any function call individually then this keyword executes from the window.
In the arrow function, this keyword is executed from the window.
But regular functions can hold this keyword. which is executed from his context.
We can simply say that this is executed context. From where the context is executed this is the main part.

How Javascript works event loop stack and queue (How javascript code executes)
Basically, javascript is run by call stack. Execute the function that gets first and this function will be stored in stack first. And then next fucntion will be executed like this. Which function’s execution is over this is removed from the stack. All over the process runs synchronously. In that case, if a function takes more time to run then all process is waiting. For this reason, the asynchronous way is coming up with javascript. It means when any function takes more time to run then it’s not pending this process continues. And when that function run successfully this will be executed.

So, how work in an asynchronous way?
Which function takes time to execute this goes into the event loop.it’s like a queue. queue means first in first out. So the function is coming first this will be executed first. Which function comes here first will go away in the stack. Stack is means last in first out.
Bringing something queue to stack it’s called an event loop. basically, it’s working with the event loop.

Explore some basic concepts of javascript

Farzana Pomy — Fri, 24 Dec 2021 20:44:10 +0000

What is javascript :
Javascript is a high-level interpreted language.it is usually used on the web. By
javascript change HTML and CSS. It also can update calculate and manipulate.

Today we explore javascript some data types and all types of variables.

String: String type data store and represent textual data. And we can write this inside of single or double quotes.
Some methods of string:
charAt: suppose we have a text and we file out that in any individual index which character is stored in this case we use chartAt method.
Concat: To add to the string we use this method.
Includes: if we want to check that string or number in include in array or text then we can find this using by includes method. It returns true if find this which value we find and return false if the value is not found.
endsWith: is any string value end with any keyword we can find this using by endsWith method.it returns true or false. We can verify text and length.
indexOf: A text or value store which index we can find this index value using indexOf method.
lastIndexOf: It returns the string position
replace: this method is used to replace a new string in the previous string
Slice: slice is used to cut specific text or items
Split: by split method divide a string as order and it returns an array
startsWith: we can conditionally check a string start with which word or letter. And it is return boolean value.
toLowercase and toUppercase: toLowercase used for uppercase format convert to lower.and touppercase is convert to lower case to upper.
Trim: trim method returns a new string with unexpected white space.
trimStart and trimEnd: trimStart method remove unexpected white space in start and trim end remove the end white space.

Now we explore javascript number types methods

isNaN: NaN stands for not a number. If any value wants to return number type but the value is not number then return NaN. and isNaN method is checking the value number or not. And it returns true or false.
parseFloat, parseInt: when the value is a string or anything but The expected value return value is float or int type we can convert this value parseFloat or parseInt.Or we can use MATH or Number type to convert as a Number type value.

Abs, ceil, floor, min, max, random, round, sqrt
Abs: It returns the absolute value.
Ceil: A float number will be the immediate round greatest value.
Floor: A float value return immediate less round value
Min, Max: find a maximum and minimum value between different values
Round: Round is also like ceil method.
Sqrt: This method return the squirt root values

Now we explore array methods :

Concat: Concat method used for add or sum tow array.
Find and filter: When we find any specific element in an array then we can use find the method it’s returned value and if not found then return undefined. And filter method uses almost the same as the find method. And If found the value then return an array and if not found then return an empty array.
findIndex: it checks the condition and returns the index value if not found then return -1
forEach: it is not return anything. If not found anything then returns undefined
indexOf: it returns the index value in an array
Join: this method is used for joining array elements.
Map: map creates a new array and returns this array.

lastaIndexOf: this method returns the last index and if not found it is returned -1.
Pop: the pop method used for deleting any value from the end of an array.
Push: by push, method add any element in the array.
Reduce:
Reverse: using this method can reverse all elements in an array.
Shift: using the shift method we can remove any element from an array from the start.
Slice: slice method can cut some elements from an array. this is taken start and end value.
Sort: sort method can sort the array in ascending or descending order.
Splice: using this method insert any value in any index.
Unshift: this method adds any value in the array from start.

Now we know try-catch

To Handling errors we use try-catch
In a try statement, we write our code and the catch statement can catch any error in code.

Now explore ES6:

Let's know about var, let, and const:

we can declare a variable with var. In var, the variable can be hoisting so in ES6 let and const. In let we can reassign any value if we needed and in const, we assign a value only for one time. We can not change or reassign next.

Functions with Default Parameter Values:
Sometimes functions take two or more arguments. If the user does not give one parameter it means if in function missing any parameter then we can explicitly give a default value as a parameter. it‘s called the default parameter.

template string:
Before ES6 advent we can not write multiple line strings. And it was too much difficult to implement anything as dynamical. But now using template literal we can use backticks () can write any multiple stings or it’s very easy to implement any dynamic value.

The Spread Operator:
The spread operator is used in the array. if we want to previous array element copy in the new array we can use the spread operator. All elements in the array will be copied into a new array.

Destructuring:
Destructuring can be used in an array or object.
`let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10`
This code implements using destructuring. it means that we have some variables and we
don’t need to assign any value individually. We can easily assign any value in an array or
Object.

Arrow Functions:
=> This is the sign of the arrow function. we can store a function in a variable

Syntex:
(param1, param2, ..., paramN) => { expression }

In parentheses, we pass function parameter and curly bracket we write our code

expression.

That's all Today.Hope you enjoy it.Thank you

This article is all about media queries:

Farzana Pomy — Thu, 23 Dec 2021 19:53:06 +0000

Media queries are used to modify our website based on devices.it means media queries are used for responsive our web page by CSS properties as screen resolution and viewport width. We responsive a web page in plain or vanilla CSS by media queries.

Some styles of using media queries on the webpage

Using @media to conditionally apply CSS properties.
To target specific style, like, source, and HTML element by media=attribute.
To test and monitor media status Window.matchMedia() and mediaQueryList.addlistener() in javascript method.

** Breakpoints: **

   When we make a website it is based on desktop or laptop. But this website is not looking

Good. Basically, it a webpage is created with rows and columns. For this reason in
media queries make breakpoint which makes the website more perfect on any
device. initially, there are three types of breakpoints those are :
desktop
Tablet
Mobile

Generally, Set breakpoint depends on these. Firstly we use minimum px means
min-width like 688px and below for mobile. Another breakpoint is 992 for laptops. And
large devices like desktop big monitors are above 922px.
The best practice is always to make a website mobile-first before making a website for desktop or any other device.

** Orientation: **

The orientations are can two types as like:
Portrait and Landscape

Now we discuss how to actually use media query in the CSS style sheet

There is some syntax on how to to use media queries. This is very case-sensitive.

Some to use media queries:

        1.Media types :

Media types define device categories. Like as All, Print, Screen, and
speech.
Ex: @media print { …… } or @media screen print { ....... }
. 2. Media feature: media features define the characteristics of user. And Output Or
environment.
Ex: @media { hover: hover } or @media (mex-width: 922px )

        3. Logical operator: used operators and, not, only for use logical implementation.

We can also use media features using logical operators and media types. It seems to hear that we can use media queries combined. For example : @media screen and (min-width: 688px) and (orientation: landscape) { ….. }

In media queries, we use all CSS styles and properties. For example, an element is invisible but we can hide the same element in small devices which is not the most important. Also can change the font size or any size of elements.

Finally, I would like to say something like summary media queries. Media queries are the most important thing for designing.This is very interesting part for web designers. That’s all today. I hope you will enjoy it.
Thank you.