The error consists in a repetitive component that is rendered on any route when some router link is clicked. This was not happening every time, and because of that is too important be careful with Svelte animations and Sapper routes.
For now, i have been using transitions withou any other params like this:
<section transition:slide> ... </section>
This is not rendering any errors, but following the instructions of reddit seems like have other options to handler that and keep using additional parameters:
https://www.reddit.com/r/sveltejs/comments/e1xc0a/problem_with_routing_and_transitions/
Related
I want to render "reload" github buttons correctly, when i press on another button. I searched and i got this information, but I can't do it, i faced another error:
Uncaught Error: Module name "github-buttons" has not been loaded yet
for context: _. Use require([]).
when i include http://requirejs.org/docs/release/2.2.0/minified/require.js
Node.JS is a server-side technology, not a browser technology. Thus,
Node-specific calls, like require(), do not work in the browser.
See browserify or webpack if you wish to serve browser-specific
modules from Node.
But you can use their steps in order to make this button...
Usage:
Place this tag where you want the button to render
<a class="github-button" href="https://github.com/microsmsm" data-
size="large" aria-label="Follow #microsmsm on GitHub">Follow
#microsmsm</a>
Place this tag in your head or just before your close body tag
<script async defer src="https://buttons.github.io/buttons.js"></script>
Code Example:
https://codepen.io/Microsmsm/pen/NvJaNm?editors=1100
Reference:
https://buttons.github.io/
I'm using the following script to inject a svg in my html body:
Meteor.startup(function() {
$('body').prepend('<div id="svg"></div>');
$('#svg').load('images/svg/sprite/sprite.svg');
});
This works as intended but things go wrong when I manually reload the page in my browser. But only when there's a parameter in my route. When there's no paramater in my route I can refresh all I want without any problems.
Router.route('/test') // all OK!
Router.route('/test/:_id') // current template gets rendered multiple times and app finally crashes
I can't seem to wrap my head around this. Why is this happening? And how to fix this?
The load path needs to be absolute.
$('#svg').load('/images/svg/sprite/sprite.svg');
Looking for a solution for a few days. Need help.
Source:
node.js + express.js + jade template engine
Problem:
Can't understand how I can render 1+ dynamic blocks on one page.
For example:
We have a page: News main page
Blocks on page: Latest news (list 20 itens), hot news (list 4 items), most viewed news (4 items), block with news categories (it can display current category on the page with page with card of one selected novelty, so it is dynamic block too), and block with some user auth data.
"block" i mean a widget as we can see on site, not a block of code.
What can I do in express? I can route special url to special function in routes.
So as I see, if a want to render all this blocks on the one page I have to call all functions rendering each block in only one function of route.
I mean it seems that I have to do something like this (sure in libs but doesn't matter here)
app.get('/news', function(req, res){
call_last_news(funcion(){
call_hot_news(function(){
call_get_user_info(function(){
...
...
...
template.render.here();
final_here();
});
});
});
});
This looks real but so unuseful and unsupportable code that .. That's bad.
I can see solution in calls from template engine to render some blocks on the page. But not just include because all blocks can use db or cookies, session data etc. all blocks are dynamic. But I have no idea how to create such engine using express.js + jade
Well I'm not certain I understood all of the problem but based on the pseudo code, it looks like the main concern here is that you have a deeply nested set of potentially independent and reusable functions. There are two approaches to this problem that come to mind:
Use a control flow library
Use something like async series, parallel, etc. (which function depends on the nature of your code – are all of the call_ functions independent?) That will clean up your code and make it more maintainable.
Use ajax
Another approach you can take is to quickly render the page without all of the call_ functions and just make several ajax calls from the client to fill in the data. You could have routes which look like '/news/last', and '/news/hot', etc. This is nice because you can separate out all of the logic for each of these units into reusable URLs so you can mix and match them on any page.
I want to be able to dynamically reference JavaScript and Stylesheets depending on which page a user is on in Express. I thinking the best way to do so (though I'm open to suggestions) is to pass the current view to the layout page.
For example;
Given the url http://example.com/trees
I would want to have some logic in layout.jade that said something to the effect of:
script(src="/javascripts/{view}.js")
Which would get rendered as:
<script src="/javascripts/trees.js"></script>
Any suggestions or best practices for doing this?
req.route is the matched route, so things like req.route.path etc are available, or of course req.url which may be parsed. With express 2x you can expose these values to views automatically using "dynamic helpers" or res.local()
There are no best practices for doing this, since Express doesn't provide Rails like url helpers, so I think you're approach is fine.
The easy answer is to just put ALL your javascript into a single file and be done with it. Ditto for CSS. See the Ruby on Rails asset pipeline for details. You are probably making your life more complicated than necessary and also less efficient by having different javascripts on different pages.
However, since you asked, the answer for javascripts is easy. Just put the extra <script> tags in the view, not the layout. Problem solved. CSS doesn't work as cleanly because the <link> tags need to be inside the <head>. In this case, I define the styles I need as an array of strings and loop over that in my layout template. So in my route I set up a local variable such as
locals.css = ['/css/one.css', '/css/two.css']
Then just loop over that in your template and generate one <link> tag for each.
How I do use the loading_indicator.png provided in the design resources folder to make it act like an ajax loader?
This is how I display a loading indicator when starting my app, taken from the 'home' application (What's New). In your index.html:
<div class="loading">
<div class="throbber"><div></div></div>
</div>
In you app.css:
#import url("sp://import/css/eve.css");
adam.css being the dark Spotify theme and eve.css the light. Then, when your application is finished loading, just remove the element. You can do it with the dom methods in the spotify dom.js. In your app.js:
var dom = sp.require('sp://import/scripts/dom');
var loadingEl = dom.queryOne('.loading');
dom.destroy(loadingEl);
I don't know if the dom.js will be in the official API or not. Otherwise you can remove it any other way (standard dom methods, other js libraries you're using, etc):
var loadingEl = document.querySelector('.loading');
loadingEl.parentNode.removeChild(loadingEl);
Note that the above example does not necessarily use the loading_indicator.png but whatever images that are used by the adam.css and eve.css themes.
If you wan't to use the loader as a normal ajax loading indicator inside your app, then all the normal rules of web apps apply. Display loader when initiating ajax call, hide it in completed-callback, position it with css.
I realize this is an old topic, but with the 1.X API there is an easier way to do this by using the Throbber class which allows you to instantiate and hide fairly simply via JS.
var tracks = document.getElementById('tracks');
var throbber = Throbber.forElement(tracks);
// (wait for tracks to load and render)
throbber.hide();
Just make sure to include the Throbber class at the beginning of your JS:
require([
'$views/throbber#Throbber'
], function (Throbber) {