Une chouette collection de liens top moumoute pour nous, les devs. Moumoute. Dave. On se comprend.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
jrm abb116db5d
ADD wireframes & mockups tools
11 hours ago
README.md ADD wireframes & mockups tools 11 hours ago

README.md

Amoureux du web 💖

Bienvenue dans cette collection de liens utiles (pour nous les devs)
Ajoutez vos liens cools ici ! (contact pour accès au repo : junk+codeberg@humanize.me)

Au sommaire :

Newsletters indispensables

Les liens qui suivent proviennent souvent d'une pincée de newsletters vraiment chouettes, que je suis depuis des années. Donc abonnez-vous y, c'est gratos, et ça amène de la bonne inspiration dans vos boîtes mails!

mais aussi :

ah et aussi :

Pédagogie

  • Rety is a library that allows you to record the edits you make on one or more pieces of text (usually code) and replay them later to recreate the same typing flow.

Setup

Tout pour tester son setup :

Git

Markdown

API

  • DummyJSON : Get dummy/fake JSON data to use as placeholder in development or in prototype testing
  • The Public APIs List : A community-curated and updated resource for public APIs.
  • Random User Generator API : A free, open-source API for generating random user data. Like Lorem Ipsum, but for people.

Hébergement

Hébergements payants :

Démonstration de code source :

UI/UX

Couleurs

  • Color Formats in CSS - Josh takes us on a tour of the slew of color formats at our disposal (hex, RGB, HSL, etc.), looking at how they work and how to get the best out of them. As with any of Josh's posts, there's a lot to dig into here.

CSS color 4 specs

The new CSS Color 4 specification adds many better ways of declaring colors in CSS. Of these, oklch() is the most interesting one.

OKLCH is a new way to encode colors (like hex, RGBA, or HSL):

palette

gradients

Images & vidéos

Wireframes / Diagrames / Schémas

Maquette

Illustrations

  • Streamline - the world's largest and most consistent icon and illustration sets
  • Vectormaker - Convert images to SVG vectors, PNG-to-SVG Vectors - Vectormaker outlines your pixel based images and turns them into colored SVG vector files.
  • Skribbl - Beautiful, Hand-Drawn Illustrations
  • Boxy SVG Editor Boxy SVG project goal is to create the best tool for editing SVG files online (très complet, pas de support FF pour le moment, hélas)
  • SVG Edit : SVGEdit is a fast, web-based, JavaScript-driven SVG drawing editor that works in any modern browser
  • Inkarnate : Create Fantasy Maps Online

Illustrations / objets 3D

  • Hero Forge : Create Fantasy 3D characters (interface web de ouf)
  • Blockbench : An easy to use 3D model editor for low-poly and pixel-art.
  • Shapefest : Objets modélisés en 3D - A massive library of free 3D objects

AI ART

Icônes

Banques de photos et de vidéos

Émojis

Images de placeholder

Et pour générer des images de test :

Éditeurs d'image

Image optimization

Audio

Video filters

Présenter son code, communiquer, faire des sliders, etc

Créer de belles captures d'écrans de son code :

L'art de bien présenter :

In business, communication needs to be clear and efficient. People are busy and don't have time to read long walls of text or listen to long presentations where the key info is shared at the very end.

  • Minto Pyramid : Make your communication more efficient and clear.

Fonts et typographie

On the web, the default font size is 16px. Some users never change that default, but many do. But by default, at least, 1em and 1rem will both be equal to 16px.

HTML

Accessibilité

To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who prefer to use a keyboard for input whenever possible. (MDN)

