sfeir/bouffe-front

Bouffe Front SFEIR

bouffe-front's Issues

Faire des PDFs avec du HTML/CSS et un Chrome headless

Faire des PDFs avec du HTML/CSS et un Chrome headless

• Temps: 30 minutes
• A partir de: quand je peux être présent à une bouffe front

Description

Votre client veut faire un PDF à partir de la page web que vous avez faite ? Ça doit bien sûr être propre au niveau du rendu, passer sur tous les navigateurs, surtout IE, et évidemment couter le moins cher possible. Challenge accepted.

Stratégie monorepo et Lerna

Stratégie monorepo et Lerna

• Temps: 30 minutes
• A partir de: Avril

Description

La strétégie monorepo est utilisée depuis 1999 par Google. Leurs équipes utilisent également le trunk based development. Nous allons faire le tour de ces deux concepts et je vais faire un retour d’expérience sur notre monorepo mis en place avec Lerna à la Société Générale.

• https://medium.com/@aboodman/in-march-2011-i-drafted-an-article-explaining-how-the-team-responsible-for-google-chrome-ships-c479ba623a1b#.t6rrlku65
• https://www.thoughtworks.com/insights/blog/enabling-trunk-based-development-deployment-pipelines

Front end for Gundam like robots

Titre

• Temps: (en minutes)
• A partir de: (quand veux-tu présenter ?)

Description

Votre description ...

Parcel, un bundler fast & configless

📦 Parcel, un bundler fast & configless

• Temps: 15 minutes
• A partir de: Avril 2018

Description

Lancé en août 2017, Parcel est le bundler qui a récolté le plus de stars GitHub en 2017, devant Webpack. Son nombre total de stars dépasse même maintenant celui de Grunt.

Toute cette hype vient du fait que Parcel présenterait deux avantages majeurs : une grande vitesse de compilation et une configuration automatique, la dernière trend chez les bundlers.

Cette présentation sera l'occasion de le découvrir plus en détails. Nous passerons en revue ses features, son fonctionnement et son utilisation.

Webpack 101

Titre

• Temps: 30 minutes (prez) ~ 1h (handson ?)

Description

Webpack me semble un truc mystique, avec une configuration étrange et une documentation limite limite.

J'aimerai bien que quelqu'un nous explique tout ça.

Monads

Monads

• Temps: ±50min
• A partir de: Décembre

Description

On en entend parler sans vraiment savoir ce que c'est. La plupart du temps les explications viennent de gens qui font du Haskell seuls dans des caves des maths et on lâche la conversation en 2 minutes parce qu'on nous explique de manière absolument limpide qu'avant il faut comprendre qu'en fait ça part juste d'un magma unifère, enfin un semi-groupe quoi, auquel on …. Ouais. Voilà. C'est chiant.
On va voir qu'en fait, comprendre les monads et leur intérêt sans avoir un PhD en théorie des catégories, c'est possible.

beyond JavaScript

Beyond JavaScript

• Temps: 30 - 45 min
• A partir de: Juillet

Description

Avec TypeScript ou Flow nous ajoutons une couche sémantique supplémentaire à notre code. A quoi ça sert ? Comment ça transforme notre perspective sur le développement ?

...et pourquoi aller plus loin (ou non) ?

Quelle valeur peuvent apporter des languages comme PureScript, Reason/OCaml ? Quel est le problème qu'ils prétendent résoudre ? ...et faut-il s'y intéresser ?

(cette présentation est fortement inspirée par le série de talk "taming the meta-language" de Cheng Lou (fb))

Quel est le rôle d'un développeur ?

Titre

• Temps: (en minutes) on n'a qu'à dire 40 minutes ?
• A partir de: Janvier

Description

Pas de technique, pas de présentation de nouvelle lib. Je voudrais juste qu'on prenne un peu de temps pour qu'on échange à propos du rôle de développeur, de votre point de vue et quel rôle on pense que vous avez. Sujet vaste, beaucoup d'axes de discussions possibles :)

Si vous voulez aborder des points particuliers, mettez les en commentaires :)

Bisous

lightening(vdm): When console.log({'e': 'what'}) is throwing error on "ctx.env.push"

