Web Components in Space Episode 1

This is a cross-post of the first episode of my spacelab based Web Components learning video series called "Web Components in Space"!

  • Episode 1: Watch all of Episode 1

    Play this playlist for the intro, the run-down on what we'll learn and do in Episode 1, the show and tell, the interview, and the seven part lab.

  • Episode 1.1: Run-down

    Ben gives a quick run-down on what we'll learn and build today, the technologies we'll use, who we'll be talking to and what they built.

    Tools and technology we'll use today:

  • Episode 1.2: Show & Tell

    Ben shows off our special guest's halftone rendering experiments before sitting down to chat.

  • Episode 1.3: Interview with Dmitry Baranovskiy

    Ben chats with special guest Dmitry Baranovskiy. Dmitry talks a bit about his life and early career immigrating to Australia. But mostly we nerd out on math and making generative art/visualizations that led to halftones.

    So. Much. Nerding out. And then we throw in a little chess visualization just in case it wasn't nerdy enough

    Links:

  • Episode 1.4: Lab Step 1 - Setup

    Step 1 Code

    Since this is the first episode and the first time we're setting up a lit application, lets focus on the first steps of laying out our application.

    In this first step, we cover

    • - Creating our gitignore and putting our assets into place
    • - Creating a package.json and installing our dependencies
    • - Creating our application source folder with a single component folder
    • - Creating our index.html and pointing to our app component source
    • - Creating our first component file (app.js) with an index.js entry point
    • - Filling in our component with Lit functionality and render some HTML
    • - Importing Spectrum Web Components and add a theme container
    • - Building out our layout using HTML and CSS
    • - Getting the halftone component working
    • - Adding a background slot
  • Episode 1.5: Lab Step 2 - Organizing and creating our first child component

    Step 2 Code

    In this second step, we're going to do some custom organization of our main app component, but also build out our first child component that allows us to select an image to use for our halftone

    Step 2 covers:

    • - Separating out our HTML/CSS into different files
    • - Creating the "floatingheader" component
    • - Mapping an array of image URLs to thumbnails
    • - Adding our first Spectrum Web Component with icon
  • Episode 1.6: Lab Step 3 - Completing the UI

    Step 3 Code

    In step 3, we're continuing our Spectrum Web Components journey. First we'll fill in the "floatingfooter" component with some download buttons. Next, we'll go crazy with the side panel and employ several different Spectrum Web Components

    Step 3 covers:

    • - Creating our 2 remaining application components
    • - Using Spectrum Web Component's "action button", "field-label", "picker", "color-area" and "color-slider" components
    • - Finishing our application's UI layout and design
  • Episode 1.7: Lab Step 4 - Creating a naive data model

    Step 4 Code

    In step 4, we're going to stop hard-coding all of our attributes/properties and let them flow through to our child components using Lit's "Reactive Properties". The end result is that we can control all of our settings from the main component.

    In step 4 we:

    • - Create an object in our main component with all of our application properties
    • - Replace hard-coded attributes with Reactive Properties
    • - Populate our child components with Reactive Properties and use them in their HTML instead of hard-coded values
    • - Make Side panel UI reflect data model
    • - Give selected image a border based on current selection
  • Episode 1.8: Lab Step 5 - Listening and responding to change events

    Step 5 Code

    In step 5 we get our application working by finally applying values changed from our various UI pieces to our data model, which updates every piece of our application.

    Step 5 covers:

    • - Using Lit-HTML syntax to add event listeners right on our tags
    • - Decide how to listen to these changes (is it @change or JS coded event listeners?)
  • Episode 1.9: Lab Step 6 - Finishing Steps

    Step 6 Code

    Step 6 finishes up the application. We add a few final touches to make our application really sing.

    Step 6 adds:

    • - Resizing of the halftone-component
    • - SVG/JPG/PNG saving
    • - Local image uploading
    • - Wire up color tab to allow switching between background color and halftone color
    • - An SVG logo to the app that we created with the tool
  • Episode 1.10: Lab Step 7 - Extra fun

    This last step doesn't have a Git branch associated with it. We're just having a bit of extra fun as we play with our webcam, create an SVG logo for our application using what we've built, and then just recap what we've learned a bit.