Hello everyone
How are you doing? I’m doing great!
(Eeehhh this sounds like an email 😭, but I feel rude not to ask how are you lol)
Anyway, I wanted to share with you what I've learned. I just finished the "UI Hard Parts" course by Will Sentance on Frontend Masters. This course delves into how UI engineering has evolved with code. It really changed the way I think about frontend development.
There's so much to cover that I don't even know where to begin. So, I'll be posting in parts! 😅
PART I:
The primary goals of UI engineering are:
1. Displaying content.
2. Allowing users to interact with content and change it (where most of the problems arise).
The course starts by explaining how HTML works under the hood. When you create an HTML file with elements like <h1>Hello World</h1>, the HTML parser in the browser goes through each line of the HTML document and adds the elements into the Document Object Model (DOM).
But what exactly is the DOM?
The DOM (Document Object Model) in web browsers is typically implemented as a C++ object model. It represents an HTML document as a tree-like structure of objects, where each object corresponds to a different part of the document, such as elements, attributes, and text nodes. Each element in the HTML document is represented as a node in the DOM tree, and these nodes can have child nodes representing nested elements.
For the <h1> tag, we get a node in the DOM like this (for illustrative purposes):
{
* H1 node,
* Div node
}
CSS also has its own DOM, amusingly enough. 😆
The render and layout engine then display what's in the DOM as an image in the browser. Voila! 🥳 We've successfully displayed the content we want (Hello World) in the browser to the user, achieving our first goal.
By the way, the <noscript> tag (which we use to link HTML & JS) in the HTML file will also be added as a node, and it will trigger the JavaScript Engine in the browser.
more reading
https://dev.to/joshcarvel/properly-understanding-the-dom-2cg0
In Part II:
We'll delve into how we allow users to interact with the content we display, using JavaScript. Since the DOM doesn't exist in JavaScript (it's a browser feature), there's an object in JavaScript that provides a link to the DOM. That object is called Document (it links to the DOM with a hidden property).
In Part III:
We'll discuss problems and their solutions. 🤓
Btw if you are super beginner like you don't know javanoscript I wouldn't recommend it taking the course. First familiarise yourself with Javanoscript.
💌 This was from my discord
#codingresources
⭐️ @shegocodes
💌 beacons.ai/shego.codes
How are you doing? I’m doing great!
(Eeehhh this sounds like an email 😭, but I feel rude not to ask how are you lol)
Anyway, I wanted to share with you what I've learned. I just finished the "UI Hard Parts" course by Will Sentance on Frontend Masters. This course delves into how UI engineering has evolved with code. It really changed the way I think about frontend development.
There's so much to cover that I don't even know where to begin. So, I'll be posting in parts! 😅
PART I:
The primary goals of UI engineering are:
1. Displaying content.
2. Allowing users to interact with content and change it (where most of the problems arise).
The course starts by explaining how HTML works under the hood. When you create an HTML file with elements like <h1>Hello World</h1>, the HTML parser in the browser goes through each line of the HTML document and adds the elements into the Document Object Model (DOM).
But what exactly is the DOM?
The DOM (Document Object Model) in web browsers is typically implemented as a C++ object model. It represents an HTML document as a tree-like structure of objects, where each object corresponds to a different part of the document, such as elements, attributes, and text nodes. Each element in the HTML document is represented as a node in the DOM tree, and these nodes can have child nodes representing nested elements.
For the <h1> tag, we get a node in the DOM like this (for illustrative purposes):
{
* H1 node,
* Div node
}
CSS also has its own DOM, amusingly enough. 😆
The render and layout engine then display what's in the DOM as an image in the browser. Voila! 🥳 We've successfully displayed the content we want (Hello World) in the browser to the user, achieving our first goal.
By the way, the <noscript> tag (which we use to link HTML & JS) in the HTML file will also be added as a node, and it will trigger the JavaScript Engine in the browser.
more reading
https://dev.to/joshcarvel/properly-understanding-the-dom-2cg0
In Part II:
We'll delve into how we allow users to interact with the content we display, using JavaScript. Since the DOM doesn't exist in JavaScript (it's a browser feature), there's an object in JavaScript that provides a link to the DOM. That object is called Document (it links to the DOM with a hidden property).
In Part III:
We'll discuss problems and their solutions. 🤓
Btw if you are super beginner like you don't know javanoscript I wouldn't recommend it taking the course. First familiarise yourself with Javanoscript.
💌 This was from my discord
#codingresources
⭐️ @shegocodes
💌 beacons.ai/shego.codes
DEV Community
Properly Understanding the DOM
Intro 🧰 If you're a front-end developer, you've probably heard of the DOM, or used some DO...
❤3👍1
Lil reflections for Saturday (DevFest) and Sunday
It was my first time attending DevFest. I actually enjoyed it, and I didn’t feel socially burnt out at all.
I was in the hall where the speakers were screaming, and then they suddenly switched to games.
I had a lot of things to do, and surprisingly, I managed to finish 90% of them. Like… who are we? girl scream 😏
I had this genius idea that was actually technically dumb, and I was trying to make it make sense with ChatGPT, DeepSeek, Gemini, and Claude.
They all said SIKE 😎.
I was in Track 3 where Dagmwai was talking about “the plateau” you experience with AI and I was literally going through it at that exact moment. 🙄
(And also for the ppl who attended different tracks, how was it? I really wanted to check them out)
And I wish it was just not working. It reached a point where ChatGPT was FULLY gaslighting me. Like, sir helloooooo??
Bro was like, “I will explain what’s happening and NOT what’s supposed to happen.”
I KNOW what’s happening.
JUST MAKE WHAT’S SUPPOSED TO HAPPEN, HAPPEN.
I need to chill. I’m still agitated though. Like, everyone says ChatGPT builds based on how you talk to it, what have I done for it to start gaslighting me? This feels like a toxic relationship at this point.
ANYWAYS.
I ended the day with a dinner date with my besties. The food was so good, and also… THE TEA was hot ☕️🔥
My Sunday was very chill. I already miss it 💗😭
🌘 Good night
It was my first time attending DevFest. I actually enjoyed it, and I didn’t feel socially burnt out at all.
I was in the hall where the speakers were screaming, and then they suddenly switched to games.
I had a lot of things to do, and surprisingly, I managed to finish 90% of them. Like… who are we? girl scream 😏
I had this genius idea that was actually technically dumb, and I was trying to make it make sense with ChatGPT, DeepSeek, Gemini, and Claude.
They all said SIKE 😎.
I was in Track 3 where Dagmwai was talking about “the plateau” you experience with AI and I was literally going through it at that exact moment. 🙄
(And also for the ppl who attended different tracks, how was it? I really wanted to check them out)
And I wish it was just not working. It reached a point where ChatGPT was FULLY gaslighting me. Like, sir helloooooo??
Bro was like, “I will explain what’s happening and NOT what’s supposed to happen.”
I KNOW what’s happening.
JUST MAKE WHAT’S SUPPOSED TO HAPPEN, HAPPEN.
I need to chill. I’m still agitated though. Like, everyone says ChatGPT builds based on how you talk to it, what have I done for it to start gaslighting me? This feels like a toxic relationship at this point.
ANYWAYS.
I ended the day with a dinner date with my besties. The food was so good, and also… THE TEA was hot ☕️🔥
My Sunday was very chill. I already miss it 💗😭
🌘 Good night
❤6👍3
Hello pretty people,
This is Part 2️⃣ of UI Engineering.
Previously, we discussed displaying content to the user. Now, let's explore enabling user interaction with our content using JavaScript.
In JavaScript, there's a powerful built-in object called Document. This object allows us to** access** and manipulate the Document Object Model (DOM) of the browser using methods like querySelector and createElement. The DOM represents the structure of our HTML file within the browser.
You might wonder, "How does the document object link to the DOM?" Well, in JavaScript, every object has a hidden property called` **__proto__**`, which is used for prototype-based inheritance. Through this mechanism, the document object establishes a connection to the DOM.
This is our website.
app.html (image 1)
app.js (image3)
Our Website looks like the white image
(Continues below)
💌 This was from my discord
#codingresources
⭐️ @shegocodes
💌 beacons.ai/shego.codes
This is Part 2️⃣ of UI Engineering.
Previously, we discussed displaying content to the user. Now, let's explore enabling user interaction with our content using JavaScript.
In JavaScript, there's a powerful built-in object called Document. This object allows us to** access** and manipulate the Document Object Model (DOM) of the browser using methods like querySelector and createElement. The DOM represents the structure of our HTML file within the browser.
You might wonder, "How does the document object link to the DOM?" Well, in JavaScript, every object has a hidden property called` **__proto__**`, which is used for prototype-based inheritance. Through this mechanism, the document object establishes a connection to the DOM.
This is our website.
app.html (image 1)
app.js (image3)
Our Website looks like the white image
(Continues below)
💌 This was from my discord
#codingresources
⭐️ @shegocodes
💌 beacons.ai/shego.codes
❤5
❓What's happening in app.js?
We're initializing a post variable and setting it to an empty string. Then, we're selecting two elements from the DOM using document.querySelector and storing them in jsInput and jsDiv constants.
❓What's happening in the line const jsInput = document.querySelector('input')?
We're creating the constant jsInput in the global memory of JavaScript, which will store the evaluated result of calling the querySelector method of the document object with the argument 'input'. This selects the <input> element from the DOM.
The function aka method querySelector does 3 things:
1️⃣ Looks at the hidden link of the object document in the hidden property` proto,` which links to the DOM
2️⃣ Searches for the string ‘input’ (aka the input node) in the DOM
3️⃣ When it finds the node/element with name ‘input’, it creates an object that has a hidden property that store a link to that node so it can interact with later. JavaScript will populate the object with setter and getter property methods. (Why? Just because we can’t bring c++ code into javanoscript and play with it).
Then we are declaring the function
❓What does handleInput() do when it runs?
It assigns the post variable to jsInput.value, which represents the current value of the input field.
The same thing happens with const jsDiv =
Then we are declaring the function` handleInput()`.
❓What does `*handleInput() *`do when it runs?
It assigns the post variable to
❓But what's` jsInput.value`?
If you remember we said that jsInput is an object that has setter and getter properties that help us interact with node/element it’s linking to in the DOM. So
(continues below 👇 )
💌 This was from my discord
#codingresources
⭐️ @shegocodes
💌 beacons.ai/shego.codes
We're initializing a post variable and setting it to an empty string. Then, we're selecting two elements from the DOM using document.querySelector and storing them in jsInput and jsDiv constants.
❓What's happening in the line const jsInput = document.querySelector('input')?
We're creating the constant jsInput in the global memory of JavaScript, which will store the evaluated result of calling the querySelector method of the document object with the argument 'input'. This selects the <input> element from the DOM.
The function aka method querySelector does 3 things:
1️⃣ Looks at the hidden link of the object document in the hidden property` proto,` which links to the DOM
2️⃣ Searches for the string ‘input’ (aka the input node) in the DOM
3️⃣ When it finds the node/element with name ‘input’, it creates an object that has a hidden property that store a link to that node so it can interact with later. JavaScript will populate the object with setter and getter property methods. (Why? Just because we can’t bring c++ code into javanoscript and play with it).
Then we are declaring the function
handleInput().❓What does handleInput() do when it runs?
It assigns the post variable to jsInput.value, which represents the current value of the input field.
The same thing happens with const jsDiv =
document.querySelector('div’), but the link in the returned object will be to the div node/element.Then we are declaring the function` handleInput()`.
❓What does `*handleInput() *`do when it runs?
It assigns the post variable to
jsInput.value, which represents the current value of the input field.❓But what's` jsInput.value`?
If you remember we said that jsInput is an object that has setter and getter properties that help us interact with node/element it’s linking to in the DOM. So
.value is a getter property, it gets the value of <input> node/element that is stored in the DOM.(continues below 👇 )
💌 This was from my discord
#codingresources
⭐️ @shegocodes
💌 beacons.ai/shego.codes
❤2
Then the handle function resigns,
❓But what is jsDiv.textContent?
jsDiv is also an object that has setter and getter properties that help us interact with
Then
❓What is jsInput.oninput?
❓When the user types in the input field, this action triggers two things:
*jsInput.value*: The value setter attribute stores the input inserted.
*jsInput.oninput*: The handleInput function stored in the
❓So what happens inside the running of oninput?
The value of jsInput.value is assigned to post, and then jsDiv.textContent is updated with the value of post.
Since now something is stored textContext, the div in our html will show something on our website.
So you will have an example like image below.
💌 This was from my discord
#codingresources
⭐️ @shegocodes
💌 beacons.ai/shego.codes
jsDiv.textContent to the value post variable.❓But what is jsDiv.textContent?
jsDiv is also an object that has setter and getter properties that help us interact with
<div> node/element it’s linking to in the DOM. So` .TextContext` is a setter property that sets the value of <div> node/element in the DOM. The value of post will be stored in the <div> node/element. When something is stored in textContext, it will show inside the div, when it’s rendered.Then
jsInput.oninput is assigned to the function definition of handleInput (the function is not run, it’s only the definition that is stored)❓What is jsInput.oninput?
jsInput.oninput jsInput object that stores the definition of the handleInput function. This property is special because it automatically runs the assigned function whenever the user adds text in the input element.❓When the user types in the input field, this action triggers two things:
*jsInput.value*: The value setter attribute stores the input inserted.
*jsInput.oninput*: The handleInput function stored in the
oninput setter attribute is executed.❓So what happens inside the running of oninput?
The value of jsInput.value is assigned to post, and then jsDiv.textContent is updated with the value of post.
Since now something is stored textContext, the div in our html will show something on our website.
So you will have an example like image below.
💌 This was from my discord
#codingresources
⭐️ @shegocodes
💌 beacons.ai/shego.codes
❤1
💌 Helloooooo pretty people
If you can’t hear the sounds on my reels because it’s instagram has different music licensing by country.
Like African countries get limited access to platforms music features annoyingly.
Does this have any effects?
Yhh 🙄
As a viewer you have a limited amount of content that you see on instagram, like my reel feed is a turn off now (same with TikTok)
As a creator you get limited reach because you can’t have access to the sounds that are used by the majority of ppl (omg that’s so funnnn 🙄)
A VPN can fix the issue, but not for the long term.
I went through this rabbit hole a while ago, and I think it’s kinda interesting (more annoying).
#funfact 🙂
⭐️ @shegocodes
💌 beacons.ai/shego.codes
If you can’t hear the sounds on my reels because it’s instagram has different music licensing by country.
Like African countries get limited access to platforms music features annoyingly.
Does this have any effects?
Yhh 🙄
As a viewer you have a limited amount of content that you see on instagram, like my reel feed is a turn off now (same with TikTok)
As a creator you get limited reach because you can’t have access to the sounds that are used by the majority of ppl (omg that’s so funnnn 🙄)
A VPN can fix the issue, but not for the long term.
I went through this rabbit hole a while ago, and I think it’s kinda interesting (more annoying).
#funfact 🙂
⭐️ @shegocodes
💌 beacons.ai/shego.codes
❤3
I’m trying to finish the google cloud labs, but they’re so slow. (It could be my internet but I’m not taking that as answer 🙂)
I just get bored and use my phone and realize I spend 20 minutes on my phone, when the thing I was waiting for was done 15 minutes ago.
Mamati bullied my mug by calling it a bucket 🪣
(baldi in her literal words 😭)
I’m not sleeping but goodnight ✨
I just get bored and use my phone and realize I spend 20 minutes on my phone, when the thing I was waiting for was done 15 minutes ago.
Mamati bullied my mug by calling it a bucket 🪣
(baldi in her literal words 😭)
I’m not sleeping but goodnight ✨
😁2❤1
hellooooooo
does anyone use google maps to check reviews here?
I tried doing that and it's dry, very dry.
Someone told me to use tiktok and it's mostly ads so IDK.
I went to place after seeing a tiktok, and it was ............ 🙂
So what do people do here?
does anyone use google maps to check reviews here?
I tried doing that and it's dry, very dry.
Someone told me to use tiktok and it's mostly ads so IDK.
I went to place after seeing a tiktok, and it was ............ 🙂
So what do people do here?
I love how 8 hr of debugging can save you from 8 min of reading the documentation.
#codingmemes
⭐️ @shegocodes
💌 beacons.ai/shego.codes
#codingmemes
⭐️ @shegocodes
💌 beacons.ai/shego.codes
😁8🗿3🤣2
Paper and pen is the final boss of debugging (the last hope). I sit there tracing every line, writing down how variables change, circling anything that mutates, testing tiny inputs and edge cases. Putting it all on a paper reduces the burden of visualizing all the drama in my head and focus on solving the issue.
I use a Wacom tablet which I got to animate, but guess who never animated 🌞
#codingtips
⭐️ @shegocodes
💌 beacons.ai/shego.codes
I use a Wacom tablet which I got to animate, but guess who never animated 🌞
#codingtips
⭐️ @shegocodes
💌 beacons.ai/shego.codes
❤1
I tried installing Gemini on my Android phone and it says my phone is not compatible and then I tried using other android phones and it says Gemini is not available in your region?
IT'S NOT EVEN THERE ON THE PLAY STORE I HAD TOO GOOGLE IT AND IT SAYS YOU CAN'T DOWNLOAD IT.
I have it on my iOS and it's normal.
Does anyone have this issue? 🤓
IT'S NOT EVEN THERE ON THE PLAY STORE I HAD TOO GOOGLE IT AND IT SAYS YOU CAN'T DOWNLOAD IT.
I have it on my iOS and it's normal.
Does anyone have this issue? 🤓
💌What kind of content format you like to see? (Text only is not giving 🙂)
Anonymous Poll
2%
!Only text
5%
Text and VMs
12%
Text and mini videos
81%
Beyayenatu (a lil mix of everything)
✨Goodnight pretty people,
I'm done yapping for the day. I have two more things to say, but I'm holding myself.
I'm done yapping for the day. I have two more things to say, but I'm holding myself.
❤1
💌 Hello pretty people
Someone told me that they create compilers and nosql dbs for fun. Maybe I'm not using my tech free will.
I made a git clone tho, but still it's not techmaxxing.
What's something technically nerdy you made?
#coding
⭐ @shegocodes
💌 beacons.ai/shego.codes
Someone told me that they create compilers and nosql dbs for fun. Maybe I'm not using my tech free will.
I made a git clone tho, but still it's not techmaxxing.
What's something technically nerdy you made?
#coding
⭐ @shegocodes
💌 beacons.ai/shego.codes
❤1😁1🤯1