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.
Related
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.
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 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.
I'm building a project with angularJS. I use ui-router for views, and nested views.
So I have a index.html with just the header, the footer and a "general" ui-view where I load asychronously the Home-view, Contacts-view, About-view, etc.
On the "home" page and on the "about" page there are two different Adobe Edge animations.
They work like charm when I load them for the first time, but when I navigate through the website and then I come back to the home or the about page nothing appears.
I've tried loading the edge scripts in different ways
in the index.html head with the script tags
in a angular directive
in the controller
during the routing processes via the resolve option of ui-router
None of this strategies fixed the problem. The animations still play just once.
Finally I decided diving in the js code crafted automatically by Adobe Edge (I'm not a designer, I have no idea on how to create animation with Edge).
I found that Edge create an AdobeEdge object and bind it to the window... then call the animation throught an event handler in a jQuery anonymous function
(function($, Edge, compId){
....
$(window).ready(function() {
Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-123456");
On the official Adobe documentation (really bad!) there are some methods to call on the AdobeEdge object...
I tryied to insert in the home-controller the following line
$window.AdobeEdge.getComposition("EDGE-123456").getStage().play();
but doesn't work.
After a wasted whole day I'm frustrated, I hate who ho conceived Adobe Edge scripting and overall I need an help to fix it the right way (beofore implementing horrible workaround).
Thank you
Try using playAll(). I imagine this plays all the Symbol timelines at once (it's difficult to know for sure since the documentation is so vague), but I've found it works for my purposes.
$window.AdobeEdge.getComposition("EDGE-123456").getStage().playAll();
I am using the Routing and Multiple Views feature of AngularJS but I don't see the HTML partial file (or the embedded Javascript) in Chrome's "Sources" tab of the Developer Tools.
In my index.html file, it includes all the tags for AngularJS, jQuery and Bootstrap along with my custom app/controller Javascript file. These files all appear in the Sources tab.
My application works correctly. As I click around between the links on the page, the partial HTML files are loaded and displayed and the files are listed in the Network tab.
The problem is that the partial HTML files do not appear in the Sources tab. How can I debug the Javascript in those partial files?
It looks like the closest thing to a debugger is Zone.js from the Angular team, especially since it will be built right into AngularJS in the future.
This means adding some more code, but the benefits seem to outweigh the cost.