DEV Community: SAGAR SATAPATHY

Introducing SafeMate — Your AI‑Powered Safety & Wellness Companion (Launching Soon)

SAGAR SATAPATHY — Sun, 06 Jul 2025 09:18:53 +0000

TL;DR – SafeMate fuses real‑time personal‑safety tech with emotional‑wellness AI.

Two modes (🛡 Safe Walk & ❤️ HeartMate) keep you protected and supported, while a gamified XP system builds healthy habits.

Public beta opening soon – join the wait‑list at getsafemate.store.

🧠 Why We Built SafeMate

Personal‑safety apps are everywhere, but they’re mostly reactive panic buttons.

Mental‑health bots exist too, but they ignore situational danger.

We set out to merge the two worlds after hearing countless stories of:

Students crossing empty campuses 🌙
Women (and men) feeling uneasy on late‑night walks 🚶‍♀️
Healthcare workers leaving shifts in dim parking lots 🏥
Anyone fighting loneliness or anxiety in silence 🫂

Our question:

“What if technology could be a **guardian* and a companion at the exact same time?”*

✨ Core Value Proposition

Mode	What It Delivers	Tech Under the Hood
🛡 Safe Walk	Real‑time GPS, AI check‑ins, SOS alerts (Telegram), route safety scoring, geofenced safe‑zones	Gemini 2.5 Flash • LiveKit + Tavus • Deepgram (STT) • ElevenLabs (TTS)
❤️ HeartMate	Emotional chat, mood tracking, guided breathing & meditation, calming sound‑scapes, face‑to‑face AI video	Gemini 2.5 Flash • Tavus avatars • Supabase Edge Functions
🎮 Gamification	XP, levels, streaks, shareable achievement cards, analytics dashboard	React 18 • Tailwind • Supabase RLS

🔥 Sneak‑Peek Screens

1 — Dashboard & Quick Actions

2 — Safe Walk Controls

3 — HeartMate Session (Chat + Voice)

4 — Analytics & XP Progress

5 — Achievements & Shareable Card

🛠 Tech Stack

Layer	Stack
Frontend	React 18 + TypeScript • Vite • Tailwind CSS • Ace UI • Framer Motion
Backend	Supabase (Auth, Postgres RLS, Edge Functions) • Telegram Bot API
AI & Realtime	Gemini 2.5 Flash • LiveKit • Tavus • Deepgram • ElevenLabs
Dev Ops/Deploy	Vercel (web) • Netlify preview channels • Supabase hosting

Smart Fallbacks – If any AI service becomes unavailable, SafeMate automatically downgrades to the next best option so users always have an active companion.

🧩 High‑Level Architecture

SafeMate is designed with a modular, privacy-first architecture to handle real-time audio/video safety interactions and intelligent emotional support. We combine Supabase for authentication and backend services, LiveKit and Tavus for streaming and avatars, and several cutting-edge AI APIs orchestrated via edge functions.

Below is a visual representation of our system architecture:

🔧 Key Components

🧑‍💻 Client (Frontend)

React 18 + Tailwind + Ace UI: For blazing-fast, mobile-first interfaces with clean accessibility.
LiveKit: WebRTC for low-latency, real-time voice/video communication.
Tavus: Powers AI video avatar rendering for emotional support.

☁️ Backend

Supabase:
- Authentication (email/password, RLS)
- PostgreSQL database with row-level security
- Edge Functions (for serverless orchestration)
Supabase Edge Functions:
- Connect to various AI APIs (Gemini, ElevenLabs, Deepgram)
- Validate requests and fallback routing
PostgreSQL:
- Stores user safety preferences, emergency contacts, check-in data

🧠 AI Services

Gemini 2.5 Flash: Empathetic and real-time conversational logic for HeartMate.
ElevenLabs: Converts AI messages to lifelike, comforting voice audio.
Deepgram: Converts live user speech to text for commands and check-ins.

🚨 Emergency Handling

Telegram Bot API: Triggers SOS messages to trusted contacts instantly, even if the app is closed or backgrounded.
Customizable Emergency Modes: Silent alerts, geofence triggers, and multi-channel notifications.

🧠 Smart AI Orchestration

All AI APIs are routed through Supabase Edge Functions that:

