Monthly Shaarli

All links of one month in a single page.

January, 2023

2022 JavaScript Rising Stars

The technologies that are gaining popularity. It is based on github stars.

Littoral : dans le Bessin, les assurances ne couvrent plus les risques en cas d'inondations

Les risques d'inondation augmentent et les assurances ne couvriront plus ce cas dans le Bessin. Plus tard, peut être dans toutes les zones à risques.

arantius/web-color-wheel

This representation is awesome!
#project #idea better sort the colors (eventually with hsl conversion)

Le Média Positif 🍀 on Twitter: "🇫🇷 A 21 ans, Adam Siao Him Fa est devenu, hier, champion d'Europe de patinage artistique à l’issue de cette magnifique prestation ! ❤️ https://t.co/VW4UJX4pBa" / Twitter
The Math Behind Nesting Rounded Corners – Cloud Four

How to get right proportions for a rounded corner inside of a rounded container?

outerRadius - gap = innerRadius

Check mimetypes and extensions locally | mimetype.io

Utility to get a mime type

release-it/release-it: 🚀 Automate versioning and package publishing

It is very useful indeed!

Evan You

The personal website of Evan You. It is minimalistic.

Changelog.com/podcasts

A list of podcasts: from JS, Infrastructure, and dev topics

Passez au Lean pour coder vos produits.
  1. Une seule chose à la fois

  2. L’andon. On arrête tout.
    Si une personne est bloqué, on arrête tout tant qu'une solution n'est pas trouvé. Si besoin, on fait évoluer les standards.

  3. les standards
    Alors si tu sais comment livrer du code de qualité, écris-le et explique-le. Un document qui guide notre façon de travailler et auquel on a nous-même contribué, c’est un outil simple et puissant pour accroître la qualité de ce qu’on fait.

svitejs

A organization about useful vite projects. It does not seems very maintained though.

Nathan Barry on Twitter: "10 years ago, I started my first SaaS company. In that time, I’ve grown it to $33.4 million in annual recurring revenue. Here are 10 lessons I’ve learned over the last decade: https://t.co/MBSFv1Pz3Q" / Twitter
  1. It takes longer than you think
  2. Go all-in sooner (part-time is helpful to test an idea).
  3. Make direct sales (don't think about scaling).
  4. Choose a niche.
  5. Focus on product quality, and talk to your customers.
  6. Build a culture of execution.
  7. Don't underestimate deliverability and fraud.
  8. Meet customers and partners in person.
  9. Use workshops to create urgency.
  10. Move from a cost center to a revenue center.
Millennials are shattering the oldest rule in politics | Financial Times

Unlike previous generations, British and American Millenials (aged 26-41) do not become more conservative as they age - on the contrary
Similar patterns are evident in Britain, where millennials are more economically leftwing than Gen-Xers and boomers were at the same age

Also

UK millennials and their “Gen Z” younger cousins will probably cast more votes than boomers in the next general election.

So... we will see :)

BB27000 on Twitter: "J'ai simplifié pour que tout le monde comprenne. https://t.co/aY6ciidxT9" / Twitter

Un schéma de l'organisation de la SNCF (simplifiée).

Avant VS après. Le schéma est inspirée de celui d'EDF, représentant son ouverture à la concurrence et ce que cela représente comme complexité.

antfu/vitesse: 🏕 Opinionated Vite + Vue Starter Template

A ready to go starter project with ... everything. A lite version exist for a smaller scope.

antfu/vite-plugin-inspect: Inspect the intermediate state of Vite plugins
vite-plugin-list-directory-contents - npm

Clicking any .html files will be compiled by vite (vited?). So, rather than manually type in the paths to all your inputs, this will list all your files so you can click them with ease. Like the good 'ol Index Of / days.

A simple plugin :)

I will check vue plugin system sometime, because it seems powerful in order to improve DX.

Creating 3D Illustrations with CSS - Frontend Horse
  • using transform-style: preserve-3d; on all elements
  • make cubes
  • add animations
  • one source of light and 3 shades:
    • Light: Direct light
    • Medium: Indirect light
    • Dark: No light

#idea #project we could build a library for this with SCSS. One to build objects, another that is a collection of items.

History of Web Browser Engines from 1990 until today
Building data-centric apps with a reactive relational database

