Au final, j'ai opté pour le Masonry with flexbox and minimal js que tu as posté Raphael.

J'ai bien pris le temps de le configurer puis de l'intégrer avec mon application de reviews. J'ai commencé par le passé en 4 colonnes, puis par la rendre un peu plus sexy avant d'y intégrer les data des commentaires qui sont appelées via le framework vue.js. J'ai également pris le temps de bosser un peu le JavaScript (même si je ne sais pas le coder) pour avoir un nombre de colonne différent en fonction de la taille de l'écran.

En revanche, je bloque sur un point. La hauteur des éléments flexibles. Mes blocs de commentaire auront une hauteur aléatoire en fonction de leur contenu (texte, photo, etc). Hors sur le code Masonry with flexbox and minimal js, la hauteur de chaque .block est défini dans la partie html :
<div class="block" style="height:430px;">

Si l'on supprime cette hauteur, chaque .block est étiré pour occupé l'intégralité de l'espace horizontal. On se retrouve donc avec des .block empilé ligne par ligne, les un au dessus des autres comme ici : Masonry Flexbox + JS (sans hauteur de bloc)

Une idée de comment résoudre ce problème, qui rend ce script inutilisable dans mon cas ?

Merci d'avance !
Modifié par Loath (16 Sep 2019 - 22:42)
Bonjour,

Tout d'abord desolé de répondre que maintenant, mais j'était à fond sur le projet.
Concernant mon 1er problème, je me suis pas tro cassé la tête j'ai tout simpelemnt modifié le titre de la colonne "titre" en "titre_annonce". Je connais les tables de jointures mais j'avou avoir l'habitude (mauvaise) de procéder comme cela.

Pour mon deuxième problème je vais suivre tes recommandations Jean-Pierre-Bruneau et je vous ferais un retour.

En vous remerciant Smiley cligne
Salut

Extraits de https://developer.mozilla.org/fr/docs/Web/HTML/Element/script

async

mdn a écrit :
Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet.
Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est async="false") lors de l'analyse du document HTML.

Les scripts insérés dynamiquement (via document.createElement()) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer async="false".


defer

mdn a écrit :
Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement DOMContentLoaded. Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet. Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement async=false. Les scripts qui possèdent un attribut defer seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.

Les scripts qui utilisent l'attribut defer empêche le déclenchement de l'évènement DOMContentLoaded tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.


Personnellement, tous les scripts externes sont dans le HEAD avec l'attribut defer seulement. Mon script est toujours dans un module qui a l'attribut defer par défaut. Exemple :

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/fr.js"></script>
<script defer src="https://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.8.5.js"></script>

<script type="module" src="{{dvp_js}}"></script>


Nota bene : src="{{dvp_js}}" est une écriture comprise par le serveur Flask (Python)

Le squelette de mon module principal est :

window.document.addEventListener('DOMContentLoaded', ev => {
    // le DOM est construit, la page web n'est pas visible
    moment.locale('fr');
    console.log(`DOM ready : ${new kDvjhDate()}`);

    // début code du test

    // fin code du test

}, {
    capture: false,
    passive: true,
    once: false
});

window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);

    // début code du test


    // fin code du test

    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});
Bonjour,
Je me permets de vous solliciter car, dans le cadre de mes études, il m’est donné la possibilité d’interviewer quelqu’un travaillant dans l’informatique. Etant en première année de DUT informatique et passionné par les métiers du web, je me suis dit qu’il serait plus judicieux et intéressant de réaliser cet interview dans ce domaine.

Dans l’idéal, cet interview serait filmé afin de pouvoir en faire une petite vidéo qui sera ensuite visionné lors de nos cours, et permettra ainsi de faire découvrir votre métier a l’ensemble de mon groupe. Il est néanmoins possible de réaliser cet interview par visio-conférence ou autre outil de ce genre. L’interview sera à réaliser dans quelques semaines et comportera quelques questions sur votre parcours, votre expérience, vos ambitions ou encore votre orientation étant plus jeune.

S’il vous est impossible d’accéder à ma requête, je vous prie de bien vouloir me conseiller, m’orienter vers quelqu’un qui pourrait le faire et je vous remercie par avance de l’intérêt que vous avez porté à ma demande. N’hésitez pas à me recontacter pour plus d’informations.
Cordialement,
Lenny
Bonjour,

veux-tu aérer le code pour chaque ligne, qu'elle ait du code ou vide (ça c'est l'interligne) ou bien seulement quand elle est vide (avec une chasse fixe / monospace ça va pas être possible).
Raphaël a trouvé https://github.com/adobe/brackets/issues/11141 pour augmenter l'interligne.

