Monthseptembre 2016

[jQuery] Récupérer la largeur d’une image

[CSS] Changer la couleur et l’apparence des puces de l’élément UL

[jQuery] Vérifier, au clic, la présence d’une classe dans le DOM et afficher ou masquer des éléments en fonction

Optimiser et synchroniser l’exécution de media queries CSS et JS avec Sync MQ

Alternative intéressante: @include-media – Simple, elegant and maintainable media queries in Sass. Couplé à include-media-export – An include-media plugin for exporting breakpoints from Sass to JavaScript.

Avant propos : certains des CMS les plus récents du marché proposent nativement des solutions équivalentes à Sync MQ pour gérer et/ou synchroniser l’exécution de media queries CSS et JS. Pour d’évidentes raisons de compréhension et de maintenabilité de votre code source, je vous conseille de vous tourner plutôt vers ces solutions lorsqu’elles existent.

Sync MQ: pour quoi faire?

Qu’on démarre un projet de site internet de zéro ou qu’un client nous demande une nouvelle mouture, à destination des supports mobiles, de son site existant (qui tourne sous une solution qui ne prend pas en charge les concepts de responsive design), la question de la gestion et de l’adaptation de l’affichage sur différents périphériques de navigation (ordinateurs, tablettes, smartphones) se pose rapidement. Si l’utilisation de media queries s’impose immédiatement comme une évidence dans nos feuilles de styles qu’en est-il en revanche de l’exécution, pour un support donné, de code JavaScript? Et existe-t’il un moyen simple de gérer, d’optimiser votre code CSS (ou LESS, ou SASS, ou autre préprocesseur…) et JS et de synchroniser leur exécution ?

C’est pour répondre à cette double problématique qu’intervient Sync MQ dont le concept est :

  • de simplifier l’écriture et la déclaration de media queries par rapport aux méthodes traditionnelles,
  • de faciliter la synchronisation de l’exécution de media queries tant au niveau de vos styles que du code JavaScript.

Demo sur JSFiddle.net.

Les sources de Sync MQ que vous trouverez sous GitHub à l’heure ou j’écris ces lignes exploitent des dépendances telles qu’Enquire JS et le composant Grid de Bootstrap 3 parce que c’est celles avec lesquelles j’aime travailler. Mais Sync MQ est avant tout un concept que rien ne vous empêche d’intégrer à vos propres habitudes de travail. Vous pouvez tout-à-fait remplacer Enquire JS par la brique mq de Modernizr ou le composant Grid de Bootstrap 3 par celui proposé par le framework Foundation 4.

De l’art de bien choisir ses points de rupture.

=> Web Stats

Et mon code JavaScript dans tout ça?

Quel intérêt de faire appel à une dépendance telle qu’Enquire JS alors qu’une ligne de code JavaScript suffirait à exécuter du code pour un support donné?

Pour un point de rupture donné (mettons, 800px) et suivant le navigateur utilisé, la méthode $(window).width() de jQuery et les Media Queries CSS3 ne sont pas exécutées systématiquement au même moment.

A Code Example of the Difference Between jQuery Window Width and CSS Media Query width measurements.

Dans cet exemple, l’auteur démontre que […].

_sync-mq.scss

On commence par créer des variables aux libellés parlants pour remplacer le code (moins digeste) traditionnellement utilisé en CSS pour la déclaration de media queries.

Comme décrit plus haut, les points de rupture retenus ne ciblent pas uniquement un ou plusieurs supports donnés (iPhone, iPad, Amstrad CPC) en fonction de leurs résolutions mais :

  • des ensembles moyens de résolutions rencontrées par périphériques (Smartphone, Tablette, Desktop),
  • les résolutions que les clients nous demandent le plus souvent de cibler.

Les valeurs affectées à ces variables aux libellés allégés font directement référence à celles des points de rupture définis dans les variables du framework Bootstrap 3 (version SASS).

Ces mêmes valeurs sont immédiatement ré-exploitées dans Bootstrap pour construire les styles du composant Grid.

