Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: heading articles #1074

Merged
merged 1 commit into from
Mar 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ The test checks that the method is actually adding an entry to the astronaut arr
But we are not protected enough : what would happen if the *addAstronaut* method changed ?
Would our test be sufficient to detect the regression ?

### **Mutation Tests**
### Mutation Tests

In order to detect breaches in your unit tests, one solution exist : **mutation tests**.
The principle is very simple : alter the source code to check that associated tests would fail accordingly.
Expand Down
2 changes: 1 addition & 1 deletion _articles/en/2016-12-21-understanding-ssltls-part-1.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ In order to do that, this subject will be decomposed in 5 parts, each of them po

First of all, a little history lesson: fasten your seat belt, let's start with part 1!

## **So, what is it?**
## So, what is it?

SSL and TLS are cryptographic protocols that provide communications security.

Expand Down
6 changes: 3 additions & 3 deletions _articles/en/2017-01-12-mobile-development-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Today I am going to talk about 3 technologies that I chose for several reasons:
- Because they are the most common in making mobile applications and their communities are most active;
- I have already used these technologies and I want to give real feedback on them. Regarding native mobile development, I chose iOS and not Android (I explain hereafter why, no spoilers).

## **Ionic:**
## Ionic:

Ionic is a JavaScript framework based on AngularJS for the web application part of the framework, and on Cordova for the native application development.

Expand Down Expand Up @@ -96,7 +96,7 @@ But Ionic has weaknesses as well:

**Ionic is a great way to build small applications quickly. But as soon as you want to widen the scope of features, or to have proper performances, it starts biting. I haven't tested the version 2, but I know that they have made some improvements.**

## **React Native:**
## React Native:

As its name suggests, React Native is a variation of React (driven by Facebook in 2015). Its goal is to re-use as much code as possible between different platforms.

Expand Down Expand Up @@ -136,7 +136,7 @@ From my point of view and my experience, here are the weaknesses of React Native

**React Native seems to be the perfect approach for creating applications of any type. Nevertheless, it being young means that it isn't mature enough to be used to building big application that may demand particular treatments. But I recommend following its evolution closely.**

### **Native:**
### Native:

Obviously, to build an application there is nothing better than native development.

Expand Down
26 changes: 13 additions & 13 deletions _articles/fr/2015-12-22-dotjs-2015-on-y-etait-encore.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,21 +58,21 @@ L’événement s’étalant sur toute la journée, voici donc un tour d’horiz

