Tweet fixado
I built software Facebook and Google engineers said were impossible.
Ask me anything 👌🏽
English
Ayobami Ogundiran 🌟
16.1K posts
Ayobami Ogundiran 🌟
@codingnninja
🛠️ Inventing the future of the web with @korasjs | Creator | contributed to @firefoxDevTools | exDev@orgs | React ⚛️ | AI application Engineer/Researcher
Creating opportunities 🤩 Entrou em Ağustos 2015
668 Seguindo1.7K Seguidores
If you're sacking because of Ai, remember Ai is as expensive as your employees
but AI companies are bearing the burden for you hoping things get better in the future.
English
Hurray!!!!
Africa make going to the moon possible even if we are not given any credit.
Fire without which rocket can't get to the moon was discovered in Africa and spread around the world.
And Elon, our son, even though he has disowned us technically, is raising the flag 🤭
English
Vibe coding is for idiots 🤣
I have never vibe-coded anything in my entire existence.
Vibe coding is a senseless waste for idiots.
Ayobami Ogundiran 🌟@codingnninja
"Vibe coding is for those who want to die poor" — Egbon Adugbo. 👌🏽
English
Because they're civil servants.
It is part of their responsibility to stay on formality and maintain anonymity.
They are doing their job.
just like how a lawyer will not admit their client is guilty if it is not beneficial, especially when they can explore other angles.
Foundational Nupe Lawyer@egi_nupe
Why do you people act like you don’t know how your officers operate?
English
👌🏽AI is as good as you are.
The major problem with AI is you can't manage context properly no matter hard you try.
Ai will always give unnecessary detail and improper logic so use AI as a tool but not as a crutch.
English
*continuation if they're have different positions in the hierarchy
but if they have the same position, then you still need to reconcile.
So what is continuation?
✅ Continuation!
English
have different attributes as that means the duplicate is either an additional list or new children but not update to existing ones.
You can only reconsile element and duplicate with the same attributes but different in values.
If they're different in attributes, then it is
English
✅ Reconciliation
It is a state or UI management system that ensure the latest changes represented by the duplicate
is committed or added to the UI or the state so that users can see changes.
This is how it works.
If the UI is different from its duplicate only in values
Ayobami Ogundiran 🌟@codingnninja
✅ State In a reactive system, a state is the data that represents the current attributes of an element which is liable to change. Changing a state of an element changes the nature of the element. ✅ State management It is a system of ensuring consistency in state changes.
English
@markessien I built a library that makes that easier whether on the client or the server.
English
The hardest part about AI development is in feeding the results back to the AI. This requires real skill.
English
💪🏾 I am a winner
It seems I have conquered reactivity rendering system.
It is time to ship and be maintaining it.
Now taking on a business and personal challenges. Who is in?
English
"Vibe coding is for those who want to die poor" — Egbon Adugbo. 👌🏽
English
valid:
<section id="blog">
<section id="articles">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</section>
<button onclick=${do()}>re-render</button>
</section>
So, I only need to throw an error in this case to inform them about the error and fix.
English
💪🏾 Adding an element that is not part of the list items is invalid in html
Invalid:
<section id="articles">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<button onclick=${do()}>render</button>
</section>
Button should be out and be wrapped in a tag like below:
Ayobami Ogundiran 🌟@codingnninja
💪🏾 Done. Only need to ensure buttons or other elements that are not part of the list be move to the bottom of the list. No more <For /> just map, flatmap or whatever for loop. There is no way you will build this system without fully understanding how modern UIs frameworks work
English
I have also found a VSCODE extension for template literals syntax highlighter that works with
nested html in nested arrow functions.
English
💪🏾 Done.
Only need to ensure buttons or other elements that are not part of the list be move to the bottom of the list.
No more <For /> just map, flatmap or whatever for loop.
There is no way you will build this system without fully understanding how modern UIs frameworks work
Ayobami Ogundiran 🌟@codingnninja
✅ Going fully React mode. Finally found a VSCode extension that works with html in nested arrow function with "return". For that reason, I might not ship <For /> but ship only <If /> if I am able to reconcile the target and source components.
English
It is a system that observes or an handles the state of an element as it changes to ensure consistency and trigger other operations in a reactive system.
State management doesn't have to be complex.
What matters is consistent state update and triggering of other operations.
English
✅ State
In a reactive system, a state is the data that represents the current attributes of an element which is liable to change.
Changing a state of an element changes the nature of the element.
✅ State management
It is a system of ensuring consistency in state changes.
Ayobami Ogundiran 🌟@codingnninja
✅ Nodes duplication I reinvent React and this is from my experience. Building re-rendering capable system requires nodes duplication as VDOM, GRAPH or DOM because it enables re-rendering system. Your main nodes is for UI and its duplicate for update. This enables re-renders
English
For example,
You have <div> Ayo </div>
and it will be duplicated and be added to a VDOM, DOM or GRAHP before or upon user interactions.
English
A library like solid.js stores its node duplicates in a graph and koras uses DOM.
It is impossible to build a reactive UI without node duplication because there is no other way to handle state changes.
English
✅ Nodes duplication
I reinvent React and this is from my experience.
Building re-rendering capable system requires nodes duplication as VDOM, GRAPH or DOM
because it enables re-rendering system. Your main nodes is for UI and its duplicate for update.
This enables re-renders
English