PULPPULP
FICTIONFICTION
Théodore 'nod_' BIADALA
Core JS maintainer
Technical consultant at Acquia
PULPPULP
FICTIONFICTION
Théodore 'nod_' BIADALA
Core JS maintainer
Technical consultant at Acquia
Drupal Dev Days SZEGED 2014
FICTIONFICTION
Frontend developers
&
Drupal's theme layer
HTML/CSS dev
JS dev
Don't you remove 'views-group-title' class
Custom
HTML?
Divitis
Classitis
It's not that bad for the JS developer
Use data- attributes for everything JS
$('[data-drupal-progress]').once('butch');
// JS
var $el = $(context).find('#mydiv');
var $el = context.querySelector('[data-mydiv]');
// PHP
$element['#attributes']...
TWIG
Drupal 8 frontend
The gold feature
Frontend testing,
it's been well hidden
JS Patching
Core team is scared
of frontend getting
broken all the time.
Help.
The overlay situation
Overlay
module
Look!
I wrote 10 lines of JS!
Oups.
Bojhan's
UX napkin
Angry user
meh.
Good coffee though
Follow UX core gate
and I'll commit your patch
UX Team
They solve problems
Cue months of UX testing
And some clean-up
Tests went well,
all wrapped up for commit
Overlay,
'Like it never happened'
Coffee is
sessionStorage
// escapeAdmin.js
var winLoc = window.location;
var store = sessionStorage;
var pathInfo = drupalSettings.path;
var isAdmi...
Extras
Jules on IE8 support
Butch on variables
taking a leak in his global scope
Butch on people not using JSHint
Butch on people not using
*.libraries.yml to declare dependencies
// mymodule.libraries.yml
tip:
js:
js/tooltip.js: {}
js/tooltip.effects.js: { scope: 'footer' }
css:
# Use SMACSS categori...
Vincent & Jules on
drupal_add_js() & drupal_add_css()
Marcellus on outdated JS libraries
Jimmie & The Wolf on using jQuery
Drupal 8 FTW!
Questions?
nod_
theodore.biadala at acquia.com
Javascript Pulp Fiction
Javascript Pulp Fiction
Javascript Pulp Fiction
Javascript Pulp Fiction
Prochain SlideShare
Chargement dans…5
×

Javascript Pulp Fiction

1 652 vues

Publié le



If you like or have an interest in:

Stories about core process*
Stories about lack of core process*
Stories about patches*
Patches about javascript
Drupal 8

This session is for you. While not overly technical, slides may contain traces amount of javascript quirks.

* Chronological order of stories and patches not guarenteed .

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 652
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Javascript Pulp Fiction

  1. 1. PULPPULP FICTIONFICTION
  2. 2. Théodore 'nod_' BIADALA Core JS maintainer Technical consultant at Acquia PULPPULP FICTIONFICTION
  3. 3. Théodore 'nod_' BIADALA Core JS maintainer Technical consultant at Acquia Drupal Dev Days SZEGED 2014 FICTIONFICTION
  4. 4. Frontend developers & Drupal's theme layer
  5. 5. HTML/CSS dev JS dev
  6. 6. Don't you remove 'views-group-title' class
  7. 7. Custom HTML?
  8. 8. Divitis Classitis
  9. 9. It's not that bad for the JS developer
  10. 10. Use data- attributes for everything JS $('[data-drupal-progress]').once('butch');
  11. 11. // JS var $el = $(context).find('#mydiv'); var $el = context.querySelector('[data-mydiv]'); // PHP $element['#attributes']['data-mydiv'] = TRUE; // HTML <div data-mydiv class='whatever themers want'>
  12. 12. TWIG
  13. 13. Drupal 8 frontend
  14. 14. The gold feature
  15. 15. Frontend testing, it's been well hidden
  16. 16. JS Patching
  17. 17. Core team is scared of frontend getting broken all the time. Help.
  18. 18. The overlay situation
  19. 19. Overlay module
  20. 20. Look! I wrote 10 lines of JS!
  21. 21. Oups.
  22. 22. Bojhan's UX napkin
  23. 23. Angry user
  24. 24. meh. Good coffee though
  25. 25. Follow UX core gate and I'll commit your patch
  26. 26. UX Team They solve problems
  27. 27. Cue months of UX testing
  28. 28. And some clean-up
  29. 29. Tests went well, all wrapped up for commit
  30. 30. Overlay, 'Like it never happened'
  31. 31. Coffee is sessionStorage
  32. 32. // escapeAdmin.js var winLoc = window.location; var store = sessionStorage; var pathInfo = drupalSettings.path; var isAdminPath = pathInfo.currentPathIsAdmin; var dest = /destination=/.test(winLoc.search); var adminPath = store.getItem('escapeAdminPath'); if (!isAdminPath && !destination) { store.setItem('escapeAdminPath', winLoc); } Drupal.behavior = { attach: function () { $('[data-toolbar-escape-admin]') .once('escapeAdmin') .attr('href', adminPath); } };
  33. 33. Extras
  34. 34. Jules on IE8 support
  35. 35. Butch on variables taking a leak in his global scope
  36. 36. Butch on people not using JSHint
  37. 37. Butch on people not using *.libraries.yml to declare dependencies
  38. 38. // mymodule.libraries.yml tip: js: js/tooltip.js: {} js/tooltip.effects.js: { scope: 'footer' } css: # Use SMACSS categories component: css/tooltip.css: {} dependencies: - core/drupal - core/jquery - core/drupalSettings // Somewhere in the PHP $el['#attached']['libraries'][] = 'mymodule/tip';
  39. 39. Vincent & Jules on drupal_add_js() & drupal_add_css()
  40. 40. Marcellus on outdated JS libraries
  41. 41. Jimmie & The Wolf on using jQuery
  42. 42. Drupal 8 FTW!
  43. 43. Questions?
  44. 44. nod_ theodore.biadala at acquia.com

×