Aussi, on retrouvera dans Sync MQ parmi les habituelles Smartphone, Tablette et Desktop, des media queries englobant:

  • l’ensemble des Mobiles ($bpMobile pour Smartphone et Tablette),
  • les Tablettes et au-delà ($bpTabletUp),
  • les petits et larges Desktops séparément ($bpSmallDesktop et $bpLargeDesktop).

Pour cibler par exemple les résolutions à partir des tablettes et au-delà, au lieu d’écrire:

J’écris désormais:

Quelques astuces d’utilisation:

  • Lorsque vous choisissez un plug-in JS amené à être exécuté en fonction d’un point de rupture, veillez à ce qu’il possède une méthode .destroy() et/ou .reload(). C’est le cas, par exemple, du carousel BxSlider. La présence de ce type d’options vous dispensera de nettoyer vous-même un DOM modifié par l’exécution d’un plug-in lorsque vous souhaiterez en annuler les effets pour une vue donnée.
  • Trois résolutions sont en réalité disponibles pour Amstrad CPC: 160×200 pixels avec 16 couleurs, 320×200 pixels avec 4 couleurs, et 640×200 pixels avec 2 couleurs. De quoi rentabiliser immédiatement l’utilisation de Sync MQ.

Un peu de documentation:

HTML

CSS (SASS)

JS (enquire, jQuery)

[Gulp] Génération d’une police d’icônes avec template en SASS

Attention : préférer les sources hébergées sur github.com à celles présentes dans les codebits du tutoriel.

template sass

Par rapport au tutoriel et aux sources du plug-in sur github.com, notez la présence d’un mixin init-icon-font.

gulpfile.js

Utilisation dans des sources SASS :

(bonus) Markup HTML planche d’icônes

How to generate an iconfont styleguide with Gulp

Source: How to generate html page with elements from scss in Gulp
sur Stack Overflow

Here is an example using the jade templating engine. This will read the file ./test.scss, extract all the icon-* words and generate a ./template.html file:

Gulpfile.js:

./test.scss:

./template.jade

