Forem: Peter Øvergård Clausen

9 quick tips for keeping development velocity high within a software development team

Peter Øvergård Clausen — Mon, 21 Feb 2022 12:23:32 +0000

Throughout the 2 years and 7 months I've been a software development consultant at IT Minds, I've been at three different companies. This has provided me with insight into developing software when working in teams, and I would therefore like to share these following 9 tips for keeping development velocity high within a team.

Consider trying them out in your development team, and let us know in the comments what you think about our tips, and whether you have any tips that you would add to the list. 😊

1 - Refactor often to keep software quality high and technical debt low

It is unavoidable to gain technical debt as features grow and requirements change, hence dealing with technical debt before it slows you down is important. A well refactored codebase is more prepared for change and new features. Developers and project managers alike should prioritize refactoring as it keeps the software clean and prepared for change.

2 - Rely on external libraries

Rather than developing own libraries from scratch, and having to document and maintain these, one should rather spend a day researching whether there’s an existing external library that solves the problem at hand. Less time will be spent on maintaining the library, less time will be spent on documenting the library, and team members will have a place to read and learn about the library rather than having to ask the person who made it. There is no reason to reinvent the wheel, unless the wheel is your product.

3 - Have a shared Wiki for team documentation

When a new team member joins a development team, a lot of time and confusion can be saved if the new team member has access to documentation which allows them to gain knowledge on how to set up the system locally as well as on the choices that have been made thus far. Furthermore, a wiki helps knowledge sharing within the team, making it easier for team members to help each other out.

4 - Plan ahead, at least one sprint in advance

Always knowing where the product is headed, keeps the motor running. Sometimes a feature is implemented faster than expected, and moving on to the next feature can be quick. Likewise, if something takes longer than expected, you can assess the priority and know which other features are postponed.

5 - Prioritize what’s essential, and avoid frequent scope changes

Make it clear which feature requests are need-to-have and which are nice-to-have, and always have tasks in the sprint prioritized on what is most important. Seek to break down large tasks into smaller subtasks, and try to estimate how long they’ll take. In this way, the team will know which tasks are heavy and highly prioritized and which tasks should be focused on within the sprint, while the project manager can monitor progress.

6 - Divide responsibilities among team members, but also allow team members to help each other across responsibilities

Letting a team member work on other team members' responsibilities speeds up development and knowledge sharing. Instead of two team members having to coordinate tightly, smaller adjustments to the backend could be carried out by a frontend developer and subsequently reviewed by backend developers as a pull request. If the implementation needs adjustment, backend developers can help out. The same goes for backend developers making small changes in the frontend. For smaller software products, it may be the case that everyone can work with everything, but for larger software products it becomes infeasible for one person to know and work on everything. For this reason, my advice is to divide responsibilities, but also to let the team members help each other out across responsibilities.

7 - Invest in your teammates

You may have a lot on your plate right now, but it’s never a bad idea to help out a teammate and share your knowledge of the codebase and technologies used. You may not get as much work done at first when your teammate starts, but sharing your responsibilities and knowledge will greatly improve development velocity when your teammate is up to speed, and it’ll lift some weight off your shoulders. The faster that can happen, the faster you’ll get the benefit of your teammate. Also, I’m sure your manager understands that you’re spending time onboarding and investing time in your teammate.

8 - Automate as much as possible

Build, Test, and Release pipelines makes sure that the software is in a consistent state and that new features can quickly be tried out by the product owner in the DEV environment. Implementing scripts to do mundane common tasks can also save a lot of time.

9 - Conduct Engineering meetings

I was at a company as a consultant that conducted a one-hour Engineering meeting every Friday. Developers could submit topics throughout the week to be discussed at the engineering meeting. We pointed out parts of the product that needed refactoring, discussed problems and solutions, and introduced new libraries that could help us tremendously. The meetings also helped with knowledge sharing and improved team members' joy for the project and team spirit. Also, a lot of cross-team-communication could be done efficiently within this hour. I highly recommend these meetings.

Summary

We have explained the following 9 tips for keeping software velocity high within a team:

