Autres listes de ressources et checklists

• https://github.com/sdmg15/Best-websites-a-programmer-should-visit/blob/master/README.md
• https://github.com/dypsilon/frontend-dev-bookmarks
• https://frontendmasters.com/books/front-end-handbook/2019/
• https://free-for.dev/ Plein de ressources pour développeurs
• https://github.com/thedaviddias/Front-End-Checklist
• https://github.com/thedaviddias/Front-End-Performance-Checklist

Sites d'actualités, tutoriels

• https://css-tricks.com/
• https://www.smashingmagazine.com/
• https://freefrontend.com/ Collections de démos et ressources

Documentations générales rapides

• https://devhints.io
• https://devdocs.io/
• https://wwwhere.io/
• https://overapi.com/
• http://html5index.org/
• https://platform.html5.org/
• https://cssvalues.com/ dictionnaire des propriétés et valeurs

Écrire ou générer une documentation

• https://www.gitbook.com/

Compatibilité navigateur

• http://caniuse.com/ (tableaux de support)
• http://console.maban.co.uk/ (consoles)
• http://browserhacks.com/ Hacks par navigateur

Tests, émulation, devices

• https://www.lambdatest.com/
• https://appetize.io/
• https://www.browserstack.com/

HTML et HTML5

• https://html.spec.whatwg.org/multipage/ Spécification HTML WhatWG
• https://w3c.github.io/html/ Spécification HTML5 W3C
• https://htmlparser.info/introduction/ Idiosyncrasies of the HTML parser (Simon Pieters)

Templates et boilerplates

• https://uisual.com/ Templates neutres pour startups
• https://schnaps.it/ Templates HTML5 avec KNACSS

Microdata et sémantique

• http://schema.org/
• Outil de test des résultats enrichis https://search.google.com/test/rich-results
• http://www.opensearch.org/Home Opensearch

Open Graph

• http://ogp.me/ Opengraph
• https://metatags.io Génération des meta tags
• https://dev.twitter.com/cards/overview Twitter Cards
• http://opengraphcheck.com/ Outil de vérification Open Graph
• https://cards-dev.twitter.com/validator Validateur Twitter Open Graph
• http://iframely.com/debug Comment les autres sites/apps voient le vôtre
• https://developers.facebook.com/tools/debug Outil de test Open Graph de Facebook

CSS

• https://www.smashingmagazine.com/2021/09/interactive-learning-tools-front-end-developers/ Jeux pour apprendre flexbox, grid
• https://web.dev/learn/css/
• https://www.projectwallace.com/css-code-quality Outil d'évaluation de la qualité du code CSS

Grids

• https://learncssgrid.com/ Apprendre CSS Grid Layout
• https://ishadeed.com/article/learn-css-subgrid/ Apprendre Subgrid
• https://cssgrid-generator.netlify.com/ Générateur CSS Grid
• https://mozilladevelopers.github.io/playground/
• https://yoksel.github.io/grid-cheatsheet/ Cheatsheet CSS Grid
• https://alialaa.github.io/css-grid-cheat-sheet/ Cheatsheet CSS Grid
• https://www.mozilla.org/en-US/developer/css-grid/

Flexbox

• http://www.vincent-valentin.name/articles/le-petit-flexbox-illustre Flexbox
• http://www.flexboxpatterns.com/ Patterns flexbox

Variables CSS

• https://ishadeed.com/article/css-vars-101/

Typographie, @font-face et polices

• https://type-scale.com/
• https://www.fontspace.com/ Polices à télécharger et à générer en ligne
• https://prowebtype.com/ E-book (gratuit) Professionnal web typography (très bon, à lire)
• http://fontfamily.io/ Tester la présence des polices sur les OS
• https://icomoon.io/app/ (font-icons)
• http://fontastic.me/ (font-icons)
• https://fontello.com/ (font-icons)
• https://transfonter.org/
• http://www.fontsquirrel.com/tools/webfont-generator
• http://www.losttype.com/browse/
• http://www.shapecatcher.com/
• https://fontcombiner.com/ Combiner des glyphes
• http://www.freefontconverter.com/ Convertir formats

Frameworks CSS

