We Keep Coding

Using a single layout template for React pages?

I am just beginner in Reactjs and trying to use single layout components e.g. NavBar, MainContent and Footer. However, I am not sure how should I define properly. There are several options:
index.html
index.js
App.js
On the other hand, for Login page I want to use another template which has neither NavBar nor Footer. So, How should I define such a layout pages properly? Could you just give a basic and proper example? I implemented all layout seperately, just need the proper places implementations.
enter image description here

How to create multiple Html subpages without writing redundant code?

everyone currently I am working on a project which a Financial web application. But as I'm moving forward code redundancy is increasing & particularly for HTML code.
I have multiple Html pages on my website such as Dashboard, EditProfile, AccountStatistics, etc. For Eg.
DashBorad - enter image description here
EditProfile - enter image description here
AccountStats - enter image description here
Now judging from the above pics you guys can see every time we navigate from one page to another only the main section content is changing but the body structure & design of the website remains the same.
Problem: If i want to create a new page I have to include code for header, sub-header, sideBar, footer which is repetitive. I just want the main-section code to change. For eg - Made one file like Body.html which contains code for header, sidebar, etc & every time I want to create a new page then only code for the main-section has to written which be can later merge with the body.
How can we achieve this?
(Tech used - Html, Css & JavaScript)
Note: I can also attach code if anyone wants more clear understanding!
Thank You!
Cheers to coding :)

You can use Frontend Frameworks like React/Vue.
Depending on if it's a static site, you can use stuff like Jekyl/Hugo.
If you want to go the SSR way, then you have Angular Universal/ ASP.NET Core/ PHP way.
Depending on your use case, you can't really go wrong either way. If you're new, pick either one and get started Learning.
Have fun!

This is an excellent use-case for a library like ReactJS (and other similar alternatives). Using React you can define 'components' for your header, sidebar and other common parts of your webpages that can be reused in different places. You can also update each of these components separately.

Angular render component depending on url

I have an Angular 9 single page website. This page contain multiple component rendered with angular universal. All blocks are rendered one after another.
Let's say I have these component: header, services, contact, footer.
In my header I have a link to all component as anchor.
To optimize my SEO, I would like to render all block for users, but only the block linked to the anchor for search engine crawlers.
For example,on mywebsite.com/contact :
As an user I would render all component but I would be at the contact anchor.
As a crawler, I would only render header, contact and footer
I searched everywhere but I cant find a way to do that properly, even that it seems like a thing everyone who want to optimize their SEO should do.
Am I missing something or do you have a way to do that ?
EDIT :
By using ng-template I can show one component or all with a condition.
For this condition I need to get the user agent but I cant find a way to get it with Angular Universal.
navigator.userAgent doesn't work since it's the website is rendered by the server.
Since I'm new to Angular I dont know how to get that information. Any help ?

Create a global svelte-component that works like svelte:head

In my current project I am working with a self-developed module system, where the individual modules should also have the possibility to extend e.g.the navbar by simply writing some HTML inside a <navbar:extend> tag.
It would be cool if there was a way to get it done with as little writing as the <svelte:head> tag.

What about creating a store to which you will write (update with) your HTML extensions from your Components and at the same time subscribe to that store within your NavComponent then within NavComponets append the new HTML using {#html variable}
like that you can append HTML from different components to your Navbar, this should achieve the functionality you desire.
here is a quick example of the implementation
Child1.svelte and Child2.svelte are two random components which are going to update you navbar.
Store.svelte is the file where you will create your global store to share HTML.
Nav.svelte is the navbar you want to populate with HTML from other components
try writing some HTML within Child1 and Child2 input fields then submit it, it will be rendered within the NavComponent

How to lazy load part of template in Angular 2?

I've an Angular 2 component, which contains multiple sub-components. For a few of them it's quite expensive to load them and sometimes it is not necessary to load them at all. For example if the user is not scrolling that far.
Anyway, I know how I can lazy load routes, but is there a way of lazy loading a template? Like only if a element is in or close to the Viewport?

There is no way to lazy load templates. What you can do is to lazy load modules. How to manually lazy load a module?
If you use this with ViewContainerRef.createComponent() (see Angular 2 dynamic tabs with user-click chosen components for an example) to dynamically add the components that you only want to show if the users scrolls far enough, it might work (not tried myself yet).

You can segregate or group sub-components to be displayed into smaller components to be loaded together.
To reduce the time to load,
1. try to use smaller templates inline into component file.
2. Use *ngIf directive in your template which can avoid rendering of the template and component instance is not created as such. However, take note that if you're using *ngIf it is better to use only is the DOM is not refreshed fequently, else you may create DOM and use the component by binding it with [hidden] attribute of the DOM