html-css

[deft burrow]

si ça peut t'aider j'avais vu cette réponse et ça m'avait convenu quand je cherchais à faire un truc similaire : https://stackoverflow.com/a/20720935

[void anvil]

Merci @deft burrow j'vais y préter attention 😄

[silver orbit]

Salut je voulais savoir comment on met tout les écriture en blanc du site svp

[brave jay]

Avec color: white

[silver orbit]

Merci beaucoup

[void anvil]

J'arrive toujours pas à modifier mon svg en fonction du thème...

const themeBtn = document.querySelector(".btn--theme");
const navToggle = document.querySelector(".header__nav-toggle");
const navBar = document.querySelector(".header__nav");
const navLinks = document.querySelectorAll(".header__nav .header__link");
const dropdowns = document.querySelectorAll(
  ".header__nav .header__dropdown-menu"
);
const overlay = document.createElement("div");
overlay.classList.add("overlay");

// Obtient le thème actuel à partir de la mémoire locale ou de la palette de couleurs préférée de l'utilisateur.
function getCurrentTheme() {
  let theme = window.matchMedia("(prefers-color-scheme: light)").matches
    ? "light"
    : "dark";
  localStorage.getItem("snap.theme")
    ? (theme = localStorage.getItem("snap.theme"))
    : null;
  return theme;
}

// Charge le thème spécifié et met à jour l'interface utilisateur en conséquence
function loadTheme(theme) {
  const root = document.querySelector(":root");
  if (theme === "light") {
    themeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--clr-neutral-100)"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`;
  } else {
    themeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="var(--clr-neutral-100)" stroke="var(--clr-neutral-100)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78">
    </line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`;
  }
  root.setAttribute("color-scheme", `${theme}`);

}

// Bascule entre les thèmes clair et foncé lorsque l'on clique sur le bouton du thème.
themeBtn.addEventListener("click", () => {
  let theme = getCurrentTheme();
  if (theme === "light") {
    theme = "dark";
  } else {
    theme = "light";
  }
  localStorage.setItem("snap.theme", `${theme}`);
  loadTheme(theme);
});

// Charge le thème actuel lorsque le chargement de la page est terminé
window.addEventListener("DOMContentLoaded", () => {
  loadTheme(getCurrentTheme());
});

<a href="index.html" class="header__logo">
        <span class="visually-hidden">NBM</span>
        <svg class="logo-svg" width="84" height="27" aria-hidden="true"  xmlns="http://www.w3.org/2000/svg">
          <path d="M29.5,10.35v7.44h-3.4v-7.83c0-1.43-.98-2.32-2.14-2.32-1.4,0-2.29,1.03-2.29,2.41v7.73h-3.4V4.91h3.32v1.5c.54-.89,1.77-1.82,3.45-1.82,3.67,0,4.46,3.03,4.46,5.76Z"/>
          <path d="M32.06-.01h3.4V6.26c.32-.44,1.6-1.67,3.82-1.67,3.69,0,6.11,2.78,6.11,6.77s-2.61,6.75-6.3,6.75c-2.19,0-3.47-1.23-3.82-1.65v1.33h-3.2V-.01Zm6.6,15.12c1.92,0,3.3-1.43,3.3-3.72s-1.33-3.79-3.3-3.79-3.3,1.38-3.3,3.79c0,2.04,1.23,3.72,3.3,3.72Z"/>
          <path d="M65.73,17.79h-3.4v-7.71c0-1.53-.76-2.44-2.02-2.44s-2.09,.91-2.09,2.46v7.68h-3.4v-7.83c0-1.45-.74-2.32-1.99-2.32s-2.09,.91-2.09,2.44v7.71h-3.4V4.91h3.32v1.5c.47-.89,1.6-1.82,3.35-1.82,1.65,0,2.86,.74,3.52,1.92,.76-1.18,2.09-1.92,3.82-1.92,2.93,0,4.38,1.94,4.38,4.7v8.49Z"/>
        </svg>
    </a>

svg {
  display: block;
  height: 100%;
  overflow: visible;
  transition: var(--transition);
}

Sur le site que tu m'as passé je n'arrive pas à éxécuter leur solution qui n'est pas fonctionnel de mon côté et j'suis un peu perdu pour le coup.
J'ai pas l'habitude de faire du front c'est pas du tout ma spécialité donc je galère un peu, je m'en excuse

Merci

[deft burrow]

t'aurais moyen d'isoler la partie qui te pose problème sur codepen ?

[errant cypress]

hello, bon c'est avec Jquery mais je fais comme ça : $("#logosvg").attr("fill", lastTheme === "light" ? "#000" : "#fff");

[deft burrow]

si ce que lartaxx propose marche dans ce cas ça donne ça en js vanilla :

function switchTheme() {
  const svg = document.querySelector('.logo-svg')
  const lastAttr = svg.getAttribute('fill')
  svg.setAttribute('fill', lastAttr === "#000" ? "#fff" : "#000")
}

[void anvil]

Merci j’essaierai j’étais au travail je pouvais pas répondre

[supple crag]

Bonsoir, comment faire pour mettre les label a droite sans affecter la position de l'input

            <div class="from-group">
                <div class="civi-box">
                    <label id="coucou" for="nom">Nom</label>
                    <input type="text" id="nom"  placeholder="Nom" minlength="2" name="nom">
                </div>
            </div>
            <div class="from-group">
                <div class="civi-box">
                    <label id="coucou" for="email">Email</label>
                    <input  type="email" placeholder="Adresse e-mail" name="email">
                </div>
            </div>
            <div class="from-group">
                <div class="civi-box">
                    <label id="coucou" for="telephone">telephone</label>
                    <input required type="tel" placeholder="N° de telephone" name="Telephone">
                </div>
            </div>
            <div class="from-group">
                <div class="civi-box">
                    <label id="coucou" for="website">Website</label>
                    <input required type="url" placeholder="Website" name="website">
                </div>
            </div>

.civi-box{
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    display: flex;
    width: 150px;
}

#coucou{
    position: relative;
}

[brave jay]

Salut, tu peux le faire avec flex

[supple crag]

j’ai pensé à flex direction row mais je pense que ça va décaler mon input et c’est pas ce que je veux

[brave jay]

Sinon tu peux mettre t'es label en absolute mais c'est une mauvaise facon de faire, si tu donne une taille a t'es label ca sera plus chiant mais plus propre

[covert verge]

si tu veux vraiment, ces avec position sinon tu le fait responsive avec flex

[supple crag]

donc justement comment faire ?

[brave jay]

Tu définis une tailles à t’es éléments genre les label font 120px de large et les inputs 100%

[supple crag]

#coucou {
    position: relative;
}

.civi-box{
    align-items: center;
    text-align: center;
    display: flex;
}

.civi-box input{
    width: 150px;
}

j'ai fait ça et ça donne ça, presque ça, simplement l'input n'est plus au milieu

[brave jay]

Là tu fait les 2 choix en même temps 😄

[supple crag]

ah oups

le label n'est pas en absolute autant pour moi, il est en relative

[brave jay]

Fait un justify-content en flex-end

Et align-content*

[supple crag]

.civi-box{
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: flex-end;
    align-content:flex-end;
}

#coucou{
    position: relative;
}

.civi-box input{
    width: 150px;
}

j'ai fait les deux je crois au bon endroit et ça change rien

[brave jay]

Excuse (je me réveille) c’est aligne items…

[supple crag]

ok pas de soucis :

.civi-box{
    align-items: flex-end;
    text-align: center;
    display: flex;
    justify-content: flex-end;
    /* align-content:flex-end; */
}

@brave jay

[woeful summit]

Salut, quand tu utilises l'outil de dev tu peux montrer tes box ?

ça permet de directement identifier ou tu as le problème même si j'ai déjà une idée

[supple crag]

mes box ?

genre je les colorent ?

[woeful summit]

non non ^^ quand tu ouvre ton site sur ton navigateur tu as un outil de développement et quand tu passes ta souris dessus il t'affiche les "box" jsp si c'est vraiment ça le nom exact regarde mon screen :

Comme ça on voit directement ou est le problème

[supple crag]

comme ça ?

[woeful summit]

Oui voilà

bouge pas 2s

[brave jay]

Justify center il faut enfaite

[woeful summit]

.from-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .from-group .civi-box {
    display: flex;
    align-items: center;
  }

  .from-group label {
    margin-right: 10px; 
  }```

je crois je me suis pas trompé dans les noms essaye ça pour voir

[woeful summit]

nickel non ?

[supple crag]

j'ai testé ça les a bien mis sur le côté de l'input, simplement l'input ne reste pas au milieu, mais ton code est bien mieux que le mien

[woeful summit]

tu veux centrer les input et que le texte label s'adapte ?

[supple crag]

c'est ça

[woeful summit]

Ok envoie ton css et html normalement ça prend 2s

[supple crag]

désolé des noms des id et tout c'est pas moi qui a créer l'html

[woeful summit]

tkt

tu fais comment pour aller dans ta catégorie ?

je pense tu m'as pas tout envoyé

[supple crag]

créer un compte

excuse moi @woeful summit

[woeful summit]

je clique ça fait rien tes sur c'est la dernière version 🤔

[supple crag]

const container = document.getElementById('container');
const loginButton = document.getElementById('login');
const signUpButton = document.getElementById('signUp');

signUpButton.addEventListener('click', () => {
    container.classList.add('panel-active');
})

loginButton.addEventListener('click', () => {
    container.classList.remove('panel-active');
})

ya le js autant pour moi

[woeful summit]

ah voilà ^^

[supple crag]

my_script.js

[woeful summit]

Tu as des erreurs avec les id

[supple crag]

ah bon ?

[woeful summit]

oui tu as mis plusieurs fois l'id coucou

[supple crag]

ah mince

[woeful summit]

Un id c'est unique, c'est pour un seul "élèment", une class c'est pour appliquer le style a tous les élèments qui ont la class

je sais pas si je suis clair je me suis réveillé ya pas longtemps ^^ mais en gros si tu veux mettre un id a plusieurs élèments tu dois le transformer en class

[supple crag]

ah okk

non c'est très clair t'en fait pas

[woeful summit]

bon j'ai galéré à tout mettre bien comme il faut mais je crois c'est bon

[supple crag]

ok je vois ça en rentrant merci infiniment

[woeful summit]

le problème c'est que date de naissance il fait tout décaler sur la droite, donc même si c'est bien centré tu as l'impression que ça va sur la droite

<!---------------------------- INFORMATION PERSONNEL -------------------------------->
<div class="form-wrapper">
        <div class="from-group">
    <div class="civi-box">
      <label for="nom">Nom</label>
      <input type="text" id="nom" placeholder="Nom" minlength="2" name="nom">
    </div></div>
        <div class="from-group">
    <div class="civi-box">
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Adresse e-mail" name="email">
    </div>
  </div>
        <div class="from-group">
    <div class="civi-box">
      <label for="telephone">Téléphone</label>
      <input type="tel" id="telephone" placeholder="N° de telephone" name="telephone">
    </div>
  </div>
        <div class="from-group">
    <div class="civi-box">
      <label for="website">Website</label>
      <input type="url" id="website" placeholder="Website" name="website">
    </div>
  </div>
        <div class="from-group">
    <div class="civi-box">
      <label for="dates">Date de naissance</label>
      <input type="date" id="dates" name="date">
    </div>
  </div>
</div>```

/*-------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------*/
  
.form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le conteneur sur la page */
    width: 100%; /* Utilisez une largeur spécifique si vous voulez une largeur maximale */
  }
  
  .from-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre verticalement et horizontalement dans le conteneur */
    width: 500px; /* Ou la largeur souhaitée */
    margin-bottom: 10px;
  }
  
  .from-group .civi-box {
    display: flex;
    align-items: center; /* Ajout pour centrer verticalement */
    justify-content: flex-start; /* Alignement à gauche pour le label et l'input */
    width: 100%; /* Les civi-box prennent toute la largeur du .from-group */
  }
  
  .from-group label {
    margin-right: 10px; /* Espace entre le label et l'input */
    width: 30%; /* Largeur fixe pour les labels */
    flex-shrink: 0; /* Empêche le label de rétrécir */
    text-align: right; /* Alignement du texte du label à droite */
  }
  
  .from-group input {
    width: 70%; /* Largeur fixe pour les inputs */
    flex-grow: 1; /* Permet aux inputs de grandir si nécessaire */
  }

/*-------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------*/```

Pour centrer sans tout casser j'ai rajouté une div "form-wrapper"

[supple crag]

ok parfait merci, juste comment je fais pour mettre une width de 150px a l'input ça fonctionne pas ?

[supple crag]

j'ai rien dit c bon c'est réglé

merci beaucoup !!

[supple crag]

Bonsoir, j'ai malheureusement encore un problème, mon responsive n'est pas ouf voir innexistant et je veux le rendre meilleur, je veux qu'à partir de 1280px et en dessous les deux parties se superpose

[warped osprey]

Directement ou directemement mdr

[supple crag]

bien vu ahah

[warped osprey]

Possédez ou posséder ?

[supple crag]

bien vu, j'ai pas fait l'html

c'est honteux

[warped osprey]

mdr

[warped osprey]

Créer un compte ou creer un compte ?

[supple crag]

à part ça aucune idée ?

[warped osprey]

Le design

Tu fais sur Visual Studio Code ?

[supple crag]

j'ai des conditions à respecter et je peux pas faire autrement

la c'est pas mon problème

les fautes et le design c'est uniquement du visuel/secondaire et non du fonctionnel

j'aimerai simplement savoir si tu es capable de m'aider dans quelque chose d'utile oui ou non ?

[warped osprey]

Bien sûr, mais tu as Vsc ?

[supple crag]

oui j'ai vscode

[warped osprey]

Tu à fais la page dedans ?

[supple crag]

oui ?

[warped osprey]

Je peux t'aider dessus si tu me donne accès

[supple crag]

je peux te donner les fichiers ça reviens au même

my_script.js :

const container = document.getElementById('container');
const loginButton = document.getElementById('login');
const signUpButton = document.getElementById('signUp');

signUpButton.addEventListener('click', () => {
    container.classList.add('panel-active');
})

loginButton.addEventListener('click', () => {
    container.classList.remove('panel-active');
})

[warped osprey]

HTML (index.html) :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page de Connexion</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="login-container">
    <h2>Connexion</h2>
    <form class="login-form">
        <div class="form-group">
            <label for="username"><i class="fas fa-user"></i></label>
            <input type="text" id="username" name="username" placeholder="Nom d'utilisateur" required>
        </div>

        <div class="form-group">
            <label for="password"><i class="fas fa-lock"></i></label>
            <input type="password" id="password" name="password" placeholder="Mot de passe" required>
        </div>

        <div class="form-group">
            <button type="submit"><i class="fas fa-sign-in-alt"></i> Se connecter</button>
        </div>

        <div class="additional-options">
            <button type="button" class="google-btn"><i class="fab fa-google"></i> Se connecter avec Google</button>
        </div>
    </form>
</div>

<script src="script.js"></script>
</body>
</html>```

CSS (styles.css) :

    font-family: Arial, sans-serif;
    background-color: #2a3f54;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    transition: background-color 0.5s ease;
}

.login-container {
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 8px;
    width: 300px;
    text-align: center;
    transition: background-color 0.5s ease;
}

.login-container.dark-mode {
    background-color: #0f2a3f;
}

.login-container h2 {
    color: #333;
}

.login-form {
    margin-top: 20px;
}

.form-group {
    margin-bottom: 15px;
    transition: margin 0.5s ease;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.form-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.5s ease;
}

.form-group button {
    background-color: #4caf50;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.form-group button:hover {
    background-color: #45a049;
}

.additional-options {
    margin-top: 15px;
}

.google-btn {
    background-color: #4285f4;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.google-btn:hover {
    background-color: #347ae0;
}```

// Ajoute un événement de basculement entre le mode sombre et clair lors du clic sur le conteneur de connexion
loginContainer.addEventListener('click', toggleDarkMode);
N'oublie pas d'inclure les liens vers les bibliothèques Font Awesome pour utiliser les icônes. Ajoute ces liens dans la section <head> de ton fichier HTML :

html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
Assure-toi de remplacer "6.0.0" par la version actuelle de Font Awesome.

@supple crag

Facile à faire bg

[supple crag]

Oui oui jvois, simplement je crois que tu as pas bien compris le problème de base

Le but était de rendre tout responsive en passant le côté bleu en bas du côté beige en dessous de 1280px de largeur d'écran

[warped osprey]

Ah, je te fais ça

[supple crag]

merci beaucoup

[warped osprey]

Dr

Juste patienter 5 min

    .container {
        flex-direction: column;
    }

    .form-container {
        position: relative;
        width: 100%;
        left: 0;
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }

    .sign-up-container {
        width: 100%;
    }

    .container.panel-active .sign-up-container {
        transform: translateX(0);
    }

    .login-container {
        left: 0;
        width: 100%;
    }

    .container.panel-active .login-container {
        transform: translateX(0);
    }

    .filtre-container {
        width: 100%;
        left: 0;
        transform: translateX(0);
    }

    .container.panel-active .filtre-container {
        transform: translateX(0);
    }

    .overlay {
        transform: translateX(0);
        width: 100%;
    }

    .container.panel-active .overlay {
        transform: translateX(0);
    }

    .filtre-panel {
        width: 100%;
        transform: translateX(0);
    }

    .filtre-gauche {
        transform: translateX(0);
    }

    .container.panel-active .filtre-gauche {
        transform: translateX(0);
    }

    .filtre-droit {
        transform: translateX(0);
    }

    .container.panel-active .filtre-droit {
        transform: translateX(0);
    }
}```

> Insère ce code dans ton fichier my_style.css pour rendre ta mise en page responsive, avec le côté bleu en dessous du côté beige lorsque la largeur de l'écran est inférieure à 1280px.

@supple crag

[supple crag]

en effet on dirait que ça fonctionne mais est-ce qu'il et possible de laisser la partie beige au dessus ?

[warped osprey]

Pas obligatoire mais conseillé

[supple crag]

je suis obligé malheureusement

@warped osprey

[void anvil]

je l'avais déjà essayé ça ne marche pas dcp '-'

[void anvil]

@deft burrow https://codepen.io/Axel-Fort/pen/QWYBNdV

[void anvil]

@errant cypress j'te tag aussi comme ça tu peux regarder

[errant cypress]

Salut, je check ça

Voilà tiens : @void anvil

https://codepen.io/Lartax2/pen/WNPKxvq

[void anvil]

merci c'est sympa 😄

[errant cypress]

De rien, bon courage pour la suite !

[void anvil]

@errant cypress elle est ou la modification dcp je la vois pas que je regarde x)

j'airien dis c'est bon

x)

[void anvil]

du coup ça m'a crée un problème avec mes autres pages, le bouton du thème l'image est supprimé et ça change plus, mes img ont été full décalé etc

[errant cypress]

c'est pas vraiment le js le problème du coup

j'ai touché qu'au thème moi

[void anvil]

parce que ça me fait ça dcp alors qu'ils étaient en carré etc

le thème ne change plus et le bouton y'a plus le logo dedans x)

effectivement

c'est pas à cuse de ça

Jsp ceq ue j'ai branlé

j'vais essayer de tout refaire mais j'ai rien modifier je comprend pas xd

[void anvil]

@errant cypress pour te montrer ce que ça fait : https://codepen.io/Axel-Fort/pen/QWYBEBy

sur l'embed déjà ça affiche mes produits comme ils étaient affichés mais ils le sont pas xd

[errant cypress]

Sur le codepen ils sont affichés

Vu que t'as les section dans le code

[void anvil]

oui mais le 1 doit être à gauche le 2 au milieu et le 3 à droite mais ça met tout full gauche

mais dcp mon bouton de theme ne fonctionne plus

[errant cypress]

je regarde quand j’ai du temps cette aprèm

[void anvil]

D'accord merci

[void anvil]

Vous auriez une idée de comment je pourrais l'aggrandir ou quoi jsp trop quoi faire pour que ça rende bien je trouve ça pas dingue pour le coup

[frosty temple]

L'image de gauche en fond d'écran
La div de gauche qui chevauche le fond d'écran au centre

J'suis pas très clair mais ça rendrais super jolie

[void anvil]

J'ai pas compris ton idée x)

[void anvil]

Salut ! tu as eu le temps de regarder un p'tit peu ou pas ?

[tight plover]

hello, quel est ton soucis ? (j'ai lu la conversation mais j'ai tout compris)

[errant cypress]

Salut, non désolé j’ai pas eu le temps encore

[void anvil]

https://codepen.io/Axel-Fort/pen/QWYBEBy

en gros mon bouton de thème marche bien sur mon index mais pas sur mes autres pages et ça a décalé mes images vers la gauche alors que c'est sensé faire une à gauche une au milieu et la dernière à droite

[tight plover]

d'acccord j'ai cru que c'était le logo du mec une fois connecté, autant pour moi. Personnelement il ne fonctionne pas

[void anvil]

Oui mais je comprends pas pourquoi il fonctionne sur mon index et pas mes autres pages ?

la correction qu'il y avait eu : https://codepen.io/Lartax2/pen/WNPKxvq

c'est exactement les mêmes codes mais je sais pas j'suis un peu perdu la

c'est bon j'ai trouvé...

Juste dans mon autre .html j'avais pas remis ma class"logo-svg" '-'

[tight plover]

j'étais sur la piste ahah, bon tant mieux alors

[void anvil]

j'me sens bien bête mdrr c'est débile les erreurs comme ça mais tu galères bien comme il faut xd

[tight plover]

je ne te le fait pas dire ahah, mais bon la finalité reste good maintenant tu peux avancer ahah

[elfin igloo]

bonsoir, j'ai un problème avec mon code HTML/CSS.
Je suis entrain de faire un carrousel d'image que voici :

le problème étant que le texte du figcapion que l'on voit sur le bandeau gauche de l'image dont je viens de faire le CSS n'apparait plus sur le premier élement du carrousel :

depuis que j'ai fait le CSS il n'apparaît plus sur l'écran 1 et est décalé sur les autres écrans
voici le code :

la partie de code CSS concernée est la suivante :

Quelqu'un pourrait m'éclairer ?

[void anvil]

j'te fais ça

[novel egret]

Aucune erreur n’est bête au contraire ça te permet de ne pas la refaire si il t’arrive la même chose x) ps : c’est que mon prof m’a dit ce matin

[void anvil]

@elfin igloo voilà

Jsp si ça te va

[silver orbit]

Salut j'ai un probleme quand je veux mettre une image sa prend le css d'une autre image

je viens de débuter je suis vraiment pas fort

[austere lark]

@still kelp

[olive wind]

Yo bg
C'est normal là tu appliques ça sur la balise image, toutes tes images utilisent cette balise donc il faut les différencier.
Pour ça tu peux utiliser un id
dans ta balise image tu peux ajouter ça <img src="src.jpg" id="monid">

et pour utiliser l'id dans le css tu utilises le #

  //ton code
}```