The deficiencies of SQL to use it as frontend databases:

  1. Standard SQL doesn’t support nesting
  2. SQL syntax is verbose and non-uniform.
  3. SQL’s scalar expression language is weird and limited
  4. SQL doesn't have good tools for metaprogramming and changing the shape of a query at runtime
Consommer moins de viande · Boris Schapira

Par contre, pour convaincre d’autres citoyen·nes d’essayer, il faut avoir des arguments : des alternatives, des recettes, un discours construit sur la nécessité de consommer moins de viande, des idées pour y arriver et une autorité qui s’acquiert, en partie, par l’exemple.

Mangez moins de viande n’est pas une attaque envers les un·es, les autres, les traditions ou les valeurs du groupe. Vous pouvez manger moins de viande et déguster un chapon à Noël. Manger moins de viande et apprécier celle que vous achetez. L’objectif, c’est d’en consommer moins. C’est un impératif de survie.

Optimiser les images (à la main) de manière un peu trop hardcore – l3m website

Utiliser WebP:

  • png : 477,8 KiB
  • jpg : 103,9 KiB
  • webp : 51,0 KiB
  • webp : 40,3 KiB (avec flou gaussien appliqué de 0,5px)

Les services en lignes permettent de gagner quelques pourcentages grâces à des presets plus aggressifs.

Mdash

Mdash is a new kind of UI library. It's 100% standards-based and it's tiny.

Mdash components are comprised of standard HTML, custom HTML, and Custom Elements. As such, Mdash works with any framework (or no framework) and works with all types of web projects: SSR, SPA, PWA, static site, and even popular email clients.

Only 6.8kB. It uses a minimal appearance but adds components that are used everywhere such as switch buttons-

HTTP Status Dogs

One status code, one http code.
Similar to Htto Status Cats... for dogs.

IT Tools - Handy online tools for developers

All in one resource that includes dozens of tools and utilities useful for web developers and programmers.

It seems well designed :)

Generate Mesh Gradients | Customize & Free Export PNG

Generate beautiful mesh gradients

Reasonable Colors

Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.

CSS GUI — Visual styling controls for the web

Build HTML elements visually

Source code: https://github.com/components-ai/css.gui

Animatize - animations the easy way

Generate animations with the mouse :D

Github: https://github.com/panphora/animatize

DoodleCSS

Manual-writing styled forms with a CSS only file.

The font Short Stack should also be used. It is available as NPM package.

Primitives – Radix UI

Unstyled, accessible components for building high‑quality design systems and web apps in React.

We need this in other frameworks!

Zag - Rapidly build UI components without sweating over the logic. - Zag

Using finite-state machines seems to be a good idea!

A collection of framework-agnostic UI components patterns like an accordion, menu, and dialog that can be used to build design systems for React, Vue, and Solid.js

CSS Fingerprint

Using CSS to get a fingerprint of the browser. Here is a all-in-one resource.

Readmi | Create Your Readme

A tool to make better README and the easy way.

It is especially useful for GitHub.

Consentement publicitaire : la CNIL inflige une amende de 8 millions d’euros à Apple

« Les services de la CNIL ont constaté que sous l’ancienne version 14.6 de système d’exploitation de l’iPhone, lorsqu’un utilisateur se rendait sur l’App Store, des identifiants poursuivant plusieurs finalités, dont des finalités de personnalisation des annonces publicitaires diffusées sur l’App Store, étaient par défaut automatiquement lus sur le terminal sans recueil du consentement »

Fani dessinatrice ✏️ on Twitter: "Meilleur dessin humoristique de l'année ! Je m'incline. (les mecs, vous êtes dingues ou quoi ? 😳) #chaucidou #velo #circulation https://t.co/YxtPhJudSC" / Twitter

La chaucidou est une chaussée pour les circulations douces. Il y a une voie pour les voitures, et deux pistes cyclables.

Deux voitures ne peuvent circuler de front doivent se déporter sur la voie cycliste.

Föderierte Timeline | Elk

A web client for Mastodon.

The (not yet) open-sourced web app: https://github.com/elk-zone/elk
And the desktop one built with tauri: https://github.com/elk-zone/elk-native

Léαlinux 🐧 on Twitter: "SQL Cheatsheet en une image : https://t.co/JsY2SjGbSY" / Twitter
Time management for makers

