janvier 2019 – devfrontend.info

[crossbrowsertesting.com] Erreur « Invalid Host Header » où comment accéder à un site en localhost

21/01/2019 / admin

Source: What is this “Invalid Host Header” error?

Dans le cadre d’un projet Angular

Angular CLI 6 dans mon exemple, mais voir la documentation officielle de Cross Browser Testing pour des projets Angular 2 ou Webpack.

Stopper le serveur (si il tourne) et le relancer en incluant les paramètres suivants dans la commande: --host 0.0.0.0 --disableHostCheck=true.

Si vous utilisez NPM et que vous exécutez votre serveur via un npm start, éditez le fichier package.json (ligne « scripts » > « start ») pour y ajouter les paramètres cités plus haut. Exemple:

"scripts": { "start": "ng serve --host 0.0.0.0 --disableHostCheck=true --port 4200 --proxy-config proxy.conf.js", },

1
2
3

  "scripts": {
    "start": "ng serve --host 0.0.0.0 --disableHostCheck=true --port 4200 --proxy-config proxy.conf.js",
  },
Sur Quel Est Mon IP, récupérez votre IP Locale (qui commence probablement par 192.168… Dans mon cas 192.168.67.219).
Dans l’interface de crossbrowsertesting, commencer par activer la connexion locale (depuis le bandeau « Local Connection OFF/ON »)
Taper dans la barre d’adresse de l’appli: http://votre_IP_locale:4200 (exemple: http://192.168.67.219:4200/)

[CSS][javaScript] Styler les barres de défilement (scrollbar) du navigateur

18/01/2019 / admin

Ressources:

La barre de défilement est un élément d’UI propre à chaque OS et navigateur. L’aspect visible sur la maquette est celui d’un OS Mac et du navigateur Safari.

Tu peux faire un test en ouvrant la page suivante sous plusieurs navigateurs et en déroulant la 1ère liste de sélection: https://ng-select.github.io/ng-select#/data-sources

Changer l’aspect de cet élément se révèle faisable dans certains cas (pas tous!) et peut poser de gros soucis de performances suivant la solution choisie.
Je vois trois solutions:

Solution reposant uniquement sur CSS: c’est la plus propre, la plus légère et elle ne devrait pas poser de problèmes de performances. C’est de loin la plus rapide à mettre en place et la plus fiable (enfin… sauf si tu choisis la solution 3).
Problème: ça fonctionnera seulement avec les dernières versions de Chrome et Safari (supports mobile et desktop) et pas avec Firefox, IE, Edge, etc… qui conserveront l’aspect natif.
Solution reposant sur javaScript: cela reviendrait à mettre en place du code sâle, lourd et à s’exposer à des problèmes de performances sans pour autant garantir que l’affichage sera parfait sur tous les navigateurs.
Il faut également ajouter que les scripts que j’ai vu fonctionnent avec le contenu qui s’affiche au 1er chargement de la page et pas forcément avec du contenu qui se régénère à la volée comme cela se produit dans une application Angular.
La solution que je préconise: accepter que chaque OS et navigateur puisse avoir une scrollbar différente et ne rien toucher.
En soi, la scrollbar de la maquette n’a pas fait l’objet d’une attention particulière en terme de design. Elle est ainsi parce que la maquette a été réalisée sous Mac.

Source: https://stackoverflow.com/a/14150577/1662176

[Angular CLI] Avoir son serveur Angular dans une Machine Virtuelle Ubuntu Server et accéder à localhost depuis Windows

15/01/2019 / admin

Ressource en ligne: How to allow access outside localhost.

Problème

J’ai une appli Angular qui tourne dans une machine virtuelle Ubuntu Server (sous Virtual Box). Lorsque je tape la commande ng serve, la compilation s’effectue correctement et j’ai un message de log qui me dit: ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **.

Problème: je n’ai pas accès à l’application à l’adresse http://localhost:4200/ depuis mon navigateur sous Windows.

Solution

Dans la machine virtuelle, commencer par taper ifconfig. Il faut alors récupérer la valeur de eth1 > inet adr (dans mon exemple ci-dessous: 192.168.56.101).

eth1 Link encap:Ethernet HWaddr 08:00:27:99:e5:9a
inet adr:192.168.56.101 Bcast:192.168.56.255 Masque:255.255.255.0
adr inet6: fe80::a00:27ff:fe99:e59a/64 Scope:Lien
UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1
Packets reçus:10502 erreurs:0 :0 overruns:0 frame:0
TX packets:19907 errors:0 dropped:0 overruns:0 carrier:0
collisions:0 lg file transmission:1000
Octets reçus:680007 (680.0 KB) Octets transmis:27440635 (27.4 MB)