Refactor often to keep software quality high and technical debt low
Rely on external libraries
Have a shared Wiki for team documentation
Plan ahead, at least one sprint in advance
Prioritize what’s essential, and avoid frequent scope changes
Divide responsibilities among team members, but also allow team members to help each other across responsibilities
Invest in your teammates
Automate as much as possible
Conduct Engineering meetings

Let us know in the comments if you have any additional tips for keeping development velocity high within a team - or simply if you have tried out any of our tips within your team, and whether it was a success or not. 😊

Build beautiful websites with Angular and Material Design

Peter Øvergård Clausen — Fri, 02 Oct 2020 07:16:55 +0000

Making stunning websites with a coherent design, colors, typography and animations has never been easier than now.

In this blog post we will take a quick dive into Angular and Angular Material to illustrate how easy it is to get started. We will show the strengths of using Angular Material theming and create our own theme. We will also highlight other benefits of using Material Design such as the design kits that comes for eg. Adobe XD for effectively designing mockups and prototyping, as well as mention common used helpers that comes with Angular Material.

Angular is one of the most popular web frameworks used right now, it is type-script based, open-source, and it is led by the Angular Team at Google.

Material Design is a design framework also developed by Google, which contains guidelines, components and tools that support best practices of user interface design.

Angular Material is an implementation of Material Design for Angular. It features many plug-and-play components and styling for buttons, input fields, tables, date pickers, cards and much more, as well as offer a way to create and customize the theme of your website.

What we'll end up with in this blog post is a login page implemented in Angular that utilizes Angular Material thus using the Material Design specification. I'll show how quick you can get started with Angular and Angular Material, and how you can build your Angular application such that changes in the theme will also update all your components themes at once:

You may choose to follow along yourself or look at the final code here.

Finally, I will also include some ressources that can go hand-in-hand with your Angular application and Material Design.

Sidenote: If you're using React, Material-UI is another implementation of Material Design made for React. Material Design is also available for Android, iOS, Flutter and as CDN, but today we'll only be looking at Angular Material.

Let's dive in! 🏊

Setup

In the following 3 easy steps, we will install Node and Angular, create and run an Angular application, and enable Angular Material.

Step 1 - Install NodeJS:

Install NodeJS: https://nodejs.org/

Step 2 - Install Angular and create an Angular project:

In your OS terminal execute the following commands:



# Install Angular using the Node Package Manager:
npm install -g @angular/cli
# Create a new Angular application named "example-app" using the Angular CLI using scss as stylesheet and with Angular routing enabled:
ng new example-app --style=scss --routing
# Change directory into the project directory:
cd example-app
# Run the Angular development server locally:
ng serve

I prefer SCSS, which is similar to CSS, so I picked that, but you can remove --style=scss and use CSS instead if you want, but note that we'll be using SCSS in this guide.

After running ng serve we should now have an Angular project running on localhost:4200 that we can access in our web browser, eg. Google Chrome. You can stop the development server again by typing "ctrl + c" in the terminal running the server or by closing the terminal window.

Step 3 - Add Angular Material:



ng add @angular/material

Angular Material comes with the Indigo/Pink theme by default which is the one you're seeing on the Angular Material homepage. More on Angular Material theming later.

This concludes our 3-step setup.

We now have an Angular application with Angular Material installed using the default indigo/pink theme, and we can run it with the ng serve command.

Using Angular Material Components

Angular Material comes with many Angular components and styling, each type of component in their own module.

In Angular, a component usually consists of 3 files: The name.component.html file called the "template", the name.component.scss file containing styling for your template, and the name.component.ts file which contains a typescript class, which references the HTML and SCSS.

The name.component.spec.ts contains tests for the component but is not part of the component itself.

You can think of an Angular Material component as a button with a default style, which you can easily customize and use in your Angular application. In Angular, you can build components with components, eg. a login page component consisting of a button component and several input components.

A module in Angular is a lazy-loaded collection of components. You can import an Angular Material module in your applications module (app.module.ts) to get access to all the Angular Material components which it contains and use these Angular Material components in your application components.

You can get an overview of all Angular Material components here.

