👨🏻‍💻 Zeyad's Notes

Q&A

Sat, 21 Oct 2023 10:35:57 GMT

This page will be for questions that I got from social media and i found them useful for community.

If you’ve questions send them to me on My LinkedIn Account.

Q: I have been hoping to pursue a career in software engineering / web development I have studied Python, HTML, CSS, JS and am starting to work my way through React I know this is very much the basics and am trying to work out the paths that other people with experience have taken, Would you have any advice?

Practice smart.

a. Open figma community. b. Search for a template of an idea you love to implement. c. Start implementing it using react.

While practicing try to see how the others implement this part, how they organize the folder structure, how they manage the state, which is better react query or redux thunk or sagas, how to create custom hook to do specific function, challenge yourself to do hard/new to you parts.

Then you can add auth functionality, you can use orm to connect a db, search for how to build your database, how to build api for it, how to add some security features to your app.

After building the fullstack app, you will like part more than the other, I mean frontend or backend, then begin your career with it. Don’t start your career as a fullstack, focus on side and then increase your knowledge of the other side step by step.

Use Typescript.
Share your app on your linkedin and github accounts, also highlight the good parts of the app/codebase.
Ask the experienced devs to give you some advises or reviews on the implemented code.
Build a blog.
Share articles.

Zeyad's Notes

Tue, 28 Oct 2025 00:50:18 GMT

Welcome to my notes

Hi, This is my digital garden built using the powerful project Quartz 4 and obsidian app code hosted on GitHub and deployed and published with Cloudflare Pages..

Keep informed

Give the notes a star on GitHub or keep informed with the notes updates using RSS Feed

About me

I’m Zeyad a software engineer from Egypt 🇪🇬, working as a Fullstack engineer (frontend heavily). My type is INTJ Currently I spend most of my time learning new stuff, and Coding

Find me on the Internet

Follow me on twitter

About this site

I created this site to track the things that might be useful to be shared with you, It’s not like my blog, the blog is more specific for articles I write, but here you’ll find my favs and notes 📝. for more information about how I created this site open the setup page.

Browsing the digital garden

To easily browse it, you can search for the keywords you’re interested in, or use the left sidebar for the full notes list. Only on Desktop, If you’re on a Mobile device, Click on#obsidian .Also keep an eye on the backlinks and mentions pages.

Customize MUI theme with TypeScript

Thu, 21 Aug 2025 08:30:28 GMT

Published on my Blog

Ok, this is a quick tutorial on how to customize the default theme in mui v5. we’ll just customize the button component.

Project Template here

First thing, let’s create our folder structure.

Our folder structure is one of the basic setup we will do on our tutorial. it helps us to know where we will write our code in an organized way. Ok, so I prefer this structure while setup any theming whatever the ui framework I use.

.
└── theme/
    ├── foundations/
    │   ├── palette.ts
    │   ├── typography.ts
    │   ├── ...
    │   └── index.ts
    ├── components/
    │   ├── button.ts
    │   ├── ...
    │   └── index.ts
    └── index.ts

Now, we have two main folder, the first one will be foundations folder, and it used for basic theme variables, and the other one is components for components theming. In each folder we created index.ts file to export all from it.

Next, let’s build the theme from the end to beginning.

open the theme/index.ts to import our foundations and components that structure our theme

import { components } from "theme/components";
import { foundations } from "./foundations";
import { createTheme, ThemeOptions } from "@mui/material";
 
const themeOptions: Omit<ThemeOptions, "components"> = {
  ...foundations,
};
 
export const theme: ThemeOptions = createTheme({
  ...themeOptions,
  components: {
    ...components,
  },
});

No magic, ha? ThemeOptions will perfectly handles the types for the passed properties. We excluded the components from themeOptions vars and passed it inside the createTheme function, you can modify it to update it directly inside the variable.

Based on mui, Here’s the ThemeOptions interface, this will make our writing code is super easy and straightforward. How? We need to customize the theme colors for example, it called palette and its type is PaletteOptions

So here’s our theme/foundations/palette.ts

import { PaletteOptions } from "@mui/material";
 
