SlideShare uma empresa Scribd logo
1 de 72
Baixar para ler offline
HoudiniHoudini programming inprogramming in CSSCSS
Joan LeónJoan León @nucliweb@nucliweb
Madrid | Nov 30 - Dec 1, 2018
HoudiniHoudini
programming inprogramming in CSSCSS
MadridMadrid | Nov 30 - Dec 1, 2018| Nov 30 - Dec 1, 2018
CSSCSS
.CSS { } 
 @nucliweb
 @nucliweb
.CSS { } 
CSS HoudiniCSS Houdini
 @nucliweb
.CSS-Houdini { } 
The objective of the CSS-TAG Houdini Task Force (CSS Houdini) is to
jointly develop features that explain the “magic” of Styling and Layout
on the web. - CSS Houdini
 @nucliweb
.CSS-Houdini { } 
 @nucliweb
Paint API
Typed OM API
Properties & Values API
Animation Worklet
Layout API
Worklets
Font Metrics API
Box Tree API Parser API
.CSS-Houdini { } 
Extends CSSExtends CSS
 @nucliweb
Worklets
    .Extends-CSS { } 
    .Extends-CSS .Worklets { }
 @nucliweb
Worklet connects to the browser engine
Is a Javascript Module
It has no impact on performance
Without control over execution
 @nucliweb
    .Extends-CSS .Worklets { }
 @nucliweb
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('PlaceholderBoxPainter.js');
}
class PlaceholderBoxPainter {
paint(ctx, size) {
// Magic
}
}
registerPaint('placeholder-box', PlaceholderBoxPainter);
worklet
js
    .Extends-CSS .Worklets { }
 @nucliweb
Paint API
    .Extendes-CSS { } 
    .Extends-CSS .Paint-API{ }
 @nucliweb
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('PlaceholderBoxPainter.js');
}
@supports (background: paint(slanted-bg)) {
.el span {
background: paint(slanted-bg);
}
}
css
js
 @nucliweb
class SlantedBg {
constructor () {
this.hue = 110;
}
paint (ctx, geom, props, args) {
// draw random colors
ctx.fillStyle = 'hsl(' + this.hue + ', 100%, 50%)';
this.hue += 10;
...
}
}
registerPaint('slanted-bg', SlantedBg)
worklet
    .Extends-CSS .Paint-API{ }
 @nucliweb
class SlantedBg {
constructor () {
this.hue = 110;
}
paint (ctx, geom, props, args) {
// draw random colors
ctx.fillStyle = 'hsl(' + this.hue + ', 100%, 50%)';
this.hue += 10;
...
}
}
registerPaint('slanted-bg', SlantedBg)
worklet
registerPaint('slanted-bg', class {
constructor () {
this.hue = 110;
}
paint (ctx, geom, props, args) {
// draw random colors
ctx.fillStyle = 'hsl(' + this.hue + ', 100%, 50%)';
this.hue += 10;
...
}
})
    .Extends-CSS .Paint-API{ }
 @nucliweb
https://codesandbox.io/embed/yqm0y9v42v?fontsize=16
    .Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles
 @nucliweb
https://codesandbox.io/embed/r74pzln91q
    .Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles-props
 @nucliweb
https://codesandbox.io/embed/044vkz1k6w
    .Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles-args
 @nucliweb
https://codesandbox.io/embed/zxyzr4l61l
    .Extends-CSS .Paint-API{ } Houdini-Paint-API-Circles-props-JS
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
 @nucliweb
Properties & Values API
    .Extends-CSS { } 
 @nucliweb
    .Extends-CSS .Properties-Values-API { } 
CSS.registerProperty({
name: '--line-with',
syntax: '<number>',
inherits: false,
initialValue: 1
});
js
 @nucliweb
