I have started a meteor application using the accounts packages for facebook, twitter, github and auth accounts. For UI, I am using the bootstrap package. Whenevee I load my site projectx.meteor.com, the login links take some time
I have everything static on the HTML page, except for the link to login:
client/x.html:
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>{{loginButtons}}</li>
</ul>
</div>
There is no JS on the client side and I have called the startup method on the server.
Server/startup.js:
Meteor.startup(function () {
});
Also, when I visit the above URL from IE 9 on my Windows Phone 7.5, it doesn't show the login link at all.
Update: After the comment below, I modified my code to remove packages and additional HTML. The packages now included are:
preserve-inputs
accounts-ui
accounts-password
accounts-facebook
accounts-twitter
accounts-github
I have removed bootstrap and the only thing on my template now is {{loginButtons}}, It still loads the login link after a delay. Is this the default behavior of the accounts package ?
The reason why the buttons take so long to load is because Meteor has to ask the server-side for the necessary configuration information (located in a collection in your Mongo instance) before it can render the login buttons for each of the external services you want to use. I think the best solution (and the solution I use) is to simply build the buttons client-side if you want faster results or tweak the login buttons template to allow for data ported in from the client-side using a JSON object with all the OAuth keys it needs.
As you say, this is the default behavior.
There is no problem about bootstrap or js in your code.
I cant explain exactly why but it works that way.
Related
I've got an ASP.NET Core MVC web application (running on .NET 5). with the default 'individual authentication' template.
In the startup.cs I changed the standard URL to:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{project}/{controller=Home}/{action=Index}/{id?}");
endpoints.MapRazorPages();
});
I added 'project' in front.
This works fine when navigating between the home, privacy, and every other page I created.
<a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> // This hyperlink works fine.
// Returns: www.mydomain.com/myUniqueProjectName/Home/Privacy
The problem is when navigating to 'Log in' or 'Register' page (provided by the identity template) that part of the URL just gets deleted.
<a id="login" asp-area="Identity" asp-page="/Account/Login">Login</a> // This hyperlink doesn't work
//becomes: www.mydomain.com/Identity/Account/Login 'myUniqueProjectName' is removed.
Now I solved it (kinda) but it's all hardcoded and doesn't make use of the asp-action and asp-controller tag-helpers.
The way I've done it now is like this:
// This is in the _Layout.cshtml (in the navigation)
<a class="nav-link text-dark" id="register" href="/#ViewContext.RouteData.Values["project"].ToString()/Account/Register" >Register</a>
// This is in the Register.cshtml (scaffolder template from asp.net core)
#page "/{project}/Account/Register"
The problem is, 1st it's hardcoded 2nd, I have to do all my pages hard coded like this because otherwise I can't navigate back to the pages I've created myself (the page refreshes but stays on the Register page). I think this is because it doesn't recognize the 'myUniqueProjectName' part in the URL.
Is there any better solution than to do all my routing hardcoded like this?
First of all , you can implement it in a view then inherit from that view or use a partial view for this, then you don't need a piece of code in every page.
Secondly, you can get those attribute from your element using javascript and make your url and navigate.
However you can dig documents of this to see what's the proper way of implemnting this,you need to see if it worthed to put time on this or not
I planned to use materialize:materialize package to a meteor app. As I can understand materialize use a lot of javascript for effects, collapsing and so on. Meteor has its own event handling but I suppose materialize will use jquery (I suppose I don't need to add jquery, it's included, or?) and will be running outside meteor events.
Is it enough to just add the package and everything will work, not just the look but also the javascript (feel)? I am trying to get it to work with a materialize template I bought and its not optimezed for meteor so I have problems to make it work.
Has anyone try this setup and is there any suggestions for good sources.
Using materializecss with Meteor works great, but you will have to initialize jQuery plugins yourself (just like in a regular HTML5 app without Meteor, as Materialize docs hints at).
Meteor templating system includes automatically jQuery, and you will have to use template.onRendered to correctly initialize the plugins, as opposed to initializing them in a $(document).ready callback.
For example, here is a simple Materialize dropdown markup inside a Meteor template :
<template name="myDropdown">
<a class="dropdown-button" data-activates="my-dropdown">
My Dropdown <i class="mdi-navigation-arrow-drop-down right"></i>
</a>
<ul id="my-dropdown" class="dropdown-content">
<li class="js-first-item"><a>First item</a></li>
<li class="js-second-item"><a>Second item</a></li>
<li class="divider"></li>
<li class="js-third-item"><a>Third item</a></li>
</ul>
</template>
And here is the according plugin initialization :
Template.myDropdown.onRendered(function(){
this.$(".dropdown-button").dropdown({
hover:false
});
});
You should use standard Meteor events to handle user interaction :
Template.myDropdown.events({
"click .js-first-item": function(event, template){
console.log("clicked on the first item !");
},
[..]
});
Overall, your Materialize theme integration into your Meteor app is not something as trivial as droping the theme inside your source files and meteor adding materialize:materialize, but it should not be something overly difficult.
Sometimes you'll hit Meteor related issues when trying to initialize Materialize plugins but the corresponding markup is not yet rendered into the DOM, see this question for a possible solution : Meteor + Materialize: collapsable in for each doesn't work
I've just started developing a completely new site using ASP.NET MVC3 framework and #razor.
I would like to use in the client side the angular JS framework, but the use of both is a bit confusing.
How do I loop an array?
In ASP.NET MVC I'll write the following HTML:
<ul>
#foreach (var item in this.Model)
{
<li>
#item.Name
</li>
}
</ul>
In Angular I would write the following HTML:
<ul>
<li ng-repeat="item in list">
{{item.name}}
</li>
</ul>
Which of the two is the most correct way to do that?
There is literally no difference between the two as far as the end result is concerned and you can, if you so desire, use either or both. The difference is in what procedure the code is generated.
In MVC, the final HTML is generated on the server side using data made available on the server side. You create and populate the data in the model on the server, use the MVC to format the data into a structured html code segment, and then the final html is sent back in the response to the client browser.
In AngularJs, an html template is passed back to the client web browser as well as logic for obtaining the data that will be used in partnership with the template. Usually the data is retrieved via AJAX from a web service or api of some sort. Then the JavaScript engine in that browser, using the AngularJs framework, will take that template, retrieve the data and reformat it into a web page on the client end of things.
They literally both provide the same end result. It's generally just a choice between how and where you want the data formatting to occur. With most devs I have talked to who are combining MVC and AngularJs, a list is a good example of something that is usually passed off to AngularJs to handle client-side, reserving MVC only for that functionality that AngularJs isn't as well suited for, like security.
HTML5 allows us to update the current URL without refreshing the browser. I've created a small framework on top of HTML5 which allows me to leverage this transparently, so I can do all requests using AJAX while still having bookmarkable URLs without hashtags. So e.g. my navigation looks like this:
<ul>
<li>Home</li>
<li>News</li>
<li>...</li>
</ul>
When a user clicks on the News link, my framework in fact issues an AJAX GET request (jQuery) for the page and replaces the current content with the retrieved content. After that, the current URL is updated using HTML5's pushState(). However, it is still equally possible to just type http://www.example.com/news in the browser, in which case the content will be provided synchronously of course.
The question now is, will Google crawl the pages for this site? I know that Google provides a guide for crawling Ajax applications, but the article supposes that hashtags are used for bookmarkability, and I don't (want to) use hashtags.
Since you have actual hard links to the pages and they load the same content, Google will crawl your site just fine.
I have a website and users who have registered on my site by using FBConnect to login.
As they're authenticated with my app I have access to their profile from PHP and from JS.
I'm trying to render the multi-friend-invite with FBML and nothing is happening.
I'm trying to build a "refer your friends" page and render a multi-friend-invite widget on our webpage.
Can someone give me some advice? The FBML i'm using is not being modified in the DOM at all.
I've tried a direct FB.XFBML.parse() call on the surrounding <div> and it's still doing nothing.
Help?