Tutoriaux divers et variés

3WA / Ressources diverses

Par le 5 juillet 2017 dans Ressources, Support 3WA, Tutoriels | 0 commentaire

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

 

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 / http://imakewebthings.com/waypoints/shortcuts/infinite-scroll/
  • Grille responsive / 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

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 !

Couleurs

  • kuler / Création de nuancier
  • palettable / Création de nuancier intuitive
  • color palette generator / Création de nuancier à partir d’images

 

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

Hébergement / NDD / Mails

  • Mx toolbox

Programmation

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

html

  • https://html5boilerplate.com/
  • w3c

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

Magazines / blog

 

Vidéo

 

Divers

  • Sondages / https://www.surveymonkey.co.uk/
  • Calculer et répartir les frais / https://www.tricount.com/fr/

 

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/

Tags: , , , , ,

Poster une réponse

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>