Check service availability
Auto-fallback to alternatives if any service is down
Reduce latency by co-locating logic near the user (edge computing)

🔐 Privacy & Security Highlights

Row-Level Security on all user data
No hardcoded API keys — all managed via .env and serverless edge calls
All user preferences and emergency contacts scoped to authenticated sessions
Encryption and role-based access control (RBAC) for sensitive interactions

This architecture allows SafeMate to scale securely while maintaining a deeply personal, AI-powered experience for users during their most vulnerable moments.

🚨 Emergency Response Engine

One of the most critical parts of SafeMate is its emergency engine, which ensures that help is just a tap away — even in the worst-case scenarios.

⚙️ Telegram Integration (Offline SOS)

When users press the SOS button:

A secure Edge Function triggers from Supabase
It sends an emergency message to the user’s trusted contacts via Telegram
Includes:
- Real-time location
- Time of alert
- User identifier
- Emergency type (e.g., panic tap, fall detected, or geofence breach)

This ensures that even if the app is backgrounded or the user has weak internet, notifications are reliably delivered.

🎮 Gamified Safety & Emotional Wellness

To encourage long-term engagement and build safety habits, SafeMate features a gamification layer that blends purpose with motivation:

🏆 Features:

XP System: Gain experience for completing walks, check-ins, and daily wellness sessions
Achievement Badges: Unlockable awards for milestones (first walk, 7-day streak, etc.)
Daily Streaks: Encourages consistency with check-ins and reflection activities
Leaderboard (Coming Soon): Track your progress with friends or community members

All elements are built using local state (Phase 2), with support for syncing to Supabase in later phases.

📈 Analytics & Insights

SafeMate includes a powerful insights dashboard to help users visualize their physical and emotional safety patterns.

📊 Features:

Mood trendline (based on check-ins and HeartMate feedback)
Safety event timeline (SOS events, location alerts)
Check-in frequency and completion history
Achievement and XP tracker

These insights help users better understand their habits, triggers, and improvements over time.

🧠 What We Learned

This project taught our team more than we ever expected:

AI-Oriented Architecture: We learned to orchestrate multiple AI services behind a unified interface.
Supabase Mastery: From RLS to Edge Functions, Supabase enabled us to build fast and secure without worrying about DevOps.
Mobile Audio Workarounds: We implemented dynamic handlers to trigger TTS/audio after user gestures (overcoming autoplay limits).
Accessible UX for High-Stress: We designed every interaction to be accessible under panic or stress — bold buttons, keyboard nav, voice triggers.
Fallback-First AI Systems: We introduced a smart detection mechanism to select the best available service automatically.
Gamification with Purpose: Unlike novelty-based rewards, our gamification system encourages real-world safety engagement.

🔮 What’s Next?

We’re just getting started. Here’s what’s coming:

📱 Mobile App Launch: iOS & Android with offline-mode and wearable integration
🧑‍🤝‍🧑 Trusted Network: Friends and family mutual monitoring with presence indicators
🧘 Wellness Expansion: More meditations, breathing patterns, and AI mood exercises
🚓 Emergency Services API: Integration with regional 911/112 systems (via country code)
⌚ Smartwatch Support: Hands-free check-ins and panic triggers
🌍 Localization & Global Scaling: Support for Indian, European, and US safety systems
🏢 Enterprise Version: Institutions like universities, hospitals, and BPOs can deploy SafeMate for their employees/students

🔗 Join the Movement

SafeMate isn’t just an app — it’s a movement for tech-enabled compassion.

We’re currently in closed beta, and launching soon.

👉 Sign up now at https://getsafemate.store

👉 Or follow our Telegram bot for live alerts and demos: t.me/safemate_guardian

🙌 Built With ❤️ by @freaking_wish

Frontend: React 18, Tailwind CSS, Aceternity UI
Backend: Supabase, PostgreSQL, Edge Functions
AI: Gemini 2.5, ElevenLabs, Deepgram, Tavus
Voice/RTC: LiveKit, Telegram Bot API

“The guardian you trust. The companion you need.”

Let us know what you think. Feedback, ideas, or hugs → drop them in the comments!

🧠💙 Stay safe,

— Wish

Getting started with Harness CI

SAGAR SATAPATHY — Thu, 17 Nov 2022 15:36:30 +0000

