<h1 id="elements">Elements<a aria-hidden="true" class="anchor-heading icon-link" href="#elements"></a></h1>
<h3 id="the-problem-with-building-isolated-components-using-csshtml">The problem with building isolated components using CSS+HTML<a aria-hidden="true" class="anchor-heading icon-link" href="#the-problem-with-building-isolated-components-using-csshtml"></a></h3>
<p>A fundamental problem of building isolated components with HTML+CSS is that the CSS <code>display</code> property sets both an element's inner layout (how it lays out its children) and its outer layout (how it is laid inside it parent).</p>
<ul>
<li>ex. you have to make an element <code>display: inline-flex</code> to make it an inline flexbox. You can't just make it <code>flex</code> and have the parent decide whether it is inline, a block or whatever.</li>
</ul>
<p>The consequence of this is that a parent component cannot properly layout a child component without knowing its internal layout structure. And if it doesn't don't know the child's layout (if it's dynamically supplied for example) then it can't safely do anything with it. So long as this limitation exists, there will never be true layout encapsulation on the web platform.</p>
<hr>
<h2 id="element-types-the-display-property">Element Types: the <code>display</code> property<a aria-hidden="true" class="anchor-heading icon-link" href="#element-types-the-display-property"></a></h2>
<h3 id="block-level-elements">Block-level elements<a aria-hidden="true" class="anchor-heading icon-link" href="#block-level-elements"></a></h3>
<p>Occupies the entire horizontal space of its parent element, and vertical space equal to the height of its contents, thereby creating a "block".
Browsers display the block-level element with a newline both before and after the element. </p>
<ul>
<li>You can visualize them as a stack of boxes.</li>
</ul>
<p>The block-level element</p>
<h4 id="examples">Examples<a aria-hidden="true" class="anchor-heading icon-link" href="#examples"></a></h4>
<p><code>&#x3C;div></code>, <code>&#x3C;p></code>, <code>&#x3C;h1></code>, <code>&#x3C;ul></code></p>
<h3 id="inline-elements">Inline elements<a aria-hidden="true" class="anchor-heading icon-link" href="#inline-elements"></a></h3>
<p>Only occupy the space bounded by the tags defining the element.
Does not start on a new line, and only takes up the width it needs.
Does not break the flow of the content.
You can't put block elements inside inline elements.
The block-direction margin is ignored entirely
The padding on inline elements doesn’t affect the height of the line of text</p>
<ul>
<li>ex. <code>padding-top</code> on an <code>&#x3C;a></code> tag won't cause the height of the line of text to change</li>
</ul>
<p>All inline elements (not just text) can be laid out by a parent with the <code>text-align</code> property</p>
<ul>
<li>also with <code>vertical-align</code>, which would be the inverse property, manipulating upon the vertical axis.</li>
</ul>
<h4 id="inline-block-elements">Inline-block elements<a aria-hidden="true" class="anchor-heading icon-link" href="#inline-block-elements"></a></h4>
<p>Able to have width/height values set.
While <code>transform</code> property can't be used on inline elements, it can be used on inline-block.</p>
<p>Be careful with inline-block elements. The components you build with them may look fine, but the quirks may cause them not to place nicely with their parents:
<img src="/assets/images/2021-11-02-10-53-16.png"> </p>
<h4 id="inline-flex">Inline-flex<a aria-hidden="true" class="anchor-heading icon-link" href="#inline-flex"></a></h4>
<p>Virtually the same as <code>display: flex</code>, except the flex container itself is inline, instead of block.</p>
<hr>
<strong>Children</strong>
<ol>
<li><a href="/notes/swQXpP9Vf2burB1ja2OkM">Pseudo</a></li>
</ol>

The problem with building isolated components using CSS+HTML

Elements

tech

This Dendron vault of tech knowledge is organized according to domains and their sub-domains, along with specific implementation of those domains.

