marcelo-ribeiro

// Example: https://codepen.io/marcelo-ribeiro/pen/OJmVOyW

const accentsMap = new Map([
  ["A", "Á|À|Ã|Â|Ä"],
  ["a", "á|à|ã|â|ä"],
  ["E", "É|È|Ê|Ë"],
  ["e", "é|è|ê|ë"],
  ["I", "Í|Ì|Î|Ï"],
  ["i", "í|ì|î|ï"],
  ["O", "Ó|Ò|Ô|Õ|Ö"],

marcelo-ribeiro

const list = [
  { name: "Marcelo Ribeiro", short_name: "tchelo" },
  { name: "Leonardo Costa", short_name: "leo" },
  { name: "Victor Tanure", short_name: "vitrola" },
  { name: "Matheus Oliveira", short_name: "rary" }
];
let filteredList = [...list];
const searchProps = ["name", "short_name"];
let timeout = null;
const removeAccents = (text) => { return text; };

marcelo-ribeiro

import { useSlugify } from "./useSlugify";

const slugify = useSlugify();

console.log(slugify("São Paulo"));

marcelo-ribeiro

How to detect a click outside of an element with vanilla JavaScript

A simple way to detect a click outside of an element with vanilla JavaScript

A Pen by Marcelo Ribeiro on CodePen.

License.

marcelo-ribeiro

...
transform: {
  '^.+\\.(t|j)sx?$': [
    '@swc/jest',
    {
      jsc: {
        parser: {
          syntax: 'typescript',
          tsx: true,
          decorators: true,

marcelo-ribeiro

import api from 'api.js';

export default endpoint => ({
  get: (id = "") => api.get(`${endpoint}/${id}`),
  create: data => api.post(`${endpoint}`, data),
  update: ({ id, ...data }) => api.put(`${endpoint}/${id}`, data),
  patch: ({ id, ...data }) => api.patch(`${endpoint}/${id}`, data),
  delete: id => api.delete(`${endpoint}/${id}`),
  filterBy: params => api.get(`${endpoint}`, { params })
});

marcelo-ribeiro

const apiURL = "https://brasilapi.com.br/api";
const endpoint = `${apiURL}/cep/v2`;

/**
 * @typedef IPayload
 * @type {object}
 * @property {string} cep
 * @property {string} state
 * @property {string} city
 * @property {string} neighborhood

marcelo-ribeiro

const getColor = () => "red";

const color = getColor();

({
  red: () => alert("Vermelho"),
  blue: () => alert("Azul")
}[color]?.());

// OR

marcelo-ribeiro

const products = [
  {id: 1, title: "Trim Dress", category: "women", collection: ["new", "featured"]},
  {id: 2, title: "Belted Dress", category: "women", collection: ["featured"]},
  {id: 3, title: "Fitted Dress", category: "men", collection: ["new"]}
];

const categories = new Set(
  products.map(product => product.category)
);

marcelo-ribeiro

<select>
  <option>Afghanistan</option>
  <option>Akrotiri</option>
  <option>Albania</option>
  <option>Algeria</option>
  <option>American Samoa</option>
  <option>Andorra</option>
  <option>Angola</option>
  <option>Anguilla</option>
  <option>Antarctica</option>