jeromeabel

Use Case

I want to use Obsidian on my mobile device and share data with my Obsidian folder from my desktop computer

Desktop: Use Git For Backup

1. Create a Github Repository
2. Create a Token: Github.com > Settings > developer settings > Personal Token > Generate token classic (90days/Repo full control). Find a way to send it temporarily from your desktop to your mobile. You will need it after.
3. Clone on Desktop or add origin

mkdir repo
cd repo

jeromeabel

Create A React Form With React-Hook-Form & TypeScript - Guide

Let's build a form validating mechanism in React with React-Hook-Form, Zod and TypeScript. The use case is form to add an User, with different types of inputs : string, email, url, date, email.

More advanced example:

• https://codesandbox.io/p/sandbox/charming-hugle-pwx94z

Installation

Create a new project with Vite, React, Typescript, Zod and React Hook Form

jeromeabel

How to publish a React Typescript component on NPM with Vite

Let's say we are building a UI library with React and TypeScript. Our goal is to test and publish it on the npm registry.

Links:

• code: my-react-lib
• npm: @jeromeabel/my-react-lib

File structure

The idea is to create two folders: one for development (package) and the other for testing the import (client). I find it convenient to keep a minimal single-page web app (main.tsx, App.tsx) inside the package folder to test the components.

jeromeabel

Using React Context with Typescript - guide

In React, dealing with props might be too verbose and not efficient. An alternative is to use the React Context API. It is useful for sharing data between the app.

A practical example:

• Add an employee
• View a list of employees

jeromeabel

// Regexp patterns

const regexName = /^[A-ÿ]{2,}[A-ÿ\-\s]*$/;
const regexEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]{2,3})$/; // from mdn + fix
const regexNumber = /^[0-9]+$/; 
const regexDate = /([\d]+)([\-\./])([\d]+)([\-\./])([\d]+)|((Jan(|uary)|Feb(|ruary)|Mar(|ch)|Apr(|il)|May|Jun(|e)|Jul(|y)|Aug(|ust)|Sept(|ember)|Oct(|ober)|(Nov|Dec)(|ember))([\s\-])(|([\d]+){1,2}([\s\-]|\, ))([\d]+){4})/;

jeromeabel

Contact Form Guide - React / PHP

Steps to add validation and security

• Add a Captcha reCAPTCHA to prevent bots from submitting the form
• Add server-side validation to prevent malicious submissions or code injections
• Use a validation library to check that the fields are correctly filled in (for example, a valid email address or a valid telephone number).
• Avoid displaying sensitive information on the form (for example, not displaying the recipient's email address)
• Limit the number of submissions based on IP address (for example, allow no more than 5 submissions per hour).
• Sanitize user input to prevent code injection attacks (for example, using the filter_var() function to sanitize input).

jeromeabel

Responsive images

Aka "Do we need a PhD to add images on websites ?"

I focus here on reponsive images. Loading and accessibility topics are not detailed. For the purpose of the article, I've just used the <img> markup, but for real use cases, <picture> will fill all the needs.

Goal: to display elements consistently on screens with different densities

Setup

To test the following sections, you need to open Development Tools, and play with different screen sizes. Be aware that the browser keeps the last image in a memory cache, you should disable the cache or refresh the page to see your expected results.

jeromeabel

ARIA Modal

Ref

• Yogesh Chavan, How to trap focus inside modal to make it ADA compliant

Code

Used in my project FishEye

  // Handle Tab Event to stay in Modal Elements

jeromeabel

Adding an existing project to GitHub

Ref

• add_existing_project_to_git-md

Simple steps to add existing project to Github.

1. Create a new repository on GitHub.

In Terminal, change the current working directory to your local project.

jeromeabel

Astro Primer

Ref

• Astro Crash Course

INSTALLATION

• ✔ pnpm create astro@latest
• ✔ Answer: recommended+Typescript/strict+Git
• ✔ VsCode : extension Astro