@silver orbit

[void anvil]

bonsoir, j'ai un problème en voulant crée mon site avec Nginx, j'ai bien fais la configuration ect... et j'ai une erreur 404 sur mon site .... quelqu'un pourrais m'aider ? cordialement

[austere lark]

@strong lynx si tu passes par la 👀

[strong lynx]

chez moi le site marche donc j'imagine que c'est résolu

[deep mountain]

salut, quelqu'un sais comment afficher une image avec les meta property comme sur le lien creatorsarea.fr ?

j'ai essayer og:image mais ça fait une thumbnail au lieu d'une image

j'ai même essayer l'image de creatorsarea pour voir si c'était pas mon image mais ça reste en thumbnail

j'ai vue que le type était en link pour moi et creatorsarea en article mais j'arrive pas à le changer

[deep mountain]

ah ok j'ai capté c'était ça enfaite

[noble niche]

Bonjour,

Désolé, pour le retard du message, je viens juste d'arriver sur le serveur, mais oui je travaille sur webflow depuis bientôt 3 ans et je suis amoureux de cette outil ^^

[fair cove]

bonjour, j'ai un problème avec mon texte, j'ai mis un titre et j'aimerais qu'il ce pose sur le background-image mais a la place il se met en dessous

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Graph' Finder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="design.css">
</head>
<body>

    <id="main">
        <nav>
          
  <a class="logo"> <h1>Graph' Finder</h1></a>
          <ul class="menu">
            <li><a href="index.html">Accueil</a></li>    
            <li><a href="Graph.html">Graph'</a></li>    
            <li><a href="#">Inscription</a></li>    
             <li><a href="#">Connexion</a></li>
            <li><a href="#">Contact</a></li>    
          </ul>
                </nav>
                <section class="fond">
                <img src="fond_site.jpg" alt="fond du site">
                <div class="Titre">
                    <h1 class="Titre" >Graph' Finder</h1>
                </div>
                </section>
            <section class="pre">
                <h3 class="structure">Vous êtes à la recherche d'un graphiste pour un projet ?</h3>
                <h3 class="structure">Vous n'avez pas d'idée d'esthétique et avez besoin d'aide ?</h3>
                <h3 class="structure">Vous cherchez quelqu'un qui match vos designs ?</h3>
                <h3 class="structure">Graph' Finder est là pour vous servir !</h3>
            </section>
            <article>
    <img class="presentation" src="illustration graph.png" alt="illustration" width="800px">
</article>
</body>

</html>

• {
  margin: 0;
  padding: 0;
  }

*,
*::before,
*::after { margin: 0;
padding: 0;
box-sizing: border-box;}

body{
background-color:#200001;
scroll-behavior: smooth;
}

