SlideShare une entreprise Scribd logo
1  sur  48
Télécharger pour lire hors ligne
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']['data-mydiv'] = TRUE;
// HTML
<div data-mydiv class='whatever themers want'>
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 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);
}
};
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 categories
component:
css/tooltip.css: {}
dependencies:
- core/drupal
- core/jquery
- core/drupalSettings
// Somewhere in the PHP
$el['#attached']['libraries'][] = 'mymodule/tip';
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

Contenu connexe

Tendances

Ilivanov Alexander.How to make best theme.DrupalCamp Kyiv 2011
Ilivanov Alexander.How to make best theme.DrupalCamp Kyiv 2011Ilivanov Alexander.How to make best theme.DrupalCamp Kyiv 2011
Ilivanov Alexander.How to make best theme.DrupalCamp Kyiv 2011
camp_drupal_ua
 
AngularJS for designers and developers
AngularJS for designers and developersAngularJS for designers and developers
AngularJS for designers and developers
Kai Koenig
 

Tendances (13)

Web internship Yii Framework
Web internship  Yii FrameworkWeb internship  Yii Framework
Web internship Yii Framework
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
GDayX - Advanced Angular.JS
GDayX - Advanced Angular.JSGDayX - Advanced Angular.JS
GDayX - Advanced Angular.JS
 
AngularJS Internal
AngularJS InternalAngularJS Internal
AngularJS Internal
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
 
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationBuilding an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
 
AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.AngularJs $provide API internals & circular dependency problem.
AngularJs $provide API internals & circular dependency problem.
 
AngularJS Directives
AngularJS DirectivesAngularJS Directives
AngularJS Directives
 
Get AngularJS Started!
Get AngularJS Started!Get AngularJS Started!
Get AngularJS Started!
 
Ilivanov Alexander.How to make best theme.DrupalCamp Kyiv 2011
Ilivanov Alexander.How to make best theme.DrupalCamp Kyiv 2011Ilivanov Alexander.How to make best theme.DrupalCamp Kyiv 2011
Ilivanov Alexander.How to make best theme.DrupalCamp Kyiv 2011
 
AngularJS for designers and developers
AngularJS for designers and developersAngularJS for designers and developers
AngularJS for designers and developers
 
AngularJS Services
AngularJS ServicesAngularJS Services
AngularJS Services
 
So S.O.L.I.D Fu - Designing Better Code
So S.O.L.I.D Fu - Designing Better CodeSo S.O.L.I.D Fu - Designing Better Code
So S.O.L.I.D Fu - Designing Better Code
 

En vedette (11)

Fresh plantain chips snacks production line (advance )
Fresh plantain chips snacks production line (advance )Fresh plantain chips snacks production line (advance )
Fresh plantain chips snacks production line (advance )
 
Epashuhaat launch 2016 (press release)
Epashuhaat launch 2016 (press release)Epashuhaat launch 2016 (press release)
Epashuhaat launch 2016 (press release)
 
El porfiriato
El porfiriatoEl porfiriato
El porfiriato
 
Peering DB Update
Peering DB UpdatePeering DB Update
Peering DB Update
 
Ln 367
Ln 367Ln 367
Ln 367
 
bi fold_round
bi fold_roundbi fold_round
bi fold_round
 
Ln 560
Ln 560Ln 560
Ln 560
 
CHARTERED_LETTER
CHARTERED_LETTERCHARTERED_LETTER
CHARTERED_LETTER
 
CHW Vol 15 Isu 1 Jan Quarterly Edgehill Partners
CHW Vol 15 Isu 1 Jan Quarterly Edgehill PartnersCHW Vol 15 Isu 1 Jan Quarterly Edgehill Partners
CHW Vol 15 Isu 1 Jan Quarterly Edgehill Partners
 
Atelier 2 : L'officine dans la strategie marketing des laboratoires
Atelier 2 : L'officine dans la strategie marketing des laboratoiresAtelier 2 : L'officine dans la strategie marketing des laboratoires
Atelier 2 : L'officine dans la strategie marketing des laboratoires
 
