Develop Reference

google custom search engine execute does not show the results

learning web application. I had usually been in firmware and desktop application software development. I have done a few web pages before, but not as intensive to say a competent front end. Back end I might have more confidence.
Anyway I followed the basic in the development like include the script:
<script>
(function() {
var cx = 'XXXXXXXXXXXXXXXXX:XXXXXXXXX';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<div class="gcse-searchbox" data-gname="hobbyinfo"></div>
<div class="gcse-searchresults-only" data-gname="hobbyinfo"></div>
then a button which onclick will call a javascript function that will execute a search.
function doSearch() {
google.search.cse.element.getElement('hobbyinfo').execute('archery');
}
When I test the web application and just put archery on the search box and click search there is a search result showing but when I use the doSearch() nothing is showing. I am just learning google cse, facebook api, and mojolicious. But I think I am implementing the onclick correctly since I am using the simple view page where I can see the html text.
I am not sure if its correct to use "google.search.cse.element.getElement('hobbyinfo').execute('archery')" since I use HTML5 "div class="gcse-searchbox" ..." . Like I said I am not really an experienced Front End developer. Is it still correct to use google.search.cse ... if I use the 'div class="gcse-...' to create the searchbox and searchresults?
I am don't think that its because I am still just working on a virtualbox and have no real web hosting area yet, that the results are showing. Can someone tell me if this is the case?
Although when I manually do a search on the searchbox it does show the search result.

Angular Data Binding Inside an Embed.ly Twitter Widget Not Working

Hi I'm trying to build something with angular where you can submit the url of a tweet and it will embed the tweet. I thought I could just stick the handlebars inside of embedly's twitter widget but it doesn't work. It's something maybe about the order in which the events are firing.
This is the code
<section data-ng-controller="ArticlesController">
{{article.title}}<p>
<a class="embedly-card" href="{{article.title}}">hi</a><p>
<a class="embedly-card" href="https://twitter.com/jashkenas/status/563803426107449347">bye</a>
<a class="embedly-card" ng-href="{{article.title}}">why</a>
</section>
And this is the result
As you can see I tried it a few different ways and it works when it just has the url pasted in there but not with the angular data. Although when you click on the hi and why links they do take you to the right place.
This is inspecting the page
The one that worked created this whole iframe but the others are just plain links.
Should also say theres an embedly script which I put in the header
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
Any help is much appreciated. I don't really know angular, I just wanted to play around and learn a bit about it. I guess maybe I am now. Thanks.

The problem you met is that embedly renders the element before Angular renders the DOM element, which means embedly may don't know what the href actually is and it stops rendering and left nothing.
You can refer to these projects 1 2 for how to handle rendering sequence.

so I ended up just delaying the embedly script loading with this js
setTimeout(function() {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);
}, 5000);
i found here https://stackoverflow.com/a/9611751/927591

How do I install underscore.js?

I am trying to install underscore.js so I can use it in my browser, but it seems all installation instructions are meant for servers. How do I use this in my web browser? I know JS has no import or require so I am not sure what to do. Thanks

Open some webpage in Google chrome or Mozilla Firefox. For example, google.com.
And then press F12 key.
Select Console Tab.And the type or Copy-paste the following code:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js';
document.head.appendChild(script);
and press Enter.
Then start typing your underscore js commands on the console.

You don't install a JavaScript library in order to use it - you need to include it. If you have dependencies, then only the order (for example first underscore.js and then your custom library that uses underscore.js) is important.
One possibility would be to use some Content Delivery Network (CDN), so you don't need to download the library locally. Common CDN's are:
Google CDN
Microsoft CDN
cdnjs.com
If you download the library and host it on your server, than just put it in your project directory (or in a directory called scripts).
The code that includes the underscore.js library used from a custom library could look like this:
JS library demo.js
// function using underscore.js
function demo() {
var input = [1, 2, 3];
var output = _.map(input, function(item) {
return item * 2;
});
alert(input + " - " + output);
}
and then in a second file demo.html:
<!DOCTYPE HTML>
<html>
<head>
<!-- first include the underscore.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js" type="text/javascript"></script>
<!-- or if the file is downloaded locally -->
<!-- <script src="scripts/underscore.js" type="text/javascript"></script>-->
<!-- then the custom JS library -->
<script src="demo.js" type="text/javascript"></script>
</head>
<body>
<!-- call the custom library function -->
Start the script using underscore.js
</body>
</html>
The output is as expected:
1,2,3 - 2,4,6

Just paste following code into head section of your .html file.
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3 /underscore-min.js">
</script>

Please include what browser you are using, but few things come to mind:
Head over to JSFiddle or JSBin or other alternatives, include or select the JS framework you want to use and play with it.
Using JS in a browser means nothing. There's got to be some HTML code involved that could use and understand JS code.
Firefox, install addon like Firebug, open a simple page like one of SO or google.com and in the console
var script = document.createElement("script");
script.src = "http://path/to/underscor.js";
document.body.appendChild(script);
Then you could start using functions in your JS file.
Google Chrome, click F-12, go to Sources tab, click on Content Scripts in left panel, right click to add folder containing your JS files. That should work as well. There is also another sub-tab called snippets in left panel, create a new file and just copy paste entire JS file into it. Alternatively, you could follow the same technique for Firefox. Its Developer Panel is much more advanced and sophisticated.
You can try and look at things like Browserify.
The gist is, you need some kind of HTML to invoke and use JS code. IMHO, tools like JSFiddle are much better at using and testing some JS code and involves less hassle. Or just create a simple HTML file on your system, include a script tag and test it.
HTH

You should just be able to load it using a <script> tag. Looking at the code shows it will load itself into the global object (window == this).
var root = this;
...
if (typeof exports !== 'undefined') {
if (typeof module !== 'undefined' && module.exports) {
exports = module.exports = _;
}
exports._ = _;
} else {
root._ = _;
}

Site content shifts vertically on certain pages

I'm in the process of building a new website for my wife's business, using Squarespace. Don't tell her, since it's one of her Christmas presents. :)
However, I'm experiencing a weird issue. About half of the pages on the site include content from a third-party widget called Healcode. Those pages have a strange jerkiness to them on pageload, where the logo and navbar move around -- ultimately winding up in the right spot, but looking bad while doing so. Pages that don't have a third-party widget don't have this jerkiness.
Example of page that jerks: https://coconditioning.squarespace.com/yoga-classes/
Example of page that doesn't jerk: https://coconditioning.squarespace.com/private-coaching/
The Healcode widget is javascript code that looks like this:
<script type="text/javascript">
healcode_widget_id = "ay12237c4nc";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New
</script>
<noscript>Please enable Javascript in order to get HealCode functionality</noscript>
Any help would be MUCH appreciated. Thank you in advance!