When console.log({'e': 'what'}) is throwing error on "ctx.env.push"

• Temps: 5-10 en minutes
• A partir de: Septembre

Description

Mon super code de la mort qui tue de ya 1ans me retourne une vielle erreur genre "Cannot read property 'push' of undefined on ctx.env.push" et la stack pointe sur la code base de node "util.js:601"
VDM

react-router, express, servir des SPA isomorphiques

React isomorphic SPA part 1 : react router and express server

• Temps: 20 min
• A partir de: Mars

Description

• Intro : setup
  • React Router
  • Express Router
  • Match
• Isomorphic implementation use case : cookies
  • express middleware redirect
  • router redirect
• Alternatives ?

Coming next

React isomorphic SPA part 2 : SEO, Helmet, server specific context HOC patterns

Historisation des prez

Kikoo,

C'est pas une proposition, c'est pas une demande. Je soulève juste le fait qu'on enchaîne les bouffes front, les prez et qu'on n'en garde aucune trace.

Du coup est-ce que vous avez des idées pour régler le problème ? (un truc potentiellement cool serait de faire comme le meetup ParisJS qui a son site sur Github ici, chaque speaker le fork, ajoute son talk et fait une PR).

Bisous

Google Cast API

Google Cast API

• Temps: 30 min.
• A partir de: Mars 2017

Description

Présentation à partir d'une appli de démo de l'API Google Cast qui permet de diffuser du contenu sur un Chromecast depuis une web app.

Tests e2e avec nightwatchjs

Tests e2e avec nightwatchjs

• Temps: 20min
• A partir de: Février 2017

Description

Une présentation de nightwatchjs, une libraire qui permet de faire tourner des tests e2e sur un serveur Selenium.
Je vous ferai quelques démos, et ensuite une présentation de l'API pour montrer les possibilités (cliquer sur un élément, remplir des inputs, se connecter à un formulaire de login, vérifier que l'URL de la page est la bonne...).

VEGA : not just another chart library base on d3.js

VEGA : not just another chart library base on d3.js

• Temps: 30 min
• A partir de: Janvier

Description

En dataviz, il y a une pléthore de librairie pour générer les camemberts et autres histogrammes. Mais on peut faire beaucoup mieux que ça. Et lorsque l'on pousse un peu, le nombre de librairie se restreint.

Lors de ce talk, je vous présenterai vega, qui permet pratiquement de tout faire en matière de dataviz, à travers un live coding sur son éditeur en ligne, avec des open data.

Web Crypto API

La cryptographie pour les nuls devs front qui n'ont pas envie de mettre 250ko de libs dans leur appli

• Temps: 45min
• À partir de: pas tout de suite

Description

Une présentation parano où nous verrons comment vérifier la signature d'un JWT en quelques lignes, générer un secret partagé avec ECDH pour établir une connexion absolument pas protégée de l'abominable Homme du Milieu, et que la NSA a complètement infiltré le groupe de travail crypto du W3C.

Le WebRTC

Le WebRTC

Description

La techno a l'air cool, j'ai essayé de faire joujou avec mais impossible de trouver des ressources vraiment didactiques (coucou le codelab).
Du coup si quelqu'un s'est déjà penché sur la question, ce serait top de montrer tout le potentiel de cette techno :)

F*ck sécurité, écrivons un client OAuth 2.0

F*ck sécurité, écrivons un client OAuth 2.0

• Temps: 30min
• A partir de: Mai

Description

N'y connaissant rien en sécurité, j'ai écrit un client OAuth 2.0 pour Société Géniale. Est-ce que c'est grave, docteur ?

En tant que expert de la Société Française d'Expertise Informatique et de Réalisations (a.k.a. SFEIR) je ferai semblant de connaitre les sujets suivants :

• OAuth1.0, OAuth2.0, OpenID, ... c'est quoi tout ça et pourquoi Eran Hammer ragequit ?
• Comment ca marche ? Je vous montrerai des diagrammes et ferai du live coding. Vous allez rien comprendre !
• Finalement on parlera des différents vecteurs d'attaque et qu'est-ce qu'on doit mettre en place pour se protéger hijacker les élections americaines.

