Month: September 2024

‏Matter and Thread – What’s the difference?

Matter and Thread are different. You can use Matter over a number of different network types. (WiFi, Thread and I think Bluetooth)

Thread is a radio protocol (very similar to ZigBee) and you can run Matter over Thread but you need something called a Thread Border Router to sit between your network and the Thread network (just like a hub or Z2M does now).

So matter over WiFi doesn’t need anything dongle (other than WiFi). Thread needs a border router which could be a dongle or something like an Alexa or Apple TV etc.

A communication protocol for IoT devices

Thread is a low-power mesh networking standard for IoT devices. The low-power aspect is important for battery-powered smart home devices. However, it’s also low-bandwidth, making it ideal for applications that don’t send a lot of data, like switches or motion sensors.

Thread uses the same RF technology as Zigbee (IEEE 802.15.4) but provides IP connectivity similar to Wi-Fi. Unlike Zigbee, Thread by itself does not allow controlling devices: It is just a communication protocol. To control the Thread devices, a higher-level protocol is required: Matter or Apple HomeKit. Thread devices use the IPv6 standard to communicate both inside and outside the mesh network.

You can read about Home Assistant integration here.

Installing USWDS in Angular

USWDS is a U.S. Web Design System. The beauty of it is that it brings together Developers and Designers.

This is for public use and you can find it here;

https://designsystem.digital.gov/components/modal

On a technical note, you can think of it as Bootstrap implementation of USWDS though it’s not Bootstrap. It comes with its own CSS classes, themes, icons and JavaScript modules.

Installation instruction is straight forward for Web development tools that doesn’t require TypeScript to implement client side behavior, for example ASP.NET Core, PHP etc.

My challenge was to implement this in Angular v18.0. While searching for Typescript modules, I found Angular package in their documentation;

https://designsystem.digital.gov/documentation/implementations

This is the package link;

https://github.com/GSA/ngx-uswds

This seems to be well-maintained by developer’s community. Here is the demo link of these packages;

https://gsa.github.io/ngx-uswds/?path=/story/introduction–overview

Installation instructions are very simple. Run this;

npm install @gsa-sam/ngx-uswds

As of this writing this package targets Angular 17 and you might get an error installing this. Run this command to force it to install;

npm install @gsa-sam/ngx-uswds --force

You will see a folder under node_modules in your project.

Basic installation is done;

1 - npm install --save uswds@latest
2 - add "node_modules/uswds/dist/css/uswds.min.css" to the "styles"
    section of angular.json
3 - add "node_modules/uswds/dist/js/uswds.min.js" to the "scripts" 
    section of angular.json

How we are going to use it? In my case, I need to bring in individual component, for example a modal dialog box.

Create a component in your application;

ng g c my-modal

Open my-modal component. Open modal-basic.component.ts file from their github repo. see picture below;

Paste their code in your component and template file. You are good to go.

Their is another option that seems to be promising on GSA front;

https://buy.gsa.gov/style_guide/?path=/docs/components-date-picker–docs

This package has limited USWDS components but has more components available. We can use both. right 🙂

Enjoy!