Let’s spill the tea from yesterday (it was a long day, but it was so fun).
Tea One ☕️:
I realized I’d be rich rich rich if I got paid a dollar every time I met or knew someone called Yabsera or Dagimwai/Dagim.
(I’m dead serious about this. No jokes here.)
Tea Two ☕️:
I met two people this week who understood Arabic — like whaaaaaaaaat? And they learned it from MBC3 and Cartoon Network. I feel so validated because now I know I wasn’t the only one chronically obsessed with it.
Anyone else obsessed? Let’s be besties 👯♀️
Tea Three ☕️:
I accidentally joined this talk by the founder Eufey Gela about entrepreneurship vs. being employed.
Here’s what I understood: both are kind of the same thing. One is like a cat race 🐱 and the other is like a hamster race 🐹
(You know — rat race. But with cute animals so I don’t offend anyone 😬)
The cats race for the tuna, while hamsters race for the sunflower seeds. There’s competition on both sides — everyone is rushing toward the prizes and everyone is hardworking.
Sometimes cats wish they were hamsters, and hamsters wish they were cats, but little do they know they’re living the same life in different fonts. Or, in fancier terms, “the same coin, just different sides.”
The conclusion: don’t be a cat or a hamster — just LIVE.
The whole talk was insightful and entertaining, there was a lot of things mentioned. I shared a tiny part of it.
Tea One ☕️:
I realized I’d be rich rich rich if I got paid a dollar every time I met or knew someone called Yabsera or Dagimwai/Dagim.
(I’m dead serious about this. No jokes here.)
Tea Two ☕️:
I met two people this week who understood Arabic — like whaaaaaaaaat? And they learned it from MBC3 and Cartoon Network. I feel so validated because now I know I wasn’t the only one chronically obsessed with it.
Anyone else obsessed? Let’s be besties 👯♀️
Tea Three ☕️:
I accidentally joined this talk by the founder Eufey Gela about entrepreneurship vs. being employed.
Here’s what I understood: both are kind of the same thing. One is like a cat race 🐱 and the other is like a hamster race 🐹
(You know — rat race. But with cute animals so I don’t offend anyone 😬)
The cats race for the tuna, while hamsters race for the sunflower seeds. There’s competition on both sides — everyone is rushing toward the prizes and everyone is hardworking.
Sometimes cats wish they were hamsters, and hamsters wish they were cats, but little do they know they’re living the same life in different fonts. Or, in fancier terms, “the same coin, just different sides.”
The conclusion: don’t be a cat or a hamster — just LIVE.
The whole talk was insightful and entertaining, there was a lot of things mentioned. I shared a tiny part of it.
👌7❤2
TINY NOTE 💌
Shego stands for she go (grammatically it should be goes, but it sounds weird)
Shego is a reminder for me to keep going and in the words of dorry to keep swimming.
It’s just a tiny moto I created for myself.
So please pronounce it as she + go, and not as sheggo.
Shego stands for she go (grammatically it should be goes, but it sounds weird)
Shego is a reminder for me to keep going and in the words of dorry to keep swimming.
It’s just a tiny moto I created for myself.
So please pronounce it as she + go, and not as sheggo.
😁13👎1
I'm so tired.
I literally miss home and chilling at home. Focus on the chilling part 🙂
The amount of things I have on my to do list is insane.
I will either finish it or it will finish me. Stay tuned to find out who will finish who
I literally miss home and chilling at home. Focus on the chilling part 🙂
The amount of things I have on my to do list is insane.
I will either finish it or it will finish me. Stay tuned to find out who will finish who
❤6
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? 🤓