How to use a basic Google Sheets javascript script in GitHub Pages? - javascript

Trying to implement a piece of code to display data from a Google Spreadsheet in my GitHub Pages page. I found Sheetrock.js and the JS Fiddle worked, but I'm missing how to setup a basic javascript file structure. I know I can name files ___.js and call them from the html file, but the Sheetrock.js info doesn't use this format. I remember trying this a while ago and after hitting the same roadblocks gave up, so I'm posting to hopefully save others, coming from a similar search for using GSheets in a static site through javascript, hours of searching on such a simple problem.

I searched for hours (through Jekyll tutorials and other JS package installations). I know this seems simple now, but there was only one basic javascript setup I finally found that answered it after searching on 'javascript', 'github pages', and even jquery with GH.
So the basic answer seems to be to simply create an index.js file next to index.html, and this is of course where all the generic javascript goes. The tags and external http CDN js file imports go in the HTML file.
You can use other javascript means such as JSON based access to connect to GSheet data, but Sheetrock.js seems to be doing okay.
There are also ways to adjust the iframe to select columns and use the SQL language base using the Google Google Visualization API Query Language described in this page. The SQL type commands carry over to the Sheetrock.js usage.

Related

How to implement fulltext search for offline website

I need a client-side fulltext search for big offline website. The site is opened by browser. I've made a research and found some solutions - fullproof, fuse.js, flexsearch.js, elasticlunr.js. I searched for js libs, because as i inderstand, it's the single solution (please correct me if i'm wrong).
Also i can't clearly understand some moments:
As i know, browsers due to security policy block all scripts' execution from javascripts files. I couldn't run examples from fullproof git because of this problem, but i managed to run flexsearch example, because script execution was included in html code with tag. Can i implement some search system for my local website because i don't use any local server for hosting (like xampp)?
From documentation for different js libs i undestand, that all they use for indexing either variable with list of key words or json file. Maybe i have a luck of information, but how i can use search system to find words/expressions from the whole website (it has a main page and a lot of included pages with information)? Do i have to create some sort of database or some json file?
I'll be very grateful for your answers, explanations, solutions or maybe examples about this problem, thank you!
Try using Tipuesearch, they have a very simple mechanism for implementing offline search in your website...Visit their site, download al lrequired repositories and follow the instructions to add the search functionality to your website...
I have implemented it with success in a sample movie website i was designing and the searches can be modified to come with images...
https://directory.fsf.org/wiki/Tipue-Search
Firts of all, browsers doesn't block js scripts execution. Secondly, i managed to find two ways to solve my problem - keywords search and fulltext search: 1) I created a database with keywords (json file) and used flexsearch library to search in this database. Example of usage u can find on their website, either an example of json file. 2) This time i created a database (json file), in which one recording is a text content of a website. Then again i used flexsearch to find a word in this database. After appropriate site was found, it opened up and the searched word was highlighted (u can find such js libraries in net). All the solutions don't require any internet connection and can be used for offline websites.

Need ScriptReferenceProfiler.dll or alternate

I improving site performance and for that, I try to Bundle or combine ScriptResource.axd and Webresource.axd but before combine to I need to know javascript file reference name which is used by ajax control toolkit in asp.net web form
like this https://lancezhang.wordpress.com/2008/11/15/aspnet-ajax-performance/
I need ScriptReferenceProfiler.DLL to get a reference of the javascript file which is used in ajax toolkit on the web page.
do you have any idea to get this dll file
I go through this tutorial
https://channel9.msdn.com/Blogs/ASP-NET-Site-Videos/using-script-combining-to-improve-ajax-performance
Or if you have any alternate solution please let me know
The file you looking and reference from the link you add was here : http://aspnet.codeplex.com/releases/view/13356
I can not find it now so I uploaded for you here, both source code and binaries.
http://planethost.gr/so/ScriptReferenceProfiler.zip
http://planethost.gr/so/ScriptReferenceProfilerBinaries.zip

Not able to create a chrome extension out of a website I made with Google Apps Script and HTML

Using scripts.google.com, I designed an HTML page wherein user can answer 8 questions and I wrote a piece of code to save that data directly to a Google Sheet.
It's working like a charm and this is the first time I worked on HTML CSS in combination with Google Apps script.
To a step ahead, I tried to create a chrome extension out of it. I honestly know nothing about it. But the fact that my project is running fine, I am not able to understand why I am not able to make a extension out of it.
I read a few articles and did some research. I need help with creating the menifest file as I believe that's one of the reasons why my extension does not work even after loading the html file correctly. Secondly, I noticed that the script which I wrote in Google Apps Script is of .gs file format but all the articles say that it should be a .js file format. If anyone could guide me oon these aspects than I'd be really really happy :)

How to modify bigcommerce frontend with api (add js code in app)

I am writing and app for biggommerce which should a bit of code JS to the header. Does bigcommerce allow to do something like that? (something like ScriptTag in Shopify)
Best Regards
Vahe Abelyan
There is no way to access/edit template files thru the Bigcommerce API. It would just be best to guide the user to pasting the JS into their header (as most apps already do).
Rob is correct, however, depending on how complex you want to get you could technically write an app that would fetch or put a file into the theme's template structure using WebDAV.
Basically
if /template/panels/htmlhead.html exists find it, add your script code before , then post file back to webdav
if /template/panels/htmlhead.html does not exist, allow user to upload the default one from their theme, and then have you app do the same thing.
However I'd recommend sticking with the easy way, just provide instructions for a user to place the code into the file themselves. If you want a great example of this, see YOTPO's installation instructions.

Tool for showing javascript, CSS, HTML dependencies

I am relatively new to JavaScript and trying to find a way to get a good overall understanding of JavaScript projects, frameworks, etc.. For example when I look at a JavaScript based source on Github I would like a one page snapshot of the dependencies between the html, css and the various .js files requiring further js files( modules) , instead of looking at the source code tree and opening up the individual files. What I am looking for is either an object diagramming tool or something like a "file diagram".
Is there a tool out in the wild already doing this? (and ,yes I have already tried Google-ing it)
(I used to use a tool in the Windows world for tracking DLLs which is a similar concept.)
https://github.com/nodejitsu/require-analyzer gets you part of the way there.
One could also implement a file dependency analyzer if you are looking for more comprehensive html/template analysis with these two:
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.readdir
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.watchFile
Using Firebug you can see the files requested by each page, the server response and you can filter them by type. The HTML view lets you see the entire page including related js/css content. I don't think it's exactly what you are looking for, but I find it helpful for this sort of thing.
here are some bookmarklet code that could help (taken from https://www.squarefree.com/bookmarklets/webdevel.html
view style sheet :
javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/set%20base%20href/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20iff(a,b,c){return%20b?a+b+c:'';}function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Style%20sheets%20in%20'%20+%20location.href));%20for(i=0;%20i
view scripts:
javascript:s=document.getElementsByTagName('SCRIPT');%20d=window.open().document;%20/140681/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Scripts%20in%20'%20+%20location.href));%20for(i=0;%20i

Categories

Resources