Forum : Feedback sur code html / css / js

Hello tout le monde,

Je me suis rendu compte que je n'ai jamais eu de feedback sur mon code que ce soit HTML (j'utilise pas mal JADE pour le coup), CSS (SASS) ou JS (où j'ai un niveau pas top). Du coup, j'ai un Codepen et ci dessous, deux - trois réalisations qui ont bien marchées :

Hover animation

Quote Animation Inspiration

Animation Submit Button

Material Design Menu

Side Menu

Voilà, si vous avez des liens aussi pour optimiser et bien architecturé votre code, comme le fait Grafikart en css avec ses class .aa .aa--bb.

Merci à vous

EDIT : Me voilà bien embêté les iframes de marchent seulement dans la preview, à corriger @Grafikart, du coup vous avez des liens pas beaux qui n'amene même pas sur un nouvel onglet :'(

betaWeb

Réponse acceptée

@Astor, typiquement, pour "Material Design Menu", tu peux optimiser comme suit:
JS

$(function() {
    var $main = $( "#main-button" );
    var $btn  = $('.Button');

    $main.click(function() {
        $main.addClass("disp", 190);
        $btn.addClass("is-active", 200);
    });
    $btn.click(function() {
        $main.removeClass("disp");
        $btn.removeClass("is-active", 200);
    });
});

CSS

.is-active
    opacity: 1
    transform: rotate(0deg)!important

    &#a     
        margin-left: -45px!important
        margin-top: -45px!important
    &#b     
        margin-left: 0px!important
        margin-top: -45px!important
    &#c     
        margin-left: -45px!important
        margin-top: 0px!important
    &#d     
        margin-left: 0px!important
        margin-top: 0px!important

Ce n'est pas encore optimal et il y a sûrement d'autres façons de le faire, mais bon.

http://codepen.io/betaweb/pen/QbQqrj/

JeremDevWeb

J'adore tout surtout le bouton submit.
Ce serait bien pour le Side d'en faire un site avec un menu comme ça et si possible via wordpress ;) de plus le bouton submit, en ajax verifier si l'input text est vide sinon sa sera rouge avec une croix ;)
Très bonne continuation j'adore ;-)

Astor

Auteur

Merci @JeremDevWeb !
Pour le menu, c'est chopé d'un gif sur dribbble, le travail ne m'appartient pas, je vais pas encore plus lui piquer son boulot ahah
Et pour le bouton c'est juste pour le délire, pareil c'est un shot dribbble, après si on doit l'utiliser pourquoi pas, et puis j'ai jamais touché à l'AJAX :)

betaWeb

Salut,

Du bon boulot, j'aime beaucoup les "Quote Animation Inspiration" & le "Animation Submit Button" !
Un bémol concernant le JS qui manque d'optimisation, mais c'est un petit détail.
Si tu as envie de nous faire partager d'autres créations, n'hésites pas ! :)

Astor

Auteur

Hello @betaWeb, justement je cherche à savoir comment optimiser tout ça, si tu as des indications je suis prenneur !
Merci ! :) J'essaye de publier de plus en plus sur Codepen, je ferais un update quand j'aurais de jolies choses à vous montrer :P

Astor

Auteur

Oh super ! Dis toi, j'avais jamais pensé à mettre les noms dans des variables... #gné
Et sémantiquement, le .is-active est bien cool, j'y pense jamais... Thanks :)

betaWeb

@Astor, pas de soucis, c'est un peu d'optimisation. Et puis si tu as plusieurs éléments à binder en JS, il vaut mieux leur mettre une classe commune et utiliser celle-ci pour sélectionner ton élément :)

Après le CSS, j'ai fait un poil d'optimisation mais je ne connais pas SASS donc bon.

Astor

Auteur

Quand tu dis binder, c'est plusieurs éléments à "modifier" ?
Oui merci :)

betaWeb

Par binder, je veux dire ajouter un écouteur d'évènement (event listener) ;)

Astor

Auteur

Ah merci, va falloir que je me forme... Suffit de bidouiller ! :)

betaWeb

@Astor: "bidouiller" n'est pas le bon terme, il faut t'entraîner plutôt ;)

tleb