We Keep Coding

How to generate a new Page on a certain event (next.js)

I know the title is confusing, but basically, I want to generate a page on a certain event is triggered (i.e. a button is clicked).
For example, when you make an account on a service like twitter, how exactly does it generate a unique page for your profile (like https://www.twitter.com/exampleuser1234)? This has always confused me and I'd love an answer.
I have searched and scanned Google far and wide, and I could not find any clues at all.
I don't even know how to start.

This is done using dynamic routes, e.g. /users/[id].
You can learn more in the documentation
https://nextjs.org/docs/routing/dynamic-routes

When to use a virtual list?

I'm building a feed like Facebook or Twitter using React. I need a list of posts... however, I don't know if it's worth having a virtual list or not.
I don't know the height of each post until it's been rendered as it might contain an image or a video, I also need the whole window to scroll (not just one element), and I need it to be an infinite list (to load more posts when the users reaches the bottom).
What benefits would I get from using a virtual list rather than simply displaying all posts? it seems like a lot of work to maintain and set up what I'm looking for.

Google Inbox-style navigation with vue-router

I'm building an app with vue-router and trying to achieve a UI similar to that of (the now defunct) Google Inbox. Or the Techcrunch homepage, which is possibly a better rendition of what I need.
there's a list of items
when you click on one of those items, it "expands in place" to display more details.
the URL also updates to reflect the expanded item
when clicking "back" the item collapses back into the list
when accessing the URL directly, the page should display the expanded item, and (optionally) could display more list items below.
Thing is, I can't figure out how I would build this - I'm trying to start from the idea of child routes, but I don't know where to place the child <router-view> since its location will always be dynamic based on which item was just clicked in order to expand.
I have a hunch it's related to named views but I can't wrap my head around it.
Any ideas welcome!

A similar topic came up on the Vue github page a while back, but involving the opening of modals as opposed to opening collapsing containers. One of the contributors to that thread wrote a pretty good blog post that might point you to a solution.
Once you get the dynamic routing sorted as they did above for modals, swapping the blurb for the article and animating the expansion should be fairly simple. The Vue docs cookbook has a good article on building a dynamic blog that should come in handy as well.

Create multi page design with single URL

My goal is to create multi screens in one single page.Depending upon the action the user will be able to navigate from one screen to another screen.I have shared the images below
When the user clicks on any of the categories ,it will navigate to a second screen.
While clicking back it will again comeback to the first screen without change in URL.I have tried creating a full page modal and could not achieve this kind of functionality.I am not sure whether it should be done as a modal with multiple screens.
Please suggest me any method I can achieve this.

What you are likely referring to is creating an SPA or Single Page Application. This can be done through 'Vanilla' JavaScript at great effort or via one of many JavaScript Libraries or Frameworks.
Reactjs, Angular and Vuejs are probably the most common.
IF you were to use Reactjs then you could use what's called React Router. React Router would do what you want to do very easily. Doing it in Vanilla JavaScript would require a great deal of work or it would be very ugly.
However you did ask, so one way of doing would be to use JavaScript to load an iFrame or to make a top level parent element display: none and another to then display:...
Also if you are thinking of something less hacky, but not something as sophisticated as React or it's peers, then check this link out for a relevant article. Perhaps it's a path forward that you would prefer.
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng

To help rookies like me, you can make a single page app or SPA, or a dynamic page that updates based on user actions with a single URL, in vanilla Javascript. You don't have to use a framework.
There are 3 concepts you need to understand:
The server doesn't see past the # in the URL
You need to tell your code what screen you want to display. Normally you would have URL.com/page-you-are-on and click a link to go to URL.com/page-you-want
However, in a single page app, you don't go to different URLs. So how does it work? You use a fragment identifier or a pound symbol. #
The # in the URL doesn't get recognized by the server. So URL.com/page#page1 and URL.com/page#page2 to the server is the exact same URL.com/page.
So you can use the URL to indicate to the server what page you want, in your single page app.
A Router can decide what to show based on the # URL fragment
So your page loads at URL.com/page#page-you-want. You need to inspect the URL and get the piece past the #. You inspect the URL, and split it on the #. That means you get page-you-want. Your code then uses that to decide what content to display. The function or file that does this is commonly called a router because it routes to the file or function you want displayed.
Once you know what to show, dynamically update the DOM
This is where the magic happens. Your website looks at the URL, gets everything past the #, sends it to function that decides what to display. You now need to display it.
The DOM has lots of functions and methods that help it update and create various things. It could be as simple as this:
function displayPageAbout() {
// the router calls this if the URL is URL.com/page#about
let pageSection = document.getElementById('pageSection') //this is where the page will be displayed
//create the div and give it content
let page = document.createElement('div');
page.textContent = 'This is the About Page'
//add the div to the spot on the page where the content should go
pageSection.appendChild(page);
}
That is basically it.
If found these two examples and tutorials useful in understanding what it is, and how it could work.
https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
Good luck!

How can I dynamically include one of several AngularJS partials depending on the route?

I'm working on a music app which has urls of the form my-app.com/[0-9]{10}, like so:
my-app.com/0123456789
my-app.com/1293938388
Each one of these is either a song, a playlist, or a user page, and I can query the backend to figure out which one. However, since these URLs are not distinguishable without querying the database, I can't do the normal $routeProvider.when('route-prefix/:routeArgument') to instantiate a different partial for each one.
I'd like to be able to specify a default handler which shows a spinner and queries the database, and then include one of a number of partials and with one of a number of controllers based on the type of the response.
What's the right way to do this in angular? Should I be using ng-include? I would like it if the inactive controllers didn't execute at all, which is why the obvious solution of using a partial with multiple ng-controller directives doesn't seem right.
Thanks!

As discussed in the comments, ng-switch can be used conditionally add or remove content from the DOM, based on the route. (This is in contrast to ng-show/ng-hide, which currently only modify CSS properties to show or hide content that is always in the DOM).