Monthoctobre 2018

[javaScript] console.time et console.timeEnd pour logguer les performances d’affichage du code JS

Demo: console.time et console.timeEnd pour logguer les performances d’affichage du code JS.

Résultats du test en exécutant à plusieurs reprises ce code:

getTableColumnsAmount01: 1.489013671875ms
(index):36 getTableColumnsAmount02: 0.277099609375ms
(index):32 getTableColumnsAmount01: 1.7880859375ms
(index):36 getTableColumnsAmount02: 0.88916015625ms
(index):32 getTableColumnsAmount01: 1.0322265625ms
(index):36 getTableColumnsAmount02: 0.44189453125ms
(index):32 getTableColumnsAmount01: 0.926025390625ms
(index):36 getTableColumnsAmount02: 0.203125ms
(index):32 getTableColumnsAmount01: 1.050048828125ms
(index):36 getTableColumnsAmount02: 0.3740234375ms

[jQuery] Un colonage à la carte dans une liste imbriquée type menu

Markup HTML de départ:

En partant de là, impossible d’obtenir un colonage correct en utilisant uniquement CSS (ou alors soit avec Grid Layout mais on doit, entre autres, supporter IE-11 soit avec du positionnement absolu calculé au poil de cul près et c’est un contenu dynamique…).

Il faut donc modifier le markup en rajoutant des niveaux d’imbrication dans nos listes. Problème: c’est un menu Responsive et c’est ce markup qui est utilisé pour afficher l’aspect Smartphone. On ne peut pas le modifier « en dur ».

Markup HTML d’arrivée souhaité:

jQuery:

Notes: axes d’amélioration de ce code:

  • Pas besoin du parseInt dans var columnsAmount. On a besoin de la valeur en tant que nombre entier pour effectuer le calcul de la dernière ligne de ce code .wrapAll('<li class="custom-cols custom-cols-'+ (columnsAmount +1) +'" />').
  • Probablement un moyen de supprimer les doublons immédiatement en renseignant le 1er tableau (pas besoin de 2 tableaux)

LESS:

[UX Design] La veille de l’UX Designer

Veille

[UX Design] Axure, ressources en lignes, bonnes pratiques

Tutoriels en français

Tutoriels en anglais

UI Kits gratuits

UI Kits payants

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