jonnygold.net blog

MVDS.digital: The New Home for MVDS Services, Resources, and Content

2025-08-20T00:00:00+00:00

I am proud to announce that MVDS has a new home on the web. That home is https://mvds.digital/. The site includes new entirely content to promote the services offered by MVDS. I have started migrating content from this site to the new site. So, this site is now in maintaince mode and will eventually be taken down.

To get a taste of the new site, here are a selection of links from the site:

Services

Blog Posts

CalCom Articles: June to July 2025

2025-07-20T00:00:00+00:00

Following are articles for my current position at CalCom.

Credited

Uncredited

PCI-DSS Requirement 2.2: Server Hardening Standards Guide (2025-06-22)

Accelerated Angular Part 9: Managing Tasks

2025-02-06T00:00:00+00:00

In Part Eight, we introduced you to Angular Services, RXJS, and CORS. We used this information to integrate our app with the Task Management API. Now, we can authenticate users and retrieve tasks directly from the API. In this installment, we will complete the API integration by adding task management functionality.

The sample code for this installment is available on GitHub.

Display Profile and Task Data

Let’s start by creating a new component for displaying JSON data, such as a user profile or a task. Our Modal component will display this sub-component.

In your IDE’s integrated terminal, open the project folder and type:

ng generate component components/details-table

Open src/app/components/details-table/details-table.component.ts. At the top of the file, add the following references.

import { Component, OnInit, Input } from '@angular/core';  
import { CommonModule } from '@angular/common';

Update the @components directive’s import section to include the CommonModule.

@Component({  
 selector: 'app-details-table',  
 standalone: true,  
 imports: [ CommonModule],  
})

At the top of the file, declare an Input variable to receive data from a component.

@Input() row:any=null

Add a method called getRowValues. This function will be called from details-table.component.html. The function receives an object called row. In the function, declare an array called data to hold and return the processed data. Then, declare a variable called objectArray that is the result of an Object.entries() method. This converts the rows into an iteratable object.

getRowValues(row:any){  
   let data:any = []  
   const objectArray = Object.entries(row);  
   objectArray.forEach(([key, value]) => {  
    data.push({key:key, value:JSON.stringify(value)})  
   });  
   return data  
}

Using a forEach method, we can loop through objectArray as an array (list) of key-value pairs. The key is the name of the object, and value is the value of the object, for example:

{ "email": "jonnygold@gmail.com" }  

This value is converted to a string and appended to an array.

Open src/app/components/details-table/details-table.component.ts. Remove the boilerplate code with this table.

<table class="table">  
 <tbody >  
  <tr *ngFor="let val of getRowValues(row);let i = index">  
   <th style="vertical-align: top;">  
     <span></span>  
   </th>  
   <td></td>    
  </tr>  
 </tbody>  
</table>

The table calls getRowValues and passes the row object input object. It displays the key in the left column and its corresponding value in the right column.

Managing Tasks

Our next task is to modify the Modal component to manage tasks. In addition to the Task Add and Details table, the Modal will support task editing. This includes the ability to change a tasks status.

First, we add references to DetailsTableComponent.

import { DetailsTableComponent } from '../details-table/details-table.component';

@Component({  
 selector: 'app-modal',  
 standalone: true,  
 imports: [ CommonModule, ReactiveFormsModule,DetailsTableComponent],  
 templateUrl: './modal.component.html',  
 styleUrl: './modal.component.scss'  
})

Update the ModalComponent class’s input and output variables.

export class ModalComponent {  
 @Input() tableData: any;  
 @Input() title:string = "Add Task";  
 @Input() item:any = null;  
 @Input() size: string = 'sm';  
 @Output() taskEvent = new EventEmitter<any>();

Add a user variable to retrieve the stored user profile. Then, add the taskStatus list.

 user:any = JSON.parse(sessionStorage.getItem('user') || '{}');  
 taskStatus:string[] = ["do","doing","done"];  
 Update the taskForm object to include task status.

taskForm = new FormGroup({  
   user: new FormControl(this.user.userName),  
   name: new FormControl('New Task'),  
   description: new FormControl('My new task description'),  
   status: new FormControl('do'),  
 });

Modify the openModal class method to support task editing. The function checks if the taskForm’s title is set to ‘Edit Task’ and populates the taskForm accordingly.

openModal(content:any, title:string) {  
   if(this.title === "Edit Task"){  
     this.taskForm.patchValue({  
       name: this.item.name,  
       description: this.item.description,  
       status: this.item.status,  
     });  
   }  
    this.modalService.open(content, { size: this.size, scrollable: true })  
 }

Now, update onSubmit to support adding and editing tasks. Depending on the option, the sendTask method is called and passed an object that includes the path of the API endpoint and a payload (data) to be sent.

 onSubmit(){  
   if (this.title==='Add Task'){  
     this.sendTask({  
       path:'/api/tasks/add',  
       data:{  
         ...this.taskForm.value,  
         added: new Date().toISOString(),  
         updated: new Date().toISOString(),  
         taskId: this.tableData.length + 1,  
         isActive: true,  
          
       }  
     })  
   }  
   else if (this.title==='Edit Task'){  
     this.sendTask({  
       path:/api/tasks/update/${this.item.taskId},  
       data:{  
         ...this.taskForm.value,  
         updated: new Date().toISOString(),  
         isActive: true,  
       }  
     })  
   }  
 }

Add the sendTask function to pass the task data back to the Tasks component. The data is passed using the taskEvent object’s emit method.

sendTask(payload:any){  
   this.taskEvent.emit(payload)  
   this.modalService.dismissAll()  
}

After updating the code file, we update the component’s html. Open src/app/components/details-table/details-table.component.ts. In the modal-body add two HTML divs that check if title is set to ‘Details’

<div class="modal-body">  
  <div *ngIf="title==='Details'"></div>  
  <div *ngIf="title!=='Details'"></div>  
</div>

In the top div, add a reference to the details-table component. Assign the row input variable the item passed to the Modal.

<div *ngIf="title==='Details'">  
 <app-details-table [row]="item"></app-details-table>  
</div>

In the second div, insert the task form. At the bottom of the form, add a select component that displays a list of task statuses. This list is only displayed when editing a task.

<div *ngIf="title!=='Details'">  
 <form class="form" [formGroup]="taskForm" (ngSubmit)="onSubmit()">  
   …  
   <div class="mb-3" *ngIf="title === 'Edit Task'">  
    <label>Status</label>  
     <select class="form-select" formControlName="status">  
      <option *ngFor="let item of taskStatus" [value]="item"></option>  
      </select>  
     </div>  
   …  
 </form>  
</div>

After the Modal, template, update the button section with the following code:

<div class="d-grid gap-2 d-md-flex justify-content-md-center">  
 <button *ngIf="title!=='Details'"class="btn btn-primary rounded-pill"  
  (click)="openModal(content, title)"  
 >  
   
 </button>  
 <button *ngIf="title==='Details'" class="btn btn-secondary rounded-pill"  
  (click)="openModal(content, title)"  
 >  
   
 </button>  
</div>

Updating the Tasks Component

After modifying the subcomponents, we can update the Task component’s table to support the new task management functionality.

Open src/app/tasks/tasks.component.ts.

Move this line of code from ngOnInit to the constructor.

constructor(  
   public httpService:HttpService  
 ) {  
   this.user = JSON.parse(sessionStorage.getItem('user') || '{}');  
}

Create a new function called getTasks and move the code that requests tasks to it from ngOnInit.

getTasks(){  
 this.httpService.getServiceData(/api/tasks/user/${this.user.userName})  
  .subscribe((data: any) => {  
     this.tableData = data  
 });  
}

Now, we update the list of tasks when the page loads, and when we add, edit, or delete tasks.

In ngOnInit, add a call to getTasks.

ngOnInit(): void {  
  this.getTasks()  
}

Next, add a function that deletes tasks. This sends a path and a payload to a function that handles HTTP post requests to the API.

 deleteTask(item:any){  
   this.manageTask({  
     path:/api/tasks/delete,  
     data:{  
       taskId:item.taskId  
     }  
   })  
 }

Now, add the manageTask function to send the payload using the the httpServices’s postServiceData method.

manageTask(task:any){  
 this.httpService.postServiceData(task.path, task.data).subscribe((data: any) => {  
     if(data !==null)this.getTasks()  
 });  
}

Open src/app/tasks/tasks.component.ts. In the table header, add the following row:

<th colspan="3">Actions</th>

The row has a colspan (width) of three columns. This matches the three buttons we will add to each row of the table body with this code.

<tbody>  
 <tr *ngFor="let item of tableData">  
  <td *ngFor="let col of tableCols"></td>  
  <td>  
   <app-modal [title]="'Details'" [item]="item" [size]="'lg'"></app-modal>  
  </td>  
  <td>  
   <app-modal   
    [title]="'Edit Task'"   
    [item]="item"  
    (taskEvent)="manageTask($event)"  
   >  
   </app-modal>  
  </td>  
  <td>  
   <button   
    class="btn btn-danger rounded-pill"   
   (click)="deleteTask(item)"   
   >  
   Delete  
   </button>  
  </td>  
 </tr>  
</tbody>

Modifying the Profile Component

Our final change is to update the Profile component to use display a Modal with the Details table. Open src/app/components/profile/profile.component.ts. Add a reference to ModalComponent an update the @Component directive.

import { ModalComponent } from '../modal/modal.component';  
@Component({  
 selector: 'app-profile',  
 standalone: true,  
 imports: [ CommonModule, NgbAlertModule, ModalComponent ],  
 templateUrl: './profile.component.html',  
 styleUrl: './profile.component.scss'  
})

Open src/app/components/profile/profile.component.html. Replace the existing code with:


<ngb-alert [dismissible]="false" [type]="'primary'">  
 <strong>Welcome:</strong>   
 <span class="float-end" style="margin-top: -9px;">  
   <app-modal [title]="'Details'" [item]="user" [size]="'lg'"></app-modal>  
 </span>  
</ngb-alert>

Refresh your browser and the following is displayed.

Conclusion and What’s Next

In this installment, we completed our application by adding task management features. If you enjoyed this series, check out my previous series on NodeJS or React. Both are available from my website at https://jonnygold.net.`

Accelerated Angular Part 8: Integrating APIs

2025-02-04T00:00:00+00:00

In Part Seven, we introduced you to the @Input and @Output directives. Then, we described how to use them to pass data to and from components. We also showed you how to use the Bootstrap Alert and Module modules to display data.

Currently, our Angular app performs a very simple authentication and displays a list of tasks. The data for these actions is stored in two Javascript files. This is great for demonstration purposes but has a number of limitations, such as we are working with limited data sets, and we can’t permanently add, modify, or delete data. In this installment, we will start to change this by integrating our code with a Rest API. Specifically, we will update the Login and Tasks components to interact with a Task Management API. The sample code for this installment is available on GitHub.

Key Concept

In this section, we explain Angular Services, handling asynchronous events, and Cross-Origin Resource Requests.

Services

An Angular service is a reusable component that enables you to share code or data across your application. Each service is a component class that provides public methods (functions) that you can access within other components. Services implement the singleton design pattern. This means that there is only one instance of each service at any time. All components can access this instance. A common use of services is to provide shared access to Angular’s HTTP client. Angular’s HTTP client allows access to servers and APIs.

Reactive Javascript Extensions (RxJS)

Javescript-based frameworks, such as Angular, support asynchronous operations. A typical example of an asynchronous operation is sending a request to a remote server. After you send the request, the application has to wait until it receives the response. If the request were handled synchronously, then your application would have to wait for the response before proceeding. Handling requests asynchronously means that your application can continue to function during this waiting period.

Angular uses the Reactive Javascript Extensions (RxJS) library to manage asynchronous operations with observables. An observable is a stream of data received at a later time. You can create an observable from nearly anything, but the most common use case in RxJS is from events. For example, to return read-only data from a server, we create a service. The service includes an observable method called getServiceData that sends HTTP requests.

public getServiceData(url: any): Observable<any> {  
   return this.http.get<any>(url);  
}  

The getServiceData method is available to any component that consumes its parent service. The component can access the getServiceData observable via an RxJS subscription. For example, to receive a list of tasks, we subscribe to getServiceData by sending the path of the relevant API endpoint. After sending the path, it waits to receive response data. The subscription is updated when the response to the request is received.

this.httpService.getServiceData(this.path).subscribe((data: any) => {  
     this.tableData = data  
});

Cross-Origin Resource Requests

Cross-Origin Resource Requests (CORS) is a web standard that protects request-related security issues. CORS prevents web pages from making requests from a domain (address) other than the one from which the page was served. CORS can cause problems when developing a web application and could prevent you from accessing and displaying data. We will address one solution later in this article.

Task Management API

The API we will work with was created for my tutorial series Node JS Express for FrontEnd developers. The API lets read, modify, and delete task data stored in a MongoDB database. The complete API code is described in Part Eight: Documenting the API with Swagger. This installment also provides a Swagger page that documents the API. You can read the series and download the sample code from the series GitHub repo.

Configuring the HTTP Client

Angular’s HTTP client allows access to servers and APIs. Before we can use the HTTP client, we must configure our application. We start by updating our app.config.ts file to reference the HTTP client provider. Open src/app/app.config.ts and add the following reference to provideHttpClient:

import { provideHttpClient } from '@angular/common/http';

Add provideHttpClient to the list of providers.

export const appConfig: ApplicationConfig = {  
  providers: [  
   provideZoneChangeDetection({ eventCoalescing: true }),  
   provideRouter(routes)],  
   provideHttpClient(),
};

Handling CORS

In theory, we could now proceed and update our Tasks component to receive data from the Task Management API directly. Unfortunately, Angular’s CORS protection will prevent us from accessing the API and return an error. So, before we can interact with the API, we must create an Angular proxy. An Angular proxy is a configuration file that allows you to define a set of rules to forward requests from your Angular application to a local and/or remote server. In the src/app folder, create a file called proxy.conf.json.

Open the file and add the following:

{  
 "/api": {  
   "target": "http://127.0.0.1:3000",  
   "secure": false  
 }  
}

From now on, whenever we want to access a Task Management API endpoint, we will substitute the base API URL is replaced by ‘/api’.

Next, we must update our application’s angular.json file to instruct our app to access the API via the Angular proxy. Open angular.json, locate the serve section, and make the following changes.

"serve": {  
 "builder": "@angular-devkit/build-angular:dev-server",  
 "options": {
   "proxyConfig": "src/proxy.conf.json"
  },  
 …  
}

Creating a Service

Now, let’s create our service. In your IDE’s integrated terminal, type:

ng generate service services/http-service/http-service

This creates the following files:

Open src/app/services/http-service/http-service.service.ts. At the top of the file, add the following references.

import { Injectable } from '@angular/core';  
import { HttpClient, HttpHeaders } from '@angular/common/http';  
import { Observable } from 'rxjs';

In the HttpService class, create an httpOptions object. This provides the metadata required to send requests to the Task Management API.

httpOptions = {  
   headers: new HttpHeaders({  
     'Content-Type': 'application/json',  
     'Access-Control-Allow-Origin': '*'  
   }),  
 };

In the class constructor, create a variable that references the HTTP client.

private http: HttpClient,

Now, add two public methods to send HTTP GET and POST requests as observables.

public getServiceData(url: any): Observable<any> {  
   return this.http.get<any>(url);  
}

public postServiceData(url: string, payload:any): Observable<any> {  
   return this.http.post<any>(url, payload, this.httpOptions);  
}

Referencing the HTTPService

Angular services are available to all our application’s components. Let’s start by updating the Login page. Open, src/app/login/login.component.ts. At the top of the file, add a reference to the HTTPService.

import { HttpService } from '../services/http-service/http-service.service';

In the @Component directive, add a list of providers that includes the HttpService.

@Component({  
 selector: 'app-login',  
 standalone: true,  
 imports: [  
   ReactiveFormsModule,  
 ],  
 providers: [  
   HttpService  
 ],  
 templateUrl: './login.component.html',  
 styleUrl: './login.component.scss'  
})

In the class constructor, create a variable that references the HTTPService.

 constructor(  
   private router: Router,  
   public httpService: HttpService  
 ) { }

Now open, src/app/tasks/tasks.component.ts and repeat these steps.

Authenticating Users

Now we have all the pieces in place, let’s start by using the API to authenticate users. In the onSubmit method, remove the current content.

onSubmit(){}

Add a subscription using httpServices’s postServiceData method. The method accepts two parameters. The first is the path of the API endpoint. The path must conform to the format specified in our proxy.conf.json file. The second parameter is a JSON object with the user’s credentials. We extract this object from the login form.

onSubmit(){  
 this.httpService.postServiceData('/api/users/login', this.loginForm.value).subscribe();  
}

In the subscribe method, we add code that receives the data. After checking that the data received from the observer is valid, the user’s profile is stored as a session variable. Finally, we call the router’s navigate method and provide the required path.

this.httpService.postServiceData('/api/users/login', this.loginForm.value).subscribe((data: any) => {  
     if(data !==null){  
       this.user = data  
       sessionStorage.setItem('user', JSON.stringify(this.user));  
       this.router.navigate(['/tasks']);  
     }  
 });  
}

Retrieving and Displaying Tasks

Let’s now update the Tasks page’s task list to display the tasks assigned to the current user retrieved via the API. Open, src/app/tasks/tasks.component.ts. In ngOnInit, add a subscription using the httpServices’ getServiceData method. The task calls an API endpoint that retrieves a user’s assigned tasks.

ngOnInit(): void {  
 this.user = JSON.parse(sessionStorage.getItem('user') || '{}');  
 this.httpService.getServiceData(/api/tasks/user/${this.user.userName})  
  .subscribe((data: any) => {  
     this.tableData = data  
   });  
}

Conclusion and What’s Next

In this installment, we introduced you to Angular Services, RXJS, and CORS. We used this information to integrate our app with the Task Management API. Now, we can authenticate users and retrieve tasks directly from the API. In the next and final installment, we will complete the API integration by adding task management functionality.

Accelerated Angular Part 7: Passing Data Between Components

2025-01-30T00:00:00+00:00

In Part Six, we created two new reusable page components and added them to our tasks page. In this installment, we will make two more components and show you how to pass data from a component. We will also show you how to return data from a component.

The sample code for this installment is available on GitHub.

Key Concept

In this section, we explain the @Input and how you can use it to pass data to a child component. We also introduce the @Output directive and how you can use it to pass data back to the parent component.

@Input Directive

In Part Six, we illustrated how we could create components to share standard functionality. We explained how we could extract the table from our Tasks component and create a Table subcomponent. This means that when we create a new page that includes a table, we don’t need to make the table from scratch. Then, we created two components that used hard-coded data. This works for our NavigationBar and Footer components. However, it won’t work for our Table component.

In this installment, we will fix this by creating components that use the @Input directive. First, you create a variable in your child component. The variable is declared by adding an @Input decorator before the variable name.

@Input() user:any = null;

In the parent component, you add the variable name and the data you want to add to the referenced component. In this case, we pass a list of tasks to the table. If we now create a Users page, we can reuse the same component and pass a list of users.

<app-table [data]= "tasks"></app-table>

@Output Directive

Not only can you pass data to a child component, but you can also pass data back to its parent. For example, the table component lets the user modify the list of tasks. However, the component lacks the functionality to save the modified data to a backend database. We pass the data back to the parent component using an @Output directive. Like the @Input directive, the first step is to declare a variable prefixed with an @Output decorator. The variable creates a new EventEmitter.

@Output() addTaskEvent = new EventEmitter<any>();

When the event is called, an event is triggered. This event emits an object.

this.addTaskEvent.emit(data)

The parent component listens for the event, which will be processed by a method (function) in the parent component. The $event parameter captures the event and passes the object for processing by the function.

<app-table (addTaskEvent)="addTask($event)"</app-table>

Passing Data to a Component

To understand how to pass data with an @Input directive, we will create a Profile component. The component displays a banner with a welcome message. It also includes a button that displays the profile of the current user. We will use NG Bootstrap’s Alert component to create the banner.

In your IDE’s integrated terminal, open the project folder and type:

ng generate component components/profile

Open src/app/components/profile/profile.component.ts. Add a reference to NG Bootstrap’s NgbAlertModule.

import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';

Update the @components directive’s import section to include the NgbAlertModule.

@Component({  
 selector: 'app-profile',  
 standalone: true,  
 imports: [ CommonModule, NgbAlertModule ],  
})

Now, let’s use the Input directive to pass user data to the component. At the top of the page, add a reference to the Angular’s Input directive.

import { Component, Input } from '@angular/core';

In the ProfileComponent class, add an Input variable that receives user data. In the class, add the showProfile method. This method will be called when the user presses a button. The method displays an Alert with the user profile.

export class ProfileComponent {  
 @Input() user:any = null;  
}

In the class, add the showProfile method. This method will be called when the user presses a button.

export class ProfileComponent {  
 @Input() user:any = null;  
   
 showProfile(){   
  alert(JSON.stringify(this.user))  
 }  
}

The method displays an Alert with the user profile.

Open src/app/components/profile/profile.component.html. Replace the current code with the following:

<ngb-alert [dismissible]="false" [type]="'primary'">  
 <strong>Welcome:</strong>   
  <button   
    class="btn btn-primary btn-sm rounded-pill float-end"     
   (click)="showProfile()">Show Profile  
  </button>  
</ngb-alert>

Return Data to a Parent Component

To demonstrate how to pass data back to a parent component. We will create a component that provides a button to add a new task.

Clicking the button opens a modal with a basic form.

When you click the submit, the new task will emit an addTaskEvent. When the Tasks component catches the event, it adds the new task to the tasks list.

In your IDE’s integrated terminal, open the project folder and type:

ng generate component components/modal

Open src/app/components/modal/modal.component.ts. At the top of the file, add the following references.

import { Component, Output, EventEmitter } from '@angular/core';  
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';  
import { CommonModule } from '@angular/common';  
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

Update the @components directive’s import section to include the ReactiveFormsModule.

@Component({  
 selector: 'app-modal,  
 standalone: true,  
 imports: [ CommonModule, ReactiveFormsModule],  
})

At the top of the file, declare the following variables.

 @Output() addTaskEvent = new EventEmitter<any>();  
 title:string = "Add Task";  
 user:any = JSON.parse(sessionStorage.getItem('user') || '{}');

After these variables, we create a form group to capture task data.

taskForm = new FormGroup({  
   user: new FormControl(this.user.userName),  
   name: new FormControl('New Task'),  
   description: new FormControl('My new task description'),  
   status: new FormControl('do'),  
});

In the ModalCompent’s class’s constructor, declare a modalService attribute that references NG Bootstrap’s Modal service. This will enable us to build the Add Task modal.

 constructor(  
   private modalService: NgbModal,  
 ) { }

Let’s now add an openModal method that opens the modal.

openModal(content:any, title:string, item:any = null) {  
   this.title = title;  
   this.modalService.open(content, { size: 'sm', scrollable: true })  
}

Finally, we will add an onSubmit method. This captures the form data, triggers the addTaskEvent, and closes the modal.

onSubmit(){  
   this.addTaskEvent.emit(this.taskForm.value)  
   this.modalService.dismissAll()  
 }

Now, let’s update the HTML template. First, we will add a modal template. This includes #content tag that will be used to display the modal popup.

<ng-template #content let-modal>  
<div class="modal-header">  
  <h4 class="modal-title text-center" id="modal-basic-title"></h4>  
  <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>  
</div>  
<div class="modal-body">  
</div>  
</ng-template>

In the modal body, add the taskForm.

<form class="form"[formGroup]="taskForm"(ngSubmit)="onSubmit()">  
 <div class="mb-3">  
  <label>Name</label>  
  <input  
   type="text"  
   class="form-control"   
   id="taskName"   
   placeholder="Enter Task Name"   
   formControlName="name">  
  </div>  
  <div class="mb-3">  
   <label>Description</label>  
    <input   
     type="text"   
     class="form-control"   
     id="taskDescription"   
     placeholder="Enter Task Description"  
     formControlName="description">  
  </div>  
  <div class="text-center d-grid">  
    <button type="submit" class="btn btn-primary rounded-pill ">Submit</button>  
  </div>  
</form>

At the bottom of the page, add a button to open the modal.

<div class="d-grid gap-2 d-md-flex justify-content-md-center">  
 <button   
  class="btn btn-primary rounded-pill"   
  (click)="openModal(content, 'Add Task')"  
  >  
  Add Task  
 </button>  
</div>

Referencing Page Components

In order to include our new page components, we need to reference them from the Tasks page.

Open src/app/tasks/tasks.component.ts.

At the top of the page, import the Navbar and Footer components.

import { ProfileComponent } from '../components/profile/profile.component';  
import { ModalComponent } from '../components/modal/modal.component';

In the @Component directive’s imports list, add ProfileComponent and ModalComponent.

@Component({  
 selector: 'app-tasks',  
 standalone: true,  
 imports: [ CommonModule, NavbarComponent, FooterComponent, ProfileComponent,  
   ModalComponent  
 ],  
 templateUrl: './tasks.component.html',  
 styleUrl: './tasks.component.scss'  
})

Now, we add an addTasks function that adds the task to the tasks list.

addTask(task:any){  
   this.tableData = [  
     ...this.tableData,  
     {  
       ...task,  
       added: new Date().toISOString(),  
       updated: new Date().toISOString(),  
       taskId: this.tableData.length + 1,  
       isActive: true,  
     }  
   ]  
 }

All we need to do now is update the template (HTML) page.

Open src/app/tasks/tasks.component.html. Insert the Profile component before the table. Add a table footer section to the table, to hold the Modal component.

<app-navbar></app-navbar>  
<div class="container mt-5" >  
 <app-profile [user]="user"></app-profile>  
 <table class="table table-striped w-100">  
   ...  
   <tfoot>  
     <tr>  
       <td colspan="6">  
         <app-modal (addTaskEvent)="addTask($event)"></app-modal>  
       </td>  
   </tfoot>  
 </table>  
</div>  
<app-footer></app-footer>

Refresh the page, to display the new components.

Conclusion and What’s Next

In this installment, we introduced you to the @Input and @Output directives. Then, we described how to use them to pass data to and from components. We also showed you how to use the Bootstrap Alert and Module modules to display data. In the next and final installment in this series, we will show you how to send and receive data from an API using Angular services.

Accelerated Angular Part 6: Creating Reusable Components

2025-01-30T00:00:00+00:00

In Part Five, we showed you the basics of Cascading Style Sheets (CSS) and how to use them to change how our app looks. We then introduced Bootstrap and how we can use it to improve the appearance of our simple HTML pages. In this installment, we will build on this foundation to add a page header that displays the name App and will let us return to the Login page. At the bottom of the page, we will provide a footer that displays copyright and version information.

The sample code for this installment is available on GitHub.

Key Concept

In this section, we explain component metadata. You use this metadata to reference components.

Component Metadata

Angular components provide information called metadata. This metadata is provided by the @Component decorator. This is located at the top of the component’s typescript file. Here is the @Component decorator for the Tasks component (tasks.component.ts).

@Component({  
 selector: 'app-tasks',  
 standalone: true,  
 imports: [ CommonModule,RouterLink ],  
 templateUrl: './tasks.component.html',  
 styleUrl: './tasks.component.scss'  
})

The component metadata includes the following elements:

Selector: The name of the component. The selector can be used as a reference to the component
Standalone: Indicates that the component can be imported into other components.
Imports: The packages, libraries, and components referenced by the component.
URLs: Location of related files, such as the component template HTML file and CSS style sheet.

Referencing Subcomponents

Subcomponents provide a way to share standard functionality using generic components. For example, we could extract the table from our Tasks component and create a Table subcomponent. This means that when we create a new page that includes a table, we don’t need to make the table from scratch. In fact, we can include multiple table instances in a single page. We reference the tab by creating HTML tags with the component’s selectors.

<app-table ></app-table>

Let’s start by creating a Navigation bar. This provides a page header that displays the name of the app. It also provides a Logout button. Clicking the button returns the user to the Login page.

In your IDE’s integrated terminal, open the project folder and type:

ng generate component components/navbar

The following files are created.

Open src/app/components/navbar/navbar.component.ts. Replace the current code with the following:

import { Component } from '@angular/core';  
import { CommonModule } from '@angular/common';

@Component({  
 selector: 'app-navbar',  
 standalone: true,  
 imports: [ CommonModule ],  
 templateUrl: './navbar.component.html',  
 styleUrl: './navbar.component.scss'  
})  
export class NavbarComponent {  
 constructor() { }  
}

At the bottom of the page, we will create a footer that displays copyright and version information. ![][image4]

In your IDE’s integrated terminal, open the project folder and type:

ng generate component components/footer

The command generates the following files:

Open src/app/components/footer/footer.component.ts. Replace the current code with the following:

import { Component } from '@angular/core';  
import { GlobalVariables } from '../../data/global-variables';  
import { DatePipe } from '@angular/common';

@Component({  
 selector: 'app-footer',  
 standalone: true,  
 imports: [ DatePipe ],  
 templateUrl: './footer.component.html',  
 styleUrl: './footer.component.scss'  
})

export class FooterComponent {  
 currentYear!: number;  
 appVersion:string = GlobalVariables.appVersion;  
 constructor() {  
   this.currentYear = Date.now();  
 }  
}

In order to display current copyright information, the component includes a variable called currentYear. This information will displayed in the template page using the Angular DatePipe directive. It also references an external file that includes the current application version.

Next, we will update the Footer page’s HTML template. Open src/app/components/footer/footer.component.ts. Replace the current code with the following:

