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

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

7.
Custom
HTML?

8.
Divitis
Classitis

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

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

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.
TWIG

13.
Drupal 8 frontend

14.
The gold feature

15.
Frontend testing,
it's been well hidden

16.
JS Patching

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

18.
The overlay situation

19.
Overlay
module

20.
Look!
I wrote 10 lines of JS!

21.
Oups.

22.
Bojhan's
UX napkin

23.
Angry user

24.
meh.
Good coffee though

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

26.
UX Team
They solve problems

27.
Cue months of UX testing

28.
And some clean-up

29.
Tests went well,
all wrapped up for commit

30.
Overlay,
'Like it never happened'

31.
Coffee is
sessionStorage

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.
Extras

34.
Jules on IE8 support

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

36.
Butch on people not using JSHint

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

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.
Vincent & Jules on
drupal_add_js() & drupal_add_css()

40.
Marcellus on outdated JS libraries

41.
Jimmie & The Wolf on using jQuery

42.
Drupal 8 FTW!

43.
Questions?

44.
nod_
theodore.biadala at acquia.com