• https://knacss.com/ KNACSS !
• https://tailwindcss.com/ Tailwind
• https://flowbite.com/tools/tailwind-cheat-sheet/ Cheatsheet Tailwind
• https://nerdcave.com/tailwind-cheat-sheet Cheatsheet Tailwind
• http://twitter.github.io/bootstrap/ Bootstrap (par Twitter)
• http://purecss.io/ Pure (Yahoo)
• http://designmodo.github.io/Flat-UI/ Flat UI

Composants UI intégrés (souvent Tailwind)

• https://hyperui.dev/
• https://www.tailwind-kit.com/
• https://headlessui.dev/ (React, Vue)
• https://tailwindui.com/ (React, Vue, HTML)
• https://tailwindcomponents.com/
• https://preline.co/ (React, Vue, HTML)
• https://merakiui.com/
• https://web.dev/patterns/
• https://postsrc.com/components
• https://a17t.miles.land/
• https://flowbite.com/
• https://ariakit.org/ (React)

Composants Vue

• https://primevue.org
• https://quasar.dev
• https://vuetifyjs.com/en/
• https://vuestic.dev
• https://www.naiveui.com/
• https://vant-contrib.gitee.io/vant/

Générateurs d'UI / de pages intégrées

• https://uigenerator.org/
• https://shuffle.dev/

RWD Responsive Web Design

• https://mediaquery.style/ Cheatsheet Media Queries
• https://www.mydevice.io/ (made by Alsacréations)
• https://www.screensizemap.com/ dimensions de la plupart des écrans
• https://screensiz.es/ tableau comparatif de la plupart des écrans
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions Ultimate guide to iPhone resolutions
• https://ishadeed.com/article/responsive-design-height/ design responsive en vertical
• https://gionkunz.github.io/chartist-js/ Graphiques responsive
• Tableau responsive
  • https://css-tricks.com/responsive-data-table-roundup/
  • https://elvery.net/demo/responsive-tables/
• https://codyhouse.co/gem/mega-dropdown Responsive Mega Menu
• https://github.com/GoogleChromeLabs/container-query-polyfill Container Query Polyfill

Retina et hdpi

• http://net.tutsplus.com/tutorials/html-css-techniques/the-right-way-to-retinafy-your-websites/
• http://screensiz.es/
• http://dev.opera.com/articles/responsive-images/ Responsive images use cases sippets

Autres techniques et modules CSS

• https://learnui.design/tools/gradient-generator.html Générateur de beaux dégradés de couleur
• https://colorffy.com/gradients Gradients generator

Analyse CSS

• https://www.projectwallace.com/analyze-css
• https://jonassebastianohlsson.com/specificity-graph/ CSS Specificity Graph Generator
• https://isellsoap.github.io/specificity-visualizer/

Propriétés et valeurs

• https://www.quirksmode.org/blog/archives/2021/06/inherit_initial.html Inherit, initial, unset, revert

Accessibilité

• https://accessibilite.public.lu/fr/tools/decla.html Générer une déclaration d'accessibilité
• https://www.accede-web.com/notices/ Notices AccedeWeb
• https://bitsofco.de/the-accessibility-cheatsheet/ Cheatsheet résumée
• https://github.com/UKHomeOffice/posters/tree/master/accessibility/posters_fr Posters recommandations UK Home Office en français
• http://a11y-style-guide.com/style-guide/
• https://cehfisher.github.io/a11y-style-guide/style-guide/ Styleguide A11y
• https://uxdesign.cc/designing-accessible-products-e8aa79b55ebc
• https://ibma.github.io/Va11yS/ Va11yS: Verified Accessibility Code Samples (IBM)
• http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html Grande liste en vrac
• https://matthiasott.com/notes/focus-visible-is-here Gestion du focus avec :focus et :focus-visible

Outils de test/évaluations

• https://blog.sapegin.me/all/accessibility-testing/
• https://www.accessify.com/tools-and-wizards/ Pas mal d’outils

ARIA

• https://w3c.github.io/aria/ La spécification
• https://w3c.github.io/aria-practices/
• https://w3c.github.io/using-aria/
• https://w3c.github.io/aria-in-html/
• https://www.w3.org/WAI/ARIA/apg/patterns/ Patterns
• https://www.w3.org/TR/html-aria/ Rôles et états implicites des éléments HTML, et propriétés ARIA applicables selon les rôles
• https://bitsofco.de/rules-for-using-aria-in-html/
• https://www.powermapper.com/tests/screen-readers/aria/ Support WAI-ARIA des lecteurs d'écran
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA Très bonne ressource ARIA

