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

27/05/2021 / admin

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

Fichier _data/test.json:

{ "name":"John", "age":30, "car":null }

1	{ "name":"John", "age":30, "car":null }

Fichier template.twig:

{% set json %}
    {% include "_data/test.json" %}
{% endset %}

[...]

<h1>{{ json }}</h1>

{% set json %}

{% include "_data/test.json" %}

{% endset %}

[...]

[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

24/11/2020 / admin

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.

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight; // height with padding

elementWidth = element.clientWidth; // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);

elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

Dans la pratique:

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

    let $leftColumn = document.querySelector('.page-leftColumn'),
        computedStyle = getComputedStyle($leftColumn),
        leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));
    // console.log(leftColumnHeight);

let $leftColumn = document.querySelector('.page-leftColumn'),

computedStyle = getComputedStyle($leftColumn),

leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));

// console.log(leftColumnHeight);

Tenir compte de la scrollbar

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

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);

var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);

var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border

elementWidth = element.offsetWidth - paddingX - borderX;

elementHeight = element.offsetHeight - paddingY - borderY;

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

10/06/2020 / admin

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

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: block

);

}

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.

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block,
                @_column: true
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: block,

@_column: true

);

}

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

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: inline

);

}

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.

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline,
                @_column: true
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: inline,

@_column: true

);

}

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

02/06/2020 / admin

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:

$ ./cbt_tunnel-linux-x64

1	$ ./cbt_tunnel-linux-x64

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:

$ ./cbt_tunnel-linux-x64 --username moi@email.com --authkey o8s9a4f2sm86w34

1	$ ./cbt_tunnel-linux-x64 --username moi@email.com --authkey o8s9a4f2sm86w34

Patientez quelques secondes… « Connected for internal websites »!

[CSS] Hauteur égale d’éléments à l’intérieur d’un grid item avec CSS Grid Layout

24/05/2020 / admin

A Complete Guide to Grid chez CSS Tricks.

Source: Equal height of elements inside grid item with CSS grid layout, codepen et version PDF.

Pré-requis typique d’une liste de produits…

Quelques essais perso:

Hauteur dynamique (fonctionne pour un seul sous-item uniquement)

[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

17/04/2020 / admin

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):

"1","default","0","yotpo/module_info/yotpo_installation_date","2020-02-12","2020-02-28 11:06:07"

1	"1","default","0","yotpo/module_info/yotpo_installation_date","2020-02-12","2020-02-28 11:06:07"

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.

$ docker cp vitalconcept_db_1:/tmp/core_config_data.txt .

1	$ docker cp vitalconcept_db_1:/tmp/core_config_data.txt .

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).

[Magento 2] Créer une page monsite.com/customer/account/activate/

19/02/2020 / admin

Les fichiers que nous allons devoir créer (MyVendor et MyModule doivent commencer par une Majuscule):

app/code/MyVendor/MyModule/Block/Activate.php
app/code/MyVendor/MyModule/Controller/Account/Activate.php
app/code/MyVendor/MyModule/etc/frontend/routes.xml
app/code/MyVendor/MyModule/view/frontend/layout/customer_account_activate.xml
app/code/MyVendor/MyModule/view/frontend/templates/activate.phtml

app/code/MyVendor/MyModule/Block/Activate.php

<?php
/**
 * Copyright © 2020 MyVendor. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace MyVendor\MyModule\Block;

/**
 * MyModule activate block
 *
 * @category   MyVendor
 * @package    MyVendor_MyModule
 * @author     MyVendor Magento Team <magento@team.fr>
 */
class Activate extends \Magento\Framework\View\Element\Template
{

}

<?php

/**

* See COPYING.txt for license details.

namespace MyVendor\MyModule\Block;

/**

* MyModule activate block

* @category MyVendor

* @package MyVendor_MyModule

* @author MyVendor Magento Team <magento@team.fr>

class Activate extends \Magento\Framework\View\Element\Template

{

}

app/code/MyVendor/MyModule/Controller/Account/Activate.php

<?php
/**
 * Copyright © 2020 MyVendor. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace MyVendor\MyModule\Controller\Account;

/**
 * MyModule activate view action
 *
 * @category   MyVendor
 * @package    MyVendor_MyModule
 * @author     MyVendor Magento Team <magento@team.fr>
 */
