Reprise du message précédent :

$(".nav__cats" ).on("click", "a", function(){
    console.log($(this));
    $(this).parent().parent().find("li" ).removeClass("active" );
    $(this).parent().addClass("active" );
});

 
 
C'est plus simple de faire ca sur tes LI directement
 

$(".nav__cats" ).on("click", "li", function(e){
    var self = $(this);
    self.siblings().removeClass("active" ) && self.addClass("active" );
});

 
et si tu veux remonter : $(this).closest(".nav__cats" )

$(".nav__cats" ).on("click", "li", function(e){
    var self = $(this);
    self.siblings().removeClass("active" ) && self.addClass("active" );
});

 
propre  
 
Je vois souvent "self" dans les scripts JS quand j'essaie de comprendre pour m'en inspirer. C'est une convention de nommage comme this ? ou ça fait vraiment quelque chose en plus ?

Sinon une question PHP, dans mes designs je scinde souvent mes titres en 2 parties (title / subtitle), je crois que c'est ma lubie du moment    
genre ou
Et lors de l'intégration je suis obligé de me taper une regex pour détecter le premier espace, bon un bête preg_replace et ça passe ^^ heureusement qu'il y a regex101.com    
 
Genre dans mon cas, si j'ai 3 mots il me faudra une regex qui me renvoie les 2 premiers. En gros qui coupe à la motié intelligement  Pour l'instant je demande à mes clients de ne pas marquer leur vie dans les titres
 
Et je me demandais si vous aviez des regex solides ou fonctions / librairie que vous réutilisiez lors de vos projets ?

 
C'est tellement plus classe que des regex  

Dans le scope de la fonction, "this" fait référence à l'élément DOM. Pour retrouver cet élément mais avec l'enveloppe jquery, faut lui appliquer la fonction $(), le résultat étant un objet tres similaire à this mais avec du jquery en +, fallait bien le mettre dns une variable dont le nom est un synonyme proche .. d'où le "self", ou le "that" ou n'importe quoi d'autre. slef n'etant pas un mot clef réservé en JS, il revient souvent mais de là à parler de convention ...
"this" par contre est un mot clef completement réservé servant à choper ton scope courant

Self c'est juste le this en python.
 
Ca garde le scope d'un endroit donné, pratique quand tu enchaines les scope dans des callbacks.
 
 
T'a 3 conventions courantes:

 
T'a aussi une dernière

 
Mais déjà moins utilisée que les autres.
 
La plus courante étant that. Puisque en anglais la différence entre that et this en anglais tient de la distance entre l'interlocuteur et l'objet:
 
http://www.anglaisfacile.com/exerc [...] is-291.php
 
Etant donnée que var that = this; sert a garder une trace d'un scope en amont d'un callback qui perd le scope, le that est parfait puisqu'il décrit un scope plus lointain (en amont) que le this
 
/2min d'anglais utile
 
 
Maintenant dans ton cas, le self fait aussi bonne figure, puisqu'ici tu ne gardes pas le scope, tu cherches à garder un référence sur le parsing jQuery, pour éviter de le faire deux fois:

 
est plus rapide que:

 
Puisque dans le deuxième cas tu exécutes 2x la fonction $ avec $(this), donc plus lent que l'allocation d'une variable...

self n'est pas un mot clé en JS mais est censé être un proxy vers window dans un navigateur, du coup si on utilise self dans une fonction JS, on a plus accès à ce self global dans cette portée. C'est donc parfois déconseillé au profit de that ou _this.
http://www.nczonline.net/blog/2007 [...] ldn-t-use/

 
ah ouais tiens c'est vrai ca, j'utilise toujours window.self mais c'est assez rare tout de meme.
 
 

 
je dirais : /^(.*) +\b(\w+)$/s
match group1 => n'importe quoi avant le dernier mot
match group2 => le dernier mot [a-zA-Z0-9_]
"-" ne fait pas partie de \w et est donc traité par \b comme un word boundary donc si tu as des mots composés ou des tirets cadratins ca passera pas.