Mi Granja por Ana Martinez
Mi Granja por Ana Martinez Mi Granja por Ana Martinez
Mi Granja por Ana Martinez
 

Similaire à Javascript Pulp Fiction

Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e big
Andy Peterson
 
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
Mark Rackley
 
Wicket Deliver Your Webapp On Time
Wicket Deliver Your Webapp On TimeWicket Deliver Your Webapp On Time
Wicket Deliver Your Webapp On Time
Will Hoover
 

Similaire à Javascript Pulp Fiction (20)

Drupal 8: Entities
Drupal 8: EntitiesDrupal 8: Entities
Drupal 8: Entities
 
A Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 MinutesA Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 Minutes
 
Drupal Development
Drupal DevelopmentDrupal Development
Drupal Development
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
Render Caching for Drupal 8
Render Caching for Drupal 8Render Caching for Drupal 8
Render Caching for Drupal 8
 
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 JavascriptjQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
 
Javascript unit testing, yes we can e big
Javascript unit testing, yes we can   e bigJavascript unit testing, yes we can   e big
Javascript unit testing, yes we can e big
 
Upgrade your javascript to drupal 8
Upgrade your javascript to drupal 8Upgrade your javascript to drupal 8
Upgrade your javascript to drupal 8
 
Panada: An Introduction by Iskandar Soesman
Panada: An Introduction by Iskandar SoesmanPanada: An Introduction by Iskandar Soesman
Panada: An Introduction by Iskandar Soesman
 
You're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp OrlandoYou're Doing it Wrong - WordCamp Orlando
You're Doing it Wrong - WordCamp Orlando
 
ONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICES
ONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICESONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICES
ONE MORE TIME ABOUT CODE STANDARDS AND BEST PRACTICES
 
About Data::ObjectDriver
About Data::ObjectDriverAbout Data::ObjectDriver
About Data::ObjectDriver
 
Automating Drupal Migrations
Automating Drupal MigrationsAutomating Drupal Migrations
Automating Drupal Migrations
 
Drupal II: The SQL
Drupal II: The SQLDrupal II: The SQL
Drupal II: The SQL
 
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
 
Debugging in drupal 8
Debugging in drupal 8Debugging in drupal 8
Debugging in drupal 8
 
Java Unit Testing with Unitils
Java Unit Testing with UnitilsJava Unit Testing with Unitils
Java Unit Testing with Unitils
 
Wicket Deliver Your Webapp On Time
Wicket Deliver Your Webapp On TimeWicket Deliver Your Webapp On Time
Wicket Deliver Your Webapp On Time
 
MySQL para Desenvolvedores de Games
MySQL para Desenvolvedores de GamesMySQL para Desenvolvedores de Games
MySQL para Desenvolvedores de Games
 
You're Doing it Wrong - WordCamp Atlanta
You're Doing it Wrong - WordCamp AtlantaYou're Doing it Wrong - WordCamp Atlanta
You're Doing it Wrong - WordCamp Atlanta
 

Plus de Théodore Biadala

Plus de Théodore Biadala (8)

Offline Drupal with progressive web app
Offline Drupal with progressive web appOffline Drupal with progressive web app
Offline Drupal with progressive web app
 
Frontend thunderdome
Frontend thunderdomeFrontend thunderdome
Frontend thunderdome
 
Headful drupal
Headful drupalHeadful drupal
Headful drupal
 
Accessibility is not for screenreaders
Accessibility is not for screenreadersAccessibility is not for screenreaders
Accessibility is not for screenreaders
 
javascript for backend developers
javascript for backend developersjavascript for backend developers
javascript for backend developers
 
Vanilla JS*
Vanilla JS*Vanilla JS*
Vanilla JS*
 
Web accessibiilty and Drupal
Web accessibiilty and DrupalWeb accessibiilty and Drupal
Web accessibiilty and Drupal
 
What's up with javascript and Drupal 8
What's up with javascript and Drupal 8What's up with javascript and Drupal 8
What's up with javascript and Drupal 8
 

Dernier

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 

Dernier (20)

(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 

Javascript Pulp Fiction