Perso (avec Atom) je zoome un peu, 1 ou 2 crans de Ctrl-+ (retiens de combien tu zoomes si jamais il n'y a pas de remise à zéro Smiley biggol Smiley rolleyes )
bonjour
j'aimerai vos conseils pour optimiser la rapidite de mes pages notamment pour 3 scripts

widgets facebook
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v4.0"></script>

widgets twitter
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

et google
<script async src="https://www.googletagmanager.com/gtag/js?id=xx-xxxx"></script>

ils sont tous les 3 asynchrones et celui de facebook est note defer en plus

j'ai tout mis en bas de mes pages, est-ce une bonne pratique ou bien a-t-on interet à les remonter dans la page pour un chargement globale plus rapide?
merci
Modifié par nantais (16 Sep 2019 - 17:51)
Salut à tous et merci pour vos réponses !

Je vais essayer d'être plus précis. Mea culpa. Oui, ce sont les fonctions PHP MySQL qui sont absolètes depuis PHP 5.5.0, pas la base de données ... je me comprenais Smiley smile .

Alors pour ce qui est de ma question :

j'ai remplacé quelques requêtes MySQLI procédural par des requêtes PDO et ça marche très bien. [ select / insert/ create table ]. J'ai envie de remplacer toutes les requêtes MySQLI procédural par PDO sans pour cela réécrire mon code procédural.

Est-ce qu'il y aurait un risque dû à cette manière de faire ?

Merci encore
Il aura besoin de tout réécrire car il a écrit son code avec les fonctions Mysqli. Smiley cligne

Je le redis car on digresse que ce n'est absolument pas une bonne raison de réécrire son code. La philosophie du code ça se décide en amont, pas en milieu ou fin de projet.

D'autre part pour un projet qui court depuis aussi longtemps je pense qu'il faut sérieusement songer à aller tout droit vers la fin. Après tout dépend si on souhaite apprendre ou terminer son projet.
Raphael a écrit :

Hello,

Je comprends mieux pourquoi nous avons reçu, sur notre email général du forum un mail qui nous donne ouvertement tous les accès et mots de passe à un compte FTP.

Je pense que denwag67112 a dû confondre les Messages Privés et notre boîte mail. Je l'ai prévenu que le contenu de son envoi n'était pas parvenu à la bonne destination Smiley cligne


Ah merde ! ça m'a bien fait rire Smiley roflol
Modifié par JENCAL (16 Sep 2019 - 16:42)
Jean-Pierre-Bruneau a écrit :
Bien plus de réponses ni aux messages privés, ni ici, alors une après-midi de bénévole, perdue ! il fallait le dire.

Hello,

Je comprends mieux pourquoi nous avons reçu, sur notre email général du forum un mail qui nous donne ouvertement tous les accès et mots de passe à un compte FTP.

Je pense que denwag67112 a dû confondre les Messages Privés et notre boîte mail. Je l'ai prévenu que le contenu de son envoi n'était pas parvenu à la bonne destination Smiley cligne
Bien plus de réponses ni aux messages privés, ni ici, alors une après-midi de bénévole, perdue ! il fallait le dire.
Bref tu as en prime des blocages sur

14:00:35 Warning:  Retry after error -4 (Incorrect length (8772 Bytes, 192181 expected)) at link moto.club.amis.alain.free.fr/images/manif_strasbourg_1984.jpg (from moto.club.amis.alain.free.fr/)
14:00:35 Warning:  Retry after error -4 (Incorrect length (6503 Bytes, 112235 expected)) at link moto.club.amis.alain.free.fr/images/moto_accueil_1.gif (from moto.club.amis.alain.free.fr/)
14:27:23 Warning:  Retry after error -4 (Incorrect length (12317 Bytes, 192181 expected)) at link moto.club.amis.alain.free.fr/images/manif_strasbourg_1984.jpg (from moto.club.amis.alain.free.fr/)
14:27:23 Error:  "Not Found" (404) at link moto.club.amis.alain.free.fr/images/buttonB.gif (from moto.club.amis.alain.free.fr/mcca_sommaire.htm)
14:27:23 Error:  "Not Found" (404) at link moto.club.amis.alain.free.fr/images/buttonC.gif (from moto.club.amis.alain.free.fr/mcca_sommaire.htm)
15:25:30 Error:  "Not Found" (404) at link moto.club.amis.alain.free.fr/mot_de_passe.htm (from moto.club.amis.alain.free.fr/mcca_sommaire.htm)


Tu vois on avait bossé pour toi mais bon Smiley confused
Bonjour all Smiley smile

je me permet de post sur Alsa car je suis dev front en alternance et j'ai beaucoup de mal a me repérer dans mon code si je met pas plusieurs ENTER entre les ligne ce qui est pas cool pour l'indentation du code.. du coup j'aimerais savoir si quelqu'un qui dev sur l'éditeur de code BRACKETS pouvais me renseigner sur comment regler l'espace enter les ligne comme sa je met que un seul enter et il y a beaucoup d'espace et quand mes collegue recupere mon code chez eux tout est bien indenter Smiley smile

Merci d'avance
Modifié par Lucrampro (16 Sep 2019 - 16:46)
bacasable a écrit :


Concernant le fait d'utiliser des objets plutôt que des fonctions c'est une question de préférences. Il n'y a pas de mauvaise manière.


Je tic sur ta phrase.

Il y a BEAUCOUP de mauvaise manière dans le développement d'un application, encore plus en PHP.

Quand tu développe en procédural, la maintenance est horrible. la POO n'a pas était inventé pour rien Smiley smile

La programmation orientée objet ne permet pas de faire plus de chose que la programmation procédurale MAIS elle permet de mieux organiser son code et ça c'est un fait.

Tu as les notions d’encapsulation, d'héritage etc.. que tu n'a pas en procédural ce qui rallonge énormément de chose si tu veux faire quelque chose de sécure / maintenable

Coté POO il y a aussi beaucoup de mauvaise manière également, faut pas croire... mais dans l’ensemble c'est mieux à tous les points de vue (sauf performance normalement qui est la même.)
25 Dernières réponses