Skip to content

Instantly share code, notes, and snippets.

View maremarismaria's full-sized avatar
🍒
Cherry-picking

María Morales maremarismaria

🍒
Cherry-picking
View GitHub Profile
@maremarismaria
maremarismaria / StorageListener.ts
Created August 31, 2023 06:10
Triggering Custom Events with Web Storage API & TypeScript
enum StorageKey {
SESSION_STORAGE_KEY = "auth",
TEMP_SESSION_STORAGE_KEY = "temp_auth",
GET_SESSION = "get_session",
CLEAR_SESSION = "clear_session",
}
const triggerAction = (key: StorageKey) => {
localStorage.setItem(key, "indifferent");
localStorage.removeItem(key);
@maremarismaria
maremarismaria / LevelBar.tsx
Created August 7, 2023 14:42
[React][TSX][SVG] Animating a level bar: how to use refs for forcing React to re-render when the SVG defs are updated by the State
import * as React from "react"
export interface Props {
xpLevel: number,
xpNextLevel: number
}
export interface State {
animateLevelBar: boolean
}
@maremarismaria
maremarismaria / svg-summary.md
Last active March 4, 2022 12:15
A summary about SVG

📚 SVG summary

1. Introduction to SVG

1.1. What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format

1.2. Advantages

@maremarismaria
maremarismaria / front-end-testing-summary.md
Created March 4, 2022 08:45
Research about Front-End Testing

1. Testing Best Practices

Getting software to work is only half of the job. (See Robert C. Martin)

Introduction

The Golden Rule

"[...] when looking at test code it should feel as easy as modifying an HTML document and not like solving 2X(17 × 24) [...] allows the reader to get the grab instantly without spending even a single brain-CPU cycle [...]", @goldbergyoni

@maremarismaria
maremarismaria / README-Template.md
Created February 12, 2022 08:24 — forked from PurpleBooth/README-Template.md
A template to make good README.md

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

@maremarismaria
maremarismaria / coLog
Last active March 4, 2022 08:50
A pretty simple function for styling the console output
const coLog = (message: string, customStyle?: string) => {
const style = customStyle ?? `background: #204969; color: #FFF;`;
console.log(`%c ${message}`, style);
};
@maremarismaria
maremarismaria / branch-helper.js
Last active March 4, 2022 08:53
Just a Node CLI for generating branch names according to the git-flow convention
const clipboardy = require('clipboardy');
const inquirer = require('inquirer');
const questions = [
{
type: 'list',
name: 'branchType',
message: 'Branch type:',
choices: ['feature', 'hotfix', 'release'],
default: 0
@maremarismaria
maremarismaria / Colors.js
Last active March 4, 2022 10:15
[Just For Fun] A couple of JS lines for getting a Colors object, which contains a couple of functions for switching between color codes
/**
* Usages:
*
* Colors.parsers.hexadecimalToRgbRgba("ff", 0.2) // ff
* Colors.parsers.hexadecimalToRgbRgba("f5f5f5f5f5", 0.5) // rgba(245,245,245,0.5)
* Colors.parsers.hexadecimalToRgbRgba("ff00ff") // rgb(255,0,255)
* Colors.parsers.hexadecimalToRgbRgba("F00", .5) // rgba(255,0,0,0.5)
* Colors.parsers.hexadecimalToRgbRgba("#BADA55") // rgb(186,218,85)
*/
export const Colors = Object.freeze({