The document discusses various web development techniques using HTML, CSS, and JavaScript, highlighting CSS regions, shapes, and blend modes. It includes links to demos and tools such as PhoneGap and Brackets as well as resources for testing web standards and features. Overall, it serves as a reference for efficient web design principles and experimental web platform features.

1. Adobe & the Web

2. Sydney → Moscow

5. HTML, CSS & JavaScript

6. Demo

7. tinyurl.com/forestgiant

8. CSS Regions

9. #source {
flow-into: main-thread;
}
.region {
flow-from: main-thread;
background: #C5DFF0;
}

10. CSS Shapes

11. #logo {
float: left;
shape-outside: url("logo.png");
shape-image-threshold: 0.1;
shape-margin: 35px;
}
#float-left {
shape-outside: polygon(0 0, 100% 100%, 0 100%);
float: left;
width: 40%;
height: 12ex;
}

12. CSS Blend Modes

13. .container {
background-color: green;
}
.element {
width: 200px;
height: 200px;
background-size: 200px 200px;
background-repeat: no-repeat;
background-image: linear-gradient(...), url(ducky.png);
background-blend-mode: difference, normal;
}

14. normal
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

15. Support
chrome://flags/#enable-experimental-web-platform-features

16. Demo

17. PhoneGap

18. PhoneGap Build

20. Apache Cordova™
cordova.apache.org

21. Topcoat
topcoat.io

23. Brackets
brackets.io

25. Web Platform
webplatform.org

26. Test the Web Forward
testthewebforward.org

27. Sneak Peek

28. Demo

30. html.adobe.com
topcoat.io
brackets.io
webplatform.org
testthewebforward.org
@adobeweb

31. Thank You

32. baranovs@adobe.com
@dmitrybaranovsk