Skip to content

Instantly share code, notes, and snippets.

View mauriciomassaia's full-sized avatar

Mauricio Massaia mauriciomassaia

View GitHub Profile
@mauriciomassaia
mauriciomassaia / Inject cacertpem into Tinify.md
Created June 5, 2024 05:13
Postinstall script to inject cacert.pem into Tinify dependency

When our team tried to use tinify into a AWS Lambda function using Typescript the file node_modules/tinify/lib/data/cacert.pem wasn't copied properly so the transpiled code could not find it and Tinify would fail.

Thanks to @shannonhochkins and his postinstall idea to inject the value of cacert.pem into Client.js.

How to setup this script

  1. Create a scripts/ folder on your project.
  2. Create a file called tinify-inject-cacertpem.js inside the scripts/ folder.
@mauriciomassaia
mauriciomassaia / example-render-html-template.ts
Last active May 17, 2022 00:12
Render HTML template and replace items
import { renderTemplate } from './html-utils.ts'
const tpl = `
<div class="item">
<img class="tick-icon" src="./images/icons/tick.png" />
<span>{text}</span>
</div>`
const el = renderTemplate(tpl, { text: 'Hello world' }) as HTMLDivElement
document.body.appendChild(el)
@mauriciomassaia
mauriciomassaia / SpritesheetAnimation.ts
Last active February 24, 2022 06:57
Spritesheet Animation class with Typescript and TexturePacker
import { SpritesheetData } from './interfaces'
// generate a spritesheet (png + json) using TexturePacker data file format JSON (Array)
export class SpritesheetAnimation {
canvas: HTMLCanvasElement
protected image = new Image()
protected ctx: CanvasRenderingContext2D
private playing = false
private frameIndex = 10
@mauriciomassaia
mauriciomassaia / node-proxy-server.js
Last active October 5, 2021 07:38
Local node proxy server for development
const http = require('http')
const https = require('https')
const PROXY_PORT = 8080
const onRequest = (clientReq, clientRes) => {
console.log(`onRequest: ${clientReq.url}`)
clientRes.setHeader('Access-Control-Allow-Origin', '*')
clientRes.setHeader('Access-Control-Request-Method', '*')
@mauriciomassaia
mauriciomassaia / vanilla-boilerplate-threejs-gsap.html
Last active August 30, 2022 11:34
Vanilla Boilerplate / threejs + gsap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanilla Boilerplate / threejs + gsap</title>
<style>
html,
body {
@mauriciomassaia
mauriciomassaia / loadSVG.ts
Created August 12, 2021 22:57
Load SVG with Fetch + typescript
const parser = new DOMParser()
export const loadSVG = async (path: string): Promise<HTMLElement> => {
const response = await fetch(path)
const data = await response.text()
const svg = parser.parseFromString(data, 'image/svg+xml')
return svg.documentElement
}
@mauriciomassaia
mauriciomassaia / squoosh-process-images.js
Last active March 10, 2022 23:00
Using squoosh to optimise and resize images from a source folder to an output folder and keeps the same filename.
const { ImagePool } = require('@squoosh/lib')
const path = require('path')
const fs = require('fs-extra')
const srcFolder = path.join(__dirname, 'big')
const files = fs.readdirSync(srcFolder)
const outputFolder = path.join(__dirname, 'output')
fs.ensureDir(outputFolder)
fs.emptyDirSync(outputFolder)
@mauriciomassaia
mauriciomassaia / git-release.md
Last active November 15, 2021 23:37
Git Release

Create a new branch from development:

git checkout -b release/[new version here]

git checkout -b release/1.0.0

tip: run cat package.json| grep version to check the current version before creating the release branch.

Then bump the version [ major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id> ]

root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
@mauriciomassaia
mauriciomassaia / spritesheet-manager.js
Created February 6, 2020 23:42
Spritesheet Manager for Pixi.js
import { Loader, Spritesheet } from 'pixi.js'
const ssMap = new Map()
function parseMiddleware (resource, next) {
if (ssMap.has(resource.name)) {
const { baseTexture } = resource.texture
const item = ssMap.get(resource.name)
item.spritesheet = new Spritesheet(baseTexture, item.data)
item.spritesheet.parse(() => {