Lit & web components

name "Lit" stands for "little" library

 This is going to be Lit 🔥 with Justin Fagnani (JS Party #284) |> Changelog

Lit, a library that helps you build web components. With 17% of pageviews in Chrome registering use of web components, Lit has gained widespread adoption

links:

• Lit docs & examples
• Throwback Lit html episode on the Web Platform Podcast with Amal
• Polymer Library - Lit’s predecessor
• Custom Elements
• Shadow DOM
• Templates and Slots
• JS Tagged Template Literals
• Lit Element base class
• Amal’s singing about “dangerously set innerHTML”
• Proposal for Scoped Custom Element Global Registries
• Proposal for declarative Shadow DOM
• Proposal for Template Instantiation
• Proposal for DOM Parts
• Proposal for “open-stylable” Shadow Roots
• Proposal for JavaScript Decorators
• Lit labs packages
• Google’s Wireit - updates your npm scripts to make them smarter
• Justin’s npm cli RFC for adding Googe’s Wireit script runner to npm

WebGL != three.js

WebGL is a custom language used for graphics card programming;

WebGL - Wikipedia
WebGL (Short for Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins.

three.js library make this more developer friendly from JavaScript; far from "easy"

Hello vertex attributes - Web APIs | MDN

<script type="x-shader/x-vertex" id="vertex-shader">
  #version 100
  precision highp float;

  attribute float position;

  void main() {
    gl_Position = vec4(position, 0.0, 0.0, 1.0);
    gl_PointSize = 64.0;
  }
</script>

<script type="x-shader/x-fragment" id="fragment-shader">
  #version 100
  precision mediump float;
  void main() {
    gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
  }
</script>

demo

 Draw With WebGL Flowers @codepen.io