CSS Properties SyntaxCSS Properties Syntax
'<length>' accepts length values.
'<length> | <percentage>' accepts lengths, percentages, percentage calc
expressions, and length calc expressions, but not calc expressions containing a
combination of length and percentage values.
'<length-percentage>' accepts all values that "<length> | <percentage>" would
accept, as well as calc expressions containing a combination of both length..
'big | bigger | BIGGER' accepts the ident "big", or "bigger", or  "BIGGER".
'<length>+' accepts a space-separated list of length values.
    .Extends-CSS .Properties-Values-API { } 
 @nucliweb
CSS Properties SyntaxCSS Properties Syntax
'<length>' accepts length values.
'<length> | <percentage>' accepts lengths, percentages, percentage calc
expressions, and length calc expressions, but not calc expressions containing a
combination of length and percentage values.
'<length-percentage>' accepts all values that "<length> | <percentage>" would
accept, as well as calc expressions containing a combination of both length..
'big | bigger | BIGGER' accepts the ident "big", or "bigger", or  "BIGGER".
'<length>+' accepts a space-separated list of length values.
'<length>'
'<number>'
'<percentage>'
'<length-percentage>'
'<color>'
'<image>'
'<url>'
'<integer>'
'<angle>'
'<time>'
'<resolution>'
'<transform-function>'
'<custom-ident>'
[ ]()css-properties-values-api/#supported-syntax-strings
    .Extends-CSS .Properties-Values-API { } 
 @nucliweb
https://codesandbox.io/embed/92znj0j9ow
    .Extends-CSS .Properties-Values-API { } 
 @nucliweb
//codepen.io/thebabydino/embed/MrZvNm/?height=265&theme-
id=light&default-tab=css,result
    .Extends-CSS .Properties-Values-API { } 
 @nucliweb
    .Extends-CSS .Properties-Values-API { } 
 @nucliweb
    .Extends-CSS .Properties-Values-API { } 
 @nucliweb
postcss-register-custom-propspostcss-register-custom-props
@property --theme {
syntax: '<color>+';
initial-value: #fff;
inherits: true;
}
if ("registerProperty" in CSS)
CSS.registerProperty({
name: "--theme",
syntax: "<color>+",
initialValue: "#fff",
inherits: true
});
}
input output
    .Extends-CSS .Properties-Values-API { } 
( )Vitalii Bobrov
 @nucliweb
postcss-register-propertypostcss-register-property
@property --highlight-color {
inherits: true;
initial-value: red;
syntax: "<color>";
}
@property --gap-spacing {
inherits: false;
initial-value: 1em;
syntax: "<length-percentage>";
}
[
{
"name": "--highlight-color",
"inherits": true,
"initialValue": "red",
"syntax": "<color>"
},
{
"name": "--gap-spacing",
"initialValue": "1em",
"syntax": "<length-percentage>"
}
]
input output
    .Extends-CSS .Properties-Values-API { } 
(Jonathan Neal)
 @nucliweb
postcss-register-propertypostcss-register-property
@property --highlight-color {
inherits: true;
initial-value: red;
syntax: "<color>";
}
@property --gap-spacing {
inherits: false;
initial-value: 1em;
syntax: "<length-percentage>";
}
[
{
"name": "--highlight-color",
"inherits": true,
"initialValue": "red",
"syntax": "<color>"
},
{
"name": "--gap-spacing",
"initialValue": "1em",
"syntax": "<length-percentage>"
}
]
import properties from './styles.css.properties.json';
if (window.CSS && CSS.registerProperty) {
for (const descriptor of properties) {
CSS.registerProperty(descriptor);
}
}
input output
js
    .Extends-CSS .Properties-Values-API { } 
(Jonathan Neal)
 @nucliweb
Typed OM API
    .Extends-CSS { } 
 @nucliweb
    .Extends-CSS .Typed-OM-API { } 
The Type OM API is an extension of the existing CSS object model
(CSSOM) that exposes CSS values as typed JavaScript objects, rather
than a simple string of text as they are today.
With Type OM API, CSS values are now members of a new base class
CSSStyleValue.
CSSUnitValue
CSSKeywordValueCSSPositionValue CSSImageValue
CSSTransformValueCSSMathValue
 @nucliweb
