Hey there,
I’ve been playing around with web components lately, and It's evident that Shadow DOM is an important aspect of web components, and this article aims to explain all there is to the Shadow DOM, so let’s get to it.👇🏻
First, before we jump into the details let’s understand the fundamentals:
First What is the Document Object Model (DOM) ⌛️:
According to MDN:
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.
The DOM is the object-oriented representation of…
Lately, there has been a lot of buzzes and hype on web components, but not everyone knows exactly what it is, how it works or why it’s even needed, that’s going to change soon because we are going to be taking a peek 🤓.
🤔 What are Web Components?
Well according to MDN Web Docs.
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
But I would like to simplify that:
Web Components allows you to create components or…
We will be setting up a dockerized react app that will provide us with a consistent environment from development (with hot reloading enabled) to production.
System Requirements (I assume you are fairly familiar with these technologies):
First we are going to create our react app, using this command:
npx create-react-app dockerized-react-appNote: if you are using docker-machine on windows your project need to be under C:/Users/user/…
Let’s Setup the Dev Environment:
Now Let’s setup the development docker container for our react-app. Create the following files at the root of your project.
create DockerFile
create docker-compose.yml
create dev.yml
create .dockerignore
Marvin Tunji-ola
Frontend Developer, Lover of all things JS, ML Novice.
