What is Redux?

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.

Why use it?

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.

How does Redux work?

There are three building parts: actions, store, and reducers.

Actions

Actions are events. With actions you send data from your…


What is Next.js?

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.

How to get started with Next.js?

Just enter

npx create-next-app

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.

What are the advantages of Next.js?

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.

Light DOM, Shadow DOM vs. Flattened DOM

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.

<custom-picture>
^^^^^^^^^^^^^^^^^^^^^^^^^^^
#shadow-root
___________________________

<!--Light DOM-->
<img src="https://path.to/a-kitten.png">
<cite>A Nice Kitten!</cite>
<!--Light DOM ends-->
</custom-picture>

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.

Not setting a position: fixed, relative, absolute or sticky for an element.

z-index requires an element’s positioning to be either fixed, relative, sticky or absolute.

Positioning Recap:

HTML elements are positioned static by default. In the following codepen, you will find all the positioning possibilities in CSS.

Stacking context

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.

Photo by Deleece Cook on Unsplash

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…


Photo by Freysteinn G. Jonsson on Unsplash

Hooks are a new addition in React 16.8.

They let you“ hook into” use state and other lifecycle features without writing a class.

Difference between class component and function components

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?

Center text

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…


Photo by Emma Louise Comerford on Unsplash

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?

I understood that npm and Yarn do the same thing. Here is my little research to this topic. npm and Yarn are package managers for JavaScript.

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…

Damaris Göbel

I like to do crazy things with CSS & JavaScript. My brain occasionally runs out of memory so I need to write down my thoughts.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store