Engineers who do this successfully tend to exhibit the following behaviors:

  • They are defensive of their time.
  • They “pay themselves first.”
  • They defend the time of others.
  • They clearly designate interrupt-driven work and batch it.
  • They clearly designate low-leverage work, and time-box it.
  • They communicate with candor.
  • They prioritize ruthlessly.
Depuis que le mariage homosexuel a été légalisé aux États-Unis, le taux de suicide a chuté chez les adolescents

Corrélation: une chute du taux de suicide a été relevé suite à la légalisation du mariage homosexuel aux U.S.

En tenant compte d’autres facteurs contradictoires, ils ont constaté que le taux de suicide des adolescents avait chuté de 7% chez tous les étudiants, et de 14 % chez les étudiants LGBT.

Ces jeunes issus de familles qui intolérants sont 8,4 fois plus susceptibles de tenter de se suicider que les adolescents LGBT ayant des parents plus tolérants, par exemple.

Cependant, cette effet peut être du !à la campagne politique entourant la légalisation, qui a peut-être aidé les adolescents à voir qu’ils n’étaient pas seuls, ou le résultat de la politique elle-même."

Cloud Computing & Linux Servers | Alternative to AWS | Linode
The limited utility of the phrase “GNU/Linux” - Seirdy

TL;DR calling GNU/Linux is a mess. We can stop it as it does not include all distributions.

SCREEN SIZE MAP » Compare viewport sizes

It is possible to display high, medium and low screen sizes by popularity

CSS Loader Generator - CSS Portal

Customizable CSS loaders and spinners

Type Scale - A Visual Calculator

Generate heading/ body font sizes

Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨

Useful for flat design

Animista - CSS Animations on Demand
Glassmorphism CSS Generator | Hype4 Academy

Build semi-transparent, blurred glass-like backgrounds.

mswjs/msw-storybook-addon: Mock API requests in Storybook with Mock Service Worker.

#idea #project make a msw-histoire-addon

openai/whisper: Robust Speech Recognition via Large-Scale Weak Supervision
Calligrapher.ai: Realistic computer-generated handwriting

Generates hand-written style texts

J'ai un aveu à vous faire. - Liens en vrac de sebsauvage

On me dit encore et encore que j'écris de bons tutoriels et documentations, concises, claires et très compréhensibles. Il m'est déjà arrivé de suivre ou dispenser des formations, et à chaque fois on m'a demandé pourquoi je n'en faisais pas mon métier. Ça me fait plaisir, bien sûr. Mais vous savez pourquoi j'écris de bonnes documentations ? Parce que mon cerveau a deux faiblesses :

  • j'ai une mauvaise mémoire.
  • j'ai du mal à comprendre une information si elle n'est pas bien contextualisée (si vous sautez du coq à l'âne, vous allez me perdre).

Donc SebSauvage note tout, pour notre plus grande satisfaction.

Kia King Ishii on Twitter: "Vue family sites created by VitePress looks very good you know 😍 @youyuxi We might wanna have logo for Router and VTU for the branding sake 😆? https://t.co/NLg5H83TKf" / Twitter

Collect all vue websites and make cards with them.
The goal is to gather the preferred way of doing something in vue. For example, routing with vue-router, state management with pinia, SSR with Nuxt, etc...

A

  • Name
  • Logo
  • A description (the one in header)

It has a searchbar too.
More tools can be added from:

It can be built with Vitepress to keep it in the Vue ecosystem.

Project name:

  • classic: Vue Family
  • keep the french tradition: panorama (a similar word for overview)
François Malaussena on Twitter: "Vous avez vu, l’Espagne va baisser la TVA sur les produits essentiels. Vous savez pourquoi on ne le fait pas en France ? La réponse courte, c’est Macron, comme souvent. Mais le détail du pourquoi est hyper intéressant. Explications :" / Twitter

Baisser la TVA? C'est proposé régulièrement, mais le gouvernement refuse car d'après UNE étude sur la restauration en 2009, l'Institut des Politiques Publiques a conclu que cette baisse n'a pas fait baisser le prix de la restauration.
...
et c'est tout ce qui est utilisé depuis des années pour refuser la baisse de la TVA. Une unique étude sur un secteur économique particulier.

Autre question, d’ailleurs : si ça bénéficie aux entreprises, pourquoi est-ce que Macron, qui adore aider les entreprises, ne s’est jamais servi de ce levier pour les aider ?
Bon, évidemment, il y a anguille sous roche.

Et le thread argument sur ce sujet.

Transparence financière : la France suspend discrètement son registre des bénéficiaires effectifs de sociétés

Cette plate-forme, ouverte en avril 2021, permettait à tout citoyen de connaître facilement l’identité des propriétaires des sociétés françaises. Réclamé de longue date par les organisations de la société civile, cet outil était très largement considéré comme une avancée majeure en matière de transparence financière et de lutte contre la fraude et le blanchiment.

Une référence à l’arrêt du 22 novembre 2022 de la Cour de justice de l’Union européenne (CJUE), qui a déclaré illégal l’accès du grand public aux registres européens de bénéficiaires effectifs, au nom du respect de la vie privée.

La plateforme en question: https://data.inpi.fr/
(maintenant accessible, je ne connais en revanche pas la quantité et la qualité des données)

unocss/unocss: The instant on-demand atomic CSS engine.

Better than writing you own utility classes because this tool will generate only the one needed :)