el.style.opacity = 0.5;
window.getComputedStyle(el).opacity === "0.5" // Strings!
CSSOM
el.attributeStyleMap.set('opacity', 0.5);
el.computedStyleMap().get('opacity').value // 0.5
Typed OM
    .Extends-CSS .Typed-OM-API { } 
 @nucliweb
 @nucliweb
calc(1px - 2 * 3em)
new CSSMathSum(
CSS.px(1),
new CSSMathNegate(
new CSSMathProduct(2, CSS.em(3))
)
);
 @nucliweb
Nested expressions
    .Extends-CSS .Typed-OM-API { } 
el.attributeStyleMap.set('font-size', CSS.em(2));
el.attributeStyleMap.get('font-size');
// CSSUnitValue { value: 2, unit: 'em' }
el.attributeStyleMap.set('opacity', CSS.number(.5));
el.attributeStyleMap.get('opacity');
// CSSUnitValue { value: 0.5, unit: 'number' }
 @nucliweb
attributeStyleMap
    .Extends-CSS .Typed-OM-API { } 
.foo {
background-position: center bottom 10px;
transform: translateX(1em) rotate(50deg) skewX(10deg);
vertical-align: baseline;
width: calc(100% - 3em);
}
 @nucliweb
css
    .Extends-CSS .Typed-OM-API { } 
const cs = document.querySelector('.foo').computedStyleMap();
cs.get('vertical-align');
// CSSKeywordValue {
// value: 'baseline',
// }
cs.get('background-position').x;
// CSSUnitValue {
// value: 50,
// unit: 'percent',
// }
cs.get('background-position').y;
 @nucliweb
computedStyleMap
    .Extends-CSS .Typed-OM-API { } 
 @nucliweb
Animation Worklet
    .Extends-CSS { } 
 @nucliweb
    .Extends-CSS Animation-Worlet { } 
[houdini.glitch.me/animation]()
 @nucliweb
Layout API
    .Extends-CSS { } 
 @nucliweb
    .Extends-CSS  .Layout-API {}
SupportSupport
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
ConclusionsConclusions
 @nucliweb
    .Conclusions { } 
Polylills
 @nucliweb
    .Conclusions { } 
Polylills
This is not for me
 @nucliweb
    .Conclusions { } 
Polylills
This is not for me
Free will
 @nucliweb
    .Conclusions { } 
Polylills
This is not for me
Houdini is NOT like a Babel for CSS
Free will
 @nucliweb
    .Conclusions { } 
Polylills
This is not for me
Houdini is NOT like a Babel for CSS
Free will
 @nucliweb
    .Conclusions { } 
Polylills
This is not for me
Houdini is NOT like a Babel for CSS
Free will
I see another talk...
CSSCSS
isis
AwesomeAwesome
ResourcesResources
 @nucliweb
    .Resources { } 
How Browsers Work: Behind the scenes of modern web browsers
.Awesome-CSS-Houdini { }  are welcome⭐
Houdini samples
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Developer Advocate
at
 
Co-Founder & UI Engineers
at
@SchibstedSpain
@sublime_codes
Joan León
.Hello {.Hello {
}}
@nucliweb
#Javascript
#CSS
#PostCSS
#Animation
#SVG
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018
SUI ComponentsSUI Components
@suiengineers
SUI ComponentsSUI Components
@suiengineers
SUI ComponentsSUI Components
@suiengineers
SUI ComponentsSUI Components
@suiengineers
@carlosvillu @midudev
.Talk::after {.Talk::after {
}}
content: "content: "Any question?Any question?";";
 @nucliweb
.Thanks {.Thanks {
}}
@nucliweb

Mais conteúdo relacionado

Mais procurados

codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIsRemy Sharp
 