What is Harness?🐤

Harness is the industry's first Software Delivery Platform to use AI to simplify your DevOps processes - CI, CD, Feature Flags, Cloud Costs, and much more.

Why Harness?🐤

Harness is a modern software delivery platform that allows engineers and DevOps to build, test, deploy, and verify software, on-demand.

What is Harness CI?🐤

Harness CI simplifies the development and testing of code.
Each stage includes steps for building,testing, and pushing your code.
CI executes steps as containers , packaging code, and dependencies in isolation from other steps.

PreFlight Checklist!🐤

Forking the Repository✔️
Microsoft Azure Account✔️(Optional,You can use Harness prebuild)
A Docker Hub account✔️
Kubernetes cluster✔️(Optional,You can use Harness prebuild)

WorkFlow🐤

Build the code and run unit tests.
Package the app as a Docker image and upload it to Docker Hub.
Pull the uploaded image to the build farm as a Background Task.Check out more about background tasks here
Run an integration test against the sample app.

Step 1: Fork the repository🐤

Go to Python-Pipeline-Samples Repo
Now fork this repository in your Github Forking a repository in Github

Step 2: Create your Harness Project🐤

Move to the Harness Platform & click on Project -> New Project
Configure the project settings as below Name: (Default Project Name) Organization: Default

Select CI Module in the modules sections

Step 3: Pipeline Creation & Configure Stages🐤

Click on Pipelines -> Create a Pipeline
Configure the pipeline as below Name: CI-Python-Quickstart Set up pipeline as: Inline

To know more about Pipelines check out the docs here
Next, we are going to add Stages and steps to our Pipeline and compile our Python code.

Click on Start

Step 4: Build Step🐤

Hover over to Build tab.
Click on Add Stage to get started with the pipeline creation
Select the type of stage as Build
Configure the Stage Settings as below
- Name: build test and run
- Make sure to turn on clone codebase.

Setup the Connector as follows
Select Connectors -> Click on + New Connector
Connector Type: Github

Name: python-sample-connector
URL Type : Repository
Connection Type: HTTP
GitHub Repository URL: Paste the link of your forked repository
Username: (Your Github Username)
Personal Access Token: Check out how to create personal access token
Secret Name: Git-Token
Secret Value: PAT value generated in Github
Click on Save.

This will allow the repository to be fetched click on it and click Apply Selected
Make Enable API access (ON) with the secret token created
Click on Connect through Harness Platform.
To develop more understanding on Connectors check out the docs here
Go the Infrastructure settings of stage and click on Hosted by Harness.
Then go to Execution (In this step we are going to compile the code)

Code Compilation

Click on Add step
- Go to Build and click on Run
- Change the settings as following
- Name: Code compile
- Container Registry -> Choose New connector
- Click on Docker Registry
- Change the settings as following
  - Overview
    - Name- docker quickstart
  - Details
    - Docker registry url - https://index.docker.io/v1/
    - Provider type - Docker Hub
    - Authentication - Username and Password
    - Username - Docker hub username
    - Secret Token - Check out how to create docker PAT
  - Connect to Provider
    - Choose to connect through the Harness Platform
    - It will take sometime to verify your credentials.
- Image: python:3.10.6-alpine
- Shell: Sh
- Command: python -m compileall ./
- Then click Apply changes Next we are going to create Image and Push the image to docker registry Click on Create Image and Push to Docker Registry

Step 5: DockerFile Creation🐤

Click on Add step
- Go to builds and click on run
- Change the settings as following:
  - Name: create Docker file
  - Container registry: Click on the Docker connecter created in the previous step
  - Image: alpine
  - Commands: Copy the following command and click on apply changes.
```
 touch pythondockerfile
 cat > pythondockerfile <<- EOM
 FROM python:3.10.6-alpine
 WORKDIR /python-pipeline-samples
 ADD . /python-pipeline-samples
 RUN pip install -r requirements.txt
 CMD ["python" , "app.py"]
 EOM
 cat pythondockerfile
```

Build and Push Image to Docker Registry

Click on Add step
Go to builds and click on build and push an image to docker registry
Change the settings as following:
- Name: Build and push image to docker hub
- Docker connector: select the Docker connector you created previously
- Docker repository: <docker-hub-username>/<docker-repository name>
- Tags: latest
- In the optional Configuration
  - Dockerfile - pythondockerfile

