We Keep Coding

get screenshot from PageSpeed Insights, using javascript

I want to get the screenshots from PageSpeed Insights. Using the API, I used a code that i founded here : https://embed.plnkr.co/plunk/c7fAFx, but doesn't work.
please help me! I am learning to code.

Why doesn't the linked code work?
Well because it is ancient and attempting to use the version 1 Page Speed Insights API.
It is currently on version 5 so that is why it does not work, v1 no longer exists as a public API.
How to recreate the functionality of this App?
As you are learning to code I will lay out the steps for you and then you can research how to do each step and use that to learn.
I will warn you as a beginner there is a lot to learn here. However on the flip side if you manage to work out how to do the below you will have a good first project that has covered multiple areas of JS development.
As you have marked this "JavaScript" I have assumed you want to do this in the browser.
This is fine up until the point where you want to save the images as you will have to work out how to ZIP them which is probably the most difficult part.
I have highlighted the steps you need to learn / implement in bold
1. First call the API:
The current URL for Page Speed Insights API is:
https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://yoursite.com
Just change url=https://yoursite.com to any site you want to gather the images from.
For a small amount of requests a day you do not need to worry about an API key.
However if you do already have an API key just add &key=yourAPIKey to the end of the URL (replacing the yourAPIKey part obviously :-P).
You want to make an AJAX call to the API URL first.
2. Parse the response
Then when you get a response you are going to get a large JSON response.
You need to parse the JSON response and turn it into a JavaScript Object or Array you can work with.
3. Find the relevant parts
So once you have a JavaScript Object you can work with you are looking for "final-screenshot" and "screenshot-thumbnails".
These are located under "audits".
So for example if you parsed to an array called lighthouseResults you would be looking for lighthouseResults['audits']['final-screenshot'] or lighthouseResults['audits']['screenshot-thumbnails']
"final-screenshot" contains how the site looked after it was loaded, so if you just want that you want this element.
This contains an image that is base64 encoded (lighthouseResults['audits']['final-screenshot']['details']['data']).
"screenshot-thumbnails" is the part you want if you want the "filmstrip" of how the site loads over time. This contains a list of the thumbnails base64 encoded.
To access each of these you need to loop over each of the items located at lighthouseResults['audits']['screenshot-thumbnails']['details']['items'] and return the ['data'] part for each ['item']
Find the parts that you want and store them to a variable
4a. Decode the image(s)
Once you have the image(s) in a variable, you will have them as a base64 encoded string at the moment. You need to convert these into usable jpg images.
To do this you need to base64 decode each image.
For now I would just display them in the browser once they are decoded.
learn how to decode a base64 encoded image
4b. Alternative to decoding the image
As the images are base64 encoded they can be displayed directly in a browser without decoding first.
You can just add an image where the src your base64 image string you gathered in step 3.
If you just want to display the images this is much easier.
Add images to the screen and set the src to the base64 image string you have from step 3
Saving the images
Now you said in a comment you want to save the images. Although this can be done via JavaScript it is probably a little advanced for starting out.
If you want to save the images you really want to be doing that server side.
However if you do want to download the images (filmstrip) in the browser then you want to look into a zip utility such as jszip.js.
The beauty of this is they normally want you to convert the images to base64 first before zipping them, so it may not actually be that difficult!

Windows UWP apps via Cordova: convert canvas into stream for InkRecognizer in Javascript

I'm developing an application in Cordova for Android and Windows and struggle with the recogniztion of the text and numbers in canvas element on Windows platform (W10)
So last couple of days I've wasted my time trying to use the Windows.Media.OCR namespace for the recognition of the handwritten numbers on my HTML5 canvas scribble pad as you can see here on another SO question
I've then found the Windows.UI.Input.Inking namespace and there are few classes available for the Javascript solutions. I've found there is an InkManager that can recognize InkStrokes either in its own collection or strokes in InkRecognizerContainer.
InkRecognizerContainer has the "loadAsync()" method that accepts the input stream. So I've thought I'd just load the canvas converted to stream, and use the InkManager to recognize this container.
Unfortunately, if I try to use the HTML5 canvas converted to stream it throws me "WIN RT: Unsepcified Error" but not in the callbacks, it just crashes the app.
var blob = canvas.msToBlob();
var randomAccessStream = blob.msDetachStream();
var inkStrokeContainer = new Windows.UI.Input.Inking.InkStrokeContainer();
inkStrokeContainer.loadAsync(randomAccessStream).done(function () {
debugger
}, function (error) {
console.log(error);
});
Any help would be greatly appreciated as I'm spending way too much time on this.

InkStrokeContainer.LoadAsync requires a file with ink stroke information, not an arbitrary bitmap. Generally this will be an ISF (Ink Serialized Format) file saved out from a previous InkStrokeContainer. ISF files include stroke information as metadata in a gif file, so they can be displayed by normal gif viewers, but typical gif files do not include ISF data and cannot load into InkStrokeContainers.
InkManager does handwriting recognition not OCR. It requires individual stroke information and takes into account properties such as stroke order and direction. To use it you'll need to pass pointer information to the InkManager, typically as the input occurs, so the InkManager can build the strokes to recognize.
Take a look at the Simplified Ink Sample for an example. The JavaScript version uses WinJS rather than Cordova, but it shouldn't be too hard to convert. The inking is Windows specific, so you'll need to put this in a platform specific part of your app.

