Use of link rel="preload" for Google Translate - html

I started using Google Translate for my shopify website im-diamond.com by placing the snippet in the header. Now when I check Chrome Lighthouse report it says it is slowing the site and suggests the use of link rel='preload' . How can I use that to implement the Google Translate's snippet?
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'tr', includedLanguages: 'ar,de,en,ru', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-111111-1'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

The rel=”preload” allows you to prioritize resources that will be needed soon after the page is loaded. As the name describes, the resources will be preloaded and ready to use once they are called. You can find more information about rel=”preload” on this documentation page.
To use it, place the following line in your HTML header:
<link rel="preload" href="scriptName.js" as="script">
Where “scriptName.js” is the name of the file containing the Google Translate script you are using. Further in your HTML code where you need to use the preloaded script, use the following line:
<script src="scriptName.js"></script>

Related

Use Nivo graph lib in a single HTML page (React)

I have a single HTML page with React (build manually without ANY tools, just a text editor).
This page is working correctly. Now, I would like to add a PIE Chart with NIVO lib.
When I add the script (CDN) I got the following error in console:
exports is not defined
I can solve this by creating a fake exports var = {} (is that a good solution ?)
But then I have a new error:
require is not defined
Do that means the CDN link from NIVO is incorrect ? How to solve this ?
Alternative: I am open to use another lib working with React. But I want to only use CDN links and a text editor to achieve that.
Full HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#nivo/pie#0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
Thanks
Nivo do not support it.
you should use the UMD build, however, you'll need a bunch of extra
dependencies, including D3 packages which are using modern JS
features.
https://github.com/plouc/nivo/issues/959

How to load external JS libraries for the whole project

How do you load an external library so that it is available all over the project?Say for example I have the below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../public/css/bootstrap.css" rel="stylesheet">
<!-- Font Awesome core CSS -->
<link href="../public/css/font-awesome.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../public/css/style.css" rel="stylesheet">
</head>
<body>
<p>This is a test</p>
<!-- Bootstrap core JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../jsLib/bootstrap.js"></script>
</body>
</html>
So this includes the jQuery, Bootstrap, font-awesome and my personal stylesheet as you can see.
Question: What if someone goes to another page in my site for instance: /profileSettings.html
Will I have to load all the libraries again?
Sorry if this is a simple question but I am completely new to front-end development.
Thanks in advance
As your code grows in size, you'll start using more sophisticated frameworks that may use something along the line of an MVC setup. Some of these frameworks allow you to define multiple "views"(think of them as HTML files for now) that are called from a single HTML file(say the index file).
For those aware of AngularJS, i'm referring to writing Angular UI views and the <ui-view> tag.
This will allow you to have your dependencies in a single file, and the other pages just load from this page.
More importantly.
I'm surprised noone has mentioned the use of require-js or other loaders.
It's particularly useful in cases where you have multiple JS dependencies, and multiple controllers in javascript.
Definitely check out loaders such as require-js
Each page is completely independant of every other page.
If you want a script to run on any given page, it has to be explicitly loaded into that page.
Yes. U have to include the required lib in each file if it is normal file without any framework.
You have to include the scriipt in every page because even thought it is a website, every page works seperately from another. All you need is a <script></script> tag.
Yes, if you look each page as separate page. You need to include it in every page.
But if you have a master page, then we can inherit the same from master page so, no need to add the Codes/Script again.
A cool option.
Load one JavaScript file (JS File) for every page. Then load all the JS File using that JS File as you like.
Example
var Device = {
Device_Type: 'Desktop',
//Scripts to be loaded in master page
Common_Scripts: [
'/SiteAssets/Bar.js',
],
//CSS to be loaded in master page
Common_CSS: [
'/SiteAssets/nav.css',
],
//to get device type
Get_Device_Type: function () {
var Getdevice = detect.parse(navigator.userAgent);
if (Getdevice.device.type != null) {
Device.Device_Type = Getdevice.device.type;
Device.Process_Device_Files(Device.Device_Type);
Device.Process_Common_Files();
Device.Process_Common_Scripts();
} else {
console.log("Detected Device type :" + Device.Device_Type)
}
},
//to load device based css files
Process_Device_Files: function (File_Type) {
File_Type = File_Type.toLowerCase();
$('head').append(
'<link rel="stylesheet" title="' + File_Type + '" href="announcement.css">'
);
},
//To load css files to be loaded in master page
Process_Common_Files: function () {
_.each(Device.Common_CSS, function (eachfile) {
Common.appendfile("css", eachfile);
});
},
//To remove previously loaded device files
Remove_Device_Files: function () {
$('link[title="tab"]').remove();
$('link[title="Mobile"]').remove();
$('link[title="desktop"]').remove();
},
//To load scripts to be loaded in master page
Process_Common_Scripts: function () {
_.each(Device.Common_Scripts, function (eachfile) {
Common.appendfile("script", eachfile);
});
},
}
$(document).ready(function () {
console.log('Render device based files')
Device.Remove_Device_Files();
Device.Get_Device_Type();
});
Usage
(Copy the Above code after Example until usage and paste it into a notepad and save it as device.js. Then include to the page. Then add the necessary JS to this codes. Sample files are already in the codes)
// Dependencies
https://github.com/darcyclarke/Detect.js?files=1

