Today I Learned

You can adjust output from this with the --progress option:

  --progress string         Set type of progress output (auto, plain, tty). Use plain to show container output
                            (default "auto")

Adding --progress=plain will show the output of the run commands that were not loaded from the cache. This can also be done by setting the BUILDKIT_PROGRESS

variable:

export BUILDKIT_PROGRESS=plain

If you are debugging a build, and the steps have already been cached, add --no-cache to your build to rerun the steps and redisplay the output:

docker build --progress=plain --no-cache ...

If you don't want to use buildkit, you can revert to the older build engine by exporting DOCKER_BUILDKIT=0 in your shell, e.g.:

DOCKER_BUILDKIT=0 docker build ...

export DOCKER_BUILDKIT=0
docker build ...

Source: https://stackoverflow.com/questions/64804749/why-is-docker-build-not-showing-any-output-from-commands

Naming versions

It seems that what you actually expect from the numbers is:

8.9 > 8.10 and this is true with the decimal numbers, but when talking about the version of a software this is not true because each number after the dot have individual meaning resulting that the version 8.9 < 8.10

sed

Terminal

You can use the sed command in the terminal to replace all occurrences of any Regex in specific files.

Here's the command:

sed -i '' 's/@import/@use/g' *.scss

Running this command in the terminal you will replace all occurrences of @import with @use in your .scss

webpackbar

Webpack

The WebpackBar plugin provides an improved progress bar and displays file names in real time.

Implementation:

const WebpackBar = require('webpackbar');

module.exports = {
    // Otras configuraciones...
    plugins: [
        new WebpackBar()
    ]
};

webpack --progress

Webpack

You can get more information about the progress of your Webpack bundle by adding the flag --progress

Example:
npx webpack --config ./webpack.config.core.js --progress

npm list <package name>

Npm

To see the current version of any package installed in your project from the console, you can use the following npm command:

npm list webpack

This command will display the version of the package installed locally in your project along with its dependencies.
Look for the package entry in the output to see the version number.

find_or_initialize_by

Ruby On Rails

In Ruby on Rails, the find_or_initialize_by method is a convenient way to find a record in a database based on certain conditions and, if not found, initialize a new instance of the model with those conditions set.

# Example usage
@user = User.find_or_initialize_by(email: 'example@example.com')

Database normalization

Databases

It's the process of organizing data in a relational database to reduce redundancy and improve data integrity.

Importance:

Minimize Redundancy: Eliminate duplicate data, reducing storage space.
Avoid Update Anomalies: Prevent inconsistencies when updating data.
Simplify Queries: Simplify data retrieval and improve query performance.
Enhance Data Integrity: Ensure accurate and consistent data.

Difference between CommonJS and ES6 modules.

NodeJs

CommonJS (Node.js):

Syntax: Utilizes require to import modules and module.exports or exports to define exports.
Loading: Synchronous, modules are loaded and executed sequentially.
Use Cases: Well-suited for server-side applications, especially in Node.js environments where synchronous loading is acceptable.

ES6 Modules:

Syntax: Uses import and export statements for importing and exporting modules.
Loading: Supports asynchronous loading, enabling more efficient loading of modules in browsers.
Use Cases: Widely used in front-end development due to support in modern browsers. Offers a more standardized syntax and supports advanced features like dynamic
imports.

Tricky difference between interfaces and types

Typescript

types are indexed by the default whereas interfaces are not. It makes interfaces more safe.

Consider this example:

type Admin = {
    name: string,
    privileges: string[]
}

type Employee = {
    name: string,
    startDate: Date
}

type CombinedType = Admin & Employee;

interface CombinedInterface extends Admin, Employee { }

const interfaceData: CombinedInterface = { name: '', privileges: [], startDate: new Date() }
const typeData: CombinedType = { name: '', privileges: [], startDate: new Date() }


const handleType = (obj: Record<string, unknown>) => {
    obj['name'] = 42 // unsafe
}


handleType(interfaceData) // error
handleType(typeData) // ok

Source: https://stackoverflow.com/questions/72598769/intersection-types-vs-interfaces-in-typescript

process.nextTick()

NodeJs

process.nextTick is a Node.js feature that defers the execution of a callback function to the next iteration of the event loop. It's often used when immediate execution is necessary, but the function should be deferred to avoid blocking the event loop. For example, in scenarios where you want to ensure that certain asynchronous operations are complete before continuing, process.nextTick can be employed.

Remove file from Github history

Git

Remove the file and rewrite the history from the commit you did with the removed file(this will create a new commit hash from the file you committed):

there are two ways:

Using git-filter-branch:

git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch <path to the file or directory>' --prune-empty --tag-name-filter cat -- --all

Using git-filter-repo:

pip3 install git-filter-repo
git filter-repo --path <path to the file or directory> --invert-paths

Source: github - How to remove file from Git history? - Stack Overflow

How to amend user name/email from all commits in git branch

Git

Use this following command from your terminal to amend email/name from all commits in a branch:

git filter-branch --env-filter '
OLD_EMAIL="old-test@test.com"
CORRECT_NAME="Oswaldo Pineda"
CORRECT_EMAIL="new-test@test.com"
if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$CORRECT_NAME"
    export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_AUTHOR_NAME="$CORRECT_NAME"
    export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags

Source: git - How do I change the author and committer name/email for multiple commits? - Stack Overflow

Optimistic Concurrency Control (OCC)

Databases

Optimistic Concurrency Control (OCC) is a technique used in computer systems, particularly in databases, to manage concurrent access to shared resources without resorting to locking mechanisms that can potentially introduce performance bottlenecks and contention.

Imagine you have a group of friends trying to update a shared document online at the same time. Optimistic Concurrency Control is like letting everyone make changes freely and then checking for conflicts later.

Here's how it works:

Checking Out the Document: Each friend checks out the document and sees a version number (like "1.0"). This tells them the state of the document when they started.
Making Changes: Friends start making changes to the document without telling each other. They trust that conflicts are rare.
Checking Back In: Before saving their changes, each friend checks the version number again to make sure nobody else has made changes in the meantime.
Conflict Check: If someone else made changes (maybe the version is now "1.1"), it means there's a conflict. Friends are notified, and they need to figure out how to resolve the conflicting changes.
Saving Changes: If no conflicts are found, the changes are saved, and everyone's updates are combined.

React.Memo(...)

React

memo lets you skip re-rendering a component when its props are unchanged.

Wrap a component in memo to get a memoized version of that component. This memoized version of your component will usually not be re-rendered when its parent component is re-rendered as long as its props have not changed. But React may still re-render it: memoization is a performance optimization, not a guarantee.

import { memo } from 'react';
const SomeComponent = memo(function SomeComponent(props) {  // ...});