export const palette: PaletteOptions = {
  common: {
    white: "#fff",
    black: "#000",
  },
  primary: {
    main: "#33A3FF",
    light: "#53B1FD66",
  },
};

And because we’ve used the correct Interface so the editor will help us continue writing the remain properties

The Question will be, What if I need to add a new color schema. The Answer is Simple as this

declare module "@mui/material/styles" {
  export interface PaletteOptions {
    blue?: PaletteColorOptions;
  }
}

How did I know about PaletteColorOptions ? it’s not a magic, I clicked on PaletteOptions and checked the type for the already existing colors schema.

Ok, until now everything is super easy right?

What about customizing the components theme?

Ok ok, the MUI Button component located here and they call it MuiButton. But let’s create the components object that will be exported inside the createTheme.

and it’s simple as this theme/components/index.ts

import { Components } from "@mui/material";
 
export const components: Components = {};

after that TS will help you writing your components.

First thing, let’s create our type for the MuiButton component theme, open the theme/components/button.ts

type muiButton = {
  defaultProps?: ComponentsProps["MuiButton"];
  styleOverrides?: ComponentsOverrides<Theme>["MuiButton"];
  variants?: ComponentsVariants["MuiButton"];
};

We got it from the .d.ts file located in the mui package files inside the node_modules folder. No magic!

Note: Feel free to use interfaces or types for this.

After that let’s create our custom theme for MuiButton

declare module "@mui/material/Button" {
  export interface ButtonPropsVariantOverrides {
    isActive: true;
  }
}
 
export const MuiButton: muiButton = {
  variants: [
    {
      props: { variant: "isActive" },
      style: ({
        theme,
      }: {
        theme: Theme;
      }) => {
 
        return {
          color: theme.palette.common.white,
        };
      },
    },
  ],
};

I created a new variant for the Button you can use it inside your code.
TS will be your guide while customizing the component.

Note: I added export word before interface ButtonPropsVariantOverrides to avoid the eslint rule unused-imports/no-unused-vars

Now, We need to wrap our app with this theme

import { theme } from "theme";
 
<ThemeProvider theme={theme}>
	{children}
</ThemeProvider>

Tada! 🎉

Another Things about Design Systems or Frontend

Project Template here

Backend

Sat, 21 Oct 2023 10:35:57 GMT

Articles

Efficient Pagination Using Deferred Joins..

See more: nodejs nestjs graphql database

GraphQL

Sat, 21 Oct 2023 10:35:57 GMT

From #backend to#frontend typed application with GraphQL#typescript

NestJS

Sat, 21 Oct 2023 10:35:57 GMT

Documentation | NestJS - A progressive Node.js framework

Build NestJS App

Build a REST API with NestJS, Prisma, PostgreSQL and Swagger.

Tools

nestjs/throttler: A rate limiting module for NestJS to work with Fastify, Express, GQL, Websockets, and RPC 🧭

Articles

NestJS vs. Express.js.

NodeJS

Sat, 21 Oct 2023 10:35:57 GMT

Articles

Setup a new app

API Design Patterns

Sat, 21 Oct 2023 10:35:57 GMT

Notes

Chapter 1

RPC: Remote Procedure Call because it calls a remote function ‘procedure’.
APIs are special types of interfaces that define how two computer systems interact with one another, coming in many forms, such as downloadable libraries and web APIs.
Web APIs are special because they expose functionality over a network, hiding the specific implementation or computational requirements needed for that functionality.
A list of RPC-oriented APIs, may be something like

ScheduleFlight()    -> Schedules a new flight
GetFlightDetails()  -> Shows information about a specific flight
ShowAllBookings()   -> Shows all travel plans currently booked
CancelReservation() -> Cancels an existing flight reservation
RescheduleFlight()  -> Reschedules an existing flight to another date or time
UpgradeTrip()       -> Upgrades from economy class to first class

But if we want to call each of them publicly, how can we remember that? For example, we need to remember whether the way to see all of our bookings is ShowFlights(), ShowAllFlights(), ListFlights(), or ListAllFlights() (in this case, it’s ShowAllFlights()). But what can we do to solve this? The answer comes in the form of standardization “Resource orientation” resource-oriented APIs. <StandardMethod><Resource>()

