Weekly Shaarli

All links of one week in a single page.

Week 34 (August 21, 2023)

Scoped CSS is Back

That would be awesome indeed: using @scope (.classname) to specify styles that only applies from this class.

mre/idiomatic-rust: 🦀 A peer-reviewed collection of articles/talks/repos which teach concise, idiomatic Rust.
The Accessibility Tree | Ben Myers

Use accessibility APIs of OSes that contains building blocks. These building blocks have 3 kinds of information about a UI element.

The first is a role: What kind of element is this?
The second is a name: a label or an identifier for this element.
The third is state and other properties: Other functional aspects of an element that would be relevant for a user or an assistive technology to be aware of. Is a checkbox checked or unchecked, etc...

It looks like ARIA, oh wait!

The web browsers now expose this accessibility tree.

blog-cells demo

A Jupyter notebook demo style for JS.

blog-cells can turn any web page into an interactive code notebook, similar to Jupyter notebooks, but powered by JavaScript and running entirely in the browser.

There's no server-side component, so you can share your notebooks on static site hosts like GitHub pages. Check out the source for this page here.

Check it out https://github.com/rameshvarun/blog-cells

How to Disable Links | Writing | gerardkcohen.me

A disabled link is not a link, its just text. You need to really need to rethink your design if it calls for disabling a link.

The href attribute on a and area elements is not required; when those elements do not have href attributes they do not create hyperlinks. - W3C, Hyperlink spec

and how to build a disabled link... the hard way

Inspecting rustc LLVM optimization remarks using cargo-remark | Kobzol’s blog

Even after applying various default filters and providing a GUI to search and filter the remarks, there is still a lot of data to go through.

Understanding the remarks is quite challenging. What even is FastISelFailure or SpillReloadCopies? How can I change my Rust code to resolve these remarks? Hard to say if you’re not a LLVM expert.

Remove unwanted objects from photos by dragging boxes

Similar to background.bg, but it removes the highlighted items on an image.

Trace Pixels To Vectors in Full Color, Fully Automatically, Using AI - Vectorizer.AI

It could be more performant than the traditional tools

#Eggcrackchallenge, la trend TikTok à tuer dans l’œuf – Libération

Comment parler de consentement alors que déjà tu affiches publiquement ton enfant? Il a rien demandé.

ces trends de petites violences et de petites humiliations pour faire quelques vues sur le dos de ses gosses. [….] Les enfants ne sont pas considérés comme des êtres sensibles à part entière. Appréhendés comme pas totalement finis, des prototypes au service d’adultes qui auraient le droit de tester des trucs sur eux. […] Leurs émotions ne sont pas prises au sérieux

croc [Wiki de sebsauvage.net]

Un guide efficace de l'outil en ligne de commande croc :)

No app, no entry: How the digital world is failing the non tech-savvy | Technology | The Guardian
Digital Assets | HipFonts

HipFonts sells digital assets. They're good for inspiration.

They also have a #logo collection: https://hipfonts.com/category/logos/

Some #color and how to use them: https://hipfonts.com/category/colors/

Some #fonts: https://hipfonts.com/?s=fonts

G. Polya, How to Solve It.
Periodic Table of Semantics
Implement a Skip Link for Navigation-Heavy Sites | Ben Myers
Feeling Lucky – De Programmatica Ipsum

About a downfall of Google

Smaller JavaScript Using Encapsulation · Caolan

How class encapsulation or closure can reduce the bundle size

Home, Not So Sweet Home

I wasn't aware of the mess on Windows. I also agree that it will be more confortable for users to follow XDG conventions on *nix. The article explains well why it is such a mess.

Solution?

On *nix, the answer is straightforward: get everyone to adhere to the XDG Base Directory specification.

The Web Needs a Native .visually-hidden | Ben Myers

In the meantime:

.visually-hidden:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
Note: get the firefox version

The "About config" is not available in the menu anymore since the last version.

The recommanded way to get the Firefox version is from "Open Application Menu" > Help > More troubleshooting information