For instance, Git itself is a domain. Sub-domains of Git would include topics like `commit`,
`tags`, `reflog` etc., while implementations of each of those could be `cli`, `strat`
(strategies), `inner` (inner workings), and so on.

The goal of the wiki is to present data in a manner that is from the perspective
of a querying user. Here, a user is a programmer wanting to get key information
from a specific domain. For instance, if a user wants to use postgres functions
and hasn't done them in a while, they should be able to query
`postgres.functions` to see basic implementations, as well as common patterns
that have been employed in the past.

This wiki has been written with myself in mind. While learning each of these
domains, I have been sensitive to the "aha" moments and have noted down my
insights as they arose. I have refrained from capturing information that I
considered obvious or otherwise non-beneficial to my own understanding.

As a result, I have allowed myself to use potentially arcane concepts to help
explain others. For example, in my note on [[unit testing|testing.method.unit]],
I have made reference to the [[microservices|general.arch.microservice]] note.
The ability to analogize between different concepts captured in different notes
allows an opportunity to build strong generalized understandings. Given that
you'd have to understand microservices to be able to draw that same parallel
that I've already drawn, these links won't work for everyone. Since these notes
are written for myself, I have been fine with taking these liberties and leaning
on them heavily.

What I hope to gain from this wiki is the ability to step away from any
given domain for a long period of time, and be able to be passably useful for
whatever my goals are within a short period of time. Of course this is all
vague sounding, and really depends on the domain along with the ends I am
trying to reach.

To achieve this, the system should be steadfast to:
- be able to put information in relatively easily, without too much thought
	required to its location. While location is important, Dendron makes it easy
	to relocate notes, if it becomes apparent that a different place makes more
	sense.
- be able to extract the information that is needed, meaning there is a
	high-degree in confidence in the location of the information. The idea is
	that information loses a large amount of its value when it is unfindable.
	Therefore, a relatively strict ideology should be used when determining
	where a piece of information belongs.
	- Some concepts might realistically belong to multiple domains. For instance, the concept of *access modifiers* can be found in both `C#` and `Typescript`. Therefore, this note should be abstracted to a common place, such as [[OOP|paradigm.oop]].

This Dendron notebook is the sister vault to the general [Second Brain](https://tech.kyletycholiz.com).

## Tags
Throughout the garden, I have made use of tags, which give semantic meaning to the pieces of information.

- `ex.` - Denotes an *example* of the preceding piece of information
- `spec:` - Specifies that the preceding information has some degree of *speculation* to it, and may not be 100% factual. Ideally this gets clarified over time as my understanding develops. I try to go back after I have better understood the topic and clear out the notes of `spec:` tags
- `anal:` - Denotes an *analogy* of the preceding information. When I can, I attempt to link concepts to others that I have previously learned.
- `mn:` - Denotes a *mnemonic*
- `expl:` - Denotes an *explanation*

## Resources
### UE (Unexamined) Resources
Often, I come across sources of information that I believe to be high-quality. They may be recommendations or found in some other way. No matter their origin, I may be in a position where I don't have the time to fully examine them (and properly extract notes), or I may not require the information at that moment in time. In cases like these, I will add reference to a section of the note called **UE Resources**. The idea is that in the future when I am ready to examine them, I have a list of resources that I can start with. This is an alternative strategy to compiling browser bookmarks, which I've found can quickly become untenable.

### E (Examined) Resources
Once a resource has been thoroughly examined and has been mined for notes, it will be moved from *UE Resources* to *E Resources*. This is to indicate that (in my own estimation), there is nothing more to be gained from the resource that is not already in the note.

### Resources
This heading is for inexhaustible resources. 
- A prime example would be a quality website that continually posts articles.  - Another example would be a tool, such as software that measures frequencies in a room to help acoustically treat it.


Elements

The problem with building isolated components using CSS+HTML

Element Types: the display property

Block-level elements

Examples

Inline elements

Inline-block elements

Inline-flex

Element Types: the `display` property