For now, let's make a component in Angular that uses a Material raised button mat-raised-button:

Creating a new component in Angular

First we make a component:



ng generate component login

We'll eventually end up making a login page, so for now we've named our component "login".

This Angular CLI command generates 4 files: login.component.html, login.component.scss, login.component.ts and login.component.spec.ts for us.

In app.component.html I got rid of the Angular template html so it looks like this:



<router-outlet></router-outlet>

The <router-outlet> will render the component which we specify in app-routing-module.ts.

We don't want to show the template html above our login component, that is why we remove the template code above it.

Next, we add a route to app-routing.module.ts that points to our newly created Login component when our url path is localhost:4200/login:



const routes: Routes = [
  { path: 'login', component: LoginComponent }
];
...

We can check that our component is rendered by accessing localhost:4200/login while our local development server is running. We should be seeing "login works" displayed:

Adding a raised Material button

To add a Material button we consult the Angular Material documentation on buttons. Under the API tab it says we need to add the MatButtonModule. And we'll do that in app.module.ts:



...
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MatButtonModule
  ],
  ...
})
export class AppModule { }

Then we can add a button to our login.component.html like so:



<button mat-raised-button color="primary" (click)="onButtonClick()">Click me!</button>

And a button handler in login.component.ts like so:



export class LoginComponent implements OnInit {
  ...
  onButtonClick(){
    console.log("Clicked");
  }
}

When we go to localhost:4200/login in our browser we should see the login component. We now have a button that plays a ripple animation when we click on it:

Not only that, as we used the mat-raised-button attribute, the button is "raised" having a box-shadow to stand out more on the page. And the color of the button is the selected theme's primary color. Awesome!

Alternatively, we could have used mat-button or mat-stroked-button to change the appearance of the button. And we could have used color="accent" to make the button pink (our secondary theme color) or color="warn" to make it red. For an overview of different button designs see examples in the documentation.

Adding input fields

Let's add some input fields for a username and password:

We import MatInputModule and MatFormFieldModule into app.module.ts and begin using Angular Material form fields:



...
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MatInputModule,
    MatFormFieldModule
  ],
  ...
})
export class AppModule { }

And now we can start using the Angular Material components in our login.component.html like so:



<div class="wrapper">
    <h1>Login</h1>

    <mat-form-field appearance="outline">
        <mat-label>Username</mat-label>
        <input matInput placeholder="x@it-minds.dk" type="text" 
            autocomplete="off" [(value)]="username" required/>
    </mat-form-field>

    <mat-form-field appearance="outline">
        <mat-label>Password</mat-label>
        <input matInput type="password" [(value)]="password" required/>
    </mat-form-field>

    <button mat-raised-button color="primary" (click)="onButtonClick()">Log in</button>
</div>

I also added username and password variables to login.component.ts:



...
export class LoginComponent implements OnInit {
  ...
  username = "";
  password = "";
  ...
}

And using flexbox in login.component.scss to center our content on the page, as well as put the contents in a column order:



// Center content vertically and horizontally:
:host{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

// Display content in a column
.wrapper{
    display: flex;
    flex-direction: column;
    h1{
        // Adjust margin-bottom:
        margin-bottom: 1rem;
    }
}

The result can be seen below:

As you can see, adding and using new material components is really easy. They look fantastic, and can easily be customized to fit the look and feel of the website you're working on.

The value that the user enters in Username and Password input fields is available in the username and password variables in the component class. But in this blog post we're only focusing on appearance.

Enter Angular Material Theming 🎨

Now we know how to import Angular Material modules and use them in our components, but what if we wanted to use values from theming to style our own components, say we wanted the "Login" <h1> to be the primary color of our theme. Is that possible? Yes! Let's do it:

Extracting SCSS values from current theme

In our global styling stylesheet styles.scss we can add:



@import '~@angular/material/theming';

$primary-palette: mat-palette($mat-indigo);
...

I'm using the $mat-indigo SCSS variable because I know we're using the default indigo-pink theme.

$mat-indigo is a SCSS variable containing a color palette we import from Material theming (more on palettes soon).

mat-palette() is a SCSS function that we import from Material theming.

The $primary-palette SCSS variable is now assigned to the color palette of $mat-indigo.

Now we need to extract the primary color (indigo) from our $primary-palette variable. And we can do that in login.component.scss like so:



@import '../../styles.scss';

h1{
    color: mat-color($primary-palette);
}

mat-color() is a SCSS function for extracting colors from palettes, imported from material theming through our styles.scss.

And look, our "Login" <h1> is now using the primary color of our theme (indigo):

Making our own theme - Enter dark theme 😎

Material design works with color palettes. If we navigate to ~@angular/material/theming (ctrl + left-mouse-click in VS CODE) we enter Angular Material's SCSS styling from where we imported our functions and variables before, and we can see that the $mat-indigo palette is defined as:



$mat-indigo: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #9fa8da,
  300: #7986cb,
  400: #5c6bc0,
  500: #3f51b5,
  600: #3949ab,
  700: #303f9f,
  800: #283593,
  900: #1a237e,
  A100: #8c9eff,
  A200: #536dfe,
  A400: #3d5afe,
  A700: #304ffe,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

There are many color palettes like it to choose from.

Say we wanted to create a dark theme for our website, is it hard to change? Well, let's try:

In our global styles.scss we add:



@import '~@angular/material/theming';

// Includes all common styles that are used by multiple Angular Material components
@include mat-core();

// Define your application's custom theme.
$primary-palette: mat-palette($mat-teal); //Note: Changed from mat-indigo
$accent-palette:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-dark-theme(  
  $primary-palette,
  $accent-palette,  
);

// Include theme styles for Angular Material components and each component used in your app.
@include angular-material-theme($theme);
...

And to make the background of our website respond to the dark-theme we also need to add the class mat-app-background to our <body> tag in index.html:



<body class="mat-typography mat-app-background">
  <app-root></app-root>
</body>

And voila! Dark theme:

Notice - as we used the primary palette when styling our "Login" <h1>, it also changed color to teal as we changed from the $mat-indigo palette to the $mat-teal palette. That means as long as we "tab into" our theming when styling our components, our components will also update with changes to the theme. Very cool.

With Angular Material we can even have multiple themes and have the user switch between them - all components (including our own) which uses Material theming (like our <h1>) will update with the change. The Angular Material documentation have a theme switcher in the top right of the website if you want to see an example of switching between themes.

Similarly, you are also able to customize typography, or eg. customize the shape of buttons (with eg. css border-radius) in component styling or globally in styles.scss. For more information about theme customization, check the documentation.

Helpers

In addition to all the components offered by Angular Material, various helpers are also given such as drag-and-drop, virtual scroll for large lists, platform information utilities and more.

These are easy to use as well, however we will not make an example in this post, but make you aware that they exist.

Design mockup resources

Another cool thing about Material Design is that they offer many resources and tools such as design kits for various design tools like Adobe XD, Sketch, Figma and others. I happen to like Adobe XD which is a user interface design and prototyping tool.

With the design kit comes components like buttons, input fields and more, and a developer or a UX designer can use the design kit to quickly build user interface mockups for desktop, tablet and phones using the tool.

With an Adobe XD you can define assets, and use them in your design mockups. Adjusting the assets (such as palette colors) will also change your mockups:

Material Design also offers other resources and tools for theme palette picking, color tools, shapes, animation and much more.

Summary

To summarize, Angular Material is easy to install and setup. It offers a wide variety of customizable components and styling. Using Angular Material theming we can customize colors, typography and shapes of our components. We showed how you can make your own theme light or dark. Making changes to the theme also updates all components using the theme. Additionally, Angular Material offers helpers for many common actions such as re-ordering lists. Material Design also offers resources and tools for designing mockups that utilizes Material Design directly in your favorite design tool such as Adobe XD.

Links and resources:

The Angular Framework
Angular Material
The Material Design Specification
Overview of Angar Material components
Material Design Resources
An awesome guide on CSS FlexBox
ChartJS - an awesome framework for making charts
If Material Icons aren't enough for you, then take a look at Font Awesome.
If Material animations aren't enough for you, then take a look at AnimeJS.