UPLOAD : archipel éducatif du numérique

J'aime l'acronyme Université Populaire Libre Ouverte Autonome Décentralisé

Qui serait contre ces idées?

Gibiris, by Éibhear Ó hAnluain
The ideal viewport doesn’t exist

There are hundreds of touch point sizes.

This isn't a problem if you build in a fluid, flexible manner. That is illustrated in this diagram. If however, you tend to build with very specific breakpoints and hard values for typography, sizing and spacing, you might find that even with the best intentions, you’re not providing the optimal user experience.

A viewport is the window size of the browser, not the screen size.

The main point we’re trying to get across is that you simply do not know how users are going to visit your website or web app. Instead of making design decisions on strict, limited breakpoints, keep in mind the sheer amount of fragmentation there is in viewports.

New Year, New Terminal: Alias Your Directories the Unix Way | Ben Myers

Using aliases are powerful to navigate in the terminal.

The author shares ad function to add... aliases on the fly

YDD manifesto | YOLO-driven development - not for the faint of heart

LOL

How to Communicate When Trust Is Low (Without Digging Yourself Into A Deeper Hole) – charity.wtf

When a relationship has very little trust, you tend to interpret everything someone says in the worst possible light, or you may hear hostility, contempt, or dismissiveness where none exists

The way trust gets rebuilt is by ✨small, positive interactions✨

  1. Acknowledge it is hard beforehand:
  2. or check in afterwards
  3. Speak tentatively: “From my perspective, it looks like these results might be missing some data… do you see the same thing?” opens the door for a friendly conversation
  4. Try to sound friendly
  5. Take a breath
  6. When you are in a state where you are assuming the worst of someone and reading hostile intent into their words or actions, try to check yourself on those assumptions.
  7. Engineer positive interactions, even if you have to invent them: 5 positive interactions for every one negative interaction
  8. Remember the handicaps, and value the effort.
Adding Webmention Support to a Static Site
What I'm Doing and How It's Going

What would you do if you weren’t afraid?

When I asked myself that question I realized I should be working for myself, building things that help people, consulting with people to help them, and putting that content into the world somehow.

Daniel Miessler runs Unsupervised Learning, so he's building the platform. He's doing some consulting and advising related to customers for a service company. He also has the podcast and newsletter :)

The result from all of this is that the promise of going to school, getting a stable job at a company, and having some sort of future from that is—or at least feels—more tenuous than ever.

I believe that the time for being identified by—and tied to—corporate jobs is passing, and it’s time to transition to what comes next

Think about work like a relationship. It’s hard to be a good partner if you’re not first healthy and independent on your own.

It’s Better in the App and Other Lies

Advantages of apps over websites:

  • Gobbling data: an app does not get its request blocked as a website does.
  • Making money: This one applies more to indie developers than to big companies but I'm sure people are more willing to pay for an app than access to a website.
  • people want app: Think about that for a second: people want to download an app to track deliveries of their white goods, something which most people order at most once a year.
Front-End (Over)Engineering | Writing | gerardkcohen.me

I just think they let the available technology dictate the use rather than the actual need, much like the mythical space pen vs pencil story.

Needs first, then use the available technology as needed.

Finally I understood the importance of the "less is more" approach | 🐈‍ dostoynikov 🐈‍
  1. Reducing the belongings to a level it fits into a 40L or 50L backpack or a medium size luggage.

I just want to be lightweight and free as a bird. The more you have in your life, the more you are chained by them.

Dave's Paper Notes: Programming as Theory Building - ratfactor

Do not try to predict the future. Build what you need now based on what you know about the problem at hand. Understand that you may have to re-write some things later. It is inevitable.

Again.

Supression de Filigrane - Watermark Remover d'Image En Ligne
Rust Malware Staged on Crates.io

A rust malicious postgress package was used to retrieve information and send it to a secret Telegram channel.

The rust foundation and crates.io removed the package.

Les détails du gros plan de départs de Microsoft en France

C'est pas la fête chez Microsoft