Ensuite, toujours dans la machine virtuelle, taper ng serve --host 192.168.56.101 (remplacer l’IP dans mon exemple par votre propre IP, bien-sûr).

Puis, dans votre navigateur, taper l’URL qui vous est donnée par le log (avec mon exemple: http://192.168.56.101:4200/).

La config réseau de ma VM sous Virtual Box (au cas où)

Si la solution plus haut ne fonctionne pas, vérifier peut-être la config réseau de votre machine virtuelle. Dans l’application Virtual Box (sous Windows cette fois…) clic droit sur votre VM > Configuration > onglet Réseau > onglet Carte 1. Chez moi, j’ai ceci:

[CSS] Trouver l’élément trop large qui fait apparaître une scroll barre horizontale dans votre page

14/01/2019 / admin

Source: 108 byte CSS Layout Debugger.

Certains éléments vont causer l’apparition d’une barre de scroll horizontal dans votre navigateur à cause de leur largeur. La façon la plus simple de trouver la cause à ce problème est d’utiliser l’outline CSS. Voici un script par Addy Osmani qui permet d' »outliner » chaque élément d’une page.

Copier/Coller le code ci dessous dans la console de debug de votre navigateur:

[].forEach.call($$("*"), function(a) {
  a.style.outline =
    "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

[].forEach.call($$("*"), function(a) {

a.style.outline =

"1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);

});

[SPIP] Menu déroulant géant multi-colonnes accessible – Modifier le rendu HTML du plugin Menus afin que les listes soient correctement structurées

11/01/2019 / admin

Ressources en ligne:

Problème: Structure de listes dans les menus

Les menus, qui sont présents sur toutes les pages comprennent des listes de un seul élément ce qui n’est pas du tout efficace pour les structurer.

Solution:

Objectif: il s’agit, pour résumer, de remplacer des balises UL et LI par des balises DIV, mais attention: pas dans tous les cas!

Pour ce faire, deux actions à réaliser:

1. Modifier la balise UL portant les classes « menu-liste menu-items nav » et l’attribut DATA-DEPTH lorsque sa valeur est « 1 » en la remplaçant par DIV.
Remarque: quand la valeur de l’attribut DATA-DEPTH est de « 0 » ou « 2 », on ne remplace pas la balise UL par DIV.

2. Modifier la balise LI portant les classes « menu-entree item colonne » en la remplaçant également par DIV.
Remarque: il faut remplacer la balise LI par DIV seulement si celle-ci se trouve imbriquée dans une balise DIV remplissant deux conditions:

la balise parente DIV (initialement UL avant le changement en point 1) porte les classes « menu-liste menu-items nav »,
la balise parente DIV à un attribut DATA-DEPTH dont la valeur est « 1 » (pas « 0 » ou « 2 »).

Fichier spip/plugins/contrib/menus/inclure/menu.html:

Avant modification

<BOUCLE_menu(MENUS){id_menu?}{identifiant?}>
	<B_entrees>
	<ul class="menu-liste menu-items[ (#ENV{class})][(#VAL{_MENUS_EXTRA_CLASS}|defined|oui)[(#VAL{_MENUS_EXTRA_CLASS}|constant)]][ (#CHAMP_SQL{css})]"[ data-depth="(#ENV{depth,0})"]>
		<BOUCLE_entrees(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}
		[(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}
			]<BOUCLE_sous_menu(MENUS){id_menus_entree}>
				<INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu>[(#REM)
			On ferme le li si le type d'entrée accepte des sous-menus
			et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)
		][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})
		</li>]
		</BOUCLE_entrees>
	</ul>
	</B_entrees>
</BOUCLE_menu>

<BOUCLE_menu(MENUS){id_menu?}{identifiant?}>

<B_entrees>

<BOUCLE_entrees(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}

[(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}

]<BOUCLE_sous_menu(MENUS){id_menus_entree}>

<INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu>[(#REM)

On ferme le li si le type d'entrée accepte des sous-menus

et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)

][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})

</li>]

</BOUCLE_entrees>

</ul>

</B_entrees>

</BOUCLE_menu>

Après modification

On ajoute une condition si la profondeur est égale à « 1 », alors on transforme les UL/LIs en DIVs, sinon on ne touche pas à la structure initiale.

