Posted on

The Power of @ngrx/signalstore: A Deep Dive Into Task Management

The domain of Angular state management has received a huge boost with the introduction of Signal Store, a lightweight and versatile solution introduced in NgRx 17. Signal Store stands out for its simplicity, performance optimization, and extensibility, making it a compelling choice for modern Angular applications.

In the next steps, we'll harness the power of Signal Store to build a sleek Task Manager app. Let's embark on this journey to elevate your Angular application development. Ready to start building? Let's go!

Posted on

React Hooks – A Short Introduction

In this tutorial, we'll go over how to use and understand React Hooks. This article is an extension of article how-to-manage-state-with-hooks-on-react-components. It has been expanded with other Hooks and logic and Lessons Learned.

Here we create a simple product page with a shopping cart (see image 2). The shopping cart represents the memory (or the 'state') of the product page. The state generally refers to application data that must be tracked.

Posted on

Virtual Reality and Augmented Reality in the Browser

Introduction

This article about Progressive web apps is about implementing Virtual Reality (VR) and Augmented Reality (AR) in your web app. For this, we use A-Frame and the WebXR Web API.

VR moves users to another world and lets them experience it as if they were themselves in this virtual world. AR, on the other hand, offers the possibility to blend the real and virtual worlds into one another. Both VR and AR offer unique opportunities for behavioral change, knowledge transfer, training, and research. For example, think of VR live streaming, social VR, and art. All this is now also possible in the browser!

Posted on

Tutorial: How to Build a Progressive Web App (PWA) with Face Recognition and Speech Recognition

This is a follow up to the second tutorial on PWA. You can also follow this tutorial if you haven't followed the second one or my first tutorial about PWA. We are going to focus on some new Web APIs, such as:

We add these APIs to our existing PWA for taking 'selfies.' With face detection, we predict your emotion, your gender, and your age.

Posted on

Hooks by Example: Convert a Tesla Battery Range Calculator to Functional Components

In this tutorial, we started with an existing React-app with which we can calculate how much range the Tesla has under different circumstances. The range of a battery depends on the speed, the outside temperature, the climate and the wheel size.

In order to learn React hooks more thoroughly I converted this existing React-app from React Class Components to one with just React Functional Components. That is the goal of this tutorial!

Posted on

Tutorial Part 2: How to Build a Progressive Selfies Web App with JavaScript

If you're looking to build a powerful PWA that takes advantage of the hardware on a device, things are only going to get better. In my previous post, I explained the fundamental concepts of PWA. In this article, I will discuss some PWA features that provide access to your hardware APIs:

Requirements

To start with this tutorial you must install the following:

Posted on

Tutorial: How to Build a Progressive Web App (PWA)

You need a native app. That's what we've been told repeatedly since Apple first announced the iPhone App Store. And perhaps you do. Native apps can make sense, depending on an organization's size and needs.

But what about potential customers who don't have your app? Or current customers on a desktop computer? What about people with limited space on their phones who delete apps to make room for other things? What is their experience like?

Posted on

Vue.js Tutorial: Build a Tesla Battery Range Calculator in Vue 3


This tutorial focuses entirely on the new driving experience. It is now clear that electric driving is the future. But how far can you actually ride on a full battery? And what influence does the speed, outside temperature, and size of the rims have on the range, for example? In this tutorial, we get started with Vue.js, an easy-to-understand JavaScript framework. We are going to make a dashboard with which we can calculate how much range the Tesla has under different circumstances.

As a starting point for the tutorial, clone this Github repository.