a browser extension that finds the vector content on the page you're viewing and gives you the option to download, optimize, copy, view the code, or export it as an image.

What is possible with SVGs?

• Generative SVG Grids
• Generative Landscape Rolls
• SVG Paths With Masks
• Grainy Gradients
• Adding Texture And Depth
• Cut-Out Effects With CSS And SVG
• Fractional SVG Stars
• Generative Mountain Ridge Dividers
• Flexible Repeating SVG Masks
• Swipey Image Grids
• Raster Image To SVG Converter
• Scaling SVGs Made Simple

Dans les photos du champ profond, que ce soit Hubble ou Webb, chaque point lumineux est une galaxie. Chaque pixel correspond alors à une zone large de dizaines de milliers d’années lumière de côté et la zone couverte correspond à un grain de sable tenue à bout de bras.

Une façon de le dire autrement c’est que si on tient un grain de sable à bout de bras en direction du ciel, ce petit grain nous masque des milliers de galaxies, chacune composée de centaines de milliards d’étoiles et de planètes.

Et pour cacher le ciel en entier, je vous laisse imaginer combien il faudrait de grains de sable. Et donc combien de galaxies, d’étoiles, de mondes il y a là haut.
L’Univers a plus d’étoiles que l’être humain n’a émis de sons depuis toujours.

Voilà pourquoi on dit que nous ne sommes pas seuls dans l’univers. Avec une telle échelle, même les événements les plus rares se produisent obligatoirement un nombre immense de fois dans l’univers…

from https://lehollandaisvolant.net/?id=20220716082218

Vous connaissez la différence entre : "Nous accélérons notre préparation" et "Nous rattrapons notre retard" ? Tout est dans l'anticipation. ‒ Thinkerview

C'est l'été le plus chaud de ma vie 😱
C'est l'été le plus froid du reste de ta vie 😌

But nuclear is the problem 🤦‍♂️

The internet is full of fights about Go vs. Rust. But I think the fascinating thing is how similar their developer tooling experience is.

You don’t need to wonder what the best tool to use for testing, fuzzing, packaging or linting is.

Tooling innovation happens, new languages adopt and standardize on it, and end up incrementally better than existing languages.

Package manager state of the art: cargo and rustup
Documentation state of the art: docs.rs
Formatting state of the art: gofmt, rustfmt, zigfmt

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