3614 HACKER - Serveur Minitel multi-voies des années 80-90 intégralement restauré à l'identique.

Serveur Minitel multi-voies des années 80/90 intégralement restauré à l'identique.

C'est propre!

aria-label, aria-labelledby, and aria-describedby: What's the Difference? | Ben Myers

aria-label, aria-labelledby, and aria-describedby can all be used to bring extra clarity to a given element when it's exposed to assistive technology.

  • aria-label overrides an element's name with contents you specify.
  • aria-labelledby replaces an element's name with contents from another node on the page. You'd use this when you'd already have a visible label anyways.
  • aria-describedby sets your element's description to the contents of another node on the page. This is great for noncritical, supplemental information.
  • aria-description… is coming.

As always, avoid ARIA whenever possible.

On the <dl> | Ben Myers

Using a description list dl with description terms dt and their description detail dd: so basically a list of key - value pairs.

Advangtages for screen readers instead of divs:

  1. The screenreader could tell the user how many name–value groups are in the list.
  2. The screenreader could tell the user how far into the list they are.
  3. he screenreader could treat the list as one block that the user could skip over if they're uninterested in it.
RSS Readers: Yet Another Case for Semantic Markup | Ben Myers

RSS reader does not load styles and relies on HTML semantic!

How (Not) to Build a Button | Ben Myers

A button style-reset in CSS:

button {
  display: inline-block;
  border: none;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 1;
  background: transparent;
  -webkit-appearance: none;
}

and again: link for content and button for actions!

8 Tips from the TS Wizard - using, as const, never - YouTube
“We’re All Just Temporarily Abled” - Jim Nielsen’s Blog

It is when you start to not be fully able that

Through all of it, I’ve found myself noticing “accessibility” helpers more than ever before: that railing on the stairs, that ramp off to the side of the building, that elevator tucked away in the back.

1 in 5 people currently have a disability. 100% of people will have some form of disability in their lifetime.

Comparing Y2K action against Climate Inaction

TL;DR;

Capitalism was aware of the Y2K bug and took action even if it costs millions.

This is because my colleagues and my friends and I had been engaged in a multi-billion dollar, multi-year, multi-million person, quasi-coordinated project to fix the problem.

There are two obstacles to climate change to follow the same path though:

Responsibility for climate change is sparse and does not benefit an actor in particular if one makes some effort.

Capitalism's secondary tenet, short-termism, doesn't permit it to respond to non-specific risks, even if they're real, because that would require committing wealth to an effort from which 1-year or 5-year returns can't be measured in terms of greater wealth.

I'm OK; The Bull Is Dead | Computerworld
  1. Punch line
  2. Current status
  3. Next steps
  4. Explanation

"Dad, I'm OK; the bull is dead."
"The car is damaged but operable."
"He then explained about the location of the accident and informed me that a person nearby had called the police and that he (Raj) had taken a few pictures of the accident scene. You don't need to rush. I'll explain when I see you."

In journalism, this is known as the inverted pyramid style

Api perso: Fetchit, le bon chienchien du oueb... - Warrior du Dimanche
90 Seconds to Emotional Resilience
  1. Identify an emotional reaction
  2. Label the emotion
  3. Allow the feeling to come and go without judging or trying to change it

According to Harvard brain scientist Dr. Jill Bolte Taylor, ninety seconds is all it takes to identify an emotion and allow it to dissipate while you simply notice it.

DreamGPT – Laissez l’IA nourrir votre inspiration

Ok un générateur d'idées, cela arrive...

Courses | gerardkcohen.me

Courses that somehow seems relevant to every web developer. There is a 10-day trial.

Should developers work around assistive technology bugs? | Writing | gerardkcohen.me

So the question is, when you have done everything "right" in your attempt to do the right thing and it still doesn't work, at what point do you give up and when do you push on and try to make it right?

What to do?

  1. Do nothing (and it degrades user experience for years until a fix is made)
  2. Suggest an alternative (and it takes years to fix to go through the roadmap)
  3. Work around it
  4. Engineer a solution
