-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2a5a31a
commit a3fe303
Showing
80 changed files
with
1,764 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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": "0nN4YTNwgzM2IzN2YTM6Iiblh2VkVGdhJXZuV2ZiwSX9JzM4czN0UjM5YjN2EjOi4WZodlbvlGdjFmIsICZt5Cd0RnI6ISeltmI7xSf5QDN5cTO2UjN2YjNxojIuVGaX52bpR3YhJCLiQWbuMXZ09mTiojI5V2aisHL9NDN4kTO0AjNycjN2EjOi4WZodlbvlGdjFmIsICZt5CelRmbpJiOikXZrJyes0HM4gzM0UDMzIzN2YTM6Iiblh2Vu9Wa0NWYiwiIvQWZsRXa05WViojI5V2aisHL9dDN3AzMxczN2YjN2EjOi4WZodlbvlGdjFmIsICZt5CZuV2ajFmYiojI5V2aisHL9RTO3gTMxUjM5YjN2EjOi4WZodlbvlGdjFmIsICZt5CZlxGdpRnbVJiOikXZrJyes0HN3MDO2czM2IzN2YTM6Iiblh2Vu9Wa0NWYiwiIvQnbl1WevxGclRmI6ISeltmI7xSf4ITN1AzNwcjN2YjNxojIuVGaX52bpR3YhJCLiQWbugXZk5WavkGbjJiOikXZrJyes03N0cTO3cDM3YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mL4VGZul2L0l2ZiojI5V2aisHL9JzM4UDO3AzN2YjN2EjOi4WZodlbvlGdjFmIsICZt5CelRmbp9Ccv9mI6ISeltmI7xSf1cTMxITNyYjM3YjNxojIuVGaX52bpR3YhJCLiQWbuEDMtETMtIjMwIjI6ISeltmI7xSf3AjMzUTO2UjN2YjNxojIuVGaX52bpR3YhJCLiQWbuMXZ09mT4VGZulmI6ISeltmI7xSfyAjM2QjM2UjN2YjNxojIuVGaX52bpR3YhJCLiQWbuc2bsBCdpd2L0l2ZiojI5V2aisHL9FTMzQjN3YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5ycwlGdvMna0NWYlJnI6ISeltmI7xSfxQjNykTO2UjN2YjNxojIuVGaX52bpR3YhJCLiQWbukHdpZXa0NWdk9mcQJiOikXZrJyes0XO1MTO5gjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIvkHdp5Wdt12bjBCajVGdiojI5V2aisHL9hDN3QDO1YTN2YjN2EjOi4WZodlbvlGdjFmIsIyLn5Wa2x2bzBSblxmYvJHciojI5V2aisHL9dTN0ITO2AzN2YjN2EjOi4WZodlbvlGdjFmIsICZt5CelRmbp9ycqR3YhVmciojI5V2aisHL9lDO0MjN2AzN2YjN2EjOi4WZodlbvlGdjFmIsICZt5CelRmbp9CZuV2ajFmYiojI5V2aisHL9NzN5ITNyYTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5CdjV2cpJGI0l2ZvQXanJiOikXZrJyes0XM2UDN2cDM3YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mL4VGZul2Lk5WZ052byZmI6ISeltmI7xSfzYzM2MzNwcjN2YjNxojIuVGaX52bpR3YhJCLiQWbugXZk5WavU2chJWY0FGZiojI5V2aisHL9lTOykTM4YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5yc0BXayN2cvMHdwlmcjNnI6ISeltmI7xSf3MzM0cDM1ITO2YjNxojIuVGaX52bpR3YhJCLiQWbuQ3clR3L05WZtl3bsBXZkJiOikXZrJyes0XMyAzNwgDM5cjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLkVGb0lGduV1LzpGdjFWZyJiOikXZrJyes0HNycDO3UTN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLztmbpx0LlR2bj1ibhVGbjJiOikXZrJyes0XM0MTOwAzN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLzVGdv5EIvRHIl12bjxWZXJiOikXZrJyes0nM1gTO3YDM3YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mL4VGZul2LlR2bj1ibhVGbjJiOikXZrJyes0XM1MzMzMjM2IzN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mL05WZtl3bsBXZk9ycw9mdlRmI6ISeltmI7xSf3kzNxcTO1kTM3YjNxojIuVGaX52bpR3YhJCLiQWbuQWZsRXa05WVvQmblRnbvJnZiojI5V2aisHL9dzM3MDO5UTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5yclx2YpRnch9CZuVGdu9mcmJiOikXZrJyes0nN1cDO4ATNykjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLkVGb0lGduV1L05WZtl3bsBXZkJiOikXZrJyes0XN5MDMwYjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIvMXZnFWdn5WYsByZulWbtFmcn9mcwJiOikXZrJyes0XN4ATOzkjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mL0VmbyVGdulEIu9GIl1GIk5WaGJiOikXZrJyes03N0MTM4ETM5cjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mL0NWYlJXLklGbvN3LzpGdjFWZyJiOikXZrJyes0HM2ADMzkjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mL4VGZul2L5RXauVXbt92Ytg2YlRnI6ISeltmI7xSf2QTNygjMxUjN2YjNxojIuVGaX52bpR3YhJCLiQWbuQmblt2YhJGelRmbp9CZuV2ajFmYiojI5V2aisHL9NzN3cDMxEzMycjN2EjOi4WZodlbvlGdjFmIsICZt5CZlxGdpRnbV9yclR3bu1iclVmchNmI6ISeltmI7xSfwUzN0gTN2UjN2YjNxojIuVGaX52bpR3YhJCLiQWbugXZk5WavcmbpZHbvNHItVGbi9mcwJiOikXZrJyes0HM5QTM1cDM3YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mL4VGZul2Lz5mclRHdhBXLudWazVGZiojI5V2aisHL9FTMxIDM4AzN2YjN2EjOi4WZodlbvlGdjFmIsICZt5CelRmbp9yZulmds92ct0WZsJ2byBnI6ISeltmI7xSf4AjN3IzMyYjM3YjNxojIuVGaX52bpR3YhJCLiQWbuQnbl1WevxGclR2L05WZtl3bsBXZkJiOikXZrJyes0HOxMjN4cTN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLz1WZ0NXezBibnl2clR2Lk5WZ052byZmI6ISeltmI7xSf4YDN1gTM2UjN2YjNxojIuVGaX52bpR3YhJCLiQWbuQXanBSYgYGblNnc19WegUGdpJ3dvQXanJiOikXZrJyes03N5MDMwYjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLvd2LzV2ZhV3ZuFGbgcmbp1WbhJ3ZvJHciojI5V2aisHL9ZTOzADM2YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5CcwN2LzV2ZhV3ZuFGbgcmbp1WbhJ3ZvJHciojI5V2aisHL9hTOzADM2YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5CelRmbp9ycldWY1dmbhxGIn5Wat1WYyd2byBnI6ISeltmI7xSf1MDNxEDOwcjN2YjNxojIuVGaX52bpR3YhJCLiQWbugXZk5WavMXZnFWdn5WYs1yZulWbtFmcn9mcwJiOikXZrJyes0XMwETN4QTNykjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLu9Wa0FmcnVGdulWL0NXZ09CduVWb59GbwVGZiojI5V2aisHL9NjMzEzM4YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5ydvxmZgQXanBCdlt2YpRHIhJXaq9yc0BXayN2ciojI5V2aisHL9lzMyAjN4YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5Se0lmb11WbvNGIoNWZ09Se0lmb11WbvNGIoNWZ0JiOikXZrJyes03M4cTNygTO3YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLkVGb0lGduV1LzV2ZhV3ZuFGbtcmbp1WbhJ3ZvJHciojI5V2aisHL9FTN1kDM5YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5ycn9GbiBCbhNWauh2YlR3L5RXauVXbt92Ytg2YlRnI6ISeltmI7xSf1ATO0ITN2UjN2YjNxojIuVGaX52bpR3YhJCLiQWbuQWZsRXa05WVvMXZnFWdn5WYsByZulWbtFmcn9mcwJiOikXZrJyes0XO1MTO5gjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLzd2bsJGIsF2Yp5GajVGdvkHdp5Wdt12bjBCajVGdiojI5V2aisHL9NDOwIDO0YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5yZulmds92ct0WZsJ2byB3Ln5Wa2x2bzBSblxmYvJHciojI5V2aisHL9JzNyYTM5UTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5ycu9Wa0Fmc0NXdsxWagYCIzRXZzNXYvQmblRnbvJnZiojI5V2aisHL9JzN2ADO0YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5yZulmds92cg0WZsJ2byB3Ln5Wa2x2bzBSblxmYvJHciojI5V2aisHL9ZTOzADM2YTN2YjN2EjOi4WZodlbvlGdjFmIsICZt5CdwlmcjNXY2FmavMXZnFWdn5WYsByZulWbtFmcn9mcwJiOikXZrJyes0XM1cDN4UjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLn5Wa2x2bz1SblxmYvJHct42btUWbvcmbpZHbvNHItVGbi9mcwJiOikXZrJyes0XOygzM3QjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLn5Wa2x2bzBSblxmYvJHcg42bgUWbvcmbpZHbvNHItVGbi9mcwJiOikXZrJyes0XM0cjMxYjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLzV2ZhV3ZuFGbgcmbp1WbhJ3ZvJHcvMXZnFWdn5WYs1yZulWbtFmcn9mcwJiOikXZrJyes03N5MDMwYjN1YjN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLzV2ZhV3ZuFGbgcmbp1WbhJ3ZvJHcvMXZnFWdn5WYsByZulWbtFmcn9mcwJiOikXZrJyes03MzcTNxQTMzIzN2YTM6Iiblh2Vu9Wa0NWYiwiIk1mLk5WZrNWYi1yb01CZuVGdu9mcm1SbvJnZtcmbph2Y0l2dz9yclR3bu1iclVmchNmI6ISeltmI7tlOiMnbvlGdlxWZkJye" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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). | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
[api-design-patterns](books/api-design-patterns.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
- |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
Oops, something went wrong.