merging in material that will be folded in
This commit is contained in:
		
							
								
								
									
										32
									
								
								SourceMaterial/engineering/beginners-guide/notes/django.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										32
									
								
								SourceMaterial/engineering/beginners-guide/notes/django.md
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,32 @@ | ||||
| --- | ||||
| title: Our Notes On Django | ||||
| sidebar: Handbook | ||||
| showTitle: true | ||||
| hideAnchor: true | ||||
| --- | ||||
|  | ||||
| ## Start here | ||||
|  | ||||
| If, like me, you haven't worked with Django before, the best place to start with is  | ||||
| [Writing your first Django app](https://docs.djangoproject.com/en/3.1/intro/tutorial01/)  | ||||
| from the official Django website. This gives you a quick understanding of the major  | ||||
| parts of Django without needing to read an entire book to get it. | ||||
|  | ||||
| ## Useful Django commands | ||||
|  | ||||
| - `django-admin startproject mysite` - creates Django project | ||||
| - `python manage.py runserver` - starts Django web server (optionally add a port at the end `8080`) | ||||
| - `python manage.py startapp polls` - creates Django app in project | ||||
| - `python manage.py makemigrations polls` - creates migration scripts in migrations folder | ||||
| - `python manage.py sqlmigrate polls 0001` - shows SQL that will run for this migration but doesn't perform it | ||||
| - `python manage.py migrate` - performs all migrations | ||||
| - `python manage.py shell` - puts you in a Django ORM shell to play with the models on the command-line | ||||
| - `python manage.py createsuperuser` - creates super user for django admin app which comes by default with all Django projects, url `/admin` | ||||
| - `python manage.py test polls` - run tests for polls app | ||||
|  | ||||
| ## Useful resources | ||||
| - [Writing your first Django app](https://docs.djangoproject.com/en/3.1/intro/tutorial01/). I recommend | ||||
|   reading Parts 1-5 of the 7 parts, skip 6+ since they are not relevant to PostHog. We do use Django built-in testing so part 5 is required reading. | ||||
| - [Two Scoops of Django (e-book)](https://www.feldroy.com/products/two-scoops-of-django-3-x) | ||||
|  | ||||
| **[Back: Technologies to learn](../technologies-to-learn)** | ||||
							
								
								
									
										103
									
								
								SourceMaterial/engineering/beginners-guide/notes/docker.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										103
									
								
								SourceMaterial/engineering/beginners-guide/notes/docker.md
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,103 @@ | ||||
| --- | ||||
| title: Our Notes On Docker | ||||
| sidebar: Handbook | ||||
| showTitle: true | ||||
| hideAnchor: true | ||||
| --- | ||||
|  | ||||
| ## Docker Nomenclature and Notes | ||||
|  | ||||
| - `Docker Image` - the actual package, **artifact** which can be shared with others, docker images are built in layers via Dockerfile | ||||
| - `Docker Container` - a *running* instance of a docker image, file system is virtual, contains a port for communication | ||||
| - Docker run - command which executes *pull* and *start* (only pulls images we do not have locally) | ||||
| - Docker vs Virtual Machine | ||||
|     - Operating System = Hardware > OS Kernel (layer 1) > Applications (layer 2) | ||||
|     - Docker = Virtualization of applications (layer 2) | ||||
|     - Virtual Image = Virtualization of OS (layer 1) | ||||
|     - Benefits of Docker = images are much smaller, runs faster | ||||
|     - Benefits of VM = you can run different OS (Windows on Linux) since it has it's own OS Kernel | ||||
| - Docker Port vs Host Port | ||||
|     - Multiple containers may use the same port | ||||
|     - Bind host port to docker port, i.e. host 3000 -> docker 3000, host 3001 -> docker 3000 | ||||
| - `Docker Compose` | ||||
|     - Configuration file specifying *docker commands* to make it easier to work with | ||||
|     - Automatically handles creating a common *docker network* | ||||
|     - Docker compose is usually installed with docker so you already have it | ||||
| - `Docker Volumes` | ||||
|     - Provides data persistence between host machine and docker containers | ||||
|     - The data between volumes is replicated between the host and docker container volumes | ||||
|     - 3 docker volume types: specified, anonymous, and named volumes, named volumes on the host are managed by docker | ||||
|     - Production should use *named volumes* | ||||
|     - Container Mongodb = /data/db | ||||
|     - Container MySQL = /var/lib/myself | ||||
|     - Container Postgres = /var/lib/postgres/data | ||||
|     - Host Windows = C:\ProgramData\docker\volumes | ||||
|     - Host Linux = /var/lib/docker/volumes/[hash]/_data | ||||
|     - Host Mac = /var/lib/docker/volumes/[hash]/_data | ||||
|         - `screen ~/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/tty` add access linux VM on mac where data is stored, `ctrl + a + k` to exit screen session | ||||
|  | ||||
| ## Basic commands | ||||
|  | ||||
| - `docker pull` downloads a docker image locally | ||||
| - `docker images` shows a list of local docker images and their sizes | ||||
| - `docker run` run a docker container, it's two commands in one *docker pull* and *docker start* | ||||
| - `docker run -d` runs the docker container in *detach mode* | ||||
| - `docker run -p` binds the container to host port i.e. *-p6000:6370*, *-p [host]:[container]* | ||||
| - `docker run --name` give the container a name so that you do not need to use the SHA | ||||
| - `docker run -d -it python` runs python images in *interactive terminal* mode | ||||
| - `docker run -e` runs an image with an environment variable | ||||
| - `docker run -net` specify a docker network to run within | ||||
| - `docker start` start a container, retains the settings from the run command | ||||
| - `docker stop` - stops a container | ||||
| - `docker ps` shows *running* containers | ||||
| - `docker ps -a` shows *running and not-running* containers | ||||
| - `docker logs` shows the *standard output* of the *running* container | ||||
| - `docker logs -f` follow the *standard output*, similar to *tail -f* | ||||
| - `docker exec -it` runs the container with interactive terminal | ||||
| - `docker network ls` shows a list of the internal docker network | ||||
| - `docker network create` create a docker network | ||||
| - `docker build -t my-app:1.0 .` builds an image from a *Dockerfile* in the current directory | ||||
| - `docker rm` removes a docker container which you need to do before docker rmi | ||||
| - `docker rmi` removes a docker image, i.e. docker rmi my-app:1.0 | ||||
| - `docker run -v` mounts host filesystem to docker container filesystem | ||||
|  | ||||
| ## Docker Compose | ||||
|  | ||||
| - `docker-compose -f mongo.yaml up` pulls, starts, and creates container network | ||||
| - `docker-compose -f mongo.yaml up -d` runs containers in *detached mode* | ||||
| - `docker-compose -f mongo.yaml down` stops container, removes container, and stops container network | ||||
|  | ||||
| ## First Dockerfile | ||||
|  | ||||
| ```docker | ||||
| FROM python:3.9-alpine3.13 | ||||
|  | ||||
| RUN apk add bash nodejs | ||||
|  | ||||
| COPY hello.* / | ||||
|  | ||||
| CMD ["bash"] | ||||
| ``` | ||||
|  | ||||
| ## First commands | ||||
|  | ||||
|  - `docker build .` builds the container | ||||
|  - `docker run --name [name] [sha]` installs the container | ||||
|  - `docker run -it --name [name] [sha]` installs the container and starts in interactive mode | ||||
|  - `docker ps` shows all the running containers | ||||
|  - `docker ps -a` shows all the running and exited containers | ||||
|  - `docker stop [name]` stop container | ||||
|  - `docker start -ai [name]` start container interactively | ||||
|  - `docker rm [name]` removes container | ||||
|  | ||||
|  ## Resources | ||||
|  | ||||
|  - [Creating your first Dockerfile, image and container](https://www.youtube.com/watch?v=hnxI-K10auY) great place to start | ||||
|  - [Docker Tutorial for Beginners [FULL COURSE in 3 Hours]](https://www.youtube.com/watch?v=3c-iBn73dDE) most helpful | ||||
|  - [Docker For Beginners: From Docker Desktop to Deployment](https://www.youtube.com/watch?v=i7ABlHngi1Q) | ||||
|  | ||||
|  ## Related Resources | ||||
|  | ||||
|  - [Kubernetes Tutorial for Beginners FULL COURSE in 4 Hours](https://www.youtube.com/watch?v=X48VuDVv0do) To manage distribution of contains across many servers | ||||
|  | ||||
| **[Back: Technologies to learn](../technologies-to-learn)** | ||||
							
								
								
									
										89
									
								
								SourceMaterial/engineering/beginners-guide/notes/kea.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										89
									
								
								SourceMaterial/engineering/beginners-guide/notes/kea.md
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,89 @@ | ||||
| --- | ||||
| title: Our Notes On Kea | ||||
| sidebar: Handbook | ||||
| showTitle: true | ||||
| hideAnchor: true | ||||
| --- | ||||
|  | ||||
| ## Actions | ||||
|  | ||||
| - All code lives inside `logic` which is created with `kea({ ... })` | ||||
| - Files are typically named `[name]Logic.js|ts` | ||||
| - `import { useActions } from 'kea'` provides access to action all functions | ||||
| - All operations start from `actions` | ||||
| - The mental model for actions is that of *event capturing*, they signal intent | ||||
| - Sample action: `increment: (amount) => ({ amount })` | ||||
| - **Actions** map to `reducers` and `listeners` to perform operations | ||||
| - Actions can invoke several reducers if the name of the action maps to multiple reducers | ||||
| - Actions defined with `someActions: true` are actions with no arguments | ||||
|  | ||||
| ## Reducers | ||||
|  | ||||
| - Reducers define `state` and `operations` on that state. | ||||
| - `import { useValues } from 'kea'` provides access to the state | ||||
| - Sample reducers: `counter: [0, { increment: (state, { amount }) => state + amount}]` | ||||
| - Notice how increment is the same name as the action | ||||
| - Reducers should never mutate the state directly, they must be pure functions | ||||
|  | ||||
| ## Listeners | ||||
|  | ||||
| - Listeners are how you do `side-effects` and async calls to load data | ||||
| - Listeners may invoke other actions via `actions`, example: `listeners: ({ actions, values }) => ({ ... })` | ||||
| - Listeners are `async` functions | ||||
| - Notice we have access to actions and values in the listeners functions | ||||
| - *Set this or that* is better done by reacting to actions | ||||
|  | ||||
| ## Loaders | ||||
|  | ||||
| - Available via the `kea-loaders-plugin` | ||||
| - Encapsulates the pattern of action > listener > loading > success | failure | ||||
| - Example: `users: [[], { loadUsers: async () => await api.get('users') }]` | ||||
|  | ||||
| ## Selectors | ||||
|  | ||||
| - Selectors handle mapping data across reducers | ||||
| - Similar to computed values in Vue | ||||
|  | ||||
| ## Values | ||||
|  | ||||
| - `import { useValues } from 'kea'` | ||||
| - You can access values frorm React with useValues or from listeners via listeners function | ||||
|  | ||||
| ## Input objects vs functions | ||||
|  | ||||
| - Any of kea's built-in primitives: actions, reducers, listeners, etc. may be declared with an object or function | ||||
| - Functions are invoked lazily | ||||
| - Functions are passed 1 argument which can be destructured for actions and values | ||||
| - Use objects first then functions as you need them | ||||
|  | ||||
| ## Props | ||||
|  | ||||
| - Using kea logic as a function allows you to pass in props which are available as destructured props for primitive key functions | ||||
|  | ||||
| ## Keyed logic | ||||
|  | ||||
| - If you give your logic a key, you can have multiple independent copies of it. The key is derived from props | ||||
| - Example: `key: (props) => props.id` | ||||
|  | ||||
| ## Breakpoints | ||||
|  | ||||
| - Serves as a debounce function or out of order network calls | ||||
|  | ||||
| ## Events | ||||
|  | ||||
| - Handles lifecycle events | ||||
|  | ||||
| ## Defaults | ||||
|  | ||||
| - Allows you to specify default values instead of doing them in the reducers | ||||
| - Defaults may be a function as well to calculate the default values | ||||
|  | ||||
| ## Connecting kea logic together | ||||
|  | ||||
| - You may [connect logics together](https://kea.js.org/docs/guide/additional#connecting-logic-together) | ||||
|  | ||||
| ## Useful resources | ||||
|  | ||||
| - [Kea](https://kea.js.org/docs/introduction/what-is-kea) | ||||
|    | ||||
| **[Back: Technologies to learn](../technologies-to-learn)** | ||||
							
								
								
									
										53
									
								
								SourceMaterial/engineering/beginners-guide/notes/python.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										53
									
								
								SourceMaterial/engineering/beginners-guide/notes/python.md
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,53 @@ | ||||
| --- | ||||
| title: Our Notes On Python | ||||
| sidebar: Handbook | ||||
| showTitle: true | ||||
| hideAnchor: true | ||||
| --- | ||||
|  | ||||
| Along with reading about any given programming language it's necessary to use that | ||||
| knowledge. I've prepared exercises that will help you use the knowledge you are | ||||
| learning. | ||||
|  | ||||
| Start by reading [Python via Learninyminutes](https://learnxinyminutes.com/docs/python/) | ||||
| then work to complete the exercises below. | ||||
|  | ||||
| ## 1. Fibonacci | ||||
|  | ||||
| You can learn about the [fibonacci here](https://en.wikipedia.org/wiki/Fibonacci_number). Fibonacci | ||||
| sequence means each number is the sum of the two preceding ones, starting from 0 and 1. | ||||
|  | ||||
| The sequence looks like this `0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...` | ||||
|  | ||||
| **Exercise: Calculate the fibonacci sequence up to 100** | ||||
|  | ||||
| ## 2. Invictus text processing | ||||
|  | ||||
| 1. Read [invictus.txt](https://raw.githubusercontent.com/buwilliams/learn-posthog/main/docs/exercises/02_invictus.txt) into a string | ||||
| 2. Split the string an array of words and print them out | ||||
| 3. Correct words with invalid characters and print the cleaned words out | ||||
| 4. Create an array of maps of all unique words and how many times they occurred | ||||
| 5. Sort the array of maps by the number of times they occurred in descending order | ||||
| 6. Convert the code into a class, implement interfaces and type checking if applicable | ||||
|  | ||||
| ## More exercises | ||||
|  | ||||
| - [Programming Problems](https://adriann.github.io/programming_problems.html) | ||||
|  | ||||
| ## Create your own exercises | ||||
|  | ||||
| One interesting strategy is to: | ||||
|  | ||||
| 1. Buy/find a programming book you're interested in. | ||||
| 2. As your read, create an exercise for that chapter. | ||||
| 3. Code the exercise that you created before moving on. | ||||
| 4. Rinse and repeat until you've finished the book. | ||||
|  | ||||
| By creating the exercise and solving it, you'll learn better than if you just read the chapter. | ||||
| Remember that many programmers are lazy and are unwilling to put this kind of effort. You'll | ||||
| be light years ahead of your peers as you apply yourself. | ||||
|  | ||||
| ## Useful resources | ||||
| - [Python via Learninyminutes](https://learnxinyminutes.com/docs/python/) | ||||
|  | ||||
| **[Back: Technologies to learn](../technologies-to-learn)** | ||||
							
								
								
									
										116
									
								
								SourceMaterial/engineering/beginners-guide/notes/react.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										116
									
								
								SourceMaterial/engineering/beginners-guide/notes/react.md
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,116 @@ | ||||
| --- | ||||
| title: Our Notes On React | ||||
| sidebar: Handbook | ||||
| showTitle: true | ||||
| hideAnchor: true | ||||
| --- | ||||
|  | ||||
| The [React docs](https://reactjs.org/docs/getting-started.html) are great for getting from zero to one. | ||||
|  | ||||
| ## Hooks | ||||
|  | ||||
| I found hooks somewhat counterintuitive at first, but they're very powerful once you grasp them. Refer to the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html). - @samwinslow | ||||
|  | ||||
| 1. Only call from the top level of a functional component | ||||
| 2. Do not call outside a functional component or from plain JS (you can call from custom hooks) | ||||
|  | ||||
| ### useState | ||||
|  | ||||
| Uses destructured array assignment syntax | ||||
|  | ||||
| `const [value, setValue] = useState(initialValue)` | ||||
|  | ||||
| An updater function can be passed to the setter so that multiple updates can be called in sequence, or to merge-update the state via spreading if it's an object. The updater is a pure function which takes previous state and returns next. | ||||
|  | ||||
| ```jsx | ||||
| // bad | ||||
| setValue(value + 1) | ||||
| setValue(value + 1) | ||||
|  | ||||
| // good | ||||
| setValue(value => value + 1) | ||||
| setValue(value => value + 1) | ||||
| ``` | ||||
|  | ||||
| In general, derive data while rendering rather than storing derived values in state (e.g. filtering local data). However, if expensive filtering or join operations are to be performed and/or the component re-renders frequently, a memoized state management library might be better. | ||||
|  | ||||
| ### useEffect | ||||
|  | ||||
| Takes a callback function which may have (potentially global) side effects. Runs on every re-render by default. | ||||
|  | ||||
| ```jsx | ||||
| function EffectExample() { | ||||
| 	const [value, setValue] = useState(initialValue) | ||||
|  | ||||
| 	useEffect(() => { | ||||
| 		document.title = `The value is now ${value}` | ||||
| 	}) | ||||
|  | ||||
| 	return ( | ||||
| 		<div> | ||||
| 			<p>{value}</p> | ||||
| 			<button onClick={() => setValue(value => value + 1)}>Use Effect</button> | ||||
| 		</div> | ||||
| 	) | ||||
| } | ||||
| ``` | ||||
|  | ||||
| The rendered value is not a special data binding that causes it to listen. It is merely a reflection of a new value rendered as a result of calling the setter. | ||||
|  | ||||
| Can return a cleanup function from the effect and declare when it should run | ||||
|  | ||||
| ```jsx | ||||
| function ApiStatus({ service }) { | ||||
| 	const [isOnline, setOnline] = useState(null) | ||||
|  | ||||
| 	const { id } = service | ||||
| 	useEffect(() => { | ||||
| 		const handleStatusChange(status) => { | ||||
| 			setOnline(status.isOnline) | ||||
| 		} | ||||
| 		SomeApi.subscribe(id, handleStatusChange) | ||||
|  | ||||
| 		return () => SomeApi.unsubscribe(id, handleStatusChange) | ||||
| 	}, [id]) // Only run when `id` changes (sync to state) | ||||
|  | ||||
| 	// rendering | ||||
| } | ||||
| ``` | ||||
|  | ||||
| ### useLayoutEffect | ||||
|  | ||||
| Same as `useEffect`, but runs callback synchronously during commit lifecycle phase | ||||
|  | ||||
| ### useMemo | ||||
|  | ||||
| Recalculates value only when dependencies change | ||||
|  | ||||
| ### useCallback | ||||
|  | ||||
| Updates callback function reference when dependencies change | ||||
|  | ||||
| ### useRef | ||||
|  | ||||
| Mutable ref used to access returned child. | ||||
|  | ||||
| - Persists between renders | ||||
| - Default: `{ current: null }` | ||||
| - Plain object; mutating does not trigger re-renders | ||||
|  | ||||
| ### Custom Hooks | ||||
|  | ||||
| Listeners and API connections can be extracted to a custom hook and reused | ||||
|  | ||||
| Examples from popular libraries: | ||||
|  | ||||
| - React-Redux: `useSelector`, `useDispatch` | ||||
| - React-Router: `useHistory`, `useLocation`, `useParams` | ||||
| - `useFormState` | ||||
|  | ||||
| ## Useful resources | ||||
|  | ||||
| - [Dan Abramov - A Complete Guide to useEffect](https://overreacted.io/a-complete-guide-to-useeffect/) | ||||
| - [Mark Erikson - A Complete Guide to React Rendering Behavior](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/) | ||||
|  | ||||
| **[Back: Technologies to learn](../technologies-to-learn)** | ||||
|  | ||||
| @@ -0,0 +1,23 @@ | ||||
| --- | ||||
| title: Our Notes On TypeScript | ||||
| sidebar: Handbook | ||||
| showTitle: true | ||||
| hideAnchor: true | ||||
| --- | ||||
|  | ||||
| The best way to learn TypeScript is to read introductory material then get hands on with exercises. | ||||
|  | ||||
| ## Exercises | ||||
|  | ||||
| You can complete the exercises on the [TypeScript Playground](https://www.typescriptlang.org/play) | ||||
|  | ||||
| You can use the same [exercises for Python](python) as starting place. | ||||
|  | ||||
| ## Great places to learn | ||||
|  | ||||
| - [TypeScript via learnxinyminutes](https://learnxinyminutes.com/docs/typescript/) | ||||
| - [TypeScript in 5 minutes](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) | ||||
| - [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html) | ||||
|  | ||||
| **[Back: Technologies to learn](../technologies-to-learn)** | ||||
|  | ||||
		Reference in New Issue
	
	Block a user