IE9에서 HTML5 개발하기
IE9에서 HTML5 개발하기IE9에서 HTML5 개발하기
IE9에서 HTML5 개발하기Reagan Hwang
 
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagDavid Voyles
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring CanvasKevin Hoyt
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherIvano Malavolta
 
Paperjs presentation
Paperjs presentationPaperjs presentation
Paperjs presentationsharp-blade
 
Code Tops Comments
Code Tops CommentsCode Tops Comments
Code Tops CommentsMr Giap
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsInayaili León
 
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsMS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsSpiffy
 
MongoDB World 2019: Tips and Tricks++ for Querying and Indexing MongoDB
MongoDB World 2019: Tips and Tricks++ for Querying and Indexing MongoDBMongoDB World 2019: Tips and Tricks++ for Querying and Indexing MongoDB
MongoDB World 2019: Tips and Tricks++ for Querying and Indexing MongoDBMongoDB
 
The Ring programming language version 1.5.1 book - Part 41 of 180
The Ring programming language version 1.5.1 book - Part 41 of 180The Ring programming language version 1.5.1 book - Part 41 of 180
The Ring programming language version 1.5.1 book - Part 41 of 180Mahmoud Samir Fayed
 

Mais procurados (20)

codebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIscodebits 2009 HTML5 JS APIs
codebits 2009 HTML5 JS APIs
 
IE9에서 HTML5 개발하기
IE9에서 HTML5 개발하기IE9에서 HTML5 개발하기
IE9에서 HTML5 개발하기
 
HTML5 Canvas
HTML5 CanvasHTML5 Canvas
HTML5 Canvas
 
HTML 5_Canvas
HTML 5_CanvasHTML 5_Canvas
HTML 5_Canvas
 
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tagAdvanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
 
Canvas - HTML 5
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
 
HTML CANVAS
HTML CANVASHTML CANVAS
HTML CANVAS
 
Theme verdadeiro
Theme verdadeiroTheme verdadeiro
Theme verdadeiro
 
SVG overview
SVG overviewSVG overview
SVG overview
 
CSS3 Refresher
CSS3 RefresherCSS3 Refresher
CSS3 Refresher
 
HTML5 and CSS3 Refresher
HTML5 and CSS3 RefresherHTML5 and CSS3 Refresher
HTML5 and CSS3 Refresher
 
Paperjs presentation
Paperjs presentationPaperjs presentation
Paperjs presentation
 
Code Tops Comments
Code Tops CommentsCode Tops Comments
Code Tops Comments
 
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and AnimationsCSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and Animations
 
Svg
SvgSvg
Svg
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome BitsMS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
 
MongoDB World 2019: Tips and Tricks++ for Querying and Indexing MongoDB
MongoDB World 2019: Tips and Tricks++ for Querying and Indexing MongoDBMongoDB World 2019: Tips and Tricks++ for Querying and Indexing MongoDB
MongoDB World 2019: Tips and Tricks++ for Querying and Indexing MongoDB
 
The Ring programming language version 1.5.1 book - Part 41 of 180
The Ring programming language version 1.5.1 book - Part 41 of 180The Ring programming language version 1.5.1 book - Part 41 of 180
The Ring programming language version 1.5.1 book - Part 41 of 180
 

Semelhante a Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018

Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Codemotion
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSSSayanee Basu
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the WorldJonathan Snook
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)emrox
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
Keep calm and let's play CSS3
Keep calm and let's play CSS3Keep calm and let's play CSS3
Keep calm and let's play CSS3A2 Comunicação
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. The University of Akron
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid PrototypingEven Wu
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Startededgincvg
 
Solving CSS Problems With eCSStender - An Event Apart - Chicago 2009
Solving CSS Problems With eCSStender - An Event Apart - Chicago 2009Solving CSS Problems With eCSStender - An Event Apart - Chicago 2009
Solving CSS Problems With eCSStender - An Event Apart - Chicago 2009Aaron Gustafson
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventRobert Nyman
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichRobert Nyman
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageKatsunori Tanaka
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRachael L Moore
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 