<BOUCLE_test_depth(CONDITION){si #ENV{depth}|=={1}}>
    [(#REM) _vrai: si la profondeur est de "1"]
    <BOUCLE_menu_vrai(MENUS){id_menu?}{identifiant?}>
            <B_entrees_vrai>
                <div class="menu-liste menu-items[ (#ENV{class})][(#VAL{_MENUS_EXTRA_CLASS}|defined|oui)[(#VAL{_MENUS_EXTRA_CLASS}|constant)]][ (#CHAMP_SQL{css})]" data-depth="1">
                    <BOUCLE_entrees_vrai(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}
                    [(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}
                            ]<BOUCLE_sous_menu_vrai(MENUS){id_menus_entree}>
                                    <INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_vrai>[(#REM)
                            On ferme le li si le type d'entrée accepte des sous-menus
                            et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)
                    ][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})
                    </div>]
                    </BOUCLE_entrees_vrai>
                </div>
            </B_entrees_vrai>
    </BOUCLE_menu_vrai>
</BOUCLE_test_depth>
    [(#REM) _faux: si la profondeur n'est pas de "1"]
    <BOUCLE_menu_faux(MENUS){id_menu?}{identifiant?}>
            <B_entrees_faux>
                <ul class="menu-liste menu-items[ (#ENV{class})][(#VAL{_MENUS_EXTRA_CLASS}|defined|oui)[(#VAL{_MENUS_EXTRA_CLASS}|constant)]][ (#CHAMP_SQL{css})]"[ data-depth="(#ENV{depth,0})"]>
                    <BOUCLE_entrees_faux(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}
                    [(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}
                            ]<BOUCLE_sous_menu_faux(MENUS){id_menus_entree}>
                                    <INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_faux>[(#REM)
                            On ferme le li si le type d'entrée accepte des sous-menus
                            et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)
                    ][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})
                    </li>]
                    </BOUCLE_entrees_faux>
                </ul>
            </B_entrees_faux>
    </BOUCLE_menu_faux>
<//B_test_depth>

#FILTRE{trim}

<BOUCLE_test_depth(CONDITION){si #ENV{depth}|=={1}}>

[(#REM) _vrai: si la profondeur est de "1"]

<BOUCLE_menu_vrai(MENUS){id_menu?}{identifiant?}>

<B_entrees_vrai>

<BOUCLE_entrees_vrai(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}

[(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}

]<BOUCLE_sous_menu_vrai(MENUS){id_menus_entree}>

<INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_vrai>[(#REM)

On ferme le li si le type d'entrée accepte des sous-menus

et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)

][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})

</div>]

</BOUCLE_entrees_vrai>

</div>

</B_entrees_vrai>

</BOUCLE_menu_vrai>

</BOUCLE_test_depth>

[(#REM) _faux: si la profondeur n'est pas de "1"]

<BOUCLE_menu_faux(MENUS){id_menu?}{identifiant?}>

<B_entrees_faux>

<BOUCLE_entrees_faux(MENUS_ENTREES){id_menu}{par rang}>#SET{entree,''}

[(#MENUS_AFFICHER_ENTREE)#SET{entree,' '}

]<BOUCLE_sous_menu_faux(MENUS){id_menus_entree}>

<INCLURE{fond=inclure/menu, env, id_menu, identifiant, depth=#ENV{depth,0}|plus{1}} /></BOUCLE_sous_menu_faux>[(#REM)

On ferme le li si le type d'entrée accepte des sous-menus

et si on a bien quelque chose dans le li (cas des menus sur Balise SESSION)

][(#GET{entree}|et{#TYPE_ENTREE|menus_type_refuser_sous_menu|non})

</li>]

</BOUCLE_entrees_faux>

</ul>

</B_entrees_faux>

</BOUCLE_menu_faux>

<//B_test_depth>

#FILTRE{trim}

Fichier spip/plugins/site/squelettes/mass_squelette/v1/menus/colonne.html:

Avant modification

#SET{contenu, #ENV*{contenu}|_T_ou_typo}

[(#ENV{appel_formulaire}|oui)
	<div class="titre"><:mass:menu_colonne_nom:></div>
	[<div class="libelle">(#ENV{libelle})</div>]
        <div class="titre"><:mass:menu_colonne_nom:></div>
        [<div class="libelle">(#ENV{libelle})</div>]
]
[(#ENV{appel_menu}|oui)
	<li class="menu-entree item colonne[ (#ENV{css})]">
		[(#GET{contenu}|expanser_liens)]
]
[(#FILTRE{trim})]

#SET{contenu, #ENV*{contenu}|_T_ou_typo}

[(#ENV{appel_formulaire}|oui)

[<div class="libelle">(#ENV{libelle})</div>]

[<div class="libelle">(#ENV{libelle})</div>]

]

[(#ENV{appel_menu}|oui)

[(#GET{contenu}|expanser_liens)]

]

[(#FILTRE{trim})]

Après modification

…devient (un simple remplacement de l’élément li par div) :

#SET{contenu, #ENV*{contenu}|_T_ou_typo}

[(#ENV{appel_formulaire}|oui)
	<div class="titre"><:mass:menu_colonne_nom:></div>
	[<div class="libelle">(#ENV{libelle})</div>]
        <div class="titre"><:mass:menu_colonne_nom:></div>
        [<div class="libelle">(#ENV{libelle})</div>]
]
[(#ENV{appel_menu}|oui)
        <div class="menu-entree item colonne[ (#ENV{css})]">
            [(#GET{contenu}|expanser_liens)]
]
[(#FILTRE{trim})]

#SET{contenu, #ENV*{contenu}|_T_ou_typo}

[(#ENV{appel_formulaire}|oui)

[<div class="libelle">(#ENV{libelle})</div>]

[<div class="libelle">(#ENV{libelle})</div>]

]

[(#ENV{appel_menu}|oui)

[(#GET{contenu}|expanser_liens)]

]

[(#FILTRE{trim})]

Un peu de style:

Si votre menu utilise un thème Bootstrap, vous aurez probablement à rajouter cette ligne quelque part dans l’un de vos fichiers de style:

.navbar .nav > div {
    float: left;
}

.navbar .nav > div {

float: left;

}

[SPIP] Ajout d’un attribut d’accessibilité aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au RGAA

11/01/2019 / admin

Objectif: Ajout d’un attribut aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au critère 7.1.1 du RGAA (Compatibilité avec les outils d’assistance).

Blocs dépliables, version 1.2.2 (pas testé avec d’autres versions)
Fichier concerné: spip/plugins/contrib/blocsdepliables/js/blocs.js.

1. Dans la fonction blocs_toggle_slide_dist, modifier la ligne suivante:

return this.is(".blocs_slide")?this.slideUp(blocs_slide):this.slideDown(blocs_slide);

1	return this.is(".blocs_slide")?this.slideUp(blocs_slide):this.slideDown(blocs_slide);

…comme ceci:

return this.is(".blocs_slide")?this.slideUp(blocs_slide).attr('aria-expanded', 'false'):this.slideDown(blocs_slide).attr('aria-expanded', 'true');

1	return this.is(".blocs_slide")?this.slideUp(blocs_slide).attr('aria-expanded', 'false'):this.slideDown(blocs_slide).attr('aria-expanded', 'true');

2. Dans la fonction blocs_toggle, ajouter:

cible.children('.ouvrir_fermer').attr('aria-expanded', cible.is('.blocs_replie')?false:true);

1	cible.children('.ouvrir_fermer').attr('aria-expanded', cible.is('.blocs_replie')?false:true);

…juste après la ligne:

cible.toggleClass('blocs_replie').blocs_set_title();

1	cible.toggleClass('blocs_replie').blocs_set_title();

Articles récents

Catégories

Archives

Méta

Mois : janvier 2019

[crossbrowsertesting.com] Erreur « Invalid Host Header » où comment accéder à un site en localhost

Dans le cadre d’un projet Angular

[CSS][javaScript] Styler les barres de défilement (scrollbar) du navigateur

[Angular CLI] Avoir son serveur Angular dans une Machine Virtuelle Ubuntu Server et accéder à localhost depuis Windows

Problème

Solution

La config réseau de ma VM sous Virtual Box (au cas où)

[CSS] Trouver l’élément trop large qui fait apparaître une scroll barre horizontale dans votre page

[SPIP] Menu déroulant géant multi-colonnes accessible – Modifier le rendu HTML du plugin Menus afin que les listes soient correctement structurées

Problème: Structure de listes dans les menus

Solution:

Fichier spip/plugins/contrib/menus/inclure/menu.html:

Avant modification

Après modification

Fichier spip/plugins/site/squelettes/mass_squelette/v1/menus/colonne.html:

Avant modification

Après modification

Un peu de style:

[SPIP] Ajout d’un attribut d’accessibilité aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au RGAA