🍺🐬 Masamune blog v4

Paint avec moi qui sourit et un fond capture d'écran de ma grosse liste de liens pour excel

Ressources de base pour développeur / euses

📅

📂

,

🏷️

, , , , , , , , ,

Cet article va me permettre de stocker l’ensemble des ressources (logiciels, technologies, sites web) que je vous recommande. J’en utilise régulièrement une majorité, et mon template de base de projet par défaut est basé dessus, donc c’est du solide 😉

De plus, la majorité de ces technos seront utilisées en entreprise, je vous recommande donc de vous familiariser avec.

A noter que cela pourra évoluer au fil du temps (les technos évoluent / changent / sont remplacées). Enfin, en fin d’article vous trouverez des articles intéressants sur les bonnes pratiques dans le milieu du web.

Edit 2023

Oh boy comment ça a vieilli x)

À noter que l’article n’est plus maintenu, go plutôt Ctrl + F dans ma liste de liens.

Bon en vrai j’ai fait une repasse rapide dessus c’tay juste trop vieux.

Logiciels

Traitement de texte Editeur de code

Versionning, sauvegarde, partage de code

Git / Github / GitLab

Interface graphique : GitKraken

Gestionnaires de paquets

  • Npm
  • bower
  • composer

Compilateurs / automatisation light

  • gulp
  • webpack
  • ~brunch // Vraiment orienté front / intégration

Navigateurs

  • Brave // Fork de Chrome, vire les pubs & pas mal de cookies, accélère la navigation, mais peu poser des problèmes en dev
  • Chrome
  • Firefox
  • ~Opéra
  • Safari
  • IE / Edge

Plugins navigateurs

  • Dashlane // Gestionnaire de mots de passe, auto-remplissage. Il y a des alternatives gratuites mais il tourne très bien
  • Laser cat // Point and click pour balancer du display none en rafale
  • GoFullPage // OH MON DIEU, prend ta page et la sort en PNG / PDF. Indispensable
  • AddBlockPlus // Anti pub
  • Youtube Speed Controller // Dépasser la limite de 2x, gagner du temps en mattant en x3 – x8
  • Ruler // Old / Mesurer les pixels & alignement dans le navigateur
  • Ncage // 🙂
  • Colorpicker ColorZilla // Pipette dans le navigateur
  • Différents plugins de debug, liés aux technologies utilisées

Gestion de projet

  • Balsamiq mockups / Permet de faire des ébauches de sites (interface glissé déposer, très simple d’utilisation, pas cher, démo gratuite)
  • Trello / Agile & SCRUM rapide de la flemme avec 5 colonnes TODO / EN COURS / RECETTAGE / DONE
  • Notions / Plein

Partage de code

  • Sharecode
  • Codepen / https://codepen.io/
  • CodeShare.io
  • Cloud9

Partage d’écran

  • Discord
  • Teams // Possibilité dans le navigateur
  • Teamviewer
  • Slack (payant)

Code

HTML

  • pugjs (anciennement jade html)
  • html5 pour le legacy / https://github.com/aFarkas/html5shiv
  • Bootstrap

CSS

  • sass
    • bourbon / neat / bitters / refills
  • resets / normalize
  • Générateurs
    • Animation css / http://cssanimate.com/
    • Triangles css / http://apps.eky.hk/css-triangle-generator/
    • Dégradés / http://www.colorzilla.com/gradient-editor/

JS

  • Jquery // Edit 2023 : en vrai je ne recommande plus, trop de bordel dedans, compatibilité, etc.
  • Gestion scrolls & infinite scroll : Waypoints / http://imakewebthings.com/waypoints/shortcuts/infinite-scroll/
  • Grille responsive : Isotope / https://isotope.metafizzy.co/ / https://masonry.desandro.com/
  • alertes personnalisées / http://t4t5.github.io/sweetalert/
  • Création de particules / http://vincentgarreau.com/particles.js/
  • Edit 2023

PHP SQL

  • PhpMyAdmin / Edit 2023 : alternative > adminer
  • Repo php-fpm / php 8.1
  • Tous les modules alakon pour accélérer les wordpress

Divers

  • Emmet / Raccourcis claviers pour coder 80% plus vite
    • Edit 2023 : Inclus à VSCode mais se retaper les tutos de temps en temps ne fait pas de mal
  • Elasticsearch / Librairie pour faire des recherches (SQL, Ajax)
  • underscore.js / Js beaucoup plus rapide sur tout

Référencement naturel

  • Google analytics ~google console ou chp
  • Page speed Google insights

Emails

  • SPF
  • DKIM
  • DMARC
  • email test spam
  • Gestionnaire & envoi d’emailing
    • mailchimp
    • foundation / http://foundation.zurb.com/emails.html
    • != boites mails / https://inboxen.org/

