Scrape CSS to bulk-check responsiveness - html

I have a list of web domains and would like to check if they are built to be mobile-responsive. A fairly sure way to check this manually is to see if there are "#media" queries in the style.css.
I've used XPATH (IMPORTXML) previously to bulk-check for strings on webpages, but I don't see an obvious way of importing the css files in bulk and search for a string within them. Is there a way to do this? Ideally, I'd like to accomplish it in Google Sheets or with Google Apps Script.
Thank you!

You can use Google's Mobile-Friendly Test if you want to use a GUI.
If you want to use a REST API, try this (replace url parameter for what you want to test):
https://www.googleapis.com/pagespeedonline/v3beta1/mobileReady?url=http://facebook.com
This will return a JSON object. It will return lots of useful info, but if you are just looking for mobile friendliness, look for the true or false result here:
"ruleGroups": {
"USABILITY": {
"pass": true
}
Hope that helps!

Related

IMPORTHTML() doesn't work in this webpage

I want to import data from a table from the following page:
https://basketballmonster.com/playerrankings.aspx
When I do so, with all players filter selected, only the top players are imported to my googlesheet. Can someone help me achieve this? Appreciation in advance.
I attached the googlesheet below for your review:
https://docs.google.com/spreadsheets/d/1uvhNp6gBnnEvs8CBb4K7onccew_doFp96wmFEsYyLBk/edit?usp=sharing
Google Sheets can't know what your browser has, so it doesn't know whether you selected which filter. You have to get the same html for Sheets that you have displayed in your browser, which means adding the filter in your query.
Since it looks like the controls aren't passed as parameters in a GET request, sadly it's not as simple as appending
?PlayerFilterControl=TopPlayers to the url.
You have to POST it as a payload with a post request like
{ 'PlayerFilterControl': 'AllPlayers'}.
Sadly Google Sheets IMPORTHTML() doesn't support post request yet, so you'll have to get into apps scripts, request and xml parsing.
I suggest you check out these:
https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app
https://developers.google.com/apps-script/reference/xml-service

how to interact with HTML forms in delphi using TChromium

i need to update the design of a browser in delphi7 I was using the twebbrowser but he had many problems with javascript and navigation.. so i decide to migrate to Chromium. the problem is that I cannot find code on these components. does anyone know which command would be equivalent to this one in tchromium:
OleObject.Document.all.Item ('ElementbyId', 0) .value: = 'edit1.text';
i need to transfer a text from memo to textarea in html form and at the end send a click on the button on the html form. if anyone knows the commands and can share I appreciate it.
A more flexible alternative than DOM access could be to perform this in Javascript, with the ExecuteJavaScript method of TChromium.
From your summary description, the JS could be something like
document.getElementById('yourtextarea').value = <JSON stringified content of your memo>;
document.getElementById('yourform').submit();
Alternatively, you could implement a JS function in your HTML, and call it with ExecuteJavascript, this way there would not be anything specific (besides the function name) on the Delphi side, and the HTML would be free to evolve.
function setTextAreaAndSubmit(value) {
document.getElementById('yourtextarea').value = value;
document.getElementById('yourform').submit();
}

Referencing images stored in object storage containers (Wirecloud) from img tag

We want to develop a widget to upload images to containers. This is a very well documented task:
1.- Object Storage Tutorial
2.- Fireware-Wiki
3.- OpenStack Object Storage Docs (Swift)
With all this you can manage to get (download), upload, delete files in a container. This is relatively clear.
On the other hand, we want to develop another widget to display images stored in a container. I think in something like this to show them:
<img src="public_object_url"/>
But I do not know how to do that. Where I get this public URL? Is there a public URL? Is it get in some step during the uploading process?
I am a bit lost how to do that. Any help would be highly appreciated.
Thanks in advance.
EDIT 1
We get blocked displaying images once they are downloaded.
A look inside "img" tags shows this:
what is the string returned by URL.createObjectURL(). If we look inside this link, the browser displays this:
We have decoded the string coming in the property "value" and the image is there!
To get the image from the object storage server we used a very similar code that the one used in the operator Álvaro recommended.
objectstorage.getFile( containerName,
reports[i].urlImagen,{
token: token,
onSuccess: onGetFileSuccess.bind(null, i),
onFailure: onGetFileFailure
});
function onGetFileSuccess(index, picture){
downloadedPicsCont--;
reports[index].urlImagen = URL.createObjectURL(picture);
if(!(downloadedPicsCont > 0)){
MashupPlatform.wiring.pushEvent('reports_output', JSON.stringify(reports));
}
}
The picture variable has the following structure, which seems to be ok too.
What is it happening?
EDIT 2
Finally, we found the reason. We were downloading images that were created directly from the cloud and not with objectStorageAPI. In you upload images from the cloud, when you download them you get them inside cdmi objects so the URL.createObjectURL doesn't not work as expected. In the other hand, if you upload them using objectStorageAPI, when downloading them, they come in raw format, so the method works correctly.
As far as I know, FIWARE Object Storage needs authentication, so there are no such public URL. But... you can download the image using your credentials and then use the URL.createObjectURL method for getting an URL usable in the src attribute of the img element.
It's a bit old, but you can use this operator as reference.

Google's autocomplete in my form

I have a form on my website which forwards the textbox input to www.google.com/search?q=.... Is there any possibility to get this autocomplete / autofill features google provides when searching over google.com. Firefox uses google's autocomplete function in the search bar next to the url bar, but how can I get this kind of information for my web form?
There was the Google Suggest API that allowed to use autocomplete on custom keywords. But it seems google has removed it. But I found out that you can still access the API. There are URLs for JSON and XML.
JSON
http://clients1.google.com/complete/search?hl=en&q=<your query here>&client=hp
XML
http://clients1.google.com/complete/search?hl=en&q=<your query here>&output=toolbar
Without any warranty.
If you want to get autocomplete on a text box. You can combine that with jQuery UI Autocomplete
Here an complete example with google auto suggest
http://googlesuggest-jquery.googlecode.com/svn/trunk/
The new url is:
http://suggestqueries.google.com/complete/search?client=firefox&q=YOURQUERY
the client part is required; I did't test other clients.
In addition to RickyA´s answer you can filter the suggestion by media using bs parameter:
http://clients1.google.com/complete/search?hl=en&q=stackoverflow&output=toolbar&ds=
youtube: ds=yt
books: ds=bo
products: ds=sh
news: ds=n
images: ds=i
web: ds=
recipes: ds=r

Filter out #replies in a Twitter feed?

I have a feed from my Twitter profile on the top of my site but I wondered if there is a way to filter out my #replies and only show my status updates?
Thanks
Maybe with Yahoo Pipes.
Tomalak has made a quick example for you.
If you're using the standard Twitter feed web code for Blogger and similar sites, this bit of Javascript does the trick. It sits between the Twitter feed and the callback and strips replies out of the server response.
For a blog badge, the standard Twitter web code ends with two <script> tags. The first provides the function that displays your tweets. The second queries twitter for the tweets to display.
Add this script to your badge code before the twitter query. It provides a new function called filterCallback which strips #replies from the Twitter response.
<script type="text/javascript">
function filterCallback( twitter_json ) {
var result = [];
for(var index in twitter_json) {
if(twitter_json[index].in_reply_to_user_id == null) {
result[result.length] = twitter_json[index];
}
if( result.length==5 ) break; // Edit this to change the maximum tweets shown
}
twitterCallback2(result); // Pass tweets onto the original callback. Don't change it!
}
</script>
The twitter query itself has a parameter which specifies what function to call when the response comes back. In blogger's case, that function is called 'twitterCallback2' - you can search for it in the web code (look for callback=twitterCallback2). To use the new filter you need to replace the text twittercallback2 with filterCallback. The filter is hard coded to then call twitterCallback2 when it's done.
Note that as this will reduce the number of displayed tweets if some of the repsonses from Twitter are replies, so you have to increase the count parameter in the call to allow for that. The new function then limits the number of displayed replies to five - edit the code to change that.
Here's my blog post about it: Filter Replies out of Twitter Feed
If you want to use the new Twitter widgets, just add this piece of code within the features: setting of the widget's source code:
filters: {
negatives: /\B#\w{1,20}(\s+|$)/
},
I took this one from Dustin Diaz's website at http://www.dustindiaz.com. Dustin Diaz is the creator of the Twitter widget.
Change the setUser call to
setUser('name&exclude_replies=true');
This is kind of a hack but it does the trick
Depends on what you're using to display the entries. If you're using Twitter's widget, then probably not. If you're using some other programmatic way of displaying the items, you'd need to provide more details about what you're doing (language, sample code, etc) and we can probably help with filtering.
You'll probably want to use a regular expression. Something along the lines of:
[a-zA-Z0-9][a-zA-Z0-9]*: #[a-zA-Z0-9][a-zA-Z0-9]*.*
Depending on how you are formatting your twitter feed on your page. This regex assumes that you're formatted something like:
username: #username msg txt
If it matches, don't display it. If it doesn't match, then display it. :) If you've got tags in there along with the text, adjust the regex appropriately.