Another great tools initiated by Antfu

UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. There are no core utilities in UnoCSS, all functionalities are provided via presets.

Perflink | JS Benchmarks

Benchmarking javascript snippets :)

Minimal Dark Mode Styling – Eric’s Archived Thoughts
@media (prefers-color-scheme: dark) {
    html body {filter: invert(1);}
    /* the following really should be managed by a cascade layer */
    .some-container-items-or-images {
      box-shadow: 0.25em 0.25em 0.67em #FFF8;
    }
}

From Lary Hudson

you should also set “color-scheme: dark” so that scrollbars change to a dark tint as well.

sql.js

And the related project to use SQLite in memory of a frontend app.

The database file is loaded from a server or a local file... which can be convenient for offline databases!

If the database is available online, it is still ok if it is small and the SQLite file can be downloaded :)

Social Media Style Number Formatting in JS - YouTube

Numbers:
const formatter = Intl.NumberFormat(LOCALE, { notation: 'compact' })

Currency:

Intl.NumberFormat(LOCALE, {
  notation: 'compact',
  style: 'currency',
  currency: 'ZWD'
})
Design Systems: Useful Examples and Resources — Smashing Magazine
Buttons that Spark Joy - Frontend Horse
  • Confetti canon
  • Bookmark Button: transitions between SVGs. The MorphSVG plugin comes in to allow different amount of points. It does the heavy lifting so you can smoothly transition between any SVG Shapes.
Thinking Outside the Box with CSS Grid - Frontend Horse

3 examples to build CSS Grid patterns

Developer Relations Rap Song (Use it if you will)

Our tools are the best, with features that impress

🎶

We build relationships, with developers we meet
And together, we make the product complete

Créer une arborescence en CSS uniquement - Dév. Web - ShevArezo`Blog

An HTML and CSS only tree.
The final CSS-snippet is also available at the end.

It uses only <ul>, <li>,

and` tags in the markup, which makes it very easy and simple.

JSON Crack - Crack your data into pieces

Seamlessly visualize your JSON data instantly into graphs.

UI Buttons

100 buttons that feature styles and hover effects you may not have seen elsewhere.

clay.css - by Adrian Bece

Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.

Free UI faces for designers, avatars, dummy faces, AI generated people faces | Lorem Faces
Actions / Accordion - Default ⋅ Storybook

From the https://design.wonderflow.ai/, here are the Stories of each component.

Bunny Fonts | Explore Faster & GDPR friendly Fonts

Alternative to google fonts, if we must avoid to host the fonts...

Ava Maker - Free Avatar Maker Online
MetalliCSS

Metallic look to HML elements.

Source code: https://github.com/MikaeI/metallicss (available as npm package)

W3.CSS Home

A bootstrap similar library

What was that media query code again??

Copy/Paste the most used media query

Why Atomico js webcomponents?

A react-style library (but only 4 kB!). It is so small and uses JSX.

A component created with Atomico can be used in Html, Vue, Preact, React, Svelte, Solid or any other library.

This seems relevant for small projects or one that needs little interaction without using bare JS. The Lit library needs for example a lot of boilerplates. Here we need a function.

Open-Source UI elements - made with CSS and HTML

A collection of UI components made with HTML and CSS

alvaromontoro/almond.css: Collection of CSS styles to make simple websites look nicer

Another drop-in css stylesheet which make a website beautiful :)

Demo: https://alvaromontoro.github.io/almond.css/demo/

