dantldev

/**
 * @description _middleware es un objeto con funciones
 * útiles para user dentro de api routes de nextjs
 */
export const _middleware = {
  /**
   * @description Si esta función es llamada como primera linea
   * dentro de un método "handler" en una ruta api de nextjs,
   * su finalidad es ejecutar tantos middlewares como sea posible
   * antes de la ejecución del resto de la función.

dantldev

/**
* you can call the api route with fetch and will return the base64 blob as json.
* you can use it on a <img /> tag like so:
*/
import { useEffect, useState } from 'react';

export const WebScreenshot = ({ url }) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(`/api/get-screenshot${url ? `?url=${url}` : ''}`)

dantldev

Wordpress & Docker

This file will setup Wordpress, MySQL & PHPMyAdmin with a single command. Add the code below to a file called "docker-compose.yaml" and run the command

$ docker-compose up -d

# To Tear Down
$ docker-compose down --volumes

dantldev

# some stuffs
sudo apt install -y zsh curl build-essential tmux zip unrar g++ as31 nasm ruby ruby-bundler ruby-dev clang-9 lldb valgrind sqlite3 cmake python3-pip &&

# install node 16.x
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

# config npm without sudo
mkdir -p ~/.npm-global
npm config set prefix ~/.npm-global

dantldev

import { useEffect, useState } from "react";

/**
 * This hook runs a callback when a component is mounted.
 */
export const useComponentFirstRender = (callback: Function) => {
  const [isMounted, setIsMounted] = useState(false);
  useEffect(() => {
    if (isMounted) {
      console.log("Component mounted!");

dantldev

/**
*  live demo https://codesandbox.io/p/devbox/confident-bessie-ldx396?file=%2Fsrc%2FApp.tsx%3A1%2C34&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsz5b2c400073j6j1kpfsrwy%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsz5b2c300023j6jd