NP-complet

[npcomplet]

Concrete Sass Examples

When I started using Sass I was mostly using  nesting and variables. In my own experience this is also what I’ve seen to be the most commonly used features.

I want to illustrate some of it’s other features and how they can be used with practical examples.

@for and @if rules

The @for and @if rules can be used to quickly generate a lot of CSS selectors. Things that would have been possible but…

View On WordPress

[npcomplet]

Use TypeScript enum values in Angular HTML templates

You can use your enum values in your HTML templates. This comes in handy for cases like ngSwitch where it’s more readable to use the enum value than it’s underlying value.

There are many ways to do this but I like to use this technique which requires defining the enum in your component class:

// Expose enum to HTML template. myEnum: typeof MyEnum = MyEnum;

And then using it in your…

View On WordPress

[npcomplet]

Making PDF.js work with digital signatures

Making PDF.js work with digital signatures

Out of the box PDF.js doesn’t support displaying signatures on PDF files. This is strange since it’s such a common scenario and it’s been requested many times over the years.

Thankfully there’s a simple solution to this. You need to modify the pdf.worker.js file with the following modification.

In the var WidgetAnnotation = /*#__PURE__*/ function, look for the following code:

if (data.fieldType…

View On WordPress

[npcomplet]

Final Fantasy like screen transition effect

Final Fantasy like screen transition effect

I’ve created a small project where I tried to produce an effect similar to the Final Fantasy 8 screen transition effect.

You can see a video of the original effect here and my project in action here.

The code is accessible through the GitHub repository.

Whilst I’m a Firefox user first I had to resort to refreshing the page on Firefox as it leaked memory of the amount required for the canvas’…

View On WordPress

[npcomplet]

Using a type alias to create a new name for a preexisting type like Document

Using a type alias to create a new name for a preexisting type like Document

I often need to work with auto-generated types that have been generated by Swagger based on an API definition.

These types sometimes clash with the names of preexisting types. For example the Document object, which normally refers to: Any web page loaded in the browser and serves as an entry point into the web page’s content, but in my case is also the name of an interface generated by Swagger.

View On WordPress

[npcomplet]

Minimize the amount of changes in a changeset

Minimize the amount of changes in a changeset

When creating a new change set, always try to minimize the amount of changes it includes.

Do this by only modifying what needs to be modified to implement a feature or fix a bug. Keep formatting and refactoring changes for another commit.

The story of how I came to this practice

Many years ago I read Clean Code, a book I liked a lot. One of the things it discussed was to check in our code a…

View On WordPress

[npcomplet]

How to read from .json files from TypeScript / Angular

How to read from .json files from TypeScript / Angular

Locate your typings.d.ts file and add the following lines:

declare module "*.json" { const value: any; export default value; }

Otherwise you will get an error saying the compiler can’t find module filename.json.

Then you can include a .json file in your project. For example this file:

{ "version": "6.01" }

And you can read from such a file like this:

import * as versionData from…

View On WordPress

[npcomplet]

Controlling service injection per configuration in Angular

Controlling service injection per configuration in Angular

In the previous post I mentioned we could use a factory method and the useFactory attribute of the Injectable decorator to read which service to inject from some sort of configuration file.

To do this we will configure our factories per build configuration. Controlling dependency injection per configuration allows us to to things like injecting different services for different clients/versions or…

View On WordPress

[npcomplet]

Using a factory method to control Angular dependency injection

Using a factory method to control Angular dependency injection

Similar to the use of the useClass attribute in the previous post, we can also use the useFactory attribute to supply a factory method to create our dependent value.

To start off, here’s a simple illustration of using the useFactory attribute.

We need to create a factory method which will use some logic to determine which service should be created. In this case checking if the Date.now(), which…

View On WordPress

[npcomplet]

Control which class will get instantiated for you Angular dependencies

Control which class will get instantiated for you Angular dependencies

Using Angular dependency injection, it’s possible to control which class will be injected for a specific provider. Let’s start with a simple scenario.

Given a simple component:

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'dependency-injection'; constructor(public injectedService: FirstService)…

View On WordPress

[npcomplet]

Using the new dependency injection API

Using the new dependency injection API

The way to configure dependency injection with the old API was to configure the providers on the module definition.

First we defined a service:

import { Injectable } from '@angular/core'; @Injectable() export class ExampleService { }

Then added it to the providers collections on AppModule:

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers:…

View On WordPress

[npcomplet]

Updating a rebased commit's timestamp

Updating a rebased commit’s timestamp

When I work on a feature branch with Git, I like to do smaller commits in the branch. This allows me to rollback certain changes and to easily switch to another computer.

One thing that I don’t like about this approach is that when I do my final

git rebase -i

to squash all my commits into one, the timestamp of the final commit is the same as the first commit in the chain.

When I’ve been working…

View On WordPress

[npcomplet]

Never let stray errors in the console

Never let stray errors in the console

When doing web development I fix all the errors that show up in the console. Often they don’t seem to impede the actual use of the software, but nevertheless I think it’s a good practice to fix them all. This following example should illustrate why.

I was doing some maintenance on an Angular project at work. I noticed that there were a couple of errors showing up in the console, but the web site…

View On WordPress

[npcomplet]

Semantic CSS

Semantic CSS says that class names should describe an element rather than specify it. While we can’t and shouldn’t always use semantic class names, ie: when using CSS grids or similar concepts, in general it’s a good concept to strive for.

I will illustrate why semantic class names are a good thing with a simple example I recently encountered.

Good CSS classes are descriptive of the element…

View On WordPress

[npcomplet]

We can do anything...

We can do anything…

We can do anything, it will only take longer. The key is not to do everything because in this case we will never release. The hard part is figuring what we need to do and what we can hold off.

– overheard

View On WordPress

[npcomplet]

VS Code Tip: commit part of a file

VS Code Tip: commit part of a file

A cool feature of Git is that you can stage/commit some of the modifcations that were made to a file while leaving the other parts unstaged.

This is nice when you’ve made several changes and need to commit one of them to fix something asap.

You can use this Git feature right from VS Code. Select the changes you want commited by clicking the change indicators in the gutter.

Stage the change using…

View On WordPress

[npcomplet]

VS Code tip: quickly insert intellisense documentation

VS Code tip: quickly insert intellisense documentation

You can quickly insert intellisense compatible documentation on your functions by typing: /** and then Enter.

Parameters will automatically get added in the doc string.

View On WordPress