The array is one of the most useful concepts in programming with a lot of native methods which most of the time remembering is very hard even for experienced developers. that's why I decided to write this post and explain and introduce the methods I am using in my daily coding life as a developer.

First of all, what is Array?

An array is a single variable that is used to store different elements.

How should I know a variable is an array?

it’s simple Let's take a look at the below image.

Some days ago, I started to work on an application that wanted to use Strapi in the back-end and Next.js in the front-end. As you may have thought yet, it will be super easy and straight forward but the challenge started when the GraphQL endpoint was added to the back-end API, and I had to get the data from GraphQL in Next.js.

I searched for a third-party library for data fetching through GraphQL endpoint and found Apollo-client the best choice among others.

In this tutorial, I am going to use the below technologies all together to build a simple blog…

If you have good controls over the input and output of data in your software, it means you designed it well.

In JavaScript one of the most important data types is Object. Sometimes we want to have more control over certain objects, such as being able to listen to who is reading the object property or updating.

One of the best ways to control an object is with a Proxy. You can do a lot of fun things with Proxies, which we will explain in this article.

What is the proxy?

A proxy is an object which can control another object like simple operation…

Packages we will be using

Konva is one of the best HTML5 2d Canvas JS libraries for desktop and mobile applications you can do a lot with this they have very good documentation and react wrapper for this JavaScript library is available too.

Images. this one is a little bit limit but depends on your imagination you can use it the way you want.

tui.image-editor is a full-featured image editor using HTML5 Canvas. It’s easy to use and provides powerful filters. with a wrapper for the React project.

First, let’s initiate a react project and install all libraries we need.

npx create-react-app custom-tabbed-card

Then we need to install a couple of libraries like Styled-Component, polish:

yarn add styled-components polish

To make styled component works you need to add the below code to the package.json:

"resolutions": {
    "styled-components": "^5"
 }

then we are ready to start for a start let’s clean up the app.js and create a first styled component called pageContainer and Tabs wrapper.

PageContainer will center our tabs in the center of the page and TabsWrapper wrapping our tabs in the container with a size of 320px…

What the hack is the Server Component?

Oh yeah, It is a Scary topic, to be honest personally I think this can change the entire React ecosystem and the way we are thinking about the implementation of the framework. somehow we are mixing frontend with server and our React components have access to the database or server directly.

Regarding the React team Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.

let us highlight some of the server component's abilities and behaviours.

• Server Components run only on the…

Many times I search for a good example or carousel boilerplate to use in my projects. Today I want to show you how to make a perfect one with React and styled-component.

For those who do not know about React. React is a JavaScript library for building user interfaces regarding their website explaining

styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS using a technique called CSS-in-JS. a simple version of it you can write CSS in a javascript file.

…

JS Tip #1

I know there is a lot of different ways to make a unique object list

but trust me this is a very fast way and simple way to do it

yeah, what the hack what is the Set :)

don't worry I’ll cover that too for you

regarding Mozilla official docs Set is an object that lets you store unique values of any type, whether primitive values or object references.

set is introduced with ES6 (ES2015)

you can find more about set with below links

https://alligator.io/js/sets-introduction/