<div class="container">  
 <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top fixed-bottom p-5">  
  <p class="col-md-4 mb-0 text-muted">  
   &copy;  2024 -  MVDS</p>  
  <a href="/"   
   class="col-md-4 d-flex align-items-center justify-content-center   
          mb-3 mb-md-0 me-md-auto link-dark text-decoration-none"  
    >  
    <svg class="bi me-2" width="40" height="32">  
    <use xlink:href="#bootstrap"/></svg>  
  </a>  
  <ul class="nav col-md-4 justify-content-end">  
    <li class="nav-item">  
      <a href="#" class="nav-link px-2 text-muted">  
       Task App: Version    </a>  
    </li>  
  </ul>  
 </footer>  
</div>

Referencing Page Component

In order to include our new page components, we need to reference them from the Tasks page.

Open src/app/tasks/tasks.component.ts.

At the top of the page, import the Navbar and Footer components.

import { NavbarComponent } from '../components/navbar/navbar.component';  
import { FooterComponent } from '../components/footer/footer.component';

In the @Component directive’s imports list, add NavbarComponent and FooterComponent.

@Component({  
 selector: 'app-tasks',  
 standalone: true,  
 imports: [ CommonModule, NavbarComponent, FooterComponent ],  
 templateUrl: './tasks.component.html',  
 styleUrl: './tasks.component.scss'  
})

All we need to do now is update the template (HTML) page.

Open src/app/tasks/tasks.component.html.

At the top of the page, add a reference to the Navbar component.

<app-navbar></app-navbar>

At the bottom of the page, add a reference to the Footer component.

<app-footer></app-footer>

Refresh the page and the new components are displayed.

Conclusion and What’s Next

In this installment, we introduced the concepts of Angular metadata. We illustrated how metadata is used to reference components. Then we created to two new reusable page components and added them to our tasks page. In the next installment, we will create two more components and show you how to pass data from a component. We will also show you how to return data from a component.

Accelerated Angular Part 5: Styling with Bootstrap

2025-01-13T00:00:00+00:00

In Part 4, we introduced Angular Components and Directives. We then showed you how to implement them by extending the Tasks component to display a table with all the tasks assigned to the authenticated user. At this point, our code is functional, but our pages could be prettier. Let’s face it: most developers, myself included, are not web designers, so we need some help from that department. The good news is that we don’t have to be, and there are a number of available solutions. In this installment, we dive into one of those solutions and investigate how we can use Bootstrap to make our app look and feel more professional. The sample code for this installment is available on GitHub.

Key Concepts

In this section, we provide background and context on CSS and Bootstrap.

CSS

Cascading Style Sheets (CSS) is a language for managing the appearance of web pages. It allows you to separate the presentation of those pages from its underlying (HTML) content. CSS defines selectors that map to individual HTML elements. For each element, you can set properties (attributes) and the values to set for the properties. In the following example, we put the color and weight of a top-level heading (H1) element.

h1 {
    color:red;
    font-weight: bold;
}

In addition to mapping to HTML elements, you can create class selectors that apply to a group of elements. You can also target specific elements by creating ID selectors.

Bootstrap

Bootstrap is a popular, flexible, and easy-to-use CSS framework. It was created by Twitter and made available as an open-source project. Bootstrap was designed to operate with Javascript, and specific versions are available for popular frameworks, such as React, Angular, and Vue.js. We will be using NG Bootstrap.

Installing Bootstrap

You can install NG Bootstrap with the Angular CLI ng add command. In your IDE’s integrated terminal, open the project folder and type:

ng add @ng-bootstrap/ng-bootstrap

If this doesn’t work, follow the detailed instructions on the NG Bootstrap website’s Getting Started page. Now, all you need to do is update src/styles.scss. If you are using Angular 19, add the following to the top of the file

@use "bootstrap/scss/bootstrap";

If you are using an earlier Angular version, replace @use with @import:

Before we installed Bootstrap, our login page looked like this:

After installing and referencing Bootstrap, it looks like this:

It looks similar to the original version, with minor changes to some elements. Now, let’s comment out the original styles in src/styles.scss. After refreshing the page, it looks like this:

The box that surrounded the form disappeared, and the form was shoved to the left edge of the page. Now, let’s replace our existing Login page with an improved Bootstrap version. Open src/app/login/login.component.html and replace the current contents of the file with the following:

<div class="container d-lg-flex">
 <div class="mx-auto p-2" style="margin-top: 100px;width:40%"></div>
</div>

This adds a flexible container element that can expand and contract in relation to the browser window. Inside the container, we added a div element that will position the form elements on the page. Next, let’s add a card component to hold our login form.

<div class="container d-lg-flex">
 <div class="mx-auto p-2" style="margin-top: 100px;width:40%">
  <div class="card">
    <div class="card-header bg-primary">
       <h4 class="text-light text-center">Task App</h4>
     </div>
     <div class="card-body"></div>
     <div class="card-footer bg-primary text-light text-center">Please login to continue</div>
   </div>
 </div>
</div>

The Card’s header includes a header and footer. The header displays the Application name, and the footer provides instructions.

In the card’s body section, let’s add our form with the appropriate Bootstrap CSS classes.

<div class="card-body">
 <form [formGroup]="loginForm" class="form" (ngSubmit)="onSubmit()">
  <div class="mb-3">
   <label class="form-label">Email</label>
   <input class="form-control" formControlName="email">
  </div>
  <div class="mb-3">
   <label class="form-label">Password</label>
   <input class="form-control" formControlName="password" type="password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
 </form>
</div>

When we refresh the page, it looks much improved.

Updating the Tasks Page

Before we applied Bootstrap, the Tasks page looked like this:

Using our updated Login page, let’s log in and view our user’s assigned tasks. The Tasks page now looks like this:

This is a slight improvement, but it’s still not taking full advantage of Bootstrap.

Open src/app/tasks/tasks.component.html. Modify the opening table tag by adding the following Bootstrap CSS classes.

<table class="table table-striped>

Now the table looks like this.

Conclusion and What’s Next

In this installment, showed you the basics of Cascading Style Sheets (CSS) and how to use them to change how our app looks. We then introduced Bootstrap and how we can use it to improve the appearance of our simple HTML pages. In the next installment, we will continue to use Bootstrap as we explain how to create and style reusable Angular components.

Accelerated Angular Part 4: Components and Presenting Data

2024-12-29T00:00:00+00:00

In Part 3, we added a form to the Login page. The form enabled a user to type their email address and password. In this installment, we will add a table to the page and display a list of tasks assigned to the user.

Key Concept

In this section, we explain components, directives, and data-binding.

Components

Components are the fundamental building blocks of an Angular application. Each web page in an Angular web app is a component. Each component can contain multiple sub-components. For example, a page may have a header, tables, forms, etc. In an Angular component, there is a clear separation between the presentational elements, component model, and code. Presentation elements use HTML and Angular directives, and the component model and computation use Typescript. This will become more apparent when we update tasks.component.html.

Directives

Directives are classes that add additional behavior to elements in your Angular applications. There are three types:

Components: Directives with templates.
Structural Directives: Alter the DOM layout by adding or removing elements (*ngIf, *ngFor, *ngSwitch).
Attribute Directives: Change the appearance or behavior of an element ([ngStyle], [ngClass]).

Building the Tasks Page

Let’s start by opening src/app/tasks.component.ts. In the first reference, add a reference to OnInit. This is an Angular lifecycle method that is used to initialize components, such as fetching data.

import { Component, OnInit } from '@angular/core';

After the first reference, add a reference to the CommonModule. This will enable us to use Angular’s pipe functionality to format data.

import { CommonModule } from '@angular/common';

Then, add a reference to the Tasks.ts data file. This file is the list of tasks assigned to the user. You can download the file from GitHub.

import { Tasks } from '../data/tasks';

Next, we update @Component’s imports list to include CommonModule.

@Component({
 selector: 'app-tasks',
 standalone: true,
 imports: [CommonModule,RouterLink],
 templateUrl: './tasks.component.html',
 styleUrl: './tasks.component.scss'
})

Extending TasksComponent

After we have referenced the relevant components and files, we will extend the TasksComponent class so we can add a ngOnInit method. We extend the component class with the implements keyword, followed by OnInt.

export class TasksComponent implements OnInit {}

Declaring Task and User Data

Now let’s add the following variables. The tasks object is assigned the data from the imported Tasks list. Since we only want to display tasks created or assigned to the authenticated user, we will filter the tasks list by username and assign the data to the tableData object. The tableCols object is a list of the names of each table column. The user object holds the authenticated user profile.

export class TasksComponent implements OnInit {
 tasks:any = Tasks;
 tableData:any = null
 tableCols: any = ['name','description','added','updated','status'];
 user:any = null;
}

Initializing the Tasks Component

Following the variable declarations, we add a constructor method. While we are not currently using the constructor, we will need it in the future to consume Angular services. After the constructor, we add an empty ngOnInit method.

constructor() { }
ngOnInit(): void {}

We will use ngOnInit to retrieve the persisted user profile from the browser’s session storage. The profile is assigned to the user object.

ngOnInit(): void {
  this.user = JSON.parse(sessionStorage.getItem('user') || '{}');
}

Finally, we filter the tasks object to include only tasks assigned to the authenticated user. The filtered tasks list is assigned to the tableData object. This object will be displayed in a table in the .html page.

this.tableData = this.tasks.filter((task:any) =>
  task.user === this.user.userName
);

Presenting Tasks Data

Open tasks.component.ts, and replace the file’s content with the following

<div class="container" >
 <h1>Tasks</h1>
 <p><a routerLink="/login">Go to login</a></p>
</div>

Following the <h1>Tasks</h1>, add a table.

<h1>Tasks</h1>
<table></table>

In the table, add a table header with a single row. By embedding a *ngFor directive in a <th> tag, we iterate through the tableCols object using cols as iterator. Using double braces, each value in tableCols is displayed using interpolation. To convert the col from lower to title case, we apply the titlecase pipe. This was made possible by referencing the CommonModule.

<thead>
 <tr>
  <th *ngFor="let col of tableCols" scope="col"></th>
 </tr>
</thead>

After the table header, we add a table body with a single row and a single <td> tag. Here, we embed two *ngFor directive. The first directive iterates through the tasks list. The second iterates through the tableCols object and only displays each field in the object.

<tbody>
 <tr *ngFor="let item of tableData">
  <td *ngFor="let col of tableCols"></td>
 </tr>
 </tbody>

When you refresh the page in the browser, you should see a list of the user’s tasks displayed.

Conclusion and What’s Next

In this installment, introduced Angular Components and Directives. We then showed you how to implement them by extending the Tasks component to display a table with all the tasks assigned to the authenticated user. In the next installment, we will look at how to improve our app’s appearance with theming.

Accelerated Angular Part 3: Forms, User Interaction, and Presentation

2024-12-24T00:00:00+00:00

In Part 2, we introduced you to the theory and practice of routing in Angular. Next, we removed our apps boilerplate markup and added two-page components: Login and Tasks. Then, we used routing to add links to navigate from one page to the other. Now we have a foundation in place, we can build on it and add some basic functionality. In this article, we will add a form to the Login page.

The form enables a user to type an email and password. When the user presses the Submit button, the app checks the submitted credentials and authenticates the user. If the user’s credentials are valid, the application displays a message and navigates to the task page. For the sake of simplicity, user credentials are stored in plain text in a Javascript file. In addition, some styles from a CSS template have been applied to the Login and Tasks files.

Key Concepts

As part of its comprehensive approach to web application development, Angular supports user interaction with forms. To complicate matters, Angular has two different models for implementing forms: Template-driven and Reactive.

Template-Driven Forms

As the name suggests, template-driven forms let you create forms using templates that resemble generic HTML forms. Template-driven forms are good for creating

Reactive Forms

Reactive uses a combination of Typescript code and Angular Directives to build a form. Without going into details regarding the relative merits of each approach, Template-driven forms are regarded as simpler, and Reactive forms are considered the more complex option.

Despite their added complexity and steeper learning curve, Reactive forms offer a range of powerful and flexible features. This is why Reactive forms are the preferred option for Angular development. For this reason, we will use them to illustrate Angular form management.

Component Setup

Before adding a form to our Login component, we must reference Angular’s ReactiveFormsModule. Open src/app/login.component.ts and add the following.

import { ReactiveFormsModule} from "@angular/forms";

Next in @Component, update imports.

@Component({
 selector: 'app-login',
 standalone: true,
 imports: [ ReactiveFormsModule],
 templateUrl: './login.component.html',
 styleUrl: './login.component.scss'
})

Declaring and Initizialing the Form

In the Login Component class, add a FormGroup called loginForm. A FormGroup contains a group of FormControls and manages form data (state) and related events.

export class LoginComponent{
  loginForm = new FormGroup({});
}

In loginForm, add two FormControls called email and password. These controls will collect and manage the data the user types into form fields. In our scenario, the FormControls perform a similar role to the useState hook. By default, the controls are empty but can be pre-populated with data.

loginForm = new FormGroup({
  email: new FormControl(''),
  password: new FormControl(''),
});

Before we update the component template, let’s add an empty onSubmit method. This prevents the Angular compiler from throwing an exception when the method is referenced from our form.

export class LoginComponent{
 loginForm = new FormGroup({
   email: new FormControl(''),
   password: new FormControl(''),
 });
 onSubmit(){}
}

Add the Form Template

Open login.component.ts, delete the current content of the file and add the following. This div will contain the Login form.

<div class="card">
 <h1>Part 2: Login</h1>
</div>

After the header, add an HTML form.

<form [formGroup]="loginForm"></form>

To connect the form to the FormGroup, add a reference to loginForm.

<form [formGroup]="loginForm"></form>

Now, we add the controls to the form. For each control, we add a formControlName to reference each control’s respective FormControl in the FormGroup.

 <form [formGroup]="loginForm">
  <label for="email" >Email</label><br/>
  <input formControlName="email" id="email" required /><br/>
  <label for="password" >Password</label><br/>
  <input formControlName="password" type="password" /><br/>
</form>

The form should look like this:

Once the controls are in place, we need to add a button. This lets the user submit their credentials for authentication.

 <form [formGroup]="loginForm">
    …
   <button type="submit">Submit</button>
</form>

The final step is to ensure that when the user clicks the button, something happens. We do this by adding an ngSubmit directive that calls the LoginComponent’s onSubmit() method.

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()"></form>

Authenticating the User

At this point, when the user presses Submit, nothing happens. Now, we will add the required functionality to process the user’s credentials. Although we added a reference to User.ts, LoginComponent is unable to read it. This requires declaring a variable and assigning it the contents of the file.

export class LoginComponent{
 users:any = Users;
}

Once we have authenticated the user, we want to persist and reference their profile information. For this purpose, we declare a user variable.

users:any = Users;
user:any = null

To authenticate the user and preserve their profile, we filter the list of users using the supplied credentials. We match the relevant values in the profile against the value held by the form control. For example, we can extract the submitted email address from this.loginForm.value.email.

onSubmit(){
 this.user = this.users.filter((user:any) => 
   user.email === this.loginForm.value.email && 
   user.password === this.loginForm.value.password)[0];
  }
}

The results of the filter are assigned to this.user, by default this.user is null. If a valid user profile is assigned to this.user, a message is displayed and the user’s profile data is persisted to the browser’s session storage.

if(this.user !== null ){
 alert(`Email: ${this.user.email}\nPassword: ${this.user.password}`);
 console.log('User found\n\n', this.user);
 sessionStorage.setItem('user', JSON.stringify(this.user));
}

Displaying Tasks

After authenticating the user, we want to open the Tasks page. To do this, we will need to reference Angular’s Router component.

import { Router, RouterLink } from '@angular/router';

To use the Router, we need to add a constructor to LoginComponent and declare the Router service. After the loginForm declaration, add the following.

constructor( private router: Router) { }

Now, once the user is authenticated, we call the router’s navigate method and provide the required path.

if(this.user !== null ){
 …
 this.router.navigate(['/tasks']);
}

Conclusion and What’s Next

In this installment, we added a form to the Login page. The form enabled a user to type their email address and password. In the next installment, we will update the Tasks page to display a list of tasks in a table.

Accelerated Angular Part 2: Building and Linking Pages

2024-12-22T00:00:00+00:00

In Part 1, we briefly introduced Angular and got to work by installing the CLI. This allowed us to build and run a boilerplate project. In this installment, we build the foundations of our task management application. We will create two pages. The first is a placeholder Login page with a title and link to the application’s Tasks page.

We will also create a placeholder Home page with a link to the Login page.

The code for this app is available on GitHub. The samples in this tutorial were written in Angular 18.

Key Concepts

In this section, we examine a key concept in Angular called routing, and how Angular implements it.

Routing

In a web application, routing refers to how a user navigates from point A to point B. In most cases, the user lands on the home page and clicks on a link to the page they are interested in. Once the target page is displayed, they can return to the home via the browser’s back button or explore links to other pages displayed on any page or through navigation elements, such as a top bar or side menu.

Angular Router

Since the release of Angular 2.0, routing in Angular is handled by a built-in routing component. Once you achieve a basic understanding of Angular routing, you realize that routing is more than a navigation mechanism, it defines the structure of your application and provides a hierarchical map of how each part links together. In addition to letting you navigate from one page to another, Angular’s router has many powerful and useful features. These features include a mechanism that ensures only authorized users can access specific pages (AuthGuard), creating parameterized URLs, and managing page metadata.

Removing Boilerplate Code

Now, let’s open src/app/app.component.html, apart from the router-outlet tag, and remove all the boilerplate code from this file.

<router-outlet /\>

To ensure consistent presentation across application components we will update src/styles.scss. Open the file and add the following.

body { text-align: center;}

Creating Components

Our task application will have two components. The first is a Login page and the second is the Tasks page. We create components with the following command.

ng generate component login

The command generates the following components.

An Angular component is a TypeScript file that includes three things. The first of these is a set of references to framework modules and other application resources.

import { Component } from '@angular/core';

Following the references is an @Component directive. Angular directives come in many forms and they provide different types of functionality. The @Component directive defines component-specific metadata, such as the component’s selector (name) and the component modules it imports. It also includes references to the component template and template-specific styling. The component template can be the component’s HTML code and Angular directive, or it can be a link to a file. Likewise, component styling can be either style-sheet code or a link to a component stylesheet.

@Component({
 selector: 'app-login',
 standalone: true,
 imports: [],
 templateUrl: './login.component.html',
 styleUrl: './login.component.scss'
})

The final and largest part of the component is the component class. The class contains component variables and logic

export class LoginComponent {}

Run the command again to create the Tasks component.

ng generate component tasks

Adding Routes

Now we have created our components, we need to provide a way to find them and navigate between them. Angular’s navigation mechanism is called routing, and each route is a relative path (URL) within the application. We define each route in the app.routes.ts file. Open the file, and add references to the Login and Tasks components.

import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { TasksComponent } from './tasks/tasks.component';

In the Routes object, we will add a route for each component. Each path has two elements: path and component.

Path: indicates the relative path of the component within the application.
Component: indicates the component associated with the path.

export const routes: Routes = [
 { path: 'login', component: LoginComponent },
 { path: 'tasks', component: TasksComponent },
];

Let’s launch the app and see what happens. At the command line, type

ng serve

Click the local to open the app in a browser. The browser displays a blank page. In the browser’s address bar, type /login. You should see the following.

Refresh your browser, and you should be able to navigate from the Login page to the Tasks page and back.

To ensure that this page opens when we launch the app, we will add a default path.

export const routes: Routes = [
 { path: '', redirectTo: '/login', pathMatch: 'full' },
 { path: 'login', component: LoginComponent },
 { path: 'tasks', component: TasksComponent },
];

Now, when the application is launched, the Login page opens.

Navigating Between Pages

With our Login and Tasks pages in place, we add links to navigate from one page to another. Angular lets you navigate between components with the RouterLink directive.

FIrst, open login.component.ts and add the following reference.

import { RouterLink } from '@angular/router';

In @Component, add RouterLink to the imports array.

imports: [RouterLink],

Now open login.component.html and add the following.

<h1>Login</h1>
<p>Part 1: The Basics</p>
<p><a routerLink="/tasks">Tasks</a></p>

Do the same for the Tasks page, but change the page text accordingly.

Conclusion and What’s Next

In this installment, we introduced you to the theory and practice of routing in Angular. Next, we removed our apps boilerplate markup and added two page components: Login and Tasks. Then, we used routing to add links to navigate from one page to the other. In the next installment, we will discuss user interaction and forms

Accelerated Angular Part 1: Getting Started

2024-12-19T00:00:00+00:00

As I explain in my series Rapid React, React was designed to be a fast and responsive web application development platform. To this end, It is delivered as a compact library that gives you the features you need most and then gets out of your way. Despite its overwhelming popularity, sometimes you need an alternative approach, such as Angular. One of Angular’s greatest strengths is it is a comprehensive solution with a wide range of tools for building web applications. One of Angular’s great strengths is that it provides a structure and a philosophy for how to build apps.

This series is aimed to get you up and running, building your Angular-based web apps as rapidly as possible with a series of short and focused articles. In this installment, I will give you a brief introduction to Angular and how to create your first Angular project. The sample code for this installment is available on Github

Key Concepts

Each article in this series will start with a section that introduces key concepts. Since Angular is designed to build single-page applications, this section describes the concept and then gives you a brief introduction to Angular.

Single Page Applications

Angular lets you build single-page web applications (SPA). These dynamically load content and display it using a single HTML page. This page acts as a container or master page that presents the individual pages of your web app and lets you navigate between them. The SPA fetches data from the server and interacts with users locally within the browser, thus providing a faster and more responsive user experience than equivalent server-side apps.

What is Angular

Angular is more than just a framework. It is a platform for building browser-based, single-page applications. In fact, in its original version, Angular 1x, Angular was one of the first modern frontend frameworks. Without going into detail, Angular’s creators at Google decided that the framework had become too large and complicated. So, in 2016, they released a revised version, Angular 2x on which all subsequent versions of Angular are based. The foundation of Angular is its command line interface (CLI). The CLI provides tools for generating, building, running, and deploying Angular projects. Angular projects are built on components and services. Components are a fundamental building block within a project. Each component contains two elements: presentation and logic. Services are a way of sharing functionality and data between components. We will explore both components, services, and other key concepts in subsequent installments.

Installing the Angular CLI

As mentioned previously, the Angular CLI provides a wide range of tools for building Angular apps. Before you can install the Angular, check you have NodeJS and the Node Package Manager (NPM) installed on your PC. In a terminal window or an IDE’s integrated terminal, type the following:

npm install -g @angular/cli

Create a Project

In a terminal window or an IDE’s integrated terminal, find a suitable location on your PC’s file system. Then, use the CLI’s ng new command to create a new Angular project, for example.

ng new ng-task-tutorial

The installation process will ask you if you want to send analytic data back to Google. You can respond yes (Y) or no (N).

Next, it asks you what stylesheet format you prefer. The sample code in this project uses SCSS.

Next, the CLI asks if you want to enable Server Side Rendering. Since we will not be covering this topic, respond No. The project is generated, and the required NPM packages are installed.

Running the Project

Once the project is created, you can run it. In a terminal window or an IDE’s integrated terminal, open the project folder.

cd ng-task-tutorial-01

In the project folder, launch the project by typing:

ng serve

The project code is compiled.

When the process is completed, and the site is running ,click:

➜ Local: http://localhost:4200/

The following is displayed in the browser.

Conclusion and What’s Next

Since this series is called Accelerated Angular, this installment kicked things off as fast as possible. After a brief introduction to Angular, we installed the CLI created and ran a boilerplate project. In the Next installment, we will start building out a Task Management web app. See you then.

Rapid React Part 9: State Management with Reducers

2024-11-28T00:00:00+00:00

In Part 8, we explained how to use the React Context API to share data without explicitly passing props through every level of the component tree. Props are one form of data or state managed within a React app. Currently, the state managed within our app is static; once retrieved it doesn’t change. As we explained in Part 7: Integrating APIs, and retrieving and displaying static data triggers side effects. A side effect is an action or event that occurs outside of the scope of a component or function that modifies the application state and rerenders displayed data. For example, when a user submits valid credentials via the Login page, a series of side effects are triggered. First, the app receives and stores an authenticated user profile. Second, it navigates to the Tasks page. Next, using the profile, it retrieves the user’s assigned tasks. Finally, it populates a table with the list of tasks. These side effects have predictable results that do not modify the application state in unexpected ways. As we start to modify our application’s state by adding, editing, and deleting tasks, things become more complex and unpredictable. In this installment, we look at how to manage the application state to ensure that any changes we make to our data do not have unexpected results. The sample code for this installment is available on GitHub.

Key Concepts

In this section, we explain the problem involved in managing state, how React resolves these issues with reducers, and how to access a reducer.

Managing State

The simplest form of state management is declaring a variable and assigning it a value. This means that we can change or mutate the state whenever we want. The problem is that unless we are very careful, the mutated state can become corrupted over time and become meaningless. One way to prevent this is to replace mutable variables with unchangeable, immutable variables. Now we have a new problem we can’t make any changes. A common solution to this problem is instead of changing/mutating the state of a variable to create a new immutable copy.

Reducers

A reducer manages an immutable state using pure functions. A pure function is a function that, when given the same input values, always returns the same result with no external side effects. In other words, a function that reliably generates predictable output and that does not change the state of other entities (components, functions, props, values, etc.). Here is a sample reducer that implements a pure function.

const TasksReducer = (state, action) => {  
 switch (action.type) {  
  case 'add':  
    return [...state,{...action.task}];  
  default:  
    throw new Error(Unhandled action type: ${action.type});  
  }  
};

The reducer function has two parameters: state and action. The state argument is the current state of the application or component. In our example, state the list of tasks that we want to modify. The action arguments indicate the change to be performed on the state. In our example, the action object contains two properties: type and task. Within the function, there is a switch/case block that determines the response to each action type and how to manipulate the data associated with the action. When an action with a type field is set to add, the reducer returns a copy of the current state and appends a new task. The task data is provided within the action object’s task property.

Accessing Reducers

You access a reducer with React’s useReducer hook. To access the TasksReducer, we create an area with two values tasks and dispatch and assign it to the referenced reducer. Tasks are the list of tasks assigned to the authenticated user. Dispatch sends an action object to the reducer. Here, dispatch is assigned two properties: action and task. The action property is set to add, and the task property is assigned an object with the task data.

import{ useReducer } from 'react';  
import TasksReducer from './TasksReducer';