A faire juste après #28. Mais contrairement à Siegfried et afin de maintenir mon image d'expert je ne peux pas me permettre d'avoir des poneys dans mes slides, donc il y aura des gifs Sailor Moon.

const bouffeFront = new Observable<RxJS>()

Titre

• Temps: 30
• A partir de: Avril

Description

Présentation de RxJS et du reactive programming.

Introduction à WebGL

Introduction à WebGL

• Temps: 45min
• A partir de: Octobre

Description

Une petite aventure dans le monde de shaders et algèbre linéaire qui se cache à l'intérieur de votre navigateur web. On parlera de l'API WebGL et du GLSL. Si on aura le temps, on écrira un petit jeu video. Tout le monde pourra jouer! 🚀

Intro à Vue.js

Intro à Vue.js

• Temps: 30
• A partir de: février

Description

Vue.js is SO HOT RIGHT NOW.

J'ai découvert le truc il y a quelques mois, pour avoir joué rapidement avec, il me semble un bon mix entre Angular et React. La version 2 va encore accentuer tout ça (virtual-dom all the things !).

Du coup au programme, il y aura:

• une présentation rapide de Vue
• un peu d'historique
• présentation des nouveautés de la v2 (ou pas, si c'est sorti d'ici là)
• exemples de code (pas chaud chaud pour du live coding mais pourquoi pas)

Gogo multi-package repositories (aka monorepo)

Gogo multi-package repositories (aka monorepo)

• Temps: 5 en minutes
• A partir de: December

Description

Share experience of using multi-package repositories (aka monorepo) with lerna comparing to multi repositories package with "ma bite et mon couteau" (oui oui c'est vrai package )

LUIS : Le chat bot de Microsoft !

LUIS : Le chat bot de Microsoft !

• Temps: 30 min
• A partir de: Juin

Description

Les chatbots "intelligent" sont en plein essor depuis quelques temps. Microsoft, IBM, Google et d'autres ont chacun une api à présenter !
Je vais vous présenter le concept général du chatbot (qui est assez similaire pour tout le monde) puis je ferai une démonstration de de l'utilisation du chatbot de Microsoft, LUIS.

La spécification JSON-API

Titre

• Temps: 20 min.
• A partir de: Quand vous voulez

Description

Présenter rapidement la spec JSON-API qui tend à formaliser le JSON reçu par le front, et expliquer les avantages qui en découlent.

Je développe pour mon client actuel un client JSON-API sous angular2 et @ngrx/store.
On pourrait que je le rende open-source suite à la prés.

Les scripts NPM, nouvelle hype des usines de dev front ou réelle bonne idée ?

Les scripts NPM, nouvelle hype des usines de dev front ou réelle bonne idée ?

• Temps: 20-30 (en minutes)
• A partir de: Octobre

Description

Au début fut Grunt, puis Gulp. Maintenant tout le monde passe aux scripts NPM.
L'objectif de cette présentation sera de :

• Comprendre comment fonctionnent les scripts NPM
• Quels avantages ils apportent
• Quels peuvent être les inconvénients par rapport à des solutions comme Grunt ou Gulp
• Comment migrer de manière douce d'une usine de dev existante à des scripts NPM
• D'autres trucs très marrants à faire avec les scripts NPM

Remarque

J'ai envie de faire une prez un peu plus interactive, je vais monter un repo "tutoriel" pour qu'on expérimente ensemble. Je vous conseille de prendre votre ordi 😄

Les performances dans les progressive Web App

Les performances dans les progressive Web App

• Temps: 30 minutes
• A partir de: septembre

Description

Un petit tour des possibilités pour booster notre application web !

How & why use Redux with Angular 1

How & why use Redux with Angular 1

• 20/30min
• A partir de: Septembre

Description

Redux ça a l'air sympa, mais concrètement comment peut-on l'utiliser en dehors de React, et en particulier sur une stack actuelle, voire vieillissante, par exemple Angular 1.

Comment gérer les actions, les reducers, où dispatcher les actions et comment connecter ses composants ?

Comment essayer de rendre le tout performant ? On peut essayer avec l'utilisation des selectors via la librairie reselect (https://github.com/reactjs/reselect).

Je vous présenterai quelques idées de ce qu'on a implémenté dans notre mission chez Meetic avec @olegskl

Typage fort, faible, dynamique, statique, et plus si affinité

Typage fort, faible, dynamique, statique, et plus si affinité.

• Temps: 20 minutes
• A partir de: Octobre

Description

Comprenons tout ce qui tourne autour de ces notions avec des exemples dans plusieurs langages :) !

