| { | |
| "version": "0.2.0", | |
| "configurations": [ | |
| { | |
| "name": "Example", | |
| "type": "node", | |
| "request": "launch", | |
| "runtimeExecutable": "node", | |
| "runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"], |
Thanks to React hooks you have now happily turned all your classes into functional components.
Wait, all your components? Not quite. There is one thing that can still only be implemented using classes: Error boundaries.
There is just no functional equivalent for componentDidCatch and deriveStateFromError yet.
| (* | |
| An exercise in modeling. Users can be verified or banned. A user can be banned only if their username is "offensive". | |
| Additionally, we model the "initial" state of created user which is "unverified". Such user should be a subject of a specific action, | |
| doing a verification. | |
| Model consists of two concepts: | |
| * user details - keeping all information about CRUD-ish information | |
| * user - implicitly denoting status, utilizes user details to satisfy business rules (at the moment of writing - only one) | |
| Possibly those two could be separated, so that `UserDetails` could grow in details (e.g. getting new fields as email, address, etc.), |
| // 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks. | |
| // You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/) | |
| (() => { | |
| const SHOW_SIDES = false; // color sides of DOM nodes? | |
| const COLOR_SURFACE = true; // color tops of DOM nodes? | |
| const COLOR_RANDOM = false; // randomise color? | |
| const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com) | |
| const MAX_ROTATION = 180; // set to 360 to rotate all the way round | |
| const THICKNESS = 20; // thickness of layers | |
| const DISTANCE = 10000; // ¯\\_(ツ)_/¯ |