413n

Hooks for images

Hooks for saving the images signed URLs from Amplify with S3 in the IndexedDB and use it to avoid a request for each image fetch. This because Amplify and S3 even for public storages needs signed URL with the unauthenticated permission.

413n

React Content Loader Examples

Based on React Content Loader.

Navbar

const NavbarRightLoader = () => (
  <Skeleton width={360} height={40} uniqueKey="navbar-right">
 

413n

Create AWS Exports for Vercel

DISCLAIMER: Unfortunately this method is manual, but eventually needs to be done just the first time you create the Amplify Environment.

You need to have the aws-exports.js file (generated by Amplify) to do this process.

We're gonna use a Environment variable (in my case BASE64_AWS_EXPORTS) that will contain the aws-exports.js file content encoded in base64. The script will then decode it and create the aws-exports.js file.

The package.json needs to be changed so that this script will be created before the build.

413n

Auth

Using Amplify CLI 7.3.1.

Add preferred_username as attribute and disable case sensitive usernames

xxx = Auth name

Folder: amplify/backend/auth/xxx/ - Files: cli-inputs.json and ./build/parameters.json

 ...,

413n

/*
Reference https://stackoverflow.com/a/35559392
Ramda is needed for this sort to work! 
*/

// IMPORTS
import * as R from 'ramda';

// BACKGROUND
const a = [2,3,1,4];

413n

CSS Useful Tricks

Bottom Padding in Scrollable overflowing content

My workaround for fixing this bug in my project was (helpful when you want the children centered with margin: auto in a flex container if there is no scroll.):

.overflowing-container > *:last-child:after {
     display: block;
     height: 1rem; /* Match bottom padding */
     margin-bottom: -1rem; /* Move it outside */
     content: "";

413n

const fs = require('fs');
const readline = require('readline');
const stream = require('stream');

// Folder where all the icons are defined to be used
const inputIconsFile = './src/common/icons.template.js';
const outputIconsFile = './src/common/icons.js';

// Icon packages:
// - id: ID of the package (currently not used)

413n

const fs = require("fs");
const readline = require("readline");
const stream = require("stream");
const path = require("path");
const util = require("util");

// Folder where all locales in all files will be replaced
const srcFolder = "./path/to/folder/";
// Master locale file where it will take all the locales to replace
const localeFile = "./path/to/folder/"; //.po file