/* Barre de Navigation */
.logo h1{
font-size: 60px;
color:#FFFFFF;
}
.titre{
font-size: 100Px;
color: white;
text-shadow: 0,0,0,0,0.5;
display: flex;
justify-content: center;
margin: 30px;
position: top;
}

ul{
list-style:none;
}

a{
text-decoration:none;
}

#main{
width:100%;
height:100px;
position: relative;
}

nav{
display: flex;
justify-content: space-around;
align-items: center;
position: top;
left: 0;
top: 0;
width:100%;
z-index: 1;
filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.479));

}

nav ul{
display: flex;
}

nav ul li a{
height:70px;
line-height: 80px;
margin: 3px;
padding: 0px 17px;
display: flex;
font-size: 0.8rem;
text-transform: uppercase;
font-weight: 500;
color:#FFFFFF;
letter-spacing: 1px;

}

nav ul li a:hover{
color:#FFFFFF;
box-shadow: 5px 10px 30px rgba(0, 0, 0, 0.3);
transition: all ease 0.2s;
border-radius: 5px;

}

/* Box du texte de présentation */
.pre{
border-radius: 30px;
border-style: solid;
background-color: rgb(233, 233, 233,0.2);
border-color: rgb(233, 233, 233,0.2);
float: left;
margin-right: 7rem ;
margin-bottom: 10rem ;
margin-left: 7rem ;
margin-top: 7rem ;
padding: 30px;
filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.479));
}

/* Formatage du texte */
.structure{
padding: 15px;
font-size: 25px;
color:white;
}

/* Illustration */
.presentation{
float: right;
margin-right: 6rem;
margin-bottom: 10rem;
filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.479));

}

[empty tartan]

C'est par rapport au paramètre display si tu veux faire ça je pense qu'il va falloir utiliser du display absolute

[fair cove]

Sur quel class ?

[empty tartan]

Titre

[fair cove]

ça na pas changer

[void anvil]

Il y'a pas mal de problèmes déjà...

Pourquoi n'harmonises-tu pas tes styles ?
ton margin-top: -200px peut poser des problèmes aussi
ton texte-shadow remplace le comme ça : text-shadow: 0 0 0.5em black;
La condition position nécessite seulement un relative absolute etc... tu peux pas mettre le -200px ici

@fair cove

Utilise des class au lieu d'utiliser ID aussi

[fair cove]

c'est des class

j'utilise pas d'id

harmoniser ?

[void anvil]

ton id main si

[fair cove]

je débute

j'ai plus d'id main

j'ai changer un peu mon code

c'est ça maintenant

et mes margin c'ets a cause de mon fond, il monte pas complètement en haut

malgré un margin 0

[void anvil]

La première chose qu'on m'a apprise en faisant du CSS et faisant mes sites c'est " Des éléments similaires ou liés devraient avoir des styles similaires pour créer une apparence uniforme "

ça rend l'expérience plus agréable sur ton site

[fair cove]

On ne m'a pas appris le CSS, je me débrouille avec openclassroom et un prof qui nous incite à regarder sur internet parce que son cours css est bâclé

[void anvil]

.fond {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* margin-top: -200px; */
    padding-top: 50px; 
}


.Titre {
    display: flex;
    justify-content: center;
    color: #FFFFFF;
    position: relative;
    top: -200px;
}

essaye ça

[void anvil]

met le sur codepen

[fair cove]

oui

[void anvil]

envoie ton codepen

[fair cove]

La je peux pas

Je suis dans un autre cours

[fair cove]

https://codepen.io/Aleksei_57/pen/ExrEGaJ?editors=1100

[high summit]

Salut les gars j'ai un problème qui me fait péter un cable en gros je doit faire un menu déroulant sur un site qu'avec du html et du css est-ce quelqu'un saurait m'aiguiller svp ?

[void anvil]

pas de js ?

[brave jay]

Tu dois utilisé une checkbox si tu fais en full html css

checkbox que tu designs comme tu veux biensur

[high summit]

Non pas de css je l’ai pas encore vu

Ah ouais j’avais pas penser à checkbox

[silver orbit]

Salut j'arrive pas a comprendre le taille en css quelqu'uin peut m'explique en bref svp ?

[mint ibex]

Bon matin

J'aimerais savoir comment font les site pour avoir des meta data personnalisé sur chaque page sans devoir les mettre manuellement

Genre l'appercu du lien sur discord

Je pensais faire ça en js mais le prblm c'est que si faut attendre que la page charge pour avoir le bon meta data, en envoyant sur discord la page ne charge pas y'aura rien non ?

[elfin igloo]

bonsoir, jai un projet dans le cadre de mes études ou je dois intégrer en html/CSS/js une maquette figma créée par mes soins mais je n'y arrive pas, quelqu'un pourrait m'aider

[brave jay]

tu arrives pas a quoi ?

[elfin igloo]

je suis complétement bloqué, je n'arrive à rien. la maquette que j'ai faite est trop complexe comparé au temps que j'ai et à mon niveau

[brave jay]

bah oui mais tu as commencé quelque choses ?

[fair cove]

Bonjour ! j'aimerais mettre mon texte à droite, mais je n'y arrive pas. Si quelqu'un peut m'aider
https://codepen.io/Aleksei_57/pen/ExrEGaJ?editors=1100

ça a été régler !

[mint ibex]

j'aimerais savoir comment mettre un element au millieu absolu et un autre a ses coté sachant qu'ils sont tout les deux dans une div display flex

[fair cove]

peut être en mettre un en float: left;
et l'autre en display : flex; justify-content : center;

[mint ibex]

nop

[hazy spade]

Pas pro du tout en css, test ça

    .element1 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background-color: red;
      padding: 10px;
    }
    .element2 {
      background-color: rgb(89, 235, 89);
      padding: 10px;
    }

[mint ibex]

le prblm c'est que mon element du millieu ça m'arrangerait qu'il ne soit pas en absolute 🫤

mais bon merci quand mm

[elfin igloo]

Bonjour, j'essaye d'intégrer une page d'accueil d'une maquette figma mais j'ai des difficultés au niveau du css. quelqu'un serait disponible afin de voc ?

[void anvil]

Met ici tu n'auras pas de réponse pour voc

[pine echo]

Hello, quelqu'un sait comment on fait directement lire un son à l'ouverture de la page et que ce soit invisible ? J'ai testé pleins de méthodes donc si quelqu'un a déjà expérimenté c'est 👌

[errant cypress]

tu mets un player invisible et dans l’event DOMContentLoaded tu le lis

[pine echo]

Je suis débutant, est-ce que tu pourrais m'indiquer le code???

[errant cypress]

Je te fais ça dans 15mn

[pine echo]

Super, merci bcppp

[errant cypress]

Re alors :

le html :

<audio controls src="https://www.chosic.com/wp-content/uploads/2023/06/Old-dog-barking-1(chosic.com).mp3" id="audioPlayer">
    <a href="https://www.chosic.com/wp-content/uploads/2023/06/Old-dog-barking-1(chosic.com).mp3"> Download audio </a>
 </audio>

Le css :

audio { display: none; }

Le JS :

document.addEventListener("DOMContentLoaded", () => {
  const audioPlayer = document.getElementById("audioPlayer");
  audioPlayer.play();
})

[pine echo]

Super merci et comment je dis à mon fichier html qu'il faut qu'il prenne mon fichier JS ?

[errant cypress]

<script src="ton-fichier.js"></script>

[pine echo]

J'ai copié tout le code mais ça ne marche pas

[elfin igloo]

j'ai un problème, j'aimeras faire passer du texte et des boutons sur une image. quand je met mon image en position absolue, z index : -1 la section suivante remonte jusqu'au header, je ne sais pas comment éviter cela :

exemple sans la position absolue sur mon image :

voici le code html

et le css appliqué :

[sleek python]

Remplace ton fichier js par ton fichier et met le en bas de ton code avant la balise fermante html

[errant cypress]

Le script c'est en dernier

et ouvre la console voir si y a un truc qui cloche

mais j'ai testé et c'est good

[pine echo]

J'ai ce message dans la console : sound.js:3 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

[errant cypress]

ah bah si tu mets autoplay seulement, tu enlèves le JS et il va se jouer tout seul logiquement

j'ai testé sur codepen seulement

[pine echo]

Quand je démarre Chrome en mettant un flag pour que ça puisse avoir l'autorisation ça marche très bien mais comment ça enlever le JS ça veut dire ces lignes fonctionnent sans le JS ?

<audio controls src="./3168.mp3" id="audioPlayer">
    <a href="./3168.mp3"> Download audio </a>
</audio>

Parce que lorsque je n'utilise pas le fichier JS ça ne fonctionne pas..

[errant cypress]

 <audio controls autoplay>
     <source src="./3168.mp3" type="audio/mp3">
</audio>

Dans la logique ça devrait être ok

Je me suis basé sur W3

Le JS me permettait juste de l'autoplay mais effectivement si tu as l'autoplay en option html, useless

[pine echo]

Merci t un génie frérot

[errant cypress]

np

[pine echo]

👌

[errant cypress]

gl pour la suite

[pine echo]

Merci

[deft burrow]

https://codepen.io/taink/pen/zYeVdwL

un peu en retard mais bon

je viens de voir le msg quoi

[severe spruce]

qq a une bonne lib pour la gen de chart sur nodejs

[viscid owl]

Salut les devs, je rencontre un petit souci d'alignement d'images avec Tailwindcss.

L'objectif est d'aligner verticalement la première ligne avec la deuxième ligne (voir la capture d'écran ci-dessous où le décalage est représenté par un trait rouge : https://i.ibb.co/PMvGDTP/Capture-d-e-cran-2023-12-15-a-22-39-14.png).

Et voici le lien de mon Tailwind Play : https://play.tailwindcss.com/pPDUg8cb5D

Merci à l'avance et passez une bonne soirée.

[woeful granite]

chartjs

[severe spruce]

c'est ce que j'aitais en train de voir xD

[woeful granite]

ah mais tu connaissais pas ?

C le meilleur

sinon tu as d3js qui est plus compliqué

[viscid owl]

J'ai trouvé une solution à mon problème, je ne sais pas si c'est la meilleure approche mais ça fonctionne : https://play.tailwindcss.com/uZpGOKdILj

[deft sigil]

Hey j'ai besoin d'aide pour mettre des hypers-links dans mon indexation google, avoir tout simplement les petits boutons en dessous du lien principal.

[surreal vault]

Salut

C'est quoi le nom de ça en dev web ?

https://spiderscript.xyz/stuff/t2xty2wo1dvyhzv.mp4

C'est pas caroussel si possible le mot que je cherche

[void anvil]

Une scrollbar

après jsp vraiment ce que tu cherches

J'vois pas d'autres noms que caroussel ou scrollbar

[fresh parcel]

Oui c'est scrollbar

[errant cypress]

Ou c’est juste une div avec une width et un overflow quoi

[void anvil]

Bonjour,

J'ai une petite question car je n'ai jamais fais ça mais j'ai 3 box avec des informations que le client souhaite intégrer dedans.
Les boxes doivent avoir cette forme là donc en " trident " entre grosse guillemets avec les angles pareil que sur l'image.
Je reste dans le simple et épurer en général donc ça sort un peu de mes capacités et je vous demandes votre aide 😄

[void anvil]

Je suis certains que c'est trop complexe pour faire ça avec du css mais comment puis-je faire ?

[errant cypress]

Je sais pas si tu peux t'en sortir avec un mélange de skewX() et de skewY()

https://codepen.io/jackiezen/pen/QWEpNbM, j'ai trouvé ça je pense que tu peux essayer de t'en inspirer

[void anvil]

Ouais mais c'est plus des boxes avec du texte que je veux faire dedans

[errant cypress]

Bah c'est pareil, t'as juste à mettre du texte dedans, et à le gérer avec ton css

[tame forge]

Surtout qu’il me semble que le skew affecte le texte 🤔

[silver orbit]

Salut je voulais savoir comment on comprennais la taille , comme par avec un bordeur radius

[void anvil]

Tu serais m'aider avec les skew pour essayer de le faire j'ai énormément de mal xd

[errant cypress]

Pas vraiment non désolé

[storm folio]

utilise clip-path et après tu positionne t'es élements sois tu tente normalement sois avec du position absolute

[wary moth]

hello tlm, je suis entrain de faire un site web mais j'ai un petit problème avec la scrollbar : elle ne s'affiche pas.
a cause de cela tout mes éléments qui doivent etre en bas de page son invisible et je ne peux pas descendre la page plus bas puisque la scrollbar est inexistante.
quelqu'un pourait m'aider ?
cordialement !

[steel idol]

Essaye de rajouter :

overflow: auto

[wary moth]

oui mais je ne sais pas ou le placé

[celest rivet]

essaye sur le body

[steel idol]

Le body ou sur le tout * {
overflow: auto;
}

C'est pas quelque chose que j'utilise habituellement donc bon ...

[wary moth]

dacc j’essaie ça

sa fonctionne merci !

[void anvil]

Petite question, j'ai rajouté des animations sur mes cartes sur un site et ça me fait des espaces en dessous des textes comme ça sauf que même avec des coups de margin et padding mais ça ne change rien du tout :

.features .card {
    background: #1D1E28;
    border-radius: 22px !important;
    border: 4px solid #ffca03;
    margin-bottom: 0; 
    padding-bottom: 15px;
}

.features .card-text {
    color: rgba(249, 252, 250, 0.46) !important;
    margin-bottom: 0; 
}

J'ai essayé différents trucs même des trucs débiles ou j'étais sur que ça n'allait pas marcher mais bon

[void anvil]

avec un svg tu penses c'est faisable ?

Je reprend le logo sur un svg et je l'intègre

[blissful wedge]

salut jai du mal a adapter mon table quelqun pour maider svp

[void anvil]

Avec le code c’est mieux 😉

[steel idol]

👌

[ocean linden]

quelqu'un pourrais m'aider svp , j'ai un truc tout con a regler

[austere lark]

Envoie direct ton problème

[ocean linden]

c'est un peux compliquer a expliquer

mais je vais essayer

je voudrais arriver a faire en sorte que mes div sois sur la meme div pour les alignée cote a cote

[tame forge]

<div class="parent-div">
  <div class="child-div">
    <--! CONTENT -->
  </div>
  <div class="child-div">
    <--! CONTENT -->
  </div>
</div>

.parent-div {
  display: flex; /* Créer une flex-box */
  flex-direction: row; /* Mettre la flex-box en horizontal (optionnel) */
  align-items: center; /* Centrer les elements enfants sur un même axe */
}

[ocean linden]

merci je ne m'en souvenais plus

[tame forge]

;)