Semelhante a Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018 (20)

Houdini - What lies ahead
Houdini - What lies aheadHoudini - What lies ahead
Houdini - What lies ahead
 
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
 
Using Sass - Building on CSS
Using Sass - Building on CSSUsing Sass - Building on CSS
Using Sass - Building on CSS
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 
Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)Sass & Compass (Barcamp Stuttgart 2012)
Sass & Compass (Barcamp Stuttgart 2012)
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
Keep calm and let's play CSS3
Keep calm and let's play CSS3Keep calm and let's play CSS3
Keep calm and let's play CSS3
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Sass and Compass - Getting Started
Sass and Compass - Getting StartedSass and Compass - Getting Started
Sass and Compass - Getting Started
 
Sass
SassSass
Sass
 
Solving CSS Problems With eCSStender - An Event Apart - Chicago 2009
Solving CSS Problems With eCSStender - An Event Apart - Chicago 2009Solving CSS Problems With eCSStender - An Event Apart - Chicago 2009
Solving CSS Problems With eCSStender - An Event Apart - Chicago 2009
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
 
LESS : The dynamic stylesheet language
LESS : The dynamic stylesheet languageLESS : The dynamic stylesheet language
LESS : The dynamic stylesheet language
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End Story
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 

Mais de Codemotion

Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...Codemotion
 
Pompili - From hero to_zero: The FatalNoise neverending story
Pompili - From hero to_zero: The FatalNoise neverending storyPompili - From hero to_zero: The FatalNoise neverending story
Pompili - From hero to_zero: The FatalNoise neverending storyCodemotion
 
Pastore - Commodore 65 - La storia
Pastore - Commodore 65 - La storiaPastore - Commodore 65 - La storia
Pastore - Commodore 65 - La storiaCodemotion
 
Pennisi - Essere Richard Altwasser
Pennisi - Essere Richard AltwasserPennisi - Essere Richard Altwasser
Pennisi - Essere Richard AltwasserCodemotion
 
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...Codemotion
 
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019Codemotion
 
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019Codemotion
 
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
Francesco Baldassarri  - Deliver Data at Scale - Codemotion Amsterdam 2019 - Francesco Baldassarri  - Deliver Data at Scale - Codemotion Amsterdam 2019 -
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 - Codemotion
 
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...Codemotion
 
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...Codemotion
 
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...Codemotion
 
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...Codemotion
 
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019Codemotion
 
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019Codemotion
 
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019Codemotion
 
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...Codemotion
 
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...Codemotion
 
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019Codemotion
 
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019Codemotion
 
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019Codemotion
 

Mais de Codemotion (20)

Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
 
Pompili - From hero to_zero: The FatalNoise neverending story
Pompili - From hero to_zero: The FatalNoise neverending storyPompili - From hero to_zero: The FatalNoise neverending story
Pompili - From hero to_zero: The FatalNoise neverending story
 
Pastore - Commodore 65 - La storia
Pastore - Commodore 65 - La storiaPastore - Commodore 65 - La storia
Pastore - Commodore 65 - La storia
 
Pennisi - Essere Richard Altwasser
Pennisi - Essere Richard AltwasserPennisi - Essere Richard Altwasser
Pennisi - Essere Richard Altwasser
 
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
 
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
 
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
 
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
Francesco Baldassarri  - Deliver Data at Scale - Codemotion Amsterdam 2019 - Francesco Baldassarri  - Deliver Data at Scale - Codemotion Amsterdam 2019 -
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
 
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
 
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
 
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
 
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
 
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
 
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
 
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
 
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
 
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
 
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
 
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
 
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
 

Último

IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 

Último (20)

IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 

Joan Leon | Houdini, programando en CSS | Codemotion Madrid 2018