const bouffeFront = new Observable<BaconJS>() #29

Bacon.js

• Temps: comme tu voulez
• A partir de: comme tu voulez

Description

Rx n'est pas le seul, il y a aussi Bacon.js !

Notes:

• En fait les prez Rx + Angular ça ne m'intéresse pas, je veux un truc sur le FRP et les Observables parce que je ne maîtrise pas le sujet. Le couplage à un framework, c'est annexe.
• Si c'est pour suivre les clics sur un bouton ça ne m'intéresse pas non plus, je veux des exemples où ça s'applique pour du vrai.

Variables CSS / Custom Properties

Variables CSS / Custom Properties

• Temps: 30 min
• À partir de: demain

Description

Vous en avez entendu parler l'an dernier et vous vous êtes dit que vous étiez très bien avec votre préprocesseur CSS, du coup vous avez un peu oublié de tester cette petite merveille ?

Pour vous économiser l'effort de lire la spec, je vous présente les variables CSS (alias Custom Properties) en détail : comment ça s'écrit, quelles variétés de café ça sait faire, pourquoi c'est de la balle, et aussi les quelques faiblesses de la spec actuelle.

Validation d’objets en JavaScript

Validation d’objets en JavaScript

• Temps: 20-30 (en minutes)
• A partir de: Octobre

Description

La validation d’objets est une technique très répandue dans d’autres écosystèmes, et on l’utilise généralement pour valider à peu près tout, notamment les saisies utilisateur via les fonctionnalités offertes par notre ORM préféré. Seulement, dans l’écosystème JavaScript, on est un peu plus livré à soi-même, peu importe que notre application soit prévue pour un contexte Node.js ou un contexte navigateur.

Côté Node.js, on a, par exemple, des tonnes de solutions simulant ces fonctionnalités mais elles sont toutes spécifiques à un environnement donné : Sequelize pour les SGBDR, Mongoose pour MongoDB, etc, et on ne peut pas réutiliser une même technologie de validation pour d’autres environnements. Et si vous avez le malheur de vouloir changer de base de données, vous allez devoir réécrire toutes vos règles de validation métier alors que celles-ci n’ont pas changé. Par ailleurs, si vous devez valider des données telles que des retours d’API tierces, ou des fichiers JSON, vous devez généralement bricoler votre propre solution.

Côté navigateur, c’est encore plus n’importe quoi et on trouve de tout. Ce qui fait que bien souvent on bricole et improvise des solutions un peu bancales pour faire des validations un peu custom et complexes non supportées par l’API HTML5 Form. Ou alors, on utilise la technique imposée par notre framework web, au risque de devoir tout jeter le jour où on change de framework web.

Par ailleurs, que se passe-t-il si on développe un front-end et un back-end en JavaScript en parallèle ? Doit-on forcément écrire toute ou partie des règles de validation pour les deux contextes d’exécution ? Ne peut-on pas tout simplement réinjecter certaines des règles définies pour un contexte Node.js dans un contexte navigateur ? Si oui, à quel coût ?

TL;DR

L’objectif de cette présentation est d’introduire les systèmes de validation d’objets en JavaScript (avec un gros focus sur JOI), leur intérêt, leur coût d’intégration, et comment on peut les mettre en oeuvre à la fois dans des contextes Node.js et navigateur.

Tiens, comment ça marche un navigateur ?

Tiens, comment ça marche un navigateur ?

• Temps: 45 minutes
• A partir de: Novembre

Description

Surprise, mais vous l'aurez compris rapidement, on va voir ensemble comment un navigateur fonctionne.
Nous prendrons le cas de chromium pour répondre aux questions suivantes :

