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"

Fundamentals - three.js manual

"Three.js is often confused with WebGL since more often than not, but not always, three.js uses WebGL to draw 3D. WebGL is a very low-level system that only draws points, lines, and triangles. To do anything useful with WebGL generally requires quite a bit of code and that is where three.js comes in. It handles stuff like scenes, lights, shadows, materials, textures, 3d math, all things that you'd have to write yourself if you were to use WebGL directly."

three.js editor

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