Incoming links: TypeScript
Lists:
- www.bibsonomy.org/user/bshanks/education fantastic list, presumably by this guy:
- www.reddit.com/r/Zettelkasten/comments/168cmca/which_note_taking_app_for_a_luhmann_zettlekasten/
- www.reddit.com/r/productivity/comments/18vvavl/best_free_notetaking_app_switching_from_evernote/
- github.com/topics/note-taking has a billion projects. Oops.
- www.noteapps.ca/
Personal knowledge base recommendation threads:
TODO look into those more:
- roamresearch.com/ no public graphs
- nesslabs.com/roam-research-alternatives a bunch of open source alternatives to it
- Trillium Notes. Notable project! Pun unintended!
- Stroll giffmex.org/stroll/stroll.html. How to publish? How to see tree?
- tiddlyroam joekroese.github.io/tiddlyroam/ graph rather than text searchable ToC. Public instance? Multiuser?
- Athens github.com/athensresearch/athens rudimentary WYSIWYG
- Logseq github.com/logseq/logseq no web interface/centralized server?
- itsfoss.com/obsidian-markdown-editor. Closed source. They have an OK static website publication mechanism: publish.obsidian.md/ram-rachum-research/Public/Agents+aren't+objective+entities%2C+they're+a+model but leaf node view only for now, no cross source page render. They are committed to having plaintext source which is cool: twitter.com/kepano/status/1675626836821409792
- But no upvotes/topics. Favorites could be used as upvotes, but it does not seem like you can favorite other people's work. It's just not their focus, will never be.They have an education push: www.notion.so/product/notion-for-education but it's likely hopeless.
- CherryTree github.com/giuspen/cherrytree written in C++, GTK, WYSIWYG
- github.com/dullage/flatnotes: Python
- github.com/usememos/memos: Go
- github.com/siyuan-note/siyuan: Go
- github.com/vnotex/vnote: C++
- github.com/Laverna/laverna: JavaScript
- github.com/taniarascia/takenote
- github.com/silverbulletmd/silverbullet: TypeScript, Markdown, web-based WYSIWYG, focus on querying
Major downsides that most of those personal knowledge databases have:
- very little/no focus on public publishing, which is the primary focus of OurBigBook.com
- either limited or no multiuser features, e.g. edit protection and cross user topics
- graph based instead of tree based. For books we need a single clear ordering of a tree. Graph should come as a secondary thing through tags.
Closed source dump:
- www.toodledo.com
- Simplenote: en.wikipedia.org/wiki/Simplenote, by WordPress.com operator company Automattic
Framework built on top of React.
Officially recommended by React[ref]:
Recommended ToolchainsIf you’re building a server-rendered website with Node.js, try Next.js.
gothinkster/realworld blog example by Ciro Santilli: node Express Sequelize Next.js realworld example app.
Basically what this does is to get server-side rendering just working by React, including hydration, which is a good thing.
Next.js sends the first pre-rendered HTML page along with the JavaScript code. Then, JavaScript page switches just load the API data.
Next.js does this nicely by forcing you to provide page data in a serialized JSON format, even when rendering server-side (e.g. the return value of
getServerSideProps). This way, it is also able to provide either the full HTML, or just the JSON.Some general downsides:
- it does feel like they don't document deployment very well however, especially non-Vercel options, which is the company behind Next.js. I'm unable to find how to use a non Vercel CDN with ISR supposing that is possible.
- Next.js is very opinionated, and like any opinionated library it is sometimes hard to know why something is/isn't happening, and sometimes it is hard/impossible to do what you want with it unless they add support. They have done good progress, but even as of 2022, some aspects just feel so immature, some major-looking use cases are not very well done.
In theory, Next.js could be the "ultimate frontend framework". It does have a lot of development difficulties that need to be ironed out, but the general concepts, and things it tries to integrate, including e.g. webpack, TypeScript, etc. are good. Maybe the question is when will someone put it together with an amazing backend library and dominate and finally put an end to the infinite number of Js Frameworks!
In-tree examples at: github.com/vercel/next.js/tree/canary/examples
In order to offer its amazing features, Next.js is also extremely opinionated, which means that if something wasn't designed to be possible, it basically isn't.
No prerender with custom server? It forces you to write your API with next as well? Or does it mean something else?
TODO can it statically generate pages that are created at runtime? E.g. if I create a new blog post, will it automatically upload a static page? It seems that yes, and that this is exactly what Incremental Static Regeneration means:However, Ciro can't find any mention of how to specify where the pages are uploaded to... this is pat of the non-Vercel deployment problem.
- github.com/vercel/next.js/discussions/25410
- vercel.com/docs/next.js/incremental-static-regeneration
- github.com/vercel/next.js/discussions/17711
- www.reddit.com/r/nextjs/comments/mvvhym/a_complete_guide_to_incremental_static/
- github.com/vercel/next.js/discussions/11552#discussioncomment-115595
- stackoverflow.com/questions/62105756/how-to-use-aws-with-next-js
- github.com/vercel/next.js/discussions/17080
- github.com/vercel/next.js/discussions/16852
Can't ISR prerenter by URL query parameters:
That plus the requirement to have one page per file under
pages/ leads to a lot of useless duplication, because then you are forced to place the URL parameters on the pathnames."Module not found: Can't resolve 'fs'" Hell. The main reason this happens seems to be the that in a higher order component, webpack can't determine if callbacks use the require or not to remove it from frontend code. Fully investigated and solved at:
Overviews:
- www.reddit.com/r/reactjs/comments/8evy5d/what_are_the_downsides_to_nextjs/ 2017 What are the downsides to Next.js?
Our examples are located under nodejs/next:
- nodejs/next/hello-world: a hello world. There's an in-tree one at: github.com/vercel/next.js/tree/e75361fd03872b097e817634c049b3185f24cf56/examples/hello-world, but ours is truly minimal
- nodejs/next/hoc: shows how to use a higher order component (HOC) to factor out
getStaticPropsacross two pages: nodejs/next/hoc/pages/index.js and nodejs/next/hoc/pages/notindex.js - nodejs/next/typescript: simple TypeScript example, minimized from: github.com/vercel/next.js/tree/d61b0761efae09bd9cb1201ff134ed8950d9deca/examples/with-typescriptNotably, that shows how
requireerrors are avoided in that case as mentioned at: stackoverflow.com/questions/64926174/module-not-found-cant-resolve-fs-in-next-js-application/70363153#70363153 - nodejs/next/localStorage: a counter that is persistent across page reloads by using
localStorage. Used in: stackoverflow.com/questions/54819721/next-js-access-localstorage-before-rendering-page/68136224#68136224
Solved ones:
- solved by preview mode in Next.js 12:
- ISR was basically unusable for CRUD websites because you can't force a one-off immediate page update:
Docs: quartz.jzhao.xyz/
Sponsored by Obsidian itself!
Written in TypeScript!
Markdown support!
Everything is forcibly is scoped to files quartz.jzhao.xyz/features/wikilinks:
[[Path to file#anchor|Anchor]]Global table of contents based of in-disk file structure: quartz.jzhao.xyz/features/explorer with customizable sorting/filtering.
TypeScript is good. It does find errors in your JavaScript. But it is a form of "turd polishing". But Ciro Santilli would rather have a polished turd than a non-polished one.
Part of the reason TypeScript became popular is due to the universality of asset bundlers. Once you are already using an asset bundler, changing the
.js extension into .ts to get a less shitty experience is an easy choice.The other big reason is that JavaScript is so lose with type conversions, notably undefined happily converting to strings without problems, and any missing properties of Object happily being undefined. We should actually use ES6 Map everywhere instead of using Objects as maps.
Since TypeScript is not the default form of the language however, it inevitably happens that you need to add external types for a gazillion projects that are using raw JavaScript, and sometimes fight a lot to get things to work. And so we have: github.com/DefinitelyTyped/DefinitelyTyped. Not sure if this is beautiful, or frightening.
But in the end, as with other type of static linters, TypeScript generally transforms a few hard to debug runtime issues, into a bunch of stupid to solve compile time issues, which is generally a good thing.
The fact that this it parses comments JSDoc comments in JavaScript files is quite amazing.
Examples under typescript. Run each one of them with:Helper:
npx tsc example.ts
node example.jstsr() (
# ts Run
f="$1"
npx tsc "$f"
node "${f%.*}.js"
)
tsr example.ts- typescript/inferFromInit.ts. Should fail with:since TypeScript infers the type of
hello.ts:2:1 - error TS2322: Type 'string' is not assignable to type 'number
ifrom first assignment asstring, and we then attempt anumberassignment later on - typescript/inferAfterInit.ts. Does not fail, as the first assignment cannot be computationally determined at runtime without breaking computer science.
- typescript/js-from-ts/main.ts: call JavaScript file typescript/js-from-ts/notmain.js from TypeScript.TODO we are unable to make it typecheck that require, i.e. make that fail, but we've seen cases in complex codebases where that did happen and www.typescriptlang.org/docs/handbook/intro-to-js-ts.html has infinite information on supporting it. So... how to make it fail??
npx tsc jsFromTs.ts && node jsFromTs.js - typescript/functionArgument.ts: basic argument tests
- typescript/functionOptionalArgument.ts:
f(n?: number)
- typescript/functionOptionalArgument.ts:
- typescript/functionOptions.ts:
f({n, s}: {n: number, s: string})
Some major annoyances of TypeScript:
- destructuring assignment in function arguments requires repeating all arguments:
- stackoverflow.com/questions/12710905/how-do-i-dynamically-assign-properties-to-an-object-in-typescript how to dynamically assign properties to objects without defining explicit interfaces? We really need a syntax of type:
const myobj = { i: 2, [s string], } if (something) { myobj.s = 'asdf' }
Webpack is like a magic hydra that can eat any type of file and bundle it into a single output: .js, .ts, .ccs, .scss, .jsx, .tsx,
require, import, import css from .js, it doesn't matter at all, it just digests all into the same dump.When it works, you are just left in awe and with a single Js file. When it doesn't, you're fucked and have to debug for several hours.
Demos under: webpack/. To run all of them by default:To easily make changes and reload the .js output live let this run on a terminal:
cd webpack/min
npm install
npm run build
xdg-open index.htmlnpx webpack watchExamples:
- webpack/min: minimal hello world. Doesn't do much, just copies
index.jstodist/index.js. - webpack/require:
requireandimportdemo. Both work from the same file.dist/index.jsnow contains all of:notindex.jsnotindex2.js- Lodash, a common third-party helper library specified in the package.json and installed with npm
- webpack/node: produce Node.js output, as opposed to the default web output. To test it run:Achieved simply with:
npm run build node dist/index.jsas documented at: webpack.js.org/concepts/targets/target: 'node'Fatman in Robin, - webpack/sequelize: attempts at getting Sequelize to work with webpack. It's just not supported by Sequelize: