noticed a bug on their official site, and was about to send a pr. thank you tele 🙌

10 things you (probably) don't know about Go - a talk from 2012 but still some of the concepts apply with some tweak

#golang

peeps making a plain React app without next.js, use react-helmet if you aren't using it already. it will help a lot for a SEO and link preview across social medias. use this guide to get started.

#reactjs

wish y'all a happy Saturday ✌️

hmm... did you guys know the fact that if you have something to wear, something to eat, a rooftop above your head, can read and understand what i typed, and some money you hold in your pocket, you're among 20% of the wealthiest people on earth. so many blessings, but we insist on being grateful most of the time

once you read the dictionary, all of the books are a remix

some dads tbh

... and on a related news 💙

#fcb

This literally saves me a lot of time

#site #resources

React's Diffing Algorithm: The Magic Behind Virtual DOM Updates

Ever wondered how React manages to efficiently update the real DOM without going bat-shit crazy every time your data changes? It's all thanks to its diffing algorithm, a clever trick that helps keep things smooth and fast.

Think of it like this: Imagine you have a giant Lego set representing your UI. Each Lego brick is a component in your React app. When your data changes, you need to rearrange the Lego bricks to reflect the new state. 

The Naive Approach

You could just tear down the entire Lego structure and rebuild it from scratch every time something changes. This would be REALLY slow and inefficient.

React's Smarter Approach

React uses a virtual DOM, which is a lightweight JavaScript representation of your actual DOM. Instead of directly manipulating the real DOM, React updates this virtual DOM. When something changes, React compares the old virtual DOM with the new one and identifies the minimal set of changes needed to update the real DOM.

The Diffing Algorithm in Action

Let's break down the process:

1. Reconciliation: When a component's props or state change, React triggers a reconciliation process. It takes the new virtual DOM and compares it with the old one to figure out what's different.

2. Tree Traversal: React uses a clever tree traversal algorithm to find the changes. It works by comparing the elements in the old and new virtual DOMs from top to bottom, comparing their types and properties.

3. Difference Detection: If it finds differences, React applies a set of rules to figure out what kind of update needs to be done. It might need to:
    - Add new elements: Create new DOM nodes.
    - Remove elements: Delete existing DOM nodes.
    - Update existing elements: Change attributes or text content.
    - Re-order elements: Move DOM nodes within the tree.

Code Example

const MyComponent = ({ name }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

// Imagine this component is rendered with name="Yohanestz"
// Then, the name changes to "Sakazuki"

// React will do the following:
// 1. Create a new virtual DOM with name="Sakazuki"
// 2. Compare the new virtual DOM with the old one.
// 3. Detect that the text content of the <h1> element needs to be updated.
// 4. Update only the text content of the <h1> element in the real DOM.

Key Advantages

Performance: React's diffing algorithm is highly efficient, reducing the number of DOM manipulations and resulting in smooth UI updates.

Ease of Development: It simplifies development by abstracting away the complexity of DOM manipulation.

Maintainability: React's declarative style and diffing algorithm help create a more predictable and maintainable codebase.

Final Thoughts

React's diffing algorithm is the secret sauce behind its performance and ease of use. By intelligently comparing virtual DOMs, it helps React efficiently update the real DOM and keep your UI smooth and responsive.

So next time you're building your React app, remember that under the hood, there's a clever algorithm working hard to keep everything running smoothly 😉

#TakeAByte #reactjs #diffing #webdev
@Mi_Ra_Ch

sup homies 🙌

Her: I like animals
me: my mom calls me a dog

stay tuned for more flirting tips 😭

Don't let other's opinion to be your reality

like, u know, people tend to have rough opinions and negative outlooks on other people (especially if you're different from them and surround yourself with negative people just for the sake of fitting in). tbh most people try to fit in while they were destined to stand out. you're unique on your own way; you don't have to need for someone's approval to have awesome life

some contributions require a conventional commit messages to help maintain a clear and organized commit history. some of them defined by Conventional Commits, and i found useful:

- feat: Introduces a new feature to the application.

- fix: Patches a bug or addresses an issue in the code.

- chore: categorizes changes that do not directly affect the application's functionality or fix bugs

- docs: Documentation-only changes that do not affect the code.

- style: Changes that do not affect the meaning of the code, such as formatting, whitespace, or missing semicolons.

- refactor: Code changes that neither fix a bug nor add a feature, focusing on improving the code structure.

- perf: Changes that improve performance, making the application faster or more efficient.

- test: Adds missing tests or corrects existing tests to ensure code quality.

- build: Changes that affect the build system or external dependencies (e.g., gulp, npm).

- ci: Changes related to continuous integration configuration files and scripts.

- revert: Reverts a previous commit, indicating that a change is being undone.

#tips #git

lol

have a blessed day y'all

Aceternity UI has some bugs in few components I used. like for example the Card-with-hover-effect takes array of objects with title, description and link property. then uses the link prop for the key. if you have an object with the same link prop, it throws an error. since it has hover event, there will be lots of console errors which isn't good for the overall performance. instead, they can use the index of the object being mapped as the key since the index is always unique in this context. other bugs i noticed is, some components have validDOMNesting warning, meaning for instance <h1> or <h2> cannot appear as a descendant of <p> or <h3>.

A little copying is better than a little dependency.

this is actually one of the wisdom words from Rob Pike (one of Golang's creator). it is all about simplicity vs. reusability. still a dependency is crucial but sometimes dependencies pose some risks like:

Increased build times: Larger projects take longer to compile.
Introducing security vulnerabilities: Outdated or compromised libraries pose risks.
Make your code harder to understand: You might not know how the library works internally.

In Go's minimalist philosophy, sometimes a few lines of copied code are easier to manage than a complex external library. This is especially true for small, self-contained functions or utility code.

Weigh the benefits of reusing code against the potential downsides of adding dependencies. In Go, simplicity often wins! that is why something like generics weren't supported till Go's version 1.2

#tips #golang