Browsed by
Category: Front-end

Posts

Angular: extract a module with existing components and important lesson about NgModule

Angular: extract a module with existing components and important lesson about NgModule

I often see Angular applications with bad architecture, especially no separation on modules. As a result, all components of an application are put in a single app/components folder which makes it hard to separate concerns. Which components are grouped together? Which components require a service? Which component is merely a part of another component? Are there any dumb components?

In this article, I’ll show how easy it is to refactor an Angular application and extract a new module with existing components. I’ll describe a simple case, with no global services.

Read More Read More

Add behavior to HTML using Alpine.js – a Todo app

Add behavior to HTML using Alpine.js – a Todo app

Sometimes I create pages with minimal interaction and amount of JavaScript – for instance, with a hamburger menu, toggle or tabs. They require simple yet repetitive JavaScript code. There are nice big components or frameworks that solve this problem (like Bootstrap, React, Vue), but the problem is their size and often a complexity to set up. Recently (in November 2019), a new library emerged – Alpine.js.

Read more
Configure Angular CLI to use tabs instead of spaces

Configure Angular CLI to use tabs instead of spaces

As a tab indentation enthusiast, I wanted to use an Angular project with tabs instead of 2 spaces. Unfortunately, there are several settings to change, and the schematics used by ng CLI command supports only spaces. Despite numerous requests (e.g. here and here), Google did not decide to introduce an option to set indentation for generated files. I went through the process of making Angular project tabbed and I’ll describe it here.

Read More Read More

Automatically enhance headers with hierarchy, links and smooth scrolling with offset

Automatically enhance headers with hierarchy, links and smooth scrolling with offset

There are several things useful in a longer document:

  • showing position of given heading in the structure
  • ability to create links to a heading
  • smooth scrolling to internal links
  • offset for scrolling if the top header covers some of the contents

Read More Read More