Bootstrap 5 est arrivé

yule · 9 Décembre 2020

Hello,

Pour ceux et celles qui adorent / utilisent ce framework, Bootstrap vient de de passer à la version 5 ! Passablement de changement et du job en perspective pour se mettre à jour...

Je m'étais un peux amusé avec la version alpha mais depuis hier ou aujourd'hui, la version v5.0.0-beta1 est sur la place ! A vos claviers.. Enfin ça va être mon cas, je vais profiter pour mettre à jour mon site (à la mano) avec celle nouvelle version qui en substance offrira ou pas

- Plus de bibliothèque jQuery (pageSpeed Insight devrait apprécier..)
- Introduction des propriétés personnalisées CSS (Ciaoooo IE !!!)
- Extension des grids (plus de classes et de dimensions à choix)
- Une doc toujours aussi précise et utile (bon j'aime tellement que ce n'est que mon avis..)

Du job en perspective pour s'adapter aux avantages qu'offre cette nouvelle mouture (il y a aussi des inconvénients mais bon.. )

Bonne bonne
Yule

rick38 · 9 Décembre 2020

Mais "beta" c'est pas une release finale, du moins de mon temps les beta c'était juste pour les testeurs

Je vois qu'ils ont ajouté des icônes SVG surtout.

nicodak · 9 Décembre 2020

yule a dit:
Enfin ça va être mon cas, je vais profiter pour mettre à jour mon site (à la mano)

salut, est-ce que vous utilisiez Bootstrap via un CDN ou hébergé sur votre propre serveur ?

Dans le cas d'une utilisation via CDN vous mettez à jour le lien positionné dans les balises <head> puis vous mettez à jour votre code ? C'est cela ?
Les classes restent les mêmes d'une version à l'autre je suppose ?

A bientôt.

passion · 9 Décembre 2020

C'est bien d'utiliser des frameworks mais comme tout open-source, bah ça change trop souvent !
Perso, je préfère héberger le code pour une question de stabilité et maintenabilité.

spout · 10 Décembre 2020

Cool on va pouvoir s'écarter un peu plus de jQuery.
J'attends la version Bootswatch pour mes sides projects.

@nicodak j'installe tous les packages JS avec npm et compilés avec Webpack.

rick38 · 10 Décembre 2020

Moi ça ne va pas me permettre d'enlever jQuery, j'en ai besoin pour mon code à moi

spout · 10 Décembre 2020

@rick38 progressivement, je remplace les libs par leur équivalent Vanilla JS.
Exemple: https://getdatepicker.com/4/ => https://flatpickr.js.org/

nicodak · 10 Décembre 2020

spout a dit:
Cool on va pouvoir s'écarter un peu plus de jQuery.
J'attends la version Bootswatch pour mes sides projects.

@nicodak j'installe tous les packages JS avec npm et compilés avec Webpack.

rick38 a dit:
Moi ça ne va pas me permettre d'enlever jQuery, j'en ai besoin pour mon code à moi

spout a dit:
@rick38 progressivement, je remplace les libs par leur équivalent Vanilla JS.
Exemple: https://getdatepicker.com/4/ => https://flatpickr.js.org/

Ce sont des membres comme vous dont j'ai besoin dans ma communauté... Mais ça viendra, avec le temps...
Merci pour les réponses (et pour les nouvelles questions que je me pose !

)

nb: trouver un tuto sur npm.

spout · 10 Décembre 2020

nicodak a dit:
Ce sont des membres comme vous dont j'ai besoin dans ma communauté...

@WebRankInfo est tjs en train de rembourser le crédit qu'il a dû faire

nicodak · 10 Décembre 2020

Plus sérieusement, j'ai un peu de mal à suivre comment sont gérés les CDN des différents Framework et Bibliothèques de développement.

Par exemple pour Bootstrap, pourquoi il y a tant de CDN différents ? Certains sont délivrés par JSdeliver, d'autres par MaxCDN, quelle est la différence ? Aucune ? ils délivrent le même contenu ?
Pourquoi il n'y a pas un CDN officielle Bootstrap fourni par Bootstrap ?

Le fait que ce soit open-source avec des ajouts/modifications par des centaines de développeurs, est-ce que tout le monde utilise, par exemple pour Bootstrap 4, exactement le même outil ?

spout a dit:
@nicodak j'installe tous les packages JS avec npm et compilés avec Webpack.