The icons variable comes from the {locals: {icons: {}} argument in the .pipe(jade(data)) call.

[jQuery] Compter le nombre d’enfants dans chaque parent et ajouter une classe spécifique en fonction du résultat

Source : jQuery count number of li’s in each ul.

[RBS Change] Quelques notes sur l’utilisation de l’extension change:media pour afficher des visuels

Utilisation de l’extension phpTal change:media dans Change pour redimensionner les visuels appelés dans les templates et leur attribuer des classes spé.

Dans les templates de bloc, les visuels peuvent être appelés de la manière suivante :

Il y a 2 paramètres qui vont nous intéresser plus particulièrement :

qui va servir à établir des dimensions hauteur et largeur maximales pour cette image (pour un redimensionnement côté serveur). Ici, « medium » est une clé que tu vas retrouver dans le fichier suivant : /modules/responsive/style/frontoffice.image.all.css.

Cette clé peut tout à fait rsservir ailleurs, dans un autre bloc, pour afficher d’autres visuels qui auraient les mêmes dimensions. Et on peut créer d’autres clés pour s’en servir dans les templates.

Le 2ème paramètre important :

permet d’ajouter des classes à l’élément <img />. Car ça ne se fait pas par l’intermédiaire d’un attribut class="".


[4:02 PM] Frank LANG: ok
[4:02 PM] Frank LANG: on a 15mn pour les dimensions d’image
[4:02 PM] Frank LANG: ouvre le template de la fp
[4:02 PM] Nicolas M: wep
[4:02 PM] Frank LANG: ceclui-ci (pour être sûr) : Y:\change30\manbow\themes\responsive\modules\catalog\templates\Catalog-Block-Declinedproduct-Success.all.all.html
[4:03 PM] Frank LANG: ton visuel principal est là
[4:03 PM] Frank LANG:

[4:03 PM] Frank LANG: (ligne 121)
[4:04 PM] Nicolas M: oui j’avais modifié la partie avec le pic780x761
[4:04 PM] Frank LANG: et c’est surtout cette ligne qui va nous intéresser
[4:04 PM] Nicolas M: mais ça a fait tout planter
[4:04 PM] Frank LANG:

[4:05 PM] Frank LANG: l’attribut « format » fait référence à une classe CSS que tu vas retrouver dans un fichier « frontoffice.image.css » dans modules/manbow/style/
[4:06 PM] Frank LANG: Y:\change30\manbow\modules\manbow\style\frontoffice.image.all.css
[4:06 PM] Frank LANG: si tu cherches la classe « .pic780x761 »
[4:06 PM] Frank LANG: eh bin elle existe pas !!!
[4:06 PM] Frank LANG: mais y’en a déjà plein d’autres
[4:07 PM] Frank LANG: en gros, si on reprend la baliswe dans le template, tu pourrais mettre :
[4:07 PM] Frank LANG:

[4:07 PM] Frank LANG: et dans « Y:\change30\manbow\modules\manbow\style\frontoffice.image.all.css »
[4:07 PM] Frank LANG: il faut ajouter :
[4:08 PM] Frank LANG:

[4:08 PM] Frank LANG: avec la largeur max et la hauteur max autorisées pour le redimensionnement qui va s’opérer côté serveur
Frank LANG·4:10 PM
faut faire un compile-all pour que les modifs soient prises en compte
[4:12 PM] Frank LANG: au passage c’est complètement con de nommer ce type de classes avec des dimensions
[4:12 PM] Frank LANG: autant définir peu de dimensions et avoir de sclasses qui s’appellent small, medium, big, avatar, …

[jQuery] Une navigation responsive par onglets en vue Desktop et accordéon en vue Mobile

Demo sur jsfiddle.net.

HTML

SASS

jQuery

[Git] Configurer un compte Git sur une install Ubuntu Server et générer une clé SSH d’utilisateur

…dans le cadre, notamment, d’une récupération de VM existante, le compte Git actuellement configuré doit être changé pour celui du développeur qui utilisera la VM.
L’idée ici est de supprimer le compte existant pour en créer un nouveau.

Si le repository est cloné via https

Supprimer le compte existant (le fichier sera regénéré à partir de vos login/mot-de-passe qui vous seront demandés la prochaine fois que vous essayerez d’accéder au Git) :

Si le repository est cloné via SSH

Localiser le dossier ssh sur votre VM. Attention, c’est un dossier caché!

Pour lister les clés existantes (fichiers de type id_rsa):

Supprimer toutes les clés SSH existantes (ce ne sont pas les vôtres; vous ne voulez pas versionner des choses dans Git et que le nom d’utilisateur qui apparaisse dans les logs soit celui de quelqu’un d’autre a.k.a. l’utilisateur précédent de votre VM).

Générer une nouvelle clé. Remarque : pour la génération de la clé SSH par défaut (commande $ ssh-keygen), il vous sera demandé un nom et une passphrase. Laissez ces informations vides.

Copier/coller la nouvelle clé SSH générée (fichier id_rsa.pub). Pour l’afficher :

Dans l’interface Gitlab

  • Profile settings > SSH keys > Add SSH key.
  • Coller la clé SSH récupérée depuis votre VM Ubuntu.
  • Si une clé SSH ne vous appartenant pas est listée, la supprimer pour ne conserver que celle que vous avez ajouté.

Editer la config Git

Stocker vos login/mot-de-passe afin qu’ils ne vous soient pas demandés à chacun de vos accès au Git :

[Ubuntu][Virtual Box][Réseau] Travailler en local sur une IP fixe

Monter 2 cartes réseau dans les paramètres de votre VM (sous Virtual Box)

Note pour moi-même:Cette conf permet de travailler en WiFi depuis la maison.

ubuntu2_carte1-2

Récupérer l’IP de la carte eth1

Lancer la VM et à l’invite de commande, taper :

Monter eth1 comme un lecteur réseau sous Windows (7 dans mon exemple)

  • Sous Windows 7, afficher « Ordinateur ».
  • Cliquer sur « Connecter un lecteur réseau ».
  • Choisir un lecteur, puis dans le champ « Dossier », saisir le chemin vers votre machine virtuelle : <IP_eth1>\<nom_de_votre_volume> (chez moi : 192.168.56.110\miaou).
  • Cocher la case « Se reconnecter à l’ouverture de session ».

Ajouter l’IP de eth1 dans le host Windows.

Config pour le boulot

Une seule carte réseau:

VM_reseau_boulot

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