DEV Community: Ben Butler

AWS is Charging for Every IPv4 Address Soon. Workarounds?

Ben Butler — Sat, 21 Oct 2023 15:02:53 +0000

AWS has let everyone know they are going to be charging $0.005 USD per hour per IP for every IPv4 address starting in February 2024, whether the address is in-use or not (currently if the address is in-use, it's free). The best solution, as suggested in that blog post, would be to move the whole world to IPv6, but we've been trying to do that for way too long and it hasn't happened yet.

Anybody have other workarounds to minimize cost for those of us running a small site tied to our own domain? Thanks.

How should we "fix" recruiting?

Ben Butler — Fri, 21 Jun 2019 22:20:02 +0000

Do you think the tech community needs a new recruiting or staffing model? There seems to be a large amount of agreement that recruiting, interviewing, and staffing in tech is "broken" (with many more development jobs than people), but there aren't many "fixes". One concept is to put developers first with some sort of company (startup?) that solves common recruiting issues like making commissions/hourly rates transparent, offering to replace code exercises or technical interview "whiteboarding" with vetted personal web sites, and actually having recruiters that have technical knowledge (enough to Google acronyms, at least!)

Anyone have other ideas? How does this sound?

Angular Data Tables for jQuery DataTables Developers: Let's Make it More Interesting

Ben Butler — Mon, 17 Jun 2019 18:40:40 +0000

Let's Make it More Interesting

We just created a very simple table, but how do me make a table in Angular Material that actually has the features we've come to depend on in jQuery DataTables? There is no one "right" answer, which is actually pretty great (a large part of Angular's power lies in its flexibility). That being said, let's start by mimicking the "default" functionality of jQuery DataTables with a simple "search all" at the top of the table and pagination at the bottom. (with a more diverse set of data). We're going to mainly use a combination of this example and this tutorial, however we are going to use our API data (unlike the first example), are going to modify the tutorial example to use a different means to get our data upon search (largely to show we can) and finally are going to use Angular 7 (the tutorial uses Angular 6, and the largest change is mapping our data return and making use of switchMap in the Observable we subscribe to, as in the example above).

First, let's add our search element following largely the tutorial's example, as the example from the Angular Material Documentation "works" without issue, but lacks a great deal of flexibility due to the fact that it embeds the keyup() function inside of the HTML:

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