class Activate extends \Magento\Framework\App\Action\Action
{
    /**
     * @var \Magento\Framework\View\Result\PageFactory $resultPageFactory
     */
    protected $resultPageFactory;

    /**
     * Summary constructor
     *
     * @param \Magento\Framework\App\Action\Context      $context
     * @param \Magento\Framework\View\Result\PageFactory $resultPageFactory
     */
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct(
            $context
        );
    }

    /**
     * @return \Magento\Framework\Controller\Result\Redirect|\Magento\Framework\View\Result\Page
     */
    public function execute()
    {
        /** @var \Magento\Framework\View\Result\Page $resultPage */
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->set(__('Activate my account'));
        return $resultPage;
    }
}

<?php

/**

* See COPYING.txt for license details.

namespace MyVendor\MyModule\Controller\Account;

/**

* MyModule activate view action

* @category MyVendor

* @package MyVendor_MyModule

* @author MyVendor Magento Team <magento@team.fr>

class Activate extends \Magento\Framework\App\Action\Action

{

/**

* @var \Magento\Framework\View\Result\PageFactory $resultPageFactory

protected $resultPageFactory;

/**

* Summary constructor

* @param \Magento\Framework\App\Action\Context $context

* @param \Magento\Framework\View\Result\PageFactory $resultPageFactory

public function __construct(

\Magento\Framework\App\Action\Context $context,

\Magento\Framework\View\Result\PageFactory $resultPageFactory

) {

$this->resultPageFactory = $resultPageFactory;

parent::__construct(

$context

);

}

/**

* @return \Magento\Framework\Controller\Result\Redirect|\Magento\Framework\View\Result\Page

public function execute()

{

/** @var \Magento\Framework\View\Result\Page $resultPage */

$resultPage = $this->resultPageFactory->create();

$resultPage->getConfig()->getTitle()->set(__('Activate my account'));

return $resultPage;

}

app/code/MyVendor/MyModule/etc/frontend/routes.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2020 MyVendor. All rights reserved.
 * See COPYING.txt for license details.
 *
 * @category   MyVendor
 * @package    MyVendor_MyModule
 * @author     MyVendor Magento Team <magento@team.fr>
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="customer"><!-- URL qui commence par customer/ -->
            <module name="MyVendor_MyModule" before="Magento_Customer" />
        </route>
    </router>
</config>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

* @category MyVendor

* @package MyVendor_MyModule

* @author MyVendor Magento Team <magento@team.fr>

-->

</route>

</router>

</config>

app/code/MyVendor/MyModule/view/frontend/layout/customer_account_activate.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="customer_account"/>
    <body>
        <referenceContainer name="content">
            <block template="MyVendor_MyModule::activate.phtml" class="MyVendor\MyModule\Block\Activate" name="customer.account.activate" cacheable="false" />
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

app/code/MyVendor/MyModule/view/frontend/templates/activate.phtml

<h1>activate.phtml</h1>

1	<h1>activate.phtml</h1>

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

08/01/2020 / admin

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

Source HTML

<div class="navDesktop navDesktopType-normal">

  <h2>.navDesktop.navDesktopType-normal</h2>
  <nav id="navDesktop">
    <ul class="navDesktop-level0">
      <li>
        <a href="#">chemises & couvertures HORSEWIN</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">chemises de box</a>
          </li>
          <li>
            <a href="#">couvertures d'écurie</a>
          </li>
          <li>
            <a href="#">couvertures d'extérieur</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">nutrition</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">aliments complets</a>
            <ul class="navDesktop-level2">
              <li>
                <a href="#">gamme club & loisirs</a>
              </li>
              <li>
                <a href="#">gamme sport</a>
              </li>
              <li>
                <a href="#">gamme course</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">litière</a>
      </li>
    </ul>
  </nav>

</div>