Un homme noir emprisonné à tort pendant une semaine à la suite d'une erreur de reconnaissance faciale, selon un rapport

On aura sûrement ce genre d'abus de la technologie au J.O. puisque le gouvernement a annoncé les utiliser...

Share anything on Twitter without a ban

Convert a text to base64 with data:text/plain;base64

A satiric tool to avoid bans on twitter. Paste the content in the URL bar to read it.

Epis d'Emi 💋 on Twitter: "Quelle princesse n'a jamais les lèvres gercées ? Labello bois dormant.😁" / Twitter

Quelle princesse n'a jamais les lèvres gercées ?

Labello bois dormant.😁

Le cancer de l’hôpital public : les cabinets de conseil privés - L'insoumission
Anthony Fu in Elk: "An interesting story to share:I am using the "+" sign in my emails for registrations on different websites. Today I was trying to update a delivery on UPS, and the email of the package was forwarded from the site I placed the order, which indeed, includes a plus sign.However, **UPS considers it's an invalid character in the email** 😇. (someone at UPS please fix it!)" | Elk

How to fix the wrongly flagged email by customizing the request :)

However, It does make me think to build things as much inclusive as possible. Not only test with the majority, but also think more about rest, as some little things could become huge blockers for them.

Note: Links between working hard, stress and passion

Working hard for something you hate is called stress.
Working hard for something you love is called passion.

Software Maxims

About software supply chain attacks and FOSS software:

There is a small problem here. We are not suppliers. We do not have a business relationship with all these organisations. We are volunteers, writing code and putting it online under these Licences. And yes, we put it online for people to use them. But we do not get anything from it.

[With the MIT licence, maintainers] do not have a business relationship with all these organisations. [Maintainers] are volunteers, writing code and putting it online under these Licences. And yes, [Maintainers] put it online for people to use them. But [Maintainers] do not get anything from it.

To get a supplier, you need to give people what they need to live and they have to agree to these terms.

BADA55.io - CSS hex color words for web developers

#BADA55, #101 (lol), #C55 (CSS), #fb1 (FBI), etc...

It uses the l33t code for that.

CSS loaders and Spinners

Another collection of CSS loaders and spinners

wh0.github.io/glitter/

Animated font

SpinKit | Simple CSS Spinners
Get color palette inspiration from nature - colorpalettes.earth
CSS Pattern: Fancy backgrounds with CSS gradients
cssFilters.co - Custom and Instagram like photo filters for CSS
[Lecture] Challenging Situations: Team Cohesion Destroyers – Carnet de notes

La corrélation première d'une équipe performante est la haute sécurité psychologique de ses membres.

google webfonts helper

Take a google font and self-host it

AutoAnimate - Add motion to your apps with a single line of code
Improve Developer Experience: The /home shortcut

If you are logged in or not, use the /home to display the landing page or the default page of a website.

Also, the logo should have the alt="home" as this is what the users of screen readers expect. See the second point of https://jessbudd.com/blog/screen-reader-usability-testing-observations

Color Formats in CSS - hex, rgb, hsl, lab
  1. 140 named colors
  2. RGB (the traditional notation)
    • Note we can replace rgba(255, 0, 0, 0.5) with rgb(255 0 0 / 0.5)
  3. Hex codes (the de-facto used unit)
  4. HSL (the human-readable format):
    • hue: the pigment used (deg)
    • saturation: how much pigment (%)
    • lightness: how light? (%)
  5. display p3: only supported in Safari and Chrome but allow more colors than sRGB
  6. LCH: a more human-friendly representation than HSL. It is only supported in recent versions of Chrome and Safari though. oklch fixes some bugs of lch.
La pollution lumineuse augmente rapidement

Résultat, la luminosité de la nuit augmenterait de 10 % par an dans les zones observées par les astronomes amateurs.

make 8-bit art!

Draw it pixel by pixel in this web UI

Schreiberling.app

Create a product advertisement from a product description.

antfu/ni: 💡 Use the right package manager

A cli tool that handle the package manager used behind the hood. So the command will be behind ni translated into the corresponding one between yarn, npm, deno, pnpm, etc...

UnJS

A lot of so useful projects for web development!

Check them here: https://unjs.io/