![](https://c1.staticflickr.com/1/738/23656479935_b63777fc06_k.jpg)

## **Modern Async JS** par [*Christophe Porteneuve*](https://twitter.com/porteneuve)
## Modern Async JS par [*Christophe Porteneuve*](https://twitter.com/porteneuve)

Christophe Porteneuve nous présente ici plusieurs problématiques liées à l’utilisation de callback et du code asynchrone. Le fameux “Callbackhell”, qui comme son nom l’indique, peut vite devenir infernal, autant sur la compréhension que sur la maintenabilité du code. Celui-ci étant parfois difficile à prendre en main, les générateurs et les promises peuvent déjà nous y aider, en attendant les [fonctionnalités await/async d’ES7](https://jakearchibald.com/2014/es7-async-functions/).

[Slides](http://tdd.github.io/dotjs-async/)

## **Hyperdrive: p2p hash sharing tool** par [*Mathias Buus*](https://twitter.com/mafintosh)
## Hyperdrive: p2p hash sharing tool par [*Mathias Buus*](https://twitter.com/mafintosh)

Mathias Buus, gros contributeur sur npm (Pas loin de 400 modules !), nous présente son dernier module: Hyperdrive. Un module de partage de données via navigateur avec un système de hashage comme l’utilise git.

Dépôt Github du projet : [https://github.com/mafintosh/hyperdrive](https://github.com/mafintosh/hyperdrive)

[Slides](https://github.com/mafintosh/slides/blob/gh-pages/dotjs-2015/README.md)

## **Dealing with garbage** par [*Samuel Saccone*](https://twitter.com/samccone)
## Dealing with garbage par [*Samuel Saccone*](https://twitter.com/samccone)

Samuel Saccone, développeur chez Google, aborde ensuite le sujet épineux des fuites mémoire et des performances (Illustré par quelques screenshots assez sympathiques). S’en suit une démonstration de l’utilisation de la console Chrome poussée, afin de détecter/fixer ces problèmes. Puis de la présentation de son outil de détection de fuite mémoire: [Drool](https://github.com/samccone/drool).

Expand All @@ -82,7 +82,7 @@ Présentation drôle et très bien animée pour un sujet pas super passionnant d

À lire également, une présentation très intéressante d’Addy Osmani sur l’utilisation de la console Chrome [ici](http://addyosmani.com/blog/chrome-devtools-deepdive/).

## **HTTP/2 is here, now let's make it easy** par [*Rebecca Murphy*](https://twitter.com/rmurphey)
## HTTP/2 is here, now let's make it easy par [*Rebecca Murphy*](https://twitter.com/rmurphey)

Constat sur HTTP/2 aujourd’hui: Ça à l’air cool, mais on ne s’en sert pas. Le principal problème étant la compatibilité des serveurs/hébergeurs/navigateurs, qui ne facilitent pas son utilisation pour le moment. J’avoue ne pas avoir compris la totalité de la présentation. Si vous en savez plus, je suis preneur ;)

Expand All @@ -96,27 +96,27 @@ Constat sur HTTP/2 aujourd’hui: Ça à l’air cool, mais on ne s’en sert pa

Après la pause déjeuner, on reprend en douceur avec une série de “Lightining talks” au format court de 5-10 minutes, dont 2 qui ont particulièrement retenus mon attention :

### **Publishing ES6 modules today** par [*Laurent Voyer*](https://twitter.com/rmurphey)
### Publishing ES6 modules today par [*Laurent Voyer*](https://twitter.com/rmurphey)

Laurent Voyer partage avec nous les meilleurs moyens de publier des modules ES6. La meilleure solution étant de pusher nos modules sur npm ou sur un CDN (avec une retro-compatibilité ES5). Un peu court de résumer tout cela en 10min, mais le principe mérite cependant qu’on s’y intéresse plus longuement.

[Slides](http://slides.com/vvo/authoring-and-publishing-es6-modules-today-dotjs-2015)

### **Mobile debugging with VorlonJS** par [*Etienne Margraff*](https://twitter.com/@meulta)
### Mobile debugging with VorlonJS par [*Etienne Margraff*](https://twitter.com/@meulta)

Etienne Margraff nous présente son outil de debug cross browser: VorlonJS
Après avoir préalablement ajouté un script à notre application, il est possible de debugger depuis une interface VorlonJS à distance. Prometteur. Prochaine étape, le debug d’application NodeJS.

[Slides](http://fr.slideshare.net/emargraff/dotjs-lightning-talk-vorlonjs)

## **Practical ES6** par [*Nicolas Bevacqua*](https://twitter.com/nzgb)
## Practical ES6 par [*Nicolas Bevacqua*](https://twitter.com/nzgb)

Tour d’horizon sur les fondamentaux de ES6, avec une liste d’exemples expliqués de la nouvelle mouture d’EcmaScript. Rien de vraiment nouveau mais une piqûre de rappel nécessaire, détaillée dans [son article](https://ponyfoo.com/articles/es6).
Si vous souhaitez d’ores et déjà utilisez ES6 dans vos projets, des outils comme Babel vous aideront à prendre en main la nouvelle syntaxe le temps de sa mise en place progressive.

[Slides](https://speakerdeck.com/bevacqua/practical-es6-for-the-modern-javascript-tinkerer)

## **Reactive Javascript** par [*André Staltz*](https://twitter.com/andrestaltz)
## Reactive Javascript par [*André Staltz*](https://twitter.com/andrestaltz)

Sans doute l’une des présentations les plus intéressantes de la journée.
André Staltz y présente de manière très simple et précise la programmation reactive au travers de [RxJS](https://github.com/Reactive-Extensions/RxJS). Ne connaissant pas le sujet, j’ai trouvé l’approche claire et les exemples particulièrement parlants, notamment le cycle de vie de deux variables liées et comment l’une affecterait l’autre, via la fonctionnalité “Observable”, sorte de promise améliorée.
Expand All @@ -127,7 +127,7 @@ Pendant ce temps-là, Wilson se promène un peu.

> Just made a new friend from [@Eleven\_Labs](https://twitter.com/Eleven_Labs) [\#dotJS](https://twitter.com/hashtag/dotJS?src=hash) [pic.twitter.com/dV5PjBm0qA](https://t.co/dV5PjBm0qA) — Adrien Trauth (@Nioufe) [7 Décembre 2015](https://twitter.com/Nioufe/status/673788757640921088)

## **WebRTC** par [*Eric Schoffstall*](https://twitter.com/contrahacks)
## WebRTC par [*Eric Schoffstall*](https://twitter.com/contrahacks)

WebRTC est en passe de devenir un nouveau standard pour tout ce qui est connexion peer-to-peer entre navigateurs sans passer par un serveur, celui-ci étant assez attendu par la communauté vu les possibilités qu’il propose (Communication par voix ou vidéo par exemple). Cependant, seuls Chrome, Firefox et Opera proposent cette implémentation ([Voir en détails](http://caniuse.com/#search=webrtc)).
Après avoir travaillé sur la compatibilité sur chaque navigateur (y compris IE9 et mobile) et en regroupant les différentes solutions apportées sur chacune des plateformes, Eric annonce la création de sa nouvelle librairie [rtc-everywhere](https://github.com/contra/rtc-everywhere). Magique !
Expand All @@ -140,17 +140,17 @@ En bonus: Eric postule également au poste de maire de San Francisco...

![](http://i.giphy.com/KTHFxuEtrVoGI.gif)

## **Jade > Pug** par [*Forbes Lindesay*](https://twitter.com/forbeslindesay)
## Jade > Pug par [*Forbes Lindesay*](https://twitter.com/forbeslindesay)

Forbes Lindesay, développeur chez Facebook, nous présente le fonctionnement de son moteur de template HTML “Jade” (Renommé “Pug” pour des questions légales, il me semble). Nous utilisons aujourd’hui de plus en plus ce genre d’outils appelé “transpiler”, notamment Babel ou CoffeeScript, et il est toujours intéressant de comprendre comment ce genre de parser fonctionne. Il est également possible de créer ses propres plugins avec un système de pipe, une bonne nouvelle pour ceux qui l’utilisent.

## **Teaching Kids to Code** par [*Tim Caswell et son fils de 9 ans*](https://twitter.com/creationix)
## Teaching Kids to Code par [*Tim Caswell et son fils de 9 ans*](https://twitter.com/creationix)

Présentation amusante du développement pour plus jeunes, et sur ce qui est possible en dehors d’un navigateur web.

[Slides](https://gist.github.com/creationix/507719a418be365c7631)

## **Pocked sized JS** par [*Henrik Joreteg*](https://twitter.com/HenrikJoreteg)
## Pocked sized JS par [*Henrik Joreteg*](https://twitter.com/HenrikJoreteg)

Dans un contexte de plus en plus “Mobile-first”, Henrik Joreteg nous incite ici vivement à penser “Mobile everywhere”. Les performances de nos devices et la qualité de notre connexion lorsque nous développons nos applications n’étant pas forcement identiques à celles de l’utilisateur final.

Expand All @@ -163,7 +163,7 @@ Je vous incite vivement à voir sa présentation, une très bonne surprise !

[Slides](https://slides.joreteg.com/dotjs/)

## **No title** par [*Brendan Eich*](https://twitter.com/brendaneich)
## No title par [*Brendan Eich*](https://twitter.com/brendaneich)

Enfin pour terminer la journée en beauté, Brendan Eich, le créateur de Javascript. A vrai dire, il était assez compliqué de suivre, tellement les sujets étaient nombreux: FirefoxOS, Tizen, asm.js...
S’en suivit une petite démonstration de jeux Facebook développés en Javascript (Notamment un avec des poulets tueurs de zombies…), le résultat est assez impressionnant par sa fluidité.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Je vous propose de voir ensemble un exemple très simple et les différentes ét

---

### **1 Mise en place de la partie Back-end**
### 1 Mise en place de la partie Back-end

#### 1.1 Installation d'une application Symfony3

Expand All @@ -65,7 +65,7 @@ bin/console server:start

Viens ensuite l'installation et la configuration de certains bundles incontournables lorsque l'on veut créer une API. Nous sauterons volontairement l'étape du "composer require" et de la déclaration des bundles dans le Kernel de Symfony pour passer directement à la configuration.

##### **FOSRestBundle**
##### FOSRestBundle

Ce bundle va nous permettre d'utiliser des routes API automatiques ainsi que de retourner des réponses au format Json à notre client Angular2 avec un minimum de configuration :

Expand All @@ -88,7 +88,7 @@ app:

**[+ d'information sur la documentation](http://symfony.com/doc/current/bundles/FOSRestBundle/index.html)**

##### **NelmioCorsBundle**
##### NelmioCorsBundle

Continuons ensuite avec le Bundle, qui va nous permettre de faire des requêtes Ajax sur l'API, étant donné que nos deux applications se trouvent sur deux domaines différents :

Expand All @@ -104,11 +104,11 @@ nelmio_cors:

*Note : Nous avons ici autorisé notre future application Angular2 ainsi que le header "authorization" qui nous servira à nous authentifier. Patience, on y est bientôt :)*

##### **JMSSerializerBundle**
##### JMSSerializerBundle

Ce bundle va nous permettre de sérialiser les données renvoyées par notre API. Aucune configuration n'est nécessaire dans le cadre de cet article. Nous utiliserons JMSSerializer plus tard, directement dans notre PostController.

##### **LexikJWTAuthenticationBundle**
##### LexikJWTAuthenticationBundle

Enfin, last but not least, le bundle qui va nous servir à sécuriser l'accès à nos données Symfony via un token d'authentification. Je vous laisse lire la **[documentation](https://github.com/lexik/LexikJWTAuthenticationBundle/blob/master/Resources/doc/index.md#getting-started)** officielle qui est très claire. Il vous suffit vraiment de suivre les étapes point par point.

Expand Down Expand Up @@ -296,7 +296,7 @@ C'est le cas ? Très bien, nous allons pouvoir commencer la partie front-end :)

---

### **2 Mise en place de la partie Front-end**
### 2 Mise en place de la partie Front-end

#### 2.1 Création de l'application Angular2 via Angular CLI

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ L'idée derrière le modèle C4 est de laisser peu de place à l'interprétation

On identifie 4 niveaux d'abstractions

### **Niveau 1**: System **Context** _(Contexte Système)_
### Niveau 1: System **Context** _(Contexte Système)_

![Modèle C4: Vue Contexte Système]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/system-context.png)

Expand All @@ -139,7 +139,7 @@ La boîte centrale matérialise un système logiciel, entouré des ses utilisate
**Elements de support**: Des personnes, des systèmes en relation avec le système observé.
**Audience**: Tout le monde.

### **Niveau 2**: **Container** _(Conteneur)_
### Niveau 2: **Container** _(Conteneur)_

![Modèle C4: Vue Conteneur]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/containers.png)

Expand All @@ -161,7 +161,7 @@ Un conteneur est un élément qui peut être exécuté/déployé individuellemen
**Éléments de support**: Des personnes, des systèmes en relation avec les conteneurs observés.
**Audience**: Intervenants techniques.

### **Niveau 3** : **Component** _(Composant)_
### Niveau 3 : **Component** _(Composant)_

![Modèle C4: Vue Composant]({BASE_URL}/imgs/articles/2019-12-12-visualiser-l-architecture-de-vos-projets/component.png)

Expand All @@ -177,7 +177,7 @@ On y retrouve :
**Elements de support**: Des personnes, des conteneurs, et des systèmes externes directement attachés aux composants observés.
**Audience**: Architectes et développeurs.

### **Niveau 4**: **Le Code**
### Niveau 4: **Le Code**

Pour finir, en zoomant sur un composant, on accède à son implémentation.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ Cette méthodologie est intéressante car elle permet de structurer le contexte
L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux individus et entreprises ont pu expérimenter les pratiques à favoriser et à éviter, et ainsi permis de constituer des premières recommandations globales d’écriture. Bien que nombreuses, nous verrons ici **5 points principaux** qui vous permettront de concevoir des contenus rédactionnels davantage adaptés à vos utilisateurs.


#### **Commencez par le plus important**
#### Commencez par le plus important
- Positionner les informations principales dans les 2 premiers paragraphes permet de [favoriser l’accès aux informations recherchées par les utilisateurs](https://www.nngroup.com/articles/website-reading/)
- Au sein des paragraphes aussi, commencez par les informations principales puis présentez le détail afin de leur permettre d’identifier rapidement les informations essentielles à votre discours

Expand All @@ -90,7 +90,7 @@ L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux



#### **Divisez les contenu en sous-groupes**
#### Divisez les contenu en sous-groupes
- La division en sous-groupe [facilite le scanning ainsi que la mémorisation d’information](https://www.nngroup.com/articles/chunking/)
- Chaque sous-groupe d’informations doit contenir un ensemble limité de concepts, distincts les uns des autres

Expand All @@ -99,7 +99,7 @@ L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux



#### **Utilisez des titres et sous-titres**
#### Utilisez des titres et sous-titres
- Les titres et sous-titres doivent être utilisés pour [faciliter l'identification de vos groupes d’informations](https://www.nngroup.com/articles/layer-cake-pattern-scanning/)
- Pour être les plus efficaces, ils doivent être :
- Visibles : Faites ressortir vos titres et sous-titres par rapport au corps de texte, mais pas trop pour éviter d’être perçu comme une bannière publicitaire
Expand All @@ -112,7 +112,7 @@ L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux



#### **Soyez concis**
#### Soyez concis
- Les textes doivent être rédigés de façon concise pour être mieux compris, lus plus rapidement et plus appréciés par les utilisateurs (cf. Morkes & Nielse, 1997, cités précédemment)
- Une règle de pouce est d’[éviter les phrases au-delà de 14 mots](https://medium.com/@scottydocs/what-is-the-perfect-sentence-length-4690ce8d5048) - attention toutefois, ne faites pas que des phrases de 14 mots pour éviter un ton trop monotone

Expand All @@ -121,7 +121,7 @@ L’UX consacrée aux textes n’est pas un domaine récent en soi. De nombreux



#### **Homogénéisez l’expérience**
#### Homogénéisez l’expérience
- Il est important de conserver une même façon de s’adresser à l’utilisateur, mais aussi de réemployer les mêmes termes pour parler d’une fonctionnalité ou d’un objet pour [faciliter la reconnaissance et le rappel de ces éléments](https://www.nngroup.com/articles/recognition-and-recall/) durant l'exploration
- La communication avec l’utilisateur doit être cohérente sur l’ensemble du produit

Expand Down
Loading
Loading