Major projects can be seen at: Section "The most important projects done by Ciro Santilli".
These are some smaller projects that Ciro Santilli carried out. They are all either for fun, or misguided use of his time done by an younger self:
- small naughty stuff is listed at: Section "Ciro Santilli's naughty projects"
- Because Ciro cares about education, around 2014 he looked into markup languages and version control for books, before he noticed that this approach was useless and that ranking algorithms are all that matter:
- He implemented some large features and several smaller improvements.GitLab sent Ciro a free swag bottle later after they got funding on to thank him for his contributions: Figure 1. "Ciro Santilli in a dune lake in Jericoacoara, Brazil, with his GitLab bottle". He had to pay for the beach trip though.
Figure 1. Ciro Santilli in a dune lake in Jericoacoara, Brazil, with his GitLab bottle. - Markdown Style Guide
- karlcow/markdown-testsuite improvements: Ciro has implemented the test runner a few months before CommonMark left stealth mode and killed it instantaneously.At least MacFarlane was able to reuse part of the HTML normalizer he wrote, and he extracted the multi-engine comparison to: CommonMark Implementation Compare.Playing with this project has led Ciro to find and report many Markdown bugs/bad behavior on other software, e.g. GitHub and MultiMarkdown-4.
- isaacs/github public unofficial GitHub issue tracker: he has commented there so often that he was made a collaborator
- Node Express Sequelize Next.js realworld example app
- VCDVCD: value change dump command-line pretty printer!!! The type of thing that a billion dollar EDA tool vendor will never implement ;-)
0 time 1 counter_tb.clock 2 counter_tb.enable 3 counter_tb.out[1:0] 4 counter_tb.reset 5 counter_tb.top.out[1:0] 0 1 2 3 4 5 =========== 0 1 0 x 0 x 1 0 0 x 1 x 2 1 0 0 1 0 3 0 0 0 0 0 4 1 0 0 0 0 5 0 1 0 0 0 - Vim: sometimes Ciro want crazy and wasted his time with Vimscript:
- Vim Markdown: the owner
plasticboywas really nice and made Ciro a collaborator for his contributions, notably a live ToC outline and the header mappings - Vundle Plugin Tester, which he used to start the testing system of Vim Markdown
- Vim Markdown: the owner
- Breakthrough Message: aliens!!! Creative/media project, powered by some Python scripts.
- making Google Maps reviews of places he's visited to help other people. Ciro's photos reached 1 million views in 2019: www.google.com/maps/contrib/106598607405640635523/photos (archive)
Ciro Santilli's implementation: node Express Sequelize Next.js realworld example app.
Ahh, you can't have new ideas anymore!
Basically puts together every backend with Front-end web framework to create the exact same website.
The reference live demo can be found at: demo.realworld.io/#/ It is based on Angular.js as it links to: github.com/gothinkster/angularjs-realworld-example-app TODO backend?
There are however also live demos of other frontends, e.g.:Note that all those frontends communicate with the same backend.
- React: react-redux.realworld.io. But note that tag addition at post creation is broken there as of March 2021, but not on master: github.com/gothinkster/react-redux-realworld-example-app/issues/151#issuecomment-808417846 so they forgot to update the live server.
- Vue.js: vue-vuex-realworld.netlify.app
As of 2021 Devs are seemed a bit too focused on monetizing the project through their "how to use this project" premium tutorial, and documentation could be better: just getting the hello world of the most popular backend with the most popular frontend is not easy... come on.
github.com/gothinkster/realworld/issues/578 asks for community support, as devs have moved on since unfortunately.
Remember:
- by default, the frontends hardcode the upstream public data API:
https://conduit.productionready.io/apiso you have to hack their code to match the port of the backend. And each backend can have a different port. - when you switch between backends, you must first manually clear client-side storage cookies/local new run will fail due to authentication issues!
Important missing things from the minimum base app:
- server-side rendering:
- github.com/arrlancore/nextjs-ssr-real-world-app-example. As advertised, that global instance does render with JavaScript disabled! Proposed for upstream at: github.com/gothinkster/realworld/issues/423
- github.com/gothinkster/realworld/issues/266
- no javaScript bi-directional communication library built-in... come on: github.com/gothinkster/realworld/issues/107
- email notifications however as tested on the live demo: demo.realworld.io/#/
- error handling is broken/missing/inconsistent across apps
First you should the most popular backend/frontend combination running, which is the most likely to be working. We managed to run on Ubuntu 20.10, React + Node.js Express.js as described at github.com/gothinkster/node-express-realworld-example-app/pull/116:Then just:on both server and client, and then visit the client URL: localhost:4100/
- github.com/cirosantilli/node-express-realworld-example-app/tree/mongo4 which has a simple patch on top of github.com/gothinkster/node-express-realworld-example-app/tree/ba04b70c31af81ca7935096740a6e083563b3a4a for MongoDB 4 supportThis requires you to first install MongoDB on Ubuntu and ensure you can login to it from the command line.
- github.com/gothinkster/react-redux-realworld-example-app/tree/9186292054dc37567e707602a15a0884d6bdae35 patched to use the correct server host/port
localhost:3000:diff --git a/src/agent.js b/src/agent.js index adfbd72..e3cdc7f 100644 --- a/src/agent.js +++ b/src/agent.js @@ -3,7 +3,7 @@ import _superagent from 'superagent'; const superagent = superagentPromise(_superagent, global.Promise); -const API_ROOT = 'https://conduit.productionready.io/api'; +const API_ROOT = 'http://localhost:3030/api'; const encode = encodeURIComponent; const responseBody = res => res.body;
npm install
npm startYou have to hit the Enter key to add tags, it's terrible: github.com/gothinkster/react-redux-realworld-example-app/issues/151#issuecomment-808417846
One cool thing is that the main repo has unified backend API tests:so the per-repository tests are basically useless, and that single test can test everything for any backend! There is no frontend testing however: github.com/gothinkster/realworld/issues/269 so newb.
git clone https://github.com/gothinkster/realworld
cd realworld
git checkout e7adc6b06b459e578d7d4a6738c1c050598ba431
cd api
APIURL=http://localhost:3000/api USERNAME="u$(date +%s)" ./run-api-tests.shFramework 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?