Building autocomplete for those who use computers differently

Clay pots
Clay pots
Photo by Tom Crew on Unsplash.

It’s very easy to understand the functionality of common tools used on the web. A common oversight but essential part of developing these tools is to ensure that they are accessible to everyone. Like most other engineers, I was taught to build tools to be functionally sound. Accessibility has always been an afterthought.

“You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances. Just as it is wrong to exclude someone from a physical building because they are in a wheelchair (modern public buildings generally have wheelchair…


Pluck, Defer, FromEvent, and more

Image for post
Image for post
Photo by Toa Heftiba at Unsplash

When using RxJS, often people remember the array operators such as map, filter, reduce, etc…

Although I highly recommend using them whenever possible for the right reasons, it can be also said that using another operator that is more specialized can result in the possibility of a smaller code print or improved readability for another developer.

Here, I will try to highlight some that I use when these scenarios arise.

1. Pluck

Maps each source value (an object) to its specified nested property.

Let’s start off with, which can be very similar to, however, it only takes one selected property off every…


Create an effective drag and drop container using only RxJS

Image for post
Image for post
Photo by João Silas at Unsplash

Drag and drop has been a necessary feature for many web applications, whether for uploading images or reorganizing information. It is an intuitive way of giving user interaction, without the need for words.

This is what we will be creating today!

I’ll start off by defining RxJS, in case this is the first you’ve heard of it.

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.

Basically, it allows the developer to break down multiple async code and compose them…


A quick overview of a powerful feature

Image for post
Image for post
Photo by Joshua Ang at Unsplash

TypeScript has provided us with many opportunities for JavaScript. One of those is type safety checking at compile time.

In this article, we will briefly go over how we can enhance our code base by using generics instead of ignoring the types by using any.

If you are experienced with server-side languages, such as C#, Java, etc., you would already have an understanding or at least been introduced to how it works.

Take, for example, the function below:

Now, that is a basic function. Our definition is simply to add two variables.

If the variables are numeric, it will…


A quick introduction to a popular feature

Image for post
Image for post
Photo by Jack Ross on Unsplash

If you are new to RxJS, you have been missing out!

No worries, though. Now is a great opportunity to start getting involved. In this piece, you will learn how easy it is to create a drag and drop for any element.

I won’t go in-depth about RxJS today. I just wanted to make something quickly, as this feature is regularly requested.

Let’s begin with the element which you would like to be dragged.

Now that we have the element set up, it is time to wire up the JavaScript/TypeScript. …


Consider using the unsung feature of decorators to power-up your angular web application

Image for post
Image for post

In this post, we’ll learn what decorators are, why they’re useful, and how to create them. We’ll do this with TypeScript — demonstrating how useful this is in the angular framework.

Decorators???

In truth, decorators are not a part of ES6. However, in keeping with the nature of TypeScript they’re currently an experimental feature, which can be enabled by adding:

If you need more details about the draft, head over to the TC39 proposal for decorators.

OK, and…???

Hold on! I just want to make it clear that decorators are not a part of TypeScript by default and certainly not a part…


How to defer loading for increased performance

Image for post
Image for post
Photo by BRUNO CERVERA on Unsplash

This is a pretty quick post about Angular directives and how to use some new browser APIs to achieve them.

These can also can be used outside of Angular. The code isn’t too attached to a framework because the underlying functionality is really just JavaScript.

In this current environment, applications need to load fast and have many assets (images, fonts, translations, etc.). Performance is on everyone’s mind, or at least most people’s.

One technique to achieve this is to use lazy loading.

Lazy loading is a technique that defers the loading of non-critical resources while the page is initially loading…


Part 1: Highlighting a common scenario in Angular when using forms

Image for post
Image for post
Photo by Sergey Zolkin on Unsplash

This is part 1 of 3 where we highlight a common scenario in Angular when we use forms, especially with autosaving.

  • Part 1: Highlight the situation and handle it with RxJS.
  • Part 2: Enhance with NgRx.
  • Part 3: Compartmentalize and simplify with Nx.

Now, this will only highlight a very minimal use case, using ngModel, but it can be applied to very complex forms for both reactive and template-driven forms.

The Situation

Let’s say we have a text area for comments and a button that goes to a different page to view all your comments.

The comments get updated when the…


Observables are really powerful as they offer a great opportunity for handling async functionality in a succinct manner

Image for post
Image for post
Photo by Matt Botsford at Unsplash

“With great power comes great responsibility.” –Amazing Fantasy #15

A very important part in RxJS is to ensure that your observables have a shelf life and that they are deterministic. They should not live on forever or else they’re a potential risk for a memory leak.

The example below highlights how having a service that returns data over a period of time seems to work fine on the surface.

Component One has a service that is subscribed to on the template and has navigation to Component Two.

Component Two navigates back to Component One.

No problem, right?

Wrong — Take a Closer Look

When…

Nicholas Cunningham

Software Engineer | Blogger

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store