Mois : janvier 2019

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

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.

  1. 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:

  2. Sur Quel Est Mon IP, récupérez votre IP Locale (qui commence probablement par 192.168… Dans mon cas 192.168.67.219).
  3. Dans l’interface de crossbrowsertesting, commencer par activer la connexion locale (depuis le bandeau « Local Connection OFF/ON »)
  4. 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

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:

  1. 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.
  2. 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.
  3. 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

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

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:

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

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

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.

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

Avant modification

Après modification

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

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:

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

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:

…comme ceci:

2. Dans la fonction blocs_toggle, ajouter:

…juste après la ligne: