Date et heure
03/06/2016
08:00 - 18:30
Localisation
L’Escarpe
4 Rue Pierre Montet
67000 Strasbourg
France
Forte des 5 éditions précédentes ayant toutes rencontré un succès fou, l’agence alsacienne Alsacréations propose cette année encore une journée que WebLife se fera un plaisir de couvrir en tant que partenaire presse.
A noter qu’un streaming live de l’évènement est disponible pour ceux n’ayant pas eu l’occasion de venir.
Nos petits stress quotidiens (au travail)
Par Damien Senger
Le travail représente la majeure partie de notre vie. Nous valons mieux que le stress, soyons épanouis.
Le stress est une question de temps. Il y a 2 types de stress :
- le stress aigu, tel que celui ressenti face à un lion
- le stress chronique, qui s’installe dans la durée, ayant des effets néfastes sur la santé
Il y a 3 phases :
- l’alarme : le corps se prépare à combattre ou à fuir
- la résistance : le corps livre le combat
- l’épuisement : le corps est débordé
Le résultat : les troubles anxio-dépressifs, type le burn-out. Le stress et le burn-out sont donc de vrais phénomènes physiques. Les symptômes sont physiques, émotionnels et intellectuels.
Switcher régulièrement de projet est un facteur important de stress. Il faut donc trouver le juste milieu.
L’open-space est également un élément à prendre en compte. Ne pas être seul est important, mais c’est gênant pour la concentration. Trouver des solutions comme s’isoler avec un casque par exemple, ou mettre en place un indicateur précisant si vous pouvez être dérangé ou non.
L’erreur est humaine. Il s’agit d’expérience qui nous aide à nous construire.
La transparence salariale rend possible de comprendre sa rémunération, anticiper son futur et donc son évolution. Bref, être moins stressé. Il faut valoriser la montée en compétence, ancienneté, etc. Cela ouvre aussi la porte à la démocratie en entreprise.
L’innovation et l’épanouissement passent aussi par l’initiative personnelle. On peut par exemple valoriser le salarié en le laissant présenter son travail au client.
La rétention d’information est dangereuse. L’information doit être accessible sans nécessiter d’interaction humaine.
Les rythmes des salariés ne sont pas les mêmes. Faire des pauses après chaque contrat long ou pénible. Le cerveau a en effet besoin de repos.
S’épanouir personnellement en faisant de la vielle par exemple. Certaines structures du nord de l’Europe libèrent un jour par semaine à leurs salariés : 4 jours sur des projets clients, 1 jour en entreprise pour découvrir de nouveaux outils et montrer en compétence.
10 astuces SVG qui vont vous sauver la vie
Par Vincent De Oliveira
Le code SVG peut aussi être sale. N’hésitez pas à utiliser des outils tel que SVGOMG et les intégrer à vos process.
Utiliser le viewBox pour éviter toute surprise, ainsi que la largeur et la hauteur, éventuellement surchargés par des éléments CSS. Inclure le SVG de façon adaptée au sein de la page.
Ne pas utiliser de transformations SVG, ni les animations. Préférer les transformations et animations CSS.
Pour éviter les bordures floues, opter pour des multiples de 2, décaler la forme d’1/2 pixel ou encore via des propriétés malheureusement pas encore supportées dans IE/Edge.
Mettez du libre dans vos projets
Par Pierre Rudloff
Pourquoi ne pas participer aux produits libres utilisés dans les projets ?
Les intérêts sont multiples :
- Aider le autres
- Montrer ce que vous savez faire (valorisation des compétences)
- Avoir des retours sur votre code (code plus propre/performant)
- Profiter des améliorations des autres (cercle vertueux)
Utiliser des gestionnaires de paquets pour faciliter la gestion des dépendances, et lire les licences pour être en règle.
Avant de signaler un bug, vérifier que celui-ci n’a pas déjà été signalé, et respecter la procédure en plus de s’exprimer en anglais pour être compréhensible par un maximum de personnes. Apporter autant que possible de l’information sur l’environnement, l’action et même le résultat attendu.
En fonction des compétences, éventuellement proposer soi-même un patch, en veillant à prévenir qui de droit en amont.
En dernier recourt, faire un fork en étant bien conscient des avantages et inconvénients.
N’hésitez finalement pas à écrire de la documentation et des guidelines, utiliser des standards reconnus et soyez ouverts à la participation.
Outil : Gestion sémantique de version
Café / Tea time
Agilité pour petits projets
Par Bertrand Keller
Partir petit et proche de l’usage (Ex. Airbnb). Les outils comme Trello et GIT permettent de raconter l’histoire d’un projet.
Les générateurs de sites statiques répondent au besoin de création de petites applications : http://www.staticgen.com/
Intégration et Webapps : ProTips
Par m4dz
Ne pas se limiter aux sélecteurs CSS standards : enfants directs, adjacents directs, adjacents, sélecteurs d’attributs, pseudo-classes, pseudo-éléments, etc. http://tympanus.net/codrops/css_reference/ – Gare à la spécificité : http://cssspecificity.com/
Côté HTML, utiliser les balises de zones (<section>, <article>, <main>, <aside>), d’espaces (<nav>, <header>, etc.) et les templates (<template> ou moteur de template (pug, nunchucks).
Aria pour l’accessibilité. Utiliser les rôles et les états.
En terme de maintenance, organiser par corpus, composants et domaine.
Git ProTips
Par Christophe Porteneuve
Conférence trop fun pour prendre des notes, n’hésitez pas à jeter un oeil aux :
Sustentation
HTTPS partout, chiche !
Par Frédéric Kayser
Le service Qualys SSL Labs permet de vérifier la configuration HTTPS de n’importe quel site, apportant ainsi de précieux détails.
Pour la configuration de TLS sur un serveur, rendez-vous sur le Wiki de Mozilla.
L’e-mail sous toutes ses formes
Par Sébastien Lejeune
L’email en quelques chiffres :
Les éléments constituant le mail :
- Le from : Inclure le nom de la marque, utiliser une adresse e-mail identifiable et un alias pertinent
- Le sujet : Max 50 caractères, en rapport avec l’e-mail, faire de l’A/B testing, utilisation de pictos visuels
- Le préheader : Max 100 caractères, résume le but de l’e-mail, un lien miroir, un lien de désinscription
- Le footer : Un lien de désinscription clair et lisible, un lien vers un centre de préférences, liens sociaux
Préférer :
- Le HTML à l’image
- Les boutons plutôt que les liens
- Répéter le call-to-action 3 fois
Les layouts :
- Desktop : Entre 500 et 640px
- Header image :
- Hauteur de 100 à 200 px
- Formats GIF, JPG et PNG
- Image spécifique à la version desktop
- Visuel
- Simple
- En rapport avec l’email
- Background image supporté sur certains clients mails
- Header image :
- Mobile : Entre 280 et 320px
- Les calls-to-action de minimum 44 x 44 px
- Règles de bonnes pratiques à respecter :
- Augmenter la taille de police de caractères (font-size: 16px)
- Augmenter la hauteur de ligne va permettre une meilleure lisibilité
- N’ayez pas peur du scroll
- Header image :
- Hauteur de 100 à 200 px
- Formats GIF, JPG et PNG
- Différent de la version desktop
Mobile First vs Responsive : Utilisation de break point responsive en fonction de la cible, définir le bon doctype mais aussi l’encoding et le viewport.
Autres astuces :
- Définir les styles directement sur les TD
- Définir tous les liens avec target= »_blank »
- Fixer la largeur des images
- Définir un texte alternatif sur les images
- Utiliser des images 2x plus grandes ou en 96dpi
A ne jamais faire :
- L’utilisation de code JavaScript
- L’utilisation de feuilles de styles externes
- L’utilisation de formulaires
- L’utilisation de Flash
- L’utilisation de sons
Ne pas hésiter à utiliser des outils de rendering comme Litmus et Email on Acid.
Les codes reviewztraminer : contrairement au vin, c’est moins bon en tardive
Par Morgane Hervé
Review de code :
- Eviter les bugs
- Corriger les erreurs de conception
- Mettre en place des standards au sein de l’équipe
- Eviter le « bus factor »
- Permettre de monter en compétence
- Améliorer le travail d’équipe
Objectifs de la review de code :
- Meilleure qualité
- Meilleure maintenabilité
- Meilleure sécurité
Qui, quand et Quoi, les 3 Q :
- Qui : Tout le monde
- Quand : Au quotidien dans la mesure du possible
- Quoi : GitHub, Bitbucket, GitLab
La revue de code doit porter sur la logique et le fonctionnement et non sur les standards de codage.
Les quatre A, pour convaincre de faire de la revue de code :
- Argent : Moins de bugs en prod, meilleure image de marque & planning respecté
- Assurance : Sérénité lors de mises en production, le code est connu et maintenable
- Amélioration : Les bonnes pratiques sont facilement partagées, on apprend mieux de ses erreurs quand elles ne sont pas subies, mutualisation des défenses
- Agnostique : Même processus quelles que soient les technos, tous à la même enseigne
Au Figaro :
- 2 mois pour que toute l’équipe se mette aux CR sur nos projets
- Pas forcément plus long au final que les daily stand up
- 80% d’anomalies en prod en moins
Workflow moderne cherche graphiste à l’ancienne
Par Gaël Poupard
Avant tout, définir un protocole de travail. Ex :
- La Photoshop Etiquette défend une approche organisée du web design, en promouvant la clarté, l’empathie et l’intention
- Intégration web : les bonnes pratiques (de Corinne Schillinger) est un véritable guide de survie, qui vous apprendra plus que vous ne le pensez !
Ne pas hésiter à utiliser Git pour conserver un historique des fichiers, éventuellement faire un fork ou encore mettre en place un wiki pour les échanges.
Au sein de Photoshop, utiliser l’inclusion de fichiers : Moins de répétition, une propagation des changements « automagique », une organisation proche de celle de votre CMS, et une facilité pour travailler à plusieurs.
Un gestionnaire de tâches tel que Gulp, couplé aux objets dynamiques, offre la possibilité de :
- Optimiser le poids et les dimensions des fichiers
- Générer un sprite et une police d’icônes à la volée
- Utiliser Git via un script NPM
The Goutaÿ
CSS Selector Wars : un nouvel espoir ?
Par Florens Verschelde
Pour limiter les complications, ne pas hésiter à faire usage des :
- Classes de composants : un « namespace » par bloc. Exemple : BEM.
- Classes utilitaires : micro-styles réutilisables, tel que celles implémentées dans les frameworks CSS. Exemple : clearfix {}
- Classes atomiques : Atomic CSS, Tachyons, etc.
- CSS Modules
L’identité visuelle sur le web, penser au-delà du print
Par Aurélien Sesmat
Penser à la charte graphique avant tout, pour décliner une identité visuelle adaptée à tous les besoins.
The Quïz
Le très distingué ::after
Photographies
Jennifer : KiwiParty 2016
M4D’z : KiwiPartÿ
Autres publications
WAX Interactive : Retour sur la KiwiParty 2016