The approach used in the tutorial is much more flexible and (as mentioned there) allows us to prevent overwhelming our (or another person's) API with a ton of requests on each user keyup/keydown event. It (and this example) first begins with a native input element:

<mat-form-field>

    <input matInput placeholder="Search" #input>

  </mat-form-field>

Then (after starting with blank content in that filter, shown in the complete component here we can move along to determining if a user "really wants" to search by including an RxJS debounceTime (which you can of course adjust depending on user experience and API rate) and RxJS distinctUntilChange (which prevents hits on the API when there is no change in the filter criteria):

fromEvent(this.input.nativeElement, 'keyup')
  .pipe(
    debounceTime(200),
    distinctUntilChanged(),

Now whenever the content of the "Search" field changes, it will be passed to the employee service's getEmployees function as a parameter, and in turn passed along to the API:

getEmployees(sortDirection: string, sortParameter: string, filter: string, start: number, end: number): Observable<EmployeeApi> {
  sortDirection = sortDirection.trim();
  sortParameter = sortParameter.trim();
  filter = filter.trim();

  //toString is necessary here because httpClient does not support anything but strings 
 let httpParams = new HttpParams({
   fromObject: {
     sortDirection: sortDirection, sortParameter: sortParameter, filter: filter,
     start: start.toString(), end: end.toString()
     }
 });

You may have noticed that function and service overall are not much different than the Departments Service and its getDepartmentsfunction. In fact, we've just added a few parameters. Those of us migrating from jQuery DataTables Server-Side processing might already spot an advantage: I've used a standard and conventional Controller in the API that is really not customized for this table at all. In fact, even if I did not have the ability tocustomize this API, it would be reasonable to expect to pass in a filter and get results. Server-side jQuery DataTables has rather strict requirements for the server-side script, thus making it difficult to implement if you lack access to an API, or want to reuse an endpoint for another application.

There is also a very solid implementation of pagination in that tutorial (with a flexible number of rows per page), and it's not tough at all to add it to our table and make it function largely like the familiar DataTables component. It depends on resultsLength, which is easily obtained from the "count" in the "API" interface. First, we'll add a "mat-paginator" element to the bottom of the table:

<mat-paginator [length]="resultsLength" [pageSize]="10" [pageSizeOptions]="[10, 20, 50]"></mat-paginator>

Then, back in the employee table component, we'll make use of the RxJS Merge function to emit the values of a change in the sort parameter and (now) the pagination element (note that we are also resetting pagination to page zero when sorting changes):

this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
this.sort.direction = 'asc';
this.sort.active = 'emp_no';
this.paginator.pageIndex = 0;
this.paginator.pageSize = 10;
this.input.nativeElement.value = '';    
this.sort.sortChange.subscribe();
this.employeeService = new EmployeeService(this.http);
merge(this.sort.sortChange, this.paginator.page)
  .pipe(
    startWith({}),
    switchMap(() => {
      this.isLoadingResults = true;
      return this.employeeService!.getEmployees(
        this.sort.direction,
          this.sort.active,
          this.input.nativeElement.value,
          this.paginator.pageIndex,
          this.paginator.pageSize)
        }),
        map(data => {
          // Flip flag to show that loading has finished.
          this.isLoadingResults = false;
          this.resultsLength = data.total_count;
          return data.items;
        }),
      ).subscribe(data => this.data = data);
  }

Now whenever the user changes the pagination, filter, or (like the first, very simple table) sort parameter, we make another request to the API for the data. This now looks, feels, and functions very much like a jQuery DataTable, as you'll notice:

(click here for the complete, live example).

If you take a look at the complete HTML of the table component, you'll note that I've added some other small "tweaks", such as disabling sorting on the two date fields (simply because sorting by date is painfully slow on my very small database server). These changes are very easy, and even fairly large visual and functional modifications aren't difficult, as you'll notice from the complete set of examples on the Angular Material Documentation page (which is frequently expanded) now that you have a functioning table.

Angular Data Tables for jQuery DataTables Developers: A Simple Start

Ben Butler — Mon, 17 Jun 2019 18:07:51 +0000

DataTables vs. Data Tables

If you've been developing for a "while" like I have (so you also feel old), there's a decent chance that you've used jQuery on the front end (or still use it) and thus have made use of jQuery DataTables (all one word). There's also a decent chance that you're moving to newer JavaScript (well, TypeScript, in this case) frameworks such as Angular for your "greenfield" (new code) projects to create SPA (Single Page Applications), which many would agree is the best approach.

So, how would you use Data Tables (two words) in Angular Material to create tables that function like jQuery DataTables? Let's go through how Angular Material Data Tables works, how it compares to jQuery DataTables, and how to create similar elements with the same data.

To get some "housekeeping" out of the way, all of the examples I link to on my site and show images of here use the Employees Sample Database, which as I noted there is used on the jQuery DataTables site as well. To use that data with this example, I retrieve it from an API I wrote in Laravel Lumen, but obviously you can use any API and database you want to get data into your Angular project. I'm also going to assume basic knowledge of Angular 8, including HttpClient. I would also highly recommend you take a look at the CDK table documentation on the Angular Material site (which I missed/skipped the first time I read the docs due to the fact it's pretty much mentioned as an aside) as I found it pretty vital to get a solid understanding of how exactly Angular Data Tables work and how to customize them. With all that said, let's move on to a simple example.

I'm skipping the "Getting Started" tutorial with a static array, because it's already there, and (as that tutorial mentions), there is virtually no "real world" use for a table built from a static array in the front end. I'm instead going to move on to what amounts to the previous practice of "AJAX-ing in" data, very much like this function my "old site", using AJAX:

function initDeptTable () {
  var table = $('#employee-dept').DataTable({
  "ajax" : {
  "url" : '../main/php/serverHTML.php?type=JSON&content=employee-dept',
  "cache": false,
  "contentType": "application/json",
}

I've based this update example largely based upon the "Table retrieving data through HTTP" example here, with a large number of "tweaks" because I had the ability to use multiple services/classes/interfaces/etc, and my own API.

In that example, there are two simple interfaces, one for the collection of items and a count of those items and another for the items themselves. This is a solid practice (and as you might guess it's typically best to do the count on the back end if you have control over the API). The only change I made was to break these up into multiple files:

export interface Department {
  DepartmentName: string;
  DepartmentNumber: string;
}

import { Department } from './department.model';

export interface DepartmentApi {
    items: Department[];
    total_count: number;
}

As compared to jQuery DataTables, this might seem a bit complicated (and there is a little more work so far), but keep in mind we're getting dynamic table content and this is our means of reformatting the JSON into the specific format we need, removing the need to reformat it on the back-end or with custom JavaScript. I had to use this PHP to reformat my previous JSON like this for jQuery DataTables. With more control over each step of building the table, we also gain more flexibility. For example, I'm going to integrate some of this tutorial (note it's for Angular 6, but we can still use most of it). Specifically, the concept of using an observable for our data instead of MatTableDataSource (here's why). Here's a service that provides that Observable:

import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { HttpClient, HttpParams, HttpErrorResponse } from '@angular/common/http';
import { catchError, retry } from 'rxjs/operators';

import { DepartmentApi } from './shared/department-api.model';

@Injectable({
  providedIn: 'root'
})
export class DepartmentsService {

  constructor(private http: HttpClient) { }

  DepartmentUrl = 'https://api.benfrog.net/departments';



  getDepartments(sortDirection: string, sortParameter: string ):Observable<DepartmentApi> {
    sortDirection = sortDirection.trim();
    sortParameter = sortParameter.trim();

    let httpParams = new HttpParams({ fromObject: { sortDirection: sortDirection, sortBy: sortParameter } });

    return this.http.get<DepartmentApi>(this.DepartmentUrl, {params: httpParams})
    .pipe(
      retry(3), // retry a failed request up to 3 times
      catchError(this.handleError) // then handle the error
    );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        'Backend returned code ${ 'error.status'}, ' +
        'body was: ${ 'error.error'} ');
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  };

}

What we are doing here is providing an Observable that calls the HttpClient's http.get() function, expects a return as a "DepartmentApi" object (the array of Department objects and the count of those object), and implements some simple error handling:

return this.http.get<DepartmentApi>(this.DepartmentUrl, {params:                                httpParams})
    .pipe(
      retry(3), // retry a failed request up to 3 times
      catchError(this.handleError) // then handle the error
    );
  }

In the Department Table Component's ngOnInit function (which works much like the oft-usedjQuery $(document).ready() function), the constructor requires its own private instance of HttpClient, then passes it along to an instance of the above departmentService, which makes use of it to get our API data (the entire component is here):

this.departmentsService = new DepartmentsService(this.http);
     merge(this.sort.sortChange)
      .pipe(
          startWith({}),
          switchMap(() => {
            this.isLoadingResults = true;
            return this.departmentsService!.getDepartments(this.sort.direction, this.sort.active)
          }),
          map(data => {
          // Flip flag to show that loading has finished.
          this.isLoadingResults = false;
          this.resultsLength = data.total_count;
          return data.items;
        })).subscribe(data =>this.data = data);

A large amount just happened in a small amount of code, which is a great feature of Angular provided it does not contribute to confusion on the part of the developer. Let's break it down (and it's also a great idea for this or any other data flow to make use of the excellent stack trace tools we have now such as the the Visual Studio Code Debugger for Firefox or Chrome.

First, we have an (admittedly unnecessary) RxJs Merge (we're actually merging the matSortChange event with nothing, but can add events if necessary), then using the RxJS Observable.pipe function, as documented here.

Step by step, the pipe uses the literally-named RxJS StartWith() function to begin with an empty observable, then the RxJs switchMap function (there's a deep div into how switchMap works
here essentially switches around that empty observable with the output of departmentsService.getDepartments() when we start to get data from that service. The map function then removes a cosmetic loading flag, sets the resultsLength variable equal to data.length, and finally returns the array of items (a Department[] object). Because we subscribe to this observable, whenever the department data updates our table will update. If this sounds familiar, it's likely because it shares that advantage with jQuery AJAX (an observable is actually much more sophisticated and flexible, in that it does not require a direct call to update our table data).

The completed sample table's HTML is here. I've made very few changes from the above examples, and we finally get this (very simple) table:

At this point, anyone could be forgiven for asking if all of that was "worth it", particularly since we still don't have base elements from jQuery DataTables such as search and pagination. However, we're going to move on to showcase the power and flexibility of Angular to implement those features (with newfound flexibility) in the next example.