Ok les packages JS de Bootstrap vous voulez dire ? Il y en a plusieurs ?
Pourquoi les compiler ?

Merci pour vos éclairages.

spout · 10 Décembre 2020

nicodak a dit:
Par exemple pour Bootstrap, pourquoi il y a tant de CDN différents ? Certains sont délivrés par JSdeliver, d'autres par MaxCDN, quelle est la différence ? Aucune ? ils délivrent le même contenu ?

Concurrents qui se servent de ça pour faire leur pub. C'est les mêmes fichiers.

nicodak a dit:
Pourquoi il n'y a pas un CDN officielle Bootstrap fourni par Bootstrap ?

Ca coûte de l'argent, dans la doc ils mettent les exemples avec JSDelivr.

nicodak a dit:
Le fait que ce soit open-source avec des ajouts/modifications par des centaines de développeurs, est-ce que tout le monde utilise, par exemple pour Bootstrap 4, exactement le même outil ?

Oui la plupart, d'autres font leur propres bundles spécifiques.

nicodak a dit:
Ok les packages JS de Bootstrap vous voulez dire ? Il y en a plusieurs ?

Des milliers ! https://www.npmjs.com/

Les langages on chacun leur gestionnaire de dépendances :
- PHP: Composer
- Python: PyPI
- .NET: NuGet
- JS: NPM
- ...

nicodak a dit:
Pourquoi les compiler ?

https://medium.com/jsjitsu/webpack-à-quoi-ça-sert-et-comment-sen-servir-a5e4ecee8815

nicodak · 10 Décembre 2020

Merci pour toutes ces précisions spout

rick38 · 10 Décembre 2020

Perso je n'utilise pas de CND, je génère 1 fichier JS et 1 fichier CSS en y concaténant dedans toutes les librairies.
Ca évite d'ouvrir une connexion à un autre domaine, la résolution peut parfois prendre du temps théoriquement.

nicodak a dit:
Ce sont des membres comme vous dont j'ai besoin dans ma communauté...

Rachète WRI, en plus ça parle trop de seo ici et pas assez de dev, d'autant que Google a tué le seo alors que le dev est immortel.

nicodak · 11 Décembre 2020

rick38 a dit:
Rachète WRI, en plus ça parle trop de seo ici et pas assez de dev, d'autant que Google a tué le seo alors que le dev est immortel.

C'est surement pas dans mes moyens...

Mais je suppose que les dev qui trainent sur WRI on déjà leurs habitudes sur des forums dev : developpez.net, commentçamarche ou alsacréations, j'en oublie surement...
Ou encore sur les forums en anglais comme ceux de stackoverflow...

WebRankInfo · 11 Décembre 2020

rick38 a dit:
Rachète WRI

yule · 23 Décembre 2020

Hello,

Comme @rick38 je garde le tout chez moi , pas de CND.

Oui @rick38 je te l'accorde, c'est pas une version release finale, toutefois, je viens de refaire tout le front de mon site avec la version "Alpha", Je bug sur le toogle (version mobile) avec la version "Bêta" mais pour moi et mon utilisation , c'est pas trop grave, on dira surtout que mon site n'est plus accessible sur IE

pour le reste ç'est que cosmétique.

Chrome, Opéra, Mozilla et Edge ok (ça me suffit)

Je viens de faire un test avec Google Insight (mobile)

Bootstrap 4.5.3 pour mon index et selon l'image en backround qui se charge..==> de 88 à 93
Boostrap 5 (Alpha) pour mon index et selon l'image en backround qui se charge.. ==> 88 et 98 !

Version ordinateur, je flirt avec le max !

J'en ai donc profité de lui refaire une beauté : https://freejungle.me (on aime ou on aime pas
) mais sans jquery je ne peux qu'approuver.

De bonnes fêtes à vous tous !
Bonne bonne
Yule

nicodak · 23 Décembre 2020

yule a dit:
J'en ai donc profité de lui refaire une beauté : https://freejungle.me (on aime ou on aime pas
)

C'est propre ! L'effet smooth sur la barre de navigation lorsque l'on scroll rend bien, Je ne me souviens plus mais elle était colorée avant n'est-ce pas ? En tout le site est toujours aussi agréable à l'œil.
(Les background sont fait-maison ?)

yule a dit:
mais sans jquery je ne peux qu'approuver.

