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 .

1. PULPPULP
FICTIONFICTION

2. Théodore 'nod_' BIADALA
Core JS maintainer
Technical consultant at Acquia
PULPPULP
FICTIONFICTION

3. Théodore 'nod_' BIADALA
Core JS maintainer
Technical consultant at Acquia
Drupal Dev Days SZEGED 2014
FICTIONFICTION

4. Frontend developers
&
Drupal's theme layer

5. HTML/CSS dev
JS dev

7. Don't you remove 'views-group-title' class

9. Custom
HTML?

10. Divitis
Classitis

11. It's not that bad for the JS developer

12. Use data- attributes for everything JS
$('[data-drupal-progress]').once('butch');

13. // 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'>

14. TWIG

15. Drupal 8 frontend

16. The gold feature

17. Frontend testing,
it's been well hidden

19. JS Patching

20. Core team is scared
of frontend getting
broken all the time.
Help.

21. The overlay situation

22. Overlay
module

23. Look!
I wrote 10 lines of JS!

24. Oups.

25. Bojhan's
UX napkin

26. Angry user

27. meh.
Good coffee though

28. Follow UX core gate
and I'll commit your patch

29. UX Team
They solve problems

31. Cue months of UX testing

32. And some clean-up

33. Tests went well,
all wrapped up for commit

34. Overlay,
'Like it never happened'

35. Coffee is
sessionStorage

36. // 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);
}
};

37. Extras

38. Jules on IE8 support

39. Butch on variables
taking a leak in his global scope

40. Butch on people not using JSHint

41. Butch on people not using
*.libraries.yml to declare dependencies

42. // 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';

43. Vincent & Jules on
drupal_add_js() & drupal_add_css()

44. Marcellus on outdated JS libraries

45. Jimmie & The Wolf on using jQuery

46. Drupal 8 FTW!

47. Questions?

48. nod_
theodore.biadala at acquia.com