Web Apps

Redux Thunk Best Practices for Loading Initial Data

Every application needs to handle a couple of tasks: loading initial data for users and determining what page or screen they land on. Despite being order-dependent, this logic is often scattered into various parts of the application. This can lead to subtle bugs and makes it hard to answer simple questions like, “What will the user see when they log in?”

Redux and Redux Thunk are great for structuring front-end logic, but without a strategy for handling loading, the logic can still get out of control. Read more on Redux Thunk Best Practices for Loading Initial Data…

Generating Excel Files using Node.js and ExcelJS

Recently, I was tasked with writing some code to generate Excel workbooks containing sales data. I implemented the code using a Node module called ExcelJS. I found that this module provides a simple interface to generating documents, and it also supports more advanced functions such as text formatting, borders, formulae, and more. Read more on Generating Excel Files using Node.js and ExcelJS…

Using Angular Content Projection to Draw Smiley Faces

When working in Angular, it’s pretty straightforward to create components and nest those components inside of other components. However, it is a bit more complicated to design customizable components that will display content based on the components passed to them (content projection). Read more on Using Angular Content Projection to Draw Smiley Faces…

Getting, Setting, and Understanding Web Cookies using Express and WebdriverIO

Cookies, both the tasty kind and the web browsing kind, aren’t new to me. I’ve clicked my fair share of “this site uses cookies” pop-ups, but until recently, I hadn’t encountered cookies in my work as a programmer.

Being newly tasked with the configuration and testing of cookies, I realized that, although cookies are ubiquitous on the web, I had glossed over several important aspects. While trying to fill in the gaps in my understanding, I had a hard time finding a source that answered all of my cookie-related questions. I hope that this blog post will serve as that resource for others. Read more on Getting, Setting, and Understanding Web Cookies using Express and WebdriverIO…

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…

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…