A rather geeky/technical weblog, est. 2001, by Bramus
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 …
Continue reading “Repeat Text as a Background Image in CSS Using element()“
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 …
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 …
Continue reading “Speed up your Docker builds in Google Cloud Build with Kaniko Cache”
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 …
Continue reading “useSound – A React Hook for Sound Effects”
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 …
Continue reading “Progressive Web Apps The Superpowers of the Web and Native Apps Combined”
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. …
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 …
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. Psst… Hey kid… Did you know you can pass data from your …
Continue reading “Pass Data from CSS to JavaScript with CSS Variables”
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 …
clip-path
Reminds me of Eric Meyer’s Flexible Captioned Slanted Images in which he combines Flexbox and CSS clip-path. In that implementation Eric did have to correct the margins to fix the gap between the items. With the grid implementation this looks like to be no problem.