Now we move to Integration Testing and running our Pipeline.
Click on Integration Test and Run Pipeline

Step 6: Integration Testing🐤

Python server

Now you have a Stage to clone, build, containerize, and then push your image to Docker Hub. In this step you'll add a Stage to pull that image, run it in a container, and run integration tests on it.

Click Add stage and select build
Name it as integration test
Turn off clone from codebase
Click setup stage
Go to the Stage overview turn on Clone Codebase
Now we will setup Stage Infrastructure
Go to Infrastructure and select propagate from an existing stage.
Select the previous stage
Click Next In the Build Test and Push stage, you built your code and pushed your built image to Docker Hub. Harness will pull the image onto the container in your infrastructure. Next, it will start the Hello World Server in the image.

Note:According to new flow and UI** Propagate from an existing stage** is already enabled.

Go to execution tab in run integration stage
Select add step
Go to builds and select background
Change the settings as following
Name: python server
Description(optional): server connection
Container registry: select the Docker connector you created previously
Image : docker-hub-username/docker-hub-repo-name - Shell: Sh - Command: python3 /python-pipeline-samples/app.py - Select Apply changes

Connecting to server

Next, we can run an integration test. We'll simply test the connection to the server.

Select add step in the execution tab of run integration stage
- Go to Builds and select Run
- Change the settings as following
  - Name: test connection to server
  - Container registry: select Docker connector you created .
  - Image: curlimages/curl:7.73.0
  - Commands:
```
sleep 10
curl localhost:5000
```
  - Select Apply Changes.

Step 7: Run the Pipeline🐤

Click ↑Save.
Click Run.
The Pipeline Inputs settings appear.
- Under CI Codebase, select Git branch.
- In Git Branch, enter the name of the branch where the codebase is, here main
- Click Run Pipeline.

Hoooray we have completed our CI pipeline.

👌Happy hacking,see you until next time!अलविदा
About me:freaking_wish 😊
doc ref:Github repo

CD onboarding with Harness using Azure.

SAGAR SATAPATHY — Mon, 07 Nov 2022 09:23:36 +0000

What is Harness?⚓

Harness is the industry's first Software Delivery Platform to use AI to simplify your DevOps processes - CI, CD, Feature Flags, Cloud Costs, and much more.

Why Harness?⚓

Harness is a modern software delivery platform that allows engineers and DevOps to build, test, deploy, and verify software, on-demand.

What is Cloud Delivery Pipeline (CD Pipeline)?⚓

A CD Pipeline is a series of Stages where each Stage deploys a Service to an Environment.A CD Pipeline can perform many additional CD operations, including, but not limited to:

Propagating Services and their definitions across Stages
Approvals using integrations like Jira and ServiceNow.
Synchronizing stage deployments using barriers.
Notifications.

Aim: Setting up and running the pipeline which can run an Nginx image on your cluster with Harness using Microsoft Azure!

PreFlight Checklist!⚓

Forking the Repository✔️
Microsoft Azure Account✔️
A Docker Hub account✔️
Kubernetes cluster✔️

Steps to set up Azure-kubernetes cluster⚓

Log in to Microsoft Azure Portal,using student id gives you free credit.
Search for Kubernetes Services.
Click on Create.Then click on Create Kubernetes cluster.
Fill up all the necessary details like Kubernetes cluster name-demo(example).
Finally Click Review+Create button then Create and give it some time to Initialize deployment.You will be notified once it's deployed. 6.Click connect and get ready for using Harness.

Steps to set up the Harness Delegate⚓

Log in to your Harness Account.
In The Project Setup tab choose Delegates and hit + Create a Delegate after setting up project:firstproject.
Choose Kubernetes and continue. Enter the following details:
- Delegate Name:newdelegate
- Delegate Size:Small
- What installer do you want to use?:Kubernetes
Press Continue.
Download YAML file and then Continue
Open Kubernetes Cluster tab and Press Connect then Open Cloud Shell
Upload the YAML file in the cli or copy the content of YAML file to cli of Cloud Shell
Enter the following code

kubectl apply -f harness-delegate.yml

