Luca Sparagino

SASS-only Material Angular 2 Palette generator (2025 Update)

by

This is an updated version of my old article SASS-only Material Angular Palette generator published in 2020. It’s updated to be compatible with Angular 18+ and Material 2.

mat-palette-gen.scss
@use 'sass:math';
@use 'sass:map';
@use 'sass:color';

$values: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700);

@mixin _output-palette-variables($map, $prefix) {
  @each $key, $value in $map {
    @if ($value) {
      @if ($key == 'contrast') {
        @include _output-palette-variables($value, '#{$prefix}-contrast');
      } @else {
        --#{$prefix}-#{$key}: #{$value};
      }
    }
  }
}

@function createPalette($color) {

  $white: #fff;
  $black: #000;
  $baseDark: multiply($color, $color);

  $palette: (
    50 : color.mix($color, $white, 12%),
    100 : color.mix($color, $white, 30%),
    200 : color.mix($color, $white, 50%),
    300 : color.mix($color, $white, 70%),
    400 : color.mix($color, $white, 85%),
    500 : color.mix($color, $white, 100%),
    600 : color.mix($color, $baseDark, 87%),
    700 : color.mix($color, $baseDark, 70%),
    800 : color.mix($color, $baseDark, 54%),
    900 : color.mix($color, $baseDark, 25%),
    A100: color.adjust(color.mix($black, $baseDark, 15%), $lightness: 65%, $saturation: 80%),
    A200: color.adjust(color.mix($black, $baseDark, 15%), $lightness: 55%, $saturation: 80%),
    A400: color.adjust(color.mix($black, $baseDark, 15%), $lightness: 45%, $saturation: 100%),
    A700: color.adjust(color.mix($black, $baseDark, 15%), $lightness: 40%, $saturation: 100%),
  );

  $contrast: ();
  @each $v in $values {
    $contrast: map.merge($contrast, ($v: getContrast(map.get($palette, $v))))
  }

  $palette: map.merge($palette, (contrast: $contrast));

  @return $palette;
}


@function multiply($rgb1, $rgb2) {
  $r: math.floor(math.div(color.channel($rgb1, "red", $space: rgb) * color.channel($rgb2, "red", $space: rgb), 255));
  $g: math.floor(math.div(color.channel($rgb1, "green", $space: rgb) * color.channel($rgb2, "green", $space: rgb), 255));
  $b: math.floor(math.div(color.channel($rgb1, "blue", $space: rgb) * color.channel($rgb2, "blue", $space: rgb), 255));
  @return rgb($r, $g, $b);
}

@function getBrightness($color) {
  @return math.div(color.channel($color, "red", $space: rgb) * 299 + color.channel($color, "green", $space: rgb) * 587 + color.channel($color, "blue", $space: rgb) * 114, 1000);
}

@function isLight($color) {
  @return getBrightness($color) >= 128;
}

@function getContrast($color) {
  @if isLight($color) {
    @return #000;
  } @else {
    @return #fff;
  }
}

Read more

Angular 20 SSR with AWS CDK v2

by

In this article we’re going to set up an Angular 20 web application with server-side rendering, using AWS Lambda and Cloudfront to serve it, and AWS CDK v2 to manage the infrastructure.

If you’re reading this, I’m assuming that you know how CDK and Angular work. I’m not going to explain in detail how to set up your projects.

The CDK Construct

Create a CDK application wherever you want. I usually create a folder within my Angular project, called aws or infrastructure.

Now create a new file in the lib folder called angular-ssr.ts (or whatever you want) and put this code in it.

TypeScript
import {CfnOutput} from 'aws-cdk-lib';
import {Code, Function, FunctionUrl, FunctionUrlAuthType, HttpMethod, Runtime} from 'aws-cdk-lib/aws-lambda';
import {Construct} from 'constructs';
import {Certificate} from 'aws-cdk-lib/aws-certificatemanager';
import {
  CachePolicy,
  Distribution,
  OriginRequestPolicy,
  PriceClass,
  ViewerProtocolPolicy
} from 'aws-cdk-lib/aws-cloudfront';
import {FunctionUrlOrigin} from 'aws-cdk-lib/aws-cloudfront-origins';

export interface AngularSSRProps {
  /**
   * Used to comment the Cloudfront distribution
   */
  appName?: string;
  /**
   * If set, the Cloudfront distribution will have custom domains and an SSL certificate.
   * The certificate domains must cover the domains specified in `domainNames`.
   */
  certificate?: Certificate;
  /**
   * If set, the Cloudfront distribution will have custom domains.
   * For this to work, you must specify a `certificate` as well.
   */
  domainNames?: string[];
}

export class AngularSSR extends Construct {

  public distribution: Distribution;
  public lambdaUrl: FunctionUrl;
  public ssrLambda: Function;

  constructor(scope: Construct, id: string, props: AngularSSRProps) {
    super(scope, id);

    this.ssrLambda = new Function(this, 'WebsiteSSRLambda', {
      // Adjust this if it's outdated
      runtime: Runtime.NODEJS_22_X,
      handler: 'index.handler',
      // We'll create this file later, change path if needed
      code: Code.fromAsset(`./assets/ssr-lambda`),
      // Adjust to your project needs
      memorySize: 1024
    });

    this.lambdaUrl = this.ssrLambda.addFunctionUrl({
      authType: FunctionUrlAuthType.NONE,
      cors: {
        allowedOrigins: [
          'https://localhost:4200',
          ...(props.domainNames?.map(d => `https://${d}`) ?? []),
        ],
        allowedMethods: [HttpMethod.GET],
        allowCredentials: true,
        allowedHeaders: ["*"]
      }
    });

    this.distribution = new Distribution(this, 'WebsiteSSRDistribution', {
      certificate: props.certificate,
      domainNames: props.domainNames,
      defaultBehavior: {
        origin: new FunctionUrlOrigin(this.lambdaUrl),
        viewerProtocolPolicy: ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        originRequestPolicy: OriginRequestPolicy.ALL_VIEWER_EXCEPT_HOST_HEADER,
        cachePolicy: CachePolicy.CACHING_OPTIMIZED
      },
      priceClass: PriceClass.PRICE_CLASS_ALL,
      comment: props.appName,
      errorResponses: [
        {httpStatus: 403, responseHttpStatus: 200, responsePagePath: '/index.html'},
        {httpStatus: 404, responseHttpStatus: 200, responsePagePath: '/index.html'}
      ]
    });

    new CfnOutput(this, 'ClientLambdaURL', {value: this.lambdaUrl.url});
    new CfnOutput(this, 'DistributionID', {value: this.distribution.distributionId});
  }

}