Read and Write DOCX file

I have 2 docx files that I am working with. One docx file contains text information of a product (start serial number, length, width, and height). The other docx file contains a sticker label with an image and all of the text information from the first file.
This is what I do currently:
I open the first docx file and copy all of the text information (serial, length, width, and height)
Then I paste each info into the second docx file that contains the formatted label.
If I need to make more than one label, I copy the label and increment the serial number by 1.
This takes a lot of time to make several labels for different products. My goal is to come up with an easier way to take data from one docx and inject it into the other. Also, generating more labels when needed.
My first thought was to extract the docx file to get it's xml contents. Then read the data using javascript, c++, or any other language. Then Ask user to input number of labels to generate, manipulate the xml, and repack it as a docx file.
Then I thought about trying to use the windows office "mail merge" feature, but I have never done this before.
I would like to know if anyone has any suggestions for an easy solution to import data from one docx file and generating labels into another.
I am open for any suggestion.
Also, I am not a professional programmer. I am an undergraduate computer engineering student with some experience in c, c++, java, javascript, python, MIPS assembly, and php.

The only open-source (and probably easier to come by) solution I know know is:
http://poi.apache.org/
http://poi.apache.org/document/quick-guide-xwpf.html
This is a good bet when it comes to speed and it is free software.
But if you open a file, alter it and save it again - the result can be flaky: The formatting can be slightly off. At least in my tests with the pptx counterpart.
I reckon when you have user interaction (web page?) in order to create the document, you can build a small HTTP Api around the library.
There is also: http://www.docx4java.org/trac/docx4j - which I have not tested yet.
You can also go the C#/Redmond way: How do I create the .docx document with Microsoft.Office.Interop.Word?
The Interop (2nd Example in the first answer of the question above) way gives the best result when it comes to the accuracy of the formatting. Basically when you open a file with Interop - it will look the same when you alter and save it. But you cannot use this when interacting with a user - because it starts a separate MS Office process - and I would not count on this from my own user experience. But if you want to generate these files as a batch in a single user session - it will deliver a good result.
I cannot comment on the "OpenXML SDK" library described in the above SO question.

Wath about the Open XML https://www.youtube.com/watch?v=rMnEl6JZ7I8 and website developer http://openxmldeveloper.org/ .
On the site you found sdk for:
Open XML SDK for JavaScript: http://openxmldeveloper.org/wiki/w/wiki/open-xml-sdk-for-javascript.aspx. Demo: http://openxmldeveloper.org/blog/b/openxmldeveloper/p/openxmlsdkjs_demo.aspx
Open XML and Java http://openxmldeveloper.org/blog/b/openxmldeveloper/archive/2006/11/21/openxmlandjava.aspx
.Net Resources http://openxmldeveloper.org/resources/dotnet/m/cc/default.aspx

Merging PDF with Data batch

I'm a new french stackoverflow user, so sorry for my misspelling.
I would like to know how to automatically merge writable/alterable PDF with data file(XML, TXT or FDF).
I have seen that Adobe Acrobat Pro could import Data, but in the wizard action, I've not found "import" choice to make it automatic. The wizard offers JavaScript add but i don't find any PDF manipulation line code JS.
Does JavaScript is the solution for my issue ?
Or do you have some alternative ?
Thx for reading.

You can use the COM of Acrobat or PDFCreator to do it. There is a lot of example here (And in French):
http://www.developpez.net/forums/d431662/logiciels/microsoft-office/excel/contribuez/excel-word-pdf-adobe-acrobat-pro-pdfcreator/

With "Wizard", you are using the Actions Wizard?
If so, this is understandable. However, there is the Acrobat JavaScript function which would import an FDF (or a few other data formats); have a closer look at the importAnFDF() method in the Acrobat JavaScript documentation (which is part of the Acrobat SDK, downloadable from the Adobe website).
There are other approaches, by importing a tab-delimited file as File Attachment (aka Data Object), and then interpret this file to create your data table, and then use Acrobat JavaScript to fill out the form, save or print it, and so on.
A third method would be using Template pages in the PDF, craft your FDF so that it supports Templates, import it into the base document and then wait until it has spawned all the pages. You then have one big document containing all the filled forms.
Finally, if you have a higher volume, you will be better off using a server-side fill-in tool, such as FDFMerge by Appligent.

Obtaining the absolute path of a file selected with a HTML file chooser button using JavaScript

I am developing a small Java application with a web interface using Javafx (with a WebView component).
I am wondering how can I know with JavaScript the absolute path of a file selected with a file chooser in HTML, so I can pass that path to my Java application.
Using JQuery, I tried with this:
var completeFileName = $('#button_id').val();
but this is returning the name of the file only, not its complete path.
If this is not possible I will have to add a Java file chooser in the javafx stage, but it will be a pity since all the interface components of my application are in html and I wanted to keep it like that.

in html 4 its not going to happen, even in HTML 5 i don think you can get anny detailed info about the clients file system.
random google result about this: http://www.html5rocks.com/en/tutorials/file/dndfiles/