');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--summary{--background-color-title-reminder: rgba(0, 176, 255, .1);--border-or-icon-color-reminder: #00b0ff}.reminder--summary .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--info{--background-color-title-reminder: rgba(0, 184, 212, .1);--border-or-icon-color-reminder: #00b8d4}.reminder--info .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--tip{--background-color-title-reminder: rgba(0, 191, 165, .1);--border-or-icon-color-reminder: #00bfa5}.reminder--tip .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--success{--background-color-title-reminder: rgba(0, 200, 83, .1);--border-or-icon-color-reminder: #00c853}.reminder--success .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--question{--background-color-title-reminder: rgba(100, 221, 23, .1);--border-or-icon-color-reminder: #64dd17}.reminder--question .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--warning{--background-color-title-reminder: rgba(255, 145, 0, .1);--border-or-icon-color-reminder: #ff9100}.reminder--warning .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--failure{--background-color-title-reminder: rgba(255, 82, 82, .1);--border-or-icon-color-reminder: #ff5252}.reminder--failure .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--danger{--background-color-title-reminder: rgba(255, 23, 68, .1);--border-or-icon-color-reminder: #ff1744}.reminder--danger .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--bug{--background-color-title-reminder: rgba(245, 0, 87, .1);--border-or-icon-color-reminder: #f50057}.reminder--bug .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--example{--background-color-title-reminder: rgba(124, 77, 255, .1);--border-or-icon-color-reminder: #7c4dff}.reminder--example .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.reminder--quote{--background-color-title-reminder: rgba(158, 158, 158, .1);--border-or-icon-color-reminder: #9e9e9e}.reminder--quote .reminder__title:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8, ');mask-image:url('data:image/svg+xml;charset=utf-8, ')}.search-field{position:relative}.search-field__input{width:100%;padding:var(--spacing-xs) calc(var(--spacing-xxl) + var(--spacing-xl)) var(--spacing-xs) var(--spacing-xs);font-family:var(--font-family-base);font-size:var(--font-size-input, var(--typography-text-xs-font-size));line-height:var(--line-height-large);border-width:var(--border-width-input-search-field, 2px);border-style:solid;border-color:var(--border-color-input-search-field, transparent);border-radius:22px;background-color:var(--color-secondary)}.search-field__input::-moz-placeholder{color:var(--color-primary)}.search-field__input,.search-field__input::placeholder{color:var(--color-primary)}.search-field__input:focus-visible{outline:none;--border-width-input-search-field: 2px;--border-color-input-search-field: var(--color-primary);box-shadow:0 4px 30px #0000000f}.search-field__actions-container{position:absolute;top:0;right:0;height:100%;padding:var(--spacing-xxs) 0}.search-field__separator-button{height:100%;width:1px;background-color:var(--color-grey)}.search-field__button-action{background:transparent;border:none}.not-found-block__background{height:135px;width:100%;background-image:url(/imgs/not-found.png);background-repeat:no-repeat;background-position:center}.category-intro-block{background-image:var(--background-image, url(/imgs/category-intro-block-mobile.jpg));background-size:cover;background-position:bottom}.category-intro-block__container{background-color:var(--color-primary);opacity:.9}@media screen and (min-width: 1001px){.category-intro-block{--background-image: url(/imgs/category-intro-block-desktop.jpg)}}.home-intro-block{background-color:#fff}@media screen and (max-width: 1001px){.home-intro-block__container{max-width:90vw;margin:var(--spacing-xl) auto}}@media screen and (min-width: 1001px){.home-intro-block__container{margin-left:5vw}}@media screen and (min-width: 1001px){.home-intro-block__background{background-image:url(/imgs/home-intro-block.png);background-repeat:no-repeat;background-position:top right;background-size:contain}}.post-metadata--primary{font-family:var(--font-family-heading);color:var(--color-info);font-weight:var(--font-weight-bold);letter-spacing:.5px;text-transform:uppercase}.post-metadata--secondary{color:var(--color-primary);font-weight:var(--font-weight-semi-bold)}.post-metadata__date{min-width:-moz-max-content;min-width:max-content}.post-card{--background-color-post-card: white;--cover-size-square-mobile-post-card: 67px;--cover-size-square-desktop-post-card: 190px;--cover-height-horizontal-mobile-post-card: 130px;--cover-height-horizontal-medium-desktop-post-card: 175px;--cover-height-horizontal-large-desktop-post-card: 245px;--max-height-post-card: auto;position:relative;display:flex;background-color:var(--background-color-post-card);border-radius:var(--radius-s);max-height:var(--max-height-post-card)}.post-card .post-card__cover{width:100%;-o-object-fit:cover;object-fit:cover}.post-card--highlight-light{flex-direction:row-reverse}.post-card--highlight-light .post-card__cover{margin:var(--spacing-s) var(--spacing-s) 0 0;width:var(--cover-size-square-mobile-post-card);height:var(--cover-size-square-mobile-post-card);border-radius:var(--radius-s)}@media screen and (min-width: 1001px){.post-card--highlight-light{flex-direction:column}.post-card--highlight-light .post-card__cover{margin:0;width:100%;height:var(--cover-height-horizontal-medium-desktop-post-card);border-radius:0}}.post-card--highlight-dark{flex-direction:column;--background-color-post-card: rgb(0 0 0 / 15%);color:#fff}.post-card--highlight-dark .post-card__cover{height:var(--cover-height-horizontal-mobile-post-card)}.post-card--highlight-dark .post-card__link{color:#fff}@media screen and (min-width: 1001px){.post-card--highlight-dark .post-card__cover{margin:0;width:100%;height:var(--cover-height-horizontal-large-desktop-post-card);border-radius:0}}.post-card--side-image{flex-direction:row-reverse}@media screen and (min-width: 1001px){.post-card--side-image{--max-height-post-card: var(--cover-size-square-desktop-post-card);flex-direction:row}}.post-card--side-image .post-card__cover{margin:var(--spacing-s) var(--spacing-s) 0 0;width:var(--cover-size-square-mobile-post-card);height:var(--cover-size-square-mobile-post-card);border-radius:var(--radius-s)}@media screen and (min-width: 1001px){.post-card--side-image .post-card__cover{margin:0;width:var(--cover-size-square-desktop-post-card);height:var(--cover-size-square-desktop-post-card);border-radius:var(--radius-s) 0 0 var(--radius-s)}}@media screen and (min-width: 1001px){.post-card--side-image.post-card--with-tutorial .post-card__heading{width:calc(100% - 55px)}}.post-card__link{color:#000}.post-card__link:before{content:" ";position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}.post-card__tutoriel-tag{position:absolute;top:var(--spacing-s);right:var(--spacing-s);font-family:var(--font-family-heading);letter-spacing:.5px;background-color:var(--color-accent);border-radius:var(--radius-xs)}.author-card{--avatar-img-author-card: 72px;border-radius:4px;position:relative}.author-card__link{font-family:var(--font-family-heading);letter-spacing:1px}.author-card__link:before{content:" ";position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}.author-card__avatar-img{border-radius:50px;height:var(--avatar-img-author-card);width:var(--avatar-img-author-card)}.author-card__avatar-img--empty{background-image:url(/imgs/astronaut.png);background-repeat:no-repeat;background-size:cover}.contact-card{background-image:url(/imgs/contact-background.png);background-size:contain;background-position:bottom right;background-repeat:no-repeat;background-color:#fff;border-radius:4px}.contact-card__container{max-width:560px}.summary-card{border-radius:4px}.summary-card--primary .summary-card__section{color:#000}.summary-card--secondary .summary-card__section{color:var(--color-grey)}.summary-card--secondary .summary-card__section--active{color:var(--color-primary)}.summary-card--secondary .summary-card__section--active~.summary-card__section{color:#000}.newsletter-card{border-radius:4px;background-image:url(/imgs/wave-background.png);background-repeat:no-repeat;background-position:right bottom}@media screen and (max-width: 1001px){.newsletter-card{flex-direction:column}.newsletter-card .newsletter-card__intro{flex:1;padding-bottom:var(--spacing-xl);border-bottom:1px solid rgba(0,0,0,.2);margin-bottom:var(--spacing-xl)}}.newsletter-card--vertical{flex-direction:column}.newsletter-card--vertical .newsletter-card__intro{flex:1;padding-bottom:var(--spacing-xl);border-bottom:1px solid rgba(0,0,0,.2);margin-bottom:var(--spacing-xl)}@media screen and (min-width: 1001px){.newsletter-card--horizontal{flex-direction:row}.newsletter-card--horizontal .newsletter-card__intro{flex:1;padding-right:var(--spacing-xl);border-right:1px solid rgba(0,0,0,.2);margin-right:var(--spacing-xl)}}.newsletter-card__form{flex:2}.mauticform_wrapper{--color-error: red;font-size:var(--typography-text-s-font-size)}.mauticform_wrapper .mauticform-row{display:flex;flex-direction:column}.mauticform_wrapper .mauticform-checkboxgrp-row{display:flex;gap:var(--spacing-s);margin-top:var(--spacing-m)}.mauticform_wrapper .mauticform-checkboxgrp-row input{margin-top:var(--spacing-xxs-2)}.mauticform_wrapper .mauticform-checkboxgrp-row label{flex:1}.mauticform_wrapper .mauticform-label{text-transform:uppercase;font-weight:var(--font-weight-medium)}.mauticform_wrapper .mauticform-required .mauticform-label:after{color:var(--color-error);content:" *";display:inline}.mauticform_wrapper .mauticform-errormsg{margin-top:var(--spacing-xxs);color:var(--color-error)}.mauticform_wrapper .mauticform-input{color:#fff;padding:var(--spacing-s) var(--spacing-m);background-color:transparent;border:1px solid var(--color-accent);border-radius:100px}.mauticform_wrapper .mauticform-input:focus{outline:0;border-color:#fff}.mauticform_wrapper input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:.3em 0 0;font:inherit;color:currentcolor;width:1.15em;height:1.15em;border:.15em solid currentcolor;border-color:var(--color-accent);border-radius:.15em;transform:translateY(-.075em);display:grid;place-content:center}.mauticform_wrapper input[type=checkbox]:before{color:#fff;content:"";width:.65em;height:.65em;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0);transform-origin:bottom left;transition:.12s transform ease-in-out;box-shadow:inset 1em 1em var(--color-accent);background-color:CanvasText}.mauticform_wrapper input[type=checkbox]:checked:before{transform:scale(1)}.mauticform_wrapper a{color:#fff;text-decoration:underline}.mauticform_wrapper .mauticform-button-wrapper .mauticform-button.btn-default{margin-top:var(--spacing-l);padding:var(--spacing-s) var(--spacing-m);background-color:var(--color-accent);border:none;font-weight:var(--font-weight-bold);color:var(--color-primary);text-transform:uppercase;border-radius:100px}.pagination{--item-size-pagination: 48px;--border-color-pagination: var(--color-secondary-dark)}.pagination__item{display:flex;justify-content:center;align-items:center;height:var(--item-size-pagination);width:var(--item-size-pagination);border-top:1px solid var(--border-color-pagination);border-right:1px solid var(--border-color-pagination);border-bottom:1px solid var(--border-color-pagination);color:var(--color-primary-dark)}.pagination__item--active{color:var(--color-info)}.pagination__item--disabled{color:var(--color-grey)}.pagination__item:first-child{border-left:1px solid var(--border-color-pagination)}.pagination__item:first-child svg{transform:rotate(180deg)}.autocomplete{position:var(--position-autocomplete, initial)}@media screen and (min-width: 1001px){.autocomplete{--position-autocomplete: relative}}.autocomplete__input{position:relative;z-index:3}.autocomplete-result{--padding-x-autocomplete-result: var(--spacing-s);position:absolute;z-index:2;width:var(--autocomplete-result-width, 100vw);left:0;margin-top:var(--margin-top-autocomplete-result, var(--spacing-s));padding-top:var(--padding-top-autocomplete-result, var(--spacing-s));padding-left:var(--padding-x-autocomplete-result);padding-right:var(--padding-x-autocomplete-result);background-color:#fff;filter:drop-shadow(0 4px 14px rgba(0,0,0,.25))}@media screen and (min-width: 1001px){.autocomplete-result{--autocomplete-result-width: 100%;--margin-top-autocomplete-result: calc(var(--spacing-m) * -1);--padding-top-autocomplete-result: var(--spacing-l);--padding-x-autocomplete-result: 0;border-radius:0 0 4px 4px}}.autocomplete-result__item{position:relative;display:block}.autocomplete-result__item--is-highlighted{background-color:var(--color-secondary)}.autocomplete-result__link{color:#000}.autocomplete-result__link:before{content:" ";position:absolute;z-index:1;top:0;left:0;width:100%;height:100%}.autocomplete-result__background-not-found{height:135px;width:100%;background-image:url(/imgs/not-found.png);background-repeat:no-repeat;background-position:center}.header{position:relative;border-bottom:.5px solid var(--color-ultra-light-grey)}.header__logo{font-size:var(--header-logo-size, 2rem)}@media screen and (min-width: 1001px){.header__logo{--header-logo-size: 2.75rem}}.header__separator{width:1px;background-color:var(--color-primary)}.header__menu{display:flex;text-transform:uppercase;font-family:var(--font-family-heading);font-weight:var(--font-weight-bold);letter-spacing:.5px}@media screen and (min-width: 1001px){.header__menu{margin:0 var(--spacing-xs);gap:var(--spacing-m);font-weight:var(--font-weight-bold)}}@media screen and (min-width: 1201px){.header__menu{margin:0;gap:var(--spacing-xl)}}.header__menu-item{color:var(--color-info);font-weight:var(--font-weight-bold);text-decoration:none;align-self:center}.header__menu-item:hover{color:var(--color-primary);text-decoration:underline}@media screen and (max-width: 1001px){.header__menu{display:none;position:fixed;z-index:10;flex-direction:column;top:80px;bottom:0;background:#fff;left:0;width:100%;border-top:.5px solid var(--color-secondary-dark)}.header__menu--is-open{display:flex}.header__menu-item{padding:var(--spacing-xs) var(--spacing-m);border-bottom:.5px solid var(--color-secondary-dark)}}.footer__intro-link{color:#fff;text-decoration:underline}.footer__language-links-container{border-top:1px solid rgba(0,0,0,.2)}.footer__social-icon{border-radius:6px}.last-articles-block__post-list{display:grid}@media screen and (min-width: 1001px){.last-articles-block__post-list{grid-template-columns:repeat(2,1fr)}.last-articles-block__post-list .post-card:last-child{display:none}}@media screen and (min-width: 1201px){.last-articles-block__post-list{grid-template-columns:repeat(3,1fr)}.last-articles-block__post-list .post-card:last-child{display:flex}}.last-tutorials-block__content{flex:1}.last-tutorials-block__post-list{display:grid;width:100%}@media screen and (min-width: 1001px){.last-tutorials-block__post-list{flex:2}}@media screen and (min-width: 1001px){.last-tutorials-block__post-list{grid-template-columns:repeat(2,1fr)}}.layout-template{min-height:var(--height-screen)}@media screen and (min-width: 1001px){.layout-content-with-sidebar__content{width:calc(70% - var(--spacing-xl))}.layout-content-with-sidebar__sidebar{width:30%}}.post-page{--height-cover-post-page: 160px}.post-page__cover{-o-object-fit:cover;object-fit:cover;width:100%;height:var(--height-cover-post-page);border-radius:var(--radius-xs)}@media screen and (min-width: 1001px){.post-page__cover{--height-cover-post-page: 330px}}.post-page__content h5{line-height:var(--typography-heading-markup-base-line-height);font-weight:var(--typography-heading-markup-base-font-weight);margin-top:var(--typography-heading-markup-base-margin-top);font-size:var(--typography-heading-markup-s-font-size);margin-bottom:var(--typography-heading-markup-s-margin-bottom)}.post-page__content h4{line-height:var(--typography-heading-markup-base-line-height);font-weight:var(--typography-heading-markup-base-font-weight);margin-top:var(--typography-heading-markup-base-margin-top);font-size:var(--typography-heading-markup-m-font-size);margin-bottom:var(--typography-heading-markup-m-margin-bottom)}.post-page__content h3{line-height:var(--typography-heading-markup-base-line-height);font-weight:var(--typography-heading-markup-l-font-weight);margin-top:var(--typography-heading-markup-base-margin-top);font-size:var(--typography-heading-markup-l-font-size);margin-bottom:var(--typography-heading-markup-l-margin-bottom)}.post-page__content h2{line-height:var(--typography-heading-markup-base-line-height);font-weight:var(--typography-heading-markup-xl-font-weight);margin-top:var(--typography-heading-markup-base-margin-top);font-size:var(--typography-heading-markup-xl-font-size);margin-bottom:var(--typography-heading-markup-xl-margin-bottom)}.post-page__content p,.post-page__content ul,.post-page__content ol,.post-page__content blockquote{margin:0 0 var(--spacing-xs) 0}.post-page__content pre{font-size:var(--typography-text-xs-font-size)}.post-page__content figure{text-align:center}.post-page__content img{display:block;max-width:100%;margin:var(--spacing-xs) auto}.post-page__content blockquote{padding:0 var(--spacing-xxl);font-family:Georgia,var(--font-family-blockquote);font-size:var(--typography-text-m-font-size);font-style:italic;line-height:var(--line-height-base)}.post-page__content blockquote:before,.post-page__content blockquote:after{content:"“";display:block;height:3rem;line-height:6rem;font-size:8rem;font-weight:var(--font-weight-medium);color:var(--color-primary)}.post-page__content blockquote:before{margin-left:calc(var(--spacing-xxl) * -1)}.post-page__content blockquote:after{margin-right:calc(var(--spacing-xxl) * -1);transform:rotate(180deg)}.post-page__content table{text-align:left;width:100%}.post-page__content table thead{background-color:var(--color-primary);color:var(--color-secondary)}.post-page__content table th,.post-page__content table td{padding:var(--spacing-xs);border:1px solid var(--color-primary-very-dark)}.post-page__content table tbody tr{background-color:var(--color-white)}.post-page__content table tbody tr:nth-child(2n){background-color:var(--color-secondary-dark)}.post-page__content iframe{display:block;max-width:100%;margin:var(--spacing-xs) auto}.share-links__copy-icon:hover{cursor:pointer}.share-links__social-media-icon--twitter{color:#000}.author-page{--avatar-img-author-page: 120px}.author-page__avatar-img{border-radius:100%;height:var(--avatar-img-author-page);width:var(--avatar-img-author-page)}.author-page__avatar-img--empty{background-image:url(/imgs/astronaut.png);background-repeat:no-repeat;background-size:cover}.author-page__divider{width:var(--divider-width-author-page, 120px)}@media screen and (min-width: 1001px){.author-page__divider{--divider-width-author-page: 300px}}.author-page__social_networks .icon{border-radius:6px}
Blog Eleven Labs - Article(s)/tutoriel(s) de l'auteur Rémi Mavillaz Rémi Mavillaz
Développeur Symfony / NodeJS / React / GraphQL
Articles et tutoriels écrits par l'auteur
12 juin 2019
• 6mn
• Rémi Mavillaz Lorsque votre projet React est bien avancé, charger l'application pour un utilisateur peut devenir de plus en plus long. Pour pallier ce problème, React permet depuis ses dernières mises à jour de faire du Code Splitting.
31 janv. 2019
• 11mn
• Rémi Mavillaz Si vous suivez notre blog ou nos différents meetups, vous avez sans doute entendu parler de la librairie React Apollo afin de gérer une API GraphQL. Depuis peu, celle-ci offre une autre manière de gérer le state de votre application afin de ne pas avoir à gérer un Redux, il est temps de voir ça d'un peu plus près !
Abonnez-vous
à notre AstroNews !
Retrouvez dans notre newsletter mensuelle les dernières actualités tech, une sélection de ressources et le meilleur de twitter !