Elm does not appear to support HTML document's head node, <head>..</head>.
The question is why not support the complete HTML document with suitable functions. It would seem such an inclusion would allow expedient use of external resources such as style sheets.
Apart from DOCTYPE, HTML tags are uniformly, tagName attrList elmList. Perhaps a set of appendAttr and appendElm functions could be concocted to allow flexibility for specifying a more comprehensive VirtualDom.
Am I missing something?
By the time that your Elm code has loaded and starts running, the browser has already read in the <head> of the HTML page that contains the Elm code, so it's too late to influence the contents of the <head>.
Elm can be embedded into an element in the page, or run full-screen (which appears to add a child to the <body>). Elm can only manipulate content within its container, not outside of it. In particular, all elements that Elm generates will be contained within the <body> of the document, whereas <head> is a sibling of <body>.
It's possible to generate HTML elements with any name you like, using Html.node "elementName". So it's possible to create a <head> element in Elm. However, a <head> element created this way would end up inside <body>, and I would expect browsers to ignore it.
Luke's answer is of course perfectly correct, but nothing prevents you updating the head of a document using javascript via a port. Here is an example to update the title (the tab name).
In Elm
port module Ports exposing (..)
port title : String -> Cmd msg
with this sort of update function
update message model =
case message of
SetTitle name ->
(model, Ports.title name)
In Javascript
var elm = Main.fullscreen();
elm.ports.title.subscribe( title => {
document.title = title;
});
Elm is a (mostly) purely functional language, meaning it attempts to minimize all side effects that could lead to errors. As the elm compiler has no way to know if a CSS file will exist at runtime, it cannot safely say whether or not including a CSS file will result in an error. Therefore, it is not something that will likely be included in the future.
That being said, Rtfeldman of NoRedInk has created the repo https://github.com/rtfeldman/elm-css that allows for elm code to mirror CSS, ensuring safety as it goes.
To make your body have a background color with a certain color, this elm code suffices:
[ body
[ backgroundColor (rgb 200 128 64)
, color (hex "CCFFFF")
]
]
and will compile to a .css file for you.
Related
I would like to know what kind of text belongs to the HTML <code> element and what does not?
For example, I know that this is a good usage of HTML <code> tag:
Use the <code>str()</code> function to convert the object into a string.
But I am not sure if these are good usages of the <code> tag:
1. The list of users can be found at <code>/etc/passwd</code>.
2. We need to wait for <code>200 OK</code> response before the next step.
3. Enter the <code>ls</code> command to obtain a directory listing.
4. Compile the source code in <code>foo.c</code> to <code>foo.o</code>.
Is there a standards-document or a W3C guideline document or a similarly authoritative reference that precisely defines what elements may belong to the HTML <code> element and what may not?
The definition of the code element (from HTML 5.2) is:
The code element represents a fragment of computer code. This could be an XML element name, a file name, a computer program, or any other string that a computer would recognize.
This is what decides whether it’s allowed (i.e., semantic) to use the element or not. But you should also check if there is a more specific element available.
Reviewing your examples
Use the <code>str()</code> function to convert the object into a string.
This is fine.
The list of users can be found at <code>/etc/passwd</code>.
This is fine.
We need to wait for <code>200 OK</code> response before the next step.
You could consider using the samp element instead, which represents "sample or quoted output from another program or computing system".
Enter the <code>ls</code> command to obtain a directory listing.
You could consider using the kbd element instead, which represents "user input (typically keyboard input, […])".
Compile the source code in <code>foo.c</code> to <code>foo.o</code>.
This is fine.
There are no good or bad usages of <code> tag.
To be more precise, HTML spec (and browsers, for that matter) is not opinionated on the syntax of a <code> tag's content. It does not check if it's valid code in any existing programming language.
Any phrasing content is valid from HTML spec's point of view.
Any non-phrasing content is invalid.
The code tag is similar to <pre> tag and allows browsers (through their default stylesheets) and users to style content differently, based on the fact it is a different tag.
Many times, when code snippets, functions or method names (specific to programming) are used in other content, it is important (or at least desired) they are marked (and formatted) differently than normal text.
That is the intended purpose for which <code> tag was added to HTML.
This does not mean there's any mechanism in place stopping you from using it for any other purpose you may see fit, as long as it is fit for that purpose, given its limitation at only containing phrasing content.
I recently tried to work with JSoup to parse HTML documents, I went through the turorial on JSoup and found that the select-Method might be what I am looking for.
What I try to accomplish is to find all elements in a html document which possess a certain class. To test that, I tried this with the amazon web page (idea: find all deals with certain offers).
So I inspected the web page to see which classes and ids are being used and then I tried to integrate this into a small code snippet. In this example I found the follwing element:
<span id="dealTitle" class="a-size-base a-color-link dealTitleTwoLine restVisible singleCellTitle autoHeight">PROCAVE Matratzen-Brücke aus Schaumstoff 25 x 200 cm für ...</span>
This element is embedded in other elements and exists multiple times (for each deal of course). So here is my code to read the deal elements:
Document doc = Jsoup.connect("https://www.amazon.de/gp/angebote/ref=gbph_ftr_s-8_cd61_page_1?gb_f_LD=dealStates:AVAILABLE%252CWAITLIST%252CWAITLISTFULL%252CUPCOMING,dealTypes:LIGHTNING_DEAL,page:1,sortOrder:BY_SCORE,dealsPerPage:8&pf_rd_p=425ddcb8-bed4-4e85-ac0f-c1a79d14cd61&pf_rd_s=slot-8&pf_rd_t=701&pf_rd_i=gb_main&pf_rd_m=A3JWKAKR8XB7XF&pf_rd_r=BTHRY008J9N3N5CCMNEN&gb_f_second=dealStates:AVAILABLE%252CWAITLIST%252CWAITLISTFULL,dealTypes:COUPON_DEAL,page:8,sortOrder:BY_SCORE,dealsPerPage:8").timeout(0).get();
Elements deals = doc.select("span.a-size-base.a-color-link.dealTitleTwoLine.restVisible.singleCellTitle.autoHeight");
for (Element deal : deals) {
if (deal.text().contains("ItemMatch")) {
System.out.println("Found deal: " + deal.text());
}
}
Unfortunately I can't get the element I am looking for. deals has always the size of 0. I tried to modify my select with only part of the classes, I added the id-attribute and so on. Nevertheless, I do not get the elements (in this case these are nested into some others). If I try an element which is above this element in the DOM hierarchy (e.g. the div with class "a-section a-spacing-none slotContainer"), this is found.
Do I actually need to specify the whole DOM hierarchy (by using ">" in my select expressions? I expected to be able to define a selector and JSoup would travers and search the whole DOM-tree.
No, you do not have to specify the full DOM hierarchy. Your test should work, if the elements are really part of the DOM. I suspect that they might not be part of DOM as it is loaded be JSoup. The reason might me, that the inner DOM nodes are filled by JavaScript through AJAX. JSoup does not run JavaScript, so dynamically loaded parts of the DOM are not accessible. To achieve what you want you can either look into the AJAX calls directly and analyze them, or you move on to another solution like selenium webdriver, which runs a real browser including a working JavaScript engine.
In which case DOM, can generate 2 trees?
I had this question on a test and I said this happens when we have 2 htmls in the same Web page.
Is this true?
There are a number of ways to do that, depending on how you define "tree".
You can have an <iframe> in your document, but that tree will have its own window, and will not be directly connected to your original tree.
You can have an <html> element inside your HTML (which is invalid HTML, but will still work), but that will actually be a subtree
You can use DOM APIs to build a detached <html> element
Simply instantiating a separate Document object, e.g. through DOMParser, an XHR with .responseType = "document" or with the DOMImplementation.createDocument factory method would create independent DOM trees.
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.
I always hear people talk about DOM this, manipulate the DOM, change the DOM, traverse the DOM; but what exactly does this mean?
What is the DOM and why would I want to do something with it?
The DOM is basically an API you use to interface the document with, and is available in many languages as a library ( JS is one of those languages ). The browser converts all the HTML in your web page to a tree based on the nesting. Pop open Firebug and look at the HTML structure. That is the tree I'm talking about.
If you want to change any HTML you can interact with the DOM API in order to do so.
<html>
<head><script src="file.js"></script></head>
<body>blah</body>
</html>
In file.js I can reference the body using:
onload = function() {
document.getElementsByTagName('body')[0].style.display='none';
}
The getElementsByTagName is a method of the document object. I am manipulating the body element, which is a DOM element. If I wanted to traverse and find say, a span I can do this:
onload = function() {
var els = document.getElementsByTagName('*');
for ( var i = els.length; i--; ) {
if ( els[i].nodeType == 1 && els[i].nodeName.toLowerCase() == 'span' ) {
alert( els[i] )
}
}
}
I am traversing the nodeList given back by getElementsByTagName in the snippet above, and looking for a span based on the nodeName property.
It means working with the Document Object Model, which is an API to work with XML like documents.
From w3 on the DOM:
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.
One of the functions mostly used in DOM work is:
getElementById
Manipulating/Changing the DOM means using this API to change the document (add elements, remove elements, move elements around etc...).
Traversing the DOM means navigating it - selecting specific elements, iterating over groups of elements etc...
In short:
When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document, that acts as an interface between JavaScript and the document itself and allows the creation of dynamic web pages.
Source: w3schools - HTML DOM
D ocument
O bject
M odel
This is the DOM. Either an XML, or HTML, or similar document. All of those terms mean to parse the document and/or make changes to it (usually by using some available tools like JavaScript or C#).
The best example of a DOM when people use those terms is the HTML document in a browser. You might want to manipulate the DOM in this case to add something to the web page.