Press Done once you see green check mark in Checking for
Heartbeat section in Harness tab.

Secrets and steps to set them up⚓

GitHub Personal Access Token
Harness needs a Personal Access Token to access GitHub repositories.

Login to GitHub and click on Settings from the top-right menu
Select Developer Settings from the list of Account Settings
Select Personal access tokens->Token(Classic)->generate new Token
Click on Generate new token (grant ALL permissions)
Copy the generated token and save it.
Now go to Harness Secret Tab
Click New Secret->Text
Fill up the details and copy the secret key from github token generated and paste it in harness secret just created.

DockerHub Access Token
Sign-in to Docker Hub
Go to Account Setting then Security and generate New
Access Token and generate.

Now go to Harness Secret Tab and click New Secret->Text
Fill up details and paste the key generated from docker hub and hit save.

Steps the to set up GitHub Connector⚓

In Harness Dashboard you will notice Connector tab under your
project setup section.

Click + New Connector and choose Github from Code Repositories
- Name:githubconnector
- GitHub Account URL: YOUR_GITHUB_URL
- Test Repository:cd-pipeline-sample and Continue.
- Username:YOUR_GITHUB_USERNAME
- Personal Access Token:choose your github secret created in harness
- Check the Enable API access (recommended)☑️
- Personal Access Token:choose your github secret created in harness and Continue
Select how you would like to connect to the provider:Connect through a Harness Delegate
Choose the Delegate you created-newdelegate then Save and Continue and Finish.

Steps the to set up Docker Connector⚓

In Harness Dashboard you will notice Connector tab under your
project setup section.

Click + New Connector and choose Docker Repositories from Artifact Repositories.
- Name:dockerconnector
- Docker Registry URL:https://registry.hub.docker.com/v2/
- Username:DOCKER_USERNAME
- Password:Docker secret you created in Harness Secret Tab and Continue.
Select how you would like to connect to the provider:Connect through a Harness Delegate
Select the Delegates this Connector will use:Use Delegate you created-newdelegate then Save and Continue and Finish.

Setting up Project⚓

We have already forked the cd-pipeline-sample.
Its time to create Pipeline and see what we have created.

Setting up the Pipeline⚓

Go to cd-pipeline-sample repo which you forked browse
through*.harness folder* and edit Pipeline.yaml file
Name the projectIdentifier:PROJECT_NAME_CREATED_IN_HARNESS
(for eg:my project name is firstproject)
So Pipeline.yaml will be:

pipeline:
  name: testk8s
  identifier: testk8s
  projectIdentifier: firstproject
  orgIdentifier: default
  tags: {}
  stages:
    - stage:
        name: k8deploy
        identifier: k8deploy
        description: ""
        type: Deployment
        spec:
          serviceConfig:
            serviceRef: k8service
            serviceDefinition:
              spec:
                variables: []
                manifests:
                  - manifest:
                      identifier: manifest
                      type: K8sManifest
                      spec:
                        store:
                          type: Github
                          spec:
                            connectorRef: testhelp
                            gitFetchType: Branch
                            paths:
                              - default-k8s-manifests/Manifests/Files/templates
                            repoName: harness-docs
                            branch: main
                        skipResourceVersioning: false
                  - manifest:
                      identifier: values
                      type: Values
                      spec:
                        store:
                          type: Github
                          spec:
                            connectorRef: testhelp
                            gitFetchType: Branch
                            paths:
                              - default-k8s-manifests/Manifests/Files/ng_values_dockercfg.yaml
                            repoName: harness-docs
                            branch: main
                artifacts:
                  primary:
                    spec:
                      connectorRef: harnessdocker
                      imagePath: <+input>
                      tag: <+input>
                    type: DockerRegistry
              type: Kubernetes
          infrastructure:
            environmentRef: K8Env
            infrastructureDefinition:
              type: KubernetesDirect
              spec:
                connectorRef: test
                namespace: default
                releaseName: release-<+INFRA_KEY>
            allowSimultaneousDeployments: false
          execution:
            steps:
              - step:
                  name: Rollout Deployment
                  identifier: rolloutDeployment
                  type: K8sRollingDeploy
                  timeout: 10m
                  spec:
                    skipDryRun: false
            rollbackSteps:
              - step:
                  name: Rollback Rollout Deployment
                  identifier: rollbackRolloutDeployment
                  type: K8sRollingRollback
                  timeout: 10m
                  spec: {}
        tags: {}
        failureStrategies:
          - onFailure:
              errors:
                - AllErrors
              action:
                type: StageRollback