StandardMethod: GET, POST, …etc Resource: in the prev example is the FlightReservation.

GET<FlightReservation>()

What makes an API “good”?

Operational: it must do the thing users actually want. there may be nonoperational requirements related to things like latency and accuracy.
Expressive.
Simple.
Predictable.

Chapter 2

Software design pattern: is what happens when a particular design can be applied over and over to lots of similar software problems.
Anatomy of an API design pattern: Name, Motivation, Overview, Implementation, Trade-offs.
API design patterns are important because APIs are generally very “rigid” and therefore not easy to change, so design patterns help minimize the need for large structural changes.

books

Sat, 21 Oct 2023 10:35:57 GMT

api-design-patterns

Management

Sat, 21 Oct 2023 10:35:57 GMT

Giving Feedback

Career Paths

Sat, 21 Oct 2023 10:35:57 GMT

Frontend

If you’re a beginner and want to learn frontend then here’s my recommendation: roadmap

Computer Science

Clean Code

Sat, 21 Oct 2023 10:35:57 GMT

learning-notes

Awesome

An organized learning path on Clean Code, Test-Driven Development, Legacy Code, Refactoring, Domain-Driven Design and Microservice Architecture

See more: links

Clean Code Discussions

Sat, 21 Oct 2023 10:35:57 GMT

Ok, So I separated these stuff from the main page clean-code to make this page for discussions and more specific topics.

Readability Over Abstraction

CLI

Sat, 21 Oct 2023 10:35:57 GMT

In this page will document my knowledge on command line interface.

My setup

Tmux for terminal management.
Starship as shell prompt.

Productivity tools

https://github.com/ankitpokhrel/jira-cli

See more: curl learn-cli tmux

cURL

Sat, 21 Oct 2023 10:35:57 GMT

Articles

Linux curl Command Explained with Examples.

Examples

curl -X POST <https://getpocket.com/v3/oauth/authorize> -d "code=string&consumer_key=string"

-X to specify the request type.
-d data.

Learn CLI

Sat, 21 Oct 2023 10:35:57 GMT

Resources

explainshell.com write down a command-line to see the help text that matches each argument.

TMUX

Sat, 21 Oct 2023 10:35:57 GMT

tmux is one of my favorite tools to manage terminal.

Articles

Cheatsheet

My Config