External scripts with Polymer custom element

I'm creating a custom element with Polymer to embed a Medium profile card. The embed code provided by Medium is,
<script async src="https://static.medium.com/embed.js"></script>
<a class="m-profile" href="https://medium.com/#pankajparashar">Pankaj Parashar</a>
The code for my custom element looks like this,
<link rel="import" href="bower_components/polymer/polymer.html">
<script async src="https://static.medium.com/embed.js"></script>
<polymer-element name="medium-card">
<template>
<a class="m-profile" href="https://medium.com/#pankajparashar">Pankaj Parashar</a>
</template>
<script>
Polymer('medium-card', {});
</script>
</polymer-element>
I've noticed that the script doesn't load when it is included inside the custom element. Hence, I've added the external script embed.js outside the polymer-element tag. Although, the external script now loads, it doesn't embed the profile card at all.
Is something wrong the way the external script is used? I do not really want to use the iframe technique either.

Skype button is not visible

I would like to add the Skype button (https://dev.skype.com/skype-uri/generator) to my Google site.
The code pasted in the Google Site HTML box does not work (not so much javascript works correctly in this gadget), so I have tried with a custom Google Apps Script. I have made a very basic one, but the Skype button is not displayed (only the 'blabla').
<html>
<head>
<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js></script>
</head>
<body>
<div id="SkypeButton_Dropdown_clandriot_1">
<script type="text/javascript"> Skype.ui({ "name": "dropdown", "element": "SkypeButton_Dropdown_clandriot_1", "participants": ["clandriot"], "imageSize": 24 }); </script>
</div>
blabla
</body>
</html>
(I have obviously added the doget())
Any idea why it does not work?
Thank you for your help
What have you added in the doGet() is more important. Can you please post that. You should be doing something like
function doGet(){
var string = 'your html code';
return HtmlService.createHtmlOutput(string);
}
Remember that despite doing the above, all of your code may not work since HTML code is sanitized by Caja so you should test your code in the Caja playground before deploying it.

displaying <div> in transparent popUp

i need to display the section as PopUp while onload(). but i don't know how to call this javascript function(function($)). name has confused me. also if any other way to call this div section as popup .please sugesst. Thanks
<html>
<head>
<script>
// function name is function($)
function($){
}
</script>
</head>
<body>
<div>
<!-- body of the popUp -->
</div>
</body>
</html>
The $ function is probably the one defined in jQuery, so you will need to include the jQuery JavaScript library if you want to use it for showing a pop up.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Including just this library will define the $ function and you can then use jQuery functions in your JavaScript code. However this will not create a pop-up. There are many jQuery plugins that can be used to create a pop-up.
jQuery dialog?
http://jqueryui.com/demos/dialog/
Loads of examples on there