Daily Weekly Monthly

Monthly Shaarli

All links of one month in a single page.

August, 2022

⚡ Web Performance Tips

Un regroupement d'articles qui parlent en profondeur de comment optimiser une appli web. C'est plein de bonnes pratiques à avoir en tête quand on développe.

Icônes

Un regroupement des icônes de plus de 100 packs. Ça en fait un petit paquet. Et si vous voulez les utiliser dans vos projets sans vous prendre la tête, il y a cette lib : https://github.com/antfu/unplugin-icons

Image libre de droit

En remplacement d'Unsplash.

vue-snip

Une directive qui permet de masquer un texte après un certain nombre de lignes. Très pratique !

Chart.js | Open source HTML5 Charts for your website

Une lib JS simple et efficace pour faire des graphiques. Elle est utilisée par Plausible visiblement, je pense que c'est gage de qualité.

ntfy.sh | Send push notifications to your phone via PUT/POST

Une solution open-source et auto-hébergeable pour envoyer des notifications push sur votre téléphone.

RedBeanNode Docs

Un ORM construit au dessus de knex.js (qui est un query builder), qui a la particularité de ne pas nécessiter de configuration de schémas au préalable. La création des tables et colonnes se fait à la volée en fonction du code.

C'est bien sûr inspiré de RedBeanPHP.

Building and Running SQL Queries with Knex.js - DEV Community

Une bonne introduction à l'utilisation de knex.js qui est ce qu'on pourrait appeler un SQL query builder. La juste couche d'abstraction pour interagir avec une DB selon moi.

What Are Refresh Tokens and How to Use Them Securely

Un topo sur une façon t'implémenter les refresh tokens JWT de manière sécurisée.

Axios Interceptors tutorial with Refresh Token example - BezKoder

Gestion d'un refresh token JWT avec axios côté client.

En gros lorsque l'access token est périmé, le client est censé utiliser le refresh token pour obtenir un nouvel access token. Mais il faut que ça se passe de manière totalement transparente pour le client. Ça implique donc :

  1. D'intercepter l'erreur que l'API va renvoyer dans le cas où l'access token est périmé (a priori une erreur HTTP 401).
  2. Effectuer une requête vers le service refresh de l'API pour récupérer un nouvel access token.
  3. Sauvegarder le nouvel access token au lieu de l'ancien côté client.
  4. Ré-effectuer la requête prévue initialement.

Tout cela peut se faire grâce aux intercepteurs d'axios.

SlidesCarnival: Best Free PPT Templates and Google Slides Themes

Des templates PowerPoint et Google Slides gratuits.

Open Web Components

Ce site regroupe plein de ressources autour des web components. Notamment des exemples de design systems. Parfait si vous cherchez l'inspiration pour votre prochain projet.

Learn Eleventy From Scratch

Un tuto très progressif pour apprendre comment utiliser le générateur de site static Eleventy.

AutoPWN Suite

À utiliser sur vos propres infrastructures évidemment :)

AutoPWN Suite is a project for scanning vulnerabilities and exploiting systems automatically.

Magic shot - Screenshot editor for busy indie makers

Un outil pour améliorer un screenshots en vue de le présenter ou le partager.

How and why we removed jQuery from GOV.UK - Inside GOV.UK

Super initiative ! Quand je vois tous ces sites dont la home page fait 10 MB de scripts, CSS et images en tout genre et que ça semble ne gêner personne 🙄

Removing jQuery from GOV.UK was a huge yet manageable task that led to improved code and performance gains across the site. This is how and why we did this work.

Iconic — Free “do wtf you want with” pixel-perfect icons

Un gros pack d'icônes utilisables librement.

Free, “do wtf you want with” pixel-perfect icons. New icons added every week.

LaraCasts: Learn Vue 3: Step by Step

Une série de 31 vidéos (5h22 au total) pour apprendre Vue 3 de zéro. Et c'est gratuit.

Je commence à jouer un peu avec Vue 3 et la nouvelle composition API, et c'est assez fabuleux. Mais c'est important de maîtriser quelques nouveaux concepts.

Fontsource

Une collection de packages npm qui permettent d'ajouter de nouvelles polices d'écriture à vos applications web sans vous prendre la tête.

C'est aussi simple que :

npm install --save @fontsource/open-sans

puis dans votre index.js :

import '@fontsource/open-sans/400.css';