Couleurs

• https://color.adobe.com/create/color-wheel/
• http://chromelens.xyz/ Extension pour visualiser en daltonisme
• http://www.dasplankton.de/ContrastA/ Accessibilité des couleurs
• http://webaim.org/blog/wcag-2-0-and-link-colors/ Accessibilité des textes/liens
• http://colorsafe.co/
• http://contrast-finder.tanaguru.com/form.html Trouve les bons contrastes couleurs
• http://gmazzocato.altervista.org/fr/colorwheel/wheel.php Visualiser le rendu des couleurs choisies selon le type de daltonisme
• https://toolness.github.io/accessible-color-matrix/ Accessible Color matrix

Menu

• http://adobe-accessibility.github.io/Accessible-Mega-Menu/ Méga-menu accessible
• http://terrillthompson.com/tests/menus/accessible-mega-menu/test.html Méga-menu accessible (bis)
• http://khan.github.io/tota11y/?r=1

Player vidéo / audio

• https://github.com/jonathantneal/media-player Player media accessible
• http://www.accessibilityoz.com/ozplayer/ Player html5 accessible
• https://youdescribe.org/ Audio desc avec Youtube
• https://521dimensions.com/open-source/amplitudejs

JavaScript et composants

• https://smashingmagazine.com/2023/02/guide-building-accessible-carousels/ Construire des carousels accessibles
• https://github.com/alphagov/accessible-typeahead Typeahead accessible
• https://frend.co/ Quelques composants JS avec ARIA
• https://a11y.nicolas-hoffmann.net/ Quelques plugins jQuery accessibles
• https://www.humaan.com/modaal/ Modale accessible (vue sur css-tricks)
• https://allyjs.io/tutorials/accessible-dialog.html dialog/modale accessible avec ally.js (bonnes idées)
• https://alertifyjs.com/ Alertes/modales
• https://files.paciellogroup.com/blogmisc/samples/aria/slider/ Sliders accessibles
• https://files.paciellogroup.com/training/commonsamples/tpglibsamples/aria/slider/index.html Slider accessible

Divers

• http://filamentgroup.com/lab/bulletproof_icon_fonts/ L’accessibilité des font-icon
• http://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/ Boutons accessibles
• https://www.traduction.cc/traduction/Creer-des-tableaux-de-donnees-accessibles-1.html Créer des tableaux accessibles
• http://www.last-child.com/legend-aria-describedby/ Fieldset, aria et radiogroup
• http://accessiblehtmlheadings.com/ Section & heading

JavaScript front-end

• https://tc39.github.io/ecma262/ Spec ECMAScript
• https://wesbos.com/javascript Beginner JavaScript Notes & Reference par Wes Bos
• https://auth0.com/blog/a-brief-history-of-javascript/ Une brève histoire de JavaScript
• https://github.com/naomihauret/js-stack-from-scratch/ JavaScript Stack from Scratch (traduction fr)
• https://github.com/denysdovhan/wtfjs/blob/master/README-fr-fr.md Une liste d'exemples JavaScript drôles et délicats

• https://basarat.gitbook.io/typescript/ TypeScript Deep Dive (traduction fr : https://github.com/HachemiH/typescript-book)

• Bonnes pratiques et style guides

  • https://molily.de/robust-javascript/ Robust JavaScript
  • https://github.com/rwaldron/idiomatic.js/tree/master/translations/fr_FR
  • http://jstherightway.org/
  • http://superherojs.com/
  • https://github.com/airbnb/javascript
  • https://bevacqua.github.io/promisees/ Les promesses expliquées et visualisées en animations

• Libs et frameworks

  • https://vuejs.org/
  • https://facebook.github.io/react/
  • https://jquery.com/
  • https://svelte.dev/
  • https://angularjs.org/
  • https://lodash.com/
  • https://github.com/developit/unfetch Polyfill pour fetch() en 500 octets