yule a dit:
Plus de bibliothèque jQuery (pageSpeed Insight devrait apprécier..)

Pourquoi ces remarques sur jQuery ? Il faut éviter de l'utiliser, il ralentirait les sites c'est ça ?
Merci !

yule · 23 Décembre 2020

nicodak a dit:
C'est propre ! L'effet smooth sur la barre de navigation lorsque l'on scroll rend bien, Je ne me souviens plus mais elle était colorée avant n'est-ce pas ? En tout le site est toujours aussi agréable à l'œil.
(Les background sont fait-maison ?)

Merci ! Oui elle était noir. (bonne mémoire !)
Pour les Backround, malheureusement pas (acheté en grande partie sur EnvatoMarket) prix correct...

S'agissant de Jquery, te connaissant, tu vas pas te suffire d'un mini résumé, dès lors, voici une belle explication ici

En substance, Un de ces changements majeurs sera la disparition de jQuery de Boostrap, au profit du framework Vanilla JS. Pour ceux qui ne le connaitraient pas, Vanilla JS est un framework orienté pour procurer la meilleure performance possible à l'exécution. Vanilla JS est extrêmement léger. C'est même, incontestablement, le plus léger framework JavaScript.

A+
Yule

NB: J'ai non plus pas assez de connaissances dans la prog, je suis autodidacte qui aime avoir les mains dans le camboui... Après si la réparation fonctionne, c'est une autre paire de manche.. Mais je table énormément sur la rapidité de mon site.. pour le reste et comme je vends rien, ça n'a pas d'importance

spout · 23 Décembre 2020

Hier j'ai fini de migrer mon premier site de Bootstrap 4 à Bootstrap 5, donc surtout de jQuery à Vanilla JS.

Pour faciliter la transition :

nicodak · 23 Décembre 2020

yule a dit:
S'agissant de Jquery, te connaissant, tu vas pas te suffire d'un mini résumé, dès lors, voici une belle explication ici

Merci pour le lien, même si tout ça me dépasse un peu (beaucoup) c'est intéressant. De ce que je comprends c'est une façon d'apurer Bootstrap en supprimant une couche qui apportaient des fonctionnalités qui peuvent être finalement gérées nativement par JS.

Pourtant Bootstrap 4 pouvait fonctionner sans jQuery déjà non ? (puisqu'en plus du CDN Bootstrap il fallait si besoin charger également le CDN jQuery)
Mais dans ce cas là Bootstrap avait moins de fonctionnalités, c'est cela ?

Donc c'est une mauvaise nouvelle pour jQuery parce que Bootstrap semble très populaire.

spout a dit:
Hier j'ai fini de migrer mon premier site de Bootstrap 4 à Bootstrap 5, donc surtout de jQuery à Vanilla JS.

C'est à dire qu'il a fallu réécrire les fonction jQuery en Vanilla ?

spout · 23 Décembre 2020

nicodak a dit:
Pourtant Bootstrap 4 pouvait fonctionner sans jQuery déjà non ?

Oui sauf certains composants (tabs, tooltip, ...)

nicodak a dit:
C'est à dire qu'il a fallu réécrire les fonction jQuery en Vanilla ?

Oui, mais assez simple dans l'ensemble.

Code:

$(function () {})
document.addEventListener('DOMContentLoaded', function () {})

$('#foobar')
document.getElementById('foobar')

$('.foobar')
document.querySelectorAll('.foobar').forEach(element => {})

$('#foobar').append('<p>Test</p>')
document.getElementById('foobar').insertAdjacentHTML('beforeend', '<p>Test</p>')

// etc

yule · 23 Décembre 2020

@spout j'ai vu aussi que tu as pris les icons de Bootstrap.. Tu en penses quoi pour rester dans du "léger.." ?

J'ai essayé icofont mais plus rien d'actualisé depuis 2018 et maintenant j'essaye lineicons mais à part la version payante, bof...

A+
Yule

spout · 23 Décembre 2020

@yule je n'ai pas comparé la taille, j'ai pris celles de Bootstrap au lieu de Font-Awesome parce que c'est intégré comme dans la version 2 (glyphicons) et qu'il y en a qd même 1200.

yule · 23 Décembre 2020

Ok merci @spout , je vais essayer à l'occase, mais avant, il faudra un peu plus d'icone fantaisiste