Skip to content

Instantly share code, notes, and snippets.

View jeromeabel's full-sized avatar

Jérôme Abel jeromeabel

View GitHub Profile

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

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:

Installation

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

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:

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.

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

rect403540

// 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})/;

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
jeromeabel / 0.responsive-images.md
Last active August 17, 2025 21:29
Responsive images with srcset and sizes attributes

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.

Adding an existing project to GitHub

Ref

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.

Astro Primer

Ref

INSTALLATION

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