Ressources veille & développement

Pour progresser en développement il faut se maintenir à jour, et pour cela il faut pratiquer. Dans cette page vous trouverez des ressources utiles à votre progression.

Table des matières

• Généralistes
• Veille
  • Newsletters
• Agrégateurs RSS
• Outillage
• Documentation
• Imageries et illustrations
• Frameworks CSS
• Apprentissage
• Assistants IA
• Prototypage
• Polices
• Icônes
• Couleurs
• Bonnes pratiques
• DevOps
• Générateurs de sites statiques
  • Thèmes pour Astro
• Hébergement
• Sites statiques
• Sites dynamiques

Généralistes

• Clubic
• Le Monde Informatique
• Le journal du hacker
• Le journal du geek
• Les numériques
• 01net
• macg.co
• 9to5Linux

Veille

• Github Trending
• Medium.com
• Dev.to
• Reddit /r/webdev
• Hacker News
• Twitter (X) <- La communauté tech y est moins présente, voir Bluesky.
• Développez.com
• Le journal du développeur
• Youtube
• Bluesky <- Une bonne partie de la communauté tech y a migré.
• Mastodon

Newsletters

Un email par semaine, la veille sans effort :

• JavaScript Weekly
• TLDR <- Tech générale, IA, DevOps… plusieurs éditions au choix.
• bytes.dev <- JavaScript, ton décalé.

Agrégateurs RSS

• Feedly
• Inoreader
• The Old Reader
• Feedbin
• FreshRSS <- Open source et français, à auto-héberger sur votre serveur (Docker).
• Aggregator
• Nextcloud News

Outillage

• Notion
• Obsidian <- Prise de notes en Markdown, local et gratuit.
• Doodle
• Trello
• Pomodoro
• Docker
• Docker Hub
• Excalidraw <- Schémas « à main levée », très utilisé dans la documentation technique.
• Draw.io <- Réaliser des schémas (diagrammes, réseaux, UML…).
• Bruno <- Tester des API (alternative libre à Postman).
• Hoppscotch <- Tester des API depuis le navigateur.

Documentation

• MDN
• W3Schools
• Can I use <- Voir si un navigateur supporte une fonctionnalité.
• CSS Tricks
• StackOverflow
• web.dev <- Les bonnes pratiques web par l'équipe Chrome.
• DevDocs <- Toutes les documentations au même endroit, consultable hors ligne.
• roadmap.sh <- Parcours d'apprentissage par métier (frontend, backend, DevOps…).

Imageries et illustrations

• Des ressources pour le design (Merci Valentin Brebion)
• CodePen.io
• Génération de Gradient CSS
• Dribbble.com
• Unsplash <- Des images libres de droits
• Des illustrations
• Rappel sur design

Frameworks CSS

• Bootstrap <- Un standard
• Tailwind <- À creuser.
• Des templates réutilisables

Apprentissage

• Flexbox
• Grid
• Générateur de Grid CSS
• Exercism <- Exercices corrigés par des mentors, dans tous les langages.
• Codewars <- Défis de code par niveau.
• CSS Battle <- Reproduire un visuel avec le moins de CSS possible.

Assistants IA

Des outils devenus incontournables, à utiliser pour comprendre et non pour produire à votre place : en évaluation comme en entretien, vous serez seul face au code.

• ChatGPT
• Claude
• GitHub Copilot <- Gratuit avec le Student Pack.
• Mistral (Le Chat) <- L'acteur français.

Prototypage

• Figma
• Penpot <- Alternative libre et open source à Figma.
• Rappel sur le centrage en CSS
• Afficher du code

Polices

• Google Fonts <- Attention au tracking (RGPD)
• Bunny fonts <- Compatible RGPD

Icônes

• Material Design Icons
• Flat Icon
• Font Awesome
• Lucide <- Le standard actuel des projets open source.
• Heroicons <- Par les créateurs de Tailwind.

Couleurs

• Color Picker & Choix de couleur
• Material Design (couleurs)
• Couleurs RAL

Bonnes pratiques

• Quelques règles de base (en 4 minutes)

DevOps

• Certbot <- Installer un certificat SSL pour son site web (HTTPS)
• Acme.sh <- Installer un certificat SSL (HTTPS), équivalent Certbot mais écrit en script shell.

Générateurs de sites statiques

Les outils suivants permettent de générer des sites « clients » dynamiques ou statiques en utilisant uniquement du HTML, CSS et JS. Ils sont donc hébergés sur des plateformes de type Netlify, Github Pages, etc. Parfait pour un portfolio ou une documentation.

• VitePress <- Générateur de site statique basé sur VueJS.
• Astro <- Générateur de site statique.
• Docusaurus <- Générateur de documentation.
• NextJS <- Framework fullstack basé sur React.

Thèmes pour Astro

Liste de thèmes

Hébergement

Deux catégories :

• Les sites statiques (HTML, CSS, JS)
• Les sites dynamiques (PHP, NodeJS, Python, Ruby, Java, etc.)

Point vocabulaire

CI/CD signifie « Continuous Integration / Continuous Delivery ». Il s'agit d'un ensemble de techniques permettant de déployer automatiquement un site web à chaque modification du code source. Les plateformes proposant ce service sont souvent gratuites pour les sites statiques et intègrent une interface permettant de gérer les déploiements (exemple Netlify).

Sites statiques

• Netlify <- CI/CD, Simple, « gratuit », avec une interface web de gestion.
• Cloudflare Pages <- CI/CD, « gratuit », très généreux sur le free-tier.
• Vercel <- CI/CD, « gratuit », la référence pour les projets NextJS.
• Surge.sh <- CI/CD, Simple, « gratuit », un poil plus technique.
• Gitlab Pages <- CI/CD
• Github Pages <- CI/CD (Gratuit, mais sans interface de gestion)
• Firebase Hosting <- CI/CD (Gratuit, mais sans interface de gestion)

Sites dynamiques

• Heroku <- CI/CD, Plus complet, mais un peu plus « complexe ». Payant (plus d'offre gratuite depuis fin 2022).
• OVH <- Hébergeur classique à base de serveurs dédiés ou mutualisés.
• Web Hosting OVH <- Hébergement mutualisé à petit prix.
• AlwaysData <- Free-tier de 100 Mo pour vos projets.
• Page Perso Free <- 10Go gratuits si abonné Free.
• Railway <- Payant mais avec une offre de test de 500h.
• Render <- CI/CD, free-tier pour les petits projets (avec mise en veille).
• Fly.io <- Déploiement de conteneurs Docker proche de vos utilisateurs.
• Clever Cloud <- PaaS français, données hébergées en France.
• Coolify <- PaaS open source à auto-héberger sur votre propre serveur (type Netlify/Heroku chez vous).