<div class="navDesktop navDesktopType-incremental">

  <h2>.navDesktop.navDesktopType-incremental</h2>
  <nav id="navDesktop">
    <ul class="navDesktop-level0">
      <li>
        <a href="#">bovins</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">alimentation & compléments</a>
            <ul class="navDesktop-level2">
              <li>
                <a href="#">matières premières</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">matières premières</a>
                  </li>
                  <li>
                    <a href="#">matières grasses</a>
                  </li>
                  <li>
                    <a href="#">argiles et charbon</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">seaux et pierres à lécher</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">pierres à lécher</a>
                  </li>
                  <li>
                    <a href="#">seaux à lécher</a>
                  </li>
                  <li>
                    <a href="#">supports pour seaux et pierres</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">bolus</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">power bol</a>
                  </li>
                  <li>
                    <a href="#">bolus longue durée pressés</a>
                  </li>
                  <li>
                    <a href="#">bolus à diffusion rapide</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">Minéraux</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">Max-ME</a>
                  </li>
                  <li>
                    <a href="#">Max-MS</a>
                  </li>
                  <li>
                    <a href="#">Max-MH</a>
                  </li>
                  <li>
                    <a href="#">Maxor</a>
                  </li>
                  <li>
                    <a href="#">Formules vaches taries</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Veaux</a>
          </li>
          <li>
            <a href="#">Pâturage</a>
          </li>
          <li>
            <a href="#">Reproduction</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">porcs</a>
      </li>
      <li>
        <a href="#">volailles</a>
      </li>
    </ul>
  </nav>

</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<h2>.navDesktop.navDesktopType-normal</h2>

<li>

<a href="#">chemises & couvertures HORSEWIN</a>

<li>

<a href="#">chemises de box</a>

</li>

<li>

<a href="#">couvertures d'écurie</a>

</li>

<li>

<a href="#">couvertures d'extérieur</a>

</li>

</ul>

</li>

<li>

<a href="#">nutrition</a>

<li>

<a href="#">aliments complets</a>

<li>

<a href="#">gamme club & loisirs</a>

</li>

<li>

<a href="#">gamme sport</a>

</li>

<li>

<a href="#">gamme course</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">litière</a>

</li>

</ul>

</nav>

</div>

<h2>.navDesktop.navDesktopType-incremental</h2>

<li>

<a href="#">bovins</a>

<li>

<a href="#">alimentation & compléments</a>

<li>

<a href="#">matières premières</a>

<li>

<a href="#">matières premières</a>

</li>

<li>

<a href="#">matières grasses</a>

</li>

<li>

<a href="#">argiles et charbon</a>

</li>

</ul>

</li>

<li>

<a href="#">seaux et pierres à lécher</a>

<li>

<a href="#">pierres à lécher</a>

</li>

<li>

<a href="#">seaux à lécher</a>

</li>

<li>

<a href="#">supports pour seaux et pierres</a>

</li>

</ul>

</li>

<li>

<a href="#">bolus</a>

<li>

<a href="#">power bol</a>

</li>

<li>

<a href="#">bolus longue durée pressés</a>

</li>

<li>

<a href="#">bolus à diffusion rapide</a>

</li>

</ul>

</li>

<li>

<a href="#">Minéraux</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#">Maxor</a>

</li>

<li>

<a href="#">Formules vaches taries</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">Veaux</a>

</li>

<li>

<a href="#">Pâturage</a>

</li>

<li>

<a href="#">Reproduction</a>

</li>

</ul>

</li>

<li>

<a href="#">porcs</a>

</li>

<li>

<a href="#">volailles</a>

</li>

</ul>

</nav>

</div>

Source CSS

/* reset */
ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}



/* core */
.navDesktop {}

.navDesktop-level1,
.navDesktop-level2 {
  display: none;
}

.navDesktopType-normal {}
.navDesktopType-incremental {}

.navDesktop-level0 > li:hover > .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level1 > li:hover > .navDesktop-level2 {
  display: flex;
}



/* layout */
.navDesktop-level0 {
  position: relative;
  display: flex;
}

.navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  width: 100%;
}

.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}



/* skin */
.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  max-height: 200px;
}

.navDesktop a {
  padding-right: 15px;
}

.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  background: #ececec;
}

.navDesktopType-normal .navDesktop-level1 > li > a,
.navDesktopType-incremental .navDesktop-level2 > li > a {
  font-size: 1.1em;
  font-weight: 700;
}

.navDesktopType-incremental .navDesktop-level1 {
  background: pink;
}

