Using clip-path to define custom shapes inside a container!
Percentages units has the benefit of keeping things responsive
There is many clip-path functions: inset, circle, ellipse, polygon and... path for maximum flexibility

clip-path: inset(x x x x) is useful for clipping blocks of an element and using it as a "controlled" overflow.
This clip-path value represents a thunderbolt: polygon(100% 0, 20% 50%, 35% 50%, 0% 100%, 70% 50%, 50% 50%)

We can transition or animate clip-path. There's one condition. The path must have a consistent structure. For example, if we transition a polygon, that polygon must have a consistent number of points.

Skewing effect: https://codepen.io/enbee81/pen/yLyrmyg

and cyberpunk buttons in CSS: https://jhey.dev/writing/css-cyberpunk-2077-buttons-taking-your-css-to-night-city/

Wow

Creating patterns for imgs

This size matches the dimensions of our SVG exports. This is important. This is the one drawback of using clip-path: path(). It's not responsive. The path definition is relative to the dimensions of your element.

Changing the shape:

.portrait {
  transition: clip-path 0.2s, transform 0.2s;
  transform: scale(var(--scale, 1)) rotate(var(--rotate, 0deg));
  clip-path: path(var(--clip, var(--splat)));
}
.portrait:hover {
  --scale: 1.15;
  --rotate: 30deg;
  --clip: var(--splattier);
}
.portrait:active {
  --scale: 0.85;
  --rotate: -10deg;
  --clip: var(--splatted);
}

Things I want to do:

• Content related
  • Publish reviews of books/music/… in a cool sortable grid (example)
  • Publicly display global website statistics (example)
  • Create and regularly update a "uses" page (example)
  • Create and regularly update a "now" page (example)
  • List all emojis used on the site by frequency (example)
• Design related
  • Create an official coat of arms as the logo of your site (example)
  • An audible frequency graph that determines posting activity: example
• IndiWeb related
  • Have a guestbook page where people can send Webmentions to to sign it: example

Going from framework consumer to framework creator

Starting from language proficiency to data structures and algorithms to Design Patterns

A cool definition for design patterns: a solid architecture that are reusable and extensible and that are industry standards

Creational

Singleton

Type of object that can be instantiated once

In Typescript, just use a global object, so you don't have the boilerplate.

Prototype

Object.getPrototypeOf

Builder

Build object step by step through different methods instead of using many parameters

Factory

Determine which object to instantiate

Structural

Facade

Simplified to hide low-level details of a system

Proxy

Reactivity system of Vue :D

Replace an original object and do some side effects

Advantage: allow user to work with the proxy just like the original object but it can trigger side effects behind the scene.

Proxy are also used when there is a large object that would be expensive to duplicate in memory.

Behavioral

Iterator

Traverse through a collection of objects.

A pull based system.

An object with a next() method in javascript that returns a { done: boolean; value: T }.

Observer

Allow many objects to subscribe to events that are broadcast by another object.

A Subject where other objects subscribe to it and triggers their method when the subject notify

Mediator

In case of many to many relationships, one object is a coordinator between them.

Middlewares are an example of mediator.

State

What is the difference between state and strategy pattern?