[void anvil]

Quelqu’un fait du react ?

[void anvil]

Je pense peut-être @dusky skiff

[limpid sand]

j'aurais demander dans #javascript-typescript pour du react

[void anvil]

En faites c’est compliquer de la placer mdr

Le react comporte les 3

😂😂😂

[dusky skiff]

React c'est du js/ts du coup
Si tu veux faire du html css et que t'utilises react on s'en fou ça reste du html css
Et sinon non j'ai jamais utilisé react donc je pourrais pas t'aider, mais go #javascript-typescript

[woeful summit]

je te conseille d'utiliser next, le SEO est bien plus performant 👍

[void anvil]

Je voulais utiliser le react pour que quand on clique sur une page cela ne refresh pas ma page est ce que le next fait de même ?

[woeful summit]

Oui, Next c'est la même chose que react mais c'est juste avec des fonctionnalités en +, C'est possible grâce à son système de routage intégré et à la fonctionnalité de "Single Page Application".
Tu peux utiliser le composant Link, le changement de page se fait de manière fluide et rapide, sans recharger toute la page 👍

[austere lark]

?

[copper saffron]

Mauvaise pratique :

.navbar {
  padding: 20px;
  background-color: #f2f2f2;
}

.navbar ul {
  list-style: none;
  padding: 0;
}

.navbar ul li {
  display: inline;
  margin-right: 10px;
  padding: 20px;
}

.navbar ul li:hover {
  background-color: #ddd;    
}
/* c'est fonctionnel, mais chiant */```

Bonne pratique :
```css
.navbar {
    padding: 20px;
    background: #f2f2f2;
    &ul {
        list-style: none;
        padding: 0;
        &li {
            display: inline;
            margin-right: 10px;
            padding: 20px;
            &:hover {
                background-color: #ddd;
            }
        }
    }   
}
/* beaucoup plus pratique et organisé */```

voilà, cadeau

[errant cypress]

c’est pas très lisible en vrai mais sympa qu’ils aient implémenter ça en CSS natif (si je me trompe pas)

[lethal star]

pas bete

[copper saffron]

je confirme c'est du natif, mais en vrai je trouve ca mieux, car au moins j'ai pas 40 déclarations qui commencent par ".element" suivi de quelque chose, la c'est regroupé en un bloc je trouve c'est plus simple à gérer

[lethal star]

help :

comment centrer le texte par rapport a la PP (sur l'axe vertical)

[past escarp]

.navbar ul {
  display: flex;
  align-items: center;
}

@lethal star

[lethal star]

merchi

[lethal star]

autre problème (le CSS c'est pas mon fort): je souhaiterais aligner le lien "Log in" et le lien "Sign up" a droite

[void anvil]

🥇 timar555 -> 40 🗳️
🥈 Bern!ce -> 33 🗳️
🥉 zaros -> 25 🗳️

#4. ixneo -> 25 🗳️
#5. novalachs -> 21 🗳️
#6. valdesign -> 17 🗳️
#7. himiko_togaaa -> 14 🗳️
#8. j.ohan -> 14 🗳️
#9. herk6761d -> 14 🗳️
#10. hananari -> 11 🗳️
#11. drokinou -> 10 🗳️
#12. alpha59270 -> 10 🗳️
#13. ferdes_04 -> 10 🗳️
#14. shyy_xx -> 10 🗳️
#15. padawanironheart -> 10 🗳️

[austere lark]

🤔

[void anvil]

slt y a t'il quelqu'un pour me help en vc

[vestal sage]

tu entends quoi par vc ?

[austere lark]

vocal

[vestal sage]

Ahhhh ptdrrr, dans ma tête c'est vsc mais sans le s, ou j'en sais rien mdrr merci

[frosty rock]

Ça aurait pu être des WC

[sly abyss]

hey, est ce que vous pouvez m'aider à mettre les chiffres de mon ol a coté du texte

body {
    align-items: center;
    text-align: center;
}```

[steel idol]

Oula déjà créé des div pour tes différents éléments

Si t'applique sur le body comme sa chaud pour travailler avec plus tard

Salut sinon j'ai un problème, j'aimerais que les vagues change de forme (Au lieu de ce truc la, j'aimerais qu'elle monte un peu plus)

[sly abyss]

j'ai fait sa car j'ai envi que tout le site soit centré

[steel idol]

Bas comme sa jsp comment tu va te débrouiller mais le texte sera pas bien aligné avec le reste (Et je comprends pas pourquoi la règle se fait pas sur les chiffres en left)

[sly abyss]

a ok

[steel idol]

Essaye un truc comme sa :

<div class="rule">
   <p>Les règles</p>
</div>
<style>
.rule {
    display: flex;
    flex-direction: column;
}

.rule p {
    text-align: center;
}
</style>

[limpid sand]

a

