Forem: Garrone Joseph

What do I expect from my i18n library

Garrone Joseph — Wed, 08 Jun 2022 02:11:03 +0000

I want true type-safety, If I forgot something I want to be warned about it at compile time. I want to be guided by intelisence through and through so I can focus on my content.
I want to be able to explicitly fallback to English when I can't translate myself.
I want it to be easy for non-tech peoples to provide missing translations.
I want to be able to use React components and involve JS logic in my translations.
I want the language to default to the browser preference.
I want the language preferences to be persistant across reloads.
SEO: I want to let Google know that my website is available in multiple language.
I want all this to work with server side rendering (if I need to).
I want to be able to change the language of my app by adding ?lang=xx to the URL without involving my routing library.

I tried to create a library that checks all the boxes, I called it i18nifty.

Bundle environment variables in create-react-app at launch time (not build time)!

Garrone Joseph — Sat, 19 Feb 2022 17:09:07 +0000

Motivation

Create-react-app supports environment variable but they are bundled at build time when yarn build is run.

If we want to change anything like the URL of the backend the app should connect to, we have to rebuild, we can't ship customizable Docker image of our CRA apps.

The solution would be to be able to do:

 docker run --env FOO="xyz" my-org/my-create-react-app

Then access FOO:

In the code like process.env["FOO"]
In public/index.html like <title>%FOO%</title>

cra-envs does just that, in a secure, performant and type safe way.

Features

✅ No impact on the startup time.
✅ No impact on the Docker image size.
✅ Require no network connection at container startups.
✅ Secure: It only injects the envs declared in the .env file.
✅ It works like you are already used to. It just changes when the envs
✅ EJS support in public/index.html (few peoples knows). This enables for example to conditionally preload one font or another
✅ (Optional) Type safe: An env getter is generated so you know what envs are available are injected.

Usecase example

Onyxia-web is a create-react-app distributed as a Docker image.

Sysadmins that would like to deploy Onyxia on their infrastructure can simply use
the official Docker image and provide relevant environnement variable to adust the theme/branding of the website to their usecase.

Here are two deployment example:

^{Click on the social media preview to access the websites}

Documentation

This is the link to the repo: https://github.com/garronej/cra-envs

Find 👉here👈 a demo setup of:

cra-envs + create-react-app + TypeScript + Nginx + Docker

Use environment variables in create-react-app projects

Garrone Joseph — Wed, 22 Dec 2021 05:36:39 +0000

cra-envs is a module that help you safely bundle server environment variables into statically served React SPA.

Motivation

We want to be able to do docker run --env FOO="xyz" my-org/my-create-react-app
then access FOO in the app like process.env["FOO"].

Create react app provides no official way to inject environment variable from the server into the page.

When you run yarn build create react app does bundle all the variables prefixed by REACT_APP_
and expose them under process.env (see here).

The problem, however, is that you likely don't want to build your app on the server.

For this use case the CRA team suggests to introduce placeholders in the public/index.html
and do the substitution on the server before serving the app. This solution involves a lot of hard to maintain scripting.

This module abstract away the burden of managing environment variable injection as well as providing a type-safe way
to access them in your code.

makeStyles is dead, long live makeStyles!

Garrone Joseph — Mon, 11 Oct 2021 10:54:20 +0000

Material-ui decided to deprecate the hook API in v5 in favour of the styled API.

I worked with them to provide an alternative under the form of a third party module for people who prefers JSS over styled. Ref.

It's mentioned in mui's migration guide from v4 to v5.

It also features a, type-safe by design, version of the withStyles HOC.

Checkout tss-react

tsafe: A new assertion function for TypeScript

Garrone Joseph — Wed, 29 Sep 2021 15:41:30 +0000

Three GIFs to convince you that you need tsafe in your life:

Assert thing you know are true, get runtime error if you where wrong:

Test the type definitions of your APIs:

Make TypeScript believe whatever you say:

Here is the repo it you want to learn more.

Keycloakify: Create Keycloak themes using React

Garrone Joseph — Mon, 12 Apr 2021 18:16:24 +0000

Keycloakify is a build tool that aims at making the creation of custom Keycloak themes as straightforward as possible.

Keycloak provides theme support for web pages. This allows customizing the look and feel of end-user facing pages so they can be integrated with your applications.
It involves, however, a lot of raw JS/CSS/FTL hacking, and bundling the theme is not exactly straightforward.

Beyond that, if you use Keycloak for a specific app you want your login page to be tightly integrated with it.
Ideally, you don't want the user to notice when he is being redirected away.

Trying to reproduce the look and feel of a specific app in another stack is not an easy task not to mention
the cheer amount of maintenance that it involves.

Without keycloakify, users suffers from a harsh context switch, no fronted form pre-validation:

Wouldn't it be great if we could just design the login and register pages as if they were part of our app?

Here is keycloakify for you 🍸

With keycloakify:

NOTE: No autocomplete here just because it was an incognito window.

Ultimately the build tool Generates a Keycloak theme

If you already have a Keycloak custom theme, it can be easily ported to Keycloakify.

Checkout Keycloakify here

react-envs

Garrone Joseph — Tue, 16 Mar 2021 21:52:41 +0000

Moved to: cra-envs

A GitHub repo template featuring automation that makes it pretty darn easy to publish and maintain grade A NPM modules.

Garrone Joseph — Sat, 16 May 2020 12:56:06 +0000

ts_ci

This template automates the boring and tedious tasks of:

Filling up the package.json
Setting up Typescript.
Writing a README.md with decent presentation and instructions on how to install/import your module.
Testing on multiples Node version before publishing.
Maintaining a CHANGELOG.
Publishing on NPM and creating corresponding GitHub releases.

Good stuff that comes with using this template:

No sources file are tracked on the default branch.
Shorter specific file import path. import {...} from "my_module/theFile" instead of the usual import {...} from "my_module/dist/theFile"
CDN distribution for importing from an .html file with a <script> tag.
A branch latest always in sync with the latest release.

EVT: A new EventEmitter for Deno ( and every other JavaScript runtimes )

Garrone Joseph — Wed, 15 Apr 2020 02:55:53 +0000

https://evt.land

Disclaimer: Although EVT is a marked improvement over EventEmitter it can't compete in teme of feature scope with RxJS yet.
There are important operators such as swichMap, mergeMap, debounceTime and others that do not have an equivalent in EVT.
However, EVT has two main things going for it already:

It allows performing filter, map, and scan in a single operation which makes the code much less verbose and enables typescript to seamlessly infer what is going on.
It is more accessible, the API is close to EventEmitter which allows getting started quickly and progressively leverage the more advanced features. Any feedback much appreciated