LuckyArdhika

import fs from 'fs';
import path from 'path';
import fetch from 'node-fetch';
import ytdl from 'ytdl-core';
import { pipeline } from 'stream/promises';

/**
 * Downloads a video from a direct URL
 * @param {string} url - The URL of the video to download
 * @param {string} outputPath - The path where the video will be saved

LuckyArdhika

<script setup>
import { ref, computed } from 'vue'

const state = ref(20000);
const model = computed({
  get(){
    return state.value.toLocaleString();
  },
  set(v){
    state.value = !v ? 0: parseInt(v.replace(/,/g,''));

LuckyArdhika

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const gridSize = 10;
const cellSize = canvas.width / gridSize;

LuckyArdhika

<script setup lang="ts">
import { Close, Filter } from '@element-plus/icons-vue';
import {ElButton, ElIcon, ElInput, ElOption, ElPopover, ElSelect} from 'element-plus';
import { unref, ref, watch, computed } from 'vue';

const props = defineProps({
  filterableData: {
    type: Object,
    required: true,
  },

LuckyArdhika

ref: https://stackoverflow.com/questions/63209420/react-global-state-no-context-or-redux

I have been using a similar approach and I really like it. I actually can't believe more people don't talk about this approach. I wrote a custom hook here React Superstore. It gives you the freedom to dispatch from anywhere in the app and shallow compares to avoid unwanted re-renders. I don't see any performance issues as long as you can avoid the unwanted re-renders.

In all it is a simple concept. You basically create a function to store your state and return 2 functions. One will be a function to set the stored state and one will be a hook to be used in the react component. In the hook you grab the setState function of react on initial render with a createEffect and store it in an array. You can then use this setState function to re render your component. So when you call the dispatch function you can just loop through these setState functions and call them.

Simple example:

import { useState, useEffect } from 'react

LuckyArdhika

#~# Folder Structure
myapp/
├── backend/
│   ├── package.json
│   ├── server.js
│   └── (other backend files)
├── frontend/
│   ├── package.json
│   ├── index.html
│   └── (other frontend files)

LuckyArdhika

// main.ts
app.useGlobalInterceptors(new TransformResponseInterceptor());

// transformResponse.interceptor.ts
import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class TransformResponseInterceptor implements NestInterceptor {

LuckyArdhika

// Void Decorator, File Filter
import { createParamDecorator, ExecutionContext, BadRequestException, UseInterceptors } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';

// First Choice
export const FileLimiter = createParamDecorator((data: { maxSize: number, mimeType: string[] }, req) => {
    const files = req.files;
    const invalidFiles = [];
    for (const file of files) {
        if (file.size > data.maxSize) {

LuckyArdhika

const arr = [
    {label: 'All', value: 'All'},
    {label: 'All', value: 'All'},
    {label: 'Alex', value: 'Ninja'},
    {label: 'Bill', value: 'Op'},
    {label: 'Cill', value: 'iopop'}
]

var result = arr.reduce((unique, o) => {
    if(!unique.some(obj => obj.label === o.label && obj.value === o.value)) {

LuckyArdhika

try {
  // block code of try
  
  console.log("[+] Return: ", result);
  return result;
} catch (err) {
  console.log({
  type: "Error Logger",
  data: {
    Path: req.path,