const TasksProvider = ({ children }) => {  
 const [tasks, dispatch] = useReducer(TasksReducer, []);  
 dispatch({ type: 'add', task: {  
   name: 'New Task',  
   description: 'A new task'  
 });  
};

## **Persisting the User Profile**

Before we create our reducer and update the context, we need to make a small change to the  Login component. Open src/pages/Login.js. Replace the FormBody function with the following code:

const FormBody = () => {

 const [email, setEmail] = useState("jonnygold@gmail.com");  
 const [password, setPassword] = useState("1234");  
 const [user, setUser] = useState(null);  
 const navigate = useNavigate();  
  const loginUser = async (email, password) => {  
   try {  
     const response = await fetch('http://localhost:3000/api/users/login', {  
       method: 'POST',  
       headers: { 'Content-Type': 'application/json' },  
       body: JSON.stringify({  
        email: email,  
        password: password  
       })  
     });  
     const data = await response.json();  
     setUser(data)  
     if(user)localStorage.setItem('user', JSON.stringify(user))

   } catch (error) {  
     console.error('Error adding task:', error);  
   }  
 }

The modified function ensures that the user profile is persisted to your browser’s localStorage. This ensures that if the profile props passed to the Tasks component are erased, the profile will continue to be available. Note that storing data in localStorage is highly insecure, and it is preferable to use other methods that store data in memory. This approach is used here for simplicity and convenience and to ensure that when a page is refreshed, the user profile is not lost.

Creating a Reducer

In the src/components folder, create a new file called TasksReducer.js

Open the file and add the following code.

const TasksReducer = (state, action) => {  
 switch (action.type) {  
  case 'set':  
    return action.tasks.filter(task => task.isActive);  
  case 'add':  
    return [...state,{...action.task}];  
  case 'edit':  
    return state.map((task) =>  
      task.taskId === action.task.taskId ? action.task : task  
    );  
  case 'delete':  
    return state.filter((task) => task.taskId !== action.task.taskId);  
  default:  
    throw new Error(Unhandled action type: ${action.type});  
  }  
};
export default TasksReducer

The reducer’s set action initializes the reducer’s state and populates it with the user’s assigned tasks. Note that the list of tasks is filtered by the isActive flag. This is because the Tasks API does not delete tasks from the Tasks database. Instead, the delete route sets the isActive flag to false. This enables users to reinstate deleted tasks. The add action appends the state with a new task. The edit action iterates through the tasks list and updates the modified task. The delete function removes the specified task by filtering the tasks list.

Accessing the Reducer through Context

We will access TasksReducer and actions through TasksContext. In the file, we will modify the existing useEffect hook and add additional task management functions that will use the dispatch mechanism to set the action type field and an object that provides the required data.

Open src/component/tasks/TasksContext.js. At the top of the file, add a reference to the useReducer hook and another reference to TasksReducer.js.

import{ createContext, useEffect, useReducer } from 'react';  
import { useLocation } from "react-router-dom";  
import TasksReducer from './TasksReducer';

In the TaskProvider function, update the variable declarations. The section now includes a reusable base URL (urlBase) variable with the path. There is an updated user variable declaration that can retrieve the user profile if user props are unavailable. The last variable declaration initializes the TaskReducer using the useReducer hook.

export const TasksProvider = ({ children }) => {  
 const location = useLocation();  
 const urlBase = 'http://localhost:3000/api/tasks'  
 const user = location.state ? location.state:  JSON.parse(localStorage.getItem('user'))  
 const [tasks, dispatch] = useReducer(TasksReducer, []);  
 …  
};

Now, we will replace the useEffect hook’s fetchTacks function with the following updated code. Note how the function will only run if an authenticated user profile is available. The fetch command path variable has been modified to use urlBase. The last modification is the removal of the call to set tasks via the useState hook and replacing it with dispatching a new action to the reducer (dispatch). The action.type is assigned the value set, and a payload object called tasks is assigned the list of tasks assigned to the user.

 useEffect(() => {  
   const fetchTasks = async (user) => {  
     try {  
       const response = await fetch(${urlBase}/user/${user.userName});  
       const data = await response.json();  
       dispatch({ type: 'set', tasks: data });  
     } catch (error) {  
       console.error('Error fetching tasks:', error);  
     }  
   };  
   if (user) fetchTasks(user);  
 },);

Following useEffect, we will add new state management functions, starting with addTask. Apart from the different API endpoints, HTTP command (POST), payload, and variable names, it is almost identical to the previous one. The most significant change is dispatch’s action.type is assigned now assigned task, and a single task is passed to the reducer.

  const addTask = async (payload) => {  
   try {  
     const response = await fetch(${urlBase}/add, {  
       method: 'POST',  
       headers: { 'Content-Type': 'application/json' },  
       body: JSON.stringify(payload.task),  
     });  
     const taskAdded = await response.json();  
     dispatch({ type: 'add', task: taskAdded });  
   } catch (error) {  
     console.error('Error adding task:', error);  
   }  
 };

Next, we add the editTask function that enables the user to update a single task. This is almost an identical copy of addTask with minor changes.

 const editTask = async (payload) => {  
   try {  
     const response = await fetch(${urlBase}/update/${payload.task.taskId}, {  
       method: 'POST',  
       headers: { 'Content-Type': 'application/json' },  
       body: JSON.stringify(payload.task),  
     });  
     const taskUpated = await response.json();  
     
     dispatch({ type: 'edit', task: taskUpated });  
   } catch (error) {  
     console.error('Error updating task:', error);  
   }  
 };

The deleteTask function deletes the task. The main difference is the payload sent to perform the function.

 const deleteTask = async (payload) => {  
   try {  
     const response = await fetch(${urlBase}/delete, {  
       method: 'POST',  
       headers: { 'Content-Type': 'application/json' },  
       body: JSON.stringify({  
         taskId:payload.task.taskId  
       }),  
     });  
     const taskDeleted = await response.json();  
     
     dispatch({ type: 'delete', task: taskDeleted });  
   } catch (error) {  
     console.error('Error deleting task:', error);  
   }  
 };

Finally, we update TaskContext.Provider to enable external access to dispatch and task management functions.

 return (  
   <TasksContext.Provider value=>  
     {children}  
   </TasksContext.Provider>  
 );  
};

Before we update the TasksTable component with TasksContext’s state management features, we will add a TaskMangement modal. The component includes a Button that, when set to Add, displays:

Likewise, when set to Edit, the modal displays an additional field:

In src/components, add a new file called Modal.js.

Open the file and add references to React’s useState hook and Bootstrap’s Button, Modal, and Form components.

import { useState } from 'react';  
import Button from 'react-bootstrap/Button';  
import Modal from 'react-bootstrap/Modal';  
import Form from 'react-bootstrap/Form';

Next, add an area called states that holds a list of task statuses.

const states = ['do', 'doing', 'done'];

Now, we create the Modal component function and declare variables that will hold local state data from a form or that will be used to add and modify task data. This section also includes a function that hides or shows a menu depending on whether the user is adding or modifying the form.

const ModalComponent = (props) => {

 const [taskName, setTaskName] = useState(props.task.name);  
 const [taskDescription, setTaskDescription] = useState(props.task.description);  
 const [dateAdded, setDateAdded] = useState(props.task.added);  
 const [dateUpdated, setDateUpdated] = useState(props.task.updated);  
 const [taskStatus, setTaskStatus] = useState(props.task.status);  
 const [show, setShow] = useState(false);

 const handleClose = () => setShow(false);  
 const handleShow = () => setShow(true);  
 const getMenu = () => {  
  if (props.title === 'Edit') {  
   return (  
       <Form.Group className="mb-3" controlId="taskStatus">  
         <Form.Label>Status</Form.Label>  
         <Form.Select onChange={(e) => setTaskStatus(e.target.value)}>  
           {states.map((state) => (<option key={state} value={state}>{state}</option>))}  
         </Form.Select>  
       </Form.Group>  
     )  
   }  
 }

In the function’s return section, we add a button that opens the modal. The name of the button will change according to the desired functionality.

return (  
 <div >  
  <Button variant="primary" onClick={handleShow} className='rounded-pill' size={props.size}>  
    {props.title}  
  </Button>  
 </div>  
);  
}  
export default ModalComponent;

Following the button, we add the modal component. This includes probs and an event handler that closes the form. The Header section also displays the Modal’s title.

<Modal show={show} onHide={handleClose}>  
 <Modal.Header closeButton>  
  <Modal.Title>{props.title}</Modal.Title>  
 </Modal.Header>  
   <Modal.Body>  
 </Modal.Body>  
</Modal>

In the Modal’s body section, add a form with the relevant fields for adding or editing tasks.

<Form onSubmit={(e) => {  
 setDateAdded(new Date().toISOString());  
 setDateUpdated(new Date().toISOString());  
 if (props.title === 'Add') {  
  props.onAddTask({  
   name: taskName,  
   description: taskDescription,  
   user: props.task.user,  
   status: taskStatus,  
   taskId: props.task,  
   added: dateAdded,  
   updated: dateUpdated,  
   isActive: true,  
   isEdit: false  
  });  
 }  
 else if (props.title === 'Edit') {  
  props.onEditTask({  
   name: taskName,  
   description: taskDescription,  
   user: props.task.user,  
   status: taskStatus,  
   taskId: props.task,  
   added: dateAdded,  
   updated: dateUpdated,  
   isActive: true,  
   isEdit: false  
  });  
 }  
 setShow(false);  
}}>

 <Form.Group className="mb-3" controlId="taskName">  
  <Form.Label>Name</Form.Label>  
  <Form.Control   
    type="text"   
    value={taskName}  
    onChange={(e) => setTaskName(e.target.value)}  
   />  
 </Form.Group>  
 <Form.Group className="mb-3" controlId="taskDescription">  
  <Form.Label>Description</Form.Label>  
  <Form.Control   
   type="text"   
   value={taskDescription}   
   onChange={(e) => setTaskDescription(e.target.value)}  
  />    
 </Form.Group>  
 {getMenu()}  
 <div className="d-grid gap-2">  
  <Button variant="primary" type="submit" >Submit</Button>  
 </div>  
</Form>

Updating TasksTable

All the pieces are now in place to add the new state management functionality to the TaskTable component. Open src/components/TaskTable.js, and at the top of the file, add the following references.

import Button from 'react-bootstrap/Button';  
import ModalComponent from '../Modal';

In the TaskTable function, update TaskContext to reference the new task management functions. This will be followed by three new functions that will reference the functions and pass them as props to the Modal component. We also add a user variable that retrieves the current user profile from local storage.

const TaskTable = () => {  
 const { tasks, addTask, editTask, deleteTask  } = useContext(TasksContext);  
 const onAddTask = (task) => { addTask({ task })}  
 const onEditTask = (task) => { editTask({task})}  
 const onDeleleTask = (task) => {deleteTask({task})}  
 const user = JSON.parse(localStorage.getItem('user'))

In the table header section, add a cell that spans two columns with the name Actions.

 return (  
  <div>  
   {tasks ? <Table striped bordered hover size="lg">  
    <thead>  
      <tr>{tableCols.map((col, index) => (  
       <th key={col-${col}-${index}}>{col}</th>))}  
       <th colSpan={"2"}>Actions</th>  
      </tr>  
     </thead>

Let’s update the table body so that each cell has a unique name. This prevents errors if a cell has a key based on a non-unique value.

<tbody>  
 {tasks.map((task, key) => (  
  <tr key={task._id}>  
   {tableCols.map((col, index) => (  
    <td key={${task._id}-${col}-${index}-${task.added}}>  
     {task[col.toLowerCase()]}  
    </td>  
   ))}  
  </tr>  
 ))}

The next step is to add two cells to the row that let us add and delete tasks. The first cell references the Modal component. This component includes a button that opens the Modal to edit the task. The component properties include the task data and references to the calls to add and edit tasks.

<td>  
 <ModalComponent   
  title='Edit'  
  size='sm'  
  task={task}  
  onAddTask={onAddTask}  
  onEditTask={onEditTask} />  
</td>  
<td>  
 <Button   
  variant="danger rounded-pill"  
  size='sm'  
  onClick={(e) => { onDeleleTask(task)}}  
  >  
  Delete  
 </Button>  
</td>  

Our final update is to add a row to the table that displays a button to create new tasks. The button is displayed by referencing the ModalComponent and sending the relevant props.

<tr style=>  
 <td colSpan={tableCols.length + 2} style=>  
   <div className="d-grid gap-2 d-md-flex justify-content-md-center">  
    <ModalComponent  
     title='Add'  
     task=  
     onAddTask={onAddTask}  
    />  
   </div>  
 </td>  
</tr>

Refresh the page, and it should look like this.

Conclusion and What’s Next

In this installment, we completed our Task Management application. We started by introducing the theory and practice of React State Management. The first stage was to understand the difference between mutable and immutable data and the problems caused by mutating state. Then, we looked at how we can resolve these issues by using reducers and how to access reducers with context and providers. The rest of this installment dealt with how to create and use a reducer to manage state across our application. The final step was to add a user interface with buttons and modals to add, edit, and delete tasks. As with my previous series, I want to thank everyone who has viewed, responded, or commented on each article. I am currently working on some new ideas, including a possible series on other web development and related technologies. I am also investigating other ways of presenting and interacting with my existing material. I’ve really enjoyed working on this series, and it gave me a way to refresh and extend my knowledge of React. I hope that this knowledge is also beneficial to you. Thanks again, and see you all soon.

Rapid React Part 8: Passing Props with the Context API

2024-11-27T00:00:00+00:00

In Part 7, we introduced the concept of React side effects and how to handle them with the use effect hook. We integrated our app with a task management API. The Users component uses the API to authenticate user credentials. After the user is authenticated, the App navigates to the Tasks page. When the Tasks recieves an authenticated user profile, it retrieves tasks for that user to be displayed by the TasksTable component. The tasks are passed from parent to child component as props (properties). As we will explain in more detail, props work well for simple app, but as you create new features, components, and sub components, it becomes harder to keep track of how props are being passed between components. In this installment, we introduce React’s Context API and see how it can provide data across components. The sample code for this installment is available on GitHub.

Key Concepts

In this section, we explain the concepts of React Context and Providers

Context

Our app is still relatively simple and has a shallow component tree. In other words, there at most two levels between our top level components so passing props between parent and child components, such as the Task component and its sub components (Nav, Info, Footer) works well. Over time we will add additional components and those in turn may be made up of multiple sub-component. Luckily, React Context is designed to solve this problem by letting you share data with any component no matter its position within the component tree. React Context is a feature in the React library that enables components to share data (state, functions, or any value) without explicitly passing props through every level of the component tree.

Providers

Providers are a special component that is used to provide context information to child components. The provider wraps child components and shares that data (props) with components at any level within the component hierarchy (tree).

Create Task Components

To implement Context, we will create a group of task related components. These components will be used for providing task related context and to display user assigned tasks. In the src/components folder, create a new folder called Tasks. In the folder, create two files called TasksContext.js and TaskTable.js.

Adding Context and Providers

Open TaskContext.js and add the following references. Apart from createContext, the other references should be familiar and were covered in previous installments.

import { createContext, useState, useEffect } from 'react';
import { useLocation } from "react-router-dom";

We use the createContext hook to declare the our context called TasksContext.

export const TasksContext = createContext();

With these references in place, we can now create our tasks provider function (TasksProvider). Following the previous code, paste the following code:

export const TasksProvider = ({ children }) => {
 const [tasks, setTasks] = useState([]);
 const location = useLocation();
 const user = location.state;

 return (
   <TasksContext.Provider value={tasks}>
    {children}
   </TasksContext.Provider>
 );
};

The function provides the children parameters object. The hooks and related variables should look familiar and were described in depth in Part 6: Passing Data with Props. The function returns the TasksContext Provider and tasks retrieved from an API called and passes them onto the wrapped child component.

Next, in the middle of the function we add an useEffect hook function. While the code is similar to the code from Part 7: Integrating APIs. It has been implemented with the async and await keywords. These handle asynchronous calls to data sources and are more appropriate for generating context.

useEffect(() => {
 const fetchTasks = async () => {
  try {
   const response
    await fetch(`http://localhost:3000/api/tasks/user/${user.user.userName}`);
    const data = await response.json();
    setTasks(data);
    } catch (error) {
    console.error('Error fetching tasks:', error);
    }};
   fetchTasks();
 });

Consuming Context

Open TaskTable.js and paste the following code. The code is almost identical to the TaskTable we created in the previous installment with three differences. The first is a reference to the useContext hook. This enables the component to consume the context we declared in TasksContext.js. Next, we have a reference to the TaskContext.js file. The last difference is that the function’s task props has been replace by a tasks variable that is assigned data via the useContext hook from TasksContext.

import { useContext } from 'react';
import { TasksContext } from './TasksContext';

import tableCols from "../../data/cols";
import Table from 'react-bootstrap/Table';

const TaskTable = () => {
 const tasks = useContext(TasksContext);
 return (
   <div>
    { tasks ? <Table striped bordered hover size="lg">
    <thead>
    <tr>{tableCols.map((col) => (<th key={col}>{col}</th>))}</tr>
    </thead>
    <tbody>
    {tasks.map((task) => (<tr key={task.id}>
    {tableCols.map((col) => (
    <td key={col}>{task[col.toLowerCase()]}</td>
    ))}
    </tr>))}
    </tbody>
    </Table> : 'Loading...'}
   </div>
 );
};

export default TaskTable;

Providing Context

The last step is provide the context for the TaskTable Component. Open src/page/Tasks.js. Replace the existing code with the following:

import { TasksProvider } from '../components/Tasks/TasksContext';
import { useLocation } from "react-router-dom";

import Container from 'react-bootstrap/Container';

import NavbarComponent from '../components/Navigation';
import Footer from '../components/Footer';
import Info from "../components/Info";
import TaskTable from '../components/Tasks/TaskTable';

const Tasks = () => {

 const location = useLocation();
 const user = location.state;

 return (
   <div>
    <NavbarComponent />
    <Container style=>
    { user ?  <Info {...user} infoType='profile' variantInfo="info" /> : 'Loading...'}
    <TasksProvider>
    <TaskTable />
    </TasksProvider>
    </Container>
    <Container style= >
    <Footer />
    </Container>
   </div>
 );
}

export default Tasks;

At the top of the file is a reference to TasksProvider.js. The code removes the TaskTable component function and replaces it with a reference to the TaskTable component. In the return section, there is a TaskProvider Component that wraps the TaskTable component. Note that now there is now no need to define props to be passed to the child component. Refresh the page and everything should work with no noticeable changes.

Conclusion and What’s Next

In this installment, we explained how to use the React Context API to pass prop data to child components. We then use the API to define Context and Providers and used them with our new TasksTable component. In the next, and final installment we will dive deeper into React state management and look and the theory and practice of Reducers.

Rapid React Part 7: Integrating APIs

2024-11-24T00:00:00+00:00

In Part 6, we examined how to pass data between components with props (properties) and how to pass properties using ReactRouter’s location hooks. Currently, our React app performs a very simple authentication and displays a list of tasks. The data for these actions is stored in two Javascript files. This is great for demonstration purposes but has a number of limitations, such as we are working with limited data sets, and we can’t permanently add, modify, or delete data. In this installment, we will start to change this by integrating our React code with a Rest API. Specifically, we will update the Login and Tasks components to interact with a Task Management API. The sample code for this installment is available on GitHub.

Key Concepts

In this section, we explain side effects, ternary operators, and Cross-Origin Resource Requests.

Side Effects

A side effect is an action or event that occurs outside of the scope of a component or function. While the result of a side effect does not return a specific response, such as a single value, object, or array, it will have broader impacts across the application. In our case, when a component responds to an event by sending a request or query that returns a response (value, object, or array). The response will modify the application state and rerender displayed data. These types of side effects are handled with the useEffect hook.

Ternary Operators

Ternary Operators are a syntax for creating a conditional syntax. They provide a compact alternative to Javascript If-Else and switch statements and are used primarily, but not exclusively when rendering conditional components. The operator has the following syntax:

condition ? expr1 : expr2

Where:

condition: An expression that is evaluated as true or false
expr1: This expression is executed if the condition is true
expr2: This expression is executed if the condition is false

In the following example, we use a ternary operator to navigate to the Tasks page after a user is authenticated.

{ user ?  navigate('/tasks', { state: { user:user } }) : null}

Cross-Origin Resource Requests

Cross-Origin Resource Requests (CORS) is a web standard that provides protection for request-related security issues. CORS prevents web pages from making requests from a domain (address) other than the one from which the page was served. CORS can cause problems when developing a web application and could prevent you from accessing and displaying data. We will address one solution later in this article.

Task Management API

Authenticating Users

We will start by modifying the Login component to authenticate a user’s credentials by sending an HTTP API request. Open src/pages/Login.js. In the FormBody component, add the following function.

const FormBody = () => {
 const [email, setEmail] = useState("jonnygold@gmail.com");
 const [password, setPassword] = useState("1234");
 const [user, setUser] = useState();
 const navigate = useNavigate();
  const loginUser = (email, password) => {
   fetch('http://localhost:3000/api/users/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
    email: email,
    password: password
    }),
    })
   .then(response => response.json())
   .then(data => setUser(data))
   .catch(error => {
    console.error('Error:', error);
   });
 }

The function uses the fetch API provided by React to send a login request to the API. The request payload is populated with values from the Login form. If the user supplied valid credentials, the API returns their profile. When the response is received, the function calls setUser and uses the useState hook to update the component state.

Now, we need to update the component so that when the user presses the Submit button, the event handler calls the loginUser function.

Delete the current authentication code.

<Form onSubmit={(e) => {
  const currUser = Users.find((user) =>
   user.email === email && user.password === password);
   if(currUser){
    setUser(currUser);
   }
   else{
    alert("Invalid email or password");
  }
}}

Replace it with this code:

<Form onSubmit={(e) => {
  e.preventDefault();
  loginUser(email, password);
}}>

Updating Application Routing and Handling CORS

If you refresh the application and try to log in with valid credentials, nothing will happen. To ensure that the authentication process works, we must replace the BrowserRouter with a HashRouter. The BrowserRouter updates the page without reloading it. This causes issues if the loginFunction has not received a response from the API. As a result, the Tasks page is unable to load. You can avoid these issues by replacing the BrowserRouter.

Open App.js. Delete the current code, and replace it with the following.

import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Login from "./pages/Login";
import Tasks from "./pages/Tasks";

function App() {
 return (
   <BrowserRouter>
    <Routes>
    <Route path="/" element={<Login />} />
    <Route path="/tasks" element={<Tasks />} />
    </Routes>
   </BrowserRouter>
 );
}
export default App;

As explained in the Key Issues section, the other issue that may prevent us from accessing the API is CORS. If you are using the Chrome browser on Mac OS, the easiest solution is to open a browser window that disables CORS protection. In your IDE’s integrated terminal, run the following code:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security --allow-running-insecure-content

If you refresh your browser, the Login component should work.

Displayed User Tasks

Currently, our app displays all tasks and does not filter them by the authenticated user. Now, we can retrieve a specific user’s tasks via the API. However, in order to correctly update the Task component’s list of tasks, we must wrap the request with the useEffect hook. This is because the response must rerender the data displayed by the page.

As with all hooks, before we can use it, we must reference it. Open Tasks.js and update the first reference as follows:

import React, { useState, useEffect } from 'react';

In Tasks, add a useEffect hook that contains the following request.

 useEffect(() => {
   fetch(http://localhost:3000/api/tasks/user/${user.user.userName})
    .then(response => response.json())
    .then(json => setData(json))
    .catch(error => console.error(error));
 });

To prevent errors if the page opens before it receives an authenticated user profile or no profile was provided, update the Tasks component functions return statement with a pair of ternary operators. Note how we can use the ternary operators to display a Loading indicator

return (
<div>
 <NavbarComponent />
  <Container style=>
 { user ?  <Info {...user} infoType='profile' variantInfo="info" /> : 'Loading...'}
 { tasks ? <TaskTable taskList={tasks} />  : 'Loading...'}
  </Container>
  …
   </div>
 );

Refreshing the page should display user-specific tasks provided by the Tasks API.

Conclusion and What’s Next

In this installment, we introduced the concept of React side effects and how to handle them with the useEffect hook. We also described CORS and why it matters. Now, our app can interact with the Task Management API to authenticate users and add, modify, or delete data. In the next installment, we will look at how we can use React’s context API to pass data across our application.

Rapid React Part 6: Passing Data with Props

2024-11-22T00:00:00+00:00

In Part 5, we introduced you to the basics of CSS and how to implement them with Bootstrap. In this installment, we look at how to pass data between components with props (properties) and how we can pass properties using ReactRouter’s location hooks. The sample code for this installment is available on GitHub.

Key Concepts

In this section, we explain what are props and ReactRouter’s useLocation hook.

Props

In React, props (properties) pass data between components. In frontend frameworks, such as Angular, data can be passed between parent and child components and back again. This data is mutable and can be changed at either end. React does things differently and has a stricter approach to passing data. For a start, data passed between parent and child components only flows in one direction (parent to child). Furthermore, passed props are read-only (immutable) this means that the child component is not unable to change (mutate) the state of a passed prop.

Location Hook

As explained in Part 3: User Interaction and Forms, Hooks are a mechanism for collecting data and managing user interaction. In addition to the hooks provided by React, many React libraries and packages provide their own hooks. The ReactRouter provides a useLocation hook to pass props and state. We will use this hook to pass props between the Login and Tasks components.

Displaying Profile Information

Let’s start by adding a component to the Tasks page that displays the name of an authenticated user. The page also provides a button that displays the full profile.

In the src/components folder, create a new file called Info.js. Paste the following code into the file.

import Alert from "react-bootstrap/Alert";
const Welcome = (user) => {
 return (
   <div>
     Welcome: {user.name}
     <span style=>
       <button
         className="btn btn-sm btn-primary"
         onClick={(e) => {
           alert(JSON.stringify(user));
         }}
       >
         View Profile
       </button>
     </span>
   </div>
 );
};

const Info = (props) => {
 return (
   <Alert variant={props.variantInfo}>
     <Welcome {...props.user} />
   </Alert>
 );
};

export default Info;

The component references the Bootstrap Alert component, a bar that displays information to the user. The Info function receives properties from the Tasks component. This information is used to set the Alert’s variant property to a specific color. The Alert uses the Welcome function to display a welcome message to the authenticated user. The component receives the prop’s user object. When the user clicks View Profile, an alert displays the user profile.

When a user logs in with the correct credentials, the Login form locates the profile and navigates to the tasks page. Let’s modify Login.js to pass this data to Tasks.js. To do this, we will need to replace the Navigate with the useNavigate hook. At the top of the page, comment add the following code.

// import {  Navigate } from "react-router-dom";  
import { useNavigate } from "react-router-dom";

In FormBody, add the following code to pass the user profile props to the Tasks component.

{/* {user && (<Navigate to="/tasks" { state: { user:user }  />)} */}  
{ user ?  navigate('/tasks', { state: { user:user } }) : null}

Displaying Props in the Tasks Component

Open Tasks.js. At the top of the page, add a reference to useLocation hook and the Info component.

import { useLocation } from "react-router-dom";

import userTasks from "../data/tasks";  
import tableCols from "../data/cols";

import Table from 'react-bootstrap/Table';  
import Container from 'react-bootstrap/Container';

import NavbarComponent from '../components/Navigation';  
import Footer from '../components/Footer';  
import Info from "../components/Info";

In the Tasks component function, add a location variable that references userLocation. After location, add a user variable that retrieves the user data from the location’s object’s state property. Now, we can reference the Info component and use it to pass. The Info component passes the user profile and variantInfo (color) from the Tasks component.

const Tasks = () => {

 const location = useLocation();  
 const user = location.state;  
 return (  
   <div>  
     <NavbarComponent />  
     <Container style=>  
       < Info {...user} variantInfo="info" />  
       <TaskTable />  
     </Container>  
     <Container style= >  
       <Footer />  
     </Container>  
   </div>  
 );

Refresh the page, and the Info component will be displayed.

Conclusion and What’s Next

In this installment, we looked at how to pass data between components with props (properties) and how we can pass properties using ReactRouter’s location hooks. In the next installment, we look at how we retrieve data from an API and use that data in our app.

Rapid React Part 5: Styling React

2024-11-21T00:00:00+00:00

In Part 4, concepts of the Virtual DOM, Keys, and Interpolation. We used these ideas to populate a table with task data dynamically. At this point, our code is functional, but our pages could be prettier. Let’s face it: most developers, myself included, are not web designers, so we need some help from that department. The good news is that we don’t have to be, and there are a number of available solutions. In this installment, we dive into one of those solutions and investigate how we can use Bootstrap to make our app look and feel more professional. The sample code for this installment is available on GitHub.

Key Concepts

In this section, we provide background and context on CSS and Bootstrap.

CSS

Cascading Style Sheets (CSS) is a language for managing the appearance of web pages. It allows you to separate the presentation of those pages from its underlying (HTML) content. CSS defines selectors that map to individual HTML elements. For each element, you can set properties (attributes) and the values to set for the properties. In the following example, we set the color and weight of a top-level heading (H1) element.

h1 {
    color:red;
    font-weight: bold;
}

In addition to mapping to HTML elements, you can create class selectors that apply to a group of elements. You can also target specific elements by creating ID selectors.

Bootstrap

Bootstrap is a popular, flexible, and easy-to-use CSS framework. It was originally created by Twitter and made available as an open-source project. Bootstrap was designed to operate with Javascript, and specific versions are available for popular frameworks, such as React, Angular, and Vue.js. We will be using React Bootstrap.

Getting Started with Bootstrap

To use Bootstrap, we first install the React Bootstrap package. In your IDE’s integrated terminal, type:

npm install react-bootstrap bootstrap

Next, open App.js. Remove or comment out the reference to App.css. Instead, add the following reference:

import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";

Creating Reusable Page Components

Bootstrap lets you create reusable components that you can within each page of your app. For our first page component, we will create a footer that displays copyright and version information. The footer will appear on both the Login and Tasks pages. ![][image1]

In the src folder, create a new folder called components. In the folder, create a new file called Footer.js

Our footer will be based on a standard HTML footer and will include three Bootstrap elements: Container, Row, and Col. Containers define an area that contains elements for positioning within the viewport (display) of your browser or device. Row is a row element that can be divided up into columns (cols) or equal or varying but uniform sizes. In Footer.js, add the following code. Note that React Bootstrap elements are capitalized.

import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

const Footer = () => {
 return (
   <footer>
     <Container>
       <Row>
         <Col sm={8}>&copy; 2024 MVDS</Col>
         <Col style=>Version 0.1.4</Col>
       </Row>
     </Container>
   </footer>
 );
};

export default Footer;

Modifying Login.js with Cards and Forms

Open src/pages/Login.js. At the top of the page, add references to Bootstrap’s Button, Container, Form, and Card components and our Footer component.

import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";


const Footer = () => {
 return (
   <footer>
     <Container>
       <Row>
         <Col sm={8}>&copy; 2024 MVDS</Col>
         <Col style=>Version 0.1.4</Col>
       </Row>
     </Container>
   </footer>
 );
};

export default Footer;

Next, we will divide our Login page into two components. The existing Login component will be a Container element that displays a card with a header and footer. For now, the header will display a hard-coded title. The card footer displays our Footer component. The card’s main (body) section will reference a form component.

First, copy the Login function and call it FormBody. Next, replace the return section of Login with the following.

const Login = () => {
 return (
   <div>
     <Container fluid className='container-lg' 
       style=>
       <Card className='card-sm'>
         <Card.Header className='bg-primary text-light text-center' >
           <h2>Login</h2>
         </Card.Header>
         <Card.Body>
           <FormBody />
         </Card.Body>
        <Card.Footer>
         <Footer />
        </Card.Footer>
       </Card>
     </Container>
   </div>
 );
}

Now, let’s restyle our Login form to use Bootstrap form components and styling.

const FormBody = () => {
 const [email, setEmail] = useState("jonnygold@gmail.com");
 const [password, setPassword] = useState("1234");
 const [user, setUser] = useState();
 return (
   <div>{user && (<Navigate to="/tasks" replace={true} />)}
     <Form onSubmit={(e) => {
       e.preventDefault();
       const currUser = Users.find((user) => 
       user.email === email && user.password === password);
       if(currUser){
         setUser(currUser);
       }
       else{
         alert("Invalid email or password");
       }
     }} >
       <Form.Group className="mb-3" controlId="formBasicEmail">
         <Form.Label>Email</Form.Label>
         <Form.Control
           type="email"
           placeholder="Enter email"
           value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
       </Form.Group>
       <Form.Group className="mb-3" controlId="formBasicPassword">
         <Form.Label>Password</Form.Label>
         <Form.Control
           type="password"
           placeholder="Password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
         />
       </Form.Group>
       <div className="d-grid gap-2">
         <Button variant="primary" type="submit" >Submit</Button>
       </div>
     </Form>
   </div>
 );
}

Refresh the page, and it should look like this:

Before we update the Tasks page, we will create a Navigation bar component. This will be located at the top of the page, display the app’s name, and let us return to the Login page.

In src/components, create a file called Navigation.js. Open the file and add references to the Container, Navbar, and Nav Bootstrap components. The Navbar is the parent Navigation component that contains individual Nav elements, such as links and buttons. After the Bootstrap components, include a link to the React Routers Link component. This lets us navigate back to the Login page.

import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';


import {Link as ReactLink} from "react-router-dom";

Now, add the following code to create the Navbar component.

const NavbarComponent = () => {
 return (
   <Navbar bg="primary" expand="lg" data-bs-theme="dark">
     <Container>
       <Navbar.Brand href="#home">React Task Manager</Navbar.Brand>
       <Navbar.Toggle aria-controls="basic-navbar-nav" />
       <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="me-auto" ></Nav>
         <div className='Nav'>
           <ReactLink to="/">Logout</ReactLink>
         </div>
       </Navbar.Collapse>
     </Container>
   </Navbar>
 );
}
export default NavbarComponent;

Updating the Tasks Page

After creating the Navbar component, we are ready to update the Tasks page. Like our Login page, we will divide the page into two components. The existing Tasks component will be converted into a container that contains the Navbar, a Container that references a Table component, and the Footer component.

Open src/pages/Tasks.js. Now copy and paste the tasks function and rename the copy TaskTable. Replace the contents of the Tasks function with the following:

const Tasks = () => {
 return (
   <div>
     <NavbarComponent />
     <Container style=>
       <TaskTable />
     </Container>
     <Container style= >
       <Footer />
     </Container>
   </div>
 );
}

The last step is to modify the TaskTable component. All we need to do is replace <table> with </Table>

const TaskTable = () => {
 return (
   <div>
     <h1>Tasks</h1>
     <Table>
       <thead>
         <tr>{tableCols.map((col) => (<th key={col}>{col}</th>))}</tr>
       </thead>
       <tbody>
         {userTasks.map((task) => (
           <tr key={task.id}>
             {tableCols.map((col) => (
               <td key={col}>{task[col.toLowerCase()]}</td>
             ))}
           </tr>
         ))}
       </tbody>
     </Table>
   </div>
 );
};

Refresh the page, and this is displayed:

Conclusion and What’s Next

In this installment, we introduced you to the basics of CSS and how to implement them with Bootstrap. In the next installment, we will show you how to pass data between components using props (properties).

Rapid React Part 4: Rapid React Part 4: Presenting Data

2024-11-20T00:00:00+00:00

In Part 3, we learned about React components, hooks, and local state. We created a form and added logic to perform basic authentication. In this installment, we will add a table to the page and display a list of tasks assigned to the user. The sample code for this installment is available on GitHub.

Key Concepts

In this installment, we introduce the concepts of the Virtual DOM, Keys, and Interpolation.

Virtual DOM

As this installment covers using React to present data, we should take a look at the Virtual DOM. This is an in-memory representation of your web browser’s Document Object Model (DOM), a tree structure with nodes that represent elements on a web page. Unlike the actual DOM, which rerenders the entire page in response to external changes, the Virtual DOM only updates those elements that change. The Virtual DOM and JSX are closely related and help ensure a consistent and improved user experience.

Keys

When it comes to displaying lists with React, it is also important to understand keys. A key is an identifier applied to items in a list. It helps React identify which elements have been added, changed, or removed from a list. In the following example, the function displays items in a list of fruits as an unordered (bullet) list.

const MyList = () => {
  const fruit = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {fruit.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

Keys help React manage dynamic lists efficiently and prevent errors by ensuring that each element can be uniquely identified.

Interpolation

Interpolation is the method by which you can inject static text with dynamic elements. React supports interpolation by surrounding a variable with a pair of braces. See above for an example. Another way to interpolate text is to use the following syntax.

`${task.id}`

This syntax is useful when you want to combine multiple variables into a single string. We will use this form of interpolation to create keys for each table body cell.

Referencing Data Sources

Open src/Tasks.js. At the top of the page, let’s add references to two data sources. The first reference is to the file col.js which contains a list of table (tableCols) columns. The second is to the file tasks.js which contains a list of tasks that populate the table.

import { Link } from "react-router-dom";
import tableCols from "../data/cols";
import userTasks from "../data/tasks";
import "./_pages.css";

Structuring the Page

Currently, all we have on our Tasks page is some boilerplate text and a link.

const Tasks = () => {
 return (
   <div>
     <h1>Tasks</h1>
     <p>TBD</p>
     <Link to="/">Go to login</Link>
   </div>
 );
}

Let’s start by adding a table to the page.

const Tasks = () => {
 return (
   <div>
     <h1>Tasks</h1>
     <table>
       <thead>
         <tr><th>TBD</th></tr>
       </thead>
       <tbody>
         <tr><td>TBD</td></tr>
       </tbody>
     </table>
     <p><Link to="/">Logout</Link></p>
   </div>
 );
};
export default Tasks;

Refresh the page and the following is displayed.

Adding Table Columns

Our next step is to add a row of column headers to the table. Replace the code in the table header with the following:

<thead>
 <tr>
  {tableCols.map((col, index) => (<th key={index}>{index}{col}</th>))}
</tr>
</thead>

Here, we iterate through tableCols using the map method. Note how we use an index to assign a unique key to each column. Refresh the page, and the following will be displayed.

Before we proceed, remove the index from the body of the column header.

<thead>
  <tr>
    {tableCols.map((col, index) => (<th key={index}>{col}</th>))}
  </tr>
</thead>

Populating the Table with Data

The final step is to populate the table with task data. First, we will iterate through our list of tasks to create each row of the table.

<tbody>{userTasks.map((task) =>(
  <tr key={task.id}>{tableCols.map((col) => (</tr> )
 )}
</tbody>

The easiest way to display task data would be to hardcode the name of each field in for each table cell (<td>).

<tr key={task.id}>
 <td>{task.name}</td>
 <td>{task.description}</td>
 <td>{task.added}</td>
 <td>{task.updated}</td>
 <td>{task.status}</td>
</tr>

The problem with this approach is that any changes to our data source could prevent the display or even break our table. In addition, if we want to add new cells to the table, we will have to add them manually. Instead, we will take advantage of the fact that our list of column names matches the fields of each task object in the tasks list (array). This will populate each cell dynamically. However, for this to work, we also need to convert the name of each column to lowercase. Note how we use text interpolation to create a unique composite key.

<tr key={task.id}>
 {tableCols.map((col, index) => (
    <td key={`${col}-${task.id}-${index}`}>{task[col.toLowerCase()]}</td>))}
</tr>))}

Refresh the page, and the following will be displayed.

Conclusion and What’s Next

In this installment, we introduced you to the concepts of the Virtual DOM, Keys, and Interpolation. We used these ideas to populate a table with task data dynamically. In the next installment, we will look at how to improve our app’s appearance with theming.

Rapid React Part 3: User Interaction and Forms

2024-11-16T00:00:00+00:00

In Part Two of this series, we introduced you to the theory and practice of creating pages with JSX and how to navigate between them. Now we have a foundation in place, we can build on it and add some basic functionality. In this article, we will add a form to the Login page. The sample code for this installment is available on GitHub.

Key Concepts

In this installment, we introduce the concepts of components, hooks, and state.

Components

React enables you to modularize your application code into reusable components. In React terms, our pages (Login.js and Tasks.js) are components.

For example, here is the code of our Login component. This is what is known as a functional component because it uses a function to display JSX code.

const Login = () => {
 return (
   <div>
     <h1>Login</h1>
     <p>Part 1: The Basics</p>
   </div>
 );
}

export default Login;

Hooks

In addition to functional components, React also supports class components. These have several advantages over functional components but also add a level of complexity. Until recently, they also supported a number of valuable features that were not available to functional components, Recently, React introduced a mechanism called hooks. Hooks simplify component logic, making it easier to share and reuse code across components.

State Management

Using hooks, we can create a form that collects data and manages user interactions. The data stored and managed by a component is called state. In React, data collected by an application is called local state. To manage and store local state, add a reference to React’s useState Hook.

Our first task is to create a Login Form. The form enables a user to type an email and password. When the user presses the Submit button, the app checks the submitted credentials and authenticates the user. If the user’s credentials are valid, the application displays a message and navigates to the task page.

Open Login.js (src/pages/Login.js). First, we will add the following references. The first reference is the file with our list of users. The last file is a CSS template. Both these files can be downloaded from GitHub.

import Users from '../data/users';
import './_pages.css';

Now, let’s add the necessary data to display a form.

const Login = () => {
  return (
   <div className="card">
     <h1>Part 2:Login</h1>
      <form>
       <label>Email</label>
       <input
         type="email"
         name="username" 
         placeholder="Enter email"/><br/>
       <label>Password</label>
        <input
         type="password"
         name="password" 
         placeholder="Password"/><br/>
       <button type="submit">Login</button>
     </form>
   </div>
 );
}

Managing Local State

Now that we have a form, we need a mechanism for collecting data and managing user interactions. In React, data collected by an application is called local state. To manage and store local state, add a reference to React’s useState Hook.

import { useState } from 'react';

In the Login() function, we declare variables to store the local state of the user’s credentials (email, password) and authenticated user profile. Each state variable is an array with two elements. The first element is the variable name that stores a local state value, such as email. The second is a reference to a function that updates the state using useState, such as setEmail.

const Login = () => {
 const [email, setEmail] = useState("");
 const [password, setPassword] = useState("");
 const [user, setUser] = useState();
 …
}

UseState in Action

After we have declared our state variables, we can use them to collect and display form data. Here, when a user enters or changes values in the Email field, an event (e) is triggered. The event updates email by calling setEmail. When the value has been updated, the field’s value parameter displays the new local state of email.

<label>Email</label>
  <input
      type="email"
      name="username" 
      placeholder="Enter email"
      value={email}
      onChange={(e) => setEmail(e.target.value)} />
    <br/>
    <label>Password</label>
    <input
      type="password"
      name="password" 
      placeholder="Password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}/>

Submitting and Reacting to Form Data

Once we have a working form, we need a way to submit and authenticate the data. In this case, we need to add an onSubmit event that is triggered when the user clicks the Submit button. To ensure that the onSubmit event is not triggered each time the page loads or reloads, we add the e.preventDefault() method.

 <form onSubmit={(e) => {
 e.preventDefault();
 const currUser = Users.find((user) => 
   user.email === email && user.password === password);
    if(currUser){
      alert(`Email: ${email}\nPassword: ${password}`);
      setUser(currUser)
    }
 }} >

When the user submits their credentials, the function declares a value called currentUser. currentUser queries the list of users and matches the supplied credentials. If the query matches a single user, a message is displayed. Then, setUser is called to add the profile to the component’s local state. Since the default value of the local state’s user object is Null, once it is updated with valid data, the function can display the Tasks page.

<div className="card">
     <h1>Part 2:Login</h1>
     {user && (
       <Navigate to="/tasks" replace={true} />
     )}
    <form onSubmit={(e) => {
     …

Conclusion and What’s Next

In this installment, we learned about React components, hooks, and local state. We created a form and added logic to perform basic authentication. In the next installment, we will update the Tasks page to display a list of tasks.

Rapid React Part 2: Routing

2024-11-15T00:00:00+00:00

In Part 1, we started with a brief introduction to ReactJS. Next, we created and ran a boilerplate project. In this installment, we will begin building a Task Management web app. The app will have two pages. The first is a placeholder Login page with a title and link to the application’s Home (Tasks) page

We will also create a placeholder Home page with a link to the Login page.

Key Concepts

This series takes a just-in-time approach to React terminology and concepts. Ideas will be described in context as and when you need them. We will start by explaining JSX and routing.

JavaScript XML (JSX)

Until the launch of React in 2013, developers strived to keep a strict separation between an application’s view (presentation) and model (code). Yes, you could do it, and development environments, such as PHP, legacy ASP, and Javascript, encouraged it. However, the cool kids like Apple (ObjectiveC), Google (Angular1x), and even Microsoft (ASP.net) were insisting on implementing the Model, View, Controller pattern, so the rest of us had to bow to their lead. Facebook’s React team had other ideas and created JSX. JSX horrified developers by mixing HTML and Javascript. Here is an example.

const page = () => {
 return (
    <h1>Title</h1>
 );
}

Facebook justified JSX on the grounds of improved performance and modularity. Luckily for Facebook, it worked, and the rest is history.

Routing

Adding Pages

Before we can add new pages, open the src/App.js and remove the boilerplate code.

import './App.css';
function App() {
 return (
   <div className="App"></div>
 );
}
export default App;

Now let’s create a folder called pages that contains two files Login.js and Tasks.js

Add the following code to Login.js.

const Login = () => {
 return (
   <div>
     <h1>Login</h1>
     <p>Part 1: The Basics</p>
   </div>
 );
}
export default Login;

Next, update Tasks.js

const Tasks = () => {
 return (
   <div>
     <h1>Tasks</h1>
     <p>TBD</p>
   </div>
 );
}
export default Tasks;

With the pages in place, we need to reference them from App.js.

import Login from './pages/Login';
import Tasks from './pages/Tasks';

Navigating Between Pages

In order to provide navigation, we need to install the React Router.

npm install react-router-dom

React Router includes a number of different Routers, but since our needs are pretty basic, we will use the BrowserRouter. This stores a link’s URL in the browser’s address bar and lets you navigate forward and backward to and from the page. In our App.js file, let’s add a reference to BrowserRouter.

import { BrowserRouter } from "react-router-dom";
To use the BrowserRouter, we must also define Routes and Route elements, so we will also need to reference these elements.
import { BrowserRouter, Routes, Route } from "react-router-dom";

Now we will need to add the Browser router to the App function with a child Routes object. We will define the Routes for each page.

function App() {
 return (
   <div className="App">
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Login />} />
         <Route path="/tasks" element={<Tasks />} />
       </Routes>
     </BrowserRouter>


   </div>
 );
}

To navigate between pages, we will need to add a link object to each page. First, let’s update Login.js

import {  Link } from "react-router-dom";
const Login = () => {
 return (
   <div>
     <h1>Login</h1>
     <p>Part 1: The Basics</p>
     <Link to="/tasks">Go to tasks</Link>
   </div>
 );
}
export default Login;

Next, we update Tasks.js.

import {  Link } from "react-router-dom";


const Tasks = () => {
 return (
   <div>
     <h1>Tasks</h1>
     <p>TBD</p>
     <Link to="/">Go to login</Link>
   </div>
 );
}


export default Tasks;

The final step is to launch the App with NPM Start. The following is displayed

Conclusion and What’s Next

In this installment, we introduced you to the theory and practice of creating pages with JSX and how to navigate between them. Next, we removed our apps boilerplate markup and added two pages: Login and Tasks. Then, we installed the React Router and configured it to navigate from one page to the other. In the next installment, we will discuss user interaction and forms.

Rapid React Part 1: Getting Started

2024-11-14T00:00:00+00:00

Let’s face it: if you want to make it in the world of web development, either as a Frontend or full-stack developer, you really need to know React. This series is aimed to get you up and running, building your React-based web apps as rapidly as possible with a series of short and focused articles. In this installment, I will give you a brief introduction to React and how to create your first React project. The sample code for this installment is available on Github.

What is React

React lets you build single-page web applications (SPA). These dynamically load content and display it using a single HTML page. This page acts as a container or master page that presents the individual pages of your web app and lets you navigate between them. The SPA fetches data from the server and interacts with users locally within the browser, thus providing a faster and more responsive user experience than equivalent server-side apps.

React was designed to be a fast and responsive web application development platform. To this end, It is delivered as a compact library that gives you the features you need most. This contrasts with frameworks like Angular, which attempt to provide a complete all-in-one solution. The good news is that React has an extensive ecosystem of add-ins that provide anything your project needs.

Getting Started

Now let’s dive in and create our first project. In line with React’s lightweight design philosophy, there’s no Command Line Interface. So, before we can get started, will need to install Create React App.

Next, we need to create our React app with the create-react-app command. Open a terminal window, and type the following.

npx create-react-app react-task-app

The launches the process and asks you if you want to proceed.

Then, it takes care of the rest.

When it’s work is done, you will see this.

All you need now is to open and run the app. At the command open,

cd rapid-react-tutorial 
npm start

The following is displayed.

A browser window opens and displays this:

Conclusion and What’s Next

Since this series is called Rapid React, this installment kicked things off as fast as possible. After a brief introduction to ReactJS, we created and ran a boilerplate project. In the Next installment, we will start building out a Task Management web app. See you then.

Node JS Express for FrontEnd Developers Part Eight: Documenting the API with Swagger

2024-10-31T00:00:00+00:00

In Part Seven of this series, we investigated two testing approaches. The first approach used Postman as an HTTP client application to send data to individual routes. The second approach used the Jest and Supertest frameworks to write automated test scripts. Now we have a fully functional Task Management API that receives data and is able to query, persist, and modify that data using a database. We also have a complete test suite that tests all available API routes. All we are missing is documentation that demonstrates our API and shows us how to use it. In the final installment in this series, we will use Swagger to document our code.

Swagger is a set of tools for designing, building, and documenting APIs. Swagger automatically generates interactive, user-friendly documentation for APIs, making it easier for developers to understand and test API endpoints. We will use swagger to generate a web page that displays all the Task API routes, organized by type (users, tasks), and lets you run sample code.

As with previous installments, the sample code and files for this installment can be downloaded from GitHub.

Installing Swagger

Installing Swagger involves installing two NPM packages. First, you install Swagger Jsdoc. This package reads Swagger annotated source code and generates a Swagger specification. To install the package, type the following in your IDE’s integrated terminal:

npm i swagger-jsdoc

The second package is Swagger UI Express. This package allows you to serve auto-generated swagger-ui generated API docs from express, based on a swagger.json file. The result is a web page that acts as live documentation for your API hosted from your API server via a route. To install the package, type the following in your IDE’s integrated terminal:

npm i swagger-ui-express

Configuring Swagger

Open index.js. At the top of the file, declare a variable that references Swagger UI Express.

const swaggerUi = require('swagger-ui-express');

Next, declare a variable that references Swagger Jsdoc

const swaggerJsdoc = require('swagger-jsdoc');

Following the variables, declare the Swagger options. These include the openapi version, descriptive information, servers, and referenced API files.

const swaggerOptions = {
 definition: {
   openapi: '3.0.0',
   info: {
     title: 'User API',
     version: '1.0.0',
     description: 'API for managing user tasks',
   },
   servers: [
     {
       url: 'http://localhost:3000',
     },
   ],
 },
 apis: [
   './api/api.js',
   './api/modules/users.js',
   './api/modules/tasks.js'
  ],
};

Next, we declare a variable that consumes the Swagger options.

const swaggerSpec = swaggerJsdoc(swaggerOptions);

Now, we create the Swagger middleware.

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));

The last step is to create a redirect that on opening the default url (http://localhost:3000) redirects the browser to the Swagger Page. Relaunch the API, and the following is displayed.

Annotating Code

Now we have everything in place, we can annotate our code. We will start by opening api/modules/users.js. At the top of the file, following the variable declarations we will add component code. First, we declare a user object component. This object provides a basic example that will be reused in all our annotated routes. Depending on the data structure returned by a route and displayed in the example, the user object will be displayed as an object or as part of an array. Each annotation is formatted using YAML notation.

/**
* @swagger
* components:
*   schemas:
*     User:
*      type: object
*      properties:
*       _id:
*        type: string
*        description: Unique ID of task.
*        example: 6630ab326e723ac1ea6dce7a
*       email:
*        type: string
*        description: The user's email address.
*        example: jg@mail.com
*       name:
*        type: string
*        description: User's first and last names.
*        example: Joe Green
*       password:
*        type: string
*        description: User's password.
*        example: password
*       userName:
*        type: string
*        description: The user's name.
*        example: joegreen
*       userId:
*        type: integer
*        description: The user ID.
*        example: 1
*       isActive:
*        type: boolean
*        description: The user's status.
*        example: true
*       created:
*        type: string
*        description: The date the user was created.  
*        example: 2021-09-23T00:00:00.000Z
*       updated:
*        type: string
*        description: The date the user was last updated.
*        example: 2021-09-23T00:00:00.000Z
*      -ref: '#/components/schemas/User' 
*/

The annotation starts with a list of components and schemas for each component. This is followed by a list of properties. Each property starts with its name, data type (type), description, and an example.

Next we annotate the first route in the file. Following the component object, add the following annotation:

/**
* @swagger
* /api/users:
*   get:
*     summary: Retrieve a list of users.
*     description: Retrieve a list of users from the database.
*     tags:
*      - Users
*     responses:
*       200:
*         description: A list of users.
*         content:
*           application/json:
*             schema:
*               type: array
*               items:
*                 type: object
*                 $ref: '#/components/schemas/User'
*/

The annotation starts with the route. Next, it declares the HTTP command the annotated route uses (GET). Immediately after this, is a summary, description, and tags. The tags section indicates the section in which the route is displayed. The last section describes the response and ends in a reference to the user annotation. If you refresh your browser, the following is displayed.

Our second annotation is for the GET /api/users/:users route. This is almost identical to the previous annotation, but is formatted to handle a parameterized URL. It includes a section that describes the parameter the URL uses.

/**
* **
* @swagger
* /api/users/{user}:
*   get:
*     summary: Returns a single user.
*     description: Retrieve a single user by username.
*     tags:
*     - Users
*     parameters:
*     - in: path
*       name: user
*       required: true
*       description: User name.
*       schema:
*         type: string
*     responses:
*       200:
*         description: A user profile.
*         content:
*          application/json:
*            schema:
*              $ref: '#/components/schemas/User'
*/

Refreshing the browser will display an additional section for this route. The section also includes a text box for entering the user parameter.

Finally we will annotate the POST /api/users/login route. This annotation includes a section that describes the route’s payload (requestBody).

/**
* **
* @swagger
* /api/users/login:
*   post:
*     summary: Login a user.
*     tags:
*      - Authentication
*     description: Login a user by username and password.
*     requestBody:
*       required: true
*       content:
*         application/json:
*           schema:
*             type: object
*             properties:
*               email:
*                 type: string
*                 description: The user's email address.
*                 example: jonnygold@gmail.com
*               password:
*                 type: string
*                 description: The user's password.
*                 example: 1234
*     responses:
*       200:
*         description: A user profile.
*         schema:
*           $ref: '#/components/schemas/User' 
* 
*/

Refreshing the browser displays the annotated route and creates a request body section. It also populates each field in the request body.

After annotating the user routes, we can annotate the task routes. Open the tasks.js, and add a task annotation component.

**
* @swagger
* components:
*  schemas:
*    Task:
*     type: object
*     properties:
*      _id: 
*       type: string
*       description: Unique ID of task.
*       example: 6630ab326e723ac1ea6dce7a
*      description:
*        type: string
*        description: The task description.
*        example: Task description
*      name:
*        type: string
*        description: The task name.
*        example: Task name
*      taskId:
*        type: integer
*        description: The task ID.
*        example: 1
*      user:
*        type: string
*        description: The user name.
*        example: joegreen
*      added:
*        type: string
*        description: The date the task was added. 
*        example: 2021-09-23T00:00:00.000Z
*      updated:
*        type: string
*        description: The date the task was last updated.
*        example: 2021-09-23T00:00:00.000Z
*      status:
*        type: string
*        description: The task status.
*        example: do
*      isActive:
*        type: boolean
*        description: The task is in use.
*        example: true
*
*/

Annotate each route with the following annotations.

/**
*
* @swagger
*  /api/tasks/user/{user}:
*    get:
*     summary: Retrieve a list of tasks for a user.
*     description: Retrieve a list of tasks for a user from the database.
*     tags:
*     - Tasks
*     parameters:
*     - in: path
*       name: user
*       required: true
*       description: The user name
*       schema:
*        type: string
*     responses:
*      200:
*       description: A list of tasks for the user.
*       content:
*        application/json:
*         schema:
*          type: array
*          items:
*           type: object 
*           $ref: '#/components/schemas/Task'
*/


router.get('/user/:user',  (req, res) =>{...});


/**
* @swagger
* /api/tasks/task/{id}:
*   get:
*     summary: Returns a single task.
*     description: Retrieve a single task by task ID.
*     tags:
*     - Tasks
*     parameters:
*     - in: path
*       name: id
*       required: true
*       description: Task ID.
*       schema:
*         type: integer
*     responses:
*       200:
*         description: A task.
*         content:
*          application/json:
*            schema:
*              $ref: '#/components/schemas/Task'
*/
router.get('/task/:taskId',  (req, res) =>{...});


/**
* @swagger
* /api/tasks/add:
*   post:
*     summary: Create a new task.
*     description: Create a new task in the database.
*     tags:
*     - Tasks
*     requestBody:
*       required: true
*       content:
*         application/json:
*           schema:
*            type: object
*            properties:
*              name:
*                type: string
*                description: The task name.
*                example: A New Task
*              description:
*                type: string
*                description: The task description.
*                example: A new task description
*              user:
*                type: string
*                description: The user name.
*                example: jonnygold
*     responses:
*       200:
*         description: A new task.
*         schema:
*           $ref: '#/components/schemas/Task'
*/


router.post('/add', (req, res) => {...});


/**
* @swagger
* /api/tasks/update:
*   post:
*    summary: Update a task.
*    tags:
*    - Tasks
*        properties:
*          name:
*           type: string
*           description: The task name.
*           example: A New Task 
*          description:
*           type: string
*           description: The task description.
*           example: A new task description
*          user:
*           type: string
*           description: The user name. 
*           example: jonnygold
*          taskId:
*            type: integer
*            description: The task ID.
*            example: 1
*          status:
*            type: string 
*            description: The task status.
*            example: do
*    responses:
*        200:
*          description: A task.
*          schema:
*            $ref: '#/components/schemas/Task'
*/
router.post('/update/:taskId', (req, res) => {...});


/**
* @swagger
* /api/tasks/delete:
*  post:
*   summary: Delete a task.
*   description: Delete a task in the database.
*   tags:
*    - Tasks
*   requestBody:
*     required: true
*     content:
*       application/json:
*          schema:
*           type: object
*           properties:
*              taskId:
*                type: integer
*                description: The task ID.
*                example: 1
*   responses:
*    200:
*     description: A task.
*     schema:
*      $ref: '#/components/schemas/Task'
*/
router.post('/delete', (req, res) => {...});

Refresh the browser, and the fully annotated API is displayed.

Conclusion

In this installment, we documented our API with Swagger. Now, we have a full Task API, with a complete test suite, and documentation. This should serve as a good basis for building your own NodeJS and Express Framework APIs. You can also use it as a backend for any frontend projects. I want to thank everyone who has viewed, responded, or commented on each article. I have ideas for future tutorial series and hope to launch at least one in the near future

Node JS Express for FrontEnd Developers Part Seven: Testing the API

2024-10-28T00:00:00+00:00

In Part Six of this series, we integrated the Tasks API with MongoDB. We created and populated tasksDB’s task collection. We updated the mongo.js module to create and update tasks. We integrated tasks.js with MongoDB. This enhanced our existing querying functionality and enabled us to persist, update, and delete tasks from the database. We implemented the delete functionality by declaring a task to be inactive or active. As a result, we can reinstate deleted tasks by not removing them from the database.

In this installment, we will test our code. We will look at two different approaches. The first approach is to use an HTTP client application, such as Postman to test individual routes. The second approach is to write automated tests with a testing framework. As with previous installments, the sample code and files for this installment can be downloaded from GitHub.

API Testing Using an HTTP Client

While Postman has been mentioned in Part Two and Part Six of this series, it’s a very useful tool and is worth spending a few minutes to reacquaint ourselves with it. Postman is an HTTP client application that lets us test REST API endpoints, such as our Task API routes. Postman lets you send everything from simple HTTP GET and DELETE requests to more complex requests that include a payload.

If you haven’t done so already, you can download Postman from this link. Once you have downloaded Postman, you can import the latest version of the node-task-api collection from Github. This includes both the original (legacy) HTTP routes that use POST, PUT, and DELETE, and the newer routes from Parts Five and Six that use MongoDB and HTTP POST.

Launch Postman, and click the Import button. Note that the latest version of the collection includes an updated Tasks folder.

Then, use the dialog to import the collection file.

After you have imported the collection, open any folder, select a route and press Send. A response is displayed in the Response window.

Creating Automated Tests

HTTP client applications are great development tools but generally we use them to test individual routes one at a time. NodeJS, like many development environments, supports frameworks that let us automate application testing by writing code (scripts). This enables us to comprehensively test our code under a broad range of circumstances and using different inputs. We will now write automated test scripts that will enable us to test all of our existing routes.

Installing Testing Frameworks

To test our Task Management API, we will use a popular Javascript testing framework called Jest in conjunction with another called Supertest. How and why we need these frameworks will be explained later. To install Jest, open the project folder and type:

npm install \--save-dev jest

Next, we install Supertest

npm install \--save-dev supertest

The last step is to open package.json and add and/or update the scripts as follows.

"scripts": {
   "test": "jest"
 },

This will enable us to run our tests by typing npm test.

Modifying our Application

Before we write our tests we need to make some minor modifications to our code. First open, index.js. Remove this code from the file.

app.listen(3000, () => {
 console.log('Server is running on port 3000');
});

At the bottom of the file, enable the export functionality with this code. This will enable our test code to access the API routes.

module.exports = app;

Now, in this folder, make a new file called index-server.js. Paste the following code into the file.

const app = require('./index');

app.listen(3000, () => {
 console.log('Server is running on port 3000');
});

From now on, you will launch the API by typing node index-server.js. This will enable us to run the API and tests in parallel. Otherwise, when we wanted to run tests we would need to stop the API and vice versa. In addition, by splitting index.js functionality across two files, we can also split our test code across multiple files.

Writing Tests

In the api folder, add a new folder called test. In the folder, create a file called api.test.js. The .test indicates to Jest that this file contains runnable tests.

Open api.test.js, and add the following. Where request references the supertest framework, and app references the app object declared in index.js. Note that we do not have to reference Jest as supertest takes care of that for us.

const request = require("supertest");
const app = require("../../index");

Let’s start by creating a Jest specification. The specification is a block that describes what the test will do. Here, we want to check that the GET /api/users endpoint returns a list of users.

describe("GET /api/users", () => {});

The specification contains one or more tests that test specific functionality. Individual tests are declared with the it keyword. This has a description followed by a testing function. Since our test will call an asynchronous route, it is preceded by the async keyword.

describe("GET /api/users", () => {
   it("It returns a list of users", async () => {});
});

Now we declare a response object to reference a supertest request method. Here we use the get method to access the route. Since each route is called asynchronously, it must be preceded by the await keyword.

describe("GET /api/users", () => {
   it("It returns a list of users", async () => {
     const response = await request(app).get("/api/users");
   });
 });

When a response is returned we can evaluate the expected result as shown below. Here, the test evaluates that the response returns the HTTP 200 status code (OK). The test also checks that the response body exists (toBeTruthy). Lastly, it checks that the list of users is not empty.

describe("GET /api/users", () => {
   it("It returns a list of users", async () => {
     const response = await request(app).get("/api/users");
     expect(response.statusCode).toBe(200);
     expect(response.body).toBeTruthy();
     expect(response.body.length).toBeGreaterThan(0);
   });
});

In your IDE’s integrated terminal, run the test by typing

npm test

You should see that our test ran and passed:

Having written one test that tests one user API function. Let’s test the rest. Before we do, let’s group our existing user tests in a single block as follows:

describe("User tests", () => {
 describe("GET /api/users", () => {
   it("It returns a list of users", async () => {
     const response = await request(app).get("/api/users");
     expect(response.statusCode).toBe(200);
     expect(response.body).toBeTruthy();
     expect(response.body.length).toBeGreaterThan(0);
   });
  });
});

Now let’s add a test that evaluates the GET /api/users/:user endpoint by adding the following:

describe("GET /api/users/jonnygold", () => {
   it("It returns a user", async () => {
     const response = await request(app).get("/api/users/jonnygold");
     expect(response.statusCode).toBe(200);
     expect(response.body).toBeTruthy();
   });
   it("It returns a user with the expected username", async () => {
     const response = await request(app).get("/api/users/jonnygold");
     expect(response.body.userName).toBe("jonnygold");
   });
   it("It returns a user with the expected email", async () => {
     const response = await request(app).get("/api/users/jonnygold");
     expect(response.body.email).toBe("jonnygold@gmail.com");
   });
 });
});

Here there are three individual tests. The first test performs a sanity check by evaluating basic functionality. The second and third attributes evaluate the userName and email field values included in the response object. When you run the test, it returns the following response that is organized according to our description blocks.

Let’s complete the user tests, by testing POST /api/users/login. Here, we will create two tests. The first test evaluates that the api authenticates a user that login with valid credentials. The second test handles invalid credentials. Each test uses the post method to send a HTTP post command and a send method to handle the payload.

describe("POST /api/users/login", () => {
   it("It authenticates a user when supplied with the correct credentials", async () => {
     const response = await request(app).post("/api/users/login").send({
       userName: "jonnygold",
       password: "1234",
     });
     expect(response.statusCode).toBe(200);
     expect(response.body).toBeTruthy();
     expect(response.body.isAuthenticated).toBe(true);
     expect(response.body.status).toBe("User found");
   });

   it("It does not authenticate a user when supplied with the incorrect credentials", async () => {
     const response = await request(app).post("/api/users/login").send({
       userName: "jonnygold",
       password: "12345",
     });
     expect(response.statusCode).toBe(200);
     expect(response.body).toBeTruthy();
     expect(response.body.isAuthenticated).toBe(false);
     expect(response.body.status).toBe("User not found");
   });
 });

To complete our test set, let’s add a block of task route tests. As these use similar logic to the user tests, we don’t need to describe what they do or how they work. Running the tests produces the following result.

Conclusion and Next Steps

In this installment, we will investigate two testing approaches. The first approach used Postman as an HTTP client application to send data to individual routes. The second approach used the Jest and Supertest frameworks to write automated test scripts. Now we have a fully functional Task Management API that receives data and is able to query, persist, and modify that data using a database. We also have a complete test suite that tests all available API routes. All we are missing is documentation that demonstrates our API and shows us how to use it. This will be covered in the next, and final part of this series where we will use Swagger to document our code.

Node JS Express for FrontEnd Developers Part Six: Task API Integration

2024-10-26T00:00:00+00:00

In Part Five of this series, we integrated the User API with MongoDB. We started by installing MongoDB, creating a database, and populating the users collection. Next, we created a Mongo module that enabled us to query a single item or items from MongoDB. We concluded this installment by updating the Users module to take advantage of MongoDB. In this installment, we will add and populate a new taskDB collection named tasks. Next, we will update the Mongo module with functions that create and update a document in a collection. Finally, we will integrate the existing and new MongoDB functionality with the existing Task API routes. As with previous installments, the sample code and files for this installment can be downloaded from GitHub.

Creating and Populating the Tasks Collection

In the Connections list, open localhost:27017. Locate tasksDB and click the Plus icon.

With the Create Collection dialog, create the tasks collection.

From this link, download the tasksDB.tasks.json file. After downloading the files, open a collection and click Add Data > Import JSON or CSV file.

Then, in the File browser select the file.

Querying MongoDB Tasks

After we created and populated the tasks collection, we can proceed to update the tasks module’s query function. First, in the top section of the file, let’s add a reference to the MongoAPI module.

const express = require('express');
const router = express.Router();
const mongoAPI = require('./mongo');

First, let’s update the GET /api/tasks/user/:user route. This route returns all the active tasks assigned to a user. To update the route, locate the /user/:user route, and replace the existing handler function code with the following.

router.get('/user/:user',  (req, res) =>{
  const getData = new Promise((resolve) => {
     mongoAPI.getItems(
       { db: 'tasksDB', collection: 'tasks', query: { user: req.params.user, isActive:true } }
     ).then((data, err) => resolve(data))
   }).then((data) => {
     return res.json(data)


   })
   return getData.then(data => data).catch((err) => console.log(err))
});

The code is almost identical to the GET /api/users/:user route we created in Part Four with minor details in the query. The first change is that instead of querying the users collection, the function queries the tasks collection. In addition, the query matches the values of two fields: user and isActive. The user field indicates the user to which the task was assigned. The isActive field is a boolean value (true or false) that indicates if the task is currently active. The significance of isActive will be explained later.

Now, let’s update the GET /api/tasks/task/:taskId route. This route returns a single task identified by its taskId. Locate the route, and replace the existing code with the following.

router.get('/task/:taskId',  (req, res) =>{
  const getData = new Promise((resolve) => {
     mongoAPI.getItem(
       { db: 'tasksDB', collection: 'tasks', query: { taskId:parseInt(req.params.taskId)} }
     ).then((data, err) => resolve(data))
   }).then((data) => {
     return res.json(data)


   })
   return getData.then(data => data).catch((err) => console.log(err))
});

Again the new code looks familiar but has one minor difference. As with the original code, we have to convert the route’s taskId parameter from a string and the taskId is an integer. In this case, we have to convert the parameter’s data type because MongoDB stores the taskId as an integer. As with the previous version of the function, we use Javascript’s parseInt command to convert it into an integer.

Managing Tasks

In this section, we will update the Mongo module with functions that create and update a document in a collection. To do this, we will first update the mongo.js module and then we will update tasks.js.

Updating the MongoAPI Module

Open api/modules/mongo.js. Following the getItems function, add a comma. Copy and paste the getItem function. Rename the function to writeItem. As the name suggests, the function will add a new document to a collection. The function uses the Mongo API’s writeOne method to create a new document in a collection. The method receives the data with which to create the object. Remove the middle section of the function and replace it with the following.

const resp = await data.insertOne(args.data).then(res => {
  return res
}).catch(error => {
   return {status:error}
});

Now we will add a function that updates an existing document in a collection. The function uses the updateOne method to update a single document in a collection. The method receives a query and two additional parameters. The $set parameter receives the data with which to update the object. The upsert parameter, if set to true, creates a new object if the target object does not exist. Following writeItem, add a comma. Copy and paste the getItem function. Remove the middle section of the function and replace it with the following.

const resp = await data.updateOne(
  args.query, { $set: args.data }, { upsert: true }    
).then(res => {
  return res
}).catch(error => {
  return {status:error}
});

Updating the Task API Routes

With our two new Mongo API functions in place, we will now update the three task management routes in /api/modules/tasks. Note that to simplify our application code, all the new functions use the HTTP POST command.

First, locate the POST /add route and replace the existing code with the following:

router.post('/add', (req, res) => {
  let tasks = null
     let taskId = null
     const getData = new Promise((resolve) => {
       mongoAPI.getItems({ db: 'tasksDB', collection: 'tasks', query: {} }
       ).then((data, err) => resolve(data))


     }).then((data) => {
       tasks = data
       taskId = tasks.length + 1
       return mongoAPI.writeItem({
         db: 'tasksDB',
         collection: 'tasks',
         data: {
           ...req.body,
           taskId: taskId,
           added: new Date(),
           updated: new Date(),
           isActive: true


         }
       })
     }).then((data) => {
       return mongoAPI.getItem({db:'tasksDB',collection:'tasks',query:{"taskId":taskId}})
     }).then((data) => {
        return res.json(data)
     })
     return getData.then(data => data).catch((err) => {
       console.log(err)
     })
 });

The updated function accepts the same payload as the previous version of the function. In order to generate a unique taskId, the first section of the function’s promise queries the tasks collection to determine the current size of the collection. The second section creates a new taskId by incrementing the current number of tasks by one. In the next section, the Mongo API’s writeItem method is used to add a new document to the tasks collection. The method’s payload includes the target database, collection, and data. The data object includes the received payload, a taskId, two date fields (added and updated), and an isActive flag. The third section retrieves the new tasks from the collection by its taskId. This last section returns the results of the query as a JSON object.

Next, locate the PUT /update/:taskId route and replace it with the following code.

router.post('/update/:taskId', (req, res) => {
  const getData = new Promise((resolve) => {
     mongoAPI.updateItem({ 
       db: 'tasksDB', 
       collection: 'tasks', 
       query: { taskId: req.params.taskId }, 
       data: req.body 
     }).then((data, err) => resolve(data))
   }).then((data) => {
    return mongoAPI.getItem({
     db:'tasksDB',collection: 'tasks',query:{ taskId:req.params.taskId }
    })
   }).then((data) => {
     return res.json(data)
   })
   return getData.then(data => data).catch((err) => console.log(err))
});

Here we don’t need to generate a taskId, so we can start with the relevant Mongo API (updateItem) method. In order to locate the target task document, the method includes a query. In this case, we locate the task using the route’s taskId parameter. The method data receives the route’s payload and sends it to the database. The next section queries the tasks collection and returns the updated task document. The final section returns the query as a JSON object.

The last route to update is DELETE /task/:taskID. Locate the route and replace it with the following code.

router.post('/delete', (req, res) => {
 const getData = new Promise((resolve) => {
   mongoAPI.updateItem({
       db: 'tasksDB',
       collection: 'tasks',
       query: { "taskId": req.body.taskId },
       data: {
         isActive: false,
         updated: new Date()
      }
 }).then((data, err) => resolve(data))
 }).then((data) => {
   console.log(data.result)
   return mongoAPI.getItem(
     { db: 'tasksDB', collection: 'tasks', query: { "taskId": parseInt(req.body.taskId)} }
   )
 }).then((data) => {
   return res.json(data)
 })
 return getData.then(data => data).catch((err) => {
   console.log(err)
 })
});

Note that the code doesn’t delete the task from the database’s tasks collection. This is because there may be cases that you want to reinstate a task, but do not want to show a shorter tasks list. It also simplifies our MongoAPI module because we no longer need to implement this function nationality. Now we can use the updateItem method instead. So, to delete a task we mark the task as inactive (isActive:false). This explains the existence of the isActive flag. Another thing to be aware of is that this route uses a payload instead of a parameter. This means that when you want to use this route, you must uses the following path and payload.

POST /delete

{
    "taskId":4
}

Conclusion and Next Steps

In this installment, we created and populated tasksDB’s task collection. We updated the mongo.js module to create and update tasks. We integrated tasks.js with MongoDB. This enhanced our existing querying functionality and enabled us to persist, update, and delete tasks from the database. We implemented the delete functionality by declaring a task to be inactive or active. As a result, we can reinstate deleted tasks by not removing them from the database. In the next installment, we will look at how we can test our code. On the subject of testing, I have updated the Postman collection to include all API routes and support the latest functionality. You can download it from GitHub with this link.

Node JS Express for FrontEnd Developers Part Five: Managing Data with MongoDB

2024-10-20T00:00:00+00:00

In Part Four of this series, we created a fully functional task management API. We started by using routes to modularize our application code. Next, we explored how to create routes with default and optional parameters. In addition, we implemented task management functionality using HTTP POST, PUT, and DELETE commands. Despite our API’s increased sophistication, it lacked the ability to save and update data you created or modified. In this installment, we will remedy this problem by adding database support. As with previous installments, the sample code and files for this installment can be downloaded from GitHub.

Getting Started with MongoDB

The term database is an umbrella term for a broad range of technologies. Each data management technology enables you to persist data to a storage medium and let you retrieve and modify it. A discussion of each competing database system and their relative merits is beyond the scope of this article. For the sake of simplicity, our task management API will use a document database. Broadly speaking, document databases store data in a hierarchical data structure, or document. Each document is similar to the Javascript data files we have used up to this point. In our case, we will be using MongoDB. MongoDB stores documents in a proprietary format called Binary Javascript Object Notation (BSON), which is closely related to JSON. MongoDB, like most document databases, lets you organize multiple, related documents into collections.

Installing MongoDB

In this tutorial we will be using MongoDB Community Edition. This is a free version of MongoDB and runs on nearly every available platform. For detailed instructions on how to install MongoDB locally, click this link.

Installing Compass

After you install MongoDB, you should also install MongoDB Compass. MongoDB compass is a graphical frontend for managing MongoDB databases, collections, and documents. When you launch Compass, the home screen is displayed.

Creating the Tasks Database

In the Connections list, open localhost:27017. This is the local database server installed on your PC. Under the parent node, you will see the admin, config, and local databases. Each of these databases is used for storing internal database information.

To store tasks, we will create a database called tasksDB. Click localhost:20717 the following is displayed.

In the Create Database dialog, create a database called tasksDB with a collection called users.

Populating Collections

Once we have created tasksDB and its users and tasks collections, all we need to do is populate each collection with data. To simplify the process, I have created a JSON file that you can use. After downloading the file, open a collection and click Add Data > Import JSON or CSV file.

Then, select the file.

Integrating MongoDB

Before we can take advantage of MongoDB, we first need to install a driver. To install the MongoDB driver, open the project terminal and type:

npm i mongodb

Note that the code in this tutorial should work with the latest version of the MongoDB driver, but if you experience problems, I recommend installing version 3.6.0. To install this version, open the project terminal and type:

npm i mongodb@3.6.0

Creating the Mongo Module

After installing the MongoDB driver, we will create a module that lets us interact with MongoDB. In api/modules, create a file called mongo.js. Open the file and declare a variable that references the MongoDB client.

const { MongoClient } = require("mongodb");

Next, declare a uri variable which points to the local database.

const uri = "mongodb://127.0.0.1:27017";

Now, we will declare the mongoAPI object.

const mongoAPI = {};

At the bottom of the file, add the module export.

module.exports = mongoAPI;

Building the MongoAPI

The mongoAPI object lets the user and tasks modules query, create, and update objects. Each API action will be implemented by a single function. All the functions share the same basic structure, so once we have created one we can create the others quickly. The API is implemented using async and await calls. Async and await simplifies the writing of asynchronous code. The async keyword declares that the function that returns data at some point in the future. Each function will receive an args object. This object includes arguments that tell the function the target database, collection, query.

Querying an Item

Our first API function will let us create a query that accepts arguments and returns a single object. In the mongoAPI object, declare a variable called client. This variable will connect to the database specified in the URI variable. Next, we use the await keyword to create the connection.

const mongoAPI = {
 async getItem(args) {
  const client = new MongoClient(uri,{});
  await client.connect();
 }
};

Now we can connect to a database and collection.

const database = client.db(args.db);  
const data = database.collection(args.collection);

Next, we declare the response variable and assign it the results of our query. In this case, we are looking for a single item in a collection. We can locate a single query with the MongoAPI’s findOne method. This method reads the arg’s object query argument. We will explain query syntax later in this article. If the query is successful, a response (res) is returned. If any error occurs, it is caught and the error message is displayed in the console.

 const resp = await data.findOne(args.query).then(res => {
   return res
 }).catch(error => {
   console.log(error)
   return {status:error}
 });

Once the result of the query is received, the database connection is closed and the result is returned to the calling function.

await client.close()
return resp

Querying Items

Our second API function will let us create a query that accepts arguments and returns a list of objects. Following getItems, add a comma. Copy and paste the previous function. Rename the function from getItem to getItems. Remove the middle section of the function as shown below.

}, 
async getItems(args) {
   const client = new MongoClient(uri, {  });
   await client.connect();
   const database = client.db(args.db);
   const data = database.collection(args.collection);
   
   await client.close()
   return resp

To return a list of items from a collection we use the MongoAPI’s find method. The query accepts a query and a list of options. In this case, the options set the default sort order. The list is then converted to an array. The following code replaces the code you deleted from the middle section of the function.

const resp = await data.find(args.query,{ sort: {  } }).toArray().then(res => {
   return res
 }).catch(error => {
    return {status:error}
});

Updating the User Module

Having created the MongoDB module we can now update our user and tasks routes to use it. Open api/modules/users.js. Locate the first function:

router.get('/', (req, res) => {
 res.json(users);
});
Replace

Replace the function with the following code.

router.get('/', (req, res) =>{
  const getData = new Promise((resolve) => {
     mongoAPI.getItems({ db: 'tasksDB', collection: 'users', query: {  } }
  ).then((data, err) => resolve(data))
 }).then((data) => {
   return res.json(data)
 })
 return getData.then(data => data).catch((err) => console.log(err))
});

Here we have added a promise. A promise is a means of writing asynchronous code. The promise lets us break our function down into individual sections. Each section must be performed in sequence. The first section sends a request to the mongoAPI module’s getItems function. The function includes arguments that specify the database to query, and a query that returns all the users in the collection.

Now, let’s update the GET /:user route. Replace the existing route with the following code:

router.get('/:user', (req, res)=> {
  const getData = new Promise((resolve) => {
     mongoAPI.getItem(
       { db: 'tasksDB', collection: 'users', query: { "userName": req.params.user } }
     ).then((data, err) => resolve(data))
   }).then((data) => {
     return res.json(data)


   })
   return getData.then(data => data).catch((err) => console.log(err))
});

Here we have replaced getItems with getItem. We have also added a query that retrieves user data according to the supplied user name.

Finally, let’s update the login. This is similar to the previous route with two small changes. First, the query uses the payload sent via req.body. Second, a new section has been added in the middle that evaluates the result of the query. If the query returns data, a status message and isAuthenticated flag (true) is appended to the data. Otherwise, if no data is returned only a status message and isAuthenticated flag (false) is returned.

router.post('/login', (req, res) =>{
 const getData = new Promise((resolve) => {
   console.log(req.body)
   mongoAPI.getItem(
     { db: 'tasksDB', collection: 'users', query: req.body }
   ).then((data, err) => resolve(data))
 }).then((data) => {
   if(data !== null) {
     data = {
       ...data,
       status: "User found",
       isAuthenticated: true
     }
   }
   else{
     data = {
       status: "User not found",
       isAuthenticated: false
     }
   }
   return res.json(data)
 })
 return getData.then(data => data).catch((err) => console.log(err))
});

Conclusion and Next Steps

In this installment, we integrated the User API with MongoDB. We started by installing MongoDB, creating a database, and populating the users collection. Next, we created a Mongo module that enabled us to query a single item or items from MongoDB. We concluded this installment by updating the Users module to take advantage of MongoDB. In the next installment, we will continue by updating the Tasks module.

Node JS Express for FrontEnd Developers Part Four: Understanding Routing:

2024-10-15T00:00:00+00:00

In Part Three of this series, we explored how to use the Express Frameworks routing capabilities and middleware. We focused on how we could use routing to modularize our code, and how this would make it easier to manage and extend our task management API. In this installment, we will build on this knowledge to further extend the API and add a tasks module. This module will enable us to query and manage tasks. We will also use this opportunity to broaden our knowledge of Javascript and many of its powerful features and methods. As with previous installments, the sample code and files for this installment can be downloaded from GitHub.

Creating the Tasks List

Before we can create a tasks module, we need to create a list of tasks. In the api/data folder, create a new file called tasks.js.

Open the file, and create a list of tasks in the following format. Note that you can also download the tasks.js file from this installments’s GitHub repo.

const tasks= [
{
  id: "6630ab326e723ac1ea6dce7a",
  description: "My first task",
  name: "A task",
  taskId: 1,
  user: "jonnygold",
  added: "2024-05-01T22:00:00.000Z",
  updated: "2024-05-01T14:16:01.119Z",
  status: "do",
  isActive: true,
  isEdit: false
},
…
]


module.exports = tasks;

Adding the Task Module

In the api/modules folder create a file called tasks.js. Open the file and add the following:

const express = require('express');
const router = express.Router();
const tasks = require('../data/tasks');

module.exports = router;

In order to create task related routes, we need to add a reference to the tasks modules in api/api.js.

router.use('/users', require('./modules/users'));
router.use('/tasks', require('./modules/tasks'));

Retrieving Tasks

Let’s start by adding a route that returns a list of all tasks.

router.get('/', (req, res) =>{
  res.json(tasks);
})

You can access this route from GET /api/tasks. For example, if you open http://localhost:3000/api/tasks in a browser, you will see the following:

By default, the list is returned in the same order as the tasks in api/data/tasks.js. Let’s assume that the more recently a task was added, the higher its taskId. So, by default tasks are sorted in ascending order. Let’s add a parameter to the route that sorts the list by task ID in ascending (asc) or descending (desc) order. We can sort the tasks list with Javascript’s sort method.

router.get('/:dir', (req, res) =>{
 if(req.params.dir === 'asc'){
   res.json(tasks.sort((a, b) => (a.taskId > b.taskId) ? 1 : -1));
 }
 else if(req.params.dir === 'desc'){
   res.json(tasks.sort((a, b) => (a.taskId < b.taskId) ? 1 : -1));
 }
})

Let’s assume that by default we can omit the direction parameter, and tasks are sorted in ascending order. We can do this by appending a question mark to any parameter. We evaluate the code the req object’s params attribute must also be followed by a question mark before the parameter, as shown below.

router.get('/:dir?', (req, res) =>{
 if(req.params?.dir===undefined ||req.params.dir === 'asc'){
   res.json(tasks.sort((a, b) => (a.taskId > b.taskId) ? 1 : -1));
 }
 else if(req.params.dir === 'desc'){
   res.json(tasks.sort((a, b) => (a.taskId < b.taskId) ? 1 : -1));
 }
})

Querying Tasks

As things stand, our API only lets one authenticated user access the application. Once that user is authenticated they will only be able to see tasks either they created or that they were assigned. This means that we need to create a route that can queries tasks assigned to that user, such as:

GET /api/tasks/user/:user

Where :user is the user name assigned to a user’s tasks. Here is the route and handler function to perform the query. The function uses Javascript’s filter method to return a list that matches the parameter.

router.get('/user/:user', (req, res) =>{
 res.json(tasks.filter(task => task.user === req.params.user));
})

Next, let’s add a route that enables us to return a single task. In theory, we could create a copy of the previous route and make minor alterations. So, to implement:

GET /api/tasks/task/:taskId

All we need to do is this:

router.get('/task/:taskId, (req, res) =>{
 res.json(tasks.filter(task => task.taskId === req.params.taskId));
})

Even though this code returns a single task, it returns it within an area. There are a number of ways to extract an object from an array. If we replace the filter method with the find method, we don’t have to bother. This is because the find method only returns a single object.

router.get('/task/:taskId', (req, res) =>{
 res.json(tasks.find(task => task.taskId === req.params.taskId));
})

In theory, our code should work, unfortunately it doesn’t. While it doesn’t fail, it doesn’t return any data. This is because by default the route’s taskId parameter is a string and the taskId is an integer. To ensure that the route’s handler function can match the parameter to the taskId, we use Javascript’s parseInt command to convert it into an integer.

router.get('/task/:taskId', (req, res) =>{
 res.json(tasks.find(task => task.taskId === parseInt(req.params.taskId)));
})

Managing Tasks

We will now add three routes for managing tasks.

Adding Tasks

Let’s start by enabling a user to add a task. We will implement this route using an HTTP post command to:

POST /api/tasks/add

That sends the following payload:

{
 "description": "My task",
 "name": "task",
 "user": "jonnygold",
 "added": "2024-05-01T22:00:00.000Z",
 "updated": "2024-05-01T14:16:01.119Z",
 "status": "done",
 "isActive": true,
 "isEdit": false
}

We can implement the route using the router.post middleware. The route’s handler function receives the payload and appends it to the tasks list. The function returns an object that returns an object that includes the payload and appends a status message. The three dots before req.body are called a spread operator. This enables you to create a new object from an existing one and add additional attributes.

router.post('/add', (req, res) =>{
 tasks.push(req.body);
 res.json({
   ...req.body,
   message: 'Task added successfully'});
})

Updating Tasks

Like the queries discussed earlier, we could create the update route by copying the add route and making the necessary adjustments. While we could implement the update route using the HTTP POST command, let’s instead use HTTP PUT command to PUT /api/tasks/update:/taskID. Like the add route, update also sends a payload that includes the changes they want to make to the task. HTTP PUT is frequently used for updating existing data, and helps API users identify the route’s intended purpose.

router.put('/update/:taskId', (req, res) =>{
 tasks = tasks.map(task => {
   if(task.taskId === parseInt(req.params.taskId)){
     task = req.body;
   }
 });
 res.json({
   ...req.body,
   message: 'Task updated successfully'});
})

In order to update the task, the handler function must loop through all the tasks until it finds the correct target. To locate and update the task, the code loops through all the tasks using Javascript’s .map method and replaces task data with the payload. It also returns the payload with a status message.

Deleting Tasks

Since the delete task route can be implemented within a route’s path, we could use HTTP GET to create it, but we will use HTTP DELETE. This is for the same reason why we previously.

To delete a task, the user sends a HTTP Delete command to DELETE /api/tasks/:taskId.

router.delete('/delete/:taskId', (req, res) =>{
 tasks = tasks.filter(task => task.taskId !== parseInt(req.params.taskId))
 res.json(tasks);
})

The code removes the tasks using Javascript’s .filter method and returns the updated tasks list.

Conclusion and Next Steps

In this installment, we created a task API and explored how to create routes with default and optional parameters. In addition, we implemented task management functionality using HTTP POST, PUT, and DELETE commands. In the next installment, we take things a step further and look at how we can use a database to persist and modify data.

Node JS Express for FrontEnd Developers Part Three: Understanding Routing

2024-10-04T00:00:00+00:00

In Part Two, we had created endpoints to query and authenticate users. Using the Express Framework, you create endpoints by defining routes. In this installment, we dive deeper into routes and routing. We will also look at how we can take advantage of routing to modularize our web applications to make them easier to maintain and extend.As with previous installments, the sample code and files for this installment can be downloaded from GitHub.

What is Routing

The Express Framework uses routing to manage and direct requests. Each route represents a path (URL) that sends a request to a handler function. The handler is a callback or middleware code that processes the request and returns a response. These are the main routes and handler functions in our application. They run at the application (app) or global level and are located in a single file.

app.get('/api/users', (req, res) => {  
 res.json(users);  
});

app.get('/api/users/:user', (req, res) => {  
 res.json(users.find(user => user.userName === req.params.user));   
});

app.post('/api/users/login', (req, res) => {  
 if(users.find(user => user.email === req.body.email && user.password === req.body.password)){  
  res.json({ ...users.find(user =>   
   user.email === req.body.email && user.password === req.body.password),   
   message: 'Login successful', isAuthenticated: true});  
 }  
 else{  
   res.json({message: 'Login failed', isAuthenticated: false});  
 }  
});

All these routes provide user related functionality. As we are building a task management API, our next step should be to add task related functionality. The problem is that as we add more functionality and capabilities the number of endpoints will increase in size and complexity. Over time the more code we add, the harder our application becomes to manage and maintain. Before that happens, let’s look at how to structure and organize our code to avoid longer-term management and maintenance issues.

Modularizing our Application

Before we add any new functionality, we will modularize our application into smaller units organized around functionality. Let’s start by adding a folder called api to our project. This folder will contain code and related data files. Move the existing data folder into the API folder. Create a subfolder called modules. Now we have reorganized our application code we can use the Express Framework’s Router middleware to move related routes into specific files. In the API folder, create a file called api.js. This file defines the top level route. From now on, all route URLs will start with /api/ followed by the route type /api/user.

Open api.js and declare a variable that references Express. Then declare a variable that instantiates the Express router middleware

const express = require('express'); 
const router = express.Router();

Next, we create the /api/users route that includes a reference to the users.js module.

router.use('/users', require('./modules/users'));

The final step is to add a line that exports the code and makes it available to index.js.

module.exports = router;

Creating Modules and Routes

Once we have our top level route in place, we can create our first module. In the api/modules folder, create user.js. Add the following code to the file.

const express = require('express');
const router = express.Router();
const users = require('../data/users');

module.exports = router;

In the middle of the file, add the User API routes. The new user routes are almost identical to our original routes in index.js, with two key differences. The first difference is that they are defined using the router and not the application middleware. The second is that they are much shorter than routes defined at the application level.

router.get('/', (req, res) => {  
 res.json(users);  
});

router.get('/:user', (req, res) => {  
 res.json(users.find(user => user.userName === req.params.user));   
});

router.post('/login', (req, res) => {  
 if(users.find(user => user.email === req.body.email &&   
    user.password ===req.body.password)){res.json({  
       ...users.find(user => user.email === req.body.email &&   
       user.password === req.body.password),  
       message: 'Login successful',  
       isAuthenticated: true  
     }  
   );  
 }  
 else{  
   res.json({message: 'Login failed', isAuthenticated: false});  
 }  
});

Code Cleaning Up

Now we can clean up index.js. In index.js, remove the /api/users, /api/users/:user, and /api/users/login routes. Update the redirect to point to /api. Then, add a reference to /api.

app.get('/', (req, res) => {  
 res.redirect('/api');  
});

app.use('/api', api);

The only thing left to do is add a redirect to api/api.js that opens the default route (the list of users), when we launch the API.

app.get('/', (req, res) => {  
 res.redirect('/api/users');  
});

Conclusion and Next Steps

In this installment, we reorganized our code and created a modular API. This will make it easier to manage and extend our task management API. By using the Express Framework’s router middleware, we built highly modular code. As a result, we were able to create simple and compact paths instead of creating long URLs for each endpoint. In part four, we will create the Tasks API using more advanced routing functionality.

Node JS Express for FrontEnd Developers Part Two: Building an API

2024-09-10T00:00:00+00:00

In the first part of this series, we took our first steps to build a REST API with Node.js and Express. We installed Node and configured our development environment. Next, we created an index.js file and created the foundations of our API. The last step was to create a route that displays a message when calling the API.

const express = require('express');  
const app = express();

app.get('/', (req, res) => {  
 res.send('Welcome to the Task API');  
});

app.listen(3000, () => {  
 console.log('Server is running on port 3000');  
})

In this installment, we will build on this foundation. Specifically, we will add middleware to our application, add parameterized URL endpoints, return JSON responses, and work with HTTP post commands.

The sample code and files for this installment can be downloaded from GitHub.

Adding Middleware

In Part One, we mentioned that each app method has a path and two parameters req(request) and res(response). Node.js middleware provides a way to intercept req and res objects and modify them. We define middleware with the app.use() method. For example, we can use the following to show us the HTTP method and URL with the following middleware:

const express = require('express');  
const app = express();  
app.use((req, res, next) => {  
 console.log(Method:${req.method}, Path:${req.url});  
 next();  
});

When we refresh the default page, the following is displayed

Server is running on port 3000

GET /

Building a User API

A REST API is a collection of endpoints (URLs) that return or modify data from a server. Currently, our app only provides a default URL. One of the first things we might want a task management application to do is to provide a list of application users. For example, this endpoint returns a list of all users:

/api/users

The endpoint returns the list as a JSON array. To provide support for JSON, we need to install the bodyParser middleware. This will enable our application to read JSON payloads and return JSON responses.

npm install --save body-parser

Next, we add a reference and declare the middleware.

const app = express();

const bodyParser = require('body-parser');  
app.use(bodyParser.json());

Referencing Data Files

Our User API needs a list of users to query and authenticate. At this stage, all data will be retrieved from files. Create a folder called data. In the folder, create a file called users.js. You can download users.js from the project’s GitHub repo.

Declare a users variable that references users.js.

const users = require('./data/users');

Creating an Endpoint

An endpoint is a URL that lets us access API commands. As previously mentioned, our first endpoint will return a list of all users as a JSON object. JavaScript Object Notation or JSON, is a simple standard data format. The body-parser middleware we installed provides the necessary support to process JSON data and return JSON responses. We create the /api/users endpoint by adding this code.

app.get('/api/users', (req, res) => {  
 res.json(users);  
});

The res object’s (responses) json method consumes our list of users and returns an array of JSON objects.

Redirecting Endpoints

When we open the API’s default route, we see a welcome message message. Instead, the user will be redirected to /api/users.

app.get('/', (req, res) => {  
 res.send('Welcome to the Task API');  
});

We can do this by replacing the res object’s send method with a redirect method.

app.get('/', (req, res) => {  
 res.redirect('/api/users');  
});

When you open the browser to http://localhost:3000, you are redirected to: **

Querying Data with Parameterized Endpoints

Our first endpoint returned all users, but what if we only need a specific user’s profile? We can extend our existing endpoint with a username parameter.

/api/users/jonnygold

Parameters are indicated by adding /: followed by a name.

/api/users/:user

The parameter is accessed from the request (req) object’s params attribute. In this case, we access the user parameter with req.params.user. We implement the endpoint with the following code. The code locates the profile that matches the user name.

app.get('/api/users/:user', (req, res) => {  
 res.json(users.find(user => user.userName === req.params.user));   
});

Sending and Processing Request Payloads

Parameterized URLs are useful for a wide range of uses, but they have a number of limitations. For a start, as the number of parameters increases they become longer and more complex. If you want to add special characters, such as punctuation or control characters, they must be prefaced with escape characters. From a privacy and security perspective, they are problematic. This is because all the parameters are readable within the URL and are easy for any entity to read and capture. In these cases, it is best to send the request data as an object (payload).

An ideal use for sending request payloads is to create a login endpoint. For example, to login we want to send an object that contains the user’s credentials. Note for the sake of simplicity, the user’s password is not encrypted.

{  
    "email": "jonnygold@gmail.com",  
    "password": "1234"  
}  

Until now, we have created endpoints that use HTTP Get commands. To send a payload, we use HTTP post. You access the payload from the req object’s body attribute. You can use the following to retrieve the payload’s email:

req.body.email

We process the payload and send the appropriate response by adding this endpoint:

app.post('/api/users/login', (req, res) => {

 if(users.find(user => user.email === req.body.email &&   
   user.password ===  req.body.password)){  
    res.json({  
      ...users.find(user =>   
      user.email === req.body.email &&   
      user.password === req.body.password),  
      message: 'Login successful',  
      isAuthenticated: true  
    });  
  }  
  else{  
   res.json({  
    message: 'Login failed',   
    isAuthenticated: false  
   });  
  }  
 });

The endpoint uses the same approach as the previous endpoint. If the submitted email and password are matched, a user profile is returned with a message and authentication status flag. If no match is found, only a message and authentication status flag is sent.

Testing the API

Until now, we could test the User API by typing a URL into the browser. For payload (POST) requests, we can’t use this approach. Instead, we can use an HTTP application like PostMan. This lets you create and save requests and view responses. You can download PostMan from this link. I have included a sample collection you can use to test the User API.

Conclusion and Next Steps

In the installment, we created a User API that returns a list of all Users, return a single user, and login. In the next part, we will modularize our application and add a Tasks API for querying and managing tasks.

Node JS Express for FrontEnd Developers Part One: Getting Starting

2024-09-06T00:00:00+00:00

Node.js uses Chrome’s V8 Javascript engine to provide a cross-platform development platform. In other words, it takes Javascript out of the browser and lets you run it anywhere. This makes it especially attractive for web developers because Node lets you use a single language and development tools for backend and frontend applications.

In this series, we will use Node with the Express framework to provide a backend for React and Angular task management web applications. We will also cover querying and persisting data with MongoDB, using Swagger to provide online documentation, and deploying a serverless version of the application.

In this first part, we will install our development environment, create an index.js file, and write the initial application code. Please note that Node.js supports both regular Javascript and TypeScript. For the sake of simplicity, I have written the examples using Javascript. In addition, all examples are written using arrow notation, in line with current conventions, instead of function calls.

Getting Started

Before we can build a Node application, we need to install Node.js. How you install Node, depends on your development platform and your preferred package manager. The good news is that the Download page on the Node website covers all the available ways to download and install Node. Once you have Node installed, open a Terminal window and create a new folder.

mkdir node-task-app

Next, open the folder

cd node-task-app

Now, we create the app using this command

npm init

Follow the commands, and at the end type: Yes.

Use \`npm install \<pkg\>\` afterwards to install a package and  
save it as a dependency in the package.json file.  
Press ^C at any time to quit.  
package name: (task-app) node-task-app  
version: (1.0.0)   
description: Node task app  
entry point: (index.js)   
test command:   
git repository:   
keywords:   
author:   
license: (ISC)   
About to write to /Users/jonathangold/Code/MVDS/node/node-task-app/package.json:  
{  
  "name": "node-task-app",  
  "version": "1.0.0",  
  "description": "Node task app",  
  "main": "index.js",  
  "scripts": {  
    "test": "echo \\"Error: no test specified\\" && exit 1"  
  },  
  "author": "",  
  "license": "ISC"  
}  
Is this OK? (yes) yes

Next, open your application folder in your IDE/editor, such as Visual Studio Code. In the IDE, open the terminal and type:

npm install

As a final step, we install the Express framework.

npm install express

Creating an Entrypoint

With the basic pieces in place, we can create an entry point to our application. As the name suggests, this page serves as the gateway to our server application. To create the entry point, create a file called index.js.

In your editor, open index.js. Add a reference to the Express framework:

const express = require('express');

Now, we create our web application by declaring the app variable and instantiating the Express framework.

const app = express();

At the bottom of the file, we add a listener. This listens for requests on the specified port. In our example, we specified port 3000. In the function, we add a line that logs a message when the app is run.

app.listen(3000, () => {
  console.log('Server is running on port 3000');
})

Launch the app by opening the application folder in the terminal and typing.

node index.js

The terminal displays the text in the message.

Adding a Route

So far, our app doesn’t do very much. If we type the address http://localhost:3000, the browser displays a blank page. To display a message, we need to create a route. In front-end development, routes provide the address of a specific page. Each route is a URL that navigates directly to that page. In our case, we are building a REST API. So, each route will either return data or perform an action. To demonstrate, let’s add a route that displays a message when we open http://localhost:3000. In the middle of the app, add:

app.get('/', (req, res) => {
 res.send('Welcome to the Task API');
});

Here we define the default route. This route receives an HTTP Get command, and returns a short message. The command has two parameters req and res. The req parameter is an object used to pass parameters, and we will look at it in more details in the next installment. The res parameter is an object used to return a response. In our case, we use the res.send method to return a short string. If you restart the app and refresh your browser, you will see a message.

Conclusion and Next Installment

In this part, we tool our first steps build a REST API with Node.js and Express. We installed Node and configured our development environment. Next, we created an index.js file and created the foundations of our API. The last step was to create a route that displays a message when calling the API. In the next installment, we will build on this foundation and dive deeper into routing.

Node JS Express for FrontEnd Developers a Practical Guide: Overview and Motivation

2024-09-04T00:00:00+00:00

In ReactJS for Angular Developers a Practical Guide: Overview and Motivation, I explained how after a long period working with Angular, I felt I should reacquaint myself with React. I started by looking at my React project repos on Github. This proved to be a frustrating experience because, after seven years of working exclusively in one framework, it was nearly impossible to understand what I had written in the other. I had no choice but to relearn everything from scratch. Eventually, I was able to build a sample task management. After achieving my initial goals, I felt sufficiently competent in React to move on to other things. When I next revisited the project, I had a general idea of what everything did but understanding what I had created required more effort than I expected.

To avoid repeating the same mistake, I decided to create a practical guide to learning React based on the code I had written. I took the project and broke it down into smaller mini-projects. Each mini-project would illustrate specific React features with each new project building on the knowledge acquired in the previous step. The result was ReactJS for Angular Developers.

For each article in the series, I wrote sample Angular code to illustrate how to perform this functionality in Angular. As a long-time Angular developer, this forced me to reexamine some of my assumptions regarding Frontend development. An additional benefit of writing Angular examples was that it allowed me to learn the latest version of Angular. It also inspired me to write another series, Angular for React Developers where I took a similar approach but from the opposite direction.

Now I covered the basics of building web applications with React and Angular, I thought that I should move from the frontend to the backend. At this point, both series interact with and display data from static files and my intention for both series was to teach how to work with REST APIs. In addition, I recently learned how to build a REST API using Node.JS, Express, and Mongodb. In order to avoid my original mistake of learning something, and having to learn it again, I’m launching a new mini-series, on creating a NodeJS backend. As with my previous series, I will be looking at Node from the perspective of a frontend developer. Once I complete this series, I will be publishing new installments of my Angular and React series.

The tutorial includes the following installments:

Part 1 Getting Started:In this first part, we will install our development environment, create an index.js file, and write the initial application code.
Part 2 Building an API:In the installment, we create a User API that returns a list of all Users, returns a single user, and login.
Part 3 Understanding Routing:In this installment, we reorganized our code and created a modular API. This will make it easier to manage and extend our task management API.
Part 4 Querying and Managing Tasks:In this installment, we create a task API and explored how to create routes with default and optional parameters. In addition, we implement task management functionality using HTTP POST, PUT, and DELETE commands.
Part 5 Managing Data with MongoDB:In this installment, we integrate the User API with MongoDB. We started by installing MongoDB, creating a database, and populating the users collection. Next, we will create a Mongo module that enables us to query a single item or items from MongoDB. We conclude this installment by updating the Users module to take advantage of MongoDB.
Part 6 Task API Database Integration:In this installment, we create and populate tasksDB’s task collection. We update the mongo.js module to create and update tasks. We integrate tasks.js with MongoDB. This enhanced our existing querying functionality and to persist, update, and delete tasks from the database.
Part 7 Testing the API:In this installment, we investigate two testing approaches. The first approach used Postman as an HTTP client application to send data to individual routes. The second approach used the Jest and Supertest frameworks to write automated test scripts.
Part 8 Documenting the API with Swagger:Now we have a fully functional Task Management API that receives data and is able to query, persist, and modify that data using a database. We also have a complete test suite that tests all available API routes. All we are missing is documentation that demonstrates our API and shows us how to use it. In the final installment in this series, we will use Swagger to document our code.

GitHub Copilot or: How I Learned to Stop Worrying and Love AI-Driven Development

2024-07-11T00:00:00+00:00

Love it or hate it, there is no denying that ChatGPT and its competitors are here, and it looks like they are here to stay. For optimists, Generative AI offered the chance for anyone with a good idea but lacking the necessary skills or training to do and make whatever they wanted. With AI, you could be the next Steven Spielberg, JK Rowling, or Taylor Swift in much less time and at a much lower cost. Conversely, if you were Steven Spielberg, JK Rowling, or Taylor Swift, it’s game over, but at least they had fun and can license their portfolios as training data. Now that the machines know how to code, it looks like there is no future in software development.

Before we get too carried away, wasn’t it just five minutes ago that crypto was threatening to do the same for finance and fiat currencies? Wasn’t the singularity supposed to be here by now, and for all its promise, have any of the chatbots delivered anything useful? Following the recent release and general availability of GitHub Copilot, and in light of my experiences using it, I think there are grounds for optimism. Not only is there a future for software developers, but AI-assisted development offers to take some of the pain out of our daily grind.

Don’t Believe the Hype: Why I Was an AI Skeptic

Artificial Intelligence (AI) has been around as long as digital computing. Since the term was probably coined in the early nineteen fifties, there have been multiple attempts to turn computers into programmers. Back in 1981, the British Magazine, Personal Computer World published an article about THE LAST ONE, an artificial intelligence-based computer program for generating computer programs. At that time, the closest most of us got to developing software was typing BASIC programs published by PCW and other computer magazines. For anyone who remembers that era, the possibility that a program could type a program and avoid all the associated problems was not without its attractions. Like many subsequent efforts, the days of self-programming computers seemed virtually impossible.

This all changed on November 30, 2022, with the public release of ChatGPT 3.5. Like everybody else, I thought I would take a look at what AI had to offer. I put the AI through its paces by seeing what it could do with various late twentieth-century pop culture references. Here are some examples. In most cases, ChatGPT correctly identifies the source, provides the correct context, and then starts to make stuff up. To be fair, the accuracy of ChatGPT’s responses to pop-culture trivia has improved over time, but its impulse to hallucinate is still there. When it comes to technical questions, like software development, the quality of the answers drastically improves. At the end of the shared chat examples are two Javascript questions: What is the difference between a JavaScript promise and an RxJS observable, and Why use a set timeout in JS? In both cases, it gives high-quality answers to difficult questions.

Into Infinity and Beyond: Why Github Copilot Matters

Let’s start by setting the scene, I had been aware of Copilot for a while, in large part due to the Fireship channel on YouTube, but had no compelling reason to use it. This changed in early 2024, when a version was released that seemed to offer something useful, we’ll get to what that was very soon. To activate Copilot, I needed to log into my personal GitHub account. This seems trivial but was complicated by the fact that following months of nagging emails, I had activated two-factor authentication on my account, but had no idea how to use it. Once I figured the authentication part out, I had to finish the process by visiting my long-neglected page. While I was there, I took a look at my various repos, and to a large extent most of either did not represent my current skills and experience and many of them were hopelessly out of date. So I created several new projects, many of which showcased my existing skills, such as Angular, Node, and GraphQL. In addition, I wanted to refresh my hard-earned knowledge of React and Python.

Although Copilot proved handy in the things I already knew, it proved invaluable in helping me get back up to speed with React. I had already built a couple of serverless task management APIs, one in GraphQL and one in Python, so my next step should be to create a React frontend. When I was still in the process of refamiliarizing myself with React concepts such as composability, state management, and context, Copilot understood what I was trying to achieve and offered me helpful suggestions.

Once I had written a decent amount of code, solved the most pressing problems, and decomposed my application then Copilot came into its own. This is due to a common problem that most developers face, which I like to call threading the needle. This is when you have created a fantastic solution to a common problem, but that solution is buried deep inside a project. In the best case, the code you are looking for is somewhere in your current project, you just need to follow a chain of references and after a while, you’ll find it. This is time-consuming and deeply annoying, but most of the time you’ll find it. It’s when you know that you’ve created something good in some other project, but you don’t remember which project or where it’s located on your PC. This was where Copilot came into its own and it quickly surfaced a suggestion based on previously written code. This saved me the hassle of trying to track down the code I knew I had once written to do this. The only downside to Copilot’s ability to surface previously created solutions was that I now find myself pausing before starting to type my next line of code, and feeling a mild sense of disappointment on the occasions that Copilot doesn’t have an appropriate suggestion.

In the larger scheme of things, my experience of using Copilot may not seem that big a deal. After all, most code editing tools, offer code completion as standard. While this is true, it overlooks the fact that Copilot is offering suggestions based on work that I’ve already created and then adapting it to match the current context. Now, in most cases, the code will still need some minor editing but it’s much better than how we currently do things. Until now, assuming that I’ve located similar code in a reasonable amount of time, I will then copy and paste that code into the file I’m currently working in. Then I will have to do a fair amount of editing to make the copied code work in its new location. Using Copilot this process is significantly shorted, the code requires less adaption, and the result usually has fewer errors. These differences may seem trivial, but over time they start to add up.

Conclusion: One Small Step for a Developer…

Before going over to the dark side of AI-assisted development, I didn’t feel threatened by the fact that now that computers could generate decent code they were coming for my job and the jobs of my fellow developers. After all, even before the rise of AI, the music industry has been going through a similar process. Using electronic keyboards, samplers, and computers it is now easier than ever to create music and huge numbers of songs are still being released; true there are fewer good songs, but now anyone that might want to produce a record can do it. In software development, we are now going through a similar process, in my opinion, the real benefit of tools like Copilot is not that they can do the work instead of us, but they can help us create better and higher-quality code. At the end of the day, computers have no intrinsic reason to build applications, and until they acquire their own free will and sentience, very little reason to do it. So until someone can prove to me that we, like the game developer, Thomas Anderson (Neo), are living in the matrix, I feel that software developers will still be useful and productive members of society for a bit longer.

Minimum Viable Development: Updates and Coming Attractions

2017-11-19T00:00:00+00:00

A look into what’s next for this site, and for it’s writer
Ok, I know it’s the oldest excuse in the book, but I’ve been busy. Yes, it’s been over two weeks since I pushed Getting the Word Out: Using Google, Facebook, and Medium to Grow Your User Base, so I owe you all an explanation. The truth is that with the help of my business coach, Naphtali Goldberg, I’ve started to put the plan I outlined in The Business of Development Part 5: Wrapping Up, into action. In this article, I’m going to give you a high level overview of my proposed venture. This will be followed by a brief teaser for a new service that I will be launching in the very near future.

The Lean Startup

Before I give the details, I need to give you some background. As I stated in the past, I’m a big fan of Eric Ries’s lean startup methodology and book since 2012. The following, adapted from the book’s Amazon page, sums it up.

A startup as an organization dedicated to creating something new under conditions of extreme uncertainty…Rather than wasting time creating elaborate business plans, The Lean Startup offers entrepreneurs - in companies of all sizes - a way to test their vision continuously, to adapt and adjust before it’s too late.

In order to understand where I’m headed, it helps to know a bit more about the lean startup. For those of you that haven’t read the book, here’s a brief summary.

Leaps of faith

Every new business (idea, website, app, product, service, etc.), must be define it’s value and growth assumptions/propositions. The value assumption describes what the idea is worth; for example, will it make the world a better place, make people happier, or build a better mouse trap. The growth assumption describes how the business can sustain itself and grow. If it can’t grow, then it’s probably not going to survive; by the way this is also true for charities and non profits.

Minimally viable

Now the real work begins. No matter how valuable your idea could be, or how solid your business model your still about to take a massive leap of faith. Now, you have prove that what you have will actually work. At this point, you need to:

Identify an initial group of potential customers.
Build a Minimal Viable Product (MVP). This is the smallest possible subset of features that prove that your idea can work. Please note, this does not an excuse for building something unusable because you are going to use this to get feedback from your initial customers. If you put out something bad, they won’t forgive you.
Define metrics that test your assumptions. At all costs, these metrics need to be real, and not what he calls vanity metrics. To this end, they should be Accessible, Auditable, and Actionable. Accessible means that they are not hidden away on some obscure website; it also means that they should hide the truth in some clever way, and be easy for anybody to understand. Auditable means that the data should be real, and be able to stand up to scrutiny. Actionable means that once you have the data you should be able to use it to make improvements on your product.
Now you can release the MVP and collect data and feedback from your testers.

Preserve or pivot

Once the tests are complete, and you have collected all the data, you can decide if you want to preserve or pivot. Preserve means proceeding as planned, you can still make tweaks and improvements, but you should have enough information to show you that you are on the right track. Pivot means that your original assumptions didn’t work out as expected, but you found a new direction or opportunity worth investigation.

Repeat

Figure out how you can improve your MVP, define a new set of metrics, and repeat.

Minimal Viable Development Services (MVDS)

Minimal Viable Development Services (MVDS) is the working title for my independent development business. It may change, but for now this is name on my business card. I was toying with Lean Developer, but on a certain level that would have been false advertising.

Those of you that have been paying attention could point out that strictly speaking my next venture is not a startup, but if you had read the book, you would know that it’s definition of startup is extremely broad. In addition, in nearly project I have been involved in as a salaried employee, major parts have been outsourced, and many issues, misunderstandings, frustrations could have been avoided by following the principals I outlined above. So, one of my aims is to provide development services based on lean startup principals, cross platform applications, using cloud and serverless technologies. If you want to know more, please get in touch.

For those of you in regular employment, you may be lucky enough to work somewhere that works this way. This has not been my experience. Every time I’ve tried to promote this methodology it’s met with resistance and my advice has been ignored. As a result, I’ve been looking for an oppturinity/platform to try these ideas out. If you are interested in finding out more about the lean methodology, and need some couching or consulting, I’m available.

Coming attractions

Way back at the start of this post, I hinted that I have another project in the works. It’s at a really early stage, but it has tremendous possibilities. I’m not going to give to much away right now, but I will tell you that I’m calling it TipNet. Broadly speaking, it’s a new way to publicize and promote businesses. I’m still working out the details, but I should I have a prototype, or should I say MVP up and running in the next couple of weeks. As they say at Microsoft, I’m going to eat my own dog food. This means that I will be building the project using the methods and practices I described in this post.

One more thing

As you can see, I’m going to be busy for a while, but that doesn’t mean that I’m going to stop writing. In fact, my plans are not only to write more, but to post articles on a regular basis. If all goes to plan, the gap between this post and the next, should be less than twenty four hours, and will be a practical introduction to serverless computing with Firebase. At any rate, the gap will be much shorter that the one between this and my previous post.

Getting the Word Out: Using Google, Facebook, and Medium to Grow Your User Base

2017-11-06T00:00:00+00:00

This article shares my experiences of launching my blog, the lessons I learned, and some tips that can help you publicize your business and content
On October 1, 2017 I launched this web site. As I stated in my first post, Going Live: Looking Forward and Back, I wanted to show the work I’ve done and give a taste of how I can use my knowledge and experience to help others. According to Google Analytics, over the course of one month my site has grown from zero to 140 users. Following this site’s stated mission to continue to help others, and to thank my readers, I would like to tell you what I did and how it can help you.

Finding your audience

When I started this site, I knew the audience I was trying to reach, but I didn’t know how I was going to reach them. Initially, I reached out to my family, friends, and followers through a combination of email list and social media (Linkdin, Facebook, and Twitter). Even though the initial response was positive, I wasn’t able to grow much beyond my personal connections. Following The Business of Development Part 3: The Serverless Solution, my site’s user base grew rapidly. Part of the growth can be attributed to covering a currently hot topic. The biggest growth was due to Facebook.

Trump card

In the process of building this site, I created a public Facebook page. This was a way of linking to and publicly sharing posts on my personal Facebook timeline to a much larger audience. As a result, Facebook keep nagging to use a number of its advertising products. In the wake of the alleged use of Facebook advertising by various interests in the 2016 US Presidential elections, and after reading The Super-aggregators And The Russians by Ben Thompson, I thought that this was something worth investigating. After a number of experiments and a total cost of nearly of ₪51.00 (NIS) or nearly $15.00, I was able to ran five campaigns and significantly grow my audience.

Medium is the Message

Since launching my site, I have cross posted articles to Medium.com. Even without paid promotion, my Medium stats mirror the growth of my blog.

Looking at the figures for each article, it is clear that The Business of Development Part 3: The Serverless Solution being responsible for most of the growth.

Apart from covering a popular topic, this was the first article that casually mentioned ReactJS or React Native, and was also tagged as a React article. As a result, the post got additional interest from the React Community. This may have also led to the final article in the series catching the attention of cloudboost, a created collection of Medium articles. As the most personal article in the series, I was surprised that this was the article that they wanted to include. While it never became the most popular article in the series, it still did better than The Business of Development Part 2: Call and Response which has attracted no readers.

Moving on

A month may seem like a short amount of time, but much happen in the course of thirty days. In fact, most of my biggest insights happened over the course of five days. So what’s next? Well my data seems to indicate that articles on serverless computing or tagged with React are the way to go, I’m going to write a short series on creating serverless apps with Firebase, React, and React Native. I have done the necessary preparation, and should start posting the series over the next week. Thanks to everybody who has read, and/or promoted this site and I see you in the new series.

The Business of Development Part 5: Wrapping Up

2017-10-24T00:00:00+00:00

Answering the question: If I have a chance as an independent developer?
Believe it or not, we’ve reached the end of this series. My aim has been to explore what makes it possible for someone like me, a professional, salaried developer decide to go out on their own. I wanted to describe a revolution that has been taking place over the last decade and a half, and how there are no a range of oppturnities that make it possible for coders to work on their own. Cloud services, APIs, serverless computing, and free and open source software are the what and the how. Before I can answer If, there is another question to answer, and that is why, and why now?

The rest of this article cover wider aspects of open my own software business. Let’s start with some personal background. Don’t worry, I’m going somewhere with this.

Some history

For a developer, my path to working professionally in the field has been unusual. Like most people of my age, I have always had some access to computers. The first one I owned was a Commodore Vic 20, it was also the first I programmed on. My biggest achievement was to adapt a ball bouncing routine to create my own version of Breakout. Programming was hard, and real programmers had to write in machine code to do anything useful. So between 1985 and 1993, I used a wide range of machines it wasn’t a major part of my life. There was something magical about getting a machine to follow your instructions, but it wasn’t for me. In university, I studied history and not computer science

In October 1993, I started working in the software industry. Since then, I’ve worked for five (six if include an acquisition) companies of varying sizes, and I performed a range of roles. Most of my roles involved documentation and support, but in 1998 I took a course in Visual Basic. I learned that programming wasn’t just magical, it was now way easier, and if you wanted to do it you could. I not only liked it, but I was good at it. Overtime, I went to courses or taught myself new stuff. I also found ways to use my skills in my job. At a certain point, between 50-75 of my time was spent writing code, but my official job title didn’t reflect this. At the end of 2014, I achieved my goal and became a professional developer.

Why now

One of the challenges I’ve face over the course of my tech career, is that I don’t quite fit in. For I start, I started late and I’m not locked into legacy technologies or methodologies. This means that many of my ideas and solutions are unfamiliar to industry veterans, and this nearly always causes friction. For example, Git for it’s steep learning curve, impenetrable syntax, and general weirdness is does a better job than Team Foundation Server. I know that’s my opinion but much of the industry, including a big chunk of Microsoft, support it. But, since Git requires using the command line, it’s too much for many enterprise devs. This is just one example were a better way exists, but my employers weren’t willing to investigate it.

In 2006, I attended a seminar on Agile Software Development. In 2011, I became aware of the lean startup, I own electronic and paper version’s of Eric Ries’s book. Most places I’ve worked have been aware of, or tried to implement agile, but lean is completely alien to them. Again, lean is not perfect, but most of what it suggests makes sense. It certainly provides answers to two of the hardest problems in software: building what customers want, and not to waste time on what they don’t. Currently, I am working on a business plan. I can’t go into details, but I’m going to incorporate as much lean as I can.

Lastly, on a number of other fronts a number of factors have aligned and these now make it possible to explore new directions. While some of these are relevant, this is not the time or the correct forum to discuss them. I will just add that a number of personal development now enable me to explore new directions that I haven’t been able to previously.

Finally, answering the question

You now have a better idea of why I’m considering this course of action, let me t ell you why I think I can succeed. Recently, some pundits have been down on tech. For example, TechCrunch, recently published After the end of the startup era. It’s author, Jon Evans thinks the future belongs to the big tech companies, and everybody else is toast.

Evan’s may be right about startups, but not everybody in tech is a startup. In fact, my plans are to use the platforms, technologies, and methodologies to help people, organizations, and business that could benefit from tech, but never had the means or resources to do so. In fact, my first post, made a similar point. Currently, the main beneficiaries of the cloud, have been it’s biggest players.

At the end of the day, I may be wrong and my plans may go spectacularly wrong. I could also be right about the possibilities, but for factors both within and beyond my control be able to exploit them. Right now I am pretty confident that things will work out. The tech keeps getting better, the services are cheaper, and if you plan ahead, and don’t get carried a way, you should make it. I am confident and optimistic. To quote an ancient song, the futures so bright, I gotta wear shades

Don’t panic

This series is done, but that doesn’t mean it’s time to close down the site. Originally, I was planning to cover the same ground in a single article, and move on. In fact, although I decided to write shorter and more focused articles, I never modified the opening paragraph of my first article.

One of the reasons for starting this blog was to explore what are my available options. Today, I’m going examine why I think I have a chance as an independent developer.

I’m not going away, and there are a wide range of topics I would still like to cover. Since launching this site, and writing a total of six new article, I’ve learned an incredible amount. So, while I’m not going to extend this series past five posts, one of my next articles might cover what I have discovered.

Finally, I want to thank all the people who have read this series on this site, the cross posts on Medium, and via social media (Linkdin, Facebook, Twitter). To my surprise, my article on Serverless Computing, did really well on Medium.

The Business of Development Part 4: Free as in...

2017-10-23T00:00:00+00:00

Understanding how free and open source tools let us get our job done better than ever.

This is the penultimate article in this series, and today’s topic talks about the tools of the trade, and the amazing thing is most of them are both free and open source.

Defining terms

If you watch any TV shows about geeks, you know that we care about the most ridiculous things. Case in point, Silicon Valley has been able to get a great deal of mileage out of tabs versus spaces debate. Another way to get us worked up is to try and define the difference between free and open source software.

Here’s Wikipedia’s definition:

Free and open-source software (FOSS) is software that can be classified as both free software and open-source software. That is, anyone is freely licensed to use, copy, study, and change the software in any way, and the source code is openly shared so that people are encouraged to voluntarily improve the design of the software. This is in contrast to proprietary software, where the software is under restrictive copyright and the source code is usually hidden from the users…Wikipedia: Free and open-source software

Where as, Ricard Stallman of the Free Software Foundation, has this to say:

The two terms describe almost the same category of software, but they stand for views based on fundamentally different values. Open source is a development methodology; free software is a social movement. For the free software movement, free software is an ethical imperative, essential respect for the users’ freedom…Why Open Source misses the point of Free Software

On the outside chance that Richard Stallman will read this post, or our paths will someday cross, I apologize in advance for blurring the difference between these two very different ideas. In my defense, most of us use these terms interchangeably; and in practice, most of the open source tools I use on a daily basis, are both free and open source. Now I’ve got the disclaimer out of the way, lets move on.

Turtles all the Way Down

As in my previous article, The Business of Development Part 3: The Serverless Solution, let’s start by looking at the tools I use to create, host, and serve this post. Nearly ever tool involved in producing this site is free and open source.

My editor of choice for development and text is Microsoft’s Visual Studio Code (VSCode). One of it’s closest competitor’s is WebStorm by JetBrains. It’s a great tool, but not only is VSCode free, I think it’s also better. To see why, go to my VS Code v IntelliJ article. VSCode closest rival, is Atom, a free and open source editor from GitHub. Not only are the two apps remarkably similar, they are both based on Electron. This is a way of creating desktop apps using web technologies. Which, in turn, is based on Chromium, the open-source version of Google’s Chrome browser.

My site tools are nearly all free and open source. My posts are written in the Markdown markup language. While Markdown is actually a format, it has become widely accepted, and many sites use it; including, GitHub and Stack Overflow. I use the Jekyll blogging system to build the site. I use Git for version control, and the site is hosted on GitHub, via GitHub. GitHub the site is a hosted version of Git. I should point out that I have a paid GitHub account, and store my content in a private repository, but GitHub is free for open source projects.

On the development side, I’m using a bunch of free and open source tools and frameworks. For package management, I’m using the Node Package Manager (NPM). I use Angular and React to build web sites. For mobile apps, I use Ionic and React Native. Even the operating systems I use, are either completely free and open source (Linux and Android), or use open source components in varying degrees (MacOS, Windows, iOS). In fact, the list of free and open source software that I use is so long that it’s pointless to try and list them all.

No free lunch

Apart from the companies I mentioned by name, most of the projects mentioned here are run by commercial enterprises, and some of them are really big: React (Facebook), Angular (Google), VSCode (Microsoft), Node and NPM (Joyent/Samsung). Other big players include Adobe, Amazon, Apple, IBM, Oracle, and SalesForce.

As we like to say if you’re not paying for the product, you are the product. Yes, some of this companies were started by hippies and assorted idealists, but at the end of the day, they are not in it for love. Yes there is any element of enlightened self interest, but not enough to keep the lights on and the data centers running. I don’t think there is one definitive explanation, but this Quora question, provides a really good summary. So open source and free software, comes from many places and some of its providers have no problem with charging high prices for their other services. Overall, I don’t think we have suffered. The question is does it really matter, if we all benefit, what’s the harm.

Lasts words

I don’t know how long I’ve been using free and open source software, but it’s certainly been more than ten years, and could even be close to twenty. Certainly, in my time working in web and cross platform mobile, nearly all my tools have been free and open. It’s been working for me, and I don’t see how or why it should. Furthermore, my future plans as an independent developer are based on using free and open tools and platforms.

Looking Ahead

Almost done. In the next and final article in this series, we will tie up the loose ends. I will also give an answer to the question I asked in my first post:

Why do I think I have a chance as an independent developer?

See you then.

The Business of Development Part 3: The Serverless Solution

2017-10-22T00:00:00+00:00

What is serverless commuting, and why it’s a game changer
Today we are finally getting down to business. In this article, we are going to look at server-less computing. This is the secret sauce that makes being an independent developer easier than ever.

We’re Off to See the Wizard

Serverless computing is a relatively new term. I first heard the term around the time Amazon launched AWS Lamda. The term refers to the ability to develop applications without designing or building a backend. You write the frontend/client code and a remote service does the heavy lifting. Or as Wikipeidia puts it:

Serverless computing is a cloud computing execution model in which the cloud provider dynamically manages the allocation of machine resources. Pricing is based on the actual amount of resources consumed by an application, rather than on pre-purchased units of capacity. It is a form of utility computing.

Of course, the term serverless computing is misleading. Much like Dorothy in the Wizard of Oz, there is someone, or something, behind the curtain. As far as developers are concerned, there are no servers. In reality, they still exist in the provider’s data center, but we don’t have to deal with them.

Nothing New Under the Sun

I should point out, that the term may be new, but it’s been around for a while. For a start, this blog uses a form of serverless commuting. Using a combination of the Jekyll blogging system and GitHub pages, I write markdown text files, run them on a local server, and push them to GitHub. Github serves the content to you. I plan to write more about the technical side of my blog in a future article.

Also this is not my first experience of what is now called serverless computing. Way back in 2014, I started learning AngularJS, and decided to build something using the framework. I used a service called Parse to build my Pikr.me web app. I deployed the site via Dropbox. Unfortunately, Facebook acquired and shutdown Parse, and Dropbox no longer permits you to deploy static web site, so the site is no longer active. I once gave a presentation on the topic, you can find it at The New Web.

Light My Fire

Parse may be long gone, but it’s near contemporary, FireBase is still around. It was also aquired by a major cloud provider. Luckily for Firebase and their user’s, they were bought by Google, and they’re still going strong. They offer a range of services, including authentication, a realtime database, file storage, web site hosting, and mobile messaging. Like most cloud services, they have a multi-tier pricing model, that starts with a free tier. Currently, I use Firebase as the backend for a mobile app. I’ve been writing in React Native. The app is a simple use management app that lets you display a list of users, view and edit their details, and create users. It runs on both iOS and Android.

The app uses two Firebase services: authentication and real time database. The authentication service handles security and access. To use the app, the user has to enter their email address and a password. When they click the Submit button, their credentials are sent to Firebase, via an API. Firebase authenticates the user, and sends back a message that indicates whether they are aloud to access the database.

The app reads the message. If the credentials were invalid, the app displays an error message. If the user’s credentials are valid, the app then request the list of users. Firebase returns the list of users as a JSON object.

As you can see, I can concentrate on building the app and Firebase and Google do the rest.

Last Words

Apart from the links in the article, the .Net Rocks podcast has a number of great shows on the subject. The NDC 2017 Panel, a show on Azure Functions, and Serverless Architecture. The NDC show has a lot of information on Firebase, and the last show was the first time I heard the term serverless computing, and it mainly focues on AWS Lamda. I should also add that Google has been adding new Firebase services. They recently launched a new document database

Looking Ahead

As far as this series goes, it’s three article down, two more to go. The next article will be on free and open source, and the last article will tie up all the loose ends. As things settle down here, I’m hoping to pick up the pace. I am planning to finish the series this week.

The Business of Development Part 2: Call and Response

2017-10-15T00:00:00+00:00

What are application programming interfaces (APIs), and why they matter.
It’s been a while, but it’s time to get back to work. This series looks at the world of independent development, and asks what makes it possible. In the first article in this series, I looked at cloud services. In order to explain, what these services can do, I need to explain how we can work with them, via APIs.

Making Connections

An interface lets two or more entities connect to each other. Hardware interfaces, like USB, let you plug devices into your computer. A user interface (UI) presents an abstraction that lets us communicate with machines. APIs let computer programs talk to each other. Here’s Wikipedia’s definition.

In computer programming, an application programming interface (API) is a set of subroutine definitions, protocols, and tools for building application software. In general terms, it is a set of clearly defined methods of communication between various software components. A good API makes it easier to develop a computer program by providing all the building blocks, which are then put together by the programmer… Wikipedia: Application programming interface

For the sake of simplicity, the rest of this article will concentrate on web-based APIs.

Spinning Webs

Although the Internet predates the web, it was the web that made it accessible. Two of it’s key innovations were the Uniform Resource Locator (URL) and the Hypertext Transfer Protocol (HTTP). URLs are a form of address that lets us locate web sites and pages. HTTP is a set of simple commands that enables a program make a request and receive data from another machine (web server). In conjunction with the Hypertext Markup Language (HTML), we had a new way to find, request, display, and link information.

From Static to Dynamic

Originally, the web let us create and consume static data in the form of formatted text and pictures. It looked great, and was mostly free, but you couldn’t do much with it. For a start, most pages were created and maintained by hand, and this meant that web pages quickly became out of date. More importantly, if you couldn’t interact with live data you couldn’t provide advanced online services like maps or shopping. Over time many realized that you could make the web dynamic by using a combination of URLs and HTTP. When this was combined with new data interchange formats, such as XML and , it became possible to create GMAIL and Google Maps.

APIs in Use

You can find an API for almost anything. Unfortunately, due to business and/or security concerns most of them aren’t freely available. The good news is that there are many publicly accessible APIs. For example, governments provide a lot of useful and interesting data via public web services. Recently, I wanted to learn more about air quality in real-time. After a bit of Googling, I discovered that the government of Israel has a realtime API for measuring air pollution levels. If you want to find out the latest air quality index, you can use the following command:

http://www.svivaaqm.net/api/stations/2?getLatestValue=true&type=json

If you click the link, you’ll get the latest data reported by local measuring stations. The information is formatted as JSON.

Wrapping Up

Today, web APIs let us interact with remote systems. Each time you use Amazon, Google, Facebook, or your bank, you are using an API. So, most people working as web, mobile, and enterprise developers spend a large amount of time working with APIs. Without them, we couldn’t take advantage of cloud service and I wouldn’t be able to work independently. In my next article, I’m going to take a deeper look into one API based service, and how this opens up almost limitless possibilities.

The Business of Development Part 1: Clouds on the Horizon

2017-10-02T00:00:00+00:00

A look at how cloud services help independent developers
Launching this site was exhilarating. I couldn’t resist frequently checking Google Analytics. The good news is that my user numbers are higher than I expected. Even so, I have a long way to go before mega sites like the The Verge or TechCrunch have anything to fear. Now that the site is up and running, what’s next? One of the reasons for starting this blog was to explore what are my available options. Today, I’m going examine why I think I have a chance as an independent developer.

The Big Picture

If you look at the current market cap of public corporations. In the following table, between five and six of the companies listed are tech companies. Starting with Apple, all of them were founded within the last forty years, and they are more valuable than traditional blue chips, such as Johnson and Johnson, ExxonMobile, and Berkshire Hathaway.

Moore’s Law

In some degree or other, they have all benefited from Moore’s Law. Without going into too much detail, as computers get ever small, cheaper, and more powerful they can offer more services for less money. At the same time, what they can offer is so attractive, we willing surrender our data to them. So the more they get to know what we’re searching for (Google), what we like (Facebook), or what we buy (Amazon), the can not only become better but more deeply entrenched.

Little Fish

Paradoxically, although most of the power is the hands of the big companies that doesn’t mean that all is lost. In fact, they have provided opportunities for those of us lower down the food chain. As Ben Thompson has observed, the big players also offer cloud services that help level the playing field for smaller players. To illustrate this point, he has observed on his Exponent Podcast that one of the reasons that startups have opened up in expensive locations like San Fransisco, (and Tel Aviv), is that they not only need to buy servers but they don’t need to rent the extra space to house them. In my case, this means I can work out of my house, a local hub, or any place that has decent wireless internet.

Puzzle Pieces

Cloud services have created tremendous opportunities for the rest of us, it is important not to look at them in isolation. For example, it is important to a number of tools, services, environments, and methodologies. In order to give you a better understanding of how the pieces of the puzzle fit together and not to overwhelm my readers, I am going to break things down into smaller, and more digestible pieces. In my next article, I’m going to illustrate the points I’ve made here with some specific examples.

Last Points

It is worth noting that this is not the first time I have examined this topic. I once gave a presentation called the The New Web. I also covered some of the same ground in Cloud Collaboration. Both of these articles were written in 2014. On the whole, I think much of what I wrote is still relevant, but there have also been significant changes.

AOB

If you have any comments or questions, please use the comments section below.

I would like to offer my thanks to Aaron Hyman for testing the site, and letting me know which links were broken. I have fixed them, but if anyone finds a broken link, typo, or inaccurate information, please get in touch. If you don’t want to leave a comment, you can use use the links in the About page.

Going Live: Looking Forward and Back

2017-10-01T00:00:00+00:00

Today marks the official launch of my web site. Before I get down to business, I’m going to start on a personal note.

I am writing this article on the day after Yom Kippur (Day of Attonement). According to Jewish tradition, the Jewish Year started eleven days ago on Rosh Hashanah. We believe that on this day G-d decides our collective and personal fate. So, we start our year by looking forward, and praying for the best possible future.

In the period between Rosh Hashanah and Yom Kippur, we can review what we have done over the last year, confess our sins, and try to make things better by repentance, prayer, and charity. This period ends with Yom Kippur. On this day, we are given one last chance to atone before our fate is sealed. On the days following Rosh Hashanah and specifically on Yom Kippur, we look back. We look back over our deeds, and the deeds of our people. As a people, we hope that by doing good deeds, praying, and repenting that all of us, no matter our level of observance, will be forgiven for what we did, and be able to go forward together.

Apart from an accident of timing, what is the connection between the preceeding paragraphs, this web site, and this article. This article marks the official launch of this web site, but the site has been live and online for a while. This start is the first of a number of independant ventures that I am launching over the coming year. However, I am not starting from scratch and what I do next will be based on the skills, knowledge, and experience I have acquired over more than twenty years in working in computing.

Over the last two weeks, I created this web site. Instead of starting with a blank slate, I decided to show the work I’ve done and give a taste of how I can use my knowledge and experience to help others. To this end, I have collecting articles, presentations, social media posts, links, resources, and projects. Currently, this site is home to forty posts from the end of 2012 to the present day. It was fun to look back, today it is time to look forward.

Starting from this post, I am going to be publishing new, tech related articles to this site. I will be cover a number of fields and will cover broad analysis, opinion, and software development. I am working on a series decribing the type of projects I will be working on, and describing the relevant business models. At the other end of the spectrum, I plan to write tutorials on React Native, building and deploying mobile apps, and BASH scripting. In addition, I will also use this site to launch mobile apps and web services.

One last thing, I wouldn’t be able to start this project without the help and support of my family. Specifically, I want to thank my wife not only for everything she does, but also for her suggestion for starting this web site. I would also like to thank my friend, and former colleague, David Egyes, for suggesting that I collect and publish my tech related Facebook posts.

Now, it’s time to get to work.

Useful Git Commands

2017-09-26T00:00:00+00:00

I’ve been using GIT for a while, but it’s always useful to have a short list of the commands you use ona daily basis. So here’s my short list of GIT commands. Enjoy

Clone repo: git clone [remote URL]
Stage files: git add [-A -f] .
Commit: git commit -a -m '[Comment] '
Pull: git pull origin [branch name]
Push: git push origin [branch name]
Get remote info: git remote -v
Create new branch: git checkout -b [branch name]
Merge branch: git checkout master, git merge [branch name]
Delete local branch: git branch -d [branch name]
Delete remote: git push origin --delete [branch name]
Tag branch: git tag -a [tag] -m "Comment"
Add remote origin: git remote add origin [remote URL]

Links and Useful Resources

2017-09-25T00:00:00+00:00

Here is a list of useful links I’ve been collecting:

React Native
Components and Libraries
Redux
Git
Scripting
xCode, Building, and Deployment
Firebase
Jekyll
Markdown and GitHub Wikis
Linux/Unix/Mac OS/Virtual Box
Utilities
VS Code Extensions

React Native

React Native
Getting Started with React Native & Redux: Good introduction with links to YouTube videos.
React Native Tutorial: Building Apps with JavaScript: Good introduction to React Native
React Native Basics: How to Use the ListView Component: Good introduction to ListViews
Testing React Native Apps with Jest
React Navigation: New official React Native navigation

Components and Libraries

List: Catalog of JS resources, specifically React and React Native
NativeBase: Useful, open source UI library
react-native-root-modal: Good replacement for stock React Native modal

Redux

Redux: Redux home page
TodoMVC With React Native and Redux: Tutorial using the bakery template.
Testing React Native and Redux
Unit testing with Jest Testing with Redux + async actions + fetch
How to Snapshot Test Everything in Your Redux App With Jest

Git

Scripting

xCode, Building, and Deployment

Firebase

Jekyll

Jekyll: Transform your plain text into static websites and blogs
Setting up your GitHub Pages site locally with Jekyll
Creating and Hosting a Personal Site on GitHub

Markdown and GitHub Wikis

Linux/Unix/Mac OS/Virtual Box

Utilities

CSS Color Picker
JQ: A lightweight and flexible command-line JSON processor
Playup: NPM Library for uploading to Google Plays
RegEx101

VS Code Extensions

Devops, Bash Scripting, and Build Systems

2017-09-20T00:00:00+00:00

Much to my horror and shame, I have joined the world of DevOps. I not only automated our iOS/Android build system, but got it to run on my coworkers PC. Not bad for someone who wrote their first bash script a couple of weeks ago.

Of course, writing the code was the easy part. The hard part was dealing with configuration issues. For a start package management, is a blessing and a curse. It’s great that NPM can update all your project’s billion dependencies, but it’s a house of cards. All it takes is one rouge package or a data center outage and the gates of hell open. Don’t get me started on gradle or .plist files. Or the fact that you can only upload IPA files to the iOS App Store over wifi and not a corporate LAN.

Would like to rest on my laurels for a bit, but the reward for a successful delivery is new feature requests

Maps of Love Update

2017-09-18T00:00:00+00:00

Wow almost forgot about this. Please don’t follow the link, I removed it from Google Play. Also, I let the domain registration lapse,so I no longer own mapsoflove.com.

VS Code v IntelliJ

2017-09-15T00:00:00+00:00

Of course, since I originally wrote this, I’ve completely moved over to VS Code for three basic reasons. First, over the last two years it has improved to the point that it’s way better than anything JetBrains can offer. WebStorm had better tab management, and local history. VSC tab management is as good, and any other features can be added via extensions.

Second, WebStorm/IntelliJ is java based, while VS code is based on Chromium. While Chrome can be a resource hog, especially on the Mac, but it still outperforms the JDK. For example, I still need to use Android Studio occasionally, and like other members of the IntelliJ family, it beachballs like crazy. Finally, VSC’s has more and better extensions. In contrast, the JetBrains ecosystem has atrophied. Even if you can find what you want, most of the time it won’t work and is basically abandonware.

So I used to pay the JetBrains tax, but no longer. While I can’t entirely avoid Android Studio, I haven’t installed it on any new machines, and removed it from old ones. Also, never got into Atom. In theory, they both are Electron based, but Atom leaves me cold. I’ve even managed to get used to the wired way VSC handles preferences.

Android Oreo Article

2017-08-21T00:00:00+00:00

Link to Verge Article on Android Oreo

Amazon is Buying Whole Foods

2017-06-16T00:00:00+00:00

Link to Verge Article.

React Native and IDT Update

2017-06-08T00:00:00+00:00

It’s been a while since I’ve posted anything about work, so here’s a quick update. Since January, I’ve been working at IDT in Har Hotzvim. Ironically this is the same building as Cisco/NDS. Which is a bit weird because I keep bumping into my old collegues.

We are getting close to our first release. Unfortunately, most of my code will probably not be part of the initial release.

In the meantime, I’ve been working on two areas. One is logging. The other is configuration management, or what used to be called devops.

On the Android side, I’ve adapted the basic React Native gradel script so it creates an apk with our app name, version, and a date stamp.

On the iOS side, after two days of effort, I can down create and deploy apps to TestFlight and the app store. As usual, the process looks simple, but has a number of weird edge cases. Some how, I got through it and now I can build and deploy ipas in a consistent manner.

Lastly, for the first time in forever I’ve been documenting my work in a wiki. Although, not Media wiki, the GitHub wiki has two great features. First, you can write in markdown. Secondly, this being GitHub, you can checkout the entired wiki to the file system.

Teamwork

2017-03-30T00:00:00+00:00

I’ve been having a careful what you wish for week. In my years as an amateur and professional developer, I always wanted to be part of a team. A couple of months ago I got my wish, and maybe being a lone dev was not so bad.

So along with a ton of personal stuff, I’ve been dealing with unstable APIs, merge conflicts, breaking changes, and a corrupted dev environment. Also, still climbing the React Native/Redux learning curve. This involves writing functional, immutable code. For the last couple of days, I’ve been so focused that I didn’t eat lunch.

Still, at the end of the day I’m doing what I wanted to do. Even with the pain and instability of high tech, I wouldn’t go back. It can be tough as a programmer, but it’s worth it.

Starting React Native

2017-02-07T00:00:00+00:00

After much frustration, today the pieces started falling into place with my PoC React Native app. Specifically, all the Redux, React-Redux, reducers, and providers. Tomorrow, more work on unit tests, http calls, and source control with git.

How Ionic Became a Top 50 Github Porject

2017-01-26T00:00:00+00:00

Even though I have moved on to React Native, Ionic still has a special place in my heart. After all, I used it professionally for two years. Anyway, this is a nice article about some of the minds behind it.

Angular and React

2017-01-26T00:00:00+00:00

Link to post on Angular and React.

Goodbye Champion Motors

2017-01-09T00:00:00+00:00

Well guys it’s been great, but it’s time to move on. So it’s goodbye to Champion Motors, Bnei Brak, and complicated commuting. It’s also time to say farewell to AngularJS, Ionic, and Phonegap.

Tomorrow, things are going to change. So, hello React Native, and hello again 5 Shlomo Halevi, Har Hotzvim, Jerusalem. Not quite ready for the big reveal, so stay tuned…

Job Love and Hate

2016-12-27T00:00:00+00:00

Now that I’ve been in my current job for more than a year, here is a shot list of things I hated in my old job that I am initiating in my newer one.

Over the last few months, I’ve written a user guide, test plan, and release notes. At least the test plan and release notes were for my apps.

Trying to push my boss, to adopt agile and use the project management tools in Visual Studio Online.

Writing weekly status incredibly detailed status reports to my boss.

Lastly and hardest of all, using exchange to schedule ad hoc and regular meetings.

BTW, any corporate drones who think these are not a big deal, should try working in the real world.

Handling CORS Issues

2016-09-18T00:00:00+00:00

Enough politics for one day, back to the geeky stuff. Firstly, I’ve finally got my head around BDD/TDD with Jasmine and Karma for AngularJS. This is going to be a big help over the next few months.

In the process, I found a solution to the CORS issues I’ve experienced with some of my web projects. It’s called http://crossorigin.me/. Until now, I got round CORS by running Chrome without web security or disabling CORS in Safari.

To see it in action, check out my RSS reader project at http://rssreader.pikr.me/. The code is available from the following github repo: https://github.com/trider/rssreader

Writing Spec Documents

2016-06-06T00:00:00+00:00

Finally, after over two weeks at work, and having been made to write a design document/functional spec, finally starting to write code.

Goodbye Arieh Finegold

2015-11-05T00:00:00+00:00

You could say that he gave me my start in this business.

Medium Article on Age Diversity

2015-10-20T00:00:00+00:00

Thanks for writing this. This is not just a Silicon Valley problem. From my experience, it’s also an issue here in Israel, the Startup Nation.

Last year, Cisco terminated my employment as part of what they describe as limited restructuring. Previous to this I worked at the company they acquired for 13 years. After another two years working for Cisco, I was happy to leave; mainly because I wanted to switch from a support role and into full time development. But, since I was a month away from my fourth eighth birthday, I wasn’t sure what to expect. I certainly didn’t include my birthday on my CV, and would only reveal my age if asked directly.

Luckily, I found work within that month, but along the way I did experience some blatant ageism. In one notable example, one interviewer asked me how I would feel to be managed by someone younger than myself. I said it wasn’t an issue, but he wasn’t convinced.

Soon after this incident I started working for a small software company as a front end and mobile developer. Ironically, I am the oldest person in the office. The next oldest person is 40, and the owner is 37. I share a room with a 30 year old. The IT guy across the hall is 27.

Since my background is somewhat unusual, I have been brought new ideas and perspectives to our project. The younger members of the team are more conservative in outlook.

One final point, just before I accepted my current job, I meet a 19 year old serial entrepreneur on an inter city bus. He overheard a phone interview I had with a prospective employer, and asked for my resume. If this would have worked out, I would not only have been the oldest in his startup, all my coworkers would have been more than half my age.

Imigix

2015-09-24T00:00:00+00:00

About imigix CDN Service

iBeacons

2015-08-09T00:00:00+00:00

Interesting day. Figured out estimote iBeacons and wrote a short Ionic demo app on my Android phone. Suppose these are my first steps into IoT.

Positive Feedback and TTD

2015-07-24T00:00:00+00:00

Another interesting week at work, much to report. Firstly, got positive feedback from trade show for B2B app. Apparently, the sales team have another show in early August in Minnesota.

Spent a lot of time morning on configuration management and optimizing my dev environment. I’ve had my ups and downs trying to get TFS working on the Mac, so I’m also doing my personal checking into git. Although over the last couple of days, I think I’ve cracked it.

Also been getting my testing story together. I’ve gone totally BDD. I’m getting the hang of creating both unit and e2e tests with Jasmine and karma and protractor test runners. Specifically, I’m getting the hang of creating mocks for Ionic testing.

Finally, I have to say the more I use webstorm, I understand it’s power. Yes, all the cool kids are using Atom, and it’s Java roots make it look weird on the Mac, but it’s awesome. I really dig their RemoteDebug chrome integration. I figured out how to use and their Todos. But the best feature are using multiple integrated terminal windows.

PCS Track Now

2015-07-12T00:00:00+00:00

Still not available for general release, but the Inventory Management mobile app I’ve been on working on is being demonstrated in public at the Annual National Conference of the School Nutrition Society in Salt Lake City. I of course am still working in the office in Lod.

The app was created using the Ionic Framework and runs on the iOS and Android platforms, and phone and tablet devices.

Push Chat and TFS

2015-07-12T00:00:00+00:00

Finally got my push chat code working across iOS and Android apps. Got TFS working on iMac and MacBook. Also, got iOS ad hoc distribution profile up and running. So a really productive day, and the boss is happy. He’s really happy the apps running on his iPhone 6.

Push Chat and Local Storage

2015-06-15T00:00:00+00:00

So, figured out local storage solution for our push chat, without resorting to sqlite or pouchdb. Now, need to figure how to resolve the user forum and tagging.

Configuration Management

2015-05-27T00:00:00+00:00

Long and grueling day doing iOS related CM stuff. Still, managed to configure xCode to build and archive with our enterprise account. Then installed and setup OSX Server to push apps onto devices remotely. Happy it works, but sad I didn’t write any code. Now, waiting for ride home, and here at Somet El Al it’s only 40c.

.Net Rocks

2015-03-27T00:00:00+00:00

Check out the comment read out at the 6.38 minute mark. Some dude, called Jonathan Gold, writes that the Ionic framework is totally awesome. Coincidence, no that dude is me and Ionic totally rocks.

Web Development Project

2014-11-30T00:00:00+00:00

I’m pitching a web development project to a jerusalem area business. The project involves creating a web app using html, css, AngularJS, and Twitter Bootstrap. I already have a working prototype, but I need to estimate how much to charge my prospective client. Since I’m new to this field, I would welcome any information on the going rates for this type of work. Also, if you have any links to relevant web sites please send them to me.

Thanks

The New Web

2014-11-15T00:00:00+00:00

Slide share presentation.

MongoDB Part 2: Diving Deeper

2014-11-02T00:00:00+00:00

MongoDB is a part of a family of data-storage technologies called document databases; these are sometimes referred to as document-orientated databases, or document stores. In this article, we will take a look at how MongoDB uses documents to store, retrieve, and manage data.

Relational Data

Before diving into how MongoDB’s document model works, let’s take a quick look at how data is stored in a relational database.

In a RDMS, each database includes one or more tables. Within each table, data is organized into rows, and each row contains multiple cells (fields). The data within the tables is subject to a series or strict rules (constraints). Each table row must contain exactly the same number of fields. Each field must contain only a single item of data. The type of data the field stores (numbers, text, dates, etc.) must be the same as all the rows in the same column.

Tables can be linked to other tables through relationships, referred to as joins. All the rules and relationships in the database are collectively known as the schema.

Databases, Collections, and Documents

Like an RDMS, MongoDB also manages multiple databases, but the way it organizes data is very different. For a start, MongoDB does not use a schema, so there are less rules governing how data is ordered and stored.

As we dig deeper into Mongo, the differences between it and traditional databases become more pronounced. Instead of fixed table structures, Mongo databases store loose collections of data, called documents. These should not be confused with single file formats, such as Word documents. A Mongo document is a block of data formatted using a standard notation.

MongoDB formats its documents as BSON objects. This is a binary version of the popular Javascript Object Notation (JSON) web-standard. In both these formats, documents are indicated by a pair of braces {}. Within the braces, the document must include a key value pair. The key is an identifier by which Mongo can locate, organize, and manipulate the data. The value is the value stored in the document. The keys and values can be a number, text (string), or dates. In the following example, the document stores a single value, age; the key is a single word (age) and the value is a whole number (integer).

{ “age”: 40 }

A single value document is not very useful. Fortunately, MongoDB lets you create documents that include multiple key value pairs; with each key value pair separated by a comma. The following example shows a document that describes the protagonist of Jo Nesbo’s detective novels. The character’s first and last name, occupation, location, and age are all key value pairs.

{ 
 “firstname”  : “Harry”, 
 “lastname”   : “Hole”, 
 “occupation” : “Policeman”, 
 “location” : “Oslo”, 
 “Age”: 40 
}

Documents can also include complex data types, such as lists (arrays), and even other documents. In the next example, a list called weaknesses that describe Harry Holes’ major personality flaws. The document’s final block includes two embedded documents that describe some of his enemies.

{  
  “firstname”  : “Harry”,
  “lastname”   : “Hole”,
  “occupation” : “Policeman”,
  “location” : “Oslo”,
  “Age” : 40,
  “weaknesses” : [‘alcohol’,  ‘lost causes’],
  “enemies” : [
    {“alias” : “The Prince”, “occupation” :       “detective”},
    {“alias” : “The Snowman”, “occupation” : “serial killer”}]
}

Creating, Managing, and Viewing Daata

In addition to storing information, databases must also provide some means of creating, accessing and managing data. In a relational database, these tasks are handled by Standard Query Language (SQL). In MongoDB, these tasks are performed via a subset of Javascript. Mongo also gives you a command line shell through which to perform these tasks.

To illustrate, let’s walk through the process of creating a document and inserting it into the database.

Using MongoDB’s command line shell, you can set the database you want to use. If the database does not exist Mongo creates it:

use db

Since a database usually contains more than one collection, let see if there is a collection we can use:

show collections

In our database, this returns:

book
characters
system.indexes
things

Before we add a character to the characters collection, we first create a character.

character = {"firstname":"Harry","lastname":"Hole"}

Then, we add it to a collection called characters.

db.characters.insert(character)

Now that we inserted a character to the characters collection, let’s verify that it was actually part of the collection. First let’s display a list of all the characters in the collection with the find command:

db.characters.find()

This returns the following:

{ "_id" : ObjectId("5198df25805e7637d031c871"), "firstname" : "Rakel", "lastname " : "Faulke" } { "_id" : ObjectId("5198de7d805e7637d031c872"), "firstname" : "Harry", "lastname" : "Hole" }

Note that when you insert a document into a collection, Mongo automatically assigns it a unique ID.

If the characters collection contained many characters, we can locate a single character by their first name. For example:

db.characters.find({firstname:"Harry"})

This will return:

{ "_id" : ObjectId("5198de7d805e7637d031c872"), "firstname" : "Harry", "lastname" : "Hole" }

MongoDB Part 1: Key Values

2014-11-01T00:00:00+00:00

Over the last forty years, relational databases have become the preferred method of persistent data storage for large organizations. They have in fact become so successful that not only are they used by most governments, enterprises, and large websites, you will find them your mobile phone and tablet.

Recently, the Headend Group has adopted MongoDB as our persistent data storage technology for a range of new server products. MongoDB is one of a growing number of NoSQL databases. This article is the first in a series on MongoDB. Future articles will examine how MongoDB works, the issues related to its deployment, and a customer case study.

Since many of you are unfamiliar with non-relational databases, I am going to start this series by providing a general introduction that highlights the historical, technical, and commercial reasons behind the NoSQL movement.

Historical Perspecitive

Non-relational databases have been around since the start of digital computing. After all, NoSQL is just a fancy way to say hash table, dictionary, or key-value store, and there is almost nothing that you cannot accomplish with a NoSQL database, you could not do with a comma separated value (csv) file and a bit of coding. But with the notable exception of Lotus Notes and Telelogic DOORS, relation databases quickly eclipsed alternative technologies.

The Acid Test

Relational databases dominate data storage because they solved many of the issues associated with managing large volumes of data. Perhaps more importantly, they also include safeguards that protect the data they store. Nearly all relational database, include mechanisms that ensure data is not accidentally deleted, overwritten, or corrupted. They also log where, when, and who made changes to the database. At the heart of any relational data base is a series of principals called Atomicity, Consistency, Isolation, and Durability (ACID).

…a set of properties that guarantee that database transactions are processed reliably. In the context of databases, a single logical operation on the data is called a transaction. For example, a transfer of funds from one bank account to another, even involving multiple changes such as debiting one account and crediting another, is a single transaction. (Wikipedia)

Since relational databases are ACID compliant organizations of any size, but especially large conservative organizations, like banks, insurers, multi-national corporations, and governments, not only trust them, but rely on them to store their mission critical data.

Old Assumptions

ACID compliant relational databases were designed for a world dominated by mainframe and mini computers. Many of their technical assumptions were based on the available computer technology of the time:

Disk storage was both expensive, and unreliable
Systems supported a limited number of concurrent users
Solid state random access memory (RAM) was relatively new and expensive. In other words, most data could not be kept in memory, but was written to and from disk. For this reason, modern relational databases try and keep as much data in RAM as possible.
Users accessed databases via character-based terminals

As a result, relational databases were optimized for writing data at the expense of reading data. With improvements in storage technology, graphics, memory, and processing power these restrictions have become less relevant over time.

The Rise of the Web

Improvements in computer technology were not the only reasons for the emergence of alternative data stores. The main catalyst behind NoSQL was the rise of the World Wide Web. In many cases, the web turns ACID upside down. For example:

The number of users served by a large web site was previously inconceivable; Facebook by itself has close to 1 billion registered users.
Most web applications are reading and not writing data.
For most web surfers, data availability and access speeds are more important than its integrity and consistency. For example, a search engine doesn’t need to hold an accurate copy of every single web page to return useful search results.

In this environment, ACID compliant technologies become bottlenecks and restrict system performance. It is therefore no surprise that Google was one of the early pioneers of NoSQL technology. From a historical perspective, you could trace the start of the current NoSQL movement to a 2004 whitepaper written by Google engineers that describes their Big Table database.

Additional Factors

In addition to ACID compliance, NoSQL proponents can cite numerous technical and non-technical factors for their adoption, such as:

The market is dominated by Oracle and Microsoft. Their licensing and support fees are complex and expensive.

Oracle supports most platforms, Microsoft SQL Server only runs on Windows.

MySQL and Postgres provide free alternatives to commercial databases, but support issues confine them to open source and startup projects. Also, MySQL is now owned by Oracle.

Although Microsoft has tried to simplify and automate database management, it is still very hard to manage large databases without a qualified database administrator. Good DBAs are both rare and expensive.

Relational database store data in a flat, table structure. Modern object-orientated programing organizes data into hierarchical trees. In order to pass data between a database and an application, it must pass through a translation layer; and just like humor, data can get lost in translation. While it is possible to change the underlying structure of a relational database, it is not recommended. Furthermore, making ad-hoc changes could corrupt a database. This means that once you finalize your data model, it is almost impossible to change it without breaking it. This frustrates developers that like to make changes when and as they see fit.

Winners and Loosers

In this game, there are no winners or losers. Just because there are alternatives to relational databases, it does not mean that have been superseded. So for the foreseeable future, our CA systems will store entitlements in a relational database.

On the other hand, for storing other types of information, like user preferences or recommendations, there are clear advantages to using non-relational databases, like MongoDB. At the end of the day, we should always choose the most suitable tool for the job, and not the newest and shiniest in the toolbox.

As a side point, it is interesting to note that as NoSQL enters the mainstream, Google is moving in the opposite direction. In October 2012, Google research released a white paper describing Spanner, its replacement for Big Table. Spanner includes many features from relational databases, which ironically, include an SQL-based query language.

In the next article in this series, I will be taking an in-depth look at MongoDB. The article will focus on how MongoDB stores data and how users retrieve it.

Marked Up Part 3: Introducing Javascript

2014-10-03T00:00:00+00:00

One of the biggest differences between HTML 5 and its predecessors, is its Application Programming Interfaces (APIs). The HTML 5 APIs let you automate and extend common tasks, such as file management, geolocation, and media processing. In fact, to understand and get the most out of HTML 5, you can’t avoid JavaScript.

The Good, The Bad, And The Ugly

Until recently, most developers tried to avoid working with JavaScript. To many of its critics, JavaScript is a derivative patchwork of other programming languages. According to legend, it was created in only 15 days; and in the following 20 years, many of its original defects have not been fixed.

Ironically, non of its perceived faults has stopped it from becoming ubiquitous. This has led Douglas Crockford, a senior web architect at PayPal, to write the influential JavaScript the Good Parts. Crockford argues that after you remove the bad parts, you reveal a subset of JavaScript that is reliable, readable, and maintainable.

Up-close And Personal

In order to understand the language in greater depth, let’s look at some of its key features.

Dynamic Not Static

One of the main tasks of any programming language, including JavaScript is to label, store, update, and retrieve individual items of data. Due to the fact that the value of each labeled item changes, individual data items are referred to as variables.

Most programming languages statically type their variables. This means that words, dates, lists, integers, and decimal values must be stored as text or numbers. JavaScript uses dynamic typing, this means that data is stored the same way regardless of whether it is a number, text string, date, etc.. While in many ways, this simplifies programming in JavaScript, it also means that certain types of errors can only be detected when the code is run.

Same As It Ever Was

Since it was originally released in the early seventies, C has become one of the most important and popular high-level language. Like many modern high-level languages, JavaScript uses the same syntax and conventions as C.

This means that if you know how to write a conditional (if or case) statements, or loops (for or while) with C, you should have no problems with JavaScript.

JavaScript also lets you organize code into blocks called functions. While there are some small differences, between C and JavaScript functions, they both accept one or more input, and return a single output.

Objective Truth

Today, most languages support object orientated programming (OOP). Using a traditional OOP approach, programmers organize their code into objects. An object is an abstraction that models the characteristics of a physical object in software.

Each object is a combination of actions (methods) and data (properties). At the code level, developers write classes that describe the object’s methods and properties. In addition to its internal properties and methods, an object can inherit properties and methods from other objects. When the program is run, it uses the class template to create (instantiate) one or many instances of the object.

In JavaScript, the definition of object is broader and less clearly defined, so that:

Individual functions, variables, and lists of variables are considered objects.
An existing object can be used as a basis, or prototype, to create new objects.
It is possible to dynamically assemble new objects from a group of smaller objects.

Proponents of this approach claim that it is more flexible than the OOP, class-based models. It’s detractors claim that it is chaotic and difficult to understand.

A Functional Language

JavaScript is clearly one of the many direct descendants of C. It also also includes many elements of the List Processing (Lisp)language. Lisp was created in the late 1950s for Artificial Intelligence research. It is widely regarded as one of the first functional languages. In a functional language, a mathematical function is evaluated and returns a data set.

Recently, many developers have discovered that functional languages are better suited for managing asynchronous between a web client and a remote server, and its abilities to process complex lists. Since most web development takes place in an asynchronous environment, and is used for processing long and complex lists, it seems a natural choice.

Back To HTML

In the space of a few years, JavaScript has risen from being a necessary evil to the dominant programming language. It is not only available in the browser, but a server side version of the language, called Node.js is becoming increasingly popular. In addition, it has become an essential ingredient in HTML 5. In my opinion, it is now hard to separate HTML 5 from JavaScript. In the next article in this series, we will start looking at HTML 5 and its JavaScript APIs.

Marked Up Part 2: Why do we Need HTML 5

2014-10-02T00:00:00+00:00

In last month’s article, we followed how Hypertext Markup Language (HTML) developed from its humble origins to become the dominant platform for publishing, entertainment, and commerce. Before we can understand how HTML 5 can help us, I want to take a deeper look at HTML’s markup, some of the problems associated with it, and what was missing.

Basic Markup

Let’s start by revisiting HTML’s most basic premise. As its name implies, HTML is a markup language that provides tags for creating web pages. In most cases, with a few exceptions, a tag includes a start <>and </> end tag. For example, to declare a web page you use the <html></html> tags. The web page itself is divided into two parts, a header that includes information about the page, and the body that contains the page’s content:

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body></body>
</html>

The body section includes headings that divide the page into sections of different levels, and paragraphs that indicate body text, and lists, for example:

<h1>Section 1</h1>
<p>In this section...</p>
<h2>Section 2</h2>

These elements can be formatted as bold , italics , etc.

HTMl pages can also include lists, images, links, and tables.

Growing Pains

As content creators and web developers tried to expand beyond creating basic home, it became apparent that HTML simplicity was both a blessing and a curse.

Consistently Inconsistent

For a start, HTML’s structure was inconsistent. Some HTML elements, such as headings, required start and end tags (headings, links, tables, and formatting); some elements (paragraphs, lines, and line brakes), only needed a start tag, while lists (bullets and numbered) were a mixture of both types. For example, the following markup is legal HTML:

<h2>Section</h2>
<p>Para 1
<p><b>Para 2</b>
<ol>
     <li>Point 1 
     <li>Point 2
</ol>

At the time, this was thought of as a convenient shortcut and web browsers were designed to be able to handle HTML’s contradictory rules. As the number of platforms and devices has multiplied, we can no longer be sure that a web page created on one platform’s browser will render correctly on another. As a result, web developers must spend more time designing and testing pages. This is one of the key issues that HTML 5 hopes to solve.

It’s Just Semantics

HTML basic design metaphor was based on print. It uses the same typographical conventions that enable a human reader to infer semantic meaning and hierarchy. Due to its basic design and its users expectations, a web page is a jumble of structure, content, and formatting.

The web evolved quickly and in unforeseen ways. In the early days of the web, all HTML were created by hand and read by humans. While sentient computers, like HAL 9000, SkyNet, or Deep Thought, are still in the realms of science fiction, the main consumers of web content are not people, but machines. This means that if your web page cannot be parsed and indexed by the major search engines, it is as if it never existed. Since Google and Bing make money by selling adverts, if content owners can’t attract readers to their sites, they will not be able to attract advertisers.

More Than Words

In November 2006, Google bought the YouTube video sharing site for $1.65 billion in stock. Apart from the unprecedented sum Google was willing to pay, the deal marked the web’s transition from a text platform to a rich multimedia content distribution platform. In addition to video, the web also provided maps (Google), pictures (Flickr), and music (MySpace).

Video and audio are not the only new forms of content on the web. HTML also lacked good solutions for static and animated content. Before HTML 5, web browsers had to rely on non-native plugins in order to serve multimedia content. At the time, this meant Adobe Flash. Apart from issues related to vendor lock-in and other commercial considerations, Flash also had a number of security issues, as well as performance and bandwidth issues. As a result, both the browser vendors and content providers wanted to provide better solutions.

Moving On

HTML 5 aims to solve these problems. It will also add new features like Geo-location, local storage, and communications. In next month’s article, I will look at HTML 5’s new markup and what it brings to the table. In the meantime, if you want to take a closer look, the HTML 5 spec is a good place to start.

Marked Up Part 1: The Origins of HTML and HTML 5

2014-10-01T00:00:00+00:00

In How HTML5 Crashed, Burned, and Rose Again, Rob Grossberg gives an excellent summary of HTML 5’s long and difficult path towards mainstream adoption. As we enter 2014, it seems that HTML 5 will play an important part within our solutions, platforms, and product. This article is the first in a series that will take a deeper look into HTML. This month I will explain the origins of HTML and why it took almost twenty years to go from the original spec to version 5.

What Is HTML

HyperText Markup Language (HTML) was originally created by Tim Berners-Lee, a contractor working at CERN in the late eighties. HTML was designed to provide a simple method for sharing knowledge. Using a system of tags, it enables you to created a formatted page with text, graphics, and links to other web pages.

For example:

<h1>Heading</h1>
<p>paragraph</p>

Following the release of the Mosaic browser in 1993, HTML became the standard method for creating web content. In 1994, Tim Berners-Lee left CERN to create the World Wide Web Consortium(WC3). The WC3 became the owners of the HTML specification.

The Browser Wars And Their Aftermath

In the mid- to late-90s, Netscape Navigator and Microsoft’s Internet Explorer engaged in a long and protracted struggle. Each vendor tried to lock users in with their own propriety extensions to HTML and other web standards. The release of the HTML 4 standard coincided with the end of the browser wars.

In the war’s aftermath, HTML was eclipsed by the rise of a new markup language called XML. Since the WC3 managed XML and HTML, it created an XML/HTML hybrid called XHTML. By 2008, it was clear that XHTML was not going to replace HTML, and the WC3 abandoned the project.

The New Web

In its original form, web browsers were little better than dumb terminals. For example, when a user clicked a link or pressed a button on a page, a request was sent to a server. The server would handle all the processing, and generate a web page. If the connection was slow or broken, the user was stuck in limbo.

Following the introduction of newer web technologies, the balance of power was shifted to the browser. Now, when the user clicked a link or button, the server would respond by sending data back to the browser. The browser stored this information locally. By eliminating the need to maintain an open connection to a server, it was possible to create browser-based apps, like Google’s GMail.

Two further developments spurred the growth of these new web apps. Firstly, following Google’s lead, many services switched from a subscription to ad-based revenue model. In addition, the growing availability and decreasing cost of domestic broadband made YouTube, Flickr, and Facebook possible.

The Rebirth Of HTML

By 2005, a new generation of companies and services had reawakened interest in the web. Over time, new browsers were released that were better suited to these apps than Microsoft’s antiquated IE6.

Unfortunately, no matter how good a browser was, none of them could overcome the fact that HTML had not kept pace with the demands of the web. For example, HTML 4 had no native method for handling streaming video. The closest thing to an industry standard video player was Adobe’s proprietary Flash browser plug-in. Although nearly all video sites used Flash, Flash itself suffered from both security and memory related issues.

While the WC3 was promoting its XHTML standard, Opera, Mozilla, Apple, and Google formed the Web Hypertext Application Technology Working Group (WHATWG). Eventually, the WC3 also joined the process, and by 2010, they released the initial draft of the HTML 5 spec. While Microsoft did not take part in the process, the current generation of IE does comply with the spec.

What’s Nexts

One of the main promises of HTML 5 was the potential for a consistent, cross-browser and cross-platform user experience. Over the last four years, each of the browser vendors has made great strides in this direction, but their implementations still remain inconsistent. While there is no perfect HTML 5 browser, the differences between browsers is getting smaller.

This is one of the reasons that we are seeing more interest in HTML 5 within our industry. For content producers and distributors, HTML 5 has the potential to provide a solution for delivering content over a range of platforms and devices. For this reason it has been adopted by a growing number of companies, including YouTube, NetFlix, Vimeo, Disney, and HBO, as well as others.

In next month’s article, we will explore HTML 5 in greater depth. The article will focus on those features most relevant to us, such as its graphics, animation, and native audio and video support.

Cloud Collaboration: Why You Should be Looking at Github and Related Services

2014-08-01T00:00:00+00:00

Over the last few years, the word “cloud” has become attached to nearly everything computer-related. This obscures the fact that the cloud and cloud computing are revolutionizing the ways we collaborate and deliver products and services. In order to understand how things have changed and what cloud-based collaborating and delivery could look like, we need to look at GitHub.

The Github Phenomenon

GitHub is a massive social network dedicated to storing, managing, documenting, and distributing source code for programmers. Since its launch in 2008, GitHub has supplanted SourceForge, Google Code, and CodePlex as the primary open source repository on the web. Most major tech companies, including Amazon, Facebook, and Microsoft integrate their products and services with it.

In addition to hosting open source projects, it provides a range of commercial products and services. Increasingly, GitHub’s commercial offerings not only appeal to independent developers and startups, they are gaining acceptance with medium- and large-size corporations.

GitHub is not just for developers. Internet theorist and commentator, Clay Shirky, devoted an entire TED Global talk to GitHub and its potential impact. He cited initiatives to use it for managing and archiving the legislative process, promoting democracy, and local activism.

Git And Github

GitHub started as a web-based extension of the Git source control utility. It was originally developed by Linus Torvalds, of Linux fame, for open source Linux Kernel development. Since the project contributors are both remote and located across the world, Git was designed to provide, peer-to-peer based system, known as distributed version control.

In this model, each contributor commits new files or edits to existing files to a local code repository. When they are ready, these changes are pushed to a central repository and merged with the existing code base. While Git is harder to use than older or other distributed version control systems, it provides a higher degree of flexibility.

Why Github Matters

While one could argue that GitHub is just a fancier version of DropBox or Google Drive, most file sharing services are just a public folder, while GitHub:

Records and stores a complete and transparent history of project contributions. It also simplifies managing and merging contributions from multiple sources.
Supports both distributed and centralized workflows. Contributors can pull and push contributions remotely from their local machines. Or they create and edit files on Github’s web site.
Provides a range of tools that includes documentation management, issue tracking, release management, and analytics.
Enables projects to create project homepages, using automated tools and templates.

Apart from its collaboration tools, GitHub is becoming an important tool for delivering and deploying cloud-based projects. Specifically, all the major cloud providers and services enable you to deploy projects from GitHub. With the rise of continuous delivery and deployment methodologies on the one hand, and the increasing use of cloud services on the other, the number of enterprises using GitHub as a deployment platform will increase.

Github’s Influence

As GitHub expands into new areas, and tries to attract non-technical users, we are also seeing the rise of a number of GitHub type services. For example, instead of writing this article in Microsoft Word, I decided to use a new web-based service called Drafts. Using the popular Markdown markup language (also supported by GitHub and StackOverflow), Drafts lets you create, share, and publish documents in a browser. Drafts is trying to be the GitHub of documents. It is not alone. Recently, a similar service, called Quip, launched its mobile and web document platform.

Proceed With Caution

The adoption of cloud-based services is being driven by a mixture of falling prices, convenience, and ease of use. This may be part of the reason that the Andreessen Horowitz venture capital fund, invested $100 million in GitHub.

It should also be noted that GitHub and other providers are not immune to the serious security, regulatory, and management issues, associated with cloud computing. In early October, GitHub was the target of a distributed denial of service (DDoS) attack on its servers. As more companies use GitHub’s services and infrastructure, its potential benefits must be balanced against the risks.

Final Thoughts

Over the next few years, it is quite possible that the GitHub phenomenon will pass us by and we can continue to collaborate and delivery projects using current practices. While I am willing to concede that it might not be GitHub, there is a strong possibility that we will be using an on-premise or vendor-based service like it.

If you want to get a head start, there is a wide range of articles and tutorials on the web. You can also take a look at the repository for my Maps of Love project, written to support the tracking of riders participating in a trans-Israel charity bike-a-thon. The project’s home page is also hosted on GitHub.

Angular is Awesome

2014-05-24T00:00:00+00:00

PDF of my Angular Ignite presentation

Maps of Love

2013-09-16T00:00:00+00:00

mapsoflove 0.2 for Android is available from the Google Play store. This version includes maps and descriptions for the off-road, on-road, challenge, and touring rides.

To download the app go to https://play.google.com/store/apps/details…. To learn more see the Maps of Love blog http://blog.mapsoflove.net/ or the Maps of Love Project Page http://projectpage.mapsoflove.net/

Tablet Show 59

2012-11-20T00:00:00+00:00

GTrack App mention on Tablet Show 59. See link for details http://gtrackapp.blogspot.co.il/…/gtrack-app-mentioned-on-t…

Tablet Show Comment 43

2012-08-19T00:00:00+00:00

Second honorable mention. My comment on Tablet Show 43 was quoted in show 45: http://thetabletshow.com/?ShowNum=45

In Beta: Episode 10

2012-08-09T00:00:00+00:00

Just heard my feed back to an episode of the In Beta podcast read out by the hosts. Check out the last five minutes of http://5by5.tv/inbeta/10

jonnygold.net blog

MVDS.digital: The New Home for MVDS Services, Resources, and Content

Services

Blog Posts

CalCom Articles: June to July 2025

Credited

Uncredited

Accelerated Angular Part 9: Managing Tasks

Display Profile and Task Data

Managing Tasks

Updating the Tasks Component

Modifying the Profile Component

Conclusion and What’s Next

Accelerated Angular Part 8: Integrating APIs

Key Concept

Services

Reactive Javascript Extensions (RxJS)

Cross-Origin Resource Requests

Task Management API

Configuring the HTTP Client

Handling CORS

Creating a Service

Referencing the HTTPService

Authenticating Users

Retrieving and Displaying Tasks

Conclusion and What’s Next

Accelerated Angular Part 7: Passing Data Between Components

Key Concept

@Input Directive

@Output Directive

Passing Data to a Component

Return Data to a Parent Component

Referencing Page Components

Conclusion and What’s Next

Accelerated Angular Part 6: Creating Reusable Components

Key Concept

Component Metadata

Referencing Subcomponents

Creating a Navigation Bar

Adding a Footer

Referencing Page Component

Conclusion and What’s Next

Accelerated Angular Part 5: Styling with Bootstrap

Key Concepts

CSS

Bootstrap

Installing Bootstrap

Applying Bootstrap to the Login Page

Updating the Tasks Page

Conclusion and What’s Next

Accelerated Angular Part 4: Components and Presenting Data

Key Concept

Components

Directives

Building the Tasks Page

Extending TasksComponent

Declaring Task and User Data

Initializing the Tasks Component

Presenting Tasks Data

Conclusion and What’s Next

Accelerated Angular Part 3: Forms, User Interaction, and Presentation

Key Concepts

Template-Driven Forms

Reactive Forms

Component Setup

Declaring and Initizialing the Form

Add the Form Template

Authenticating the User

Displaying Tasks

Conclusion and What’s Next

Accelerated Angular Part 2: Building and Linking Pages

Key Concepts

Routing

Angular Router

Removing Boilerplate Code

Creating Components

Adding Routes

Navigating Between Pages

Conclusion and What’s Next

Accelerated Angular Part 1: Getting Started