Image for post
Image for post
Photo by Paul Zoetemeijer on Unsplash

NgRx is great, but the amount of boilerplate can be overwhelming. In this post I show two packages that can help drastically reduce the amount of boilerplate you have to write. Plus, there are other benefits for better type checking, and more efficient immutability.

NgRx actions, in their most basic form, can just be a simple POJO (plain old JavaScript object) that conforms to the following interface:

interface Action {
type: string;
}

We can benefit from strong typing by using an enum of types, defining Action classes, and a type union to combine the action class types. …


zip.js is an open-source library (BSD license) for zipping and unzipping files in JavaScript. It uses a Web Worker to do the actual Zip file processing. Here I explain how I got this working in Angular…

Image for post
Image for post
Photo by Tomas Sobek on Unsplash

You don’t need all of the files from zip.js to make this work. You only need these 4 files listed below. Copy them into your Angular project. Put them in your src/assets folder as you need them copied into your build output.

The files need to be copied across into the build, because they are loaded directly by the browser to register as a web worker. Linking the scripts directly from the built assets folder is the easiest method I found to do this. …


Image for post
Image for post
Photo by chuttersnap on Unsplash

Working serverless with Angular and Firebase is great, but sometimes there’s a requirement that seems hard to achieve. Firebase Storage allows you to set complex security rules to manage access per user, and you can restrict upload size on a per-file basis. But, what if you need to restrict user uploads based on a per-user quota? This can be achieved by using Firebase Cloud Functions and Custom Auth Tokens.

First we define Firebase Storage security rules that allow users to upload to their own private area within the storage. Users can only read files that are prefixed by their user ID. They can only write to paths where their user ID matches AND the file path (resource.name) matches the path in the token AND the file size (resource.size) …


Image for post
Image for post
Photo by Austin Neill on Unsplash

There’s a new state management option for Angular, called NGXS. Having just completed a large Angular project, with complex state management requirements, I was interested to find out more about it.

A demo app has been provided to show how NGRX and NGXS compare. The way the NGRX code is presented in the demo app does not reflect how I had been working with NGRX, so I wanted to address this. I use the unionize library along side NGRX for “Boilerplate-free functional sum types in TypeScript”. I have extended the “ngxs vs ngrx” demo app to include a third example that shows the ngrx with unionize option. …


Yet another counter example.

NgRx is an implementation of Redux, in Angular, using RxJS. It’s genius. It combines the power of Redux and RxJS, and helps to create scalable architecture when dealing with large applications.

But, the downside is that it needs a lot of boilerplate code.

That is where unionize really helps.

I’ve been using unionize for the past few months, on a large and complex codebase. This app had some unique requirements, and managing state in NgRx really helped. Using unionize helped to keep the NgRx code consistent, and manageable.

I’ve created a small barebones to demonstrate how unionize can be used with NgRx here: https://github.com/darrenmothersele/ngrx-unionize-counter


I wrote most of this article about 6 months ago as a cathartic exercise. It was not originally intended for publication. After 10 years of using Drupal as my main technology, I started to branch out into other technologies. I noticed I was enjoying working with other technologies more than Drupal. Where I had enjoyed Drupal, it was now a regular source of frustration.

Drupal Was the Answer

Up until recently, Drupal was the answer. It didn’t really matter what the question was. For me, the answer was almost always Drupal.

Image for post
Image for post
Source: Google Trends (Search term = Drupal)

I feel lucky to have ridden the Drupal wave. Through life’s ups and downs Drupal provided a stable platform for me to grow my freelance web development and consulting business. I’ve had the pleasure of working on some amazing projects. From small boutique operations, through to huge flagship Drupal sites for major corporations. From simple websites, through to full-blown apps built on top of Drupal. …


A few months ago I was playing around with the Web Audio API and Angular v4. The results of this experimentation was a “modular synth” like GUI for creating horrible “Web Audio” noise using Tone.js. You can find the code in this GitHub repo or see the real thing here. It looks like this:

Image for post
Image for post
Tone Lab — Modular Synth GUI with Web Audio

I wanted a minimal UI — and didn’t want to mess around trying to style up HTML elements with CSS. So, I decided I would use really simple SVG controls.

To do this I generated the SVG using Angular (v4 at the time) within my components for the controls. …


UPDATE 26th Feb 2018: I have added a new v6 where I switch to using unionize to help reduce the amount of boilerplate needed when working with NgRx.

I’ve worked on a few Angular projects over the past 18 months. There’s a lot to learn from working on real-life apps, a large code base, with lots of components. But, I also like creating simple sketches. Small example apps that let you focus on one specific detail. Here I document a sketch I’ve created that looks at various ways of loading data in Angular.

This particular sketch is a partial review of my journey with Angular. I started with loading data directly in components — easy to understand but not scalable. Then I really got into the Angular Router and started using the data resolvers. Then, eventually, I get into ngrx — the RxJS powered Redux implementation targeted at Angular. …


I need to generate some random state for an OAuth2 implicit flow for a JavaScript SPA. This “state” is passed to the identity provider, and then passed back after authentication to guard against XSS. Basically, I just need a string of random characters.

This state parameter is optional in OAuth2 implicit flow, and it only needs to be pseudo-random, but authentication isn’t something I like to take chances with, so I thought I’d look for the best option. I did a quick web search, as this seemed like the kind of thing that I’d find a perfect, best-practise, solution for on stack overflow, GitHub or similar. …


A few more of my recent 3d fractal experiments.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

About

Daz

Geocities Developer Expert. Keywords: Angular, TypeScript, JavaScript, Cyril Live Coding, Functional Programming

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