Choose the Pipeline tab from your project in Harness Dashboard and click on + Import From Git
Fill the details according to image
Now open the pipeline you created and click on k8deploy
Under Services -> Select Service click New Service and name it as nginx then choose it from dropdown
Lets setup the manifest now
Click on manifest edit button ->Continue GitHub Connector:CONNECTOR_CREATED_FOR_GITHUB_IN_HARNESS i.e githubconnector.
Edit values by clicking its edit button then Continue and choose the Connector created for Github in Harness Connector and Submit.
Finally lets edit the Docker Artifact->Continue Choose the Docker connecter you created in Harness Connector section.
Click on the button shown in the image and give the path as library/nginx and Submit.
Continue it will take you to Infrastructure section Specify Environment:+ New Environment .

Connector: + New Connector
Name:kubernetesinfraconnector
Details:Use the credentials of a specific Harness Delegate (IAM role, service account, etc) and Continue
Delegate:Delegate you created in harness-newdelegate
Finally Save and Continue and Finish then Continue.
Now hit Save and Save again then Run.

Give tag:latest and click Run Pipeline
🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈🦈

Hoooray we have completed our cd pipeline.

👌Happy hacking,see you until next time!अलविदा
About me:freaking_wish 😊
ref:Github repo
vid ref:Harness community

CSS Selectors That Every Developer Should Know

SAGAR SATAPATHY — Thu, 03 Mar 2022 16:10:10 +0000

Css is the tool to Responsive Web Design always plays an
important role whenever going to promote your website.

What is css?

Cascading Style Sheets (CSS) is a language for specifying the appearance of a document written in a markup language like HTML. Along with HTML and JavaScript, CSS is a key component of the World Wide Web.

Why is CSS important?

CSS allows you to keep a document's informative content distinct from the specifics of how it should be displayed. The style of a document refers to the specifics of how it should be presented. You separate the style from the substance in order to: Duplicate work should be avoided.Facilitate upkeep.
For different reasons, use the same text in several styles.
Thousands of pages on your website may have the same appearance. The style information is stored in common files that are shared by all pages when using CSS. When a user views a web page, the style information is loaded together with the page's content by the user's browser.

Sr. No.	CSS Selector
1	Element Selector
2	Class Selector
3	ID Selector
4	Attribute Selector
5	Descendant Selector
6	Child Selector
7	Adjacent Selector
8	General Sibling Selector
9	Universal Selector
10	Pseudo Class Selector
11	Pseudo Element Selector
12	nth-of-type
12	nth-child

Lets understand the selectors in detailed manner
1.⚓Element Selector
This is one of the most fundamental selectors in CSS. You may use the element selector to pick and style all elements with the same name. Because you won't have to use class for each piece, you'll end up writing a lot less code.

2.⚓Class Selector
Perhaps the most often used CSS selection is the class selector. The class selector is defined by a period (.) followed by the class name. Every element that matches the class inherits the style you write. A single element can have numerous classes applied to it.

3.⚓ID Selector
The ID selector styles a single element with a unique ID. The # sign is followed by the element's unique ID to utilise the ID selector. Because IDs are unique to each element, they can't be used to style many elements at the same time.

4.⚓Attribute Selector
You may pick all elements by the name or value of a particular attribute and apply style to them using [square brackets] using an attribute selector. If you need to style point-specific components, it can be quite beneficial.

5.⚓Descendant Selector
Only those elements that are descendants of a given element are styled with descendant selectors. element space> descendant is the syntax. For example, any h1 inside a div with the class name "myDiv" may be styled.

6.⚓Child Selector
You may use the DesceChild selector to pick all items that are children of a given element. parent > child is the syntax. Child selectors are different from descendant selectors in that the latter only selects direct children. Only those elements that are descendants of a particular element are styled using ndant selectors. element space> descendant is the syntax. For example, any h1 inside a div with the class name "myDiv" may be styled.