• Outils d'écriture de code

  • http://jsbeautifier.org/
  • http://www.jslint.com/ et http://jslinterrors.com/
  • https://blog.scottlogic.com/2021/09/06/how-to-write-an-es-lint-rule-for-beginners.html écrire ses propres règles eslint

• Scripts divers

  • https://github.com/kochrt/cascade.page Générer une timeline
  • https://github.com/jekuer/add-to-calendar-button Bouton d'ajout au calendrier
  • https://orejime.empreintedigitale.fr/ bannière cookies accessible
  • https://plainjs.com/ Sélection de scripts et plugins sans framework (Vanilla)
  • https://docs.slatejs.org Editeurs wysiwyg
  • http://rainsoft.io/gentle-explanation-of-this-in-javascript/ Explication de this
  • http://thenewcode.com/82/Recipes-for-Randomness-in-JavaScript Randomness
  • https://www.lullabot.com/blog/article/importing-css-breakpoints-javascript Responsive (importer les breakpoints css en js)
  • https://github.com/dbushell/Pikaday (datepicker, aussi en plugin jQuery)
  • http://robertwhurst.github.io/KeyboardJS/ (gestion clavier)
  • https://pdfme.com/ Générateur de PDF en TypeScript (avec template)
  • https://parall.ax/products/jspdf (Générer PDF côté client)
  • https://wicky.nillia.ms/headroom.js/ (header disparaissant animé)
  • http://inorganik.github.io/countUp.js/ (défilement de compteur/chiffres)
  • https://draggabilly.desandro.com/ Drag&Drop multi-touch
  • https://github.com/ryanve/verge (Get viewport dimensions, detect elements in the viewport http://verge.airve.com)
  • http://hammerjs.github.io/ - gestion du touch avancé (multitouch, rotate, double tap, swipe, etc.)
  • https://joaopereirawd.github.io/animatedModal.js/ Modales animées
  • http://callmecavs.com/bricks.js/ Masonry performant
  • https://github.com/jwagner/smartcrop.js Smartcrop intelligent pour les images
• Touch
  • http://deeptissuejs.com/
  • http://interactjs.io/
  • http://eightmedia.github.com/hammer.js/
  • https://github.com/jairajs89/Touchy.js
  • http://pressurejs.com/

Vue / Nuxt

• Le repo awesome-vue sur Github avec plein de ressources
• Plein d'exemples : vuejsexamples.com
• Pour faire du drag & drop : Vue.Draggable
• Accessibilité avec Vue vue-a11y.com
• Plugin eslint pour vérifier certaines règles d'accessibilité : eslint-plugin-vue-a11y
• https://valgeirb.github.io/vue3-popper/
• https://vcalendar.io/

React

• https://css-tricks.com/productive-in-react/
• http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/

Slideshows

• https://swiperjs.com/
• https://github.com/nolimits4web/Swiper - un swiper JS vanilla très extensible et flexible (fonctionne sous Windows Phone)

Design et graphisme

• https://www.figma.com/ Figma
• https://www.sketchapp.com/ Sketch
• https://designer.io/ Gravit designer
• https://www.photopea.com/ Ouvre/édite/sauve PSD, Gimp, Sketch en ligne

Inspiration

• https://interfaces.pro/
• https://www.mobile-patterns.com Mobile patterns
• https://www.logodesignlove.com/brand-identity-style-guides (guides de styles)
• https://gerireid.com/forms.html Conception de formulaires (ergo/accessibilité)
• https://dopeui.co/

UX

• https://uxtools.co/ comparaison des outils
• https://goodui.org/
• https://www.nickkolenda.com/user-experience/

Design System

• https://sparkbox.com/foundry/design_system_makeup_design_system_layers_parts_of_a_design_system

Prototypage

Maquettes / story-boards / wireframes / mockups / zoning

• https://whimsical.com/
• https://octopus.do/
• https://wireflow.co
• https://www.mindmeister.com/fr
• https://moqups.com/
• https://wireframe.cc/
• https://gomockingbird.com/mockingbird/ online, no Flash, payant
• http://pencil.evolus.vn/ libre et gratuit (extension Firefox ou standalone en XUL)
• https://mockflow.com/
• https://balsamiq.com/
• https://www.draw.io/
• https://www.invisionapp.com/
• http://www.bounceapp.com/
• https://redpen.io/
• https://uigenerator.org/ Générer des mockups PNG d'interfaces (desktop/mobile)

