so I have this website made with Next and on a page there are some graphs (the graphs content changes as it fetches an API) and info.
I want to add a button to the page and when pressed it download the page as a HTML file and includes all the JS and CSS in the HTML file instead of separately, does anyone have any idea as to how to approach this problem. (The graphs content should be the same content as it was on the time of downloading)
(The reason why I want to do this is because I want to distribute these files to others and I want to allow them to read it w/o an internet connection)
You can't really download a React 'page' because there are no pages in React to download.
Next further complicates this because it server-side renders everything and rehydrates client-side. If you inspect one of your pages, you'll see the JSON blocks Next uses for data. Look for the __NEXT_DATA__ script (usually in the footer of your page).
I think the two strategies you could use:
Screen-capture of the graphs during your build sequence and push them over to an AWS S3 bucket or similar (cumbersome)
When I ran into a requirement like this, I just made the data for the graph available as a JSON download just below the graph and it satisfied the use case sufficiently.
If you just want to download the assets and take a look, a workaround is probably leveraging the next/export package. This allows you to run yarn build and generate a static export of your entire site. This should include the file you're looking for.
Just some ideas to think through.
Related
I'm a few months into web development so I apologize if I misunderstood anything.
What I did
I created a react-random-shapes package that would draw out random shapes as a React component. You can see an example here on my site or in the project page. Each time you refresh the page you'd get a new image. (Note: these pages use React.)
What I want to do next
The result I'm aiming for is to create an API (GET-only) on GitHub Pages that would return the dynamically generated svg file (so you can do something like
<img src="https://github.com/artt/react-random-shapes/blob?size=300&fill=red">
which would return a random blob for anyone who's interested in using. Alternatively, this API could return the svg path so the user could do whatever they want with it (e.g. animation).
The problem I have
Right now I know how to output an html page with the svg file, but not quite sure how to return just the svg (or json, etc.) part of it.
Thanks!
I am trying to do the same thing. I think your best bet would be to use a webserver on another platform like Heroku or, another good option, Replit.
I created a simple game that displays flags on the page, if you click skip, the next flag is displayed(src link is changing) and so on. If I disconnect from the Internet, I noticed that some flags continue to be displayed; they are probably stored in the cache. Does React store them or the browser?
Link to site: www.country-flag-game.synkevych.info
<img className='flag' src={flagUrl} alt={countryName} />;
Browser stores items like images, CSS, JS files, etc. in cache in order to save bandwidth and improve page load speed once user returns to site.
In case you want to hard reset cache from server (or inside your frontend app) the best way is to add some hash to file ending, like en-US.customHash.png or en-US.png?randomlyGeneratedString.
You could setup Webpack for adding hashes to files, so once your app.js file changes, hash is changed as well, so browser will know that file should be redownloaded.
I have a website which have loading time of 10 sec, and which we want to reduce to 3 second or so. I have two questions on it:
1. When I do an analysis of bundle loading in the network tab of dev tools, I can see some JS/CSS files which have very less usage in home page load. But since bundle.js contains everything, I can't see what JS part of it (which is unused), is present in which source code file. Is there a tool or way to do so, so that I can reverse map (not covered JS and css), to an actual source code file and modify it?
2. While the bundle is downloading, is there a way to show a spinner or progress bar to the user to wait for some more time, which is obviously better than showing blank page?
Tried lighthouse and analysis of loading using network tools
React supports code splitting : https://reactjs.org/docs/code-splitting.html
If you implement code splitting in your app, then you can use a fallback component.
Based on my custom URL parameters I process, I am trying to modify dynamically a meta tag I have id'ed in index.html like so:
<meta name="og:image" content="http://example.com/someurl.jpg" id="ogImage"/>
The code below in my home.ts seems to be working
document.getElementById('ogImage').setAttribute("content", Media.ImageURL) ;
I can verify it is via the browser dev console/elements.
However, when I view from facebook via their ojbect graph debugger at
https://developers.facebook.com/tools/debug/og/object/
It appears to see the default
http://example.com/someurl.jpg
as if the index.html is shipped before my home.ts gets chance to make the update.
Perhaps, my understanding is flawed and there is better way to do this.
Thank you.
Note1: initially, I was thinking I had to make some angular binding between index.html and one of my services but I could not locate any sample code, the closest I came to was this post
How can I update meta tags in AngularJS?
But I don't know how to apply it for my ionic2/3 code, so I opted for the document.get approach.
Note2: the ultimate goal here is to share a link into a social media (web or app) like facebook, a messenger like viber/skype, etc... and have it resolve to meaningful images, title, description to drive the visit back to the site via browser, or app if the user clicking on the link is on a mobile device with my app version of the site installed on his device.
Note3: if you decide to point me to ionic deeplinking please provide code to match above, because I could not understand how to apply to my case.
If you are trying to implement dynamic open graph meta tags values in your pages, you will need a server-side scripting language like php. Such a script will run on the server, update the pages as needed, then the pages will be served to the requesting site or application.
client-side scripting (ie. JavaScript) is usually ignored when a site or app is merely visiting your site/link for the purpose of extracting (aka scrapping, parsing html) information such as the one provided by the open graph meta tags (og:title, og:description og:image...).
I am currently working on a website and during the loading of the entire page, the page is "jumping" so that I would like to know how I can create an entire ,let's say black screen, where something is displayed during the time the page loads.
That seems quite easy but I was wondering because I have separate files for the header, the footer and the content on how to coordinate all of them, and still have a nice code.
I am working with angularJS. I read a lot about : $viewContentLoaded and also tried ng-cloak, but if any of you has an awesome solution to keep simple, it would be great :)
Thanks
I would say that one approach you can take is use some sort of templating engine for your HTML files (like Jade for example). In this way, you can keep all the code nicely separated in multiple files and using a task runner like Gulp or Grunt you can compile your HTML files before serving the page.
The important difference here is the fact that you won't have to load all the page parts (header, footer and so on) using AJAX requests. Instead, they will already be rendered in your HTML page allowing you to create a nice loader using ng-cloak on your content part.