Reactive Programming: A Timed Popup Component with RxJS

Reactive programming is all about streams. It involves combining streams, filtering streams, and transforming streams. In reactive programming, the application does not need to pull for data, but it is notified whenever a new event occurs.

A few months ago, I wrote a post on reactive programming in WPF using ReactiveUI. Recently, we’ve been working on an Angular project and have been using the RxJS library for reactive programming in JavaScript. RxJS follows the reactive programming pattern of observers consuming data by subscribing to the observables. It also implements a set of operators such as map, filter, and reduce, which (generally speaking) take an observable, mutate it in some way, and then return the mutated observable. Read more on Reactive Programming: A Timed Popup Component with RxJS…

Creating a Drag-and-Drop File Uploader with React & TypeScript

A while ago, I was working on a project based off the Atomic SPA Starter Kit, which uses TypeScript, React, and GraphQL. One of the features we needed to build was a file upload component that supported dragging and dropping a file from a separate window onto the UI. Read more on Creating a Drag-and-Drop File Uploader with React & TypeScript…

Four Hurdles when Prototyping with Material-UI for React

Google created the Material Design design language to be used across devices. If you’re using Material Design with React, I’d recommend Material-UI for React to get the ball rolling. It’s a library of components or pre-styled elements (similar to the Bootstrap framework) that are easy to add to a page, and the components look and function well out of the box. Read more on Four Hurdles when Prototyping with Material-UI for React…

Creating a Custom Gboard Sticker Pack – A Guide for Android Newbies

Recently, Google started allowing developers to create custom sticker packs for Gboard on Android. In case you’ve never heard of Gboard, it’s Google’s latest virtual keyboard. Available on both iOS and Android, Gboard is an all-in-one keyboard that includes glide and voice typing, a predictive word engine, and stickers. It is also the built-in keyboard on my Pixel. Read more on Creating a Custom Gboard Sticker Pack – A Guide for Android Newbies…

Resolving Error: “Objects are not valid as a React child”

When building a React component, I ran into this error:

Objects are not valid as a React child (found: object with keys...

Invariant Violation: Objects are not valid as a React child (found: object ...). If you meant to render a collection of children, use an array instead....

Read more on Resolving Error: “Objects are not valid as a React child”…

How to Dim the Background of a Popover on iOS

The design for a recent project called for the contents of the popover view to be emphasized prominently. Specifically, the design wanted all the views behind the popover to be dimmed.

By default, iOS will put a radial gradient around the popup to draw attention to it, but I needed something more. In this blog post, I’ll show you how you can dim not only the view behind the popover, but also the status and navigation bar. Read more on How to Dim the Background of a Popover on iOS…

Managing Data Loaders in Node.js with Shared State

When developing software, it’s always tough to work with caching. While my team appreciates the efficiencies that Data Loader can provide for applications, we still struggle with the same problems that always come up when caching queries, mainly invalidating caches when a data set has changed. Read more on Managing Data Loaders in Node.js with Shared State…