bonjour je vien chercher des information d'organisation, je devlope un projet et je me disais qu'il serais plus propre de centralisé tout les class / className dans un/des fichier css, comme sa j'ai tout au meme endroit, est-ce que vous penssez que c'est une bonne pratique ? si oui cela veux dire que je ne peut pas utilisé (en tout cas je n'ai pas trouver comment) mon framework (tailwind) vus que je passe par du css "classique", et c'est un peut domage

[steel idol]

Ce genre de pratique c'est bien quand c'est un petit projet

Mais au bout d'un moment, au milieu de plus de 2000 lignes tu te retrouves plus hein

Dans ces fichiers séparés, c'est bien plus simple de les retrouver, et si tu les organises bien, tu obtenir un résultat pas dégueu

[limpid sand]

et si je separ mes fichier css, comme ca si j'ai par exemple 20 icone et qu'il on tous la meme couleur, c'est plus rapide de tout changer ?

[steel idol]

J'ai pas très bien compris ma question

[limpid sand]

a se que j'en sais il y a deux solution, sois je gere mon css dans mes className directement, sois j'apelle un fichier css ou j'ai stocker tout les valeur, et du coup je me dit que si je gard mon css directement dans mon code, sa risque d'etre tres long et dure a modifier si je veux modifier par exemple tout les icone de mon jeux, de noir a rouge par exemple

[steel idol]

Ah ok, oui dans un fichier sa serai plus simple, qu'au lieu de les modifier un a un dans les className directement

[limpid sand]

du coup si j'ai bien compris, meme dans des gros projet c'est plus propre de tout mettre dans plusieur fichier css (en sperans bien les fichier css pour s'y retrouver) ?

[frozen dagger]

Salut j'essaye de faire une documentation en faisant une grid le problème étant que certaines images sont plus petites que d'autre je comprend pas pourquoi, j'aimerais avoir la même taille partout car là ça fait moche (le .css est directement implémenté dans un fichier markdown)

le css:

   * {
       box-sizing: border-box;
   }

   body {
       margin: 0;
       overflow-x: hidden;
   }

   .category h2 {
       text-align: left; 
       margin-top: 30px; 
       margin-bottom: 10px; 
       padding-left: 20px; 
   }

   .vehicles {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
       gap: 20px;
       padding: 20px;
       justify-content: center;
       align-items: start;
       margin: auto;
   }

   .vehicle {
       background: #FFF; 
       color: #000; 
       border: 1px solid #CCC; 
       border-radius: 8px; 
       overflow: hidden;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
       transition: box-shadow 0.3s ease-in-out;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }

   .vehicle img {
       width: 100%; 
       max-height: 100px; 
       object-fit: scale-down; 
       display: block;
       margin-bottom: 10px; 
       border-radius: 8px; 
   }

   .vehicle-info {
       padding: 5px 10px;
       font-size: 0.8em;
       background: #F7F7F7; 
       border-top: 1px solid #DDD; 
       color: #333; 
       text-align: left; 
       min-height: 60px; 
       display: flex; 
       flex-direction: column; 
       justify-content: center; 
       align-items: flex-start;
   }

   .vehicle-info span {
       margin: 2px 0; 
   }

   .vehicle-info span:last-child {
       margin-bottom: 0; 
   }

[brave jay]

c'est juste height pas max-height: 100px;

pour vehicle img

[frozen dagger]

Merci!

[sly abyss]

hey, est ce que vous savez comment est ce que je peut faire pour héviter que quand je survolle mon lien, cela ne pousse pas la div du dessous?
Mon code :

.App {
  text-align: center;
}
* {
  margin: 0;
}

nav ul li {
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 25px;
}

nav a {
  border: 1px black solid;
  background-color: black;
  color: #fff;
  text-decoration: none;
  padding: 0.5vh;
  padding-left: 3vw;
  padding-right: 3vw;
  border-radius: 3px 3px 0 0;
}

nav a:hover {
  padding-top: 1vh;
}

.content {
  background-color: black;
  color: #fff;
  margin-top: 0;
  padding-top: 0;
}

[fierce shard]

Dans ton a::hover, rajoute padding-bottom: calc(3vw - 1vh).

Je suis pas sûr, mais ça peut marcher.

[covert verge]

en faite, il faut qu'ils ont le meme padding

[frosty rock]

@austere lark c'est autorisé ça ?

[austere lark]

Nop merci

[silk geyser]

Bonsoir, j'aurais besoin d'aide concernant une petite animation ou je bloque complètement 😅
J'aimerais que mon background avec le linear-gradient apparaisse de façon non brute au hover mais ça ne fonctionne pas, merci à vous.

à savoir que j'ai déjà essayer en précisant dans ma transition background

[tame forge]

transition: all .4s ease ?

Et si ça marche toujours pas, je met un nombre de secondes abusé pour être certains de voir l’animation

[silk geyser]

Ça marche pas xd

[tame forge]

Si tu le met dans le :hover ?

[silk geyser]

Non plus x)

[feral pier]

Hola le monde, j'ai un petit soucis d'affichage sans vraiment comprendre ou est l'erreurs.
Cet à dire que j'ai crée une div rien ne plus normal en html/css pour mettre les icones des réseaux sociaux dans les 3 cercles que vous voyez sur la photo et au début ça a bien marcher, mais depuis que j'ai voulu faire un commit pour le mettre sur mon github mes icones ont disparues… Si quelqu'un connait l'origine de ce problème car je n'ai jamais eu ça. C'est clairement la 1ere fois que ça me le fait

Je peux envoyer directement le code si vous voulez tester

[fierce shard]

Il faut uttilier une animation.

[fierce shard]

Comment tu définit ton image ?

Parce que là, ton background est transparent et ton i est vide, rien ne devrait s'afficher.

[feral pier]

L'image viens du site Boxicons dont le font tu le copie colle qui donne ceci "<i class='bx bxl-github'></i>" et le background transparent c'est pour éviter que la couleur s'affiche dans le rond

[feral pier]

Ah bah j'ai réglé le problèmes c'est bon, j'ai regardé la doc il fallait mettre ceci afin que les icones s'affichent :
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

[fierce shard]

Ah b'en oui, c'est plus compréhensible.

[feral pier]

Teubé que je suis sérieux

[fierce shard]

J'ai eu le même problème quand j'ai uttilisé Google Fonts pour la première fois.

[feral pier]

Ah moi non appart juste que je ne chargé pas les pages au début

[mighty elm]

Bonsoir, j'ai fais un theme sur mon site internet et lorsque ma page est chargé, j'ajoute une class a mon element <html> pour que le changement de theme soit fluid, dans le css, le code ressemble à ceci :

.animate-theme-change *, .animate-theme-change *:before, .animate-theme-change *:after {
    --theme-change-transition-time: 1s;
    --theme-change-transition-type: ease-in-out;

    --theme-change-transition: color var(--theme-change-transition-time) var(--theme-change-transition-type),
                                background-color var(--theme-change-transition-time) var(--theme-change-transition-type),
                                outline-color var(--theme-change-transition-time) var(--theme-change-transition-type),
                                border-right-color var(--theme-change-transition-time) var(--theme-change-transition-type),
                                border-top-color var(--theme-change-transition-time) var(--theme-change-transition-type),
                                border-left-color var(--theme-change-transition-time) var(--theme-change-transition-type),
                                border-bottom-color var(--theme-change-transition-time) var(--theme-change-transition-type),
                                box-shadow var(--theme-change-transition-time) var(--theme-change-transition-type),
                                text-shadow var(--theme-change-transition-time) var(--theme-change-transition-type);

    transition: var(--theme-change-transition);
}``` Le problème est que sur firefox, tout mes elements changent de couleur en même temps et de manière fluide mais sur chrome, ca lag un peu puis le texte commence a changer uniquement quand les fonds des div à changer etc...
Une personne saurait ce qui peut entrainer ces bugs et comment je pourrais les régler ?

[fluid wadi]

Salut tout le monde, j'espère que vous allez bien, je me demandais, où est ce que vous trouvez vos images sans background, lorsque je fais mes recherches, je tombe sur ce style , et je sais pas comment les utiliser.

[fierce shard]

Tu as pris ton image sur Google ?

En faisant clic-droit -> télécharger l'image ?

[safe citrus]

Bah au pire tu télécharges l'image et t'utilise le site "Remove Background", c'est gratuit

[fluid wadi]

okay, merci bien.

[fluid wadi]

oui oui

[safe citrus]

Tkt bg

[fierce shard]

Tu l'as donc en jpeg.

C'est Google qui fait ça pour optimiser l'affichage.

Il faut ouvrir le lien vers l'image, puis télécharger l'image depuis le site qui l'héberge en png.

[safe citrus]

Carré ça, merci pour l'info bg

[fierce shard]

De rien !

[hollow pine]

Bonsoir,
Savez-vous où je peux récupérer tous les requêtes d'une page HTML où on peut recevoir. Par exemple une popup qui apparait en plein milieu de la page HTML s'il vous plait ?

[fierce shard]

À la main, uttilise la console du navigateur.
En js, bidouille avec cette api : https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/webRequest

Ça devrait passer je pense.

[hollow pine]

Pour information je n'ai pas le code source excepté le code disponible si nous utilons le dev tools du navigateur

[fierce shard]

Comment ça ?

J'ai pas compris

[hollow pine]

En gros, j'essaye de get les alertes twitch sans passer par l'api et donc j'essaye de détecter quand il a un changement dans la page HTML pour exécuter x action

ou tout simplement récupérer la requête qui déclenche ce changement $

Actuellement le screen provient de streamlabs (via un lien HTML conçu par eux)

[fierce shard]

C'est ce que je dit. Il te faut l'api https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/webRequest

[hollow pine]

Mais je ne peux pas modifier le code ?

[fierce shard]

Si, si tu veux. Il te suffit de faire un script js.

[hollow pine]

Je peux executer un script js sur une page qui m'appartient pas ?

[fierce shard]

Oui, bien sûr!

[hollow pine]

Ah, comment je peux faire s'il vous plait 🥲 ?

[fierce shard]

Le plus simple (selon moi) est de créer une extention.

https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions

[hollow pine]

Ce n'est pas de mon niveau malheureusement

[fierce shard]

Si, c'est super simple.

Tu fait un manifest.json :

{
    "manifest_version": 2,
    "name": "SuperExtention",
    "version": "0.1",

    "description": "-",

    "icons": {
        "48": "icon.png"
    },

    "permissions": [
        "activeTab"
    ],

    "content_scripts": [
        {
            "matches": ["*://twitch.com//*"],
            "js": ["code.js"]
        }
    ]
}

et tu met ton petit code js dans code.js

[hollow pine]

Et comment je peux le mettre sur mon navigateur ?

[fierce shard]

En l'important. C'est à trouver dans les paramètres.

Tu uttilise lequel ?

[hollow pine]

Firefox

Mais apparement j'ai une option directement sur visual studio

[fierce shard]

Une version spéciale ?

[hollow pine]

Qu'il marche a peut près || j'arrive toujours pas a get les requêtes mais j'ai plus de print ||

[fierce shard]

Ah... alors je n'uttilise ni node.js, ni vscode...

[hollow pine]

AH

J'ai fais ce code un peu près mais impossible retrouver mon print

webRequest.onComplete.addListener(
  function (details) {
    console.log("details : ", details);
    return { cancel: true };
  },
  { urls: ["<all_urls>"] }
);

[fierce shard]

• il te manque un d à onCompleted
• il set à quoi { urls: ["<all_urls>"] } ?

[tame forge]

Pourquoi ne pas utiliser l'API ?

Elle est gratuite en plus si je dis pas de bêtises 🤔

[hollow pine]

Oui mais je dois le get sur gmod

Et l'api me permettra pas de faire cela

a part une requête

[hollow pine]

il set à quoi { urls: ["<all_urls>"] } ?
A get l'url dans le manifest nan ?

[tame forge]

Pourquoi ça ?

Tu dois bien pouvoir utiliser l’api avec lua nan ?

[hollow pine]

Pour un addon. Je cherche à récupérer les alertes subs

[hollow pine]

Avec twitch il me demande une connexion HTML

obligatoire

et je dois le refresh sinon il expire

[tame forge]

Ah oui normal

[hollow pine]

Oui mais cela m'arrange pas du coup

[tame forge]

Sinon, tu passe par un bot

Comme ça tu as juste un token

[hollow pine]

en python ?

[tame forge]

Ben nan

Un bot twitch

[hollow pine]

AH

[tame forge]

Tu interagis avec l’api au travers du bot x)

[hollow pine]

Je ne sais pas comment dev un bot twitch

[tame forge]

Plutôt qu’avec l’oauth2 x)

[tame forge]

Excellente question

Moi non plus x)

Je crois que t’es bon pour bouffer de la doc XD

[hollow pine]

Après je ne peux pas test. Avec streamlabs j'ai une magnifique option de teste mais là

[hollow pine]

Je bouffe de la doc depuis hier. Je commence avoir l'habitude

[tame forge]

Faut sortir la CB 🤣

[hollow pine]

J'ai même pas le niveau nécessaire sur mon compte twitch pour pouvoir débloquer les sub

[tame forge]

Au pire dans ton code, tu fais en sorte de pouvoir émettre l’événement manuellement

[fierce shard]

Du coup c'est réglé @hollow pine ?

[hollow pine]

On va essayer se débrouiller sans ma méthode dcp

[fierce shard]

Ok.

[vague parcel]

Bonjour, j'ai un petit probleme niveau HTML/CSS, j'aimerais avoir de l'aide, qu'elle est la manip ? je fais une capture écran de monde code et de la page web en question et expliqué mon probleme ?

En 1er mon HTMl, en 2nd mon css.
Mon problème est que je n'arrive pas a espace mon menu, avoir un espace entre acheter et louer, louer et vendre, vendre et contact.
J(ai voulu essayé un justify-content: space -between, mais sans succès, et je sèche un peu

[void anvil]

ah ouais

toi

t'es motivé à dev comme ça

😮

[vague parcel]

Je commence juste

je rappelle

[void anvil]

Nan c'est juste le thème

Je sais pas comment tu fais xd

[vague parcel]

Bah je sais pas trop comment le choisir ni les critères pour en choisir un bon

[void anvil]

Y'a pas forcément de critère, c'est à toi de voir ce que tu aimes

[olive wind]

En gros ce que tu as fait ici c'est que tu as mis un display flex avec un space-between sur ton header qui contient :

• logo
• navbar
• login
  On voit qu'il fonctionne bien car tu as tout l'espace entre ces 3 blocs
  Si tu veux essayer de séparer la liste tu peux essayer de :
  mettre sur ton .menu : un display flex avec un space-between comme tu as fait au-dessus

@vague parcel

ça a pour effet de mettre tout l'espace possible entre chacun des items en fonction de la taille de ta fenêtre

[void anvil]

dans les extensions personnellement, j'utilise : noctis

[vague parcel]

Justement j'avais deja essaye sur mon .menu, un display: flex; et un justify-content: space-between; mais rien ne se passe @olive wind

[olive wind]

ah, tu peux mettre ton code sur code-pen et le send ici ?

sinon

tu mets un gap

[vague parcel]

code-pen ?

[olive wind]

codepen.io

un site pour partager du code

essaie d'abord la propriété gap

[vague parcel]

Niquel le gap marche super 🙂

Merci @olive wind

[vague parcel]

Peut on avoir des problèmes de res+ponsive avec le gap ?

[olive wind]

tout dépend de la taille que tu donnes
Sinon tu peux faire un petit media queries pour régler ça

[storm folio]

En théorie oui mais tu peut le limiter en utilisant des unité relative genre le % comme ça c'est adapté en fonction de la taille du container et ça devrait jamais être trop gros

[storm folio]

ça ne fonctionnais pas parceque la taille de .menu est trop petite mais si tu lui met une width plus grande ça fera quelque chose

et par pitié change de thème le mode contraste élevé tu va tu démonter les yeux à la fin

utilise le theme de base de vscode

ou sinon le theme github est sympa aussi

[vague parcel]

@olive wind d'accord merci

[vague parcel]

D'accord j'essayerais sur un autre document test

J'arrive pas trop les themes lights 😟

[storm folio]

github c'est un theme sombre

un peu comme discord mais en plus foncé

[vague parcel]

D'accord merci de l'astuce 🙂

[fervent ivy]

Bonsoir, j'espère que vous allez bien, je voulais vous poser une question à propos de github en fait c'est quoi ? C'est un IDE ?

[tame forge]

GitHub, c'est un site te permet de partager du code soit publiquement soit avec des personnes que tu choisis. Cela permet aussi d'effectuer des tests avant mise en prod, et tellement d'autres chose que je ne pourrais pas les citer ici !

[brave jay]

C’est surtout pour le versionning (garder une trace des ancienne version de ton code)

[fervent ivy]

C'est quoi le but de partager mon code avec les autres ?

[brave jay]

le travail en équipe

[fierce shard]

Et l'open source.

[brave jay]

mouais c'est secondaire ca

[tame forge]

Oui aussi x)

[feral pier]

J'étais aussi pareil à mes début sur visual code mdr

[void anvil]

On est pas ensemble

[storm folio]

Je m'ennuyais un peu ducoup rapidement fait une PWA permettant de choisir un point de drop sur Fortnite au hasard n'hésitez pas si vous avez des suggestions https://alexistb2904.github.io/FortniteDropSelector/

[void anvil]

Salut, erreur 500 sur le site ça peut-être quoi ?

[grizzled beacon]

https://www.google.com/search?q=erreur+500&rlz=1C1CHBD_frFR858FR858&oq=erreur+500&gs_lcrp=EgZjaHJvbWUyDAgAEEUYORixAxiABDIHCAEQABiABDIHCAIQABiABDIHCAMQABiABDIHCAQQABiABDIHCAUQABiABDIHCAYQABiABDIHCAcQABiABDIHCAgQABiABDIHCAkQABiABNIBCDM3MzZqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8

[quick lynx]

C'est simpa, mais genre c quoi "Rebelle hide"???

[storm folio]

Les Caches rebelles

genre le tunnel à côté de ritzy et snooty

[quick lynx]

Et ducoup sa sert à quoi ?

[storm folio]

les afficher ou pas

[quick lynx]

Quand j'appuie ya rien qui change 😅

[storm folio]

Y'a que 2 spawn en + donc tu tombe pas dessus direct

[quick lynx]

Ahh okok bg

Tu devrais plutôt écrire "whithout rebelles" ducoup nan?

[storm folio]

j'ai jamais regarder comment ça s'appelle ig

[quick lynx]

Azi bb

Bonne nuit ❤️

[storm folio]

good night

[quick lynx]

💅

[hearty sequoia]

Bonjour à tous !

Depuis maintenant quelque jours, j'ai un petit soucis avec le développement d'un petit site d'upload d'image dans une DB Postgres et d'une API, voici le problème :

Mon site est constitué d'un formulaire avec un input image, quand je clique dessus, je peux sélectionner une image dans mon PC et l'envoyer.

Et c'est la que les choses se compliquent : Ce qui doit être fait, c'est qu'une requête soit envoyé à l'API, qui va faire différentes manip puis enregistrer l'image dans la BDD.
SAUF QUE, une image, c'est gros, alors j'ai choisi de la stocker en FormData pour que ça prenne moins de place.

Malheureusement, lors de l'envoi de mon image sur le formulaire, une erreure que je n'arrive pas à résoudre se produit dans l'API :

Image 1 : Requête POST à mon API en envoyant le formData dans le Body
Image 2 : Mon API avec Express et Typescript (le code dans l'endpoint ne s'execute même pas)
Image 3 : Mon erreur dans mon API lorsque je mets une image dans le formulaire

Si vous avez besoin de toute autre informations, n'hésitez pas à me ping 🙏

[runic python]

@hearty sequoia
formData.append('image', file); pour ajouter le fichier image à l'objet FormData
cependant il s'attend que tu l'envoies dans le champ file et pas image

--> upload.single('file')

Je sais pas si il peut y avoir un réel rapport mais je pense que ça peut résoudre une partie

[hearty sequoia]

Oh, donc dans le .append faudrait mettre file à la place de image ? 🤔

[runic python]

Exactement

Si ton multer est configuré pour traiter un fichier unique avec upload.single('file'), tu dois utiliser 'file' comme clé lorsque tu ajoutes ton fichier image à FormData

[hearty sequoia]

Ah merci 😭 ça marche, mais du coup j'ai un autre soucis, dans mon API, je dois vérifier si il y a bien une image qui a été envoyé, j'ai bel et bien mis une image, mais quand je suis à cette étape :

Le code ne va pas plus loin, alors j'ai console log :

req.body :

[runic python]

multer les met pas dans req.body il les met dans req.file

donc

[hearty sequoia]

Faut mettre req.file

Owo

[runic python]

if(!req.file)

[hearty sequoia]

J'ai mis une image et ça me ressort ça

Faut que je vérifie si l'image n'est pas corrompue avant de l'enregistrer, faut que j'envoie le path ?

Du genre comme ça

[runic python]

Bah c'est ce que tu dois initialement obtenir avec le req.file

[hearty sequoia]

Comment ça ?

[runic python]

L'objet JSON que tu as affiché est exactement ce que tu dois obtenir de req.file

[hearty sequoia]

Ouais, j'ai mis une image dans le formulaire pour tester et j'ai bien eu l'objet

[runic python]

Tu peux utiliser ces informations pour traiter le fichier téléchargé

[hearty sequoia]

Oui justement, pour vérifier que le fichier n'est pas corrompu j'ai juste à vérifier le path ?

[runic python]

c'est ça

[hearty sequoia]

okay

La base 64 de l'image c'est toujours path ?

Ah bah non

[runic python]

Nop

c'est juste le chemin système le path

[hearty sequoia]

Ok jusque la tout va bien, mais est ce que c'est possible de resize l'image sans avoir besoin de l'enregistrer ?

[runic python]

https://www.npmjs.com/package/sharp

[hearty sequoia]

hehe, je l'ai déjà

[runic python]

Bah voilà ^^

[hearty sequoia]

Mais avant je resizais avec la base 64 de l'image

[runic python]

Tu converties d'abord le contenu de l'image en Base64, puis tu crées un buffer

[hearty sequoia]

Mmh alors j'ai bricoler un petit truc, en je ne vois pas comment le faire sans avoir enregistrer l'image avant, même avec sharp

J'ai fais ça

[runic python]

Tu veux le sauvegarder ou en gros ton image ? sur une bdd ou quelque chose comme ça ?

[hearty sequoia]

Exactement, sur une bdd

[floral haven]

On enregistre jamais une image dns une db

[hearty sequoia]

Et il faut que ça occupe le moins de place possible, pour pas que ça soit fat dès la 3e image

[hearty sequoia]

Oui mais on peut en buffer non ?

Comme ça ça prends pas bcp de place

[floral haven]

On peut faire plein de chose c'est pas une bonne idée pur autant

ça va pas changer la taille

Un buffer tu vas le toString, t'aura au final plusieurs Ko/Mo de consommé

[hearty sequoia]

J'ai une fonction qui reduit la taille si l'image est trop grande

[floral haven]

C'est de la compression

Peu importe, c'est gros et inutile de mettre une image en db

[hearty sequoia]

Ah 🤔 Mais du coup c'est quoi la meilleur méthode pour foutre une image dans une BDD sans que ça prenne bcp de place ?

[floral haven]

Tu le fais pas comme dis plus haut

[hearty sequoia]

🤷‍♂️ C'est ce qu'on me demande moi j'y peux rien 😭

[floral haven]

On ne mets pas un fichier dans une base de données

Qui te demande ça ??

[hearty sequoia]

Y'a pas un moyen de contourner la chose ?

[runic python]

async function resizeAndConvertToBase64(path, width, height) {
  try {
    const inputBuffer = await fs.readFile(path);

    const resizedBuffer = await sharp(inputBuffer)
      .resize(width, height)
      .toBuffer();

    const base64String = resizedBuffer.toString('base64');
    return base64String;
  } catch (error) {
    console.error(error);
    throw error;
  }
}

[hearty sequoia]

Je suis en stage

[floral haven]

Bah dis leur de revoir leur strat tech alors

[runic python]

et dcp à la fin tu ajoutes :

const base64ResizedImage = await resizeAndConvertToBase64('chemin/image/', Taille, Taille);

[hearty sequoia]

@floral haven tu conseilles quoi du coup ?

[floral haven]

De discuter avec ton lead pour comprendre l'objectif, c'est pas normal qu'on te demande ça

[hearty sequoia]

Ils m'ont dit que ça serait plus pratique pour le jour ou ils auront du load balancing

[floral haven]

Mdr

[runic python]

xDDDD

[floral haven]

J'vais cabler

Je sais même pas quoi répondre, trop de choses qui vont pas là mdr

[hearty sequoia]

🫠

[floral haven]

Bah vas-y écoute c'est qu'un stage, laisse les dans leur galère ^^

Juste garde en tête que c'est pas la bonne chose à faire

[hearty sequoia]

Euh oui enfin, sans ce stage j'ai pas mon BTS x)

[floral haven]

Raison de plus, vu ce que tu me dis, tu vas pas pouvoir faire de miracle pour eux

[hearty sequoia]

Mais du coup comment faire si faut pas enregsitrer l'image dans la bdd ? Comment je la récupère plus tard ?

[floral haven]

Comme il t'a montré plus haut, tu compresses puis tu toString

[hearty sequoia]

Y'a pas d'autre étape après ?

@floral haven @runic python Excusez je m'y connais pas trop avec ça, mais pourquoi le load balancing vous à fait rire ? Owo

[runic python]

Stocker des images, qui peuvent être assez grandes, dans ta base de données, peut ralentir les opérations de la base de données comme les requêtes et les mises à jour. Les bases de données sont optimisées pour gérer des données structurées, pas pour être des systèmes de fichiers.

[tulip frost]

@hearty sequoia bonjour, perso, ca ma aussi fait sourire. chercher a optimise la bdd en y mettant de la m...

[runic python]

Après c'est en faisant des erreurs qu'on apprend

J'te donne la solution après faut voir par toi-même pourquoi surtout

[hearty sequoia]

Enh, ok je vois du coup x)

[gaunt yoke]

c'est clair

@hearty sequoia chie leurs dans les godasses !

[hearty sequoia]

mdrrr

[hearty sequoia]

Yo @gaunt yoke @runic python @floral haven, du coup pour en revenir à hier, comment est ce que les grands groupes, comme Discord par exemple, font pour stocker les images (pdp, bannières etc) sans pour autant les stocker dans une base de données ? Ils utilisent un service spécial ?

[floral haven]

Oui, soit un self service ou bien des services existants (genre S3)

[hearty sequoia]

S3, ok, je vais me renseigner dessus 🤔

[runic python]

Discord je crois qu'ils utilisent les bdd pour stocker les informations des images + système de stockage

pour les images et tout

[floral haven]

Si tu fais un self service, tu index tes fichiers dans une bdd et tu as un système de stockage à côté, c'est le plus pertinent

[hearty sequoia]

okok

[tame forge]

C'est la même chose qu'un CDN ou pas du tout ?

[torn sage]

Discord utilise probablement un s3 https://www.linkedin.com/pulse/tech-stack-discord-faysal-ahmed

[outer juniper]

Connaissez-vous une library qui a déjà pré-écris un code qui permet d'assigner une font-family à toutes les balises HTML qui peuvent contenir du texte ?

Par exemple il y a :

   font-family: "";
   src: url("") format(); }```

```p, figcaption, span, strong, em, div, abbr, address, cite, mark, etc {
    font-family: "open sans";
}```

[gaunt yoke]

une raison de pas le set sur ton body ou juste via le selecteur * ?

[outer juniper]

Pour être plus précis dans ma sélection

[gaunt yoke]

je sais pas si c'est vraiment worth, sachant qu'il y a pas vraiment de "règle" en html, tu peux faire ce que tu veux (conseillé ou non), a ta place je ferai juste un * {}, car de toute facon meme si tu cibles img par exemple, c'est pas tres grave quoi

[outer juniper]

Ok ça marche.
Merci du conseil alors ^^

[swift lodge]

Bonjour j'espère que vous allez bien, j'ai ce message sur ma page Web d'exemple

"Assurez-vous d'avoir une déclaration DOCTYPE valide au début de votre document HTML, comme <!DOCTYPE html>."

Alors que j'ai bien doctype html.
J'ai même pas commencer le code que j'ai un soucis 😩
S'il vous plaît si quelqu'un a la solution pour que je puisse apprendre javascript j'en serai reconnaissant !

[fierce shard]

Envoie ton code stp.

Ou au moin le début.

[mint ibex]

Un problème de doctype 🐳

[swift lodge]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

voilà, je comprends pas ou est le soucis il y a bien le doctype en haut de page

[frosty rock]

Tu as mis la fermante ?

[swift lodge]

oui

en fait j'ai meme pas comencé

le code html s'est généré automatiquement

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

le voici en entier

donc il y a bien la fermante il me semnle

c'est bon j'ai trouvé merci

[frosty rock]

👍

[void anvil]

Bonsoir à tous je suis entrain de créer mon premier site et en gros j’aimerais créer un menu hamburger pour les personne qui sont sur téléphone comment je pourrais m’y prendre?

[brave jay]

Regarde le responsive

[gaunt yoke]

déjà le choix du pain est essentiel, personnellement un peu brioché je trouve ça meilleur que avec du sesame
des produits frais de préférence, une bonne viande, bien cuite, une bonne sauce barbecue, salade, un cheddar maturé et fondant, ça peut faire la différence
tu peux mettre des tomates, pickles aussi, mais surtout des oignons confits c’est vraiment super bon
mais avec ça tu auras un super hamburger dans ton menu

[candid wadi]

Pour un burger suffit d’enlever le ham, sinon j’approuve les conseils d’enzo.

[void anvil]

mais plus serieusement

[candid wadi]

"how to create a burger menu css"

[winter charm]

Je vien de finir cette formation : https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3

Et je voulais savoir que me conseillé vous de faire pour m'améliorer en HTML / CSS avant de me lancer dans le JS / node JS

[hearty sequoia]

Salut @runic python @floral haven !

Je me permets de vous recontacter suite à ma demande d'aide d'il y a quelque jours ou vous m'avez aider 👀
Alors, après discussion avec mes maitres de stage, il a été convenu d'enregistrer l'image envoyé par la personne dans un dossier uploads/compressed situé dans le code de l'API, ils n'ont pas voulu que j'utilise un service externe comme S3.

Donc, voici ce que j'ai fais (dans l'ordre) :