Gestion de projet

  • Methode SCRUM
  • Jenkins / Gestionnaire de mise en ligne (travaille en conjonction avec git/tortoise)
  • Jira / gestionnaire de tâches orienté scrum
  • Mantis / Gestionnaire de traitement de bugs
  • Trello / Gestionnaire de ticket simple

Sites recommandés

Edit 2023 : Liste de liens > Formation concours exos

Apprendre en s’amusant

  • Introduction au code et a la logique à travers des mini jeux
    • Lightbot
    • Edit 2023 : Même si le jeux flash est difficile d’accès maintenant (plugin navigateurs, etc.) de mémoire ils l’ont ressortis en appli, voir en JS
  • Typeracer / Courses de dactylographie en ligne, multijoueur, gratuit
  • Frog/Grenouilles flex
  • Dactylographie typing study / taper plus vite au clavier !
    • Edit 2023 : 🥰 pas mal perdu l’habitude, mais se le mettre en favori & pratiquer ~15 – 30 minutes tous les midis pendant la pause dej’ augmente vraiment le rendement
  • Introduction à GIT / https://try.github.io/levels/1/challenges/2
  • Css
  • tutos divers // Merci solveig

Couleurs

Images

  • placehold.it // API de génération d’images de remplacement, possibilité de dimensions, couleurs, textes
  • subtle patterns // Fonds qui bouclent cool, pour le css
  • favicon from pics // Tu upload une image, ca te sort tout ce qu’il faut pour une favicon
    • Edit 2023 : En vrai je l’utilise encore x’)
  • images responsive / src set, tuto alsacreation
  • canva / création d’images / logos, etc. // Merci Solveig PA 107 <3 sur twa
  • Générateur de palette a partir d’une image

Hébergement / NDD / Mails

  • Mx toolbox / Analyste de données liées au nom de domaines (adresse ip serveur, mails, blacklist, etc.)
    • Edit 2023 : 🥰 Oh god tellement pratique, indispensable pour la gestion propre des DNS

Programmation

  • Code in game / vraiment sympa pour débuter la prog
  • Liste de vérifications de fins de site ⚰️ Edit 2023 lien dead

html

  • html5boilerplate / Boilerplate html css js
    • Edit 2023 : Je l’utilise toujours, mais j’ai une version light avec moins de minis fichiers alakon
  • w3c // mwi, maintenant tout est sur MDN Mozilla

Css

  • Css gradient generator
  • Guide pour CSS
  • can i use // Guide des compatibilités de styles en fonction des différents navigateurs, et de leurs versions
  • Organisation du css / BME, SMACSS, OOCSS
    • Edit 2023 : KNACSS également
  • Animation textes
    • https://graphiste.com/blog/30-animations-de-texte-pour-surprendre-vos-visiteurs
    • http://textillate.js.org/
  • grille / https://cssgrid.io/

Polices

Icônes / SVG

  • IcoMoon
  • Font awesome
  • Material Icons
  • flaticons / Merci Solveig PA107

Edit 2023 : On va pas se mentir, avec la tétra-chiée d’émoticônes gérées comme du texte classique, je passe par ça plutôt que par les libs d’icônes.

En vrai y’a pratiquement tout, responsive, compatible, pas de dégradations en redimensionnant.

2 sites cools : liste de toutes les emojis, emojis pour git.

Magazines / blog

  • webdesigner depot / Anglais / Tendances web & ressources gratuites
  • blog nielsen / Anglais / Bonnes pratiques, ergonomie & référencement naturel
  • frontend rescue / Liste de sites de veille techno. Edit 2023 : Pas de https mais site up

Edit 2023 : Liste de liens > newsletter / veille, ou onglet bonnes pratiques.

Vidéo

  • Création de vidéos promotionnelles lowcost / https://www.shakr.com/
    • Edit 2023 : Pas utilisé souvent mais ajoute une vrai plus-value sur les petits sites, pour 50 balles (a l’époque) ça fait le taf

Divers / edit 2023 : divers dans divers, lel

WordPress

  • Elegant themes
    • Edit 2023 : Yup, avec le thème über customisable Divi, c’est devenu le go-to pour les WordPress
    • Possibilité de charger des thèmes ou morceaux de thèmes qui font gratter un temps de ouf
    • Toujours un budget mais si vous faites de WordPress votre corps de métier, vous chopez une promo “lifetime” ça vaut vraiment le coup
  • Press75 // Edit 2023 : Je ne l’utilise plus, même si cela reste une base correcte, pas assez de communauté dessus
  • Elementor / https://elementor.com/theme-builder/ // Edit 2023 : Trop d’emmerdes en général
  • Edit 2023 : ACF / Advanced Custom Fields, toujours un indispensable, idem choper un lifetime

Articles intéressants

Css / Sass

Accessibilité

Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *