Tagbonnes pratiques

[JavaScript] Initialiser un plugin avec plusieurs configs pré-définies

Cette méthodologie consiste à limiter le nombre d’initialisation d’un même plugin (ici Owl Carousel). On l’initialise une seule fois via la classe .js-owl-carousel affectée à tous les carousels utilisés dans le site. On passe ensuite les paramètres pour différentes configs (default, rotating-image, lazy-reference) en fonction d’une classe (.js-owl-default, .js-owl-rotating-image, .js-owl-lazy-reference) présente dans la vue.

Code JS

Vue pour un carousel avec config « lazy-reference »

Notez la présence de la classe .js-owl-lazy-reference (qui déclenche la config) sur le même élément que la classe .js-owl-carousel (qui initialise le plug-in).

[Foundation 6] Astuces, bonnes pratiques, ressources en ligne

Thèmes

  • SD UI Foundation Themes – Free themes for the most advanced responsive front-end framework in the world (merci Gilles).

[jQuery] Bonnes pratiques, astuces et ressources utiles

Apprendre jQuery, bonnes pratiques

jQuery Performance Rules

  1. Always Descend From an #id
  2. Use Tags Before Classes
  3. Cache jQuery Objects
  4. Harness the Power of Chaining
  5. Use Sub-queries
  6. Limit Direct DOM Manipulation
  7. Leverage Event Delegation (a.k.a. Bubbling)
  8. Eliminate Query Waste
  9. Defer to $(window).load
  10. Compress Your JS
  11. Learn the Library
  12. Avoid use of string concat(), Use join() for the long strings.
  13. Use Latest jQuery versions with CDN hosted files instead of older version.
  14. Use of For loop instead of jQuery $.each loop.
  15. Check if an Element Exists before doing operations on the DOM elements.
  16. Always use Return False in functions.
  17. Use of HTML5 Data Attributes.
  18.  Identify weight of the page.
  19. Keep your code DRY (Don’t Repeat Yourself)

Boilerplates, starter kits

Autre (n’a peut-être pas sa place dans ce billet…)

© 2020 devfrontend.info

Theme by Anders NorénUp ↑