Some remarks on this code

  • Line 51: I’ve included https://localhost:4200 in the allowedOrigins property. This is only useful for debug purposes if you also plan to include additional API endpoints in your lambda, but it won’t be covered here.
  • Line 52: This line maps the domains array we’ll be using later, and adds “https://” to each of them, so that they can be used by CORS headers. If you also need old fashioned “http://“, you don’t.

Read more

RxJS 6 Patterns with Angular Material: Refresh Button

by
RxJS + Angular + Material

In this article, we’ll be looking at a very simple RxJS 6 pattern that allows us to easily refresh data coming from REST APIs (or any other async data source).

In Angular, we’ll be using a service to handle most of the work, including the data fetching and the refresh logic.

Let’s look at a mock service that we’ll be using to fetch some data from a REST API.

TypeScript
export class MockService {

  refresh$ = new ReplaySubject(1);
  data$: Observable<SomeDataType>;

  constructor(private http: HttpClient) {

    this.refresh();

    this.data$ = this.refresh$.pipe(
      switchMap(() => this.getData()),
      share()
    );
  }

  refresh() {
    this.refresh$.next();
  }

  // This one could also be private
  getData(): Observable<SomeDataType> {
    return this.http.get<SomeDataType>(`url`);
  }
}

Read more

RxJS 6 Patterns with Angular Material: Confirmation Dialog

by
RxJS + Angular + Material

Intro

This basic pattern applies to RxJS 6 in combination with Angular Material. However, it can be applied to any other environment that supports RxJS 6, as long as you have an observable-based dialog implementation.

Desired behaviour

  1. A user clicks on a button
  2. A confirmation dialog is shown
  3. If the user confirms, an action is performed

Read more

Outer Worlds and The Sunset Simulator

by
Sunsets

Different planet usually means different atmosphere. Different atmosphere means different optics mumbo-jumbo (thoroughly explained across the internet, like here). Different optical properties usually lead to different sunset colours (and also there seems to be some sort of evidence that the atmosphere composition may be correlated to the ability to support life, but it’s mainly about sunset colours).

Obviously, NASA created a sunset simulator, because why not.

Read more

SASS-only Material Angular Palette generator

by
SASS Material Angular Palette Generator

OUTDATED!! Click here for the 2025 updated version: SASS-only Material Angular 2 Palette generator (2025 Update)

With my job, I often need to replicate projects from a template based on Angular Material. When I do that, one of the first things that I usually need to change is the color scheme.

Angular Material’s color scheme is defined by two palettes: primary and accent. These two palettes define a range of colors used by all components.

There are many tools available online to generate such palettes. My personal favourite is Material Design Color Generator (also available on GitHub). This tool includes a code generator that automatically creates a SASS list in Angular Material’s accepted format.

I based my SASS color palette generator on Mikel Bitson‘s code. This is a simple SASS translation that makes it easier to adjust colors directly from your code. 

Read more

Jupiter’s Great Red Spot in 3D

by
Great Red Spot

It’s been a while since the last post, but this was worth it.

Sometimes, our infinite quest to discover…well, everything…brings us material that is both fascinating and interesting for everyone.
This usually means images instead of numbers, but this time we’re talking about 3D CG awesomeness!

Our casting for the day features Jupiter and Juno, the dynamic duo that certainly doesn’t fear the spotlight.
Their performance? A deep dive into Jupiter’s Great Red Spot, to discover what lies underneath the cloud tops.

“The solar system’s most famous storm is almost one-and-a-half Earths wide, and has roots that penetrate about 200 miles (300 kilometers) into the planet’s atmosphere. Juno found that the Great Red Spot’s roots go 50 to 100 times deeper than Earth’s oceans and are warmer at the base than they are at the top”

Great Red Spot
Jupiter’s Great Red Spot

Data was gathered by Juno’s Microwave Radiometer (MWR), which is able to “look” through Jupiter’s clouds by analyzing different lengths of microwaves.

Great Red Spot Layers
Great Red Spot data from Juno’s MWR

However, we still don’t know what the future of the Great Red Spot will be. While it may have existed for more than 350 years, it has been shrinking quite rapidly.
And as always, thanks NASA!

Source: NASA

Unique random coupon code generation in PHP

by

Generating pseudo random codes is usually a trivial task. However, coupon codes should have two features that make them computationally complex:

  • They have to be unique
  • They should be hard to guess

A third optional feature would be readability. This means that the final user should not be thinking “is this 0 or O?“.

I found the problem intriguing and decided to make my personal implementation of a coupon code generator in PHP.

Read more

Visualizing one second of Internet

by
One second of Internet

How many interactions happen every second on the Internet? You can check the numbers anywhere on the web, OR you can go to http://onesecond.designly.com/. Web designer/ dev Steven Lewis created a fantastic website along the lines of “If the moon were only 1 pixel”. Scroll your way through thousands of Google searches and don’t forget to … Read more