diff --git a/content/Pasted image 20221024140924.png b/content/Pasted image 20221024140924.png
new file mode 100644
index 00000000..47f28906
Binary files /dev/null and b/content/Pasted image 20221024140924.png differ
diff --git a/content/Pasted image 20221024140943.png b/content/Pasted image 20221024140943.png
new file mode 100644
index 00000000..61ac69bd
Binary files /dev/null and b/content/Pasted image 20221024140943.png differ
diff --git a/content/Pasted image 20221024141003.png b/content/Pasted image 20221024141003.png
new file mode 100644
index 00000000..16849016
Binary files /dev/null and b/content/Pasted image 20221024141003.png differ
diff --git a/content/Pasted image 20221024141905.png b/content/Pasted image 20221024141905.png
new file mode 100644
index 00000000..10c9dad0
Binary files /dev/null and b/content/Pasted image 20221024141905.png differ
diff --git a/content/Pasted image 20221101035924.png b/content/Pasted image 20221101035924.png
new file mode 100644
index 00000000..9ccfc146
Binary files /dev/null and b/content/Pasted image 20221101035924.png differ
diff --git a/content/Pasted image 20221101040028.png b/content/Pasted image 20221101040028.png
new file mode 100644
index 00000000..9ccfc146
Binary files /dev/null and b/content/Pasted image 20221101040028.png differ
diff --git a/content/Pasted image 20221123060835.png b/content/Pasted image 20221123060835.png
new file mode 100644
index 00000000..cb411bd2
Binary files /dev/null and b/content/Pasted image 20221123060835.png differ
diff --git a/content/Pasted image 20221123061345.png b/content/Pasted image 20221123061345.png
new file mode 100644
index 00000000..d67f8e6a
Binary files /dev/null and b/content/Pasted image 20221123061345.png differ
diff --git a/content/Pasted image 20221123061636.png b/content/Pasted image 20221123061636.png
new file mode 100644
index 00000000..94e6dd41
Binary files /dev/null and b/content/Pasted image 20221123061636.png differ
diff --git a/content/Pasted image 20221123061927.png b/content/Pasted image 20221123061927.png
new file mode 100644
index 00000000..8deeb289
Binary files /dev/null and b/content/Pasted image 20221123061927.png differ
diff --git a/content/Pasted image 20221123062847.png b/content/Pasted image 20221123062847.png
new file mode 100644
index 00000000..900b6843
Binary files /dev/null and b/content/Pasted image 20221123062847.png differ
diff --git a/content/Pasted image 20230807040044.png b/content/Pasted image 20230807040044.png
new file mode 100644
index 00000000..c7fbacb4
Binary files /dev/null and b/content/Pasted image 20230807040044.png differ
diff --git a/content/Pasted image 20230807040245.png b/content/Pasted image 20230807040245.png
new file mode 100644
index 00000000..c7fbacb4
Binary files /dev/null and b/content/Pasted image 20230807040245.png differ
diff --git a/content/Pasted image 20230807040342.png b/content/Pasted image 20230807040342.png
new file mode 100644
index 00000000..3c11c7bd
Binary files /dev/null and b/content/Pasted image 20230807040342.png differ
diff --git a/content/Pasted image 20230807040814.png b/content/Pasted image 20230807040814.png
new file mode 100644
index 00000000..95370cff
Binary files /dev/null and b/content/Pasted image 20230807040814.png differ
diff --git a/content/Pasted image 20230807041239.png b/content/Pasted image 20230807041239.png
new file mode 100644
index 00000000..a93fc341
Binary files /dev/null and b/content/Pasted image 20230807041239.png differ
diff --git a/content/Pasted image 20230807043106.png b/content/Pasted image 20230807043106.png
new file mode 100644
index 00000000..44c8f3b4
Binary files /dev/null and b/content/Pasted image 20230807043106.png differ
diff --git a/content/QA.md b/content/QA.md
new file mode 100644
index 00000000..cce62484
--- /dev/null
+++ b/content/QA.md
@@ -0,0 +1,28 @@
+---
+title: "Q&A"
+---
+
+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](https://www.linkedin.com/in/zeyadetman).
+
+>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.
\ No newline at end of file
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 00000000..e596a464
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,20 @@
+---
+title: "Zeyad's Notes"
+---
+
+# Welcome to my notes
+
+Hi, This is my [digital garden](https://jzhao.xyz/posts/networked-thought/) built using the awesome project [Quartz 3.3](https://quartz.jzhao.xyz/) and [obsidian app](https://obsidian.md/).
+
+## About me
+I'm Zeyad a software engineer from [Egypt 🇪🇬](https://en.wikipedia.org/wiki/Kafr_El_Dawwar), working as a Fullstack engineer ([[frontend]] heavily). My type is [INTJ](https://www.crystalknows.com/personality-type/intj) Currently I spend most of my time learning [[programming-languages|Coding]]
+
+[QA](QA.md)
+
+[Find me on the Internet](https://www.zeyadetman.com/about)
+
+[Follow me on twitter](https://twitter.com/zeyadetman)
+
+## 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](https://zeyadetman.com), 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.
+
diff --git a/content/_remotely-save-metadata-on-remote.json b/content/_remotely-save-metadata-on-remote.json
new file mode 100644
index 00000000..034887dc
--- /dev/null
+++ b/content/_remotely-save-metadata-on-remote.json
@@ -0,0 +1,4 @@
+{
+  "readme": "Do NOT edit or delete the file manually. This file is for the plugin remotely-save to store some necessary meta data on the remote services. Its content is slightly obfuscated.",
+  "d": "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"
+}
\ No newline at end of file
diff --git a/content/articles/mui-design-system.md b/content/articles/mui-design-system.md
new file mode 100644
index 00000000..67f52b5f
--- /dev/null
+++ b/content/articles/mui-design-system.md
@@ -0,0 +1,177 @@
+---
+title: "Customize MUI theme with TypeScript"
+---
+
+> [Published on my Blog](https://zeyadetman.com/posts/mui-design-system)
+
+Ok, this is a quick tutorial on how to customize the default theme in [mui v5](https://mui.com/material-ui/getting-started/overview/). we'll just customize the button component.
+
+Project Template [here](https://github.com/zeyadetman/ts-mui-nextjs-storybook-boilerplate)
+
+## 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.
+
+```bash
+.
+└── 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
+
+```ts
+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.
+
+![[Pasted image 20221123060835.png]] 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`
+
+```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
+
+![[Pasted image 20221123061345.png]] 
+
+**The Question** will be, What if I need to add a new color schema.
+**The Answer** is Simple as this
+
+```ts
+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.
+
+![[Pasted image 20221123061927.png]]
+
+Ok, until now everything is super easy right?
+
+## What about customizing the components theme?
+
+Ok ok, the MUI Button component located [here](https://mui.com/material-ui/react-button/) and they call it [`MuiButton`](https://mui.com/material-ui/api/button/#component-name).
+But let's create the `components` object that will be exported inside the `createTheme`.
+
+and it's simple as this `theme/components/index.ts`
+
+```ts
+import { Components } from "@mui/material";
+
+export const components: Components = {};
+```
+
+after that TS will help you writing your components.
+
+![[Pasted image 20221123062847.png]]
+
+First thing, let's create our type for the `MuiButton` component theme, open the `theme/components/button.ts`
+
+```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.](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces)
+
+After that let's create our custom theme for `MuiButton` 
+
+```ts
+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,
+        };
+      },
+    },
+  ],
+};
+```
+
+1. I created a new variant for the `Button` you can use it inside your code.
+2. 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`](https://github.com/sweepline/eslint-plugin-unused-imports/blob/master/docs/rules/no-unused-imports.md)
+
+Now, We need to wrap our app with this theme
+
+```tsx
+import { theme } from "theme";
+
+<ThemeProvider theme={theme}>
+	{children}
+</ThemeProvider>
+```
+
+Tada! 🎉 
+
+Another Things about [Design Systems](frontend/design-systems.md) or [Frontend](frontend/frontend.md)
+
+Project Template [here](https://github.com/zeyadetman/ts-mui-nextjs-storybook-boilerplate)
\ No newline at end of file
diff --git a/content/backend/backend.md b/content/backend/backend.md
new file mode 100644
index 00000000..d9736ed4
--- /dev/null
+++ b/content/backend/backend.md
@@ -0,0 +1,15 @@
+---
+title: "Backend"
+tags:
+---
+
+## Articles
+
+-   [Efficient Pagination Using Deferred Joins.](https://aaronfrancis.com/2022/efficient-pagination-using-deferred-joins).
+
+
+**See more:**
+[nodejs](backend/nodejs.md)
+[nestjs](backend/nestjs.md)
+[graphql](backend/graphql.md)
+[database](database/database.md)
\ No newline at end of file
diff --git a/content/backend/graphql.md b/content/backend/graphql.md
new file mode 100644
index 00000000..296425c3
--- /dev/null
+++ b/content/backend/graphql.md
@@ -0,0 +1,9 @@
+---
+title: "GraphQL"
+tags:
+- frontend
+- backend
+- typescript
+---
+
+- [From #backend to #frontend typed application with GraphQL #typescript](https://olivier-thomas.medium.com/from-backend-to-frontend-typed-application-with-graphql-2d52d61b946a)
\ No newline at end of file
diff --git a/content/backend/nestjs.md b/content/backend/nestjs.md
new file mode 100644
index 00000000..8a3a8907
--- /dev/null
+++ b/content/backend/nestjs.md
@@ -0,0 +1,17 @@
+---
+title: "NestJS"
+---
+
+[Documentation | NestJS - A progressive Node.js framework](https://docs.nestjs.com/)
+
+## Build NestJS App
+
+-   [Build a REST API with NestJS, Prisma, PostgreSQL and Swagger.](https://www.prisma.io/blog/nestjs-prisma-rest-api-7D056s1BmOL0)
+
+## Tools
+
+-   [nestjs/throttler](https://github.com/nestjs/throttler): A rate limiting module for NestJS to work with Fastify, Express, GQL, Websockets, and RPC 🧭
+
+## Articles
+
+-   [NestJS vs. Express.js](https://blog.logrocket.com/nestjs-vs-express-js/).
\ No newline at end of file
diff --git a/content/backend/nodejs.md b/content/backend/nodejs.md
new file mode 100644
index 00000000..ae77b0f9
--- /dev/null
+++ b/content/backend/nodejs.md
@@ -0,0 +1,17 @@
+---
+title: "NodeJS"
+---
+
+## Articles
+
+- [Best Practices for Scaling Your Node.js REST APIs.](https://www.freecodecamp.org/news/nodejs-api-best-practices-for-scaling/)
+- [How To Work with Files Using Streams in Node.js](https://www.digitalocean.com/community/tutorials/how-to-work-with-files-using-streams-in-node-js)
+- [How To Scale Node.js Applications with Clustering](https://www.digitalocean.com/community/tutorials/how-to-scale-node-js-applications-with-clustering)
+- [How To Handle Asynchronous Tasks with Node.js and BullMQ](https://www.digitalocean.com/community/tutorials/how-to-handle-asynchronous-tasks-with-node-js-and-bullmq)
+- 
+
+## Setup a new app
+
+-   [How to set up TypeScript with Node.js and Express](https://blog.logrocket.com/how-to-set-up-node-typescript-express/)
+-   [Bulletproof node.js project architecture 🛡️](https://softwareontheroad.com/ideal-nodejs-project-structure).
+
diff --git a/content/books/api-design-patterns.md b/content/books/api-design-patterns.md
new file mode 100644
index 00000000..7f32e33c
--- /dev/null
+++ b/content/books/api-design-patterns.md
@@ -0,0 +1,41 @@
+---
+title: "API Design Patterns"
+---
+
+## 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.
\ No newline at end of file
diff --git a/content/books/books.md b/content/books/books.md
new file mode 100644
index 00000000..7616eb54
--- /dev/null
+++ b/content/books/books.md
@@ -0,0 +1 @@
+[api-design-patterns](books/api-design-patterns.md)
\ No newline at end of file
diff --git a/content/career/management.md b/content/career/management.md
new file mode 100644
index 00000000..468bd8ef
--- /dev/null
+++ b/content/career/management.md
@@ -0,0 +1,8 @@
+---
+title: "Management"
+---
+
+## Giving Feedback
+- [20 Positive Feedback Examples For Work In 2022 - It Really Matters](https://snacknation.com/blog/positive-feedback-examples/)
+- [Employee feedback: Examples to guide and drive development](https://www.cultureamp.com/blog/employee-feedback-examples)
+- 
\ No newline at end of file
diff --git a/content/career/paths.md b/content/career/paths.md
new file mode 100644
index 00000000..4e5f5e35
--- /dev/null
+++ b/content/career/paths.md
@@ -0,0 +1,9 @@
+---
+title: "Career Paths"
+---
+
+## Frontend
+If you're a **beginner** and want to learn frontend then here's my recommendation: [[roadmap]]
+
+
+## Computer Science
\ No newline at end of file
diff --git a/content/clean-code/clean-code.md b/content/clean-code/clean-code.md
new file mode 100644
index 00000000..ee658b33
--- /dev/null
+++ b/content/clean-code/clean-code.md
@@ -0,0 +1,11 @@
+---
+title: "Clean Code"
+---
+
+[[learning-notes]]
+
+## Awesome
+- [An organized learning path on Clean Code, Test-Driven Development, Legacy Code, Refactoring, Domain-Driven Design and Microservice Architecture](https://github.com/joebew42/study-path)
+
+**See more:**
+[links](clean-code/links.md)
diff --git a/content/clean-code/links.md b/content/clean-code/links.md
new file mode 100644
index 00000000..1f4055e7
--- /dev/null
+++ b/content/clean-code/links.md
@@ -0,0 +1,15 @@
+---
+title: "Clean Code Discussions"
+tags: ["oop"]
+---
+
+Ok, So I separated these stuff from the main page [clean-code](clean-code/clean-code.md) to make this page for discussions and more specific topics.
+
+
+## Readability Over Abstraction
+
+-   [https://softwareengineering.stackexchange.com/questions/60900/do-abstractions-have-to-reduce-code-readability](https://softwareengineering.stackexchange.com/questions/60900/do-abstractions-have-to-reduce-code-readability)
+-   [https://en.wikipedia.org/wiki/KISS_principle](https://en.wikipedia.org/wiki/KISS_principle)
+-   [https://softwareengineering.stackexchange.com/questions/202477/can-too-much-abstraction-be-bad](https://softwareengineering.stackexchange.com/questions/202477/can-too-much-abstraction-be-bad)
+-   [https://softwareengineering.stackexchange.com/questions/398739/too-much-abstraction-making-code-hard-to-extend](https://softwareengineering.stackexchange.com/questions/398739/too-much-abstraction-making-code-hard-to-extend)
+-   [https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction](https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction)
\ No newline at end of file
diff --git a/content/cli/cli.md b/content/cli/cli.md
new file mode 100644
index 00000000..f96236fe
--- /dev/null
+++ b/content/cli/cli.md
@@ -0,0 +1,20 @@
+---
+title: "CLI"
+---
+
+In this page will document my knowledge on command line interface.
+
+## My setup
+
+-   [Tmux](https://github.com/tmux/tmux/wiki) for terminal management.
+-   [Starship](https://starship.rs/) as shell prompt.
+
+## Productivity tools
+
+-   [https://github.com/ankitpokhrel/jira-cli](https://github.com/ankitpokhrel/jira-cli)
+
+
+**See more:**
+[curl](cli/curl.md)
+[learn-cli](cli/learn-cli.md)
+[tmux](cli/tmux.md)
\ No newline at end of file
diff --git a/content/cli/curl.md b/content/cli/curl.md
new file mode 100644
index 00000000..03bb3ee4
--- /dev/null
+++ b/content/cli/curl.md
@@ -0,0 +1,16 @@
+---
+title: "cURL"
+---
+
+## Articles
+
+-   [Linux curl Command Explained with Examples](https://phoenixnap.com/kb/curl-command).
+
+## Examples
+
+```bash
+curl -X POST <https://getpocket.com/v3/oauth/authorize> -d "code=string&consumer_key=string"
+```
+
+-   `-X` to specify the request type.
+-   `-d` data.
\ No newline at end of file
diff --git a/content/cli/learn-cli.md b/content/cli/learn-cli.md
new file mode 100644
index 00000000..05887190
--- /dev/null
+++ b/content/cli/learn-cli.md
@@ -0,0 +1,7 @@
+---
+title: "Learn CLI"
+---
+
+## Resources
+
+-   [explainshell.com](https://explainshell.com/) write down a command-line to see the help text that matches each argument.
\ No newline at end of file
diff --git a/content/cli/tmux.md b/content/cli/tmux.md
new file mode 100644
index 00000000..894346a2
--- /dev/null
+++ b/content/cli/tmux.md
@@ -0,0 +1,21 @@
+---
+title: "TMUX"
+---
+
+[tmux](https://github.com/tmux/tmux/wiki) is one of my favorite tools to manage terminal.
+
+## Articles
+
+-   [Writing Your tmux Config: a Detailed Guide](https://thevaluable.dev/tmux-config-mouseless/)
+-   [Organize Your Work With tmux Sessions](https://blog.dnmfarrell.com/post/organize-your-work-with-tmux/)
+-   [Everything you need to know about tmux – Introduction](https://arcolinux.com/everthing-you-need-to-know-about-tmux-introduction/)
+
+## Cheatsheet
+
+-   [https://tmuxcheatsheet.com/](https://tmuxcheatsheet.com/)
+-   [https://gist.github.com/MohamedAlaa/2961058](https://gist.github.com/MohamedAlaa/2961058)
+
+## My Config
+
+-   You’ll find my [`[.tmux.conf` file here](https://github.com/zeyadetman/dotfiles/blob/main/.tmux.conf).
+-   Find my [tmux stars ⭐️ on github](https://github.com/stars/zeyadetman/lists/tmux).
\ No newline at end of file
diff --git a/content/code-snippets/center-in-css.md b/content/code-snippets/center-in-css.md
new file mode 100644
index 00000000..413d96f2
--- /dev/null
+++ b/content/code-snippets/center-in-css.md
@@ -0,0 +1,15 @@
+---
+title: "Center elements in Css"
+tags:
+- css
+---
+
+## Centering div
+
+- Using Grid
+```css
+.parent {
+  display: grid;
+  place-items: center;
+}
+```
\ No newline at end of file
diff --git a/content/code-snippets/code-snippets.md b/content/code-snippets/code-snippets.md
new file mode 100644
index 00000000..48b8784f
--- /dev/null
+++ b/content/code-snippets/code-snippets.md
@@ -0,0 +1,13 @@
+---
+title: "Code Snippets"
+tags:
+- golang
+- css
+---
+
+1. [golang](programming-languages/golang.md)
+- [[tic-tac-toe]]
+
+
+2. CSS.
+- [[center-in-css]]
\ No newline at end of file
diff --git a/content/code-snippets/tic-tac-toe.md b/content/code-snippets/tic-tac-toe.md
new file mode 100644
index 00000000..5ecf092f
--- /dev/null
+++ b/content/code-snippets/tic-tac-toe.md
@@ -0,0 +1,86 @@
+---
+title: "Tic Tac Toe using golang"
+tags:
+- golang
+---
+
+#golang
+
+```go
+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
+		}
+	}
+}
+```
\ No newline at end of file
diff --git a/content/database/database.md b/content/database/database.md
new file mode 100644
index 00000000..81efc1c7
--- /dev/null
+++ b/content/database/database.md
@@ -0,0 +1,27 @@
+---
+title: "Databases"
+---
+
+## Tools
+
+-   [Table Plus.](https://tableplus.com/)
+-   [Mysql Workbench](https://www.mysql.com/products/workbench/)
+
+## Concepts
+
+### Normalization
+- [Learn Database Normalization - 1NF, 2NF, 3NF, 4NF, 5NF ⭐️](https://www.youtube.com/watch?v=GFQaEYEc8_8)
+- [1st, 2nd and 3rd Normal Form (Database Normalisation)](https://youtu.be/J-drts33N8g)
+
+### N+1 Problem
+- [What is the N+1 Problem in GraphQL?](https://medium.com/the-marcy-lab-school/what-is-the-n-1-problem-in-graphql-dd4921cb3c1a)
+- [Understanding, identifying and fixing the N+1 query problem](https://schneide.blog/2021/12/06/understanding-identifying-and-fixing-the-n1-query-problem/)
+
+
+## Articles
+
+-   [Difference between Natural join and Inner Join in SQL](https://www.geeksforgeeks.org/difference-between-natural-join-and-inner-join-in-sql/)
+
+**See more**
+[firebase](database/firebase.md)
+[postgresql](database/postgresql.md)
diff --git a/content/database/firebase.md b/content/database/firebase.md
new file mode 100644
index 00000000..05aa1098
--- /dev/null
+++ b/content/database/firebase.md
@@ -0,0 +1,9 @@
+---
+title: "Firebase"
+---
+
+[https://firebase.google.com/](https://firebase.google.com/)
+
+## Articles
+
+-   [7 tips on Firebase security rules and the Admin SDK](https://firebase.blog/posts/2019/03/firebase-security-rules-admin-sdk-tips).
\ No newline at end of file
diff --git a/content/database/postgresql.md b/content/database/postgresql.md
new file mode 100644
index 00000000..7996d8a1
--- /dev/null
+++ b/content/database/postgresql.md
@@ -0,0 +1,13 @@
+---
+title: "PostgreSQL"
+---
+
+[https://www.postgresql.org/](https://www.postgresql.org/) .
+
+## Learning
+
+-   [https://www.postgresqltutorial.com/](https://www.postgresqltutorial.com/) If you prefer reading tutorials (with hands on).
+
+## Tools
+
+-   [https://www.pgadmin.org/](https://www.pgadmin.org/)
\ No newline at end of file
diff --git a/content/design-patterns/behavioral.md b/content/design-patterns/behavioral.md
new file mode 100644
index 00000000..4d91e80c
--- /dev/null
+++ b/content/design-patterns/behavioral.md
@@ -0,0 +1,62 @@
+---
+title: "Behavioral Design Patterns"
+---
+
+#### [Strategy Design Pattern (Behavioral)](https://www.thisdot.co/blog/clean-up-your-code-with-design-patterns-in-javascript)
+
+Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm exist very independently from clients that use it.
+
+[![strategy-pattern](https://camo.githubusercontent.com/5a9d9c6c2071047d1b316ac2e2a0c874f52af235aa90e3c95ddf408ba698058e/68747470733a2f2f696d616765732e636f6e74656e7466756c2e636f6d2f7a6f6a7a7a646f7030667a782f66534433624f35555759494370626e7950327a726c2f34333233316439373036653834326439353831313537646666376236626332332f53747261746567792e676966)](https://camo.githubusercontent.com/5a9d9c6c2071047d1b316ac2e2a0c874f52af235aa90e3c95ddf408ba698058e/68747470733a2f2f696d616765732e636f6e74656e7466756c2e636f6d2f7a6f6a7a7a646f7030667a782f66534433624f35555759494370626e7950327a726c2f34333233316439373036653834326439353831313537646666376236626332332f53747261746567792e676966)
+
+
+```ts
+
+/**
+ * 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();
+
+
diff --git a/content/design-patterns/design-patterns.md b/content/design-patterns/design-patterns.md
new file mode 100644
index 00000000..b3791d97
--- /dev/null
+++ b/content/design-patterns/design-patterns.md
@@ -0,0 +1,17 @@
+---
+title: "Design Patterns"
+---
+
+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
+
+-   [Learning Design Patterns: A Summary.](https://lo-victoria.com/learning-design-patterns-a-summary)
+-   [Decorator design pattern](https://refactoring.guru/design-patterns/decorator)
+
+## Learn more
+- https://github.com/AbdurRKhalid/Design-Patterns
+- 
+
+**See more:**
+[behavioral](design-patterns/behavioral.md)
\ No newline at end of file
diff --git a/content/devops/devops.md b/content/devops/devops.md
new file mode 100644
index 00000000..865e5c45
--- /dev/null
+++ b/content/devops/devops.md
@@ -0,0 +1,9 @@
+---
+title: "Devops"
+---
+
+## Feature Flags
+
+### Articles
+
+- https://www.atlassian.com/continuous-delivery/principles/feature-flags
\ No newline at end of file
diff --git a/content/frontend/assets-illustrations.md b/content/frontend/assets-illustrations.md
new file mode 100644
index 00000000..9290bb70
--- /dev/null
+++ b/content/frontend/assets-illustrations.md
@@ -0,0 +1,6 @@
+---
+title: "Assets & Illustrations"
+---
+
+* 100,000 icons, illustrations and emoji for all your projects. ([streamlinehq.com](https://www.streamlinehq.com))
+* Open-source illustrations for any idea you can imagine and create. ([https://undraw.co/](https://undraw.co))
diff --git a/content/frontend/colors.md b/content/frontend/colors.md
new file mode 100644
index 00000000..0c6ce19b
--- /dev/null
+++ b/content/frontend/colors.md
@@ -0,0 +1,21 @@
+---
+title: "Colors"
+---
+
+#### Generate color palette
+
+* [https://coolors.co/](https://coolors.co)
+
+#### Generate Color Gradients
+
+https://www.joshwcomeau.com/gradient-generator/
+
+
+**My Preferred colors theme**
+
+* [https://colorable.jxnblk.com/090808/fab828](https://colorable.jxnblk.com/090808/fab828)
+![[Pasted image 20221024140943.png]]
+* [https://colorable.jxnblk.com/b73e25/001f31](https://colorable.jxnblk.com/b73e25/001f31)
+![[Pasted image 20221024140924.png]]
+* [https://colorable.jxnblk.com/f5a58b/065771](https://colorable.jxnblk.com/f5a58b/065771)
+![[Pasted image 20221024141003.png]]
\ No newline at end of file
diff --git a/content/frontend/css.md b/content/frontend/css.md
new file mode 100644
index 00000000..33efc7f0
--- /dev/null
+++ b/content/frontend/css.md
@@ -0,0 +1,9 @@
+---
+title: CSS
+---
+# Generators
+
+- [CSS Section Separator Generator](https://wweb.dev/resources/css-separator-generator)
+- [Make some waves!](https://getwaves.io/)
+- [blob maker](https://www.blobmaker.app/)
+- [Haikei: Generate unique SVG design assets](https://haikei.app/)
\ No newline at end of file
diff --git a/content/frontend/design-systems.md b/content/frontend/design-systems.md
new file mode 100644
index 00000000..9a1214e4
--- /dev/null
+++ b/content/frontend/design-systems.md
@@ -0,0 +1,43 @@
+---
+title: "Design Systems"
+---
+
+### Visualize your components
+
+* [https://github.com/react-cosmos/react-cosmos](https://github.com/react-cosmos/react-cosmos)
+* [storybook](https://storybook.js.org/)
+
+### Document your components
+
+* [react-styleguide](https://github.com/styleguidist/react-styleguidist)
+
+### Books
+
+* [Invision design system handbook.](https://s3.amazonaws.com/designco-web-assets/uploads/2019/05/InVision\_DesignSystemsHandbook.pdf)
+
+### Articles
+
+* [Component Based Design System With Styled-System.](https://varun.ca/styled-system/)
+* [UI component explorers — your new favorite tool](https://www.chromatic.com/blog/ui-component-explorers---your-new-favorite-tool/)
+* [Customize MUI theme with TypeScript](articles/mui-design-system.md) - *by me*
+
+### Design Systems
+
+* [Building Box.](https://www.figma.com/community/file/1048327171347943164)
+
+### Rich Components
+
+* [https://baseweb.design/](https://baseweb.design/) (Uber design system)
+* [https://chakra-ui.com/](https://chakra-ui.com/)
+
+### Build your own
+
+* [https://theme-ui.com/](https://theme-ui.com/)
+* [https://styled-system.com/](https://styled-system.com/)
+
+### Courses
+
+* [Design Systems with React & Storybook.](https://frontendmasters.com/courses/design-systems/)
+
+### Colors
+[colors](frontend/colors.md)
\ No newline at end of file
diff --git a/content/frontend/frontend.md b/content/frontend/frontend.md
new file mode 100644
index 00000000..a998a1f6
--- /dev/null
+++ b/content/frontend/frontend.md
@@ -0,0 +1,37 @@
+---
+title: "Frontend Articles"
+---
+
+### Layout
+
+* [https://css-tricks.com/the-inside-problem/](https://css-tricks.com/the-inside-problem/)
+
+### Performance
+
+* [Embracing modern image formats.](https://www.joshwcomeau.com/performance/embracing-modern-image-formats)
+* [Best Practices on How to Compress Images For Reactjs.](https://tamalweb.com/compress-images-reactjs#use-webpavif-images-for-even-better-compression)
+* [Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/)
+* [When Does React Render Your Component?](https://www.zhenghao.io/posts/react-rerender)
+
+### Regular Expressions
+
+* [Lookahead and lookbehind in javascript.](https://javascript.info/regexp-lookahead-lookbehind)
+
+### Design System
+[[frontend/design-systems#Articles|Desgin System Articles]]
+
+### Styles
+- [The Surprising Truth About Pixels and Accessibility](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/)
+
+### Icons
+[https://lucide.dev](https://lucide.dev)
+
+### Animation
+- [Framer Motion.](https://www.framer.com/motion/)
+
+**Read more...**
+- [reactjs](reactjs/reactjs.md)
+- [assets-illustrations](frontend/assets-illustrations.md)
+- [colors](frontend/colors.md)
+- [design-systems](frontend/design-systems.md)
+- [roadmap](frontend/roadmap.md)
\ No newline at end of file
diff --git a/content/frontend/interview.md b/content/frontend/interview.md
new file mode 100644
index 00000000..d10aedd6
--- /dev/null
+++ b/content/frontend/interview.md
@@ -0,0 +1,12 @@
+---
+title: "Interview Prep"
+---
+
+
+## Resources 
+- [This discussion on leetcode](https://leetcode.com/discuss/interview-question/1074798/frontend-interview-preparation-resources-1-4-years-exp) is one of my best resources in the frontend interview prep.
+
+
+### JavaScript
+[[javascript]]
+- https://jsvault.com/ collection of tricky JS interview questions.
\ No newline at end of file
diff --git a/content/frontend/pwa.md b/content/frontend/pwa.md
new file mode 100644
index 00000000..8a5fa9d2
--- /dev/null
+++ b/content/frontend/pwa.md
@@ -0,0 +1,5 @@
+---
+title: "PWA"
+---
+
+[How we built Twitter Lite](https://blog.twitter.com/engineering/en_us/topics/open-source/2017/how-we-built-twitter-lite)
\ No newline at end of file
diff --git a/content/frontend/roadmap.md b/content/frontend/roadmap.md
new file mode 100644
index 00000000..3866d406
--- /dev/null
+++ b/content/frontend/roadmap.md
@@ -0,0 +1,85 @@
+---
+title: "Frontend Roadmap"
+---
+
+# Frontend
+
+## Frontend Learning Path (Updated 2022)
+
+### Notes before learning
+
+1. 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**_).
+2. Applying what you're learning is a regular activity that you must do while learning anything in programming, **code** everything you learn.
+3. While learning or doing, you'll definitely struggle in doing things, I strongly recommend create a [stackoverflow.com](http://stackoverflow.com) or [reddit.com](https://reddit.com) account and **ASK** the community, please don't hesitate to ask communities, [Learn how to ask a good question](https://stackoverflow.com/help/how-to-ask) it's a powerful skill!
+4. 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**_.
+5. 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.
+6. 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](https://www.youtube.com/watch?v=7\_LPdttKXPc\&ab\_channel=Aaron)
+* \[en]\[video] [https://www.youtube.com/watch?v=Sfzo4xm5eX8](https://www.youtube.com/watch?v=Sfzo4xm5eX8\&ab\_channel=BLASTERTECHNOLOGY)
+* \[en]\[article] [https://www.hp.com/us-en/shop/tech-takes/how-does-the-internet-work](https://www.hp.com/us-en/shop/tech-takes/how-does-the-internet-work)
+* \[ar]\[video] [https://www.youtube.com/watch?v=w1GpaH8XIUE](https://www.youtube.com/watch?v=w1GpaH8XIUE)
+
+#### HTML
+
+* \[en]\[video] [https://www.youtube.com/watch?v=pQN-pnXPaVg](https://www.youtube.com/watch?v=pQN-pnXPaVg)
+* \[ar]\[video] [https://www.youtube.com/watch?v=q3yFo-t1ykw](https://www.youtube.com/watch?v=q3yFo-t1ykw\&t=1109s)
+
+#### CSS
+
+* \[en]\[video] [https://www.youtube.com/watch?v=1Rs2ND1ryYc](https://www.youtube.com/watch?v=1Rs2ND1ryYc)
+* \[ar]\[video] [https://www.youtube.com/watch?v=Z-5QVutAEW4](https://www.youtube.com/watch?v=Z-5QVutAEW4\&t=4735s)
+
+#### 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](https://www.youtube.com/watch?v=O7WbVj5apxU)
+* \[ar]\[video] [https://www.youtube.com/watch?v=cARGOrtiWt4](https://www.youtube.com/watch?v=cARGOrtiWt4)
+
+#### Javascript
+[Javascript](programming-languages/javascript.md)
+
+* \[en]\[video] [https://www.youtube.com/watch?v=PkZNo7MFNFg](https://www.youtube.com/watch?v=PkZNo7MFNFg\&t=9574s)
+* \[ar]\[video] [https://www.youtube.com/watch?v=Ai\_0ONyPay4](https://www.youtube.com/watch?v=Ai\_0ONyPay4\&t=5606s)
+
+#### 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](https://www.youtube.com/watch?v=3PHXvlpOkf4)
+
+#### React
+[Reactjs](reactjs/reactjs.md)
+
+* \[en]\[video] [https://www.youtube.com/watch?v=LlvBzyy-558](https://www.youtube.com/watch?v=LlvBzyy-558)
+* \[en]\[video] [https://www.youtube.com/watch?v=MfIoAG3e7p4](https://www.youtube.com/watch?v=MfIoAG3e7p4)
+
+#### React Practice
+
+* \[playlist] [https://www.youtube.com/watch?v=GDa8kZLNhJ4\&list=PL6QREj8te1P6wX9m5KnicnDVEucbOPsqR](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](frontend/design-systems.md)
+* Testing.
+* Server side rendering.
+* [Git](git/git.md)
+* state machine.
+* [Design Patterns](design-patterns/design-patterns.md)
+* learn other frontend frameworks.
diff --git a/content/git/git-bisect.md b/content/git/git-bisect.md
new file mode 100644
index 00000000..8e99fab5
--- /dev/null
+++ b/content/git/git-bisect.md
@@ -0,0 +1,13 @@
+---
+title: "Git Bisect"
+---
+
+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://youtu.be/bkxvSQ0WMuE)
+
+https://www.youtube.com/watch?ab_channel=ZeyadEtman&v=bkxvSQ0WMuE"
+
+More details on [Git Documentation](https://git-scm.com/docs/git-bisect).
diff --git a/content/git/git-log.md b/content/git/git-log.md
new file mode 100644
index 00000000..2e0206cb
--- /dev/null
+++ b/content/git/git-log.md
@@ -0,0 +1,9 @@
+---
+title: "Git Log"
+---
+
+### Git Log
+
+#### Search commits for specific word
+
+`git log -S "import { blabla }" --oneline`
diff --git a/content/git/git.md b/content/git/git.md
new file mode 100644
index 00000000..48a6eda0
--- /dev/null
+++ b/content/git/git.md
@@ -0,0 +1,16 @@
+---
+title: "Git"
+---
+
+Here's one of the best things to learn git by doing: https://wyag.thb.lt
+
+## Visualizations
+- [A Visual Git Reference](https://marklodato.github.io/visual-git-guide/index-en.html)
+
+## Tutorials
+- [A Better Model for Stacked (GitHub) Pull Requests](https://timothya.com/blog/git-stack/#rebase-no-conflict)
+
+**See more**
+- [git-log](git/git-log.md)
+- [git-bisect](git/git-bisect.md)
+- [jira-ticket-git-flow](scripts/jira-ticket-git-flow.md)
diff --git a/content/git/tips.md b/content/git/tips.md
new file mode 100644
index 00000000..c2d8f80e
--- /dev/null
+++ b/content/git/tips.md
@@ -0,0 +1,16 @@
+---
+title: "Git Tips & Tricks"
+---
+
+## 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: 
+- https://git-scm.com/docs/git-ls-files
+- https://stackoverflow.com/a/42363882/5721245
diff --git a/content/keycloak/handle-https.md b/content/keycloak/handle-https.md
new file mode 100644
index 00000000..93e94756
--- /dev/null
+++ b/content/keycloak/handle-https.md
@@ -0,0 +1,86 @@
+---
+title: "Configure Keycloak instance to run on localhost using https on macOS"
+---
+
+## 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
+
+![Your connection is not private](Pasted%20image%2020230807040814.png)
+
+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.
+
+![](Pasted%20image%2020230807041239.png)
+
+Great! So now we can do the request to localhost with an invalid certificate.
+
+### Certificate is not valid
+
+Now we're facing this error
+
+![The current case](Pasted%20image%2020230807040044.png)
+
+When you click over it, you'll see that the certificate is not valid, in the next steps we'll trust this certificate
+
+![](Pasted%20image%2020230807040342.png)
+
+To solve this issue, we need to trust the certificate on our machine, to do this
+1. Click on *Certificate is not valid* button.
+2. You'll see a Certificate Viewer popup, Click on the details tab.
+3. Click on **Export** and select **PKCS #7, single certificate**.
+4. Open **Keychain Access** app on your macOS and select **Login**.
+5. File > Import Items > select the file/certificate you've exported from chrome.
+6. 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
+
+```bash
+ 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.
+
+![](Pasted%20image%2020230807043106.png)
+
+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
+
+````bash
+bin/kc.[sh|bat] start --https-certificate-file=/path/to/certfile.pem --https-certificate-key-file=/path/to/keyfile.pem
+````
+
+
+
+### Resources
+
+- https://www.keycloak.org/server/enabletls
+- https://letsencrypt.org/docs/certificates-for-localhost/
+
+
+*Have you learned something new? Want to learn more?*
+
+[tips](git/tips.md)
\ No newline at end of file
diff --git a/content/learning-notes.md b/content/learning-notes.md
new file mode 100644
index 00000000..4f402d52
--- /dev/null
+++ b/content/learning-notes.md
@@ -0,0 +1,9 @@
+---
+title: "Learning Notes"
+---
+
+- **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.
\ No newline at end of file
diff --git a/content/oop/oop.md b/content/oop/oop.md
new file mode 100644
index 00000000..815ab543
--- /dev/null
+++ b/content/oop/oop.md
@@ -0,0 +1,12 @@
+---
+title: "Object Oriented Programming"
+---
+
+## Polymorphism
+
+### Articles
+
+[Polymorphic this Type in TypeScript | DigitalOcean](https://www.digitalocean.com/community/tutorials/typescript-polymorphic-this)
+
+-   [https://www.cloudhadoop.com/2018/07/learn-overloading-in-typescript-with.html](https://www.cloudhadoop.com/2018/07/learn-overloading-in-typescript-with.html)
+-   [https://www.cloudhadoop.com/2018/09/typescript-understanding-polymorphism.html](https://www.cloudhadoop.com/2018/09/typescript-understanding-polymorphism.html)
\ No newline at end of file
diff --git a/content/problem-solving/me-on-problem-solving.md b/content/problem-solving/me-on-problem-solving.md
new file mode 100644
index 00000000..4e8c98e9
--- /dev/null
+++ b/content/problem-solving/me-on-problem-solving.md
@@ -0,0 +1,13 @@
+---
+title: "Follow me for PS"
+---
+
+Here's my digital presence on the popular problem solving sites.
+
+[**CodeForces.**](http://codeforces.com/profile/zeyadetman)
+
+[**LeetCode.**](https://leetcode.com/zeyadetman/)
+
+[**uHunt.**](https://uhunt.onlinejudge.org/id/322321)
+
+[**HackerRank.**](https://www.hackerrank.com/zeyadetman)
diff --git a/content/problem-solving/problem-solving.md b/content/problem-solving/problem-solving.md
new file mode 100644
index 00000000..e9ad8b4e
--- /dev/null
+++ b/content/problem-solving/problem-solving.md
@@ -0,0 +1,23 @@
+---
+title: "Problem Solving"
+---
+
+# Sorting Algorithms Resources
+
+### Complexity of Sort Types
+[http://stackoverflow.com/questions/1933759/when-is-each-sorting-algorithm-used](http://stackoverflow.com/questions/1933759/when-is-each-sorting-algorithm-used)
+
+### Visual
+[http://visualgo.net/sorting](http://visualgo.net/sorting)
+[https://www.toptal.com/developers/sorting-algorithms](https://www.toptal.com/developers/sorting-algorithms)
+
+## Resources to get started
+- [Mustafa Saad sheet.](https://goo.gl/unDETI) ⭐️
+- [How to use LeetCode to help yourself efficiently and effectively (for beginners)](https://leetcode.com/discuss/career/450215/How-to-use-LeetCode-to-help-yourself-efficiently-and-effectively-(for-beginners))
+
+
+## IDEs
+- **C++:** [Code::Blocks](https://www.codeblocks.org/)
+
+**See more:**
+[Follow me](problem-solving/me-on-problem-solving.md)
diff --git a/content/productivity.md b/content/productivity.md
new file mode 100644
index 00000000..be766588
--- /dev/null
+++ b/content/productivity.md
@@ -0,0 +1,7 @@
+---
+title: "Productivity"
+---
+## Articles
+
+* [Ten Years of Logging My Life.](https://chaidarun.com/ten-years-of-logging-my-life)
+* [Pmarca Guide to Personal Productivity](https://fictivekin.github.io/pmarchive-jekyll/guide_to_personal_productivity.html)
\ No newline at end of file
diff --git a/content/programming-languages/cpp.md b/content/programming-languages/cpp.md
new file mode 100644
index 00000000..68c0be0f
--- /dev/null
+++ b/content/programming-languages/cpp.md
@@ -0,0 +1,49 @@
+---
+title: "C++ Programming Languages"
+---
+
+# 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.
+
+```cpp
+trasform(s.begin(),s.end(),s.begin(),::tolower);
+```
+
+#### check this character is alpha.
+
+```cpp
+isalpha(char);
+```
+
+#### check the character is in upper case
+
+```cpp
+isupper(char);
+```
+
+#### Import all libs
+
+```cpp
+<bits/stdc++.h>
+```
+
+#### copy contents of deque of chars into string
+
+```cpp
+std::string ss(dqu.begin(),dqu.end());
+```
+
+#### Modulo of a negative number [\[Example\]](http://codeforces.com/contest/450/problem/B)
+
+```cpp
+(?n)%k == (k?(n%k))%k
+```
+
+#### Find substring
+
+```cpp
+std::size_t zero7 = s.find("0000000"); if(zero7!=std::string::npos) found=true;
+```
diff --git a/content/programming-languages/golang.md b/content/programming-languages/golang.md
new file mode 100644
index 00000000..aaabaefc
--- /dev/null
+++ b/content/programming-languages/golang.md
@@ -0,0 +1,291 @@
+---
+title: "GO Lang"
+tags:
+- golang
+---
+
+#golang 
+
+## Articles
+- [How to become a Golang developer: 10 steps career path](https://www.softkraft.co/how-to-become-golang-developer)
+
+## Syntax
+
+- Variables
+```go
+package main
+import {
+  "fmt"
+}
+
+func main() {
+	var var1 string = "Hello"
+	var var2 int32 = 43
+	var3 := 44; // int
+	var4 := "hello" // string
+	const var5 = 5;
+	var5 = 6 // [error] cannot assign to var5 (untyped int constant 5)
+
+
+	type obj struct {
+		name string
+		age  int
+	}
+
+	obj1 := obj{name: "zeyad", age: 27}
+}
+```
+
+- If and Switch
+```go
+...
+x := 4
+if x >= 4 {
+	fmt.Println("Greater")
+} else if x == 4 {
+	fmt.Println("Equal")
+} else {
+	fmt.Println("Less")
+}
+
+
+
+p := myString{value: "Zeyad", key: "name"}
+
+  
+
+switch p.key {
+	case "name":
+		fmt.Println("Name is", p.value)
+	case "age":
+		fmt.Println("Age is", p.value)
+	default:
+		fmt.Println("No value")
+}
+...
+```
+
+- Arrays
+```go
+
+arr0 := [10]string
+arr1 := [5]int{1, 2, 3, 4, 5}
+arr[2] = 10
+
+var arr2 = [10]string{}
+fmt.Println(arr)
+fmt.Println(len(arr)) //length
+
+matrix := [2][3]int{}
+matrix[0][0] = 1
+fmt.Println(matrix)
+```
+
+- Loops
+```go
+var seq [4][4]int
+for i := 0; i < len(seq); i++ {
+	for j := 0; j < len(seq[i]); j++ {
+		seq[i][j] = i + j
+	}
+}
+
+counter := 6
+for counter != 0 {
+	fmt.Println(counter)
+	counter--
+}
+
+for {
+	fmt.Println("infinite loop")
+}
+```
+
+- Hands on [[tic-tac-toe]]
+- Slices.
+```go
+var slice1 = []string{}
+var slice2 = []string{"aaa"}
+slice3 := make([]string, 0) // 0 length
+slice1 = append(slice2, "a")
+
+slice3 = append(slice3, "a")
+slice3 = append(slice3, "b")
+
+slice1[0] = "b"
+fmt.Println(slice2, slice1, slice3) // [aaa] [b a] [a b]
+
+copy(slice2, slice1)                // copy(dest, src) copying is depending on the length of the dest
+fmt.Println(slice2, slice1, slice3) // [b] [b a] [a b]
+
+slice1 = append(slice1, "c")
+
+s := slice1[0:2] // by reference from 0 to 2 (not including 2), but it'll not expand
+slice1[0] = "d"
+fmt.Println(s, slice1) // [d a] [d a c]
+```
+
+- Maps
+```go
+maptest := map[string]string{
+	"key1": "value1",
+	"key2": "value2",
+}
+
+fmt.Println(maptest)
+
+map2 := make(map[string]string)
+map2["key1"] = "value1"
+map2["key2"] = "value2"
+
+delete(map2, "key1")
+
+// we use ok to check if the key exists and differentiate between default value and the actual value
+v, ok := map2["key1"] // ok is false if key is not present, true otherwise
+
+fmt.Println(v, ok) // prints " " false
+
+map3 := map[string][]string{
+	"key1": []string{"value1", "value2"}, // redundant type
+	"key2": {"value1", "value2"},         // redundant type (solved)
+}
+
+fmt.Println(map3)
+```
+
+- Range
+```go
+// Range
+
+arr1 := []string{"zeyad", "vvv", "drrr", "llooo"}
+map1 := map[string]string{
+	"ass":  "asda",
+	"key1": "value1",
+}
+
+for k, v := range arr1 {
+	fmt.Println(k, v)
+}
+
+for k, v := range map1 {
+	fmt.Println(k, v)
+}
+```
+
+- Functions
+```go
+package main
+
+import "fmt"
+
+func pl(s string) {
+	fmt.Println(s)
+}
+
+func plAll(params ...interface{}) { // interface is a generic datatype, similar to ...rest in javascript
+	fmt.Println(len(params))
+}
+
+func f1(x, y int) int { // similar to f1(x int, y int)
+	return x + y
+}
+
+func f2(x string) (string, int) { // return multiple values
+	return x, len(x) // hello 5
+}
+
+func f3(x string) (r string, count int) { // return vars declared here no need to return them
+	r = x
+	count = len(x)
+	return
+}
+
+func main() {
+	fmt.Println(f3("hello"))
+	var x func(x, y int) int // function as datatype
+	x = f1
+	fmt.Println(x(3, 4)) // 7
+}
+```
+
+- Pointers
+```go
+package main
+
+import "fmt"
+
+func set(s *string) {
+	*s = "zzz" // changing the x var as well
+}
+
+func main() {
+	var x string = "zeyad"
+	set(&x) // sending the reference
+
+	fmt.Println(x, &x)
+}
+```
+
+- Structs
+```go
+package main
+
+import "fmt"
+
+type player struct {
+	firstName string
+	lastName  string
+	id        int
+}
+
+type game struct {
+	players map[string]*player // map of reference of structs
+}
+
+type gameBase struct {
+	game // game struct as an "embedded field"
+	next *gameBase
+}
+
+// create a function on a struct
+func (g *game) iteratePlayers() []string {
+	fmt.Println("GGG: ", g.players)
+	result := []string{}
+	for _, val := range g.players {
+		result = append(result, val.firstName)
+	}
+
+	return result
+}
+
+func main() {
+
+	g := &game{
+		players: make(map[string]*player),
+	}
+
+	p1 := player{}
+	p2 := player{firstName: "John", lastName: "Doe", id: 2}
+	g.players["p1"] = &p1
+	g.players["p2"] = &p2
+	p1.firstName = "zeyad"
+	fmt.Println(g, p1) // &{map[p1:0xc00010e1b0]} {zeyad  0}
+	playerNames := g.iteratePlayers()
+	fmt.Println(playerNames) // [zeyad John]
+
+	// chaining
+	gb := &gameBase{}
+	gb.iteratePlayers() // This Works
+}
+
+```
+
+- Interfaces
+
+
+## Notes
+- [You cannot use methods on structs if you declared your struct inside function.](https://stackoverflow.com/questions/42010112/implications-of-defining-a-struct-inside-a-function-vs-outside)
+- [Go Variable Scope](https://www.programiz.com/golang/variable-scope)
+
+## Resources
+- [Learn Go with Tests](https://quii.gitbook.io/learn-go-with-tests/)
\ No newline at end of file
diff --git a/content/programming-languages/javascript.md b/content/programming-languages/javascript.md
new file mode 100644
index 00000000..fda0f6b2
--- /dev/null
+++ b/content/programming-languages/javascript.md
@@ -0,0 +1,7 @@
+---
+title: "Javascript Programming Languages"
+---
+
+## Articles
+
+-   [When to Use Bind(), Call(), and Apply() in JavaScript.](https://betterprogramming.pub/when-to-use-bind-call-and-apply-in-javascript-1ae9d7fa66d5)
diff --git a/content/programming-languages/notes-on-typescript.md b/content/programming-languages/notes-on-typescript.md
new file mode 100644
index 00000000..3eec3e8e
--- /dev/null
+++ b/content/programming-languages/notes-on-typescript.md
@@ -0,0 +1,16 @@
+---
+title: "Notes on Typescript"
+---
+
+- **Pick** `Pick<type, keys>`
+Pick keys only from type.
+
+- **Omit** `Omit<type, “key1” | “key2”>` **opposite Pick**
+Pick all from *type* exclude *keys*.
+
+- **Record** `Record<keys, type>`
+Construct object with keys and values of type *type*.
+
+
+
+[typescript](programming-languages/typescript.md)
\ No newline at end of file
diff --git a/content/programming-languages/programming-languages.md b/content/programming-languages/programming-languages.md
new file mode 100644
index 00000000..e22799bd
--- /dev/null
+++ b/content/programming-languages/programming-languages.md
@@ -0,0 +1,10 @@
+---
+title: "Programming Languages"
+---
+
+Notes from my knowledge about programming languages.
+
+- [javascript](programming-languages/javascript.md)
+- [cpp](programming-languages/cpp.md)
+- [golang](golang.md)
+- [typescript](programming-languages/typescript.md)
\ No newline at end of file
diff --git a/content/programming-languages/typescript.md b/content/programming-languages/typescript.md
new file mode 100644
index 00000000..8f2226fa
--- /dev/null
+++ b/content/programming-languages/typescript.md
@@ -0,0 +1,30 @@
+---
+title: "Typescript"
+---
+
+## Articles with Reactjs
+This articles I found them useful while you're writing typescript with [[reactjs/reactjs]]
+
+- [Build strongly typed polymorphic components with React and TypeScript](https://blog.logrocket.com/build-strongly-typed-polymorphic-components-react-typescript/)
+- [Useful Patterns by Use Case](https://github.com/typescript-cheatsheets/react/blob/main/docs/advanced/patterns_by_usecase.md)
+- [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/)
+- [TypeScript Generics for People Who Gave Up on Understanding Generics](https://ts.chibicode.com/generics/)
+
+## Advanced Topics
+- [Generics](https://www.typescriptlang.org/docs/handbook/2/generics.html)
+- [Performance](https://github.com/microsoft/TypeScript/wiki/Performance)
+- [ArrayT> vs T[]: Which is better?](https://www.totaltypescript.com/array-types-in-typescript)
+
+## Tutorials
+- [Learn react and typescript ⭐️](https://youtube.com/playlist?list=PLNqp92_EXZBJ4CBroxVBJEpAXoz1g-naZ)
+- [Advanced Typescript by Matt Pocock ⭐️](https://youtube.com/playlist?list=PLIvujZeVDLMx040-j1W4WFs1BxuTGdI_b)
+
+## Articles
+- [How To Use Generics in TypeScript](https://www.digitalocean.com/community/tutorials/how-to-use-generics-in-typescript) #generics #typescript 
+
+
+## Tools
+- [Typescript coverage.](https://github.com/alexcanessa/typescript-coverage-report)
+
+
+[notes-on-typescript](content/programming-languages/notes-on-typescript.md)
\ No newline at end of file
diff --git a/content/reactjs/libraries.md b/content/reactjs/libraries.md
new file mode 100644
index 00000000..c16be403
--- /dev/null
+++ b/content/reactjs/libraries.md
@@ -0,0 +1,21 @@
+---
+title: "ReactJS Libraries"
+tags:
+- reactjs
+---
+
+## Libraries [[reactjs]]
+This includes some bookmarks for reactjs libraries.
+
+## Charts
+- [React Google Charts](https://react-google-charts.com/)
+- [15 React Chart Libraries For Your Web Projects](https://technostacks.com/blog/react-chart-libraries/)
+- [Top 5 React chart libraries](https://blog.logrocket.com/top-5-react-chart-libraries/)
+
+## Image and Gallery
+- [react-slick](https://github.com/akiran/react-slick)
+- 
+
+## React Query
+- [Building The Real App With React Query](https://www.smashingmagazine.com/2022/01/building-real-app-react-query/)
+- [Clean API Architecture for React Project](https://www.upbeatcode.com/react/clean-api-architecture-for-react-project/)
\ No newline at end of file
diff --git a/content/reactjs/nextjs.md b/content/reactjs/nextjs.md
new file mode 100644
index 00000000..108cc3f9
--- /dev/null
+++ b/content/reactjs/nextjs.md
@@ -0,0 +1,6 @@
+
+## Building a new app boilerplates
+
+- https://giga-stack.vercel.app/
+- https://refine.new/
+- 
diff --git a/content/reactjs/reactjs.md b/content/reactjs/reactjs.md
new file mode 100644
index 00000000..b9d25281
--- /dev/null
+++ b/content/reactjs/reactjs.md
@@ -0,0 +1,45 @@
+---
+title: "ReactJS Articles"
+tags:
+- typescript
+- E2E testing
+- Cypress
+- Material UI
+- Amplify
+---
+### Articles [[reactjs]]
+
+[React Docs](https://beta.reactjs.org/)
+
+* [3 React Component Design Patterns You Should Know About.](https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about)
+* [⚛️ 🚀 React Component Patterns](https://dev.to/alexi\_be3/react-component-patterns-49ho#provider-pattern).
+* [SOLID Principles in React](https://www.everydayreact.com/articles/solid-principles-in-react) 
+* [Ultimate React Component Patterns with Typescript 2.8](https://levelup.gitconnected.com/ultimate-react-component-patterns-with-typescript-2-8-82990c516935)
+* [Add E2E testing to CI/CD - amplify & cypress](https://amplify-sns.workshop.aws/en/80_e2e_test/00_-cypress.html)
+* [Managing Access Control in a React App](https://levelup.gitconnected.com/access-control-in-a-react-ui-71f1df60f354)
+* [How To Secure React Applications Against XSS Attacks with HTTP-Only Cookies](https://www.digitalocean.com/community/tutorials/how-to-secure-react-applications-against-xss-attacks-with-http-only-cookies)
+* 
+
+## Mocking
+- For mocking the APIs in the reactjs code, I use [mswjs](https://github.com/mswjs/msw/) it's easy and powerful, give it a try.
+
+## Blogs
+- https://www.everydayreact.com/articles
+
+## Project Starter
+
+- [NextJS + StorybookJS + Material-UI + Jest + SWR](https://itnext.io/nextjs-storybookjs-material-ui-jest-swr-fe2ff5cb9af8)
+- [Storybook With React & TypeScript](https://www.erikmudrak.com/post/storybook-with-react-typescript)
+
+## Libraries
+[[libraries]]
+
+## Tricks
+[tricks](reactjs/tricks.md)
+
+## Videos
+- https://youtu.be/bGzanfKVFeU
+
+
+[typescript](content/programming-languages/typescript.md)
+[tech-stacks](content/tech/tech-stacks.md)
\ No newline at end of file
diff --git a/content/reactjs/tricks.md b/content/reactjs/tricks.md
new file mode 100644
index 00000000..b6a762e7
--- /dev/null
+++ b/content/reactjs/tricks.md
@@ -0,0 +1,8 @@
+---
+title: "Tricks in ReactJS"
+---
+
+## Forms
+
+* Using forms. [(source)](https://twitter.com/asidorenko\_/status/1482679799374098433?s=20)
+![[Pasted image 20221024141905.png]]
\ No newline at end of file
diff --git a/content/scripts/jira-ticket-git-flow.md b/content/scripts/jira-ticket-git-flow.md
new file mode 100644
index 00000000..5457559f
--- /dev/null
+++ b/content/scripts/jira-ticket-git-flow.md
@@ -0,0 +1,36 @@
+---
+title: "Create a branch from jira ticket and push changes to it"
+---
+
+# Create a branch from jira ticket and push changes to it.
+
+### Create a branch from jira ticket and push changes to it.
+
+https://twitter.com/zeyadetman/status/1483423110774861825
+
+**Code:**
+
+```
+#!bin/bash
+
+pushit () {
+    echo "Getting data...";
+    jira issue list -a"Zeyad Etman" -s"IN PROGRESS";
+    echo "\nPlease enter ticket id: "
+    read id;
+    echo "\n"
+    desc=$(jira issue list -q "key = $id" --plain);
+    A=$(awk -F"$id" '{print $2}' <<< $desc)
+    B=$(awk -F"In Progress" '{print $1}' <<< $A | xargs echo -n)
+    commitMessage="$id: $B"
+    echo "\n$commitMessage"
+    echo "Pushing and committing...\n"
+    git checkout -b $id
+    git add .
+    git commit -m "$commitMessage"
+    git push origin $id
+
+}
+
+pushit
+
diff --git a/content/setup.md b/content/setup.md
new file mode 100644
index 00000000..23fc603b
--- /dev/null
+++ b/content/setup.md
@@ -0,0 +1,29 @@
+---
+title: "Setup"
+---
+
+I have some previous experiments about [note-taking](https://www.reddit.com/r/NoteTaking) and building your custom website to share these notes with public, I think this happened because of the mix of my career as a [[frontend]] engineer in this time and being curious about gaining knowledge and trying different things.
+
+The first note-taking I've used is [evernote](https://evernote.com/), I used it to keep track of my tasks in the college in around 2016, this was a great app for keep track of tasks, assignments, lectures I want to study, lectures I missed. but all of the notes in this time was private and specific to my life, so in that case evernote was suitable for this basic usage, and it was free in multiple devices.
+
+After that I tried different apps to take notes and tracking things, Until I settle on this setup.
+
+## Setup
+
+### Tools
+- macbook pro 2019 - 2.4 GHz Quad-Core Intel Core i5 💻 
+- iPhone 11📱 
+- Apple Watch ⌚️ 
+
+### Apps
+- [streaks](https://streaksapp.com/) is one of the main apps for my setup, I use it to track the habits, including reading, sleeping times, work and breaks, and other small tasks. This app is running on all of my devices and they all share same tasks, I'm keeping them private.
+- [Notion](https://www.notion.so/) I use it to track the private stuff, like long term plans, work notes, religious lessons, side projects plans, reading list. It's a powerful tool for these things, actually I'm new to notion but notion is a rich note-taking app and i found it suitable to me.
+- [Obsidian](https://obsidian.md/) is the [crm](https://en.wikipedia.org/wiki/Content_management_system)-like of this site, and public posts except for [my blog](https://zeyadetman.com) at least until now, I don't have so much working with obsidian but I can list the 3 tools that I've used to build this site in the next sub items.
+	- [quartz](https://github.com/jackyzha0/quartz) Is the engine of the site, I use it to publish my notes from obsidian vault to the internet.
+	- [obsidian-git](https://github.com/denolehov/obsidian-git) I use it to sync between obsidian vault and github, to automate the deployment process, it's also helpful to sync the vault data between devices.
+	- [remotely-save](https://github.com/remotely-save/remotely-save) I use it to backup the vaults on dropbox, to avoid losing data that may happen by the previous tool.
+
+
+### Resources
+- [obsidian publishing workflow](https://notes.aadimator.com/SBYNtPHqsTW9Ck1Kuoxsu/)
+- [setup your digital garden using quartz](https://quartz.jzhao.xyz/notes/setup/)
\ No newline at end of file
diff --git a/content/system-design/system-design.md b/content/system-design/system-design.md
new file mode 100644
index 00000000..3d15805b
--- /dev/null
+++ b/content/system-design/system-design.md
@@ -0,0 +1,8 @@
+
+## Articles
+- [Reducing Slack’s memory footprint](https://slack.engineering/reducing-slacks-memory-footprint/)
+
+## System Design Resources
+- [Front end system design interview - applications](https://www.frontendinterviewhandbook.com/front-end-system-design/applications/)
+- [System design interview guide for Software Engineers](https://www.techinterviewhandbook.org/system-design/)
+- [System design interview for IT companies](https://github.com/checkcheckzz/system-design-interview)
\ No newline at end of file
diff --git a/content/tech/interview.md b/content/tech/interview.md
new file mode 100644
index 00000000..be2b4aa8
--- /dev/null
+++ b/content/tech/interview.md
@@ -0,0 +1,5 @@
+---
+title: "Software Engineering Interview"
+---
+
+- [Tech Interview Handbook](https://www.techinterviewhandbook.org/)
\ No newline at end of file
diff --git a/content/tech/tech-stacks.md b/content/tech/tech-stacks.md
new file mode 100644
index 00000000..23d59f65
--- /dev/null
+++ b/content/tech/tech-stacks.md
@@ -0,0 +1,55 @@
+---
+title: Tech Stacks for building apps
+slug: tech-stacks
+---
+
+- [source](https://twitter.com/steventey/status/1613928952921300992)
+◆ @nextjs – framework
+◆ @vercel – deployment
+◆ @nextauthjs – auth
+◆ @prisma – ORM
+◆ @railway – postgres
+◆ @tailwindcss – CSS
+◆ @framermotion – animations
+◆ @radix_ui – UI primitives
+◆ @typescript + @PrettierCode + @geteslint – code quality
+
+
+
+- [source](https://twitter.com/t3dotgg/status/1657488850472804353)
+[@vercel](https://twitter.com/vercel) for deployments
+[@ClerkDev](https://twitter.com/ClerkDev) for auth
+[@upstash](https://twitter.com/upstash) for redis, cron & kafka
+[@AxiomFM](https://twitter.com/AxiomFM) for logging
+[@PlanetScale](https://twitter.com/PlanetScale) for database
+https://clerk.com -> Auth
+
+
+[Source](https://x.com/namyakhann/status/1692831270143754495?s=46)
+The ultimate startup tech stack in 2023:
+
+Deploy → @Vercel
+Design → @Figma
+Auth → @ClerkDev
+Payment → @Stripe
+No Code → @Framer
+Framework → @Nextjs
+Email → @Resendlabs
+Database → @Supabase
+Dashboard → @tremorlabs
+Animation → @Framer Motion
+UI → @Tailwindcss @Shadcn UI
+
+
+[Source](https://x.com/realstoman/status/1692834575678910959?s=46)
+
+Build almost anything with this @reactjs + @typescript  tech stack 🚀
+
+🔸Framework: @nextjs
+🔸Styling: @tailwindcss + @shadcn 
+🔸DB: @PlanetScale or @supabase 
+🔸Auth: NextAuth
+🔸Forms: @HookForm 
+🔸Charts: @tremorlabs 
+🔸Payments: @stripe 
+🔸Deployment: @vercel 
diff --git a/content/tech/technical-blogs.md b/content/tech/technical-blogs.md
new file mode 100644
index 00000000..eae34c08
--- /dev/null
+++ b/content/tech/technical-blogs.md
@@ -0,0 +1,36 @@
+---
+title: "Technical Blogs"
+---
+
+# Technical Blogs
+
+* [https://v8.dev/](https://v8.dev)
+
+### Typescript and Rust
+
+* [https://fettblog.eu](https://fettblog.eu)
+
+### Backend
+
+* [https://aaronfrancis.com/articles](https://aaronfrancis.com/articles)
+
+### Frontend
+
+* [https://jxnblk.com/](https://jxnblk.com)
+* [https://www.456bereastreet.com/](https://www.456bereastreet.com)
+* [https://umaar.com/dev-tips/](https://umaar.com/dev-tips/)
+* [https://tamalweb.com/](https://tamalweb.com)
+* [https://www.upbeatcode.com/](https://www.upbeatcode.com/)
+
+### System Design and Architecture
+
+* [https://www.quastor.org/](https://www.quastor.org)
+
+### Software Engineering
+
+* [https://katiehempenius.com/](https://katiehempenius.com)
+* [https://nicolodavis.com/](https://nicolodavis.com)
+* [https://ably.com/blog/tag/ably-engineering](https://ably.com/blog/tag/ably-engineering)
+* https://timothya.com/
+* https://www.emadelsaid.com/
+* [https://www.basedash.com/blog](https://www.basedash.com/blog)
diff --git a/content/templates/post.md b/content/templates/post.md
new file mode 100644
index 00000000..c2a9b337
--- /dev/null
+++ b/content/templates/post.md
@@ -0,0 +1,3 @@
+---
+title: "{{title}}"
+---
diff --git a/content/test.md b/content/test.md
deleted file mode 100644
index e69de29b..00000000