Autres listes de ressources et checklists
- https://github.com/trimstray/the-book-of-secret-knowledge
- 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
- https://github.com/awesome-selfhosted/awesome-selfhosted Awesome-Selfhosted : liste d'applications que l'on peut héberger soi-même
- https://github.com/kdeldycke/awesome-falsehood Inventaire des fausses idées auxquelles on peut croire lorsqu'on fait du développement
- https://developers.google.com/search/blog/2023/08/where-art-thou-error?hl=fr La Comédie des erreurs
Sites d'actualités, tutoriels
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
- https://caniuse.com/ (tableaux de support)
Tests, émulation, devices
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
- https://schema.org/
- Outil de test des résultats enrichis https://search.google.com/test/rich-results
- https://www.opensearch.org/ Opensearch
Open Graph
- https://ogp.me/ Opengraph
- https://metatags.io Génération des meta tags
- https://dev.twitter.com/cards/overview Twitter Cards
- https://cards-dev.twitter.com/validator Validateur Twitter Open Graph
- https://debug.iframely.com/ 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
- https://ishadeed.com/article/css-vars-101/ Variables 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://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Grids Documentation MDN : Grilles avec CSS Grid Layout
Flexbox
- https://flexboxfroggy.com/#fr Apprendre Flexbox de manière interactive
- https://www.vincent-valentin.name/articles/le-petit-flexbox-illustre Flexbox illustré
- https://flexboxpatterns.com/ Patterns flexbox
Typographie, @font-face et polices
- https://systemfontstack.com/ Font stack système native
- https://gwfh.mranftl.com/fonts google-webfonts-helper : Héberger soi-même les polices Google Fonts
- 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://transfonter.org/ @font-face generator
- https://type-scale.com/
- http://www.fontsquirrel.com/tools/webfont-generator
- http://www.losttype.com/browse/
- https://fontcombiner.com/ Combiner des glyphes
- http://www.freefontconverter.com/ Convertir formats
- http://www.shapecatcher.com/
Font-icons
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
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://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://sapegin.me/blog/accessibility-testing/
- https://www.accessify.com/tools-and-wizards/ Pas mal d’outils
- https://validator.w3.org/checklink Vérifie si les liens sont valides
ARIA
- https://w3c.github.io/aria/ La spécification
- https://www.w3.org/WAI/ARIA/apg/patterns/ Patterns
- https://w3c.github.io/using-aria/
- 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
- https://la-cascade.io/articles/comprendre-wai-aria-un-guide-complet Comprendre WAI-ARIA, un guide complet
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://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/Pikaday/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
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
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
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
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://www.pexels.com/videos/
- 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
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
- https://wavacity.com/ Audacity dans le navigateur
WebRTC, MediaCapture
- https://appr.tc/ Démo de chat vidéo en peer to peer avec HTML5
Vidéo
- https://lafibre.info/tv-numerique-hd-3d/comparer-h-264-vp9-av1/ Codecs et support par les navigateurs
- 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://blog.tomayac.com/2023/06/07/web-apps-on-macos-sonoma-14-beta/ Web Apps on macOS Sonoma 14
- 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
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
- https://vim-adventures.com/ Apprendre Vim en jouant
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
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP Les bases de HTTP (MDN)
Sécurité
- https://permission.site Tester les permissions du navigateur selon le protocole http/https
- 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
-
https://www.privacytools.io/ Meilleurs outils de sécurité/confidentialité
- Tests
- https://observatory.mozilla.org/ Mozilla Observatory
- https://securityheaders.io/ pour check
- https://www.ssllabs.com/ssltest/ pour check
CORS
Routage
DNS
- https://messwithdns.net/ expérimenter en ligne
- https://howdns.works/ How DNS works
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://github.com/24eme/signaturepdf Signature/tampon de PDF
- https://kinopio.club Brainstorming / mindmap
- https://www.markdowntutorial.com/fr/ Apprendre markdown
- https://mermaid.js.org/ Générer des graphiques/diagrammes divers à partir de markdown
Explication et relation client
- https://recordscreen.io/ Enregistrer une portion de l'écran
- https://screenrec.com/ Enregistrement d'écran/son/webcam (gratuit)
- 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://directus.io/
- 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
Culture générale
- https://cpu.land/ Comment fonctionne un processeur, la mémoire, un ordinateur pour exécuter un programme
Outils divers
- https://speed.cloudflare.com/ Test de débit
- https://grahamhelton.com/blog/ssh-cheatsheet/ An Excruciatingly Detailed Guide To SSH
Réseaux sociaux
- https://github.com/bradvin/social-share-urls Liens de partage vers les différents réseaux sociaux