Reprise du message précédent :
Reprise d'un truc sur Hubspot : pourquoi ça ?
 
https://rehost.diberie.com/Picture/Get/f/95643

Il ne vaut mieux pas savoir
Ca c'est moche, le pire c'est quand je vois des <a href="#" onclick="..." class="btn"/>
Pour des boutons
Et parfois des button pour des liens

Et encore j'ai pas tout découvert.

D'ailleurs question que je me pose en ce moment, avec SASS (ou SCSS peu importe) vous êtes plutôt :

1/ Organiser par composant (et media queries à l'intérieur de ce composant)
2/ Organiser par rendu

Arbo exemple du 1 :

Arbo exemple du 2 :

Habituellement je fonctionne en 1 (regroupement par modules), avec un petit mixin qui me permet d'inclure mes media queries au fur et à mesure :

,

mais j'ai vu à plusieurs reprises du fonctionnement comme en 2, avec quelques mixins qui régissaient ce genre de règles.
J'ai pas d'avis vraiment tranché, mais le 2, c'est comme même plus bordélique non

organiser par composant et mediaquery à l'intérieur.
 
Actuellement je bosse sur un site avec pas mal de design et tout avait été fait en desktop first (j'avais pas les maquettes mobiles)
Mais comme j'ai énormément travaillé tout ce qui est fluide et que mon code est super simple, j'ai pu facilement voire très facilement repasser mon code en "mobile first".
 
En gros ça code ça :  
 
Avant :  

 
Et après :  

 
@include desktop est une simple mixin qui fait ça la même mediaquery que toi en min-width.
 
Et je le fais dans chaque composant, ça me permet d'avoir vraiment un contrôle total sur ce que je fais.

Ouaip, un peu comme moi, ça me parait "normal" de penser en composants, et pas en arbo 2.
Par contre, pour passer en mobile first, t'as du prendre chaque règle qui changeait, la passer dans ton mixin desktop, et la définir pour le mobile

Oui, mais comme ça ne représente quasiment presque rien en code, c'est bon, il n'y a que le header où j'ai du en mettre un peu plus, mais pour le reste à chaque fois c'est soit du flex-direction qui change, soit des micro bricoles.
 
Le site entier de base se comportait presque bien sur mobile puisque le bordel était fait en % ou sans dimensions et les images et vidéos sont de base responsives.

Ok (si le DOM est bien pensé, le CSS logique, normalement ça va de soi)
Souvent je ponds moi-même en desktop first, puis quand vient le mobile, je fais un C/C des règles qui vont changer, je les balances dans le mixin desktop, et je modifie la base.
Ça me permet de contrôler avec fluidité (si je veux rajouter des steps je peux), et j'ai quasiment pas d'overrides à la con.
Un bon design de base, c'est presque pas de règles desktop quand je regarde
Du coup je me retrouve avec des petits ajouts, sans plus, et ça reste lisible

Exemple :

tu as des PX un peu partout, déjà les margin/padding => em, comme ça si tu change le font-size, ils suivent automatiquement.
Apres c'est chelou que tes paddings diminuent pour une résolution plus haute, tu dois avoir un header un poil chelou.
Et pour le @before positioné en Px, perso, j'essaie de positionner ce genre de truc en %, sachant que : les margins et paddings verticaux, si tu les mets en %, ils dépendent de la largeur de leur parent.
Donc ça change pas mal de truc.
 
Mais vu la gueule de ta CSS, tu dois vraiment avoir un design assez particulier.

Design particulier + nécessité d'avoir un rendu au px près, d'où les padding en px et les line-height qui n'ont pas de logique réelle
Sinon, perso, c'est pas courant de changer le font-size du body, ça t'arrive toi
Une fois réglé à 1.6rem comme sur 99% des projets...

Oui quand je suis en mobile en dessous de 640px, dès que tu réduis la taille tout le site se réduit, ça m'évite de me faire chier sous certaines résolutions.

Et perso, px => em, pour tout, et si tu bosses biens tu reste pixel perfect

Edit : et j'espère que tu as une excellente raison de foutre un H1 en inline-block...

Quel est le problème à avoir un H1 en inline-block ?
J'ai un before sur l'élement, et je voulais que la largeur du bloc soit la largeur du contenu, t'as une autre méthode qui n'est pas plus complexe ? (j'aime ma culture KISS : Keep It Stupid Simple)
 
 
Bon sinon, la pépite du jour, on me demande de débugger une appli créée par un mec qui vient d'être viré d'une boîte
Je me connecte, j'ouvre index.php, puis je vois un include "utils.php", déjà je sens le lol d'organisation du code.
Puis j'ouvre utils.php :

 
   
 
C'est pas interdit depuis 20 ou 25 ans d'utiliser $_POST comme ça, sans verif ?

un Hx doit normalement avoir le comportement d'un bloc, si un gars reuse ton H1 et qu'il se tape un H1 inline ça le fait pas.
au mieux tu fous un span dedans.  
un H1 n'est jamais unique sur une page.

Ben surtout que le POST a l'air de concerner la manipulation de fichiers Donc, clairement, c'est chaud.

C'est clair !
Après peut-être que les tests sont faits en amont, où via une autre fonction qui vérifie qu'il n'y a rien de craignos dans $_POST  
 
 
(je me doute que non, mais on ne sait jamais...)
 
C'est où le site en prod qu'on joue un peu ?
 
Je suis très très loin d'être parfait en terme de code, je serai plus dans la catégorie "procédural et fichier fourre-tout de fonctions pratiques" que "des classes et des objets de partout" mais quand on touche à la sécurité j'essaie d'être très prudent quitte à faire des vérifs à 2 endroits (au tout début à réception de formulaire + juste avant l'appel à une fonction potentiellement dangereuse) pour être sûr...

Ça sert encore les &eacute; et autres &agrave; avec l'UTF-8 ?
 
J'aurais tendance à dire non mais je demande parce qu'un membre d'une association dont j'héberge le site vient de m'envoyer un document à mettre en ligne et y'en a partout.

Tant que tout est correctement configuré, pas du tout.

Je sais pas où tu as lu qu'un H1 doit être en bloc, oui, avec les sections il peut y avoir plusieurs H1 (un par section), mais on parle de mise en page, pas de sémantique.
Et quand bien même quelqu'un réuse le H1, ça correspond au style du site.

Je vais leur faire un sort alors, ça me facilitera la vie pour améliorer le document.

Merci

Hello,

Qu'est ce qu'on a comme service ou autre infra, pour installer sur un serveur (apache, avec PHP ?), de façon à ce que cela checke une boîte mail en récéption et fasse des actions en conséquent ?
Typiquement une boîte mail de support, qui détecte un email entrant, crée un ticket dans une BDD, et répond directement au client ?

Merci

Zammad. On utilise ça chez nous en self-hosted

Tu peux faire plein de règles assez facilement pour avoir de vrais workflow de réponses auto.

Et si ça colle pas à ton besoin, j'ai un outil qui tourne depuis 10 ans chez un client, les serveurs MX du nom de domaine sont routés chez Mailgun, et je reçois un webhook sur mon appli à chaque nouveau mail, selon des règles de routage que tu paramètre.  
 
Ensuite l'API fournie par mailgun permet de faire ce que tu veux de ton e-mail, et idem pour envoyer, leur API est pas mal.  
 
Mon use-case c'est exactement celui la : mails qui arrivent, ticket qui s'ouvre, dispatch de taches, et mail en retour une fois l'opération effectuée.

TIL :  
 
On peut via un truc tricky appliquer de la CSS à des mêmes éléments (ici des LI) en fonction de leur nombre :  
 
https://codepen.io/matthemattics/pen/ExaQZQR
HTML:

CSS :  

 
Alors à noter qu'avec flexbox quand vous voulez avoir vos mêmes éléments de la même taille malgré le nombre, il suffit de leur appliquer :  
 

 
Mais néansmoins dans certains cas cette technique CSS est très pratique

Faut quand même trouver le use case, dans cette situation.
Personnellement, je vais nommer les listes (avec des ID ou classes) dans ma sémantique, des listes comme ça ont forcément une signification ou une thématique dans la page.

MAIS ÉVidemment que je nomme les lists moi aussi
Moi dans mon cas j'avais une list horizontal, mais les items devaient avoir certaines largement spécifiques en fonction de leur nombre.
 
Donc j'ai regardé le mieux hein
ça sert aussi quand tu as 5 élément en desktop et qu'en tablet tu en voudrait 3 + 2

Trompage de topic Jubi

Quand on fait du sport, le corps sécrète de endorphine. Du coup, oui, le sport à une dose élevée peut rendre accro.

LOL, je me disais bien que je l'avais posté

[Samedi soir]

Bonsoir
Je cherche à intégrer ceci :

L'objectif est que j'intègre ça sous une forme réutilisable, c-à-d que je puisse changer le background d'un élément ou des 2 sans que ça casse tout, que je puisse changer la couleur de la bordure, ou appliquer un box-shadow.
Il faut aussi penser que le contenu peut changer : texte plus long (donc boîte plus haute), ou un des deux rectangles soit plus long (et donc garder la courbure telle que présentée)
Sur le papier ça parait simple, mais en réalité ça se complique un peu, je n'avais pas prévu de passer autant de temps sur un truc comme ça
J'ai exploré plusieurs possibilités :

- à base de jeu avec les pseudos éléments et l'overflow : c'est ce que j'ai au final intégré, mais je suis pas spécialement satisfait, sachant que cela ne respecte pas ce qui est présenté car le rectangle de gauche est encore trop loin du orange. (on peut jouer avec le z-index et faire un translate, mais c'est un peu moche).
- avec du clip-path : j'ai tenté, j'ai donc fait des ellipses dans des pseudos éléments en dessous, que j'ai à moitié positionné sous l'élément, MAIS la bordure est pas incluse dans le clip-path donc pas terrible.
- avec des background-images en radial : c'est presque ça, mais la forme ne convient pas, et je peux pas mettre d'image de fond dans celui de droite du coup.

J'ai donc tenté ceci : https://jsfiddle.net/kiwifraise/wj8qs5n2/4/ (juste le layout hein, le reste de la mise en forme c'est le dessert quand j'aurai fini )

Mais je suis pas convaincu, ça reste un peu trop bricolage pour moi (la jointure des bordures de l'élément du milieu sont approximatives, etc).

J'ai bien une autre solution à base de SVG que je positionne par dessus, mais si je peux éviter une image ça serait cool.
Z'avez des tips ?

https://jsfiddle.net/hdcqjfwx/134/

Je te laisse configurer les valeurs en fonction de la largeur de ta courbe
--convex-width : en px toujours
--convex-height : en % pour être aware avec les varations de hauteur de tes blocs
--decalage : en px; dépend de ta courbe et cette variable elle te sert de calage pour caler visuellement le bordel une fois que tu as réglé ta courbe.

PS : les containers sont en overflow:hidden du coup ,c'est la seule limitation du truc. Au pire tu fous les trucs dans des ".decorators" qui sont en position absolute / 100% et z-index:0, mais bon seulement si tu veux pas de overflow hidden sur .cellHolder.
et au niveau HTML j'ai viré une couche de div dans les .cellHolder

Sinon vire moi tes hauteurs figées là tu verras dans le code un quickfix (que tu utilisera via une nouvelle classe CSS) pour les rendre à la même hauteur.

Merci d’avance, je suis sur mobile donc je regarderai plus tard
Pour la hauteur fixe c’était juste pour le fiddle mais je pense que tu l’avais bien compris

Bon c'est pas mal, mais la bordure est pas de la même largeur le long du bloc. (j'ai eu le même soucis)
 

En virant la border, en mettant un fond blanc et un z-index:-1 sur l'ellipse et en utilisant un drop-shadow pour simuler la bordure, on arrive à quelque chose.
Bon j'ai bricolé  bricolé quelques valeurs tu verras, donc s'il faut modifier les largeurs des blocs il faudra juste modifier quelques trucs aussi.
https://jsfiddle.net/j587pach/19/
la flème de continuer, bonne chance

Edit : je t'ai rajouté les coins arrondis mais pour cela j'ai du modifier ::after pour que ce soit lui qui porte toutes les bordures:

mais qui a fait le design de ça ? y'a déjà un carton jaune orangé a filer au designer avant de passer au front end   le bloc de gauche n'a pas de border-radius, alors que celui du milieu oui ? Et pourquoi cette forme ? un classique 3 colonnes serait tellement + classe. On peut jouer sur plein d'autres choses pour apporter un peu d'originalité la typo, des décalages entre les blocs etc

Ca fait partie des créas et faut savoir faire ça et puis c'est tout

Bon j'ai redivisé la marge negative (margin-right) par 2 et celle de l'élément de gauche, je l'ai aussi divisée par 2
Ce qui fait que chaque élement vient vers l'autre avec sa décoration.
https://jsfiddle.net/eutr564s/16/

Ce genre de technique de marges négatives ne fonctionne que si l'élément a une width:auto.

J'ai aussi refixé celui de droit afin que l'angle soit parfait

 
c'était pas une critique c'est juste mon métier l'UI, et si y'a bien une chose que j'ai appris en 10 ans de métier, c'est que parfois y'a aucune valeur ajoutée à faire des formes comme ça. En responsive c'est galère, ça nuit à la lisibilité, ça prend 10 fois + de temps à intégrer, c'est complexe et ça va engendrer du spécifique. Donc si on fait la balance sur la valeur ajoutée par rapport au temps passé en UI / dev, je crains que ce soit pas assez mais c'est un autre sujet  Et faut prendre soins de nos chers dev front-end / intégrateurs

bah en responsive c'est nullement galère, en mobile tu vires cette merde tout simplement, et tu la fait apparaitre que en desktop
Mais la vie d'un frontend engineer c'est justement de faire en sorte que ce furoncle soit facile à maintenir.  
Là ça fait ,tu colles des classes et c'est bon, mais j'ai fait à l'arrache, si j'avais plus de temps

 
FAUT QUE CE SOIT PIXEL PERFECT, T'ENTENDS ???

Intéressant: https://kofi.sexy/blog/modern-spas
 
(utiliser des featioures super modernes pour avoir une expérience décente sans utiliser de gros bundler ou quoi, sur des petits projets)

Yo! Je fais de la veille mais je trouve pas ce que je veux ^^ Vous connaissez des agences françaises orientées "tech", moins de design. J'en connais un tas qui sont + spécialisées en ui / ux. Mais ça reste des "petites" agences (suffit d'aller voir le directory de Awwwards ou Maxibestof.one) qui ont souvent une communication un peu + décalée.
 
Je cherchais des agences web + pro / corporate avec une comm + sérieuse / tech. Typiquement Idean (https://web.archive.org/web/20210131093009/https://www.idean.com/) mais ils se sont fait racheté par Frog (leur nouveau site est un peu pourri imo).
 
Je sais pas si ma description est claire