I'm creating a small web application.
The application have several screens (list, inner list, item details, etc.).
I have a REST API on the server and I need to create the client.
At start I thought about HTML page for each main screen.
For every page I have a CSS and JS code.
The HTML will include only place holders (empty divs) that wwill be filled by the JS code.
Then I've decided to a create the application as single page application and using the URL with anchors to imply the state (domain.com/#list1#item1).
I've found this question to be informative about the architecture of the application, but I wonder:
1) How can I server the right CSS to the page in a clean way?
2) How can I define the page basic structure (the way the HTML divs do) in a clean way?
Unless your css is drastically different from one page to the next it should probably be in one page anyway. You will have a base css file that gets served up to every page and then page specific css files as needed for each pages. The idea is to reduce page loading overhead, but in your case it sounds like it is pretty small so putting everything in one css file shouldn't have too big of an impact.
As for page structure, start by just doing a rough drawing of each page on paper and then pencil in the divs. Then see how things overlap and what can be the master page layout elements and what are the actual page layout elements. then look at the common pieces to decide how to set up your divs.
To be honest, trying to do everything in one page, the layout of the divs is going to be a little bit messy at best. Unless it is related functionality like the steps of a wizard or something similar, putting it all in one page may cause down the road problems if you try to add or change things.
Related
At the moment, I need to create an app that will dynamically change it's sections
This is the app layout.
The main section would be an independent webapp, because it would keep changing it's contents.
The nav bar it's basically a set of images that work as buttons and change the contents of the main section.
The side bar have some parallel uses, but it can work with the "main webapp" (the one that contains all sections
That's why I think having a nested webapp would be the best solution. I tried google site but since I can't really control it I dropped the idea.
But it's possibly to achieve that? At the moment the app need to refresh the whole page to apply even the smallest HTML change
Im a little confused, You could have that part dynamically generate information in the main section and everything else be static.
And the web app will update anytime you change the code weather its a small html changes or logic changes. unless its deployed and you dont have sync on, then you need to manually sync it to show the changes.
Update:
I solved my issue stacking divs and changing the active one by hiding the others.
I also using an include with my templates, in a way I can split my HTML code in a main template.
I use two types of includes:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
And
function includeTemplate(template) {
return HtmlService.createTemplateFromFile(template).evaluate().getContent();
}
one used to include static HTML and other dinamic HTML (templates)
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.
I originally designed the whole website (single page) responsive, readapting simply using css and some inline classes from bootstrap 4.
Now i found myself in need of redesigning the whole desktop version (or let's say with a very different structure from how it currently looks on mobile).
So I'd like to keep the html i have and keep using it for mobile, and modify a copy of it and use it for desktop.
The easiest way i thought has been to keep a single index.html file as now, duplicate the whole index.html inner part (between the div with class="page", which basically comes right after body) and set one of them to class="page d-none d-lg-block" and the other one class="page d-block d-lg-none" , using bs4 classes to show/hide content based on screen size.
I have various inline js functions and other functions in js files which refer to ids, so my feel is that creates errors because js see same ids twice or some stuff appears as the page load (due to the bs4 inline class to show the content), but just to be sure does anyone know if this is a correct thing to do (also SEO wise)? Or will it mess with the javascript doing so?
Make an existing page to become responsive is not an easy thing, but its much more worth than using a workaround to hide in small and hide in large breakpoint.
The reason is because:
You will have redundant component, means your app size will be doubled after you make it responsive,
and if you use static content without database, you need to maintain the content in two place (small and large breakpoint).
Spend more time on learning grid layout, and implement it in the right way. It will become much more easier for you to maintain your web app in the future.
I have a chat website using node js and angular, and I have made the login/signup and chat page using these. but the problem is, whenever I load the chat page it uses the style from the other pages, and basically acts like a different section of the same page, It also merges the login/signup together, which is ok, because they have the same style just different number of form boxes, I want to stop angular from merging the styles from the login/signup with the chat and have it use its own style.
All help would be very much apreciated, thanks in advance.
And as far as I have been told and know, there is nothing in my own code that is preventing this, it is only angular itself. strong textBy the way, As far as I know, certain things the body of the different pages cant be individually styled, and If I were to merge html's it would take a while and research and I dont really want to do so.
The idea of loading pages as partials is not loading its css and js files etc.
You need to have only one file as index.html and inside,
define <ui-view> tag this is where you have to load all your partials to, but not an entire page, having html tags and everything.
Take a look at this pattern to load all your partials into one file.
and then,
I highly recommend you check this web site out to set nodejs to set all the missing routes to your html file as well as defining your "/css", "/js" etc.
I have just merged these two working methods to make a very concrete restful application structure.
All you have to do to avoid this problem is to write your css with starting parent class. In this way your css will work only if you have parent element with specific class.
.signIn .button {
}
.chat .button {
}
Write it like this and the button in different elements will have different style
I am building a website using PHP and JavaScript, and I feel that I have a good grasp on where to include my JavaScript, but a more specific situation has come up that has me confused. I currently have all of my JavaScript in one external file, which is being included on every PHP page.
Let's say that I have a paragraph with an id='myParagraph' and I need to highlight this paragraph in red with JavaScript on page load. This paragraph is only on ONE PHP page and my website has about 50 different pages. I immediately assumed that I should throw some code into my one external JavaScript file, something like:
$('#myParagraph').css('color', 'red')
and the paragraph would be highlighted when that page loads.
My question is: is this the best way to do it? To my understanding, every time I load a page it will be searched for an element with the id myParagraph, yet 98% of my pages won't even have that id. Is this wasteful? Should I instead include the following code:
function highlightParagraph()
{
$('#myParagraph').css('color', 'red')
}
in my one JavaScript file and then put some inline JavaScript in the PHP file with the id myParagraph to call the function highlightParagraph() when it's loaded? That way, only the one page with myParagraph will be searched and highlighted.
I feel like option 2 is the best, but I read all the time not to use inline JavaScript.
edit: I realize that for this example you would just use CSS. I'm just using it to get my question across
You should have a one "big" js file with the infrastructure functions and all the pages should have a reference to it.
Then each page should reference another js file with the functions related only.
The good things about using external js files are:
The files are cached after the first download => Faster surfing.
Separate of concerns, you keep the presentation tier away from the scripting tier.
Another important note:
The best way to change css is with css... not javascript.
I
If you change the element style on DOM ready, just add the element definition
#myParagraph{color: red;}
The problem with inline JavaScript is you might be starting with a few lines now, but in a few weeks or months, it will add up and be a lot of inline JavaScript.
That is bad, because inline JavaScript can't be cached by the browser like JavaScript files that you include with <script src="path/to/file.js" />.
That's bad because you add a lot of content that will be fetched every single page view by the user, adding load on your server bandwidth and slowing page load for the user.
If it's just a few selectors, don't worry; The time wasted on it won't cause any browser to sweat.
Though, if it becomes a lot of code for a different page/module of your site, you might want to split it into a different JavaScript file and include just that file when certain pages are loaded.
That way, the browser will cache that file and save that bandwidth for you and the user.
I wouldn't be too surprised if many people disagree with me (violently even) but I don't have a problem with putting a javascript tag with specific javascript for that page in the header if it will reduce the number of files or overall complexity of the project. Most of the core things that are done everywhere should of course be separated in another file but if it is a one page deal, then I would go for cleanliness.
The same goes for css, if it is specific to that page just put a css tag in the header with the specific changes that differ from the master css file. BTW as everyone is pointing out, this is a case where you want to just use CSS.