mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-09 21:07:49 +00:00
Fix internal links not to be external ones. Added mention of DOM post
This commit is contained in:
@@ -436,8 +436,6 @@ _The browser takes the items that've been defined in HTML and turns them into a
|
||||
|
||||

|
||||
|
||||
|
||||
|
||||
This tree tells the browser where to place items and includes some logic when combined with CSS, even. For example, when the following CSS is applied to the `index.html` file:
|
||||
|
||||
```css
|
||||
@@ -452,6 +450,7 @@ It finds the element with the ID of `b`, then the children of that tag are color
|
||||
|
||||
> The `ul` element is marked as green just to showcase that it is the element being marked by the first part of the selector
|
||||
|
||||
> If you want to have a better grasp on the DOM and how it relates to the content you see on-screen, [check out our article that outlines what the DOM is and how your code interfaces with it through the browser](/posts/understanding-the-dom/).
|
||||
|
||||
## View Hierarchy Tree
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ There are a lot of ways that information can be connected and transferred. We us
|
||||
|
||||
_Computers speak in `1`s and `0`s, known as binary_. These binary values come in incredibly long strings of combinations of one of the two symbols to _construct all of the data used in communication_.
|
||||
|
||||
> [We covered how these two numbers can be combined to turn into other data in another post](https://unicorn-utterances.com/posts/non-decimal-numbers-in-tech/). For a better understanding of how binary represents data, check out that post.
|
||||
> [We covered how these two numbers can be combined to turn into other data in another post](/posts/non-decimal-numbers-in-tech/). For a better understanding of how binary represents data, check out that post.
|
||||
|
||||
This is true regardless of the architecture used to send data - it’s all binary under-the-hood somewhere in the process. The architecture used to send data is simply a way of organizing the ones and zeros effectively to enable the types of communication required for a specific use-case.
|
||||
|
||||
@@ -98,7 +98,7 @@ Let's start from the bottom and make our way up. Remember that each of these lay
|
||||
|
||||
The physical layer is similar to the trucks, roads, and workers that are driving to send the data. Sure, you could send a letter just by handing letters one-by-one from driver to driver, but without some organization that's usually dispatched to higher levels, things can go wrong (as they often do [in a game of telephone](https://en.wikipedia.org/wiki/Chinese_whispers)).
|
||||
|
||||
In the technical world, _this layer refers to the binary bits themselves_ ([which compose to makeup letters and the rest of structure to your data](https://unicorn-utterances.com/posts/non-decimal-numbers-in-tech/)) _and the physical wiring_ constructed to transfer those bits. As it is with the mail world, this layer alone _can_ be used alone, but often needs delegation from higher layers to be more effective.
|
||||
In the technical world, _this layer refers to the binary bits themselves_ ([which compose to makeup letters and the rest of structure to your data](/posts/non-decimal-numbers-in-tech/)) _and the physical wiring_ constructed to transfer those bits. As it is with the mail world, this layer alone _can_ be used alone, but often needs delegation from higher layers to be more effective.
|
||||
|
||||
## Data Link {#osi-layer-2-data-link}
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@ Just like CSS, JavaScript is normally written in a separate file and connected b
|
||||
|
||||
As I said before, JavaScript is a for-real programming language. That means it has arrays, for loops, if-else statements, and lots of other computer science-y things going on. Despite that, the language is actually very beginner-friendly. You don’t have to have a degree in computer science or arcane mathematics to get started with a programming language. And because of the way JavaScript interacts with web browsers, you will be to do some amazing things pretty quickly.
|
||||
|
||||
One thing that makes JavaScript unique is [its ability to manipulate the DOM](https://unicorn-utterances.com/posts/understanding-the-dom/). The Document Object Model (or DOM) is an API (advanced programming interface) that allows JavaScript to manipulate the HTML and CSS of a website as the user navigates around the page and uses its features. Basically, the web browser can read JavaScript and make changes to the look, feel, and even the structure of the page in real-time.
|
||||
One thing that makes JavaScript unique is [its ability to manipulate the DOM](/posts/understanding-the-dom/). The Document Object Model (or DOM) is an API (advanced programming interface) that allows JavaScript to manipulate the HTML and CSS of a website as the user navigates around the page and uses its features. Basically, the web browser can read JavaScript and make changes to the look, feel, and even the structure of the page in real-time.
|
||||
|
||||
To go back to our building construction analogy… well, it starts to break down at this point. Imagine if you could wave a magic wand and turn the wood siding on your building into bricks. Or change the color of the building from gray to bright blue. Remember the steel beams of HTML our building is made of on the inside? By using the DOM, JavaScript can change those too!
|
||||
|
||||
@@ -68,6 +68,6 @@ JavaScript is a powerful tool that can be used to create everything from useful
|
||||
|
||||
Now you should have a better conceptual understanding of the primary web technologies, what they do, and how they work together to create the internet that we see and use every day. Once you learn the basics of HTML, CSS, and JavaScript, you will have a firm foundation to build on to create your own websites and applications.
|
||||
|
||||
You can also read more about how your browser understands and utilizes HTML and CSS in order to display content and handle user interaction under-the-hood on [another post on the site](https://unicorn-utterances.com/posts/understanding-the-dom/).
|
||||
You can also read more about how your browser understands and utilizes HTML and CSS in order to display content and handle user interaction under-the-hood on [another post on the site](/posts/understanding-the-dom/).
|
||||
|
||||
Finally, you're always able to [join our Discord](https://discord.gg/FMcvc6T) if you have any questions or comments while you're learning. All are welcome!
|
||||
|
||||
@@ -214,6 +214,6 @@ Essentially, I just want to make sure to iterate that while there may be tools t
|
||||
|
||||
And with that, we have a better understanding of what TypeScript is! I hope this has been informative and helpful for those that may be new to the language in particular. What'd you learn, let us know!
|
||||
|
||||
Now that you're more familiar with TypeScript, maybe you'd like to play around with one of their more experienced functionality: [Type generics](https://unicorn-utterances.com/posts/typescript-type-generics/)? We have a whole post around that concept as well, [you can find that here](https://unicorn-utterances.com/posts/typescript-type-generics/).
|
||||
Now that you're more familiar with TypeScript, maybe you'd like to play around with one of their more experienced functionality: [Type generics](/posts/typescript-type-generics/)? We have a whole post around that concept as well, [you can find that here](https://unicorn-utterances.com/posts/typescript-type-generics/).
|
||||
|
||||
Thanks for reading! Leave any questions or feedback in the comments below.
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
Any web application relies on some fundamental technologies: HTML, CSS, and JavaScript. Even advanced front-end JavaScript frameworks such as Angular, React, or Vue will utilize some level of HTML to load the JavaScript. That said, how the browser handles HTML and CSS under-the-hood can be quite the mystery. In this article, I'm going to explain what the browser does to understand what it should show to the user.
|
||||
|
||||
> If you're unfamiliar with HTML, CSS, or JavaScript, you may want to take a look at [our post that introduces these three items](https://unicorn-utterances.com/posts/intro-to-html-css-and-javascript). They'll provide a good foundation for this article for newcomers to the programming scene or folks who may not be familiar with what those languages do.
|
||||
> If you're unfamiliar with HTML, CSS, or JavaScript, you may want to take a look at [our post that introduces these three items](/posts/intro-to-html-css-and-javascript). They'll provide a good foundation for this article for newcomers to the programming scene or folks who may not be familiar with what those languages do.
|
||||
|
||||
# The DOM {#the-dom}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user