Ardoises en ligne

• https://excalidraw.com/
• https://www.tldraw.com/

Logos

• https://logomaster.ai/ créateur de logo en ligne
• https://www.logopony.com/ génération de logos automatique
• http://www.logomoose.com/
• https://logopond.com/

Favicon

• https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
• https://realfavicongenerator.net/ outil ultime pour tout générer
• https://favicon.io/ génère à partir de lettres
• http://lab.ejci.net/favico.js/ (badges en JS sur la favicon)

Images et ressources

Optimisation d'images et outils

• https://www.squoosh.app
• https://imageoptim.com/fr Optimiser le poids des images
• https://images.guide/ Guide d'optimisation
• https://tinypng.com/ préserve la transparence et applique une compression (avec perte)
• https://ezgif.com/resize Redimensionner/transformer gif animé
• https://pageweight.imgix.com/ Diagnostiquer le poids des images
• https://www.optimizeimages.com/

Icônes / SVG

• https://icones.js.org/
• https://iconoir.com/
• https://iconmonstr.com/
• https://iconduck.com/
• https://www.iconfinder.com/
• https://www.svgrepo.com/
• https://www.flaticon.com/fr/
• https://tablericons.com/ (1 lib personnalisable)
• https://lucide.dev/ (1 lib)
• https://www.mingcute.com/ (1 lib)
• https://simpleicons.org/ (1 lib de logos de marques)
• https://github.com/paulirish/browser-logos Logos de navigateurs

Images libres (ou pas)

• https://www.stickpng.com/ (PNG transparents)
• https://pngdb.com/ (PNG transparents)
• https://www.pinpng.com (PNG transparents)
• https://www.stockio.com/
• https://visualhunt.com/ (CC)
• https://stocksnap.io/ (CC0)
• https://www.pexels.com/
• https://fr.freepik.com/ (vectoriel libre de droits / commercial avec mention)
• https://www.vexels.com/ (vectoriel gratuit avec mention)
• https://www.vecteezy.com/ (vectoriel)
• https://picography.co/
• https://unsplash.com/
• https://www.freelyphotos.com/
• https://gratisography.com/
• https://kaboompics.com/
• https://pixabay.com/editors_choice/
• https://realisticshots.com/
• https://freenaturestock.com/
• https://jaymantri.com/ (CC0 photographe)
• https://nos.twnsnd.co/ (vintage)
• http://thestocks.im/ (meta-moteur)
• https://standardebooks.org/manual/1.7.0/10-art-and-images#10.3.3.7.4 Musées avec images en CC0

Templates/modèles de slides

• https://slidesgo.com/

Placeholders (images de remplissage)

• https://picsum.photos/images
• http://www.diverseui.com/ Personnes diverses
• https://tinyfac.es/ Avatars
• https://uifaces.co/ Visages de remplissage
• https://picsum.photos/ Photos
• http://placekitten.com/ Chats
• https://www.populate.design/ Texte

Vidéos libres/gratuites

• https://videos.pexels.com/
• https://www.videvo.net/
• http://www.cutestockfootage.com/
• https://pixabay.com/videos/
• https://vimeo.com/groups/freehd/
• https://www.coverr.co/

Animations JS/CSS

• https://anime-js.com/
• http://bouncejs.com/
• http://julian.com/research/velocity/
• https://docs.theatrejs.com/ outil d'animation DOM, code et visuel
• http://paperjs.org/ librairie d'animation Canvas
• https://projects.verou.me/animatable/
• https://tobiasahlin.com/spinkit/ Loaders animés (spin)
• https://connoratherton.com/loaders Loaders CSS
• https://uiball.com/loaders/ Loaders CSS/SVG

SVG

• https://svgontheweb.com/ Guide ultime SVG sur le web
• https://svgpocketguide.com/book/ Pocket guide to writing SVG
• https://lynn.ru/examples/svg/en.html + https://css-tricks.com/svg-fallbacks/ + https://css-tricks.com/scale-svg/ + https://css-tricks.com/using-svg/ Intégration dans HTML
• https://sarasoueidan.com/blog/svg-tips-for-designers/ Guide de production SVG pour Illustrator & co
• https://sarasoueidan.com/blog/svg-coordinate-systems/ Système de coordonnées, viewbox, viewport, preserveAspectRatio
• https://sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html Cheatsheet Coordonnées
• https://la-cascade.io/comprendre-svg-viewbox-et-viewport/ Comprendre SVG viewBox et viewport
• https://www.w3.org/TR/SVG/propidx.html Propriétés manipulables en CSS