Bonjour.
C'est puissant le HTML quand même.
Je m'intéresse au Web depuis quelque jours car en réfléchissant un peu je me suis dis pourquoi on ne pourrait pas tout faire en html.
Je croyais que le HTML était orienté texte. Mais avec le développement donc, on doit pouvoir faire n'importe quoi.
Qu'en pensez-vous ?

Le HTML c'est juste pour de l'organisation de contenu et plus (video, audio)
Le HTML5 propose en plus des API, mais ces API sont exécutées avec du JS
le JS en coté navigateur te permet de faire beaucoup de chose, mais en restant dans le browser.

Ok, merci beaucoup pour ta vision des choses.
A mon avis peu importe de quel côté est exécuté l'opération fondammentale, l'important c'est d'implémenter le service pour le HTML.
Non ?

Le HTML sert uniquement à faire de la présentation visuelle, pas à gérer des comportements dynamiques comme par exemple aller chercher une information précise.
Le HTML5 (couplé à du JS spécifique) permet certes d'étendre ces possibilités légèrement en dehors de ce cadre initial, mais ça n'est pas une fin en soi.
 
La frontière de ce qui doit se faire côté client et côté serveur est de plus en plus floue ces dernières années vu que maintenant des applis entières peuvent tourner côté client, mais les limitations (logiques) du HTML sont parfaitement claires elles.

Merde Jovalise, qu'est-ce que tu fais là ?

Ne lui répondez pas SVP, ça va pourrir ce topic

La question était à peu près compréhensible et adéquate pour le sujet, donc j'ai pris sur moi de lui répondre .

 
 
Merci pour ces explications  
Y'a t'il un interêt à avoir deux instructions sur la même ligne avec "&&" ? C'est juste pour la visibilité ? j'utilise Gulp pour compiler et JSHint me renvoi un warning sur cette ligne   "Expected an assignment or function call and instead saw an expression."

La 2nde instruction n'est pas exécutée en cas d'échec de la première.

D'acc  

Bonjour !
 
Cherchant sans relâche une solution pour cette div qui ne veut rien comprendre je me résigne à venir ici pour savoir si vous avez déjà rencontré ce problème.
 
Ma div s'appelle conteneur et celle-ci ne veut pas s'adapter à son contenu. Mon min-height est de 660px.
 
Je vous poste une photo de ce qu'ai comme problème. J'analyse mon code avec firebug.
 

 
tes elements a l'interieur seraient pas en float:xxx par hasard...

Ils sont en float: left
 
J'ai fait un clear: both sur ma div conteneur rien à faire ...

