- Chrome extensions.
- Many websites use your cpu without your consent to mine crypto. There are extensions that block this, but they become outdated pretty quickly.
- Added JSON formatter. Makes json responses look pretty.
- OctoLinker turns import/require/include statements into links (on github), so you can jump to other projects quickly.
- Octotree adds a muuuuuch better directory tree on the left sidebar of github.
- And Refined Github. So many improvements to github UI/UX.
- My current list:
- Worked on bmahlstedt.com more.
- Figured out the error from the end of yesterday where the blog component wasn’t rendering in the multiroute site. It’s because the NAMED import of your reducer gets added to the store by the same name. So if you add the `blog` reducer to the store, then your component’s mapStateToProps should have `articles: state.blog.articles`. That `blog` string must match. It wasn’t because the db was empty, the state.home object was truly undefined (bc it was state.blog instead).
- Added the scss back (scss = sassy css which is a different preprocessor than sass but basically the same intent).
- Deleted the blog repo from github (it was merged to my main portfolio.
- Installed bootstrap and its two reqs, jquery and popper, into node modules as deps of the project rather than from CDNs in the root index.html. Then all you have to do is `import ‘bootstrap/dist/css/bootstrap.css’;` if your main index.js. If you want to customize, you can add those scss files and import them below. https://facebook.github.io/create-react-app/docs/adding-bootstrap.
- Then I uninstall bootstrap popper and jquery and instead used react-bootstrap. It is all (most) of the pieces of bootstrap rewritten as react components. It doesn’t need jquery or any of that.
- Then I decided to go back to native bootstrap. I didn’t like how react-bootstrap forced you to write style and layout and such in react-specific syntax. If you ever switch the view library, it’s more work. You don’t have html and css and standard bootstrap syntax, you have react-specific bootstrap syntax.
- If you want the “active” capability, you also can’t go directly through react-bootstrap. That state is held by react-router, so you’re better off just using NavLink from that package.
- Applied both the default class and active class to the NavLink component itself, rather than surrounding it with a <button> or an <a> tag. This made it much cleaner. I’m getting better.
- Cleaned the whole oven interior from the jerky drippings months ago. Terrible chore, but the smoke output is much less now. I’ll never make the mistake again of not covering the bottom or putting a collection tray on the lower rack.
- The public/manifest.json file is just to describe metadata about the web app (author, homepage, etc). It’s like some of the content in setup.py. It’s where a homescreen shortcut would pull data from on a mobile phone, for an example API that manifest.json hooks into.
- NPM
- Two cool specifications for versions constraints.
- ^ means that it will take any minor version and patch version but will wait on major versions. For example, ^1.2.6 means that it will take 1.3 or 1.8.9, but will wait on 2.0.
- ~ is similar, but only for patch versions. It’s more restrictive. It will not autoupdate to any major or minor version.
- Installed the new 6.10.3 patch version of npm.
- To regenerate package-lock.json based on updates to package.json or other, just run `npm i –package-lock`.
- npm uninstall <pkg> to remove it from package.json and the lockfile.
- Github detected a few vulnerabilities in dep versions again: open, mime, braces, eslint, js-yaml, webpack-dev-server. This is such a cool feature. Ran the bot to attempt to autofix the minpins. Dependabot couldn’t resolve, so I explored a bit manually: `npm audit fix [–force]`.
- The issues were all transitive through an old version of react-scripts that I had pinned from an old tutorial. It was <1, whereas the most recent major version is 3.X.X.
- Nice, bmanning@co’s website for the new company: http://www.xonaspace.com/. Quick wordpress. No encryption tho.
- Reread a bit of the bootstrap docs for layout. Remember the grid system: container, row, cols.
- For cols, the numbers add up to 12 bc it’s divisible in multiple ways. You could have 2 equal width columns col-6 and col-6, or col-2 col-4 col-6 for 3 columns of increasing width.
- The letters xs sm md lg are for what size screen (device) you want these to apply. Mobile vs monitor etc.
- “col-lg-6 offset-lg-3” would be a cell that is half the screen width, offset to be centered (3-6-3).
- Bootstrap also has cards (used for my vertical blog posts), card-body and card-footer etc.
- Got the 3 mobiles apps for the flight legs, in order: united -> hawaiian -> american.
- Remember, my meal prices summarized: breakfast shake $2, lunch smoothie $4, veggie juice $3, dinner meat $3. Total daily ~$12.
- Downloaded Eloquent Javascript and Data Structures and Algorithms Made Easy as kindle books for Hawaii and the flights.
- Jest is a testing framework for js, just like jasmine. Jest can do more. Jasmine doesn’t use a dom so it doesn’t need a browser. It’s great for node development, because it only needs javascript. Jest, on the other hand, is more comprehensive. It does use a dom. It’s more popular.
- @myorg/mypkg is for scoping npm installs. It means that the package is owned by a certani group. This can be used for companies, or for open source things like @types/node. Then it will install all the package suffixes into node_modules/@types/*.
- Typescript.
- I’m not using babel/webpack directly, since I started with create-react-app. It uses react-scripts instead, which uses the js api for webpack instead of you using its cli directly in your build scripts.
- All I had to do was npm install typescripts and the many @types/*, then rename my js/jsx to ts/tsx.
- find . -name “*.jsx” -not -path “./node_modules/*” -not -path “./build/*” -not -path “*.json*” -exec bash -c ‘mv “$1” “${1%.jsx}”.tsx’ – ‘{}’ ;
- And the same with js/ts.
- Then restart the client app (npm start).
- src/index.ts has the main ReactDOM.render(<…>) syntax, so I had to rename it to tsx so it would compile. Without the x, that is (of course) not valid javascript/typescript.
- The @types/* libraries contain *.d.ts files, which are declarations for types.
- React passes a lot of ANY types around implicitly, like for props that can be flexible. It’s better to be explicit about all of that and predeclare what objects your props are, but for now I’m just specifying them as (props: any).
- There are vim plugins for typescript so that you get the desired syntax highlighting.
- Ended up not fully implementing this; reverted back to js. I got my hands dirty enough for basic familiarity.