• Blink c'est quoi ? Comment ça marche ?
• V8 c'est quoi exactement ?
• Que fait chromium du coup ?

Essayons d'être fonctionnel

Essayons d'être fonctionnel

• Temps: 30-45 minutes
• A partir de: Novembre

Description

Le mot clé "fonctionnel" on l'entend partout et à toutes les sauces. Personnellement, j'adore la théorie et la vérité surtout :). Du coup, je vous propose de parler de fonctionnel en reprenant l'ensemble des concepts mathématiques afin de bien tout comprendre.
Ne vous inquiétez pas, tout sera expliqué, pas besoin d'un niveau excellent en maths.

On verra bien si c'est juste map->filter->reduce ;) !

Un front dans un monde de Data Scientist

Un front dans un monde de Data Scientist

• Temps: 30
• A partir de: Septembre

Description

J'ai la chance de pouvoir travailler chez Sfeir sur des nouveaux sujets de data science et de machine learning. J'aimerai prendre quelques minutes avec vous pour partager ces connaissances et vous faire une rapide introduction ludique à ces gros mots "Machine Learning" et "Neural Network" et vous expliquer les concepts sous-jacents.

VueJS par Cyril Balit

@cbalit Je te laisse remplir 🎉

semver, loooooooool

Titre

• Temps: 15 minutes
• A partir de: avril/mai

Description

• Semantic Versioning, quoi c'est ?
• Pourquoi c'est bien, ou pas ? On a quoi comme alternative ?
• Le tout en 15 minutes semi-troll histoire de rigoler un peu ! Hein ? Aller si, restez... 😅

Présentation du nouveau debugger Firefox

Titre

• Temps: 20-30 minutes
• A partir de: Octobre

Description

On aime tous les devtools Chrome, les devtools Firefox un peu moins. Le debugger JS datant un peu, les braves gens de Mozilla ont lancé une refonte sous la forme d'un nouveau projet (dispo en open source ici).

Au programme :

• Démo du debugger (sur différentes targets, comme Chrome, Firefox and NodeJS)
• Petite présentation de l'architecture du projet, de comment le remote debugging sur différentes plateformes cibles fonctionne, toussa toussa quoi

REX - Modern Workflow

REX - Modern Workflow

• Temps: (30/45)
• A partir de: ready

Description

Retour d'EXpérience des choix techniques et de la stack mise en place chez mon client, la BPI.

Au programme :

• Angular
• ReactiveX RxJS, @ngrx/store
• Progressive Web App Offline first strategy
• Intégration continue Github outil professionnel ...aussi
• Tests unitaires tips & snippets
• i18n tools and painless workflow 🇧🇦🇩🇲
• Outils d'échange avec les équipes Design alternatives à Photoshop 🎨
• Gitflow stratégie de branches et releases
• JSON-API
• Linting Uniformalisation des sources
  🎉

var, let, const, temporal dead zone

Titre

• Temps: 15 minutes ?

Description

Parce que ça fonctionne pas tout pareil, et que «temporal dead zone» c'est super cool comme nom.

Angular Universal

Angular 2 Universal

Ce talk est une présentation du projet Angular 2 Universal. Universal est un module officiel d'Angular 2 permettant d'ajouter le support du server-rendering à vos web apps. En d'autres termes, avec Angular Universal il sera possible d'éxecuter une même application Angular 2 côté client et côté serveur. Avant, nous avions l'isomorphisme, avec Angular 2 nous avons l'universalisme. Si tu veux savoir comment Angular 2 gère l'universalité ne rate pas cette de session.

Temps : 30 (en minutes)

Présentation de gows

gows

Temps: 20~30 minutes
A partir de: juillet

Description

Présentation d'un projet en golang pour jouer avec des repos git.

On reviendra sur quelques particularités de go, sur les difficultés que j'ai rencontrées.

Le front en 2017

Le front en 2017

• Temps: ∞
• A partir de: janvier

Description

Sur la fin de 2016, beaucoup de choses sont arrivées:

• Angular 2, l'annonce de la fin d'angular 2, la future arrivée d'angular 4...
• React qui continue son chemin
• Vue 2 qui monte en puissance...
• Les promesses annulables annulées...
• TypeScript qui continue de prendre du terrain, Flow qui est plus discret
• La sortie de RxJS 5...