/* reset */

ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

/* core */

.navDesktop {}

.navDesktop-level1,

.navDesktop-level2 {

display: none;

}

.navDesktopType-normal {}

.navDesktopType-incremental {}

.navDesktop-level0 > li:hover > .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level1 > li:hover > .navDesktop-level2 {

display: flex;

}

/* layout */

.navDesktop-level0 {

position: relative;

display: flex;

}

.navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

position: absolute;

z-index: 1;

left: 0;

top: 100%;

width: 100%;

}

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

flex-direction: column;

flex-wrap: wrap;

align-content: flex-start;

}

/* skin */

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

max-height: 200px;

}

.navDesktop a {

padding-right: 15px;

}

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

background: #ececec;

}

.navDesktopType-normal .navDesktop-level1 > li > a,

.navDesktopType-incremental .navDesktop-level2 > li > a {

font-size: 1.1em;

font-weight: 700;

}

.navDesktopType-incremental .navDesktop-level1 {

background: pink;

}

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

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

17/07/2018 / admin

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.

  $("a").on("click touchend", function(e) {
    var el = $(this);
    var link = el.attr("href");
    window.location = link;
  });

$("a").on("click touchend", function(e) {

var el = $(this);

var link = el.attr("href");

window.location = link;

});

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!

var ___SCROLL_TOP_LAST___ = 0;
$(".autocomplete-item").on("touchstart", function() {
    ___SCROLL_TOP_LAST___ = $('body').scrollTop();
    console.log('touchstart: '+___SCROLL_TOP_LAST___);
});
$(".autocomplete-item").on("touchend", function() {
    console.log('touchend: '+___SCROLL_TOP_LAST___);
    var el = $(this);
    var link = el.attr("href");
    if($('body').scrollTop() === ___SCROLL_TOP_LAST___) {
        window.location = link;
    }
});

var ___SCROLL_TOP_LAST___ = 0;

$(".autocomplete-item").on("touchstart", function() {

___SCROLL_TOP_LAST___ = $('body').scrollTop();

console.log('touchstart: '+___SCROLL_TOP_LAST___);

});

$(".autocomplete-item").on("touchend", function() {

console.log('touchend: '+___SCROLL_TOP_LAST___);

var el = $(this);

var link = el.attr("href");

if($('body').scrollTop() === ___SCROLL_TOP_LAST___) {

window.location = link;

}

});

En CSS

cf. article de Chris Coyier sur CSS Tricks…

Articles récents

Catégories

Archives

Méta

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

[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

Dégageage du padding avec `getComputedStyle`

Dans la pratique:

Tenir compte de la scrollbar

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

Bonnes pratiques

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

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

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

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

[CSS] Hauteur égale d’éléments à l’intérieur d’un grid item avec CSS Grid Layout

Quelques essais perso:

[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

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

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

[Magento 2] Créer une page monsite.com/customer/account/activate/

app/code/MyVendor/MyModule/Block/Activate.php

app/code/MyVendor/MyModule/Controller/Account/Activate.php

app/code/MyVendor/MyModule/etc/frontend/routes.xml

app/code/MyVendor/MyModule/view/frontend/layout/customer_account_activate.xml

app/code/MyVendor/MyModule/view/frontend/templates/activate.phtml

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

Source HTML

Source CSS

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

Dans le cadre d’un projet Angular

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

En javaScript (jQuery)

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

En CSS

Dégageage du padding avec getComputedStyle

Dans la pratique:

Tenir compte de la scrollbar

Bonnes pratiques

Libellés au-dessus des champs, une colonne

Libellés au-dessus des champs, deux colonnes

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

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

Quelques essais perso:

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

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

app/code/MyVendor/MyModule/Block/Activate.php

app/code/MyVendor/MyModule/Controller/Account/Activate.php

app/code/MyVendor/MyModule/etc/frontend/routes.xml

app/code/MyVendor/MyModule/view/frontend/layout/customer_account_activate.xml

app/code/MyVendor/MyModule/view/frontend/templates/activate.phtml

Source HTML

Source CSS

Dans le cadre d’un projet Angular

En javaScript (jQuery)

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

En CSS

Dégageage du padding avec `getComputedStyle`

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