You’ll find my [.tmux.conf file here.
Find my tmux stars ⭐️ on github.

Center elements in Css

Sat, 21 Oct 2023 10:35:57 GMT

Centering div

Using Grid

.parent {
  display: grid;
  place-items: center;
}

Code Snippets

Sat, 21 Oct 2023 10:35:57 GMT

golang

tic-tac-toe

CSS.

center-in-css

Tic Tac Toe using golang

Sat, 21 Oct 2023 10:35:57 GMT

#golang

package main
 
import "fmt"
 
func main() {
 
	xoBoard := [3][3]string{}
 
	type player struct {	
		name string
		mark string
	}
 
	player1 := player{mark: "X"}
	player2 := player{mark: "O"}
	fmt.Println("Welcome to Tic Tac Toe!")
	fmt.Println("Player 1, please enter your name:")
	fmt.Scanln(&player1.name)
	fmt.Println("Player 2, please enter your name:")
	fmt.Scanln(&player2.name)
	
	fmt.Println("Now we have two players, " + player1.name + " and " + player2.name + ", let's start the game!")
	
	currentPlayer := player1
	x, y := 0, 0
 
  
 
	for {
		fmt.Println("Player " + currentPlayer.mark + ", please enter the row and column number of the cell you want to mark:")
		fmt.Scanln(&x, &y)
		
		if xoBoard[x][y] == "" {
			if x >= 0 && x < 3 && y >= 0 && y < 3 {
				xoBoard[x][y] = currentPlayer.mark
			} else {
				fmt.Println("Please enter a valid cell number!")
				continue
			}
		} else {
			fmt.Println("This cell is already marked, please choose another one!")
			continue
		}
	
		// validation
		
		for i := 0; i < 3; i++ {
			if xoBoard[i][0] == xoBoard[i][1] && xoBoard[i][1] == xoBoard[i][2] && xoBoard[i][0] == currentPlayer.mark {
				fmt.Println("Player " + currentPlayer.mark + " wins!")
				return
			} else if xoBoard[0][i] == xoBoard[1][i] && xoBoard[1][i] == xoBoard[2][i] && xoBoard[0][i] == currentPlayer.mark {
				fmt.Println("Player " + currentPlayer.mark + " wins!")
				return
			} else if xoBoard[0][0] == xoBoard[1][1] && xoBoard[1][1] == xoBoard[2][2] && xoBoard[0][0] == currentPlayer.mark {
				fmt.Println("Player " + currentPlayer.mark + " wins!")
				return
			} else if xoBoard[0][2] == xoBoard[1][1] && xoBoard[1][1] == xoBoard[2][0] && xoBoard[0][2] == currentPlayer.mark {
				fmt.Println("Player " + currentPlayer.mark + " wins!")
				return
			} else if xoBoard[0][0] != "" && xoBoard[0][1] != "" && xoBoard[0][2] != "" && xoBoard[1][0] != "" && xoBoard[1][1] != "" && xoBoard[1][2] != "" && xoBoard[2][0] != "" && xoBoard[2][1] != "" && xoBoard[2][2] != "" {
				fmt.Println("It's a tie!")
				return
			}
		}
		
		fmt.Println(xoBoard[0])
		fmt.Println(xoBoard[1])
		fmt.Println(xoBoard[2])
		
		if currentPlayer.mark == "X" {
			currentPlayer = player2
		} else {
			currentPlayer = player1
		}
	}
}

notes-on-typescript

Thu, 07 Dec 2023 16:48:39 GMT

Databases

Sat, 21 Oct 2023 10:35:57 GMT

Tools

Concepts

Normalization

N+1 Problem

Articles

Difference between Natural join and Inner Join in SQL

See more firebase postgresql

Firebase

Sat, 21 Oct 2023 10:35:57 GMT

https://firebase.google.com/

Articles

7 tips on Firebase security rules and the Admin SDK.

PostgreSQL

Sat, 21 Oct 2023 10:35:57 GMT

https://www.postgresql.org/ .

Learning

https://www.postgresqltutorial.com/ If you prefer reading tutorials (with hands on).

Tools

https://www.pgadmin.org/

Behavioral Design Patterns

Sat, 21 Oct 2023 10:35:57 GMT

Strategy Design Pattern (Behavioral)

Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm exist very independently from clients that use it.

 
/**
 * The Context defines the interface of interest to clients.
 */
class Context {
 
    private strategy: Strategy;
 
    constructor(strategy: Strategy) {
        this.strategy = strategy;
    }
 
    public setStrategy(strategy: Strategy) {
        this.strategy = strategy;
    }
 
    public doSomeBusinessLogic(): void {
        console.log('Context: Sorting data using the strategy (not sure how it\'ll do it)');
        const result = this.strategy.doAlgorithm(['a', 'b', 'c', 'd', 'e']);
        console.log(result.join(','));
    }
}
 
interface Strategy {
    doAlgorithm(data: string[]): string[];
}
 
class ConcreteStrategyA implements Strategy {
    public doAlgorithm(data: string[]): string[] {
        return data.sort();
    }
}
 
class ConcreteStrategyB implements Strategy {
    public doAlgorithm(data: string[]): string[] {
        return data.reverse();
    }
}
 
const context = new Context(new ConcreteStrategyA());
console.log('Client: Strategy is set to normal sorting.');
context.doSomeBusinessLogic();
 
console.log('');
 
console.log('Client: Strategy is set to reverse sorting.');
context.setStrategy(new ConcreteStrategyB());
context.doSomeBusinessLogic();

Design Patterns

Sat, 21 Oct 2023 10:35:57 GMT

Design patterns is a kinda tough to be remembered, so i created this pages to list what design patterns i do know, and what i need to know, and some links i find it useful.

Articles

Learn more

https://github.com/AbdurRKhalid/Design-Patterns

See more: behavioral

Devops

Sat, 21 Oct 2023 10:35:57 GMT

Feature Flags

Articles

https://www.atlassian.com/continuous-delivery/principles/feature-flags

Frontend Articles

Wed, 08 Nov 2023 03:22:57 GMT

Server Side

What Is Server-side Rendering And How Does It Improve Site Speed?

Layout

https://css-tricks.com/the-inside-problem/

Performance

Read more…

Assets & Illustrations

Sat, 21 Oct 2023 10:35:57 GMT

100,000 icons, illustrations and emoji for all your projects. (streamlinehq.com)
Open-source illustrations for any idea you can imagine and create. (https://undraw.co/)

Colors

Sat, 21 Oct 2023 10:35:57 GMT

Generate color palette

https://coolors.co/

Generate Color Gradients

https://www.joshwcomeau.com/gradient-generator/

My Preferred colors theme

CSS

Sun, 21 Jan 2024 16:10:30 GMT

Generators (Patterns, colors, …etc)

Best Practices

Design Systems

Sat, 21 Oct 2023 10:35:57 GMT

Visualize your components

Document your components

react-styleguide

Books

Invision design system handbook.

Articles

Design Systems

Building Box.

Rich Components

https://baseweb.design/ (Uber design system)
https://chakra-ui.com/

Build your own

Courses

Design Systems with React & Storybook.

Colors

colors

Interview Prep

Sat, 21 Oct 2023 23:01:32 GMT

Resources

This discussion on leetcode is one of my best resources in the frontend interview prep.

Paid Resources

GreatFrontend ⭐️⭐️: They have some interesting discussions in design systems in frontend architecture, In addition to hands on exercises, and plans to prepare for the interviews.

JavaScript

javascript

https://jsvault.com/ collection of tricky JS interview questions.

PWA

Sat, 21 Oct 2023 10:35:57 GMT

How we built Twitter Lite

Frontend Roadmap

Sat, 21 Oct 2023 10:35:57 GMT

Frontend

Frontend Learning Path (Updated 2022)

Notes before learning

Most of online courses just introduce basic information of the X in its current version of X, they will not introduce everything, and you’ll not learn everything from courses, Documentations is the most important source/guide that you have to learn how to use it to use their product (X).
Applying what you’re learning is a regular activity that you must do while learning anything in programming, code everything you learn.
While learning or doing, you’ll definitely struggle in doing things, I strongly recommend create a stackoverflow.com or reddit.com account and ASK the community, please don’t hesitate to ask communities, Learn how to ask a good question it’s a powerful skill!
Use coding communities like GitHub to share what you’re coding with the public, It’ll be a reference for you in the future as well, Although it’ll help you to get job opportunities because people know you’re sharing code about X.
Don’t get distracted, You wanna learn X** ** and you’ve asked someone, you got a resource, go with it, then apply! Don’t spend your days getting the perfect resource to learn X, __ in tech you never stop learning, so just start with any and increase your knowledge then.
Don’t compare yourself to others, you don’t have the same abilities, time, environment, anything, you’re completely different/unique, persistence is the common factor for success.

Path

Skip what you already know.

If you prefer learning from videos.

Introducing to internet

[en][video] https://www.youtube.com/watch?v=7_LPdttKXPc
[en][video] https://www.youtube.com/watch?v=Sfzo4xm5eX8
[en][article] https://www.hp.com/us-en/shop/tech-takes/how-does-the-internet-work
[ar][video] https://www.youtube.com/watch?v=w1GpaH8XIUE

HTML

[en][video] https://www.youtube.com/watch?v=pQN-pnXPaVg
[ar][video] https://www.youtube.com/watch?v=q3yFo-t1ykw

CSS

[en][video] https://www.youtube.com/watch?v=1Rs2ND1ryYc
[ar][video] https://www.youtube.com/watch?v=Z-5QVutAEW4

HTML and CSS Practice

Practice as much as you can, You could start with the next two resources:

[en][video] https://www.youtube.com/watch?v=O7WbVj5apxU
[ar][video] https://www.youtube.com/watch?v=cARGOrtiWt4

Javascript

[en][video] https://www.youtube.com/watch?v=PkZNo7MFNFg
[ar][video] https://www.youtube.com/watch?v=Ai_0ONyPay4

Javascript Practice

Practice as much as you can, You could start with the next two resources:

[en][video] https://www.youtube.com/watch?v=3PHXvlpOkf4

React

Reactjs

[en][video] https://www.youtube.com/watch?v=LlvBzyy-558
[en][video] https://www.youtube.com/watch?v=MfIoAG3e7p4

React Practice

[playlist] https://www.youtube.com/watch?v=GDa8kZLNhJ4&list=PL6QREj8te1P6wX9m5KnicnDVEucbOPsqR

What’s next?

Now, you able to get your first job as frontend developer, you have a good portfolio (GitHub, LinkedIn, Stack overflow), you’ve built apps.

Some topics you can learn after that:

Micro frontends.
Design Systems
Testing.
Server side rendering.
Git
state machine.
Design Patterns
learn other frontend frameworks.

Tailwindcss Tips

Sun, 09 Jun 2024 03:25:04 GMT

Setup themes

the easiest way to setup multiple themes or just dark mode in tailwindcss. #tailwindcss

// global.css
 
.theme1 {
	--bg-color: 234, 246, 255;
}
 
.theme2 {
	--bg-color: 234, 246, 255;
}
 
// if you just want to handle dark/light themes
 
:root {
	--bg-color: 234, 246, 255; // light
}
 
@media (prefers-color-schema: dark) {
	:root {
		--bg-color: 100, 200, 255; // dark
	}
}

// tailwind.config.js
 
module.exports = {
	theme: {
		extend: {
			colors: {
					bgColor: "rgba(var(--bg-color))",
				}
			}
		}
	}
}

And finally you can do something like this to the wrapper element of your app

<body className="theme1">
...

Note that we have used rgba to handle cases like class="bg-bg-color/50" the opacity of the colors.

Merge Classes

tailwind-merge is Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.

import { twMerge } from 'tailwind-merge'
 
twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'

10 Tailwind Tricks You NEED To Know

Gitk

Mon, 15 Apr 2024 07:06:52 GMT

If you’re one of those who comments the code that you don’t need to use in the current rel

Copy Changed Files between git branches

Sat, 30 Dec 2023 23:03:03 GMT

Intro

In some cases, cherry-pick commits will be tough when you’re working on a git project with a long history and a group of contributors. Conflicts may eat your time and focus leading you to a uncertainty action, or i mean action with no validation either it’s wrong or right.

Some situations could be solved with different solutions

The solution that will be introduced in this post is tailored specifically to some certain situations, just keep it in your mind, you may find it helpful to you someday.

Generate a file of the changed files by your fingers using your email

git log --author "YOUR_EMAIL" --oneline --pretty=format:%H | sort -u  | xargs -I {} git show --pretty=format: --name-only {} > changed_files.txt

The file will be something like this

path/file.txt
path/folder/file.ts

Create a new clone of the project with the destination branch.
Copy the files from the generated changed file to the destination repo, I use rsync instead of cp to copy using the full path.

rsync -a --files-from=changed_files.txt . ../cloned-repo-destination-branch

The commands run on macOS, find the suitable command lines that do the same thing on your OS.

Let’s explain the terminal commands

Log the commits hashes by specific author using its email

git log --author "YOUR_EMAIL" --oneline --pretty=format:%H

Sort and Just pick the unique, we just need the changed files without repetition.

sort -u

To show just the commit changed files we use this line

git show --pretty=format: --name-only "hash"

Until then we have a list of commits hashes, we need to view the changed files in each commit. we will use xargs here to get the input from the prev commands using pipes

xargs -I {}

Some resources

https://mpov.timmorgan.org/use-rsync-instead-of-cp/

Use chatGPT to explain that more

If you’re still have questions, you can also share your thoughts with me, or use chatGPT to explain the commands more to you, also you can use google.

git

Git Bisect

Sat, 21 Oct 2023 10:35:57 GMT

You can use git bisect to search for the first commit that cause an error or something.

git bisect start

I’ve published a video about it you can view it from here

https://www.youtube.com/watch?ab_channel=ZeyadEtman&v=bkxvSQ0WMuE”

Git Log

Sat, 21 Oct 2023 10:35:57 GMT

Git Log

Search commits for specific word

git log -S "import { blabla }" --oneline

Git

Sat, 21 Oct 2023 10:35:57 GMT

Here’s one of the best things to learn git by doing: https://wyag.thb.lt

Visualizations

A Visual Git Reference

Tutorials

A Better Model for Stacked (GitHub) Pull Requests

See more

Git Tips & Tricks

Sat, 21 Oct 2023 10:35:57 GMT

Ignore files changes in git locally

You can ignore files from the worktree git update-index --skip-worktree [files]
Remove files from ignoring git update-index --no-skip-worktree [files]
To list the files you’ve added before git ls-files -v . | grep "^S"

To understand this line:

Configure Keycloak instance to run on localhost using https on macOS

Sat, 21 Oct 2023 10:35:57 GMT

Prerequisites

You’re using macOS.
You have keycloak instance running on your machine.
I’ll use chrome for this tutorial.

Problems

The problem is we need to serve from two ports, the first one is the keycloak admin instance (Keycloak Dashboard), and the second one is the client which uses the keycloak service. we need to serve them via the secure protocol https.

Your connection is not private

So when we try to use https on localhost, we’ll face your connection is not private error, because we’re serving localhost via https

To Solve this error All you have to do is write chrome://flags in the chrome url, and then search for Allow invalid certificates for resources loaded from localhost. to enable it.

Great! So now we can do the request to localhost with an invalid certificate.

Certificate is not valid

Now we’re facing this error

When you click over it, you’ll see that the certificate is not valid, in the next steps we’ll trust this certificate

To solve this issue, we need to trust the certificate on our machine, to do this

Click on Certificate is not valid button.
You’ll see a Certificate Viewer popup, Click on the details tab.
Click on Export and select PKCS #7, single certificate.
Open Keychain Access app on your macOS and select Login.
File > Import Items > select the file/certificate you’ve exported from chrome.
Click on the certificate > Trust > Always Trust.

Great! Now we passed the localhost issue for the client.

The last step is creating a new certificate for keycloak instance, and trust it on our machine.

Keycloak certificate

To create a new certificate on macOS, copy this command and put it on your terminal

 openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

This will create two files for you, the first one is localhost.crt the certificate itself, and the second one is the localhost key, we’ll use both in the keycloak folder configuration so you can copy them.

You can use them via a keycloak/certs folder.

localhost.crt -> keycloak-server.pem
localhost.key -> keycloak-server-key.pem

You can also use this command

bin/kc.[sh|bat] start --https-certificate-file=/path/to/certfile.pem --https-certificate-key-file=/path/to/keyfile.pem

Resources

Have you learned something new? Want to learn more?

tips

Learning Notes

Sat, 21 Oct 2023 10:35:57 GMT

SOLID principles and how to apply them in your mind before your code.
OOP even if you’re writing functional code, you have to know Object Oriented Programming to strengthen your knowledge.
Design Patterns is a great examples on how to use OOP and SOLID Principles in a real use cases, try to use them in your code.
Data structures and Algorithms even if you’ll not implement them inside you code, know basics.
Git and how to use it in your daily work.

ERESOLVE unable to resolve dependency tree

Mon, 30 Oct 2023 14:50:23 GMT

Hi, This is a group of resources if you’re facing an error while trying to install a npm package in your project.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: nexttwin@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from react-hook-mousetrap@2.0.4
npm ERR! node_modules/react-hook-mousetrap
npm ERR!   react-hook-mousetrap@"*" from the root project
npm ERR!

If you don’t know what’s going on, then please know more about

So check all the links above and now you’ll have a better understanding of what’s happened and how to fix it.

Object Oriented Programming

Sat, 21 Oct 2023 10:35:57 GMT

Polymorphism

Articles

Polymorphic this Type in TypeScript | DigitalOcean

Follow me for PS

Sat, 21 Oct 2023 10:35:57 GMT

Here’s my digital presence on the popular problem solving sites.

Problem Solving

Sat, 21 Oct 2023 10:35:57 GMT

Sorting Algorithms Resources

Complexity of Sort Types

http://stackoverflow.com/questions/1933759/when-is-each-sorting-algorithm-used

Visual

http://visualgo.net/sorting https://www.toptal.com/developers/sorting-algorithms

Resources to get started

IDEs

C++: Code::Blocks

See more: Follow me

Productivity

Sat, 21 Oct 2023 10:35:57 GMT

Articles

C++ Programming Languages

Sat, 21 Oct 2023 10:35:57 GMT

C++ notes for PS

This is my notes for problem solving in c++, that I’ve learned while coding in C++ and found them helpful.

convert string to lowercase.

trasform(s.begin(),s.end(),s.begin(),::tolower);

check this character is alpha.

isalpha(char);

check the character is in upper case

isupper(char);

Import all libs

<bits/stdc++.h>

copy contents of deque of chars into string

std::string ss(dqu.begin(),dqu.end());

Modulo of a negative number [Example]

(?n)%k == (k?(n%k))%k

Find substring

std::size_t zero7 = s.find("0000000"); if(zero7!=std::string::npos) found=true;

👨🏻‍💻 Zeyad's Notes

Q&A

Zeyad's Notes

Welcome to my notes §

About me §

About this site §

Customize MUI theme with TypeScript

First thing, let’s create our folder structure. §

Next, let’s build the theme from the end to beginning. §

What about customizing the components theme? §

Backend

Articles §

GraphQL

NestJS

Build NestJS App §

Tools §

Articles §

NodeJS

Articles §

Setup a new app §

API Design Patterns

Notes §

Chapter 1 §

What makes an API “good”? §

Chapter 2 §

books

Management

Giving Feedback §

Career Paths

Frontend §

Computer Science §

Clean Code

Awesome §

Clean Code Discussions

Readability Over Abstraction §

CLI

My setup §

Productivity tools §

cURL

Articles §

Examples §

Learn CLI

Resources §

TMUX

Articles §

Cheatsheet §

My Config §

Center elements in Css

Centering div §

Code Snippets

Tic Tac Toe using golang

notes-on-typescript

Databases

Tools §

Concepts §

Normalization §

N+1 Problem §

Articles §

Firebase

Articles §

PostgreSQL

Learning §

Tools §

Behavioral Design Patterns

Strategy Design Pattern (Behavioral) §

Design Patterns

Articles §

Learn more §

Devops

Feature Flags §

Articles §

Frontend Articles

Server Side §

Layout §

Performance §

Regular Expressions §

Design System §

Styles §

Icons §

Animation §

Welcome to my notes

About me

About this site

First thing, let’s create our folder structure.

Next, let’s build the theme from the end to beginning.

What about customizing the components theme?

Articles

Build NestJS App

Tools

Articles

Articles

Setup a new app

Notes

Chapter 1

What makes an API “good”?

Chapter 2

Giving Feedback

Frontend

Computer Science

Awesome

Readability Over Abstraction

My setup

Productivity tools

Articles

Examples

Resources

Articles

Cheatsheet

My Config

Centering div

Tools

Concepts

Normalization

N+1 Problem

Articles

Articles

Learning

Tools

Strategy Design Pattern (Behavioral)

Articles

Learn more

Feature Flags

Articles

Server Side

Layout

Performance

Regular Expressions

Design System

Styles

Icons

Animation

Generate color palette

Generate Color Gradients

Generators (Patterns, colors, …etc)

Best Practices

Visualize your components

Document your components

Books

Articles

Design Systems

Rich Components

Build your own

Courses

Colors

Resources

Paid Resources

JavaScript

Frontend

Frontend Learning Path (Updated 2022)

Notes before learning

Path

Introducing to internet

HTML

CSS

HTML and CSS Practice

Javascript

Javascript Practice

React

React Practice

What’s next?