</> htmx ~ Why htmx Does Not Have a Build Step

htmx does not have a build step and delivers the source file as a single 3500 LOC file. Alexander Petrois justifies this choice, as it is a tradeoff.

How we implemented serverless full-text search in Rust – Grafbase
What Nobody Ever Told Me About Accessible Forms | Writing | gerardkcohen.me

In a form, the user gets the screen reader navigation capabilities. The tab key becomes the norm again, and all that helps without aria is then the <label for=""> each input.

F@*K Your Code of Conduct | Writing | gerardkcohen.me

The meaning of the post is that a code of conduct is a poor level of establishing social norms. Empathy should drive us.

Des données personnelles de dix millions de demandeurs d’emploi dérobées

Un sous-traitant de Pole Emploi a subit un acte de malveillance d'après le communiqué https://www.pole-emploi.fr/candidat/soyez-vigilants/acte-de-cyber-malveillance-soyez.html.

⬛ Intolérance, racisme...Une explication avec le syndrome du grand méchant monde - Hacking social

Elle crée l’illusion de l’insécurité totale puis préconise implicitement la solution : un état sécuritaire, surveillé par de nombreuses caméras de surveillance et autres procédés (drones, espionnage des citoyens sur le web…). Il le faut, car vous avez 50 % de chances de vous faire agresser durant la semaine. Ah non… un seul pourcent seulement.

À propos de la télévision

Welcome to 404 Media

Le média fondé par une partie de la rédaction de Motherboard

(via https://sebsauvage.net/links/?hRX7pA)

La Poste lance son premier timbre NFT, collectionneurs visés - La Revue du Digital

Toutes les données relatives aux NFT sont conservées dans des serveurs propres au groupe La Poste.

lol encore une blague, avec une blockchain centralisée. On note qu'il y a aussi un certificat physique, donc qu'elle est l'intérêt de la blockchain.

On sait par exemple que l’on a acheté le N°999 de la série.

Ah oui c'est de l'innovation, on ne le savait pas avant...

A First Look at the Websites and Software Applications Accessibility Act Bill | Ben Myers
Things you forgot (or never knew) because of React - Josh Collinsworth blog

An argument against React, because all its features are already built-in.

Elon Musk and ‘Tesla Syndrome’ Explains Why Tech Is Making Us Miserable
The C4 model for visualising software architecture
Astro: a friendly and powerful companion for your content-driven site | Karin's space
“Depuis que je travaille en Suisse, je m’adonne au luxe et je ne compte pas les dépenses”
Ben's Humane Guide to Technical Blogging | Ben Myers
  1. It's perfectly fine to blog just for fun.
  2. Start out on a premade platform.
  3. If you decide to own your own platform, keep it boring.
  4. Use semantic markup.
  5. It's totally okay not to have a cadence.
  6. You'll be amazed what some people don't know yet.
  7. Sometimes, 80% > 100%
  8. It's okay to ignore some feedback.

I found that the cyclical nature and the pressure to write anything was burning me out.

Yeah, I have that too. That and the thing is I also didn't want to write 3 phrases, so I have never-ending articles that I never publish 😞

Vite code splitting that just works | Sambit Sahoo

The plan is to import the dependencies from package.json and modify the rollup output chunks to split each dependency from the vendor bundle. A vendor array should be there with the boot dependencies.

19 licences méconnues et inhabituelles - Warrior du Dimanche

More realistic:

The Scarcest Thing in the World - by Ted Gioia

Communities need trust, and it is more relevant with social media

Archiving URLs · Gwern.net

How to archive URLs and their content. It is a mine of tricks or information.

Why your blog still needs RSS — Paolo Amoroso's Journal

You completely give up control of your traffic to search engines and social platforms. Along with email newsletters, RSS is among the few options remaining to bloggers for establishing a direct communication channel and relationship with readers. With no gatekeepers.

The two arguments against do not stand:

  • ads can be enforced by providing a snippet of the post. The reader then needs to navigate to the blog post URL
  • web scraping is not that much harder on a blog too