Letters to the future
Daniel Kelley on Twitter: "30 cybersecurity search engines for researchers: 1. Dehashed—View leaked credentials. 2. SecurityTrails—Extensive DNS data. 3. DorkSearch—Really fast Google dorking. 4. ExploitDB—Archive of various exploits. 5. ZoomEye—Gather information about targets." / Twitter
  1. Dehashed—View leaked credentials.
  2. SecurityTrails—Extensive DNS data.
  3. DorkSearch—Really fast Google dorking.
  4. ExploitDB—Archive of various exploits.
  5. ZoomEye—Gather information about targets.
  6. Pulsedive—Search for threat intelligence.
  7. GrayHatWarfare—Search public S3 buckets.
  8. PolySwarm—Scan files and URLs for threats.
  9. Fofa—Search for various threat intelligence.
  10. LeakIX—Search publicly indexed information.
  11. DNSDumpster—Search for DNS records quickly.
  12. FullHunt—Search and discovery attack surfaces.
  13. AlienVault—Extensive threat intelligence feed.
  14. ONYPHE—Collects cyber-threat intelligence data.
  15. Grep App—Search across a half million git repos.
  16. URL Scan—Free service to scan and analyse websites.
  17. Vulners—Search vulnerabilities in a large database.
  18. WayBackMachine—View content from deleted websites.
  19. Shodan—Search for devices connected to the internet.
  20. Netlas—Search and monitor internet connected assets.
  21. CRT sh—Search for certs that have been logged by CT.
  22. Wigle—Database of wireless networks, with statistics.
  23. PublicWWW—Marketing and affiliate marketing research.
  24. Binary Edge—Scans the internet for threat intelligence.
  25. GreyNoise—Search for devices connected to the internet.
  26. Hunter—Search for email addresses belonging to a website.
  27. Censys—Assessing attack surface for internet connected devices.
  28. IntelligenceX—Search Tor, I2P, data leaks, domains, and emails.
  29. Packet Storm Security—Browse latest vulnerabilities and exploits.
  30. SearchCode—Search 75 billion lines of code from 40 million projects.
Sacha André on Twitter: "Je suis fatigué des gens qui ralent sur la SNCF. Vraiment vous vous rendez pas compte de ce que subit cette boîte. Avant fier service public, maintenant entreprise en décrépitude, si vous n'avez pas vos train remerciez Sarko Hollande et Macron. Ne méprisez pas les travailleurs" / Twitter

Pourquoi est-il pertinent d'arrêter de se concentrer sur les travailleurs, mais sur les décisions prises (changement de politique, etc...).

Developer Roadmaps - roadmap.sh

roadmap.sh is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.

Twitter a coupé l'accès aux applications tierces
Les milliardaires n’en finissent plus de s’enrichir
Anna’s Archive

A search engine for books.

EDIT 2023-08-25: it stores their books now, and it is the biggest library of the world!

sql.js demo: Online SQL interpreter

#idea #project: make a better UI :)

Your frontend needs a database - YouTube

Good points! I have use cases where a frontend database approach will work perfectly!

Sous quel statut ? – Carnet de notes

SASU, Portage salarial, Micro-entreprise, SASU pour en tirer un SMIC + dividences, EIRL ou EURL.

Chris's Wiki :: blog/programming/RustIsInevitable

A bit of thought about Rust that will replace C/C++ little by little. and how Rust will be (and is) wider used than Zig because of its safety.

Ils sont les encyclopédistes de Wikipédia -
  1. 5 000 bénévoles très impliqués
  2. Loisir de passionnés, partage et plaisir
  3. Les éditions sont surveillées par des "patrouilleurs"
  4. Après une croissance énorme en 2006-2007, l'encyclopédie croît lentement mais sûrement. Il s'agit surtout d'améliorer la qualité des articles.
Photos de salariés japonais pendant leurs semaines de travail de 60 heures
Stress marketing : 6 techniques pour pousser la vente - Apprenti Millionnaire
  1. Le nombre de vente
  2. La dernière vente
  3. L'avis des clients
  4. Le nombre de visiteurs sur la page de vente
  5. La quantité limitée
  6. La durée limitée

Cela repose sur deux principes:

  • créer une forte valeur au produit ou service
  • donner l'impression que le produit or l'offre associée va bientôt disparaître
Qualité — David Larlet

Pour aller plus loin, le code en lui-même n’est peut-être pas si critique, mais ce que l’on a appris en le concevant et l’utilisant l’est bien davantage. C’est cette transmission qu’il est important de rendre possible au sein de l’équipe.