Outils pour produire/éditer du SVG

• https://inkscape.org/en/ éditeur SVG open-source
• https://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the-web--vector-20899 SVG Files: From Illustrator to the Web
• https://svgcrop.com/
• https://svgco.de/ à partir d'une image bitmap (vectorisation)

Générateurs SVG

• https://www.blobmaker.app/
• https://squircley.app/
• https://getwaves.io/
• https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator

Optimisation SVG et astuces

• http://petercollingridge.appspot.com/svg-optimiser
• https://github.com/svg/svgo Optimisation
• https://jakearchibald.github.io/svgomg/ Optimisation en ligne
• https://css-tricks.com/understanding-and-manually-improving-svg-optimization/
• https://thenewcode.com/1094/Using-JavaScript-in-SVG Include du code JavaScript dans SVG

Animations SVG

• https://svgartista.net/
• https://www.svgator.com/
• https://svgjs.com/ Animations de SVG via JavaScript
• http://snapsvg.io/ (animation SVG via JS)
• http://maxwellito.github.io/vivus/ Animation SVG filaire
• https://css-tricks.com/animating-svg-css/ (animation via CSS)
• http://sozi.baierouge.fr/pages/10-about.html Présentations animées avec zoom/dézoom

Accessibilité des SVG

• https://www.accede-web.com/notices/html-et-css/images-et-icones/gerer-lalternative-des-svg-images-vectorielles/ Gérer l’alternative des SVG
• https://la-cascade.io/rendre-svg-accessible/ SVG accessible
• https://css-tricks.com/accessible-svgs/
• https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/
• https://www.sitepoint.com/tips-accessible-svg/ Rendre SVG accessible

Formats d'images

• https://www.da.vidbuchanan.co.uk/blog/hello-png.html PNG

Cartes géographiques

• https://developers.google.com/maps/?hl=fr Google Maps
• https://mapstyle.withgoogle.com/ Google Maps en personnalisant le style
• https://mapbuildr.com/buildr Constructeur de cartes pour Google Maps
• https://www.openstreetmap.org/
• https://openlayers.org/ API libre surcouche au choix de GMaps, Bing, OpenStreetMap, etc
• https://mapbox.com/
• https://simplemaps.com/ (cartes mondiales Canvas/SVG)

Référencement / SEO

• https://goralewicz.com/blog/javascript-seo-experiment/ Référencement et JavaScript
• https://backlinko.com/google-ranking-factors La liste des facteurs de référencement
• https://www.screamingfrog.co.uk/seo-spider/ Outil de crawl et diagnostic SEO

API HTML5 avancées, audio, vidéo

Audio

• https://github.com/goldfire/howler.js

WebRTC, MediaCapture

• https://appr.tc/ Démo de chat vidéo en peer to peer avec HTML5

Vidéo

• https://plyr.io/
• https://www.videojs.com/ Lecteur configurable
• https://rishabhp.github.io/bideo.js/ Vidéo en fond de page full-viewport

Canvas et WebGL

• https://threejs.org/ 2D et 3D
• https://www.babylonjs.com/ WebGL
• http://paperjs.org/ 2D
• https://webgl2fundamentals.org Fondamentaux de WebGL2
• http://www.createjs.com/easeljs
• http://fabricjs.com/
• https://visitmix.com/labs/ai2canvas/ Ai to Canvas
• http://www.professorcloud.com/svg-to-canvas/ SVG to Canvas

Progressive Web Apps (PWA)

• https://web.dev/learn/pwa/
• https://developer.mozilla.org/fr/docs/Web/Progressive_web_apps
• https://app-manifest.firebaseapp.com/ Générateur de web manifest
• https://pwadvent.dev/ PWAdvent 24 bonnes fonctionnalités PWA
• https://firt.dev/pwa-2021 PWA en 2021
• https://www.smashingmagazine.com/2020/12/progressive-web-apps/ How To Optimize Progressive Web Apps
• https://medium.com/@firt/progressive-web-apps-in-2020-c15018c9931c Progressive Web Apps in 2020
• https://www.davrous.com/2019/10/18/myth-busting-pwas-the-new-edge-edition/ (2019)
• https://medium.com/@firt/iphone-11-ipados-and-ios-13-for-pwas-and-web-development-5d5d9071cc49 (2019)

