Un univers assez intrigant avec texture de planètes et autres effets, jouez un peu avec et observez ses réactions…
Détecter si un élément est dans le viewport avec jQuery
Une fonction très simple qui vous permettra de déclencher des événements au moment où ils sont dans la partie visible de la fenêtre du navigateur.
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).on('resize scroll', function() {
if ($('#Something').isInViewport()) {
// do something
} else {
// do something else
}
}
L’importance du CLS
Comprendre l’unité “fr” en css
Quand on travaille avec la fonction “grid” ou “flexbox”, l’unité “fr” (fraction) est fort utile, je vous laisse consulter cet excellent article qui pourra vous aider à mieux comprendre comment l’utiliser.
Voici :not() …. une pseudo-class qui s’avérera très pratique.
A l’heure d’écrire ces lignes, il est peut-être encore un peu tôt pour l’utiliser en production, le site caniuse.com indique une implémentation encore très récente (jan-sept 2021) sur les navigateurs courants. Mais le fait de pouvoir exclure divers éléments, et pas que des classes ou autre sélecteurs, sera probablement très pratique.
Le site css-tricks vous en expliquera toutes les subtilités.
Un petit tour sur ce codepen pour tester tout cela pourra également être utile.
Créer un simple module sous Joomla 4
Quelques infos importantes si vous désirez créer vos propre modules
https://docs.joomla.org/J4.x:Creating_a_Simple_Module/fr
Joomla! 4 comment charger ses propres fichiers js et css
Joomla 4 n’intègre plus par défaut jquery. La façon d’intégrer un fichier externe js ou css a également changé. Voici comment procéder:
dans le fichier montemplate/joomla.asset.json
ajoutez chaque fichier dans l’objet json comme par exemple
{
“name”: “template.nomduscript”,
“description”: “Add the gsap library”,
“type”: “script”,
“uri”: “gsap-public/minified/gsap.min.js”,
“dependencies”: [
“template.active” (si ce fichier est dépendant d’un autre spécifiez-le ici)
]
},
si un fichier doit être chargé après un autre, spécifié ce dernier dans dans “dependencies”
Petite exception pour charger jQuery qui fait encore partie de Joomla mais n’est plus chargé d’office, vous pouvez simplement ajouter cette ligne dans la surcharge que vous aurez créé
\Joomla\CMS\HTML\HTMLHelper::_(‘jquery.framework’);
Joomla 4 est livré avec la librairie Bootstrap 5. On pourra intégrer séparément chaque composant Javascript de la manière suivante en indiquant dans le premier paramètre le type de composant et dans le deuxième un sélecteur.
\Joomla\CMS\HTML\HTMLHelper::_(‘bootstrap.alert’, ‘.alert’);
Les options peuvent être configurées avec le troisième paramètre optionnel (un tableau):
\Joomla\CMS\HTML\HTMLHelper::_(‘bootstrap.carousel’, ‘.carousel’, [‘slide’=>’carousel’]);
ensuite dans montemplate/index.php, appeler le “name” du fichier comme ce qui suit
$wa->usePreset(‘template.cassiopeia.’ . ($this->direction === ‘rtl’ ? ‘rtl’ : ‘ltr’))
->useStyle(‘template.active.language’)
->useStyle(‘template.user’)
->useScript(‘template.user’)
->useScript(‘template.nomduscript’)
->addInlineStyle(‘:root {
–hue: 214;
–template-bg-light: #f0f4fb;
–template-text-dark: #495057;
–template-text-light: #ffffff;
–template-link-color: #2a69b8;
–template-special-color: #001B4C;
}’);
Des effets sur les textes avec javascript
Quelques effets intéressants si vous désirez “travailler” vos titres, beaucoup de ces effets utilisent Greensock.
Min, max, clamp!
Des fonctions très sympathiques pour gérer la taille de vos typo selon la taille de l’écran.
(attention tout de même, ces fonctionnalités sont assez récentes et sont uniquement prises en charge par les navigateurs récents)
Pug html
Vous désirez optimiser l’écriture de votre code html, Pug pourrait vous être utile. Pug est un outil de templatage qui permet de générer du code HTML en compilant via une fonction Javascript.
L’utilisation de balises n’est plus nécessaire, grâce à un système d’indentations. Les classes et les id sont définis par des raccourcis, respectivement “.” et “#”.
Un des avantages de Pug réside également dans les nombreuses fonctionnalités qu’il offre: possibilité de définir des variables, d’ajouter de petits éléments de code comme des éléments de logique de base (if, each, unless…). On peut en outre écrire du JS directement depuis le fichier .pug, qui sera converti en page HTML.
Plug nécessitera un apprentissage, ne conviendra pas à tous les projets, mais il est toujours intéressant d’être au courant des technologie à disposition.
https://www.sitepoint.com/a-beginners-guide-to-pug/
https://pugjs.org/api/getting-started.html