Implementing Google Translate In A Gulp AngularJS Application - javascript

I'm trying to find some information about how Google Translate works with an AngularJS web application. A little background information:
We're trying to offer a client a viable solution without prototyping something out. (The client may opt not to move forward with the translation functionality)
The translations don't have to be perfect. We're well aware of some of the issues with automated translations and that's perfectly fine for this client's need.
My concern really stems from the following:
An Angular application loads the text via async calls, so the text is rendered after the page loads. Will Google pick that up?
When we navigate to a new page, we're not really loading a new page. Again, will Google's translate widget pick that up?
Much of the content they want translated is user generated, so having translations created for each piece of text is not realistic.
Their current product was never intended for international audiences, so anything beyond Google Translate is going to be a decent sized retrofit.
Thoughts?

If you are using angular, or any other front end framework it would be simpler to use google's translate api directly.
After you fetch the content and before being rendered by the component you would want to async call their api and map the results.
Either that, or you could write a filter in angularjs to do the translating too, but you might end up with some jank as the text would change after render
https://docs.angularjs.org/api/ng/filter/filter
See: https://cloud.google.com/translate/docs/quickstart-client-libraries

Related

Make Mithril application SEO friendly

Me and my friend have created a website which we want to use as en experiment for school purpose.
https://www.daniellindgren.se/
But we are encountering some problem when we want Google bots to crawl the subpages, like CV and contact.
When we use Google webmaster tool to how the indexing from Google goes, it says that they can't crawl anything else then the startpage.
We have built a sitemap and we have also declared that in the robots.txt.
But we read somewhere that Mithril can cause problem for Google bots because their links to subpages starts with an "?".
Is there any workaround for that we can use or what other solution is there? Should we maybe try to re-make it a single-page application instead?
I don't see any "?" in the links on your site, and in general Google should be able to index SPA:s nowadays.
But it's not always working, so an option could be to use Mithril to render the templates server-side as well. Depending on your backend it may take a little bit of work. If you're using Node.js it's easy with mithril-node-render, if not I recommend Haxe and mithril-hx for cross-platform support.
Then you need to change the routing strategy so a request from outside the application hits the server as well. Unless you think about it from the beginning, you probably need to rewrite quite a bit of the backend to make it more isomorphic.
But your site doesn't have much client-side functionality however, so as it is right now, I'd treat the site as a non-SPA, and use Mithril when you want some dynamic, ajax-driven functionality.

Possible Web Framework to Use in Existing Application

I work for a medium sized company that has an application used by a few thousand people and is built primarily with HTML,Javascript, aspx, xml, xsl, and runs on IE 11. This application is proprietary and not designed in house but we have access to the code for possible modifications and its just sitting out there on the server(s). A new project has come down the pipline for an enhancement\adjustment to be made to a particular area of the application and I'm wondering what kind of web framework I could use to do this work. I am really just needing to call an enterprise service and get data back, display it, and that's about it, so its not incredibly hard. I am worried though about how to integrate it with the existing application.
I am not sure how this scenario would go:
User navigates to page A inputs data, I want that data to go to a controller or something I built, fetch info and send it back to page A. I was thinking of using Spring MVC but not sure. Any feed back or suggestions would be greatly appreciated! I know this question doesn't include code, so please don't hate me.
Thank you.
From a very high point of view and with no knowledge about any specific requirement.
If you have already an application developed in ASP.NET, it's better that you continue the development of the new module of the application on the same platform.
If you want to develop a new module (actually a new web app) that looks like the old application but with a totally different platform like Spring MVC (could use any other), you can reuse the existing css styles and databases.
For integration purpose you could modify the original application in the menu(or links) that redirects you to the new module and implement a single sign on server (this will required work on both applications) to made the transitions smoothly between both applications (something like a portal style). Note that they will have a different context application path.

Angular/React - Where do they fit in?