Performance

• https://www.perf.rocks/ Plein de ressources
• https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/
• https://csswizardry.com/2019/03/cache-control-for-civilians/ Maîtriser Cache-control
• https://web.dev/measure
• https://gtmetrix.com/
• https://www.webpagetest.org/
• https://requestmap.webperf.tools/ Request Map
• https://tools.pingdom.com/
• https://browserdiet.com/
• http://codepen.io/bradfrost/pen/EPQVBp/ Performance budget builder

Compression des images

• https://chromium.googlesource.com/codecs/libwebp2/ WebP 2

Node.js / npm

• https://nodejs.org/fr/
• https://elijahmanor.com/byte/update-node-deps Mise à jour des dépendances avec ncu (npm-check-updates)
• https://jsmates.com/blog/managing-secrets-and-env-variables-using-dotenv Fichiers .env
• https://github.com/oncletom/nodebook/blob/master/book.adoc Apprendre Node.js par la pratique (par Thomas Parisot)

Gulp

• https://quenchjs.com/ Générateur de gulpfile
• https://www.smashingmagazine.com/2014/06/11/building-with-gulp/
• https://alistapart.com/blog/post/getting-started-with-gulp
• https://www.sitepoint.com/introduction-gulp-js/

Webpack

• https://webpack.js.org/ Webpack
• https://www.taniarascia.com/how-to-use-webpack/ Comment utiliser webpack
• https://www.smashingmagazine.com/2021/06/getting-started-webpack/ Introduction à webpack

Serveur

• http://net.tutsplus.com/tutorials/apache-2-basic-configuration-on-unix-like-systems/ Configuration Apache de base sous Linux (NetTuts)
• https://github.com/phanan/htaccess snippets .htaccess
• https://htaccess.madewithlove.be Tester/simuler les règles de réécriture
• https://serversforhackers.com/series
• https://vim.is/ Apprendre VIM avec des exercices interactifs

Applications web

• https://www.robinwieruch.de/web-applications/ Applications web, SPA, full-stack, SSR, REST...

HTTP

• https://blog.appcanary.com/2017/http-security-headers.html
• https://hookbin.com/ Capture and inspect HTTP requests
• https://kinsta.com/learn/what-is-http2/ HTTP/2
• https://tools.keycdn.com/http2-test Tester HTTP/2
• https://http3-explained.haxx.se/fr HTTP/3

Sécurité

• https://letsencrypt.org/ Let’s Encrypt (certificats HTTPS gratuits avec certbot)
• https://blog.appcanary.com/2017/http-security-headers.html Tout sur les en-têtes HTTP de sécurité
• https://movingtohttps.com/ Migrer vers HTTPS, techniques et outils

• https://wiki.mozilla.org/Security/Server_Side_TLS la référence pour configurer

• Tests
  • https://observatory.mozilla.org/ Mozilla Observatory
  • https://securityheaders.io/ pour check
  • https://www.ssllabs.com/ssltest/ pour check

CORS

• https://jakearchibald.com/2021/cors/ + https://jakearchibald.com/2021/cors/playground/

Routage

• https://ngrok.com/
• https://doc.traefik.io/traefik/

API

• https://insomnia.rest/ Tester/inspecter une API REST, GraphQL...
• https://hoppscotch.io/fr/ Tester une API en ligne
• https://github.com/graphql-editor/graphql-editor GraphQLEditor

PHP

• http://www.phpliveregex.com/ Tester les regexp en live
• https://regex101.com/ Tester les regexp en live
• https://extendsclass.com/regex-tester.html Tester les regexp en live
• https://ihateregex.io/ Visualiser les regexp en live
• http://www.sitepoint.com/horizontal-scaling-php-apps/
• https://phpbestpractices.org/ Best pratices PHP

SQL et MySQL

