In my other question What does "pseudo" mean in CSS? I got this answer:
"A pseudo-element is something that acts like an element, but is not an element".
What is it that makes pseudo-element not an element?
A pseudo element is not in the dom. That is what makes it not an element. It is an element created by CSS.
Pseudo elements cannot be seen or manipulated by various technologies. For example, many JavaScript methods don't work for pseudo elements. That is why it is "not an element."
To explain further:
Elements are items in the dom. For example, div, p, and span are all html elements. They apear in the dom, and can be manipulated to behave and look certain ways using CSS and JavaScript.
Pseudo elements are not in the dom. p:before and .header:after are examples of pseudo elements. These are not items that will apear in the dom. Instead, they are elements that are created to add something to the look of a site. for example.
.quote:before, .quote:after {
content: '"';
}
Will add quotation marks at the beginning and at the end of a any element marked with the class of quote. This will make it look like a quote. You can style those quotation marks to make them look more like a block quote or whatever you want to do.
These will not actually create an element in the dom, but they will create something that behaves like an element that you can style.
Here is further reading about pseudo elements:
http://www.w3schools.com/css/css_pseudo_elements.asp
Here is a good list of things you can do with pseudo elements that may help you visualize it better.
https://css-tricks.com/pseudo-element-roundup/
I hope that makes more sense to you.
Related
I noticed that hyperHTML preserves references I make to elements:
let div = document.createElement("div");
div.textContent = "Before Update";
hyperHTML.bind(document.body)`static1 - ${div} - static2`;
div.textContent = "After Update";
Above will produce a page that says:
static1 - After Update - static2
It is my understanding that hyperHTML ultimately clones an HTML <tempate> element to render the final output. However, don't you typical lose references when cloning an HTML template (like the variable "div" in the example above)?
Therefore, on the initial render, does hyperHTML somehow replace cloned elements with their originals after cloning the HTML template?
Here's how I think it works:
Create an HTML Template of the original template literal while
replacing all interpolations with comments.
Clone the html template with comments left in.
Make elements or document fragments out of each interpolation originally recieved
Replace each comment in the clone with its processed interpolation.
Is this correct?
I am not sure what is the question here, but there is a documentation page, and various examples too to understand how to use hyperHTML, which is not exactly in the way you are using it.
In fact, there's no need to have any reference there because hyperHTML is declarative, so you'd rather write:
function update(text) {
var render = hyperHTML.bind(document.body);
render`static1 - <div>${text}</div> - static2`;
}
and call update("any text") any time you need.
Here's how I think it works ... Is this correct?
No, it's not. hyperHTML doesn't clone anything the way you described, it associates once per unique template tag a sanitized version to the output and finds out all interpolated holes in it.
The part of the library that does this is called domtagger, and the mapping per template literal is based on the standard fact that these are unique per scope:
const templates = [];
function addTemplate(template, value) {
templates.push(template);
return template.join(value);
}
function asTemplate(value) {
return addTemplate`number ${value}!`;
}
asTemplate(1);
asTemplate(2);
asTemplate(Math.random());
templates[0] === templates[1]; // true
templates[1] === templates[2]; // true
// it is always the same template object!
After that, any other element using once that very same tag template will have a clone of that fragment with a map to find holes once and some complex logic to avoid replacing anything that's already known, being that text, attributes, events, or any other kind of node.
hyperHTML never removes comments, it uses these as pin and then uses domdiff to eventually update nodes related to these pins whenever there's a need to update anything.
Domdiff is a vDOM-less implementation of the petit-dom algorithm, which in turns is based on E.W Myers' "An O(ND) Difference Algorithm and Its Variations" paper.
Whenever you have DOM nodes in the holes, hyperHTML understand that and fill these holes with those nodes. If you pass repeatedly the same node, hyperHTML won't do anything 'cause it's full of algorithm and smart decisions, all described in the documentation, to obtain best performance out of its abstraction.
All these things, and much more, normalized for any browser out there, makes hyperHTML weight roughly 7K once minified and gzipped, bit it also offers:
Custom Elements like hooks through onconnected/disconnected listeners
lightweight components through hyperHTML.Component
SVG manipulation as content or via wire
easy Custom Elements definition through HyperHTMLElement class
As summary, if you need these simplifications and you don't want to reinvent the wheel, I suggest you give it a better try.
If you instead are just trying to understand how it works, there's no need to assume anything because the project is fully open source.
So far, all I've read from your questions here and there, is that you just believe to understand how it works so I hope in this reply I've put together all the missing pieces you need to fully understand it.
Do you want to write your own lit/hyperHTML library? Go ahead, feel free to use the domtagger or the domdiff library too, few others are already doing the same.
Whenever a part of a language label needs to be somehow highlighted, what is considered as best practice here?
I'm usually trying to avoid html tags in language labels as far as possible by splitting label into a parts and wrapping into corresponding tags in Fluid.
In worst case label is wrapped with CDATA:
<trans-unit id="my.label">
<source><![CDATA[Here comes a <strong>bold text</strong> and then <em>italic</em> and now <span class="fancy">fancy styled</span> stop]]></source>
</trans-unit>
But this mixes content and presentation, which can bring pain afterwards, when CSS is refactored and some classes are renamed.
Another solution, coming into my mind, is to move all the texts, that may contain html tags, out of XLF to either plugin's FlexForm RTE field or some configuration record with RTE fields. But it also looks rather like hack.
How do you solve such an issue usually?
For me there are some possible options, depending on the kind of text.
1.) Avoid HTML as much as possible
2.) If this HTML is wrapped around any arguments, move the HTML out and use it as argument for the <f:translate /> ViewHelper.
3.) Sometimes it is hard to use arguments as the translation is just different and I then use different partials/sections for the different languages and don't use any language file.
4.) I use the CDATA approach.
An addition to Georg Ringer's answer (whose point 1 is definitely the way to go, if at all possible):
5.) Use what XLIFF offers. XLIFF 1.2 has elements to mark tags inside translatable content - to be precise, it has too many such elements. One possible representation of your example would be
<trans-unit id="my.label">
<source>Here comes a <bpt id="1"><strong></bpt>bold text<ept id="1"></strong></ept> and then <bpt id="2"><em></bpt>italic<ept id="2"></em></ept> and now <bpt id="3"><span class="fancy"></bpt>fancy styled<ept id="3"><span></ept> stop</source>
</trans-unit>
This looks messy in code, but it has the advantage that an XLIFF aware translation editor will present this to your translators in a way that is easy for them to work with, like this:
.
The translator will be able to move these tags if the text order needs to be changed in the target language, and they can delete these purple tags in whole if they don't make sense in the target language: for example some complex Chinese characters look awful in bold face. They will not be able to delete parts of tags either.
One possible solution could be the use of parameters in the translation strings. Those parameters could be filled with translated strings which are wrapped in tags (by TS or fluid). This might result in a very complex translation handling as the strings are broken down to multiple strings (which might partially loose context).
Another solution could be the use of markers (like ###B### for <b>and ###_B### for </b>) for the tags which are replaced at the end (and which could vary for different devices). This also is complex and needs a good configuration and invents something like a further markup.
I've been working with ExtJS for a good few months now, but still don't have a perfectly clear map of what's going on behind the scenes there. I'm just talking about the building blocks of the framework and their most basic functionality.
Ext.Component
Ext.Element
DOM.Element
DOM.Node (?)
CompositeElement (?)
Whatever else (?)
For each of the abovementioned I would like to know:
How to select: by ID, by class, via parent, find (OR children OR query OR select? WTF), siblings, ComponentQuery, DOM-query, CSS-query, etc..
How to manipulate in the tree: create, append, prepend, insert after this sibling, move to that parent, remove, destroy, etc..
How to manipulate on the screen: show, hide, fade, slide, move up, down, change size, etc..
How to identify related to each other: find DOM.Element knowing its Ext.Component, find Ext.Component knowing its DOM.Element, etc..
What is the dependency between them: what happens to the DOM.Element if its Ext.Component is hidden / destroyed / changed / moved, what happens to the Ext.Component if its Ext.Element is hidden / destroyed / changed / moved, etc.
I'm looking for a methodical and logically clear layout of how each is supposed to be used and is expected to behave. I am also hoping that the described functionality can be grouped in corresponding categories, e.g. would be nice to see complement traversing methods .up() and .down() next to each other, rather than alphabetically pages apart. Of course links and examples (which the official documentation lacks so badly) are also welcome!
You can find out a whole lot about the building blocks of ExtJS (known as Ext Core) from the manual for this: http://docs.sencha.com/core/manual/. I will try to add some knowledge and highlight some key points, but you should definitely read through that for a very informative overview.
Ext.Component
The building block for the OOP paradigm within ExtJS. Essentially, this is an Object that contains inherited functionality to serve as the basis for a specialized component that will be transformed by the framework into DOM elements that are shown as HTML.
The Sencha documentation is excellent for this. Here are a couple good places to start:
http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers
http://docs.sencha.com/extjs/4.2.1/#!/guide/components
Ext.Element vs DOM Element
As an JavaScript develop knows, a DOM element is just a JS object that represents a tag in the document's HTML. Essentially, Ext.Element is a wrapper object for a DOM element that allows for ExtJS to manipulate the object. Any DOM element on the page can be wrapped as an Ext.Element to allow for this additional functionality.
For example, take this HTML tag:
<div id="myDiv">My content</div>
You can access this using
var el = document.getElementById('myDiv')
and use the basic, built-in JavaScript DOM functionality on el. You could also access this using
var el = Ext.get('myDiv')
and have a whole additional set of functionality available to apply to that element using the ExtJS library
The Sencha docs are also excellent for this. See all the available functionality for Ext.Element here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element
Misc
You can get an Ext.Element from a component using the getEl() method:
var myComponent = Ext.create('Ext.Component', { html: 'my component' });
var el = myComponent.getEl();
You would rarely need to go the other way, to determine a component from a DOM element. There isn't much of a use case there unless you are really hacking something. A major reason for using a framework like ExtJS is to prevent needing to do something like this; if should develop entirely within the JavaScript, you should be able to avoid having a reference to a DOM element where you need to get its containing ExtJS component.
Niklas answered pretty well about how to select components and elements. The only things I would really add is that you can use up() and down() to select relative to a component. In this way, you should use itemId on components rather than the global identifier id (using id can cause difficult-to-debug errors if you are reusing components with the same ID).
Also, to add to Niklas's answer about showing/hiding components, the framework does indeed add some CSS to the component's element, depending on what the hideMode for the component is. Learn more about that property here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.AbstractComponent-cfg-hideMode
An excellent way to learn more is to look through all of the examples that come packaged with the framework. Open the examples in your browser, then look through the code to find out how things are done. You will find it way easier to learn this way, rather than reading it on paper or a website. Nothing beats experience when it comes to learning something new.
How to select: by ID, by class, via parent, find (OR children OR query OR select? WTF), siblings, ComponentQuery, DOM-query, CSS-query, etc..
Ext.ComponentQuery.query("*") // get all
Ext.ComponentQuery.query("button") // all buttons
Ext.ComponentQuery.query("#myid") // all controls / components myid
Ext.ComponentQuery.query("#myid", rootelement) // all controls / components myid with rootelement
Ext.ComponentQuery.query("#myid,button") // all buttons or controls / components myid
How to manipulate in the tree: create, append, prepend, insert after this sibling, move to that parent, remove, destroy, etc..
Adding button to a View:
Ext.ComponentQuery.query("#viewId")[0].add(new Ext.Button({ text: 'test'}));
There is also insert, remove and so on depending on the control you are querying.
How to manipulate on the screen: show, hide, fade, slide, move up, down, change size, etc..
Ext.ComponentQuery.query("button").forEach(function(button){ button.hide(); }) // hide all buttons
There is also show, disable, enable and so on depending on the control you are querying.
How to identify related to each other: find DOM.Element knowing its Ext.Component, find Ext.Component knowing its DOM.Element, etc..
Finding Ext.Component knowing its Dom.Element is pretty easy, you just take the ID from the DOM element and use Ext.ComponentQuery.query("#id").
There is also Ext.select('#id') for getting the object from an ID.
With the element property you can get the DOM:
var dom = Ext.ComponentQuery.query("button")[0].element.dom // Getting the DOM from the first button
var dom2 = component.element.dom // does also work as long as component is a valid sencha touch component
What is the dependency between them: what happens to the DOM.Element if its Ext.Component is hidden / destroyed / changed / moved, what happens to the Ext.Component if its Ext.Element is hidden / destroyed / changed / moved, etc.
I think, I'm not sure, that if you call .hide for instance there will be some CSS applied to the DOM for example: display: none. Internally they can use some framework like jQuery for that or the old school version document.getElementById('id').css and so one. If you call .show, it may change to display: block or whatever type it was before(this could be saved in the Sencha Touch class).
I don't know what happens if the DOM element gets destroyed. Probably the element too and then the garbage collector has some work to do.
If there are any more questions / something was unclear or not enough, don't hesitate to ask.
An attempt to answer the question myself.
Since there is no TABLE markup support on this website, I put my answer in this shared Spreadsheet. Note the comments on mouse rollover.
It's just a pattern for now. It needs work to get more legible and complete. Feel free to comment, or ask me if you would like to edit it.
here's my problem, I'm using mootools' Drag&Drop functionalities, it works great but i can't find a way to add new droppable element on the fly since the droppable element are defined when the draggables are.
Their is a method makedraggable that you can use to add draggable element but it has no equivalent for the droppables.
With jQuery, you set the draggable elements on one side and the droppable on the other, so you can do pretty much what you want.
Do you know a way to solve my problem?
in theory, you should be able to push elements to the instance.droppables collection.
var foo = new Drag.Move({
droppables: document.getElements('div.dropHere'),
...
});
foo.droppables.push(document.id('newDropHere'));
// or...
foo.droppables.include(element); // etc. all array/Elements methods.
read https://github.com/mootools/mootools-more/blob/master/Source/Drag/Drag.Move.js
if you want actual help, build an example on tinker.io or jsfiddle.net. if memory serves, this has been asked here before and there had to be some extra work around parsing possible droppables in addition to adding to the Collection.
I was wondering, does Lift have an iteration tag (ex: for, foreach)?
When I was working with JSP, i could easily iterate a List, just with JSP, passing the object to the tag. Something like this, or like this.
I know it's not really the best example, but you do understand my intentions.
To sum up, does this exist with Lift, or if not, how would I manage to do such thing?
The last thing i want to do is hardcode html.
In short: No. Lift’s design strictly separates logic from design and as such forbids the use of generalised tags in the template markup.
Have a look at the view first article in order to see how lift can handle iterations.
An example from the article: Your markup:
<table>
<lift:show.users>
<tr>
<td><f:first_name>David</f:first_name></td>
<td><f:last_name>Pollak</f:last_name></td>
</tr>
</lift:show.users>
</table>
Your code:
class Show {
def users(xhtml: NodeSeq): NodeSeq =
Users.findAll.flatMap(user =>
bind("f", xhtml,
"first_name" -> user.firstName,
"last_name" -> user.nameName
)
)
}
Now, what lift does when it sees the tag <lift:show.users> is calling the corresponding method with the tag’s content as the argument. The tag will then be replaced by the return value of the users method.
The users method does the iteration over all Users and for each user, it binds the values of first and second name to the inner xhtml. All those iterations are then concatenated (through flatMap) and returned.
When I started with lift, I’d always found this approach a little too rigid; having a tiny loop here and there, how could that possibly hurt? But now that I know how easy it is to call and create your own snippets from the template code, I cannot imagine using anything like jsp anymore. It is weak in comparison and clutters your markup. And of course, you lose much of Scala’s power of validation.
Notes:
The reason the template tags are filled with content is for designing purposes. In this case the dummy tags and values are going to be replaced during the bind. The template designers can thus fill the tags with more or less meaningful content which allows the coder to better understand the semantics the designer had in mind.