I would like to start looking into Angular or React, but I'm having a hard time at the minute figuring out where they fit in?
I currently build all our sites using PHP based Expression Engine or Craft CMS. Is it possible to use Angular or React with these? Would I be correct in thinking they act as the whole front-end?
So for example, would I use EE/Craft to just create the API's to fetch/post data, and then Angular/React would generate the pages using the data from these calls?
That is exactly what I would do. I am not overly familiar with the CMS frameworks you are using, but do have a good bit of experience with CMS development. Typically I leverage the provided APIs to bring the data to the presentation layer, and then use a JavaScript framework such as Angular to create my UI.
This approach will work great if you can get away with not using any of the CMS server controls, and perform all data operations through API calls.
Using a CMS for your data as an API is fine, but you might be better off with something custom made (like a rails or nodejs project). CMS's are not ideal if you're are building just an API. Typically, you'd built your React/Angular website as a static website that you can deploy to a hosting provider (like S3 or Github Pages), this gives the immediate benefit of improved security, speed and scalability. From your static React or Angular site you then leverage your server-api's to fetch the data.
However, this only fixes the data problem, not the content management problem. Since you have a static site, there is no way for your content editor or marketers to be able to change the content on your website. Everything has to be done in the source code - by a developer. You can fix this by adding a drop-in content management solution like INSTANT on top of your static website. Without any coding, it allows anyone with an account to change content directly on the website.

divs hide and show

I am working on a website for a company (my first, except of my own), and i am a little confused. i know that i knew this before, but i have forgot.
i am going to create many different pages on the site and i guess that it´s not a good idea to create one new file for each page.
and i think the best way is to make one "div" for each page, in the index file, and somehow put all of then behind each other, and show one by one when i click on the right thing in the menu... how do i do this?
can i only use CSS or do i need some Java script, and how do i write the code?
very thankful for quick help! :)
You're talking about making a single HTML page that contains all of the content for a company website. It's a bad idea to build a corporate website this way, for several reasons:
Web browsers expect to navigate through a site that has multiple pages, which is why they have a location bar and forward/back buttons. Your approach breaks both of those.
This single page would be much larger and take longer to load in users' web browsers.
The SEO of the page would be poor, because its content would be hard for Google and other spiders to understand semantically. A large page with so much text would look like keyword stuffing to Google and would be penalized.
It would be difficult to keep such a page organized; making any change to anything would require you to edit a single file, so it would be harder for you to track and/or merge changes to different documents, and much harder for the company to make content changes.
Lastly, the approach is just inappropriate. You are correct that it's not too great to create one static HTML file for every page. But the solution is not to make a single web page; the solution is to use a CMS!
Wordpress is the most popular CMS in the world. It's designed for blogs but can be used for any website.
Drupal is a powerful CMS with lots of features you may not need, but it's more modern than Wordpress and may be more visually flexible.
If you don't want to use a full-fledged CMS and you feel like flexing some programming chops, you could try using an out-of-the-box MVC framework like Rails or Django, but bear in mind that those will require you to learn a little Ruby or Python.
The main thing is that you should be using server-side templates to solve the problem you have, not client-side JavaScript.
(Some very large websites do use a JavaScript-powered approach to page navigation, but these are usually web applications like Twitter. The approach is inappropriate for a corporate web presence.)
You can use Javascript to change the innerHTML of elements.
For example, create a div and give it the ID "myDiv":
<div id="myDiv"></div>
Then, when the user clicks on a button you can change "myDiv"'s innerHTML like this (by calling the function):
function show(){
document.getElementById("myDiv").innerHTML="html code here";
}
I hope I helped :-)

Creating a social site completely with Javascript

I'm working on a social network site. Some suggestions have been made to create the entire site in JavaScript and use JSON to interact with the database. So essentially each call to the server would return some js files that create the page on the client side.
I think a template framework on the server side would be a better idea - something like django.
I'm curious as to what the pros/ cons / roadblocks of a completely javascript solution where everything down to page layout is defined in javascript.
One major con of an all javascript site is how to enable search engines to see the content you want them to see. Since most search engines don't run javascript, they don't see content you fetch and render in javascript. If you don't need SEO, then you can ignore this con.
Another con is that an all javascript site may not be accessible to screen readers and other tools used by visually impaired folks.
It is more common these days to use a combination of web-served pages/content and then use javascript to enhance the experience and implement features and dynamic behaviors in the page.

Categories