Skip to content

Instantly share code, notes, and snippets.

@kerryj89
kerryj89 / _background-image-rounded-square.scss
Last active March 18, 2022 02:36
Rounded square within background-image
// 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 {
@kerryj89
kerryj89 / boxicons-in-angular.js
Last active January 14, 2022 16:13
Boxicons in Angular
// 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
kerryj89 / bitbucket-pipelines-to-github-actions-migration.md
Last active December 29, 2022 16:27
Migrating from BitBucket Pipelines to Github Actions as of Sept. 25, 2022

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
kerryj89 / get-gh-jwt.php
Created September 26, 2022 17:18
Generate JWT for GitHub App in PHP (no dependencies)
<?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',