This document provides an overview and update on the ELMS:LN project and the development of the Next Generation Digital Learning Environment (NGDLE). The key points are: 1. ELMS:LN version 1.0.0 has been released, focusing on course content management and studio-based instruction. 2. The NGDLE is comprised of over 286 reusable web components and tools rather than a single system. 3. The HAX project is taking on a life of its own and providing a tangible vision of what the NGDLE can be through web components that work across different platforms and systems. 4. The presenter discusses how web components, HAX, and learning

1. State of the
Network
ELMS:LN 2020 update @Apereo

2. Zoom voice in
basement
===
Bryan Ollendyke
@btopro

3. “We” did it!
“We” built the NGDLE

4. ELMS:LN v1.0.0 WE DID IT!
● Scope refined to two instructional tools:
○ Course content management
○ Studio based instruction
● Web components
○ Dev pipeline ensures quality
○ Wider browser support w/ less testing
○ UI pieces work in ANY system
○ More performant than before
○ Serves > 10,000 PSU students annually
github.com/elmsln/elmsln

5. We did it!
It’s over. 1.0.0. We built the NGDLE

6. We did it!
We built the NGDLE... right?
🧐🧐

7. NGDLE
Except.. NGDLE isn’t one system.. Is it?
🧐🧐 🤔⁉

8. NGDLE
and just two developers people !== “we”
🤔⁉🤔⁉

9. Thank you for
listening
🧐⁉ 🤔⁉
To btopro ramble
ELMSLN
Elmsln.org
This is what it
WOULD have
been in 2015..

10. Reboot
In progress

11. NGDLE
Has a different
meaning today

12. We Hax’ed
NGDLE

13. Now, Go Do
Learning
Engineering!

14. Now, Go Do
Learning
Engineering!
Shhh just for today..
😏😏😏😏

15. We Go Do Learning Engineering
(WGDLE)
● ELMS:LN a project umbrella
● HAX taking on a life of its own..
○ Tangible vision of NGDLE
○ 286 NPM web components / tooling repos
○ All packages benefit the elmsln platform
● Uniting message
○ Web components work everywhere

16. Web
Components
In five slides… 🤯

17. Web components work everywhere

18. Distributed via npmjs.org
> npm install
@lrnwebcomponents/video-player

19. video-player.js
reuse elements

20. extend from HTMLElement

21. Styles encapsulated

22. <h-a-x>
HAX === WC that edits HTML
WC === HTML

23. * frameworks && * platforms

24. *.* === #HAXTheWeb.capable

25. HAX all Webs

26. HAX integrations
● WordPress / ClassicPress
○ https://wordpress.org/plugins/haxtheweb/
● Drupal 7, 8 and 9
○ https://drupal.org/project/hax
● BackdropCMS
○ https://backdropcms.org/project/hax
● GravCMS
○ https://github.com/elmsln/grav-plugin-hax
● 11ty + HAX = hax11ty
○ https://github.com/elmsln/hax11ty

27. “the magic script”
● Unbundled-webcomponents
○ https://github.com/elmsln/unbundled-webcomponents
● Standard build routine works across all platforms IE11+
● Dynamically loads only the web components used
● Perfect for CMS and LMS context
● Penn State has deployed this to a cloudfront CDN

28. HAX The elmsln

29. HAX The GravCMS

30. HAX The Drupal 7

31. HAX The Drupal 8 & 9

32. HAX The WordPress

33. HAX..CMS ??

34. HAXcms
● Static site generator for the masses
○ HAX as editor
○ Lightweight outline tool
○ Saves .html / basic folder structure
○ Web components for theming
● Goals
○ Democratise publishing / creativity
○ Make OER remix painless
○ lock-in free solution at all levels

35. odl.science.psu.edu

36. HAX.psu.edu - IST 402

38. #EdTechJoker
● Education as activism
○ Contributing to HAX as part of IST curriculum
○ UX auditing / feedback / code to improve HAX / HAXcms
○ Learning open source through active participation
○ Summer internships towards UX / process
○ Independent studies on documentation / tooling
● HAX.PSU.EDU
○ Enterprise multi-site version of HAXcms (HAXiam)
○ 155 users / 371 sites so far
○ It hasn’t been advertised yet

39. HAX The Edu

40. HAX The Gov
● UX study contributed by National Archives
○ Formal UX audit on HAX
○ 21 issues identified; 19 resolved
○ Contributed tooling documentation
● Training gov agencies
○ Free gov centric Drupal events
○ 100+ attendees between multiple events
○ Web components solving problems

41. Web components in gov

42. HAX gov - pre UX work

43. HAX gov - post UX work

44. HAX Vendors

45. Reclaim Hosting: HAXcms

46. Reclaim Hosting: GravCMS + HAX

49. Join the HAX community
● 2 day HAX camp at Duke
hax.camp
● Growing slack channel w/ discussions
bit.ly/haxslack
● Friday 3-5 EST recorded “uncode” sessions
○ ELMS:LN on YouTube (episodes weekly)

50. hax.camp Apereo
Wed / Thurs afternoon this week!
Come discuss anything HAX / web components

51. The road ahead
● UX audits / refine HAX
● Improve documentation / promo sites
● More events (post covid)
● Deeper platform integrations
● HAXDesktop
● Collaboration with You!

52. Web components bridge our
Code echo chambers

53. We are ALL Learning Engineers!
Let’s build together!
�
��🏽 🎓
�� 🏫
��

54. Questions
🧐🤔⁉
Collaborations
haxtheweb.org
elmsln.org
bit.ly/haxslack
@haxcamp
@elmsln
#HAXTheWeb
@btopro