You could hide the page until the body loads:
<body style = 'display: none'; />
And in your javascript, adding window.onload():
healcode_widget_id = "ay12237c4nc";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write( unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Conscious Conditioning L.L.C. : Weekly Schedule New
window.onload = function()
{
document.body.style.display = 'block';
};
Also, is document.write() the best solution for you?

Don't try to use document.write if possible as with document.write JS parser doesn't know where to put it. at best, the browser will ignore it. at worst, it could write over the top of your current document. Use appendChild
function loadHealCodeScript () {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://www.healcode.com/javascripts/hc_widget.js'
document.body.appendChild(script);
}
window.onload = loadHealCodeScript; // load healcode after page has been loaded
The jittering effect is happening because the healcode is loading its script before the page has completely loaded. If possible place all you javascripts after the body tag rather than head
As suggested by google also https://developers.google.com/maps/documentation/javascript/tutorial?hl=en#asynch

slow / unresponsive / stuck typekit script

ive installed typekit on my site, the usual two lines of js just after the opening head tag but its extremely slow / unresponsive to load in the fonts, this is completly remedied by refreshing the page, after that the typekit font load in perfectly and really quickly. But from a users point of view they will never know to do that, so they will be served the default fonts.
I have the typekit js as the very first thing under the opening head tag before the metatags and before loading in jquery, jquery-ui and other scripts.
Has any one else had trouble with this ?

what seemed to work for me was to load the script in an asynchronous pattern - as specified on the typekit blog, ive copied it in bellow
Standard asynchronous pattern
This first pattern is the most basic. It’s based on patterns written about by web performance experts like Steve Souders and used in other JavaScript embed codes like Google Analytics.
<script type="text/javascript">
TypekitConfig = {
kitId: 'abc1def'
};
(function() {
var tk = document.createElement('script');
tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
tk.type = 'text/javascript';
tk.async = 'true';
tk.onload = tk.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
try { Typekit.load(TypekitConfig); } catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tk, s);
})();
</script>
This pattern uses a single inline tag to dynamically add a new script element to the page, which loads the kit without blocking further rendering. An event listener is attached that calls Typekit.load() once the script has finished loading.
How to use it:
Place this snippet at the top of the so the download starts as soon as possible.
Edit the highlighted TypekitConfig object and replace the default with your own Kit ID.
You can add JavaScript font event callbacks to the TypekitConfig object.
Advantages:
Loads the kit asynchronously (doesn’t block further page rendering while it loads).
Disadvantages:
Adds more bytes to your html page than the standard Typekit embed code.
Causes an initial FOUT in all browsers that can’t be controlled or hidden with font events.