so i wanted to import markdown files in my .tsx file in vite project. well to import .md files in a vite project, you need an extra plugin to configure it in vite.config.ts file. but most plugins don't work as expected. so i got a way around it. i've also created a Gist for it if you wanna check. first in your vite-env.d.ts file, put the following line to let typescript treat .md files as a module.

declare module '*.md';

then in your vite.config.ts file put the following code to create a custom plugin which loads .md files and gets the raw content of the .md file

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    // Custom plugin to load markdown files
    {
      name: 'markdown-loader',
      transform(code, id) {
        if (id.slice(-3) === '.md') {
          // For .md files, get the raw content
          return `export default ${JSON.stringify(code)};`;
        }
      },
    },
  ],
});

there you go, you can now import markdown file in your project 🙂

#tips #vite #ts
@Mi_Ra_Ch

32-bit vs 64-bit: Technical Depths of Computer Architecture

aight homies, lemme walk u through one of the interesting concept i liked while i was reading sth lately (not a hardware geek tho lol)

32-bit vs. 64-bit

The fundamental difference between 32-bit and 64-bit architectures lies in their address space and data representation.

Address Space: This refers to the range of memory addresses a CPU can directly access. In a 32-bit system, the address space is limited to 2^32 (4,294,967,296) unique addresses, while a 64-bit system boasts an address space of 2^64 (approximately 18 quintillion). This dramatic increase in address space allows 64-bit systems to directly access significantly larger amounts of memory, leading to improved performance for memory-intensive applications.

Data Representation: The size of a data word (the unit of data processed by the CPU) also differs. A 32-bit system uses 32-bit registers and instructions, while a 64-bit system employs 64-bit registers and instructions. This translates to the ability to process larger amounts of data concurrently, enhancing computational power.

Alternative Architectures

While 32-bit and 64-bit are prevalent, other architectures deserve recognition for their unique strengths:

ARM (Advanced RISC Machine): Renowned for its energy efficiency, ARM architecture is optimized for mobile devices and embedded systems. Its focus on instruction set simplicity and efficient data handling makes it suitable for battery-powered devices and applications where low power consumption is critical.

RISC-V (Reduced Instruction Set Computing - Version 5): This open-source, customizable architecture has gained traction in recent years. Its modular design allows for flexibility in implementation, enabling tailored configurations to meet specific performance and resource constraints. It's poised to revolutionize the landscape of embedded systems and custom hardware development.

Performance Implications and Compatibility Considerations

The shift from 32-bit to 64-bit has had significant performance implications:

Increased Memory Capacity: 64-bit systems can handle large datasets and complex applications that would strain 32-bit systems due to memory limitations.
Enhanced Computational Power: 64-bit processors can process more data simultaneously, leading to faster execution times for computationally intensive tasks.
Compatibility Issues: Software specifically designed for 32-bit systems may not run seamlessly on 64-bit platforms, necessitating compatibility considerations for application development and deployment.

Lets wrap it up

32-bit: Good for basic stuff, but limited in memory.
64-bit: The go-to option for modern computers, offering more memory and performance.
ARM: Efficient for mobile devices and low power usage.
RISC-V: Open source and customizable, the new kid on the block lol

understanding these architectural nuances is crucial for making informed decisions about hardware selection, software development, and optimization strategies to maximize performance and efficiency.

#TakeAByte #ComputerArchitecture #32bitvs64bit #ARM #RISCV
@Mi_Ra_Ch

lmao i genuinely laughed out loud 😂

sup homies :)

literally pulling an all-nighter for the straight 29 days 🙂 just a peaceful life 🤗😭

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