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 ; je mettrai les indispensables en vert. 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.

Logiciels

Traitement de texte

• Sublim text 3
  • Emmet
  • Package manager
• Atom
• Brackets

Git

• gitkraken

Node

• gulp / webpack brunch
• npm / bower

Navigateurs

• Chrome
• Firefox
• Safari
• IE / Edge
  • Adblock plus
  • Ruler
  • Colorpicker

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)

Partage de code

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

Partage d’écran

• Teamviewer
• Slack (payant)

 

Technos / Pre-processeurs / Plugins

Node & npm

• node-bourbon
• node-neat
• node-refills

bower   Gulp

• gulp-autoprefixer
• gulp-minify-css
• gulp-pug
• gulp-sass
• watch & cache & plumber
• browserify
• browser sync
• ~linters

Git

• github
• gitkraken

HTML

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

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
• 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/

PHP SQL

• phpmyadmin

Divers

• Emmet / Raccourcis claviers pour coder 80% plus vite
• Elasticsearch / Librairie pour faire des recherches (SQL, Ajax)

Référencement naturel

• Google analytics
• Page speed

Emails

• SPF
• DKIM
• email test spam
• 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

Apprendre en s’amusant

• Introduction au code et a la logique à travers des mini jeux
  • Lightbot
• Typeracer / Courses de dactylographie en ligne, multijoueur, gratuit
• Frog/Grenouilles flex
• Dactylographie typing study / taper plus vite au clavier !
• Introduction à GIT / https://try.github.io/levels/1/challenges/2
  • Git flow
  • Grafikart / https://www.grafikart.fr/formations/git
• Css / http://fr.learnlayout.com/
• tutos divers / https://ryanstutorials.net/ // Merci solveig

Couleurs

• Guide google bonnes pratiques / https://material.io/guidelines/style/color.html#
• Tendances couleurs web / https://www.awwwards.com/trendy-web-color-palettes-and-material-design-color-schemes-tools.html
• kuler / Création de nuancier
• palettable / Création de nuancier intuitive
• color palette generator / Création de nuancier à partir d’images
• http://colorpalettes.net/ / Suggestions de palettes préfaites

Images

• placehold.it
• subtle patterns
• favicon from pics
• images responsive / src set / https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html
  • Viewport, alsacreation / https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
• canva / création d’images / logos, etc. // Merci Solveig PA 107 <3 sur twa
• https://korben.info/10-sites-photos-gratuites-illustrer-vos-sites.html
• Générateur de palette a partir d’une image / https://toolki.com/fr/image-palette/

Hébergement / NDD / Mails

• Mx toolbox / Analyste de données liées au nom de domaines (adresse ip serveur, mails, blacklist, etc.)

Programmation

• https://www.codingame.com/start
• Liste de vérifications de fins de sitehttp://frontendchecklist.com/

html

• https://html5boilerplate.com/
• w3c
• Exemple toolbox max : http://cake.masamune.fr/_toolbox.html
• Intégration : panneau d’admin tout prêts / https://codepen.io/melissacabral/pen/ZbPWEJ?limit=all&page=3&q=admin+panel

Css

• Css gradient generator / http://www.colorzilla.com/gradient-editor/
• https://www.campaignmonitor.com/css/
• can i use
• (retrouver) article _trash.css
• Organisation du css / BME, SMACSS, OOCSS
• Animation textes
  • https://graphiste.com/blog/30-animations-de-texte-pour-surprendre-vos-visiteurs
  • http://textillate.js.org/
• grille / https://cssgrid.io/

Polices

• Wizard Google web fonts en local / https://google-webfonts-helper.herokuapp.com/fonts

Icônes / SVG

• IcoMoon
• Font awesome
• Material Icons
• https://www.flaticon.com/ / Merci Solveig PA107

JS / JQuery

• http://fizzy.school/

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

Vidéo

• Création de vidéos promotionnelles lowcost / https://www.shakr.com/

Divers

• Sondages / https://www.surveymonkey.co.uk/
• Calculer et répartir les frais / https://www.tricount.com/fr/
• Impression cartes de visites & autres / https://www.zazzle.fr/personnaliser/cartes+visite

 

WordPress

• Elegant themes
• Press75
• Elementor / https://elementor.com/theme-builder/

 

Articles intéressants

webpack

• Tutoriel webpack gratuit & officiel <3 / https://webpack.academy/
  • https://leanpub.com/survivejs-webpack

gulp

• Clean gulpfile.js & dedicated tasks files / https://makina-corpus.com/blog/metier/2015/make-your-gulp-modular

html

• multi language BP / https://www.nomensa.com/blog/2010/7-tips-for-multi-lingual-website-accessibility

Css / Sass

• https://www.webdesignerdepot.com/2016/04/using-atomic-design-in-modern-web-development/
• https://css-tricks.com/designing-a-product-page-layout-with-flexbox/
• https://www.canva.com/

Accessibilité

• https://www.webdesignerdepot.com/2018/05/9-a11y-tips-for-global-accessibility-awareness-day/

Serveur

• http://stevesouders.com/hpws/rules.php / Merci Solveig PA107

Maths

• https://betterexplained.com/cheatsheet/ / Merci Solveig PA107

Tags: backend, Bonnes pratiques, Développeur, frontend, ressources, web