• Vérification qu'une image a bien été envoyer
• Vérification du Token (Pour le test, j'ai mis que le token = 123)
• Check si l'image est corrompu ou non
• Redimensionnement de l'image en diminuant sa taille de 65%
• Modif du nom de l'image (${uuid}.png)
• Copie/Colle de l'image en version compressé
• Suppression de l'image de base

Maintenant, voici le problème que je rencontre :
Quand une image envoyé est de base en .png, absolument tout marche correctement, mais si c'est du .jpg/.jpeg, ça ne fonctionne pas très bien :

• Déjà, le poids de l'image augmente beaucoup (plusieurs Mo de plus) alors qu'il est censé diminué
• L'image de base ne se supprime pas, avec comme erreur ceci :

J'ai chercher un peu et le programme utiliserais toujours l'image, ce qui fait qu'il est impossible de la supprimer, mais je trouve ça bizarre car quand c'est une image en .png, elle se supprime très bien par le programme, alors que le process est normalement le même,

L'image .jpg se transforme bien en .png mais son poids est immense, voici la fonction pour la rendre moins lourde (mais qui du coup fais tout l'inverse ?)

function resizeImage(imagePath: string, width: number, height: number): Promise<boolean> {
    return new Promise((resolve, reject) => {
        Jimp.read(imagePath, (err, image) => {
            if (err) {
                console.error(err);
                reject(err);
            }
            image.resize(width, height).write(imagePath);
            console.log('Image resized', width, height);
            
            resolve(true);
        });
    });
}