L'idée de cette non présentation serait de discuter ensemble de ce qui pourrait se passer dans le JS (du langage aux frameworks) pour 2017, de sortir quelques possibilités de ce futur proche et de pondre un article pour le blog de Sfeir, le tout en restant zen 😄

First!

<iframe width="420" height="315" src="https://www.youtube.com/embed/ciG-Xs7mBwU" frameborder="0" allowfullscreen></iframe>

Stop au crack de photoshop

Stop au crack de photoshop : Affinity (Photo ou Design)

• Temps: (~5/10 min)
• A partir de: ( Prochaine Bouffe ou je peux venir )

Description

Outils qui à l'air très pratique, pour ouvrir des maquettes PSD sans avoir à cracker photoshop.

Ce serait bien que qq'un plus habitué que moi de photoshop et de l'intégration de maquettes fasse aussi un petit retour.

Qu'est-ce que contient vraiment NPM

Qu'est-ce que contient vraiment NPM ?

NOTE : C'est encore au stade embryonnaire.

• Temps: (en minutes) ?
• A partir de: (quand veux-tu présenter ?) Mai ?

Description

NPM c'est fun, c'est cool, on peut publier ce qu'on veut toussa toussa. Mais qu'est-ce que ça contient. Et, pour reprendre les mots du grand sage @SiegfriedEhret "est-ce que NPM c'est devenu une poubelle ?"

Cet article m'a bien donné envie de faire la même chose et de sortir d'autres stats un peu plus poussées.

Comme cette (peut-être) prez est au stade de brouillon, j'aimerais savoir si vous aviez des idées de stats intéressantes qu'on pourrait en sortir.

Proposez vos idées en commentaires 😄 ⏬

SystemJS Stargate SG-25

SystemJS Stargate SG-25

• Temps: 10min
• A partir de: Décembre

Description

Introduction to SystemJS capacities to require sources from all over the internet !
Live coding on plunker.

Introducing the flux architecture in A2 with ngrx/store - The store as an observable of application state

Introducing the flux architecture in Ax with ngrx/store - The store as an observable of application state

• Temps: ~ 30 (+/- 10) mins
• A partir de: fin juin.

Description

Derrière l'emblématique Redux se cache une architecture nommée Flux dont l'application ne se limite pas qu'à React. Lors de cette présentation, je vous propose de découvrir ngrx/store, une implémentation de Flux pour Angular X basée sur les observables rxjs.

*Siegfriedify* the view and the page will boot faster

Siegfriedify the view and the page will boot faster

• Category: performance
• Temps: 10 minutes
• A partir de: Demain

Description

This presentation is about the result of my yesterday audit on the Sfeir People website. It'll be the occasion to present Angular Benchpress and have a discussion about the necessity of automatic performance testing and the requirements to be able to do it.

See : https://github.com/Sfeir/sfeirpeople/issues/31

Maitriser les Chrome devtools

Maitriser les Chrome devtools

• Temps: 30 minutes
• A partir de: Décembre

Description

Apprenons comment utiliser les onglets :

• Timeline
• Network
• Profiles
• Application

Sécuritaÿ ! CSRF dans les frameworks

Sécuritaÿ ! CSRF dans les frameworks

• Temps: 20 minutes
• A partir de: avril c'est cool

Description

Une petite prez vite fait avec:

• c'est quoi les attaques csrf ?
• comment on s'en protège dans les différents frameworks
• des poneys

\o/ Lint all the things \o/

\o/ Lint all the things \o/

• Temps: 30-40min (prez à 2 avec @tonygoussot )
• A partir de: Octobre (@tonygoussot pas là en septembre)

Description

On parle pas mal de lint en ce qui concerne le code JavaScript (ESLint ...) mais on ne pense pas forcément à linter son code CSS, voir HTML 😎
Quelques sujets à discuter :

• Solutions pour linter du JavaScript (ESLint, standard...)
• Solutions pour linter du CSS, SASS, postCSS ...
• Solutions pour linter du HTML
• Intégration dans le workflow de dev (pimp my githooks)