Redux is a Predictable State Container for JS Apps. It is mostly used as a state management tool with React. The state of your app is kept in a store and each component can access any state that is needed.
If you still don’t know if you need redux, you won’t need it. If your app gets bigger and managing app state becomes more of a pain, and you are looking for making it easy and simple, then you need redux.
There are three building parts: actions, store, and reducers.
Actions are events. With actions you send data from your…
Next.js is an open-source React framework created by Vercel that enables functionality such as server-side rendering and generating static websites for React based web applications.
in the terminal and the automatic settings will be installed.
If you are going to use typescript, write:
npx create-next-app –typescript
After complete installation start the development server by writing
npm run dev
Then the app will open on localhost. Try to edit the index.js file in your pages folder and see the results on your browser.
Image Optimization: To be fair the image component of Next.js is not as intuitive…
The TypeError object represents an error when an operation could not be performed, typically (but not exclusively) when a value is not of the expected type.
TypeError is thrown when an operand or argument passed to a function is incompatible with the type expected by that operator or function.
This error occurs when you read a property or call a method of an undefined object.
When you run this code, you will get this message in browser:
Please read my first story about Shadow DOM if you are not familiar with Shadow DOM.
Shadow DOM enables local scoping for HTML & CSS.
Let’s explain the terminology
A Light DOM is the set of DOM elements a user of your component writes between the opening and closing tags. This DOM lives outside the component’s shadow DOM. It is the element’s actual children. In this example, the image and cite are the elements of the Light DOM.
<cite>A Nice Kitten!</cite>
<!--Light DOM ends-->
The Shadow DOM is the DOM a…
The z-index property define the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
z-index requires an element’s positioning to be either fixed, relative, sticky or absolute.
HTML elements are positioned static by default. In the following codepen, you will find all the positioning possibilities in CSS.
What you already know is that an element with a higher z-index gets placed above elements with lower z-indexes. …
What is the Shadow DOM?
The Shadow DOM is a “DOM within a DOM”. It is an isolated DOM tree with its own elements and styles, completed isolated from the main DOM.
With Shadow DOM you can specify CSS style to a specific DOM subtree and isolate that subtree from the rest.
What is the DOM again?
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a web page. In other words, the browser creates a DOM of a webpage when the page is loaded. …
How browsers resolve competing style
Have you looked at a developer tools in the style and wonder why so much style is crossed out and not applied? I definitely wondered.
CSS stands for Cascading Style Sheets. It occurred to me a lot that my CSS didn’t work and I was tempted to just throw a !important after my CSS style to get it been applied.
The CSS Cascade is the way our browsers resolve competing CSS declarations.
Every time you write a CSS declaration, it will enter the CSS Cascade, which will determine whether or not it will end up…
Hooks are a new addition in React 16.8.
They let you“ hook into” use state and other lifecycle features without writing a class.
With class components, we tie updates to specific lifecycle events.
In a function component, we instead use the useEffect hook to run code during the major lifecycle events.
Let’s look at an example to see what the difference is.
Imagine you have a computationally expensive function that returns a filtered dataset based on a specified dateRange. …
Centering anything in CSS seem to be like a mystery game. I usually write CSS and look at the outcome and at some attempts it works.
First of all, you have to ask yourself what do you want to center?
In case of text, just write text-align: center
Center a block-level element
Centering more than text, a block or an image
You are setting margin-left and margin-right to auto. It has to have a set width, otherwise it would be full width and wouldn’t need centering.
Center a few block-level elements
For centering a few block-level…
I started coding in 2020 and used npm only. I had a few co-workers who seemed to be all using yarn and then I asked myself, why and what is the difference and what should I use in the future?
npm (short for Node Package Manager) is the default package that is automatically installed whenever you install Node.js on your system.
Yarn was developed by Facebook and tried to improve performance and security shortcomings…