7.⚓Adjacent Selector
When you wish to pick the items that come after the specified element, you use this selector (adjacent siblings). You'd have to use the syntax "element + sibling" to utilise this.
8.⚓General Sibling Selector
These are less rigorous than selectors for nearby siblings. It allows you to choose all siblings of a given element, even if they are not contiguous. We use " instead of '+' like we did in the neighbouring selection.

9.⚓Universal Selector
It's also known as the star selector since it selects everything in the document and styles it. The element's style is defined by default by your browser, and you may alter it using the star selector. Simply type a (*) to utilise it.

10.⚓Pseudo Class Selector
You may use pseudo-classes to style one element based on the status of another element, such as hover or active (:). Hover, active, visited, target, focus, and many other classes are available. 'element:pseudo-class' is the syntax.

11.⚓Pseudo Element Selector
You may apply style to a specific chunk or fragment of the chosen element using the pseudo-element selector (::). Style the initial character, or line, of an element, for example. 'selector::pseudo-element' is the syntax.

12.⚓nth-of-type
This selector is used when you wish to apply a style to a 'nth' number of elements. Consider the following scenario: you have four lists. You may use the nth-of-type property to apply CSS solely to the second item of the ul (n).

13.⚓nth-child
The nth-child(n) selector matches any element that is the nth child of its parent, regardless of type. n can be a number, a keyword, or a formula that specifies an element's position among a set of siblings.

Burn it Down💥🍗! Feel to drop your favourite CSS Selector in the comments!To Know more about me Click here!

Front-End Web Development with React #CompleteRoadMap

SAGAR SATAPATHY — Mon, 21 Feb 2022 18:21:38 +0000

Better you Practice Better you React to it

The goal of this chapter is to provide you with an understanding of the Frontend Development that focuses on the React ecosystem and to assist you in guiding your study if you are puzzled.

What is ReactJs?

ReactJs is an open-source JavaScript package used to create user interfaces for single-page apps.

Is React a Library or a Framework?

Before jumping to concluusion lets know about

Library:- A library is a set of methods that enable us to easily construct web apps. So, when you use a library to develop web apps, your code is in charge and just calls on the library's methods to achieve some recurring common action.
Framework:- A framework is a specific implementation of a web application in which the framework offers general functionality and your code fills in the specifics to modify that framework for the unique application functionality that you wish to implement.

Finally coming back to question ,React is a JavaScript library for building user interfaces.

Why React?

Declarative :

React makes it simple to design interactive user interfaces. Create basic views for each state of your application, and React will update and render only the necessary components when your data changes. Declarative views improve the predictability and debugability of your code.

Component-Based:

Create enclosed components that handle their own state, then combine them to create complicated user interfaces. Because component logic is implemented in JavaScript rather than templates, it is simple to transfer rich data around your app while keeping state out of the DOM.

Learn Once, Write Anywhere

React may also be used to render on the server with Node and to power mobile apps with React Native. React allows you to create new features without having to rewrite current code.

Mind Map for React till Framework Selection

4 weeks React Topics:

Week	Topic
Week 1	Introduction to React
Week 2	React Router and Single Page Applications
Week 3	React Forms, Flow Architecture and Introduction to Redux
Week 4	More Redux and Client-Server Communication

Detailed Weekwise Topics to be covered

Whatever library or framework you choose to study for web development, you must first master the fundamentals of the web, which include HTML, CSS, and JavaScript.

There are a lot of common skills that you will need to master in order to become a developer, including:

🐱‍💻GIT (Version Control System)
🐱‍💻HTTP/HTTPS Protocol
🐱‍💻Terminal Usage
🐱‍💻Data Structures & Algorithm
🐱‍💻Design Patterns

Knowledge You Need Have To Become a React Developer

🐱‍🏍Build tools are software or programmes that automate the creation of executable applications from source code. It converts code into an executable format by linking, compiling, and packaging it.

🐱‍🏍A system's state is its representation at a specific point in time. It refers to the data in the programme that is saved as an array, objects, or strings.

🐱‍🏍Routing is the method of selecting a path for traffic across networks.

🐱‍🏍API clients provide an interface for different applications to communicate with each other when a request is made.

🐱‍🏍It's crucial to understand how to integrate backend frameworks with frontend frameworks so that they can operate together.