Preline UI, crafted with Tailwind CSS

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Source code: https://github.com/htmlstreamofficial/preline

Examples · siimple CSS

It provides examples: https://siimple.xyz/examples

Also available on NPM for a 7.8kB minified and gzipped package.

California Design System

This system makes it easy to build digital services that meet the needs of Californians.

Stylo - Another kind of rich text editor

Stylo is an open source WYSIWYG interactive editor for JavaScript. Its goal is to bring great user experience and interactivity to the web, for everyone, with no dependencies. Stylo is a Papyrs project.

Source code: https://github.com/papyrs/stylo

Make a wrapper for Vue 3?

Paper Prototype CSS

Paper Prototype CSS is CSS framework that mimics paper prototyping, sort of like a handdrawn look but a little more ransom-note-ish, with the help of two informal-looking free fonts.

And the blog post related: https://shkspr.mobi/blog/2022/06/paper-prototype-css/

Home - Goldman Sachs Design

The design system of Goldman Sachs.

Vanta.js - Animated 3D Backgrounds For Your Website

It uses WebGL for it.

The Open Source Twilio Alternative | Fonoster

Engage with your customer with voice or messaging with a single easy-to-use platform.

Might be useful

Free Online Tools - AllinOne.Tools

A website collecting online utility tools.
Categories: Image, Pdf, Social Media, Text & Lists, Encryption, Web, Others

Tailwind CSS Components | PostSrc

A collection of Tailwind components

Des technologies dédiées à la lutte contre la Covid-19 sont détournées à des fins de surveillance de masse partout dans le monde

Oh surprise

Fixing a Memory Leak in a Production Node.js App
Frontend Horse

Great articles and content for frontend programmers

Beating the Averages

The same thing will happen if you're running a startup, of course. If you do everything the way the average startup does it, you should expect average performance. The problem here is, average performance means that you'll go out of business. The survival rate for startups is way less than fifty percent. So if you're running a startup, you had better be doing something odd. If not, you're in trouble.

And an eloge of Lisp, or in the world of startups, the art of doing things differently.

Screenshots taken during 'cypress run' do not respect the viewport size set

In cypress.config.ts, property e2e.setupNodeEvents for a screen 1920x1080 :

on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {
        args.push('--window-size=1920,1080')
        return args
    }
})

This goes for chrome, but there also a workaround for Electron: https://github.com/cypress-io/cypress/issues/2102#issuecomment-692585453

Building a Vue 3 component library - LogRocket Blog

This is the best guide I have found so far.

Blog Stéphane Bortzmeyer: ChatGPT remplacera t-il les programmeuses et programmeurs ?

Oui cela va changer le monde du développement
Oui on aura toujours besoin d'humains

google/comprehensive-rust: This is the Rust course used by the Android team at Google. It provides you the material to quickly teach Rust to everyone.

A 4-days workshop to learn rust

Michael Thiessen on Twitter: "You can detect a mouse hover in @vuejs just by listening to the right events: https://t.co/UoPEiTQgvV" / Twitter

Indeed:

<template>
  <div
    @mouseover="hover = true"
    @mouseleave="hover = false"
  />
</template>

And now we now when the mouse is hovering.
A warning though: it is not compatible with touch screens !

NativeScript-Vue

embed Vue as Native App with the same components and writing style.

It seems not mature enough for production ready apps.

2022 Year In Review | The Vue Point

2022 is relevant for the stable release of Vue 3. The ecosystem catch up: Nuxt 3, Vuetify 3, Quasar, NaiveUI, Ionic Vue, PrimeVue, InkLine, ElementPlus, ...

A focus has been given to Volar (1.0) and Vite. Vue 2 remains compatible with the version 2.7 "Naruto".

2023 expectations:

  • smaller and more frequent releases
  • vapor mode
  • conferences
Design Systems Repo | A Collection of Design System Resources
CSS Layout Generator

It generates different layouts

Single Element CSS Spinners

Another list of CSS spinners

Whirl: CSS loading animations with minimal effort!
Pattern Generator | Create Seamless, Royalty-Free Patterns

Another background css pattern generator

Another one: https://patternizer.com/4rvv

Transition.css - easy transitions with clip-path
Neumorphism/Soft UI CSS shadow generator
Smooth Shadow

Generates beautiful shadows