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