Repeat Text as a Background Image in CSS Using element()

👨‍🔬 Experimental technology: Firefox only …

Using the element() CSS function it’s possible to recreate album covers that contain repeated text, such as “The Life of Pablo”.

.target {
  background-image: -moz-element(#id_of_an_element_to_use_as_the_background);
}

Ollie Williams lays it all out on CSS-Tricks.

How to Repeat Text as a Background Image in CSS Using element()

📸 Back in 2013 I’ve experimented with element() to recreate the <marquee> element. The alternate and slide variants still work fine, but looks like the left/right/down/up variants could need some polishing for them to work fine again.

The most feared song in jazz, explained

I sometimes like to rewatch pieces from the Vox Earworm and Vox Borders video series. I especially liked this one on John Coltrane’s “Giant Steps” from the Vox Earworm series, for which they won the Emmy for “Outstanding New Approaches: Arts, Lifestyle and Culture”:

John Coltrane, one of jazz history’s most revered saxophonists, released “Giant Steps” in 1959. It’s known across the jazz world as one of the most challenging compositions to improvise over for two reasons – it’s fast and it’s in three keys. Braxton Cook and Adam Neely give me a crash course in music theory to help me understand this notoriously difficult song, and I’m bringing you along for the ride. Even if you don’t understand a lick of music theory, you’ll likely walk away with an appreciation for this musical puzzle.

Speed up your Docker builds in Google Cloud Build with Kaniko Cache

When building Docker images locally it will leverage its build cache:

When building an image, Docker steps through the instructions in your Dockerfile, executing each in the order specified. As each instruction is examined, Docker looks for an existing image in its cache that it can reuse, rather than creating a new (duplicate) image.

Therefore it is important that you carefully cater the order of your different Docker steps.

~

When using Google Cloud Build however, there – by default – is no cache to fall back to. As you’re paying for every second spent building it’d be handy to have some caching in place. Currently there are two options to do so:

  1. Using the --cache-from argument in your build config
  2. Using the Kaniko cache

⚠️ Note that the same rules as with the local cache layers apply for both scenarios: if you constantly change a layer in the earlier stages of your Docker build, it won’t be of much benefit.

~

Using the --cache-from argument (ref)

The easiest way to increase the speed of your Docker image build is by specifying a cached image that can be used for subsequent builds. You can specify the cached image by adding the --cache-from argument in your build config file, which will instruct Docker to build using that image as a cache source.

To make this work you’ll first need to pull the previously built image from the registry, and then refer to it using the --cache-from argument:

steps:
 - name: 'gcr.io/cloud-builders/docker'
   entrypoint: 'bash'
   args:
   - '-c'
   - |
     docker pull gcr.io/$PROJECT_ID/[IMAGE_NAME]:latest || exit 0
- name: 'gcr.io/cloud-builders/docker'
  args: [
            'build',
            '-t', 'gcr.io/$PROJECT_ID/[IMAGE_NAME]:latest',
            '--cache-from', 'gcr.io/$PROJECT_ID/[IMAGE_NAME]:latest',
            '.'
        ]
images: ['gcr.io/$PROJECT_ID/[IMAGE_NAME]:latest']

~

Using the Kaniko cache (ref)

Kaniko cache is a Cloud Build feature that caches container build artifacts by storing and indexing intermediate layers within a container image registry, such as Google’s own Container Registry, where it is available for use by subsequent builds.

To enable it, replace the cloud-builders/docker worker in your cloudbuild.yaml with the kaniko-project/executor.

steps:
- name: 'gcr.io/kaniko-project/executor:latest'
  args:
  - --destination=gcr.io/$PROJECT_ID/image
  - --cache=true
  - --cache-ttl=XXh

When using Kaniko, images are automatically pushed to Container Registry as soon as they are built. You don’t need to specify your images in the images attribute, as you would when using cloud-builders/docker.

Here’s a comparison of a first and second run:

From +8 minutes down to 55 seconds by one simple change to our cloudbuild.yaml 🙂

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

☕️ A thank you coffee for saving build time ($4)

useSound – A React Hook for Sound Effects

Josh W. Comeau:

Because sound is used so rarely on the web, it can be quite impactful. It’s a bit of a secret weapon, and it can make a surprisingly big difference for the right kinds of projects!

To make it a bit easier to get started, I pulled out the hook I built for this blog, use-sound, and published it on NPM.

import useSound from 'use-sound';

import boopSfx from '../../sounds/boop.mp3';

const BoopButton = () => {
  const [play] = useSound(boopSfx);

  return <button onClick={play}>Boop!</button>;
};

Installation per NPM/Yarn.

yarn add use-sound

Built on top of the wonderful Howler.js

useSound – A React Hook for Sound Effects →
Beep Boop! Announcing “use-sound” →

Progressive Web Apps The Superpowers of the Web and Native Apps Combined

Free e-book by Google & Awwards on PWAs:

We return to take a closer look at Progressive Web Apps (PWAs) and how they combine the reach of the web with the device integrations of installed software. In this ebook, Volume 2 in the series, you will learn:

  • The capabilities of Progressive Web Apps
  • Product strategies for deploying PWAs
  • Promotional patterns for driving installs of PWAs
  • UX best practices for designing installed experiences that work reliably offline
  • How to implement analytics to measure business impact.

Progressive Web Apps The Superpowers of the Web and Native Apps Combined →

Run your GitHub Actions locally with act

When you run act it reads in your GitHub Actions from .github/workflows/ and determines the set of actions that need to be run. It uses the Docker API to either pull or build the necessary images, as defined in your workflow files and finally determines the execution path based on the dependencies that were defined. Once it has the execution path, it then uses the Docker API to run containers for each action based on the images prepared earlier. The environment variables and filesystem are all configured to match what GitHub provides.

Installation per brew (if you’re on Mac):

brew install nektos/tap/act

Once installed, run act and you’re good to go …

# List the actions
act -l

# Run the default (`push`) event:
act

# Run a specific event:
act pull_request

# Run a specific job:
act -j test

# Run in dry-run mode:
act -n

# Enable verbose-logging (can be used with any of the above commands)
act -v

act

Creating a Pencil Effect in SVG

Using the feTurbulence and feDisplacementMap filters, Scott Turner make his SVG line-drawings look like they’re pencil-on-paper-like drawings:

See the Pen SVG Pencil Filter #1 by Scott Turner (@srt19170) on CodePen.

Creating a Pencil Effect in SVG →

💡 If you constantly randomize the turbulence you can create squiggles using SVG or even recreate a heat shimmer effect with SVG

Pass Data from CSS to JavaScript with CSS Variables

What happens when you combine the fact that part after the : for CSS Custom Properties doesn’t need to be valid CSS with window.getComputedStyle()? You get a way of passing data – including Arrays, Objects, and even JSON – from CSS to JavaScript.

CodePen: JSON in CSS Vars →

Overflow In CSS

Ahmad Shadeed is at it again, this time with a guide on Overflow in CSS:

In CSS, we can have control over an element when its content is too big to fit in. The property for that is overflow, which is a shorthand for overflow-x and overflow-y properties.

For this article, I will give an introduction to those properties, and then we will dive together into some concepts and use-cases that are related to overflow. Are you ready? Let’s dive in!

Overflow In CSS →

💁‍♂️ Again? Check out his guide on Viewport Units which also was amazingly detailed and complete.