I'm new to pug, I've read through the documentation and I'm figuring things out as I go.
I have menus that are dynamic, and when the user selects one it needs to load the relevant information into the page.
For example:
Item1
Item2
Item3
Item4
If I click on one of these items it will navigate to 'localhost/item2' or 'localhost/item1', whichever you click on.
I know if I create a route lets say "p" then it will be 'localhost/p/item2' or 'localhost/p/item1', and I can handle all those requests with p/ and use the item2 or item1 to get relevant data
What I would like to do is have a header that wont get updated but a "body" that would change and update on the selected information.
is there a way to do this?
//- index.pug
doctype html
html
include includes/head.pug
body
h1 My Site
p Welcome to my super lame site.
include includes/foot.pug
Is there a way to "reload/refresh" includes without re rendering the page?
I've also thought maybe I could pass the information to the JavaScript page on the server but I only know how to directly communicate with the pug template.
If I understood correctly what you are trying to achieve, then that is exactly what SPAs like Angular, React or VueJS handle for you, so I would highly considering using one.
Nevertheless, under the hood what those Frameworks do is just using jquery to update the DOM accordingly as a response to events either emitted by the frontend or the backend.
If you are going to do this without the help of any framework (I strongly recommend against, your time will be much better used to learn one framework instead of emulating its behaviour), you should have a proper way of comunicating back and forth (ie: socket.io) and then a corresponding js in the frontend to either informing the backend of actions that happened in the frontend or parsing events from the backend and acting in response.
I hope this helps
Related
So, I have a website where i need to insert a lot of products from our suppliers' website, and I would like to automate it.
I was reading this question, that would solve most of the "front-end" part, and on the backend than I only need to get the link of the page, and use a basic web crawler library to search on that page the given selector.
However I'm missing the part where I inject a possible JS library on the supplier website, in order to allow others to select the element with the mouse, and not to find it using something like the Chrome console.
I was thinking about fetching the source page on the server side, and that returning it, but all the resources like CSS, JS, images, will be blocked by CSRF protection, and so here's my question:
Are there ways to do this in any way?
Edit:
ok maybe it's not so clear what I want to achieve... here's how thing should go:
Someone decides to insert a new supplier, that he should set the CSS path for the product name, the CSS path for the product description etc etc (section where i appreciate suggestion), and then he only needs to insert the products links and the server will get the informations using the CSS path inserted before.
I want to be able to create a PDF and send it via an email to the user in Express.js. My current tech stack contains: Next.js for the frontend and Express.js at the backend.
Basically, I want to send out an invoice to the user after the payment has been made. I'm currently sending an email, but I want to create a PDF and attach it with the same email. The invoice will be HTML-based, which means I'll have HTML tags like header tags, tables, etc. and CSS for these elements.
My front-end (Next.js/React) are actually not relevant here, because all the data required for the invoice is handled by Express.js itself. So, I'm considering using jsPDF to do this, but I'm not sure how to go about it. I don't use Pug in Express, but I want to dynamically create the HTML and use that to create the PDF.
Can anybody give me a direction here?
Thanks in advance.
If you know any React, there's React PDF that allows you to create PDFs, you could then save them locally before sending them, that might be an option, but it's not really HTML though.
Yes, pdfjs is something you want I guess. You can create your own HTML templates with placeholders for the variables that you might want to keep dynamic. You can easily find out a lot of examples on this on the internet to satisfy your requirement.
My issue: For my thesis I am creating an auction site. I have an admin panel in which I would like to have some configurations so that an admin can specify that if there are 10 days before the end of an auction some components should be displayed in different ways, some should be not visible at all etc. That’s what I call dynamic presentation.
My question: Right now I am working on architecture and wondering if SSR can be helpful in any way? I am already aware that it can shorten download time of some collections from my database even by half, but I am wondering if there is any way how it can be helpful with dynamic presentation itself?
What I already know: I have read all about advantages and disadvantages of ssr or universal rendering in react. Now I am only wondering if it can be in any way helpful with dynamic presentation or it won't matter if I choose SSR or CSR.
Small side question: I don’t have the whole architecture ready yet. What I know is that I would like to have a database, one separate app for an admin, backend and frontend (either ssr or csr). My first thought on how to manage this dynamic presentation was to store some rules in the database. Then the rules could be configured in admin app should an admin want to change anything. The rules should be send to backend and calculated with some additional data from frontend. Then backend could send some flag to frontend indicating which components to display etc. In theory I could move calculating to e.g. NodeJs server should I go with SSR. What I'm wondering about is; can you think of any better way to handle dynamic presentation? What I am most afraid of is numerous ifs in the fronetend. I would like to have some more elegant solution but I have no other idea so far. For some time I thought about a scoring system but I believe it would be too complicated (instead of sending a flag, send a score and frontend will display correct things based on the score). Also it wouldn’t solve the issue of ifs on the frontend.
I am aware that on StackOverflow questions which can be answered rather than discussed are preferred but I am really stuck and would appreciate help.
Basically SSR can provide some speed on your page because all of your data will not be trying to be fetched when the react script will end with an API call. Data are fetched from database when page is requested and be passed to the component to render with the script.
Also another very basic advantage and the reason why everyone are going the SSR way is SEO. You cannot achieve SEO page with react CSR. This is because google bot etc will try and crawl your page without even render it. Is like trying to "view source" of a page. When you are in CSR the page has no content only the initial react divs empty. You need SSR to have data on the first request of the user.
SSR brings the data on the first request of the user until a reload. In the meantime react router fetches data from the api.
Let me know if that help you.
PS: also a helpful link https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8
I'm working on an app that i being built using Node and Express. All is fine, however the app is currently not asynchronous and I'd like it to be, so I'm currently investigating what would be the best way to do it.
As far as I can tell, socket.io seems to be the preferred choice to go with Node.
My question is, is socket.io's methodology the best way to move data between the server and client or is there a better, more robust way to do it? Maybe something accomplished with Node only?
PS: I think socket.io sounds really nice. Its just that I'm new to Node and though there would be a simpler way to move data back and forth.
Many thanks
EDIT:
Ok, I've seen the term "realtime" used before and was frown upon. The commenter implied that technically there is no "realtime" application, hence me choosing asynchronous, however realtime does describe what I'm after: An app that will be all ajax-like. For instance, in my app, when I need to edit a saved document (mongodb records are called documents), I need to redirect the page passing the document id as argument. I don't want that. I want all through ajax. I can achieve this with jQuery, however behind the scenes the server will still be moving through urls (I'll need to create loads of app.get('product/:id/edit', ...), app.post('/product/:id/edit'. ... and then use $.ajax to get and post stuff ) so I was wondering what's the best way to achieve this.
PS: I might be looking at this completely wrong. Like I said, I'm new to Node and for app development for that matter.
EDIT2: An example: Let's say I have a page with a table in it where I list all products. Each product will have a EDIT/DELETE button. At the moment, when I click edit, I'm redirected to another page where I can edit the product and save it, then I'm redirected to the product listing. I'd prefer to load the product into a modal window, make whatever edits I need, then update the product/listing without leaving the page.
Using $.ajax I can use the product ID, enquiry the db for that particular product, populate the field in the modal with the product details and display to the user. Then allow the user to make the changes and update the products, however the part in which I need to enquiry the db in order to populate the modal is muddy because the id needs to be passed through the url...
I don't know how to pass the id to the application unless is through app.get('/product/:id/edit', ...) then app.post('/product/:id/edit').
I'm developing a very dynamic web application via ember.js. The client-side communicates with a server-side JSON API. A user can make various choices and see diced & filtered data from all kinds of perspectives, where all of this data is brought from said API.
Thing is, I also need to generate static pages (that Google can understand) from the same data. These static pages represent pre-defined views and don't allow much interaction; they are meant to serve as landing pages for users arriving from search engines.
Naturally, I'd like to reuse as much as I can from my dynamic web application to generate these static pages, so the natural direction I thought of going for is implementing a server-side module to render these pages which would reuse as much as possible of my Ember.js views & code.
However - I can't find any material on that. Ember's docs say "Although it is possible to use Ember.js on the server side, that is beyond the scope of this guide."
Can anyone point out what would be possible to reuse on the server-end, and best practices for designing the app in a way to enable maximal such reuse?
Of course, if you think my thinking here doesn't make sense, I'd be glad to hear this (and why) too :-)
Thanks!
C.
Handlebars - Ember's templating engine - does run on the server (at least under Node.js). I've used it in my own projects.
When serving an HTTP request for a page, you could quite possibly use your existing templates: pull the relevant data from the DB, massage it into a JSON object, feed it to handlebars along with the right template, then send the result to the client.
Have a look at http://phantomjs.org/
You could use it to render the pages on the server and return a plain html version.
You have to make it follow googles ajax crawling guides: https://developers.google.com/webmasters/ajax-crawling/docs/getting-started