Et je l'utilise comme ça :

  const defaultSize = await f.getImageSize(extpath);

  defaultSize.width = Math.round(defaultSize.width * 0.35);
  defaultSize.height = Math.round(defaultSize.height * 0.35);

  const isResized = await f.resizeImage(extpath, defaultSize.width, defaultSize.height);

[runic python]

Vérifie déjà si ton script a les perms de faire ça

c'est possible que on @hearty sequoia

image.write(imagePath);

Pour vérifier que tout ce passe bien

"L'augmentation de la taille des fichiers .jpg après leur conversion en .png, cela est dû au fait que le format PNG est généralement plus volumineux que le JPEG pour les images non compressées car il utilise une compression sans perte"

Ce que j'ai trouvé sur internet pour cette partie la

ton resizeImage me semble correct à première vue mais faut vérifier donc essaie d'ajouter des logs à chaques étapes

Quoique ton resizeImage manque de choses

[hearty sequoia]

Je pense oui

[hearty sequoia]

Ah 👀

[runic python]

function resizeImage(imagePath, width, height) {
    return new Promise((resolve, reject) => {
        Jimp.read(imagePath)
            .then(image => {
                return image.resize(width, height) 
                    .quality(60) 
                    .writeAsync(imagePath); 
            })
            .then(() => {
                console.log('Image redimensionnée et écrite vers', imagePath);
                resolve(true); 
            })
            .catch(err => {
                console.error(err);
                reject(err); 
            });
    });
}

On va dire que ça manquait de "Séquences"...

Le truc crucial qui manquait dans ta fonction resizeImage initiale était la garantie que l'écriture du fichier soit complètement terminée avant de résoudre la promesse. Dans ta version originale, la méthode write était appelée, mais il n'y avait pas de gestion pour s'assurer que cette opération asynchrone soit achevée avant de procéder à la prochaine étape (Je te l'ai ajouté dans le code ci-dessus.) le writeAsync qui lui te retourne une promesse qui sera que tout s'est bien passé et l'écriture du fichier est complet.

Tu ne peux pas te permettre de passer directement comme ça, toutes les opérations asynchrone doivent être complétés avant de passer à l'étape suivante et que du coup, tu ne tentes pas de supprimer ou manipulé alors qu'ils sont encore ouverts ou en cours d'utilisation par un autre processus @hearty sequoia

PS :

UTILISE DES CONSTS PAS DES FUNCTIONS !!!!!!!!!

[hearty sequoia]

x) désolé, ça change quelque chose ?

[runic python]

une fonction fléchée offre une syntaxe plus concise et permet de capturer le contexte de this au moment où la fonction est créée, plutôt que lorsqu'elle est invoquée

[hearty sequoia]

Ah okok

Pour moi ça faisait + "connaisseur" 😭

[runic python]

Ouais mais vraiment à éviter

[hearty sequoia]

🤔

Ce serait en essayant d'ouvrir l'image de base je crois

vu que ça me met open puis le chemin d'accès de l'image

[runic python]

ça peut-être beaucoup de choses la

Chemin d'accès, permissions et j'en passe

const resizeImage = (imagePath, width, height) => {
    return new Promise((resolve, reject) => {
        fs.access(imagePath, fs.constants.F_OK | fs.constants.R_OK, (err) => {
            if (err) {
                console.error(`Le fichier ${imagePath} n'existe pas ou ne peut pas être lu.`);
                return reject(err);
            }

            Jimp.read(imagePath)
                .then(image => {
                    return image.resize(width, height) 
                        .quality(60) 
                        .writeAsync(imagePath); 
                })
                .then(() => {
                    console.log('Image redimensionnée et écrite vers', imagePath);
                    resolve(true);
                })
                .catch(err => {
                    console.error('Erreur lors du redimensionnement de l\'image:', err);
                    reject(new Error(`Erreur lors du redimensionnement de l'image ${imagePath}: ${err.message}`));
                });
        });
    });
};

tiens je te l'ai mis en const déjà

et j'ai ajouté le fs.access oublie pas donc de const fs au début

[hearty sequoia]

Ouais j'ai fais import fs from 'fs/promises';

Ok du coup ça me renvoie sur l'erreur au redimensionnement de l'image

Avec unknown error, open puis le chemin de l'image ensuite

[runic python]

screen

le chemin de ton fichier est bon ?

[hearty sequoia]

Oui, le chemin redirige vers l'image de base

[runic python]

Fait voir le screen entier avec le chemin et toutes les erreurs + quand tu définies ton imagePath que je look vite fais quand même

[hearty sequoia]

Ok

[hearty sequoia]

J'ai 2 fois l'erreur quand j'upload 1 fichier 🤷‍♂️

Voici l'image, un bon gros choux blanc des familles

Ah bah non bah y'a 2 fois l'erreur pcq y'a un console error ET un reject

my bad

[runic python]

Onedrive

peut-être un pb

const resizeImage = (imagePath, width, height) => {
    return new Promise((resolve, reject) => {
        const absoluteImagePath = path.resolve(imagePath);
        console.log(`Vérification de l'existence du fichier: ${absoluteImagePath}`);

        fs.access(absoluteImagePath, fs.constants.F_OK | fs.constants.R_OK, (fsErr) => {
            if (fsErr) {
                console.error(`Erreur d'accès au fichier: ${absoluteImagePath}`, fsErr);
                return reject(fsErr);
            }

            console.log(`Lecture du fichier: ${absoluteImagePath}`);
            Jimp.read(absoluteImagePath)
                .then(image => {
                    console.log('Le fichier a été lu avec succès, redimensionnement en cours...');
                    return image.resize(width, height) 
                        .quality(60) 
                        .writeAsync(absoluteImagePath); 
                })
                .then(() => {
                    console.log('Image redimensionnée et écrite vers', absoluteImagePath);
                    resolve(true); 
                })
                .catch(jimpErr => {
                    console.error('Erreur lors de la lecture ou du redimensionnement de l\'image:', jimpErr);
                    reject(jimpErr); 
                });
        });
    });
};

tiens

un peu plus de détails ferait l'affaire

[hearty sequoia]

Ah, ça peut venir de la ??

[runic python]

ça pourrait

[runic python]

c'est effectivement onedrive

😄

Essaye de déplacer ton projet en dehors de onedrive

et retest

fin je pense réellement que c'est onedrive mais pas encore sur à 100%

[hearty sequoia]

Ok je fais ça

Pourquoi onedrive pause soucis enft ? 🤔

[runic python]

Problèmes de synchronisation, gestion des fichiers et pleins d'autres choses

C'est un cloud donc il peut apparaitre dans ton gestionnaire d'explorateur mais en pas être téléchargé par exemple tant que tu ne l'as pas ouvert

Ce qui va créer une erreur au script

[hearty sequoia]

(tete de pepe sad)

[runic python]

ChatGPT me dit :

Fichiers à la demande : OneDrive a une fonctionnalité appelée "Fichiers à la demande" qui permet aux fichiers d'être visibles sur votre machine sans être physiquement téléchargés tant que vous n'en avez pas besoin. Cela signifie qu'un fichier peut apparaître dans l'explorateur de fichiers mais n'être téléchargé que lorsque vous essayez de l'ouvrir. Si une application tente d'accéder à ce fichier avant qu'il ne soit téléchargé, cela peut entraîner des erreurs.

Synchronisation : Le processus de synchronisation peut parfois prendre du temps, surtout pour des fichiers volumineux ou un grand nombre de fichiers. Pendant la synchronisation, le fichier peut ne pas être accessible ou peut être dans un état transitoire qui n'est pas gérable par certaines applications.

Conflits de synchronisation : Lorsque vous travaillez avec des fichiers dans OneDrive, il peut y avoir des conflits de synchronisation si le fichier est ouvert ou modifié sur un autre appareil en même temps.

Permissions : Les fichiers stockés dans OneDrive peuvent avoir des paramètres de permissions différents de ceux des fichiers stockés localement. Cela peut entraîner des erreurs si le script n'a pas les bonnes permissions pour accéder au fichier.

Limites de l'API : OneDrive utilise une API pour gérer l'accès aux fichiers. Si une application ne gère pas correctement cette API ou les spécificités de OneDrive, cela peut entraîner des erreurs.

Problèmes de chemin d'accès : OneDrive crée un répertoire spécial dans le profil utilisateur de Windows, et parfois les chemins d'accès qui y mènent peuvent devenir assez longs ou contenir des caractères spéciaux qui posent problème pour certaines applications.

[runic python]

Essaie d'exécuter le script en admin (oui j'ai plus d'idées la)

const testFilePath = path.resolve('C:\\Users\\thepu\\Desktop\\api\\uploads\\d3de46d32171623f3aa4947162d6b414.png');

fs.readFile(testFilePath, (err, data) => {
    if (err) {
        console.error('Erreur de lecture du fichier:', err);
    } else {
        console.log('Lecture réussie, contenu du fichier:', data.toString().substring(0, 100));
    }
});

const testWritePath = path.resolve('C:\\Users\\thepu\\Desktop\\api\\uploads\\test_write.png');
fs.writeFile(testWritePath, 'Juste un test', (err) => {
    if (err) {
        console.error('Erreur d\'écriture dans le fichier:', err);
    } else {
        console.log('Écriture réussie');
    }
});

Met ça on va voir si l'écriture et la lecture se passent bien

ça permettra de voir si c'est jimp le problème

et sinon essaye sharp à la place de jimp

[hearty sequoia]

J'avais tenter mais ça marche pas non plus 🥲

[errant cypress]

Hello, j'ai pas vu de fou ton code mais je fais la même chose différemment si tu veux

sur une api, mais ça comprend aussi ce que tu fais toi, j'utilise Sharp

Tu peux zapper la parti de suppression du fond vert, mais sinon j'écris l'image, lui donne des dimensions et après je l'envoi dans un CDN perso, mais tu peux l'écrire où tu veux avec fs ifw

[dapper grotto]

Hop leak du code de beggin

Je récupère

[errant cypress]

mdrrr

[olive heron]

Crée un .zip puis envoie le lien WeTransfer 😉🤣🤣🤣

[dapper grotto]

[fierce shard]

Salut !
Je suis désolé, mais je comprends rien à ton message. Tu pourrait envoyer le code en question ou reformuler ton problème stp ?

[void anvil]

Bonsoir j'aimerais recré cette page dans ce style mais je sais pas trop comment m'y prendre , comment je doit faire pour la reproduire

[sleek python]

Bonsoir, commence petit à petit tu fait la navbar puis enssuite tu met un background à ton body et ensuite tu fais un display grid de tes div où il y aura ton image avec ton titre. J'espère avoir été compréhensible

[void anvil]

Enfaite c’est le système de case

[sleek python]

Utilise display grid tu as plein de tuto dessus. Regarde sur openClassRoom

[void anvil]

petit souci

[sleek python]

met au body un background-color puis ensuite tu enlève le text-align center que tu as du mettre à ta div et tu met un toute, tes div une classe simmilaire pour appliquer le même css

[zinc elm]

Bonjour, je viens demander de l'aide car je bloque dans un petit truc, enfaite j'arrive pas à faire en sorte d'espacer les boutons (partie 1 etc...), dés que je fais quelque chose soit ca bouge tout soit ca fait rien, je suis perdu, donc si quelqu'un a la solution je suis preneur merci

    display: flex;
    margin-right: 5%;
}

nav ul {
    display: flex;
    list-style: none; /* Supprime les puces de la liste */
}

nav li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: black;
    border-radius: 30%;
    font-size: 20px;
}
nav li:hover{
    background-color: rgb(68, 68, 68);
    transition: background-color 0.3s; /* Ajoute une transition fluide */
}
nav a{
    text-decoration: none;
    color: white;
}

[sleek python]

Envoie nous ton html ça vas être plus simple

[zinc elm]

Enfaite j'ai eu le même problème que lui

J'ai réussi a le regler grâce au gap mais j'aimerais savoir si c'était possible de le faire sans, juste avec le flexbox

[brave jay]

gap te met un ecart entre chaque enfant avec flexbox ou grid

Sinon tu peux mettre un margin a chaque enfants

[runic python]

Bonjour, j'ai l'impression d'avoir miss un truc, j'ai initialisé tailwind sur mon projet j'ai mon output, mon input, etc... je met les trucs dans mes classes de mes divs et tout mais rien ne se met dans mon output.css

Sur mon localhost dans le F12 et Réseaux il est bien prit

mais rien ne s'initialise dans le output.css et aucun style d'appliquer

C'est bon j'ai tout refait ça fonctionne

[errant cypress]

le output.css c’est le code compilé on est ok ? @runic python

t’as modif ta config tailwind et mit les directives de tailwind dans ton fichier css?

[runic python]

Ouais ouais j’ai tout fait juste j’ai rebuild ça a deconne ça fonctionne

