Your Test-Driven-Development journey is not always easy. But you want to do everthing right. Some things like simple functions or classes are easy to test. But what about CSS? Is that even possible?

Predictability & Outcome

When doing TDD, the developer needs to have think about how the public interface for some logic needs to look like. Eg. if you need a function that multiplies some numbers, you probably know that its parameter would look something like this function multiply(numbers: Array<number>). You can then write your test cases with an assumption on the public interface of your logic. Most of the time this…

A kind of different CI/CD Service looks very promising. It tries to be a fast and easy to configure solution for DevOps guys.

I am currently trying it out for a customer and liked my experience with it. My use-case was a statically generated website getting its content from a GraphQL endpoint, that was to be uploaded via FTP to a web host.

If you add a Github Repo, you are greeted with the project overview. I configured a pipeline & ran it. I did not know how …

~24kB gzipped according to

How do you minimize the size of the lodash dependency?

So you probably started off with some awesome node development. You add all your dependencies and the size of your node_modules folder is increasing slowly into madness.

You add npm i lodash as a dependency as that adds amazing helper functions to your development circle and improves your velocity. All seems fine. But you heard about the possibilty to only add the dependency to a single function of lodash. You find packages like npm i lodash.merge and are astonished of the aprox. 2 million weekly downloads. …

If you are a web developer you know the DOM, and how frontend frameworks like React, Angular or Vue modify that DOM to represent changes in components.

But there is probably something that you don’t hear about a lot. Its the CSSOM: the Cascading Style-Sheet Object Model.

MDN defines the CSSOM as follows:

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically. — Read More

The browser uses the…

Let me tell you a story about a project where there were over 130 TODOs open. I won’t tell you which company that was. But I can tell you that there were a wide range of types of TODOs in that codebase.

// TODO @lastname implement this once ________

Or another one


Yes. Just “TODO”.

Literal Cancer

The problem with TODOs in our code base it that they are temporary “fixes” or even “markers” of organisational problems. If you can’t implement something because of X. Then don’t. Implement the MVP you can and simply do a task “Integrate XYZ” later.

Error: Uncaught (in promise): Failed to load button.component.html

So, Angular 9 just came out. And you are one of the people who use Nx to manage an angular monorepo.

So instead of upgrading Angular itself, you would rather upgrade your nrwl workspace at once in order to update all nrwl configured dependencies like angular, cypress, etc.

So you do

ng update @nrwl/workspace

Every dependency is upgraded automatically. Multiple jest configs are automatically changed. After that you run your tests and everything works fine. Except you probably can’t run them in your IDE.

What helped our Organization was upgrading the jest dependency manually and checking the migration guide for jest 25.

We needed to change our jest.config.js:

astTransformers: [...]toastTransformers: [ ‘jest-preset-angular/build/InlineFilesTransformer’, ‘jest-preset-angular/build/StripStylesTransformer’]

Check if you applied all the needed steps in the migration guide, as nx doesn’t do that automatically.

In an Angular Project using Vis.js I came upon a mistake when setting up the first component with a graph.

Having found a promising solution with this library, the setup seemed easy.

import {DataSet, Timeline} from 'vis';

Important: use ngAfterContentInit() as you only want to process the data after all the other components loaded. So you display something until the graph loads.

But after loading the component, this warning came up:

Stefan Matar

Software & Webdeveloper

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