le clear c'est seulement par rapport à un flottant, tant que ta div est conteneur, un clear:both ne servira à rien. Soit tu appliques du contexte de formatage (overflow:hidden ou display:table).
Soit (et c'est la meilleure solution) tu appliques un clearfix sur ton div :  
 

Et un overflow hidden ?
 
Édit : visiblement c'est pas la meilleur solution  

l'overflow:hidden t'appliquera le contexte de formatage ( http://www.alsacreations.com/astuc [...] n-css.html )
Mais te rajouteras une contrainte.
Le clearfix que je t'ai fourni est la meilleure solution.

Wow ! Ce display : table fait des miracles =O !!!
 
Merci beaucoup beaucoup !

 
+1 pour le pseudo element.
sinon y'a toujours la solution flexbox qui est plus clean mais ca depend de tes browser cibles

Firefox, IE et Chrome, le reste j'en ai pas besoin.

J'ai passé 3-4 jours à optimiser la vitesse de chargement de notre e-commerce responsive :

- optimisations sql / php
- gzip/deflate/expires
- nettoyage css / js

Mais Google Page Insights m'embêtait pour la partie mobile, sur les CSS qui bloquaient l'affichage au dessus de la ligne de flottaison : il me demandait de différer le chargement des CSS (pas trop possible pour pas avoir d'effet "html brut > html mis en forme pendant 0.5s), ou de mettre le CSS en inline dans le head via <style></style>.

J'ai +/- 150ko de CSS à balancer (120ko de twt bootstrap + 30ko de css à moi)

Dubitatif, j'ai testé un sale :

Je suis passé au vert sur Page Insights :

Avantages percus : je suis au vert auprès de Google, je réduis de deux requêtes http, j'ajoute pas spécialement de charge niveau serveur (file_get_contents, ça devrait aller ...)

Desavantages : je perd la mise en cache navigateur de la feuille de style css et surtout, je passe de +/- 17% de ratio texte/code à 5%

Votre avis : bonne ou mauvaise pratique ?

Si tu cherches à maximiser le cache, pourquoi ne pas être passé par le cdn ?

ha oui, bootstrap est dispo sur CDN    
Mais insights risque de me remonter le meme problème de ressource css qui bloque l'affichage de la page non ?

Jamais testé le CDN avec insight...
 
EDIT: ca me parait étonnant que insight te donne le placement CSS en bas, sachant que ya des façons plus ou moins recommandée de charger du CSS (certaines sont asynchrones d'autres non), tu peux poster le bout de code avant la modif ?

C'était de manière classique :
 

 
J'ai juste remplacé par :
 

Les CSS doivent de toute façon être chargées en haut de page car sinon tu te retrouve avec un effet degueulasse sur l'affichage de ton site.

Je cherche un moyen de faire qqchose en JS mais je ne sais pas trop si c'est possible
 
Je veux afficher / masquer une zone avec un bouton, jusqu'ici rien de compliqué.
Sauf que dans cette zone, j'ai des liens qui mènent vers une autre page (chargée en ajax + pushstate). J'aimerai que le statut de la zone (ouvert/fermé) soit mémorisée afin d'éviter de sans cesse ré-ouvrir cette zone quand on fait un "précédent". J'ai testé la solution pushState (et replaceState) + un hash dans l'url mais apparement ça rentre en conflit avec la librairie que j'utilise (pjax.js) et du coup mon retour/précédent ne fonctionne pas... Faudrait faire seulement avec les hash dans l'URL mais j'ai pas trouvé le moyen de retirer un hash.. on peut ajouter mais pas retirer c'est bien ça ? Sinon y'a un autre moyen ?  
 
edit: c'est bon apparement avec history.replaceState($.pjax.state, null, href) ça marche, c'était l'objet state qui devait faire foirer la librairie

Pourquoi t'embeter avec des hash dans l'url pour du stockage persistant ? C'est plutôt le boulot d'un cookie ou du localStorage.

 
spécifique pagespeed, tu split ta css en 2 parties, la partie indispensable a l'affichage au dessus de la ligne de flottaison et le reste.
puis du load conditionnel de tes css avec les media queries
150Ko de css bootstrap c'est que tu charges TOUTE la css des le départ. fait un petit tour par SASS ou LESS et prioritise tout ca.
 
C'est seulement apres que tu peux essayer d'integrer ta css en internal dans la page.
mod_pagespeed le fera pour toi d'ailleurs => https://developers.google.com/speed [...] css-inline
sinon si tu veux absolument le faire dans tes templates readfile() est plus rapide et moins couteux que echo (file_get_contents())
 

Pour réduire la partie bootstrap t'as testé : http://getbootstrap.com/customize/ ?

Merci pour les retours, j'ai trouvé cet article du coup qui semble bien complet et expliqué :
 
http://www.appneta.com/blog/bootstrap-pagespeed/

Truc bête en PHP :
Dans un système modulable, j'ai un objet de type "Widget"
Dans le templating, je peux appeler mes widgets du style App::getWidget(UID)->getByPos(1)->getTitle();
Ce système peut-être désactivé en configuration

Comment je peux faire pour ne pas me retrouver avec des erreurs du type "Call getTitle on null at line xx" ? Et renvoyer un simple "Widgets are desactivated" ?
Existe-t-il des magics functions qui n'arrêtent pas le script PHP et balance un message personnalisé ?
Thx

Renvoie un objet qui implémente __call au lieu de null.

Tu peux aussi implémenter __get pour les accès à des attributs.

Ok merci.
J'aurai pu faire un simple <?php if(App::getConfig('Widgets')):?>, mais c'est moche dans le template et c'est pas son boulot de vérifier ça, so je vais jeter un oeil sur __call justement (j'y pensais)