Catégorie : Uncategorized

[Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig

Source: Set twig variable to json file as an include.

Fichier _data/test.json:

Fichier template.twig:

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

Sources:

Dégageage du padding avec getComputedStyle

Faire un console.log(computedStyle); vous donnera une liste de toutes les données récupérées via la méthode getComputedStyle et que vous pourrez exploiter ensuite.

Dans la pratique:

Je veux récupérer la hauteur du contenu de l’élément de DOM .page-leftColumn sans le padding:

Tenir compte de la scrollbar

Voir aussi ici pour ce bout de code modifié pour tenir compte de la scrollbar:

[Magento 2] Gérer l’affichage des formulaires avec les mixins LESS de la Magento UI Library

Documentation officielle: Magento UI Library – Forms mixins.

Bonnes pratiques

Si vous avez simplement l’intention de changer les valeurs des variables existantes (regardez la doc, il y en a beaucoup, vous pouvez probablement vous en tirer sans aller plus loin que ça…) faites le dans le fichier _theme.less de votre thème.

Fields customization variables – The .lib-form-field() mixin variables

Libellés au-dessus des champs, une colonne

Libellés au-dessus des champs, deux colonnes

A savoir: lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

Libellés à côté des champs, une colonne

Libellés à côté des champs, deux colonnes

A savoir: (je me répète…) lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

[crossbrowsertesting.com] Effectuer des tests dans un environnement local sous Linux (Ubuntu) avec la fonctionnalité Local connection

Au moment où j’écris cet article, le plug-in pour Chrome ne fonctionne pas sous Ubuntu. Il faut donc passer par l’outil packagé de connexion locale. Documentation complète ici.

Commencer par récupérer l’outil cbt_tunnel-linux-x64 en cliquant sur le lien « Latest Releases for cbt_tunnels » dans la section « Binaries » de la page « Local Connection Overview ». Au moment où j’écris ces lignes, la dernière release est le tag v1.2.2, mais vérifiez qu’il n’y ait pas eu de release plus récente depuis.

Dézippez le fichier téléchargé dans un dossier auquel vous aurez accès depuis un bash. Ouvrez un bash et placez vous à la racine du dossier qui contient le fichier cbt_tunnel-linux-x64 dézippé, puis exécutez le en tapant la commande:

Il y a plusieurs types de connexion disponibles, mais l’outil vous demandera toujours un username et une authkey. Ces deux arguments de la commande font référence à des informations de votre compte crossbrowsertesting. Vous les trouverez sur le site, dans la page « Manage Account » sous la section « User Profile ». Le username est votre email (votre username apparaît en haut à droite de l’interface crossbrowsertesting lorsque vous êtes connecté) et l’authkey se trouve juste en-dessous de votre email sous la forme o8s9a4f2sm86w34 (fake authkey).

La commande à taper en bash pour ouvrir un tunnel de connexion local est donc un truc qui ressemble à ceci:

Patientez quelques secondes… « Connected for internal websites »!

[Docker] Faire un dump d’une table spécifique dans une base de données et récupérer le contenu dans un fichier txt hors container

Note: pour faire la même chose, mais via mysql: Dump a specific table or few rows (MySQL). $ mysqldump -u username -ppassword database_name table_name > single_table_dump.sql

Faire un dump d’une table spécifique via un container db Docker:

Log toi dans le container db

après : $ mysqldump  -uroot -proot magento core_config_data --tab="/tmp" --fields-enclosed-by='"' --fields-terminated-by=,

ce qui nous intéresse, c’est le fichier /tmp/core_config_data.txt qui sera généré. tu le copie via docker cp.

ça doit te donner un rendu qui ressemble à ça (sample):

Récupérer le contenu du dump dans un fichier TXT avec la commande docker cp:

Sortir du container db. On se retrouve à la racine de notre projet.

en décomposant : $ docker cp nom_du_container:path_dans_le_container path_local (. == l'endroit où tu es)

Le fichier core_config_data.txt devrait être disponible à la racine de notre projet (où à l’endroit depuis lequel la commande ci-dessus a été exécutée).

[CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)

Demo jsfiddle.net et code source zippé à télécharger.

Source HTML

Source CSS

[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/)

[iOS] Prévenir le bug de Double Tap sur iPhones et iPads

Sources: Solving The Double Tap Issue on iOS Devices (fonctionne) et The Annoying Mobile Double-Tap Link Issue et Demo (pas testé, plus propre mais plus chiant à mettre en place si pas prévu en amont du développement du projet).

En javaScript (jQuery)

ATTENTION: votre lien doit évidemment être présent dans le DOM au moment où vous ce code est exécuté. Sinon, prévoir une détection.

Si l’utilisateur doit pouvoir scroller dans la page au touch sur un lien

Si l’utilisateur doit pouvoir scroller, il ne faut pas que le touch sur un lien déclenche ce dernier!

En CSS

cf. article de Chris Coyier sur CSS Tricks…