Tag Archives: link

Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()

Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview:

  1. Relative color syntax, e.g.

    .bg-primary-100 {
  background-color: hsl(from var(--theme-primary) h s 90%);
}
.bg-primary-200 {
  background-color: hsl(from var(--theme-primary) h s 80%);
}
.bg-primary-300 {
  background-color: hsl(from var(--theme-primary) h s 70%);
}
...

  2. CSS color-contrast, e.g.

    .text-contrast-primary {
  color: color-contrast(var(--theme-primary) vs white, black);
}

  3. CSS color-mix, e.g.

    .text-primary-dark {
  color: color-mix(var(--theme-primary), black 10%);
}
.text-primary-darker {
  color: color-mix(var(--theme-primary), black 20%);
}

All three features are part of the the CSS Color Module Level 5 spec and are a very welcome addition.

Create a color theme with these upcoming CSS features →

A Beginner’s Guide To Proxies in JavaScript

In JavaScript one of the most important data types is Object. Sometimes we want to have more control over certain objects, such as being able to listen to who is reading the object property or updating.

One of the best ways to control an object is with a Proxy. You can do a lot of fun things with Proxies, which we will explain in this article.

A Beginner’s Guide To Proxies in JavaScript →
MDN Web Docs: Proxy

💵 This linked article is stuck behind Medium's metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium's ridiculous reading limit.

Float an Element to the Bottom Corner

Temani Afif shares this clever trick to float an element to the bottom corner of a container.

The solution is threefold:

  1. Float a full-height wrapper (which contains the image) to the right
  2. Use flexbox to place the image at the bottom inside that wrapper
  3. Use shape-outside to clip the wrapper

Clever!

Float an Element to the Bottom Corner →

☝️ Did you know that to resize the container in the pen above, only one line of CSS is needed?!

PHP Cloud Functions on Google Cloud Platform with “Functions Framework for PHP”

Google Cloud Platform has launched official support for PHP Cloud Functions using Functions Framework for PHP.

With it, an HTTP Cloud Function becomes as simple as this:

use Psr\Http\Message\ServerRequestInterface;

function helloHttp(ServerRequestInterface $request): string
{
    $queryString = $request->getQueryParams();
    $name = $queryString['name'] ?? $name;

    return sprintf('Hello, %s!', $name);
}

Functions that respond to Cloud Events can work with a \Google\CloudFunctions\CloudEvent instance:

use Google\CloudFunctions\CloudEvent;

function helloworldPubsub(CloudEvent $event): void
{
    $name = 'World';
    $cloudEventData = $event->getData();
    if (!empty($cloudEventData['data'])) {
        $name = base64_decode($cloudEventData['data']);
    }

    // …
}

Installation per Composer

composer require google/cloud-functions-framework

Functions Framework for PHP →
Introducing PHP on Cloud Functions →

JavaScript Classes are not “just syntactic sugar”

Andrea Giammarchi:

After reading yet another blog post about JS classes being “just sugar for prototypal inheritance”, I’ve decided to write this post to help clarifying, one more time, why this statement is misleading; a post that hopefully explains what’s the difference and why it matters to understand it.

I also used to say this — echo’ing statements by others — but will refrain from doing so from now on 😅

JS Classes are not “just syntactic sugar” →

Seam carving: content-aware image resizing … in JavaScript

Oleksii Trekhleb has implemented the Seam Carving algorithm in JavaScript.

With this article I want to do three things:

  1. Provide you with an interactive content-aware resizer so that you could play around with resizing your own images
  2. Explain the idea behind the Seam Carving algorithm
  3. Explain the dynamic programming approach to implement the algorithm (we’ll be using TypeScript for it)

Using the algorithm it’s possible to resize an original image (center) without distorting important features in the image (left) unlike regular resizing which squeezes the image (right).

Using the resulting JS Image Carver you can see the algorithm in action.

Content-Aware Image Resizing in JavaScript →
JS Image Carver →
JS Image Carver Source (GitHub) →

google-webfonts-helper — A Hassle-Free Way to Self-Host Google Fonts

To self-host Webfonts from Google Fonts — which you should — there’s google-webfonts-helper which you can use. They offer the entire Google Fonts catalog and provide a way to easily download the fonts and accompanying CSS snippets you need.

google-webfonts-helper →

Via Sebastian

JavaScript Temporal API — A Fix for the Date API

Anyone who has worked with dates and time in JavaScript knows how broken the built-in Date is. In the near future we’ll be able to use Temporal instead, an ECMAScript feature currently at Stage-3

💁‍♂️ Stage-3?

The Technical Committee which is concerned with the standardization of ECMAScript (e.g. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.

Stage-3 is the Candidate Stage where the feature is considered complete and only critical changes will happen based on implementation experience. If all goes well the proposal will advance to Stage 4 without any changes, after which it will to become part of the ECMAScript Specification.

Nathan Sebhastian has a good overview on how it compares to Date, along with some practical examples.

The new Temporal API proposal is designed to solve the problems with the Date API. It brings the following fixes to JavaScript date/time manipulation:

  • Creating and dealing only with immutable Temporal objects
  • Straightforward API for date and time computations
  • Support for all timezones
  • Strict date parsing from ISO-8601 format
  • Support for non-Gregorian calendars

JavaScript Temporal API — A Fix for the Date API →

Animating Text Underlines

Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results.

This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled on top to make Chromium happy 🤩

See the Pen
Underlines (Chrome solution with Houdini) by Michelle Barker (@michellebarker)
on CodePen.

Animating Text Underlines →

Container Queries are Actually Coming / Say Hello To CSS Container Queries

In addition to my first look + demo at Container Queries, both Andy Bell and Ahmad Shadeed have also published posts covering them.

~

Ahmad starts off with explaining the idea behind them, before digging into a ton of use-cases. I especially like the pagination use-case, something I hadn’t thought of yet myself.

~

In his post, Andy taps into a — not yet existent — cw unit, where 1cw equals 1% of the container. This comes in handy for tweaking the font-size based on the available space.

/* Before */
h1 {
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 3vw)),
    var(--fluid-type-max, 1.3rem)
  );
}

/* After */
h1 {
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 5cw)),
    var(--fluid-type-max, 1.3rem)
  );
}

Yes, we totally need this type of unit!

~

Container Queries are Actually Coming (by Andy) →
Say Hello To CSS Container Queries (by Ahmad) →