This organization has the purpose to bundle some tutorials about Home Assistant. For the beginning the scope is the development of custom code like cards or integrations.
Each tutorial is done as a separate github repository to be able to ship code alongside. To learn how to set up the development environment at all see tutorial 1.
Depending on the type of the tutorial the repository is cloned into different
"workspaces". Tutorials of cards are cloned into a frontend workspace with the
path config/www/tutor. A hello-moon repository would get the path
config/www/tutor/hello-moon.
- how to use the container of the core developers
- how to get some hello world output from a card
- how to define the card as a custom Element of HTML
- how to add the card as a new resource
- how to assist the setup with error messages
- how to provide a default configuration for the card
- how to add the card to the visual selection
- how to do an interactive toggle card with plain vanilla javascript
- how to create the toggle helper entity
- how to organize the class
- how to encapsulate CSS by use of a prefix (BEM inspired)
- how to read and write from/to the hass object (full roundtrip)
- how to bind the card to the event callback
- how to attach a shadow dom inside the constructor
- how to clean up the lifecycle
- how to get rid of the prefixes
- how to migrate from BEM methodology to nested CSS modifiers
- how to create and organize the class of the editor
- how to register the editor
- about the lifecycle of the editor
- how to implement minimal requirements
- how to install HACS
- how to layout the Github repository for a custom HACS card
- how to use the HACS repository
- how to install nodejs and npm into the development container
- how to update them to recent versions
- how to use npm (the basics)
- how to install Parcel
- how to setup and organize the projects layout
- how to inline HTML and CSS files
- what Lit is
- how to install Lit with NPM
- how it differs from vanilla javascript
- how to use it for the card editor
- how to use it for the toggle card
- how to keep the footprint small
- how to install the required tools for TypeScript
- how to set up the configuration files
- how to migrate the code to TypoScript
- how to enrich the code with typing
- how to import some interfaces for custom card development
This organization provides community created content. It is related to the Home Assistant project. It is not an official part of it.