Hello à tous,

Dans une précédente vidéo, nous avions découvert ensemble comment créer et configurer un site WordPress avec o2switch, cet hébergeur français qui propose des offres complètes et adaptées à tous les types de projets web.

Et aujourd’hui, nous allons aller encore plus loin en explorant les outils d’optimisation de performances proposés par o2switch pour transformer votre site en véritable fusée !

Car vous le savez, la vitesse de chargement d’un site web est cruciale, non seulement pour l’expérience utilisateur mais aussi pour le référencement. En effet, Google pénalise les sites lents et récompense ceux qui s’affichent rapidement, alors c’est pourquoi il est essentiel d’optimiser au maximum les performances de votre site, que ce soit un WordPress ou autre chose.

Vous cherchez les couleurs et polices idéales pour votre site web ? Avec Realtime Colors, vous allez pouvoir choisir très vute puisque cet outil ingénieux distribue vos teintes sur un vrai site, ce qui permet de rendre tout ça beaucoup plus concret.

Fini les palettes avec lesquelles il est difficile de se projeter puisqu’en quelques clics, vous obtiendrez votre identité visuelle sur mesure, prête à être exportée. Realtime Colors cartonne aussi sur Figma, où son plugin compte plus de 19 000 aficionados.

Bref, une fois sur le site, commencez par choisir deux couleurs neutres pour le texte et le fond. Ensuite, choisissez vos teintes primaires et secondaires (pour les CTAs et sections importantes, puis les boutons et encarts moins cruciaux). Enfin, ajoutez une touche finale avec une couleur d’accentuation qui viendra rehausser images, liens, etc.

Et voilà, en quelques instants, vous avez votre combo couleurs et polices parfaitement assorti et harmonieux, sans prise de tête ! Plutôt cool non ?

Et si le résultat vous botte, hop, cliquez sur « Exporter » pour récupérer les CSS, les Tailwind, le code custom, les shades, gradients…etc. Et petit bonus qui a son importance : Realtime Colors intègre aussi un vérificateur de contraste pour s’assurer que vos textes seront toujours lisibles.

Bref, si vous en avez assez de galérer pour habiller votre site et désirez un rendu professionnel sans effort, foncez sur Realtime Colors. Merci Lorenper pour cette super découverte !

Si vous codez vous-même votre site web et que vous avez envie d’ajouter un peu de fiesta, de bonne humeur et de célébration à celui-ci, j’ai la lib qu’il vous faut.

Cela s’appelle Canvas Confetti et ça permet d’ajouter en animation de confetti, d’émoji ou de neige à vos pages web.

Pour l’installer, rien de plus simple:

npm install canvas-confetti

Importez ensuite la bibliothèque Canvas Confetti dans votre fichier JavaScript où vous souhaitez utiliser l’animation du confetti comme ceci :

import confetti from 'canvas-confetti';

Pour lancer l’animation du confetti, appelez la fonction confetti() sans paramètres ou avec des options personnalisées. Voici un exemple de lancement de l’animation par défaut :

confetti();

Et voici un exemple de lancement de l’animation avec des options personnalisées :

confetti({
  particleCount: 150, // Nombre de confetti à lancer
  spread: 180, // Angle maximal de dispersion des confettis
  startVelocity: 30, // Vitesse initiale des confettis
  origin: {
    x: Math.random(), // Position initiale aléatoire des confettis sur l'axe horizontal
    y: Math.random() - 0.2 // Position initiale légèrement plus élevée sur l'axe vertical
  },
  colors: ['#ff0000', '#00ff00', '#0000ff'], // Couleurs des confettis
  shapes: ['square', 'circle', 'star'], // Formes des confettis
  scalar: 2 // Taille des confettis
});

Pour réinitialiser l’animation du confetti et effacer tous les confettis en cours d’animation, utilisez la méthode confetti.reset() :

confetti.reset();

Si vous souhaitez limiter l’espace sur votre page où les confettis apparaissent, vous pouvez utiliser un canvas personnalisé. Pour cela, créez un élément <canvas> dans votre HTML et appelez la fonction confetti.create() en lui passant l’élément <canvas> et des options globales facultatives :

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const myConfetti = confetti.create(canvas, { // Options globales facultatives
  resize: true, // Permet de redimensionner le canvas en fonction de la fenêtre
  useWorker: true // Utilise un web worker pour le rendu du confetti
});

myConfetti({ // Options personnalisées
  particleCount: 100,
  spread: 160
  // Autres options personnalisées
});

Enfin, si vous souhaitez créer des confettis personnalisés à partir d’une forme SVG ou d’un texte, utilisez les méthodes confetti.shapeFromPath et confetti.shapeFromText :

const pathShape = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' }); // Forme SVG

const textShape = confetti.shapeFromText({ text: '🐈', scalar: 2 }); // Texte personnalisé

confetti({
  shapes: [pathShape, textShape],
  scalar: 2
});

Le mieux reste d’aller faire un tour sur la page de démo qui comporte également des exemples d’intégration.