Mais aussi :

  • Ne pas utiliser un lot de <h1> + <h2> + <h3> pour créer un bloc titre/sous-titres, ce type d'imbrication qui ne reflète pas ce qui est attendu. On passera plutôt par <hgroup>, comme démontré dans cet excellent article.

  • A Brief Introduction to JAWS, NVDA, and VoiceOver - Article fouillé sur ces trois screen readers

  • WAVE Web Accesility Evaluation Tool — WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. Our philosophy is to focus on issues that we know impact end users, facilitate human evaluation, and to educate about web accessibility.

  • (Windows) NV Access — The NVDA screen reader can be downloaded free of charge by anyone. We do this because we believe everyone, especially the world’s poorest blind people deserve access to computers and a way out of poverty.

  • (Apple) VoiceOver — VoiceOver is an industry‑leading screen reader that tells you exactly what’s happening on your device.

  • (Linux) Orca — Orca est un lecteur d'écran : il permet aux utilisateurs aveugles ou malvoyants d'utiliser pleinement les fonctionnalités d'un environnement de bureau GNU/Linux, grâce à une synthèse vocale, à un afficheur Braille ou à une loupe virtuelle, et à l'exploitation des outils d'accessibilité du système.

  • NerdeRegion — NerdeRegion is a Chrome extension for debugging live regions on a Web Page. When activated, it lists all active Aria live regions, and keeps a record of all mutations that has happened on the region.

  • A11Y - Color blindness empathy test : Chrome extension + Firefox add-on — Empathy test for color blindness and visual impairment. This add-on emulates 8 types of color blindness, plus grayscale to check the contrast of your website.

  • Contrast Checker — This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). These calculations are based on the formulas specified by the W3C.

  • Leonardo: A One-of-a-Kind Tool for Creating, Managing, and Sharing Accessible Color Systems - From Adobe, this allows you to generate colors based on a desired contrast ratio, for better accessibility

  • Le rapport “accessibilité” de Lighthouse (Chrome DevTools > onglet Lighthouse) - Lien vers la doc

  • L’onglet “accessibilité” de Firefox (Firefox DevTools > onglet Accessibilité) - Lien vers la doc

Voir aussi les ressources dans HTML

SEO / Social markup

Node.js

CSS

La chanson qui montre que "CSS is ok", ou presque, lol.

Media queries

Container queries

Unités

Sélecteurs

Masonry

Aspect ratio

Flexbox

Grid

Pseudo-classes

CSS Resets and Normalizers

Resets remove defaults to achieve a more ‘blank canvas’

Normalizers attempt to make the defaults more consistent across browsers

HTML test

CSS frameworks

Voir également ce gros topic CSS framework, sur GitHub

CSS animations

CSS animations via JS

Sass

JavaScript

Asynchrone

JS games

Améliorer son niveau, en codant des jeux :

  • Leek Wars - Un jeu de programmation dans lequel vous devez créér le plus puissant poireau et détruire vos ennemis
  • CodinGame - permettre aux développeurs d'améliorer leurs compétences en continu en résolvant les problèmes de code les plus motivants et en échangeant avec les meilleurs programmeurs du monde
  • Codewars - Improve your development skills by training with your peers on code kata that continuously challenge and push your coding practice

Et quelques jeux existants, pour l'inspiration :

JS scripts

  • WinBox.js : A modern window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source
  • TweakPane : Compact pane library for fine-tuning parameters and monitoring value changes
  • Lenis - smooth scroll or die

Coloration syntaxique de code, via JS

  • Highlight.js (coloration seule) : Syntax highlighting for the Web
  • Prism.js (coloration seule) is a lightweight, extensible syntax highlighter
  • CodeMirror (coloration ET édition) is a code editor component for the web

Task runner / assets bundler

PHP

  • Kint - un var_dump(), en mille fois plus pratique - debugging helper for PHP developers
  • Mecha : a flat-file content management system for minimalists "The world has been filled with social media services that are no longer safe to share personal matters. I want to grow back the interest of future generations to write journals on the internet. Mecha is a flat-file content management system that carries the concept of minimalism. This content management system ensures that you have full control over the content you have."

PHP + MySQL

  • MeekroDB - The Simple PHP MySQL Library

Python

  • Lumi - a nano framework to convert your python functions into a REST API without any extra headache.

Sécurité

JSON

  • MistQL - a query language for JSON-like structures (cross-platform : Python, JS)
  • JSON Hero - A Beautiful JSON Viewer — Paste in some JSON or enter a URL to a JSON file and this tool provides a clean and beautiful UI packed with features.
  • JSON Crack - Seamlessly visualize your JSON data instantly into graphs

CMS

No-code

  • Popsy : A no-code website builder that works like Notion where you can customize a design and publish.
  • Alternatives (shuffle.dev) : "We re-imagined how to build websites visually." A drag & drop website builder that returns multiple pages and styles at once.

Kanban

  • Nullboard is a minimalist (single file) kanban board, focused on compactness and readability. Can be used completely offline. All data is stored locally, for now using localStorage. Can be exported to- or imported from a plain text file in a simple JSON format.

Read later

  • SingleFile : save a complete web page into a single HTML file

Linux

Jeux

  • TaleSpire : Animez vos Jeux de Rôles dans ce simulateur online. Import de figurines Hero Forge possible, fiches persos, etc.

Plaisir des yeux

  • Puter : un OS dans le navigateur - a cloud operating system. Store, open, and edit your files from anywhere at any time in the cloud
  • Matrix !!! démo - repo
  • Windows 95
  • no-ht.ml