[errant cypress]

nickel alors

[void anvil]

Bonjour a tous j'aurais besoin d'aide d'une personne assez forte e css pour bien m'expliqué le @media (max-width: 1500px) { }

[errant cypress]

c’est une media queries pour le responsive, qui s’appliquera jusqu’à que la largeur de la page fasse 1500px

[storm folio]

Faut que ton container avec flex sois assez grand après tu peut simplement mettre justify-content: space-between/space-around/space-evenly

[zinc elm]

Oui ca je l'ai compris grace à inspecter l'element j'ai vu que c'était trop petit, mais je n'arrivais pas à l'agrandir

[storm folio]

Change sa width en pourcentage ou en valeur fixe avec des dvw vw

[zinc elm]

D'accords, j'ai une autre question aussi svp, j'ai vu qu'on pouvait faire en sorte que par exemple quand on ouvre notre site sur un format téléphone on pouvait changer des elements, comme la nav bar qui devient une icone cliquable qu'on peut ouvrire au lieu de juste retrecir les boutons etc je sais pas si je me suis fais comprendre

J'aimerais bien que quelqu'un m'explique ça ou me donne le nom de ce systeme au moins pour que je puisse plus en apprendre

[brave jay]

un burger menu 😉

[zinc elm]

Bon, je demande bcp de truc mais c'est ma reprise du code, ca fait 2ans j'y ai pas touche du tout

Mais j'ai une autre question

Une div / section ou comme vous voulez elle n'est pas censé s'agrandir automatiquement en dépendant des elements qu'il y'a dedans ?

Pcq j'ai un cas ou j'ai des elements qui dépassent ma section/div c'est la premiere fois ca m'arrive

Ma div s'arrete au niveau du trait blanc mais l'image/bouton descends plus bas

[grizzled beacon]

tu as ton code html/css qu'on puisse mieux voir comment tu as organisé la chose ?

[zinc elm]

Yes je t'envoie ça de suite, c'est un peu le bordel par contre car je test plein de trucs 😅

[grizzled beacon]

dacc

[zinc elm]

Je crois que j'ai regle le prblm mdr mais j'ai pas d'explication mdr

J'ai juste changer la taille du grid template rows de px en 1fr et tout s'est remis dans l'ordre

[zinc elm]

Encore une question 😅

Je verifiais la resposnive de mon site mais je trouve ça

Le body ne recouvre meme pas l'entierté de l'ecran

[brave jay]

met ton code sur replit ou codepen

[zinc elm]

Ca fonctionne sans probleme merci, j'imagine que c'est just un bug visuel du coup

[brave jay]

Je pense que tu devrais chercher avant de nous envoyé t’es problèmes

[copper saffron]

Cadeau pour tous mes collègues développeurs Web, qui sont sûrement aussi maso que moi

[brave jay]

Euh c’est quoi le cadeau ?

[copper saffron]

Bah juste qu'au lieu de te faire chier à taper chaque balise individuellement, tu peux les écrire de cette manière, puis faire tab quand tu as fini, et ça plein de développeurs le savent pas

[brave jay]

C’est pas faux

Mais du coup autant présenter emmet 😉

[copper saffron]

Pardon c'était tentant

Oui je suis d'accord xD

[latent bloom]

Hey comment je peux mettre l'arrière plan de mon appli web en invisible

les petits coins blanc

c dans le body

body {
    margin: 0;
    padding: 0;
    user-select: none;
    color: var(--color);
    font-family: 'Poppins';
    font-weight: bolder;
}

mais peux importe les modifs quand je met une couleur invisible cela reste blanc et aucun autre code n'y touche

et si je met un background color au body les coins change de couleurs

j'utilise electron

[silk geyser]

Tu as mis un radius sur l'image, c'est pour sa que tu as des coins blancs
Tu peux enlever le background avec transparent ou none

[tepid solar]

hey , je viens de commencer le codage (html/css) et j'ai besoin d'aide pour progresser rapidement. Si vous avez des conseils , application ou encore projet pour m'aider je suis prenant ...

[fierce shard]

Pas grand chose, mais pour la docu, utilise MDN.

https://developer.mozilla.org/fr/docs/Web

[copper saffron]

Hey, personnellement je recommande aussi d'utiliser Visual Studio Code pour le développement HTML / CSS / Javascript, car il y a énormément d'extensions qui facilitent le développement

Et ne touchez pas à Notepad ++ et Eclipse par pitié

[fierce shard]

A ce qu'il parait, Atom aussi est top !

(moi, personnellement, je n'aime pas VScode)

[errant cypress]

Atom c'est plus ou moins la même chose que vscode en moins bien, vscode c'est gratuit et ça fait quasiment tout
Sinon t'as la suite JetBrains mais perso j'aime pas trop je trouve qu'ils sont trop gros je les trouves pas aussi fluide que vscode, ça ne reste que mon avis

[digital ember]

Oui mdr c'est juste de la merde installée au lycée
(Jai gratté pour avoir vscode perso mais vsy)

[thorn sky]

Salut les gars quand les gens demande de leur faire un site il parle juste du front ou aussi du back?

[digital ember]

Sa depend le site

Site vitrine souvent que front

Site e-commerce : front + back

[thorn sky]

ok je vois pour l'instant j'ai appris les bases de html je me souviens pas de tout mais je comprendrais un code

La je passe en css pour apprendre mais je sais pas combien d'expérience il faut avoir pour prétendre faire un site en front

Je me demandais aussi avec l'avancement de L'ia est ce que ca vaut vraiment le coup de s'y mettre ?

ia

[digital ember]

Mon avis sur les éditeurs de code
Visual studio code :

• Gratuit
• Extension
• Bien documenté
  Mais faut bien le configurer

Jetbrains :

• Bien documenté
• • d extensions et il y a des trucs par defaut sur jetbrains ou on doit mettre une extension sur vsc
• bien configurer en vrai à part 2 3 trucs
  Mais payant

Notepad :

• merde en boîte à fuir

[thorn sky]

@digital ember sublime texte ?

C bien ?

[digital ember]

Jamais trop use en vrai mais pas d'extensions, pas mis à jour svt...

C est vscode discount

[thorn sky]

j'utilise ca par ce que quand je fais sur Visual studio ca met pas la suite de ce que je veux mettre

[digital ember]

Et notepad en mieux

[digital ember]

?

[thorn sky]

Mdr

att

Par exemple si je met <form

ca mettra pas la suite et ca mettra pas la couleur

je connais pas la formulation de la form mais je connais juste la logique du html p

[digital ember]

Alors je te conseille de bien bien comprendre HTML car sans bon html le css part en couille, sois à l'aise avec tout même les formulaires, tableaux et dictionnaires. Apprends à bien mettre div section header... Pour le SEO

[digital ember]

sur visual studio tu mets juste form

Quand je fais une div avec une classe shoguntoto

Sur visual studio code je fais div.shoguntoto

[thorn sky]

AH ca tkt je sais faire je veux dire je connais pas le nom du truc

[digital ember]

Apprends c est important

[thorn sky]

Par exemple manger c'est un verbe ba en langage html je serais pas te dire comme on le dit

form par ex

[digital ember]

Ah ok mdr

Ben form c formulaire c est good

On dit form

Et pour css

Couleur

Position

[thorn sky]

color

[digital ember]

Grid

Flex

Flex avancé même

Hover

Before after

Background image ...

[thorn sky]

de toute facon je pourrais m'aider de cheat fiche sur internet pour me remémorer quelques choss

choses

[digital ember]

Unite de mesure

Pour html normalement 0 chezt sheet

Sauf form et table en vrai

[thorn sky]

Bordel t'as 15 ans?

[digital ember]

C est une exception

Oui oui j'ai 15 ans

[thorn sky]

Pk,

?

[digital ember]

Jte jure je dis pas dla merde mdrrr fais moi confiance c est pas car j ai 15 ans que je coco rien

[thorn sky]

Ba je t'ai rien dit mdr

Juste pk?

[digital ember]

Si html tu sais pas le retenir ça va être très compliqué pour la suite

[thorn sky]

Ok ok je vois

[digital ember]

Nn tkt juste j ai l'habitude

Jui beaucoup critique avec mon age...

[digital ember]

Je pense à javascript

[thorn sky]

ah tkt t'as l'air de connaitre beaucoup de truc

[digital ember]

Attention j'utilise MDN pour faire mes formulaires et mes tableaux faut pas croire

Mais à part sa le html c est de tête

[thorn sky]

MDN c'est quoi ?

[digital ember]

Html c est surtout une question de bonne pratique

MDN c est la documentation du développeur

Web*

Très très très très très très très très très très très importante

Vraiment

T as MDN

[thorn sky]

Oui le problème c'est que je veux bien faire des sortes d'exercices pour pratiquer mais je sais pas ou aller

[digital ember]

Et ton cerveau

Tu vas très loin

[thorn sky]

ok merci pour le conseil

[digital ember]

T as déjà fait des exos qqpart ?

Ou 0 ?

[thorn sky]

0

La dernième fois que j'ai pratiqué on va dire c'est juste recopier le tuto youtube et comprendre la logique

C'etait jutse

Je suis un golmon désolé

[digital ember]

Tu as compris ?

[thorn sky]

Oui

[digital ember]

Vrm ?

Absolument tout

0 zone d'ombre

Envoies le tuto stp

[thorn sky]

Pas a ce que je chasse

https://www.youtube.com/watch?v=qsbkZ7gIKnc&t=2959s

[digital ember]

Ah ok c est bien

Jirai pas vérifié je connais l'homme

J ai bosse avec il y a qqes temps

[thorn sky]

J'ai pris plusieurs heure a comprendre la totalité

[digital ember]

Il a fait une maj du cours *

Ouais ben c est déjà pas mal

[thorn sky]

Oe j'ai vu ca

[digital ember]

T as une base

[thorn sky]

Je me suis dit que c'etait pas pertinant

[digital ember]

Sa dépend

[thorn sky]

Je crois c'est par rapport au extension

[digital ember]

Nn pas quand même mdr c est une vraie mak

[thorn sky]

aux extensions

[digital ember]

Maj

Jsplus les diff dsl

Mais tu connais freecodecamp ?

[thorn sky]

ok ok j'irai voir ca pour bien tout mémoriser a la perfection

[thorn sky]

nn

[digital ember]

Alors sur freecodecamp t as 3 choses à distinguer

• tuto ytb
• exo pratique avec cours a côté
• exo sans cours

J ai un avis trop tranché sur Freecodecamp ytb donc je t'en parlerai pas, je te laisse faire ton propre avis si tu veux mais sache que sa existe

[thorn sky]

C'est quoi le problème ?

Att je prend mon tel je vais au toillette

[digital ember]

Les exos pratique avec cours je suis assez mitigée

Ma copine les as fait pour apprendre

Je lui ai dit de les faire au moins je vois ce que sa donne

Et je trouve que en vrai on te donne peut etre trop la main

Mais c'est pas mal

Et les exos sans cours franchement fonce

Qd t es débutant c est dur

T en as pour 8h facile hein

Mais ils sont incroyables

[thorn sky]

Ok je m’aiderai des cours un petit peu puis après je le ferai sans

En vrai un fois que t’as la mémoire musculaire c’est facile

[digital ember]

Les exos avec cours a côté c nul car tu peux pas enlever le fait que on te tienne la main

[digital ember]

Jte rejoins pas trop en vrai

Alors oui des choses vont se ressembler navbar footer par exemple

Mais ensuite

Tout le reste sera différent d'un site à un autre

Pour avoir une mémoire musculaire faut que tt le monde code comme toi

C est pas possible jte le dis 😂

Chacun à sa méthode, il y a des normes qui donne des similitudes avec les codes mais c est tout

[thorn sky]

Je parle des trucs du genre table form p a img

C'est pas interchangable

@digital ember

[digital ember]

Alors oui non ça ne se change pas

Mais la facon de créer les sections va changer

[thorn sky]

Oe apres ca vu que ca impacte pas le visuelle on s'en branle un peu nn?

[digital ember]

Erreur fatale

Tu penses que sa impacte pas le visuel

Mais ensuite tu vas devoir faire le css

Et la tu vas faire : "ben c est bizarre sa fait pas sa sa sa ..."

Car tu as mal fait ton HTML

C est pour sa je suis mentor de 3 élèves actuellement

Et je sais que jles emmerde hein

Mais qd le html est parfait le css l est

Sans bon html le css c dla merde

[thorn sky]

Att

Je veux dire

Si je comprends le code mais que j'organise pas on va dire mon code c pg nn ? Si mon html est bon ?

Par exemple div ca sert a rien a part pour la présentation ?

[digital ember]

Div c est pour le css

Tu feras le test

Avec et sans div

Je voudrai bien t'expliquer mais tu connais rien en css donc c est trop compliqué mdr

Mais disons que en html

Les divs sont des parents

Et les trucs dedans des enfants