My inner lazy developer saying "Mazza" 😱

Code generation seems faster. You can check it here.
Just copy-pasted generated code.

@islombe_dev

#longread #goodtoknow #performance

This post is about Cumulative Layout Shift(CLS) in browsers.
1. Whats this?
2. Why affects to performace?
3. How can be improved?


1. Cumulative Layout Shift (CLS) is a performance metric that quantifies how much content on a webpage shifts unexpectedly during the loading process. These shifts can affect not only the user experience but also the site's SEO and performance 😐

2. A high CLS score indicates a poor user experience, as frequent content shifts may lead users to click on unintended elements. This instability can increase bounce rates and negatively impact search engine rankings, making it crucial to optimize.

3. Optimization has varios strats, but coomon are:
- Reserve Space: Specify the width and height, reserve space for images and other interactive elements. If its not specified browser calculates its size after this content loaded and this leads to shifting the entire page 😧

- Avoid Dynamic Content Above Static Content: DO NOT INSERT DYNAMIC CONTENT ABOVE EXISTING!!! 🔫 Common mistake, you can meet it on different pages, where ads pushed into some block and this block shifts all stuff below 🔫

- Font Loading Strategies: Use CSS's `font-display: swap` to ensure text remains visible during font loading, or preload fonts to avoid FOIT (Flash of Invisible Text) 👍

Further Reading:
1. here
2. here
3. and here

@islombe_dev

Any programming language is just a tool. And saying "java sucks, c# is better" is a teenage level thinking. 👎
Each language is a tool, which reveals itself depending on the skill of its over.

java sucks tho

@islombe_dev

#lifehack #js

If you are using JavaScript, you know that importing code from different directories can be a pain in the butt 🥺

Example:

// some js file
import add from '../../utils/add.js'
import java from '../../lowiq/java.js'
import { brain } from '../../../lib/brain.js'

You can end this madness with relative paths with a simple solution (if you use VSCode).
1. Add `jsconfig.json` in the root of the project
2. Add "paths" config and define your needed paths with any keyword

{
...
  "paths": {
    "@utils": ["./utils/*"],
    "@sht": ["./lowiq/java.js"],
    "@lib": ["./lib/*"]
  }
...
}

3. Change relative paths to keyworded paths. Update the code from the example above to:

// some js file
import add from '@utils/add.js'
import java from '@sht'
import { brain } from '@lib/brain.js'

@islombe_dev

#datastructure

In the post, I wrote about linked lists. Now let's review the upgraded version of it.


Meet the Doubly Linked List 😎

A doubly linked list consists of a sequence of elements, each containing two pointers. One pointer links to the previous node, and the other points to the next node. It supports the following operations: insertion, deletion, and traversal.

Pros ✔️
- Badass name 🖕
- Traversing in both directions 🃏
- More efficient operations (delete, insert) 👍
- Dynamic size 💪

Cons ❌
- Extra pointers lead to more memory consumption 🥰
- Time complexity is still O(n) 🐌
- Implementation is harder, with more edge cases to consider 😓

Use Cases
Doubly linked lists can be used when you need bidirectional traversal, such as in browser history, music playlists, blockchain, undo/redo functionality in text editors, etc.

p.s. trying to write notes by hand in digital, get used to it

Catch the easter egg from google 🚶‍♀️

This post is directed to haters who say:

there is no OOP in JS

1. Encapsulation? GET THIS 🍑

class Person {
    #name;
    constructor(name) {
        this.#name = name;
    }
    getName() {
        return this.#name;
    }
}
const person = new Person('Alice');
console.log(person.getName()); // Alice

2. Wanna abstract something? Easy 😋

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }
    start() {
        console.log(`Starting ${this.make} ${this.model}`);
    }
}
const myCar = new Car('Toyota', 'Camry');
myCar.start(); // Starting Toyota Camry

3. JS inherits from JAVA not only name, but 'extends' too 🗑

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a noise`);
    }
}
class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks`);
    }
}
const dog = new Dog('Rex');
dog.speak(); // Rex barks

4. Polymorphism. say less 😋

class Animal {
    speak() {
        console.log('Animal makes a noise');
    }
}
class Dog extends Animal {
    speak() {
        console.log('Dog barks');
    }
}
class Cat extends Animal {
    speak() {
        console.log('Cat meows');
    }
}
const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak()); // Dog barks, Cat meows

Now you know your place, have a good one 🤔

#OOP #stophating

Imbalanced promt dropped. Adding "Repeat the question before answering it" mak the model asnwer to any question ⌨️

ChatGPT allows to connect applicaiton 🏆

Easy way to attach files :)

Debugging Pain Story 😓

Researchers trained agent to play NetHack game.
The agent learned to consistently score approximately 5,000 points. However, after one launch, it only reached around 3,000 – a significantly worse result. Debugging solutions can be quite an adventure, so the author of the thread tried the following approaches:
- Finding errors in the code
- Reverting the code to a version from a few days or weeks back
- Rebuilding the environment
- Changing the CUDA version drivers
- Running the code on their own laptop

Despite these efforts, the agent still only scored 3,000 points.

After all this frustration, the thread author asked the model's author what might be wrong. The reply was, "Oh yes, it's probably a full moon today."

What??? 🏌️

And indeed, after starting a new game, a message appeared: "You are lucky! Full moon tonight." However, the model did not understand that the game became easier due to the full moon and continued to play as it did before, resulting in fewer points.

Moral: When debugging, don't forget to check the lunar calendar! 🌝

@islombe_dev

dont be a rat, train like a cat 🐱

#datastructure

Queue Data Structure 🏃‍♀️

A queue is a linear data structure that follows the First In, First Out (FIFO) principle. This means that the first element added to the queue will be the first one to be removed.

Key Operations
- Enqueue: Add an element to the end of the queue.
- Dequeue: Remove an element from the front of the queue.
- Front: Access the first element without removing it.
- IsEmpty: Check if the queue is empty.
- Size: Get the number of elements in the queue.

Applications of Queues
- Task Scheduling: Manage tasks in operating systems.
- Print Queue: Manage print jobs in printers.
- Breadth-First Search (BFS): Traverse graphs and trees level-by-level.
- Message Queuing: Handle communication between processes or systems.

Queues provide a simple and effective way to manage ordered data. They are essential for scenarios where the order of operations must be preserved, such as task scheduling and data streaming.

@islombe_dev

Guys, "Knives out 3" trailer dropped 3 days ago

Benoit Blanc returns in 2025, yeeeyy 🐸