102
Hey everybody btopro <bee-tee-oh-pro> here

Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

  • Upload
    others

  • View
    5

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Hey everybody

btopro<bee-tee-oh-pro>

here

Page 2: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

<hax-talk location=”CMSPhilly”

quarantine >

Page 3: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

- Penn State EdTech developer- ELMS:LN / HAX / HAXcms- IST 402 Emerging Technologies- haxtheweb.org

- Drupal developers ~12 years- 100+ contrib / distros on d.o.

- Web component developer ~3 years- 200+ npm web component projects- 400+ web components our team has made

[at]btopro = Developer

Page 4: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

- Our institutions & world deserve more

- Improve education, improve society

- Decentralize powerful monocultures using open source as vehicle of change

- Embedded in edu to development tech society needs to shift beyond what market norms can produce

- I’ve found my purpose; I’m honored to get to live it

[at]btopro = Developer Activists

Page 5: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

{“[at]btopro” : new DeveloperActivist() }

typeof DeveloperActivist undefined?

Page 6: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

DeveloperActivist()

All code enacts change.

A DeveloperActivist writes code

to enact social change.

Page 7: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

let btopro = new DeveloperActivist();

let input = “today”;

btopro.generateSocialImpact(input);

Page 8: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

The complexities of modern web publishing have driven the majority of content to be produced on platforms

controlled by few

Page 9: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Who have no market reason to engineer

socialmedia://

Page 10: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

email has no ownerhttp has no ownerhtml has no owner

standards help ensureequal access and fair markets emerge on top

Page 11: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

webmentions (protocol)

exists but requires quality

UX in all platforms

implementing in order to be more than hobbiest

Page 12: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

The web needs a moonshot if we

are to ever grow beyond the

vendors of 2000

Page 13: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

A moonshot to reduce complexity

in..

Distributionand

Publishingrequires

fundamentally better

Authoring eXperiences

Page 14: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

HAX is a moonshot

To change publishing

Page 15: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

And our team viewsW3C standardweb components

as the only wayto deploy that moonshot

Page 17: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

{Snarky the engineer}

Who even uses those anyway?

Page 18: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that Google thing?

Page 19: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 20: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 21: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 22: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 23: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 24: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 25: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 26: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 27: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 28: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components..?

You mean that thing?

Page 29: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

youtube.com/watch?v=mtHf7crZZIQ

Page 30: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

youtube.com/watch?v=mtHf7crZZIQ

Page 31: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

youtube.com/watch?v=mtHf7crZZIQ

Page 32: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

youtube.com/watch?v=mtHf7crZZIQ

Page 33: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

youtube.com/watch?v=mtHf7crZZIQ

Page 34: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

youtube.com/watch?v=mtHf7crZZIQ

Page 35: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components are a standard that work in all browsers

HTML code from 1995 still works

well, maybe not <blink>

Page 36: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

That work every where!

Page 37: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

And libraries can polyfill IE11..

Page 38: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Custom-elements-everywhere.com

Page 39: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Whew that sounds great

Snarky loves web components now

Page 40: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 41: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

My tribe found me

now HAX is OUR moonshot

Page 42: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

HAX is OUR moonshot

To shake up the web

Page 43: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

HAX & #HAXTheWeb?

Page 44: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

HeadlessAuthoringeXperience

Page 45: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

HAX is Headless?

Platform agnostic, a client-side API driven development method decoupled from servers

Page 46: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

HAX === moonshot goal

Create a platform agnostic authoring experience that is second to none yet plugs into any platform that saves HTML blobs.

Page 47: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

100% F SSHAX

Page 48: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

class HAX extends

HTMLElement

<h-a-x>

Page 49: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 50: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 51: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 52: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 53: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Drupal 7, 8 and 9!

Page 54: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 55: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 56: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 57: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Live Demo

Drupal&

HAXcms

Page 58: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

How can we support all these

integrations so seamlessly?

Page 59: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

unified integration

Page 60: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Identical settings

Page 61: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 62: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Web components create bridges between our code echo chambers

Page 63: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 64: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 65: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Unbundled JS assets empower authors to

run HAX withz3r0 config

Page 66: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

HAX

Page 67: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

HAX

Page 68: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

we are a bridge that connects all

communities!

Page 69: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

We are #HAXTheWeb

And you can be too!

Page 70: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

And share via npm

Page 71: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

And ship unbundled via CDNs

https://github.com/elmsln/unbundled-webcomponents

Page 72: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Discover on webcomponents.org

Page 73: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Learn on open-wc.org

Page 74: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Reusable Web componentsare the

revolution in how our team builds the web

Page 75: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

www.webcomponents.org

Page 76: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

www.webcomponents.org

Page 77: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

www.webcomponents.org

Page 78: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

ELMS:LN / HAXTheWebhave been onweb components

for 3 years..And love them

Page 79: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

www.webcomponents.org

Page 80: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring
Page 81: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

stop-note

HAXTheWeb

@cgldevel

Page 82: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

self-check

HAXTheWeb

@cgldevel

Page 83: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

self-check

HAXTheWeb

@cgldevel

Page 84: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

person-testimonial

HAXTheWeb

@cgldevel

Page 85: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

hax.camp

Page 86: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Custom HAXcms theme developer!

Page 87: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

odl.science.psu.edu

Page 88: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

figure-label

HAXTheWeb

@hey__mp

Page 89: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

wcfactory tooling

HAXTheWeb

@hey__mp

Page 90: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

a11y-gif-player

HAXTheWeb

@NikkiMK

Page 91: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

a11y-collapse

HAXTheWeb

@NikkiMK

Page 92: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

a11y-tabs

HAXTheWeb

@NikkiMK

Page 93: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

simple-colors

HAXTheWeb

@NikkiMK

Page 94: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

simple-fields

HAXTheWeb

@NikkiMK

Page 95: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

video-player

HAXTheWeb

@NikkiMK

Page 96: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

editable-table

HAXTheWeb

@NikkiMK

Page 97: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

editable-table

HAXTheWeb

@NikkiMK

Page 98: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

We are all bridge

builders with web components

Page 99: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Hang in there

the worldNeeds you and we need each

other!

Page 100: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

hax.camp un-code!

Page 101: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Fri 3-5pm EST

bit.ly/haxslack

Page 102: Hey everybody btopro · HAX is Headless? Platform agnostic, a client-side API driven development method decoupled from servers. HAX === moonshot goal Create a platform agnostic authoring

Questions?

[at]btoproHAXTheWeb.org

Hax.camp

< /hax-talk>