Ressources du dimanche (28) : revue pratique web

Aujourd’hui, une collection de ressources pratiques et utiles qui présentent quelques atouts pédagogiques pour apprendre et être meilleur dans notre workflow. Alors bon travail !

Go pour quelques ressources pratiques et utiles pour gagner du temps. Responsive, code, CSS, Gulp… Une revue pratique qui va aider à se perfectionner ! 

1 – Responsive Breakpoints for images

Un outil qui permet de paramétrer ses images dans une logique responsive et pas seulement dans celle du pixel. On choisit la tranche des breakpoints, une optimisation du poids de l’image pour la performance de la page, l’aspect-ratio, etc… Enfin, nous pouvons télécharger la série d’images générées et reprendre le HTML selon les paramètres donnés. Cet outil est un petit trésor qui nous fait gagner un temps de folie pour le traitement de nos images.

Voir la ressource responsivebreakpoints

responsive_img_tool

2 – Catalogue de plugins pour le PostCss

Voici un catalogue réalisé par Max Stoiber des plugins pour PostCss. Plusieurs thèmes sont concernés, comme les media queries, les flexbox, les modules, les debug….

Voir la ressource postcss.parts

postcss-parts

3 – CSS vs. Js

Un petit exercice sympa et drôle, comment comparer les moyens de sélectionner les éléments entre les CSS et le langage javascript.

Voir le pen CSS vs. Js

css-vs-js

4 – Le template d’un emploi du temps

Un exemple simple et clair d’une timeline d’emploi du temps sur laquelle on place les événements, avec au clic sur une event, une popin pour le descriptif de l’event. Et bien sûr le traitement en responsive. Belle ressource !

Voir la ressource schedule-template

timeline-css

 

5 – Un assistant pour les spécifications CSS du flexbox

A partir de 2 attributs spécifiés ‘layout’ & ‘self’, cet outil permet d’appliquer aux éléments d’une mise en page les flexbox de manière simple et raccourcie.

Voir l’outil Flex layout Attribute

flexbox-attribute

6 – Installer facilement Gulp sur son PC

Allez, belle ressource pour s’attaquer à l’installation de Gulp sur vos PC. Version simple et bien documentée par étapes pour installer Gulp, avec une partie dédiée à Commander (Cmder), car il ne faut pas craindre la ligne de commande.

Voir le tuto d’installation Gulp

gulp-install-pc

7 – Introduction à Mo.js

Mo.js est une bibliothèque JavaScript consacrée à la motion pour le web. Il offre un mouvement syntaxique déclaratif et la création d’éléments pour l’animation. Même si mo.js est toujours en version bêta, il existe déjà une foule de fonctionnalités étonnantes à jouer. Son auteur, Oleg Solomoka (autrement connu sous le nom @legomushroom) crée des démos et des didacticiels incroyablement impressionnants pour les offres de la bibliothèque que vous devriez vérifier, mais dans cet article nous allons exécuter un aperçu très rapide des fonctionnalités et des didacticiels pour vous aider à démarrer.

Mo.js est une bibliothèque Javascript pour faire du motion pour le web, créée par Oleg Solomoka. Encore en version beta, nous avons dans cet article un bel aperçu des possibilités, des fonctionnalités de cette bibliothèque.

Lire l’article mo.js

mo-js-biblio

Voici ma petite sélection de la semaine pour quelques ressources bien faites et bien pratiques, qui je l’espère vous aidera dans votre workflow.

Laisser un commentaire

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

Categories:
Tags:
Date:
  • 21/11/2016
Share:
%d blogueurs aiment cette page :