Johan PetrikovskyDéveloppeur frontend
Épreuve n° 1 · Toulouse · 5 novembre 2026 developpeur-web.tech

Johan Petrikovsky · Développeur frontend senior · Toulouse, depuis 2012

Des interfaces rapides, lisibles, trouvables.

Sites à fort trafic, outils métier, expériences interactives : je construis des interfaces qui se chargent vite, se lisent sans effort et se trouvent. Cette page en est l'épreuve.

Plaques
papier, rouge
Trame
45° et 15°
Calage
100 %

Du balisage au pixel

Un navigateur compose une page comme un imprimeur tire une épreuve : en passes successives, chacune contrôlée.

  1. Balisage · Composition

    Le contenu existe avant le script.

    Tout le texte, les liens et le contact sont dans le HTML servi. Un robot, un lecteur d'écran ou un navigateur sans JavaScript lisent la même page.

  2. Style · Imposition

    La mise en page tient seule.

    Grille, typographie et focus sont en CSS. Les animations s'ajoutent par-dessus : elles ne cachent jamais un contenu en attendant un script.

  3. Mise en page · Calage

    Rien ne bouge à l'arrivée.

    Chaque boîte connaît sa taille avant les images et les polices : le texte ne saute pas sous le doigt. Décalage visé : 0,02 au plus.

  4. Peinture · Encrage

    Ce qui s’affiche coûte ce qu’il doit.

    Images en AVIF à dimensions déclarées, polices réduites aux caractères utiles, aucune vidéo d’arrière-plan.

  5. Composition des calques · Tirage

    Les effets arrivent en dernier.

    Les effets graphiques de cette page se chargent après le contenu, ne dessinent que ce qui est visible et s'arrêtent hors de l'écran. Sans eux, rien ne manque.

Essais

Six projets livrés : le problème, les contraintes, les décisions. Survolez une ligne : elle se cale.

  1. 01 SAFTI.fr Refonte d'architecture, SEO 2022 Next.js · TypeScript · Tailwind · Jest
  2. 02 Omega Lead frontend, outil métier 2024 React · TypeScript · Storybook · Leaflet
  3. 03 Draw me a Sheep Développement complet, WebGL et GSAP 2024 Astro · React · Sanity · WebGL · GSAP
  4. 04 Bien Estimer SEO, plan de marquage GA4 2024 Next.js · SEO · GA4
  5. 05 ALS Action Canada Refonte de templates 2024 Gatsby · React · WordPress headless
  6. 06 Join SAFTI Full-stack, multilingue 2023 Sulu CMS · PHP · TypeScript · Tailwind
Illustration de l'essai SAFTI.fr : maisons et repères de carte en trame, un repère rouge, une barre de recherche vide
Fig. 01 · illustration générée, pas une capture du siteÉpreuve en trame à 45° et 15°

Essai 01 · 2022Next.js · TypeScript · Jest

Refondre un site d’annonces sans perdre son trafic

Problème
Un site d'annonces immobilières dont le trafic dépend du référencement naturel, à faire évoluer vers une architecture plus moderne.
Décisions
Montée de version de Next.js vers l'App Router, optimisation technique du SEO, tests unitaires avec objectifs de couverture atteints, suppression des code smells remontés par SonarQube.
Résultat
Une fonctionnalité proposée et développée a fait passer la note Trustpilot de 2,1 à 4,8.

Contrôle, en direct

Au bas de chaque feuille, l'imprimeur mesure une gamme de contrôle. Ici, ce sont les mesures de cette page, prises par votre navigateur.

01 Poids transféré
n/d
02 Requêtes
n/d
03 JavaScript
n/d
04 Plus grand affichage
n/d
05 Décalage visuel
n/d
06 Interaction la plus lente
n/d
HTML
n/d
CSS
n/d
JavaScript
n/d
Polices
n/d
Images
n/d

Valeurs de cette page, maintenant. "n/d" : mesure indisponible (API absente ou JavaScript désactivé).

Performance

Temps de réponse serveur, poids des pages, rendu, suivi en production.

Comment réduire le TTFB

SEO technique

Rendu serveur, données structurées, maillage, migrations sans perte de trafic.

Le rôle des développeurs dans le SEO

Accessibilité

Clavier, focus visible, mouvement réduit, composants qui disent ce qu’ils font.

Les composants Tooltip ne devraient pas exister

Architecture

Applications React typées et testées, cache et rendu Next.js maîtrisés.

Cache handler personnalisé pour Next.js 16

À propos

D'abord l'agence, maintenant le produit : quatorze ans de frontend.

Portrait de Johan Petrikovsky

Développeur depuis 2012, j'ai commencé en agence sur PHP et WordPress avant de me spécialiser dans l'écosystème JavaScript.

Je travaille aujourd'hui sur des sites à fort trafic et des outils métier, en alliant performance, SEO et expérience utilisateur. J'écris aussi sur ce que j'apprends.

Basé à
Toulouse
Depuis
2012
Disponibilité
Disponible
Écrit
71 articles publiés

« Chaque projet m’a permis d’apprécier sa réactivité, son engagement professionnel et ses compétences. »

Perrine Sini-Berthonneau, fondatrice du studio Les Cerises

« Toujours au fait des nouvelles techniques d’intégration, je le conseille à 100 %. »

Florent Pasquet, fondateur de l’agence web Spinat

Dernières notes

Un projet, une refonte, un audit de performance ? Signons le bon à tirer.

johan@developpeur-web.tech

Disponible LinkedIn GitHub