• https://sqlbolt.com/ Apprendre SQL de manière interactive
• https://dbdiagram.io/ Éditeur de modèles et diagrammes en ligne

Git

• https://www.atlassian.com/git/tutorials/setting-up-a-repository Guide général sur Git
• https://www.git-tower.com/learn/git/videos/
• https://learngitbranching.js.org/?locale=fr_FR Learn Git Branching : apprendre les branches
• https://github.blog/2015-06-08-how-to-undo-almost-anything-with-git/

Clients git

• Git-fork https://git-fork.com/
• Sourcetree https://www.sourcetreeapp.com/
• GitKraken https://www.gitkraken.com/
• Git-tower https://www.git-tower.com/
• Smartgit https://www.syntevo.com/smartgit/

Documents / Office

• https://kinopio.club Brainstorming / mindmap
• https://www.markdowntutorial.com/fr/ Apprendre markdown

Explication et relation client

• https://recordscreen.io/ Enregistrer une portion de l'écran
• https://small.chat/ Intégrer Slack en chat sur le site
• http://warpspire.com/posts/url-design/ URL design (~cool uri)
• https://medium.com/@ImpalaWebstudio/pourquoi-nous-ne-livrons-pas-de-maquettes-au-moment-du-devis-36a242479a71 Maquettes gratuites
• http://kitdesurvie.metiers-graphiques.fr/articles/comment-gerer-un-impaye Comment gérer un impayé
• http://www.slidescarnival.com/ Modèles de Google Slides gratuits

CMS et outils headless/API

• https://wordpress.org/
• https://strapi.io/ Strapi
• https://github.com/strapi/awesome-strapi Ressources Strapi

Intégration e-mail et e-mailing

• https://www.smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools/ A Complete Guide To HTML Email
• https://explore.reallygoodemails.com/new-to-email-coding-heres-where-to-start-2494422f0bd4 Résumé de quelques pratiques d'intégration

Conception

• https://www.caniemail.com/ L'équivalent de caniuse pour connaître le support des clients mail (html, css...)
• https://mjml.io/getting-started-onboard + https://mjml.io/try-it-live (syntaxe simplifiée générant du HTML compatible + éditeur en ligne)
• https://heml.io/ (syntaxe simplifiée générant du HTML compatible)
• https://maizzle.com/ (framework pour conception rapide d'e-mails basé sur Tailwind)

Outils et ressources

• https://templates.mailchimp.com/resources/ Ressources Mailchimp
• https://www.campaignmonitor.com/resources/ Ressources Campaign Monitor
• https://topol.io/ https://www.mailmodo.com/features/wysiwyg-email-editor/ https://stripo.email/ Outils de conception en ligne

Aperçus de rendu client mail et tests

• https://litmus.com/ (screenshots de mails multi-clients, le plus populaire)
• https://www.emailonacid.com/ (screenshots de mails multi-clients)
• https://mailtrap.io/ Capture les mails envoyés pour les inspecter
• https://github.com/mailhog/MailHog SMTP capture

Sécurité, qualité

• https://www.alexblackie.com/articles/email-authenticity-dkim-spf-dmarc/ DKIM, SPF, DMARC
• https://www.mail-tester.com/ indique le niveau de "qualité" d'un e-mail envoyé à une adresse

Machines virtuelles

• https://www.virtualbox.org/ VirtualBox (Oracle)
• https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ Virtual Machines IE11 (sous Windows 10) par Microsoft
• https://css-tricks.com/an-introduction-to-vagrant/ Vagrant

Docker

• https://www.docker.com/
• https://medium.com/@remyc/comprendre-docker-dockerfile-et-docker-compose-f21fe4ba22cb
• https://github.com/sickcodes/Docker-OSX macOS dans Docker

Applications mobiles/hybrides/desktop

• https://www.electronjs.org/
• https://tauri.app
• https://ionicframework.com/
• https://www.appgyver.com/

Réseaux sociaux

• https://github.com/bradvin/social-share-urls Liens de partage vers les différents réseaux sociaux

Analytics (alternatives)

• https://github.com/matomo-org/matomo
• https://github.com/plausible/analytics
• https://github.com/milesmcc/shynet
• https://github.com/PostHog/posthog
• https://github.com/umami-software/umami
• https://usefathom.com/ (payant, non-opensource)