Pensieve

coding has been a lot better since i sat down and got my hands dirty with brad traversy's MERN (mongo/express/react/node front+backend) udemy course.  there's a shorter youtube version for free. and also see his SASS youtube video for the frontend html/css part.  the MERN video/course focuses more on mongo/express, then react/react-router/redux. the youtube sass is a complement for the front end portion editor is vscode +prettier, emmet its very enlightening and satisfying doing the course, i did the MERN course almost till the end (remainder is to finish up the likes and comments on the posts, deploy it), shall finish it another time. i like codesandbox.io allows you to add packages like react, material-ui etc codesandbox + mongo coming soon save space for multiple projects vs installing npm packages for each of your projects locally re-renders on click up,  csb editor typing is not quite ideal as the browser csb editor has prettier (but no emmet, str

#javascript iterables made a input / output kind of reactjs component react was throwing typeErrrors on my function because i forgot about JSON.parse for my incoming array which had been coerced to a string output with JSON.stringify iterables Object.entries(obj)=> [[k,v],[k,v],..] aka Map object {[k]:v,[k],v,..} not iterable, but can use object entries on it my fav form is [{[k]:v},{[k]:v},..}] , it is analog of a python dictionary object, is both iterable and referable. i dont like array keys sometimes you have to push a new key value pair into an object and not an array because the keys are arbitrary, array indexes are not [[0]v,[1]v,[2]v,..] object ↔ Map ↔ Array of Objects came across Symbol.iterator, analog is UUID error handling in react error boundaries, analog of componentDidCatch typescript for larger projects, static typing similar to Java code tag in react JSX the tag wont work, you have to use CSS + selector + monospace font eg Courier temp

#javascript#reactjs#vanilla css made a memory game halfway, still need to settle the disable board and flip back on settimeout first time to usestate with array states, had to do a lot of array works tried not to have nested state so all the different states were saved by id was googling for all sorts of utilities like zip arrays wonder if react uses an array of objects still dont understand the array.reduce higher order function so far the components are sidenav/slider  css transition memory game  usestate([array]),  toggle style{{}},  array.includes(),  array.indexOf(),  if(condition){return} Array(number) - for initialising arrays, == python range object array.fill() counters - usestate hide/show nav on scroll useRef,useState,useEffect element.scrolltop t slide left for editor #housework the worse is a baby - i dont have one, but it consumes all your time, for decades cooking (not frozen ready to eat meals) is tedious - track/buy/st

did so much housework, i think i need to tone down sick of prepping/cooking meals for the family, so i stopped doing my period is here and im having a mild headache added 1 more component to my react/vanilla showcase on codesandbox.io

#javascript #reactjs #switch case statement in react #material-ui #textfield figured how to tweak the child props from the parent textfield switch/case is actually a function within a function using the switch case i made a react component that rendered according to the props i passed it settled for inline styling and makestyles hook for material-ui customization im a map statement addict. its just so cool to pass an array and let the map generate the rest for you #covid19 #cookingathome cooked (like really cooked) lunch and dinners for consecutive days its so tiring i dont have much of an appetite. dont know caused by the milk (in my teas), cooking fatigue, or my period came

react vanilla component showcase slide left for editor the hardest component was the show/hide navbar on scroll learnt to use useref,usestate,useffect hooks together to memorise a previous value on change that would be where react material-ui would be useful for slider sidenav, react usestate hook =>toggle classname => css transitions

codesand react, react router, material ui drag right to edit.

feel so stuck anyway, i created a sliding side nav that scrolls and the usual dropdown might have to revise usereducer hook look at nested components, child props

gave up on component library like material-ui, and css frameworks rather do vanilla css+reactjs  going through the how to of w3schools might try freecodecamp why i gave up i realised my vanilla css was looking a lot better wading through docs and finding it really convoluted customising the layout was a pain, especially composing flex and grid stuff - the wrapping made no sense also i had to compose the widget too often, using very low level components why bother to memorise another set of names css itself already a lot of memory work - thank god (a higher power) for w3schools references reason is you cant tie up css/js in layout vs component eg button renders outside of your nav component

code material ui - styling with custom styles there are 3? ways : i learnt to use the hook makestyle. but it wont work also i found by accident using the :root pseudo selector works, for stuff like setting the typography, colors  use inline styles props style with css (javascript form) lay out grid system what i have left unit testing with jest seo treatment of react app payment gateway oauth - refresher gitbash - refresher webpack / build or bundler redux / dispatch / prefilled form more in depth - refresher dont think i want to learn php or jquery

coding material-ui:  grid system - use grid (item) and grid (container) component - can only add the breakpoint in the item component,  autocomplete(a kind of dropdown input able to filter),  creating most stuff with textfield without having to compose with - formcontrol etc,  ....  not yet tried out the custom styling hook review of material-ui so far pros only using it because other people are saying its not buggy, and its very modular still supported feature rich,  tons of code snippet to copy from, you can avoid using your brain and copy it customising looks like a pain in the ass cons i prefer semantic-ui's look, it is very basic looking, dont really like material design on the desktop the code snippets are really complicated, but thanks to it, i have to poke around more. i take almost 1 whole day to learn like a few components T-T components are not easy to learn, dont reveal their properties so easily despite reading through the doc api and c

lanya, neighbor's cute cat, ignores us. havent petted her since covid19. code, front-end, component library, still on material-ui coding, iteration, learn to for-loop, map through nested array netflix, done with kim's convenience now the fan blowing cool air on my face feels better than being alone with my own thoughts obsessing about whether individualism is good and whether conquering loneliness is a myth, that we must all start families obsessing about taylor swift being literally tone deaf and politcally tone deaf, and changing her persona like the way she changes clothes. a non experts trying to act like heroes when they should be supporting the cause in their own quieter way wondering if i am emotionally unavailable. i think i am definitely avoidant, so lame. wondering if i should change my character

circuit breaker is still on, some call it the CB period spent last 2 days doing flexbox and css grid, some properties more useful than the other maybe i should just use material-ui react component, vs coding with vanilla html/css/js,the ui is really feature-rich want to be able to handcde html/css to be able to directly convert into use for react components try to hand-code own library for bootstrap - can be done with sass and handcode material ui - looks really difficult

another human is in the house due to wfh and i am so bored cos of an additional presence.