I totally agree with https://sebsauvage.net/links/?LSWKJw

Sure, Microsoft isn't perfect. For instance, there are serious legal and ethical questions about how its subsidiary GitHub is using open source code in its commercialized Copilot AI-based pair-programming service [....]
However, you can find fault with any major company using Linux or open source software.

So? Is it ok if others have faults?

Using web browsers might seem inefficient, but they solve so many problems.

FasterThanLime describes how hard it is to build a text-messaging app from scratch if we want to develop it properly.

Impressive

Without auto, the remains 4 / 3, and the image appears stretched. You can avoid the stretching with object-fit:

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
}

Although, if the image isn't actually that aspect ratio, it'll either end up stretched (object-fit: fill), letter-boxed (object-fit: contain), or cropped (object-fit: cover). None of which are ideal.

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/

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);
}

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?

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

Wow

git config --global --add --bool push.autoSetupRemote true

So the branch will be set if it is not the case 👍
It needs git version 2.37.0 or superior.

Docker-compose is a tool that accepts a YAML file that specifies a cross container application and automates the creation and removal of all those containers without the need to write several docker commands for each one. It should be used for testing and development.

Kubernetes, on the other hand, is a platform for managing production-ready containerized workloads and services that allows for declarative setup as well as automation.

I will read more when I will need it :)

Rather than interrogating a device directly, we ask the device vendor to do it for us.

I see so much problems coming 🍿
At the same time, I like the idea so much!

4 parties involved:

• an origin (service provider)
• a client (service consumer)
• an attester (proof the client is real, for example device vendors)
• an issuer: producer of the token called by the attester and choosed by the origin