I'm looking to build a system that styles the search results from DocumentCloud (and allows me to link to a given document).
I know I can query DocumentCloud and return JSON results using a search string like this:
https://www.documentcloud.org/api/search.json?q=obama
I don't know how to:
Grab the output of the search and put it on my own page
Style the data once I have it on my page
I'd just like to know how to get started with this, I'm experienced with HTML and CSS but I've never worked with JSON before.
There's more info here but I just don't know where to get started: https://www.documentcloud.org/help/api
It sounds like you're not so familiar with JavaScript, correct? JSON stands for JavaScript Ojbect Notation, so to work with it, you'll have to dive in a bit. I strongly recommend looking into using a JavaScript framework/library, namely jQuery to handle the heavy lifting. (There are other worthy libraries, but jQuery is by far the most popular, and is very friendly, using CSS-like selectors to manipulate the document object model).
check this jQuery tutorial: How jQuery Works
Here's a primer on using jQuery's jsonp to fetch remote rsults and using them in a page: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/
You might end up with code in a javascript file, or a script tag (following a link to the jQuery library) that looks like this:
$(document).ready(function () {
$.getJSON('https://www.documentcloud.org/api/search.json?q=obama&callback=?', null, function (results) {
// this would append whatever the json returns for 'total'
// inside an element on your page with an id of 'resultsCount':
$('#restulsCount').append(data.total);
});
});
As a result, extra text & markup can be added to elements you already have on your page in whatever form/position you need it, and regular CSS rules from any style block or CSS file linked on your page will apply to them.
Good luck.
Related
I have no idea about JSON, please don't assume i know everything about java or json or ajax and I have a spreadsheet from Google sheets and I was able to convert the sheet data into a JSON URL (https://script.googleusercontent.com/macros/echo?user_content_key=RFP2beVz0BOAadC8lOHQi_-dajE5DI1oGW6ItREi66KTWjeP4twxaElm3krjtYa3QGuvmf_8gtYA-iMqW17UV8_5kB6YeGDjOJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHa1ZsYSbt7G4nMhEEDL32U4DxjO7V7yvmJPXJTBuCiTGh3rUPjpYM_V0PJJG7TIaKp5Mo6IQPCUHsaGMF-VMB9PySb3cSNzXDiUtZyp4RMiB6CFaNdOtIlSkpnu9Yad3Py8KiW3k6MDkf31SIMZH6H4k&lib=MbpKbbfePtAVndrs259dhPT7ROjQYJ8yx) and this is the result
and I what I need to is to display that data like this:
I know I may have to use some CSS somewhere for some styling, I just need to be told where. The important thing is how to use my JSON data which is NOT stored on my pc and use it as a base for my HTML element.
My plan is to later on integrate my google calendar to my spreadsheet and only use the spreadsheet to change the data on my website without having to log into my web and do things there at all after achieving this.
Your question is quite broad but might only require you to learn a bit of jQuery and JavaScript (for handling JSON). In the interest of time, I can only provide a high level answer for now...
You can create your html file with an ul (unordered list) element to hold your list. In the html file, you can use jQuery to make the GET request to the JSON link you gave. The jQuery function you use to make the request will include a callback that will return a JavaScript object representing your data. For parsing this data into an object in JavaScript, I'd recommend the following link to the jQuery documentation for a JSON request.
Next, you'll want to update your HTML list. I'd recommend reading the following answer for how to push to your list via jQuery. The basic idea is that you give id's to your html elements and then jQuery allows you to modify these html elements from your JavaScript. In your case you can create li (list item) elements and append them to your ul element, accessing this ul element through the id we mentioned earlier.
You can include your CSS for each list item using the HTML link element, ie:
<link rel="stylesheet" href="li-style.css">
Can a website's generated HTML be saved using Canopy? Looking at the documentation under 'Getting Started', I could not find anything related.
You can run arbitrary JavaScript using js, document.documentElement.outerHTML will return the current DOM, so
let html = js "return document.documentElement.outerHTML" |> string
does the trick.
Canopy is a wrapper around Selenium that provides some useful helper functions. But it also provides access to the Selenium IWebElement instances in case you need them, via the element function (halfway down the page; there don't seem to be internal anchors in that page so I couldn't link directly to the function). Then once you have the IWebElement object, your problem becomes similar to this one, where the answer seems to be elem.getAttribute("innerHtml") where elem is the elememt whose content you want (which might even be the html element). Note that the innerHtml attribute is not a standard DOM attribute, so this won't work with all Selenium drivers; it will be dependent on which browser you're running in. But it apparently works on all major Web browsers.
See Get HTML Source of WebElement in Selenium WebDriver using Python for a related question using Python, which has more discussion about whether the innetHtml attribute will work in all browsers. If it doesn't, Canopy also has the js function, which you could leverage to run some Javascript to get the HTML you're looking for -- but if you're having trouble with that, you probably need to ask a Javascript question rather than an F# question.
Update:
Finally, I guess I was asking a stupid question. The jQuery creates DOM elements and it will be requested anyway. So I think it's better to use .html(xxx) to implement the feature rather than using $() to create anything before.
This is quite tricky and I never realize it before. But today I realized it's very important to a web project.
Say I have two images created dynamically:
var $img1 = $('<img>');
$img1.attr('src', 'http://domain.com/1.png');
var $img2 = $('<img>');
$img2.attr('src', 'http://domain.com/2.png');
Right after the browser runs the code above, the two images would be requested. That would be a waste of the client's and the server-side traffic.
Is it possible for me to control when the resource request be sent?
My expectation is NOT to do it by assigning src later because in my case it'd be much more complicated, the HTML code is containing a lot of stuff rather than some img tags. For example, is it possible to tell the browser that "please wait until the img tag is added onto the DOM tree"?
Append the images to DOM after the page load like this:
$(document).ready(function() {
// You could use whatever jQuery selector here you like to
// determine where to append the new elements.
// For this example, I am just appending to end of document.
$(document).append($('<img src="http://domain.com/1.png>');
$(document).append($('<img src="http://domain.com/2.png>');
});
I am building a static blog, which uses Marked to parse markdown. I want to be able to have code blocks with tabs.
I want to parse code that looks like this:
```JavaScript
var geolocation = require("nativescript-geolocation");
```
```TypeScript
import geolocation = require("nativescript-geolocation");
```
To something like this (from the angular2 docs), where the tab names would be JavaScript and TypeScript.
I am programming in JavaScript (nodeJs), so I could manually render this if required? What would a custom implementation of a code block tab look like?
I am not sure if there is a special name for these, as I can't really seem to find any examples or templates.
I think answer is: 'Marked' does not support custom tags. I've spend few hours trying to find some way to extend it and finally switched to showdown.
It appears to be really easy to implement one ( her is expandable section tag example ).
Extension 'showdownjs/prettify-extension' implements code highlighting using Google Prettify.
If I use a data URI to construct a src attribute for an HTML element, can it in turn have another data URI inside it?
I know you can't use data uri's for iframes (I'm actually trying to construct an OSDX document and pass it to the browser with an icon encoded in base64 but that's a really niche use case and this is more of a general question), but assuming you could, my use case would look like:
var iframe = document.createElement('iframe');
var icon = document.createElement('image');
var iSrc = 'data:image/png;base64,/*[REALLY LONG STRING]*/';
iframe.src='data:text/html,<html><body><image src="'+iSrc+'" /></body</html>
document.body.appendChild(iframe);
Basically what I'm after is is there anything in a data uri that would break a parent data uri?
Yes you can. I really thought it was impossible, as did everyone I asked.
Example:
Pasting the following into your browser's URL bar should render a gmail logo in an html page that says hello world.
data:text/html,<html><body><p>hello world</p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAz1BMVEX///+6xs7iTULj5+vW2tzk49TX3+Tq6tz09Orz9/jm7O6wu8aNm6WwMCjfRDnm5ube2Mmos7vt7++jrLP29/eyTk3d4+fj6+foWFLM1t2bNzeZpa2trKPv8/ajo6Xud2f0r6rv7uG3ubvd6eXIysq9s6jeopfSUknx8fHbXGKvTx7Hz9X09PTwhXHw9Pb++/fp7/Xu4d3SZlPSiXjuaFmMkZX39/vZy6/j8+v2+/v76uP7+/v0/Pewl4raMi/f5+7KTjitf4W2rI3/9vDzz8uC91bdAAAAAXRSTlMAQObYZgAAAmBJREFUeF6VldeunDAQQNeF3jvbe729p/f//6aMxzaBKHe5OZiVJY6OBvbBAyTvZaDJSy/xzpJ4pdJzz1tfOme5LD0vly45fETe4/1vUoK26bnPznUPzrPrmSJsgtrPpQnpPCmvp2/gukyE/HX6JtYor9/kpqUcY3ogvUxv5RhlSrbHenFzY/+0cxtYApZlGZod3W9JaqJspuSR1vTqw41U4UZb+S/zMAz35FbJt4QK6sUnW+naxWwoaJXBpBi37bxTjuchyl+0zLGs4npmVK1dHSLBiLhmlg+chLukFiLqV3dQ1i84p1SEv42CgLhYzmR5vqh1XIUXeypGoN+LAMoVz5yBk/EKZfsOQioOsnGFWXr/eXLCMs9EeehK2bab+NKCbQj2/mEymRSjpqzkR5CXOv4AWSqyM3BnRSDKw255CWtBW0BWcILyCmQsMywv5b/xS8WpzGJZzMywPFZjvANTYO10VoNfIxqOW2WlwhU/QnbSMDu1y0yWpSowdiqry6OArEW5ka1GNTaGsWqViwDL4z/lezClu4nBN+K/ypWSIywrNY4NxaqZWZSjThlEkQXLUna8lTZ+unWnDE6T1fbmtZlBxWxbFvHZ5NR8DUeUj5QejQ1mu24cv2C5aJW3R3qv1a4bX8TbIih+wAv6IPvDKCIrAusV8FEpyz5njFUV/ERdWFTBHVWwmGkyKKPcT2kyjvKFy1jPgnJ6IeTMg30vzCUZHBTc52mvzdKhz+GYcJIxTw8ukOKlVmd/SPk4kSdQ4nv8fJh7PriIw7Mn/yxPGW8dm06e269eOTwe/De/AW24fWb7B21TAAAAAElFTkSuQmCC" /></body></html>
or for a shorter example courtesy of Pumbaa80:
data:text/html,<script src="data:text/javascript,alert('hello world')"></script>
MSDN explicitly supports this:
Data URIs can be nested.
An old blog entry talks a little bit more about embedding images within CSS using data: :
Neither dataURI spec nor any other mentions if dataURI’es can not be nested. So here’s the testcase where dataURI’ed CSS has dataURI’ed image embedded. IE8b1, Firefox3 and Safari applied the stylesheet and showed the image, Opera9.50 (build 9613) applies the stylesheet but doesn’t show the embedded image! So it seems that Opera9 doesn’t expect to get anything embedded inside of an already embedded resource! :D
But funny thing, as IE8b1 supports expressions and also supports nested data URI’es, it has the same potential security flaw as Firefox does (as described in the section above). See the testcase — embedded CSS has the following code: body { background: expression(a()); } which calls function a() defined in the javascript of the main page, and this function is called every time the expression is reevaluated. Though IE8b1 has limited expressions support (which is going to be explained in a separate post) you can’t use any code as the expression value, but you can only call already defined functions or use direct string values. So in order to exploit this feature we need to have a ready javascript function already located on the page and then we can just call it from the expression embedded in the stylesheet. That’s not very trivial obviously, but if you have a website that allows people to specify their own stylesheets and you want to be on the safe side, you have to either make sure you don’t have a javascript function that can cause any potential harm or filter expressions from people’s stylesheets.