Season 1 Episode 1

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:

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:

• Adobe’s Spectrum Web Components
• Lit
• Web Dev Server

Episode 1.2:

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

Episode 1.3:

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:

• Dmitry @ Observable
• Dmitry’s Chess Visualizations
• Dmitry’s Halftone Experimentation
• Dmitry’s twitter handle: @DmitryBaranovsk

Episode 1.4:

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:

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:

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:

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:

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:

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:

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.