22/04/2020

-
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

Comments

Post a Comment

Popular posts from this blog

29/11/2021 - time flies

-
time flies. i have been working at a local tech start up since tis apr, and tomorrow's time for my mid review. recently, i have been dealing with anxiety. fears that i am not enough. my emotion is not very good. i do think about plan b. this shit is so hard. to me. so let's take stock things i have done react native set up mac - android studio + android phone (emulator wont work), xcode + ios phone / emulator windows - android, phone (emulator sucks) for some reason i have to build bundle somewhere else cos my internet wont point correct mac os quirks - m1 chip rosetta mode for xcode OR exclude arm64 architecture arch commands for pod on cli learnt along the way graphql+apollo little sql+hasura react native
Read more

08/06/2020 - scoped css with sass + react

-
css is not modular modular css like javascript - want to have local scope want to make react components with scoped css css-in-js  writing the css inside the js / component file css-in-js libraries: jss, react-jss, styled components, emotions how the libraries work - at precompile they tag on a class name so the scope is more limited cons : they dont seem to allow cascading and need to tack on a class name to every single element, tedious i tried naming my files [component].modules.css, but it doesn't work. maybe it needs webpack? i am not familiar with webpack. solution sass: use node-sass and sass in the react/node project i decided to use sass and its nested feature, with a classname at the top level selector features: variables, @use, nesting, mixins (not tried), partial scss is a sass file type that uses css syntax preserves the cascading feature of css steps in my react component, add a top level div with class name   top level div f...
Read more

11/02/2021 - git commands for remote repo

-
git commands inital upload: git init --create github repo, copy the url create .gitignore, add in /node_modules, .env etc git commit . -m '<msg>' git remote add origin <url> git checkout -b <branch> git push origin <branch> deleting folder: (in case you added node module by accident) git checkout <branch> git rm -r <folder> git commit . -m '<msg>' git push origin <branch> adding/deleting/checking remote: git remote add origin <url> git remote -v git remote remove origin updating file: git commit . -m "<msg>" git push origin <branch> cloning from remote to local, updating changes from local to remote: --within working folder git init git clone <url> --> you get a subfolder with the cloned repo cd into the cloned folder git commit . -m "<msg>" git add remote origin <url> git fetch origin git push origin <branch> amend single file: git commit <file> -m ...
Read more