preloader

Le kit de survie pour le web

Le kit de survie pour le web
Par Nicolas Malet / Publié le 26.04.2020

Des tas de sites et services en ligne pour vous aider dans le développement front-end

Tu t’es enfin décidé à affronter les terres désolées du World Wide Web et tu veux franchir de nouvelles étapes. Tu es malin et pas une andouille. Tu as frappé à la bonne porte, je t’ai préparé un bon guide pour déblayer le chemin.

Nous sommes en 2020 et l’homme a créé de gentils robots bien docile pour faire presque le travail à ta place. Pour toi je les ai listés et organisés par catégorie car on a peu de temps devant nous.

La plupart des outils proposés sont des applications web gratuites.

C’est parti !

Gestion de projet

  • trello.com est un outil de gestion de projets.
  • gitkraken.com est un un autre outil de gestion de projets open source.

Hébergement gratuit

Attention hébergement gratuit ne veut pas dire qu’ils vont te faire un café mais tu pourras toujours trouver mieux contre quelques pièces.

Transférer des fichiers SFTP - SSH

  • filezilla-project.org Filezilla application de transfert de fichier utilisant le protocole SFTP
  • winscp.net Winscp application de transfert de fichier utilisant le protocole SFTP, est-il meilleur ?
  • Ou encore directement dans le navigateur avec : cyberduck.io
  • Un terminal Bash ou WSL Permet le transfert de fichier via le protocole SSH

Manuels et référence en ligne

Les manuels sont essentiels si tu veux survivre.

Obtenir une information exacte sur l’utilisation d’une fonction, obtenir des conseils sur le développement d’un site …

Pas la peine de courir partout. Privilégie les modes d’emploi.

Même Google est ton ami (si si). RTFM

Éditeurs de texte - IDE - Coder

Il en existe d’autres mais pour commencer cela suffit amplement.

Tu peux aussi apprendre des raccourcis Windows

Liste de plugins utiles pour VS-CODE

Tu peux mettre dans ton sac à dos ces quelques plugins pour vs-code.

Enfin si ça te branche.

Contrôler / vérifier le code

HTML

CSS

Compatibilité

  • caniuse.com : permet de connaître la compatibilité des dernières technologies du web pour les navigateurs.

  • caniemail.com : permet de connaître la compatibilité des dernières technologies du web pour les clients mail.

Divers

Tableau de caractères spéciaux et raccourcis

Tu peux maintenant faire la combinaison de touches Win + ; pour insérer des émojis et prouver que tu es très en colère (Niark !). Merci Windows pour ton éveil.

Sinon il y a aussi :

Copyrighting

Un peu d’aide pour le Copyrighting.

Outils pour le Multimédia

Banques d’images, photos et vidéos.

Retoucher des photos en ligne

Convertir des images et photos en ligne

Un convertisseur d’images en ligne.

Pour les adeptes de la console il y a :

Banques photos, vidéo et illustrations vectorielles, Icones et glyphes libres de droits

Photos

Icônes et illustrations

Vidéos

SVG

Fonts - Polices

Installer des polices open-source

Avec la combinaison de :

Couleur

Aide pour l’accessibilité, calculer le contraste idéal pour vos couleurs d’arrière-plan et d’avant-plan - Conformité WCAG.

Wireframe, Maquettes et prototypes

Faux textes et images de substitutions

  • Faux textes :
  • Faux utilisateurs :
    • randomuser.me : Liste de photos d’utilisateurs pour maquettes.
    • pravatar.cc : Liste de photos d’utilisateurs pour maquettes.
  • Fausses images :

Viewport et responsive

Ou des Outils pour le responsive.

Performance

F12 sur ton navigateur puis aller dans l’onglet audit.

Sitemap

Génère un sitemap de ton site au format xml.

PWA - Créer sa première Application Web

Voici une manière rapide de transformer son site énergivore en Application Web Progressive.

Etape 1 : Génère tous les “favicons” nécessaires pour une application “cross-plateforme”

realfavicongenerator.net

Etape 2 : Génère un “agent de service” (service worker) pour gérer ton application en mode hors-ligne

pwabuilder.com non testé

Bonus

News, actus, veille et inspirations

Pour trouver l’inspiration.

Pour approfondir tes compétences.

Jeux et apprentissage

Jouer et apprendre c’est possible

Framework CSS

Template de site

Email

Jobs

comments powered by Disqus