Monthly Shaarli
January, 2023
The technologies that are gaining popularity. It is based on github stars.
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.
How to get right proportions for a rounded corner inside of a rounded container?
outerRadius - gap = innerRadius
Utility to get a mime type
It is very useful indeed!
The personal website of Evan You. It is minimalistic.
A list of podcasts: from JS, Infrastructure, and dev topics
-
Une seule chose à la fois
-
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. -
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.
A organization about useful vite projects. It does not seems very maintained though.
- It takes longer than you think
- Go all-in sooner (part-time is helpful to test an idea).
- Make direct sales (don't think about scaling).
- Choose a niche.
- Focus on product quality, and talk to your customers.
- Build a culture of execution.
- Don't underestimate deliverability and fraud.
- Meet customers and partners in person.
- Use workshops to create urgency.
- Move from a cost center to a revenue center.
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 :)
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é.
A ready to go starter project with ... everything. A lite version exist for a smaller scope.
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.
The deficiencies of SQL to use it as frontend databases:
- Standard SQL doesn’t support nesting
- SQL syntax is verbose and non-uniform.
- SQL’s scalar expression language is weird and limited
- SQL doesn't have good tools for metaprogramming and changing the shape of a query at runtime
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.
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.
- png : 171,1 KiB (-61%) via https://tinypng.com/
- jpg : 97,5 KiB ( -6%) via https://tinyjpg.com/
- webp : 49,5 KiB ( -3%) via https://ezgif.com/optiwebp
- webp : 38,8 KiB ( -4%) (avec flou gaussien appliqué de 0,5px)
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-
One status code, one http code.
Similar to Htto Status Cats... for dogs.
All in one resource that includes dozens of tools and utilities useful for web developers and programmers.
It seems well designed :)
Generate beautiful mesh gradients
Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.
Build HTML elements visually
Source code: https://github.com/components-ai/css.gui
Generate animations with the mouse :D
Manual-writing styled forms with a CSS only file.
The font Short Stack should also be used. It is available as NPM package.
Unstyled, accessible components for building high‑quality design systems and web apps in React.
We need this in other frameworks!
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
Using CSS to get a fingerprint of the browser. Here is a all-in-one resource.
A tool to make better README and the easy way.
It is especially useful for GitHub.
« 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 »
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.
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
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.
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."
TL;DR calling GNU/Linux is a mess. We can stop it as it does not include all distributions.
It is possible to display high, medium and low screen sizes by popularity
Customizable CSS loaders and spinners
Generate heading/ body font sizes
Useful for flat design
Build semi-transparent, blurred glass-like backgrounds.
Generates hand-written style texts
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.
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:
- Vuejs organization repostories: https://github.com/orgs/vuejs/repositories
- https://next.awesome-vue.js.org/resources/official-resources.html
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)
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.
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)
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.
Benchmarking javascript snippets :)
@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.
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 :)
Numbers:
const formatter = Intl.NumberFormat(LOCALE, { notation: 'compact' })
Currency:
Intl.NumberFormat(LOCALE, {
notation: 'compact',
style: 'currency',
currency: 'ZWD'
})
- 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.
3 examples to build CSS Grid patterns
Our tools are the best, with features that impress
🎶
We build relationships, with developers we meet
And together, we make the product complete
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.
Seamlessly visualize your JSON data instantly into graphs.
100 buttons that feature styles and hover effects you may not have seen elsewhere.
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.
From the https://design.wonderflow.ai/, here are the Stories of each component.
Alternative to google fonts, if we must avoid to host the fonts...
Metallic look to HML elements.
Source code: https://github.com/MikaeI/metallicss (available as npm package)
A bootstrap similar library
Copy/Paste the most used media query
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.
A collection of UI components made with HTML and CSS
Another drop-in css stylesheet which make a website beautiful :)
On aura sûrement ce genre d'abus de la technologie au J.O. puisque le gouvernement a annoncé les utiliser...
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.
Quelle princesse n'a jamais les lèvres gercées ?
Labello bois dormant.😁
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.
Working hard for something you hate is called stress.
Working hard for something you love is called passion.
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.
Another collection of CSS loaders and spinners
Animated font
La corrélation première d'une équipe performante est la haute sécurité psychologique de ses membres.
Take a google font and self-host it
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
- 140 named colors
- RGB (the traditional notation)
- Note we can replace
rgba(255, 0, 0, 0.5)
withrgb(255 0 0 / 0.5)
- Note we can replace
- Hex codes (the de-facto used unit)
- HSL (the human-readable format):
- hue: the pigment used (deg)
- saturation: how much pigment (%)
- lightness: how light? (%)
- display p3: only supported in Safari and Chrome but allow more colors than sRGB
- 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.
Résultat, la luminosité de la nuit augmenterait de 10 % par an dans les zones observées par les astronomes amateurs.
Draw it pixel by pixel in this web UI
Create a product advertisement from a product description.
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...
A lot of so useful projects for web development!
Check them here: https://unjs.io/
- Dehashed—View leaked credentials.
- SecurityTrails—Extensive DNS data.
- DorkSearch—Really fast Google dorking.
- ExploitDB—Archive of various exploits.
- ZoomEye—Gather information about targets.
- Pulsedive—Search for threat intelligence.
- GrayHatWarfare—Search public S3 buckets.
- PolySwarm—Scan files and URLs for threats.
- Fofa—Search for various threat intelligence.
- LeakIX—Search publicly indexed information.
- DNSDumpster—Search for DNS records quickly.
- FullHunt—Search and discovery attack surfaces.
- AlienVault—Extensive threat intelligence feed.
- ONYPHE—Collects cyber-threat intelligence data.
- Grep App—Search across a half million git repos.
- URL Scan—Free service to scan and analyse websites.
- Vulners—Search vulnerabilities in a large database.
- WayBackMachine—View content from deleted websites.
- Shodan—Search for devices connected to the internet.
- Netlas—Search and monitor internet connected assets.
- CRT sh—Search for certs that have been logged by CT.
- Wigle—Database of wireless networks, with statistics.
- PublicWWW—Marketing and affiliate marketing research.
- Binary Edge—Scans the internet for threat intelligence.
- GreyNoise—Search for devices connected to the internet.
- Hunter—Search for email addresses belonging to a website.
- Censys—Assessing attack surface for internet connected devices.
- IntelligenceX—Search Tor, I2P, data leaks, domains, and emails.
- Packet Storm Security—Browse latest vulnerabilities and exploits.
- SearchCode—Search 75 billion lines of code from 40 million projects.
Pourquoi est-il pertinent d'arrêter de se concentrer sur les travailleurs, mais sur les décisions prises (changement de politique, etc...).
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.
A search engine for books.
EDIT 2023-08-25: it stores their books now, and it is the biggest library of the world!
Good points! I have use cases where a frontend database approach will work perfectly!
SASU, Portage salarial, Micro-entreprise, SASU pour en tirer un SMIC + dividences, EIRL ou EURL.
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.
- 5 000 bénévoles très impliqués
- Loisir de passionnés, partage et plaisir
- Les éditions sont surveillées par des "patrouilleurs"
- 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.
- Le nombre de vente
- La dernière vente
- L'avis des clients
- Le nombre de visiteurs sur la page de vente
- La quantité limitée
- 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
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 is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
Source code: https://github.com/htmlstreamofficial/preline
It provides examples: https://siimple.xyz/examples
Also available on NPM for a 7.8kB minified and gzipped package.
This system makes it easy to build digital services that meet the needs of Californians.
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 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/
The design system of Goldman Sachs.
It uses WebGL for it.
Engage with your customer with voice or messaging with a single easy-to-use platform.
Might be useful
A website collecting online utility tools.
Categories: Image, Pdf, Social Media, Text & Lists, Encryption, Web, Others
A collection of Tailwind components
Oh surprise
Great articles and content for frontend programmers
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.
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
This is the best guide I have found so far.
Oui cela va changer le monde du développement
Oui on aura toujours besoin d'humains
A 4-days workshop to learn rust
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 !
embed Vue as Native App with the same components and writing style.
It seems not mature enough for production ready apps.
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
It generates different layouts
Another list of CSS spinners
Another background css pattern generator
Another one: https://patternizer.com/4rvv
Generates beautiful shadows