kerryj89

<?php

// GitHub App requires JWT.  This PHP script below generates that for us.

function base64url_encode($input) {
    return rtrim(strtr(base64_encode($input), '+/', '-_'), '=');
}

$header = [
    'typ' => 'JWT',

kerryj89

Migrating from BitBucket Pipelines to Github Actions as of Sept. 25, 2022

My notes to wrap my head around the similarities and disimilarities between GitHub's and BitBucket's CI system as I migrate over.

Basics:

• BitBucket Pipelines has a single YAML file <project_root>/bitbucket-pipelines.yml
• GitHub Actions breaks that apart into multiple YAML files <project_root>/.github/workflows/<whatever>.yml which they call workflows
• BitBucket Pipelines and GitHub Actions both have a platform where you can easily install and use scripts in your container made by others (or yourself) in a way that abstracts and simplifies your code.
  • BitBucket Pipelines calls these "pipes" (as pipe property) while GitHub Actions calls these "actions" (as uses property).

kerryj89

// These are the steps I took to get <box-icon> web component to work with Angular 12,
// otherwise we'd fail compiling with the error '"box-icon" is not a known element'.

// Why does this happen?
// Angular prevents custom elements and attributes by default. Sadly, they don't provide an easy way
// of whitelisting more. It's an all or nothing affair with their options dealing with this,
// just like Angular's approach to sanitization. Angular's list of accepted elements and attributes:
// https://github.com/angular/angular/blob/master/packages/compiler/src/schema/dom_element_schema_registry.ts#L79

// A popular solution to this problem is to enable "CUSTOM_ELEMENTS_SCHEMA" on the module you are importing boxicon

kerryj89

// Naive way to create a rounded square shape within a background-image.
// This creates 4 corner circles (radial-gradient) and two overlapping
// rectangles (linear-gradient) to form the shape. The code below only supports
// solid colors, but with some math applied to the gradient and gradient stops,
// you may be able to have a seamless gradient.

$rounded-square-bg: blue;
$rounded-square-radius: 15px;

.rounded-square-within-background-image {