Video Tutorial Comment module: React


In this second chapter we will create the interface part of our comments module based on the React library.

Before you begin it is important to think about the reason behind the use of the library. For this comment module there will be a lot of user actions and their actions result in changes at the interface level. To simplify the transformations and manipulation of the DOM we will use React. It will allow us to represent our interface as a function of the state and we will thus be able to concentrate on the change of this state (it is React who will take care of synchronizing the dom and it will thus offer us an additional level of abstraction ). We could use Preact here if we want a lighter alternative and if we don't plan to use React in the rest of our application.

Hooks

For this kind of module we will need to communicate with the API and perform operations that are very generic. Typically we will call a URL, display a spinner while loading, and then display the results. This logic being very generic we will be able to extract it in layers that we can then reuse throughout our project.

function Comments ({post, user}) {
  // This hook allows to manage all the recovery part independently of the component
  const {items: comments, setItems: setComments, loading, count, hasMore} = usePaginatedFetch ('/ api / comments? post =' + post)

  // We manage the mutations specific to our component (but we could abstract it in a function if this logic is repeated)
  const addComment = useCallback (comment => {
    setComments (comments => (comment, ... comments))
  }, ())
  const deleteComment = useCallback (comment => {
    setComments (comments => comments.filter (c => c! == comment))
  }, ())
  const updateComment = useCallback ((newComment, oldComment) => {
    setComments (comments => comments.map (c => c === oldComment? newComment: c))
  }, ())

  // We make the component
  return 
{user && <CommentForm post={post} onComment={addComment}/>}     {comments.map (c => <Comment key={c.id} comment={c} canEdit={c.author.id === user} onDelete={deleteComment} onUpdate={updateComment} /> )}     {hasMore && <button disabled={loading} className="btn btn-primary" onClick={load}>Load more comment</button> } </div> } </code></pre> <p>The goal of hooks is to be able to separate the mutations of the state of the interface part.</p> </p></div> </p></div> <!-- A generated by theme --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><div class="td-g-rec td-g-rec-id-content_bottom tdi_3 td_block_template_4 "> <style>.tdi_3.td-a-rec{text-align:center}.tdi_3.td-a-rec:not(.td-a-rec-no-translate){transform:translateZ(0)}.tdi_3 .td-element-style{z-index:-1}.tdi_3.td-a-rec-img{text-align:left}.tdi_3.td-a-rec-img img{margin:0 auto 0 0}@media (max-width:767px){.tdi_3.td-a-rec-img{text-align:center}}</style><script type="text/javascript"> var td_screen_width = window.innerWidth; window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 1140 ) { /* large monitors */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "8443721095"); (adsbygoogle = window.adsbygoogle || []).push({}); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 1019 && td_screen_width < 1140 ) { /* landscape tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "8443721095"); (adsbygoogle = window.adsbygoogle || []).push({}); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 768 && td_screen_width < 1019 ) { /* portrait tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:468px;height:60px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "8443721095"); (adsbygoogle = window.adsbygoogle || []).push({}); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width < 768 ) { /* Phones */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:300px;height:250px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "8443721095"); (adsbygoogle = window.adsbygoogle || []).push({}); } });</script> <noscript id="td-ad-placeholder"></noscript></div> <!-- end A --> </div> <footer> <div class="td-post-source-tags"> </div> <div class="td-post-sharing-bottom"><div class="td-post-sharing-classic"><iframe title="bottomFacebookLike" frameBorder="0" src="https://www.facebook.com/plugins/like.php?href=https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/&layout=button_count&show_faces=false&width=105&action=like&colorscheme=light&height=21" style="border:none; overflow:hidden; width:auto; height:21px; background-color:transparent;"></iframe></div><div id="td_social_sharing_article_bottom" class="td-post-sharing td-ps-bg td-ps-notext td-post-sharing-style1 "><div class="td-post-sharing-visible"><div class="td-social-sharing-button td-social-sharing-button-js td-social-handler td-social-share-text"> <div class="td-social-but-icon"><i class="td-icon-share"></i></div> <div class="td-social-but-text">Share</div> </div><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fmotivationjob.com%2Fadvices-skills%2Fdevelopper%2Fvideo-tutorial-comment-module-react%2F" title="Facebook" ><div class="td-social-but-icon"><i class="td-icon-facebook"></i></div><div class="td-social-but-text">Facebook</div></a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-twitter" href="https://twitter.com/intent/tweet?text=Video+Tutorial+Comment+module%3A+React&url=https%3A%2F%2Fmotivationjob.com%2Fadvices-skills%2Fdevelopper%2Fvideo-tutorial-comment-module-react%2F&via=MotivationJob+-+Creativity%2C+Passion%2C+Possibilities" title="Twitter" ><div class="td-social-but-icon"><i class="td-icon-twitter"></i></div><div class="td-social-but-text">Twitter</div></a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-pinterest" href="https://pinterest.com/pin/create/button/?url=https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/&media=https://motivationjob.com/wp-content/uploads/2020/05/Video-Tutorial-Comment-module-React.jpg&description=Video+Tutorial+Comment+module%3A+React" title="Pinterest" ><div class="td-social-but-icon"><i class="td-icon-pinterest"></i></div><div class="td-social-but-text">Pinterest</div></a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-whatsapp" href="https://api.whatsapp.com/send?text=Video+Tutorial+Comment+module%3A+React %0A%0A https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/" title="WhatsApp" ><div class="td-social-but-icon"><i class="td-icon-whatsapp"></i></div><div class="td-social-but-text">WhatsApp</div></a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/&title=Video+Tutorial+Comment+module%3A+React" title="Linkedin" ><div class="td-social-but-icon"><i class="td-icon-linkedin"></i></div><div class="td-social-but-text">Linkedin</div></a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-mail" href="mailto:?subject=Video Tutorial Comment module: React&body=https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/" title="Email" ><div class="td-social-but-icon"><i class="td-icon-mail"></i></div><div class="td-social-but-text">Email</div></a></div><div class="td-social-sharing-hidden"><ul class="td-pulldown-filter-list"></ul><a class="td-social-sharing-button td-social-handler td-social-expand-tabs" href="#" data-block-uid="td_social_sharing_article_bottom" title="More"> <div class="td-social-but-icon"><i class="td-icon-plus td-social-expand-tabs-icon"></i></div> </a></div></div></div> <div class="td-author-name vcard author" style="display: none"><span class="fn"><a href="https://motivationjob.com/author/admin/">admin</a></span></div> <span class="td-page-meta" itemprop="author" itemscope itemtype="https://schema.org/Person"><meta itemprop="name" content="admin"><meta itemprop="url" content="https://motivationjob.com/author/admin/"></span><meta itemprop="datePublished" content="2020-05-20T08:33:21-04:00"><meta itemprop="dateModified" content="2020-05-20T08:33:21-04:00"><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/"/><span class="td-page-meta" itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><span class="td-page-meta" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://motivationjob.com/wp-content/uploads/2019/05/logo-1.png"></span><meta itemprop="name" content="MotivationJob - Creativity, Passion, Possibilities"></span><meta itemprop="headline " content="Video Tutorial Comment module: React"><span class="td-page-meta" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://motivationjob.com/wp-content/uploads/2020/05/Video-Tutorial-Comment-module-React.jpg"><meta itemprop="width" content="1920"><meta itemprop="height" content="1080"></span> </footer> <div class="td_block_wrap td_block_related_posts tdi_4 td_with_ajax_pagination td-pb-border-top td_block_template_4" data-td-block-uid="tdi_4" ><script>var block_tdi_4 = new tdBlock(); block_tdi_4.id = "tdi_4"; block_tdi_4.atts = '{"limit":3,"ajax_pagination":"next_prev","live_filter":"cur_post_same_categories","td_ajax_filter_type":"td_custom_related","class":"tdi_4","td_column_number":3,"block_type":"td_block_related_posts","live_filter_cur_post_id":2397,"live_filter_cur_post_author":"1","block_template_id":"","header_color":"","ajax_pagination_infinite_stop":"","offset":"","td_ajax_preloading":"","td_filter_default_txt":"","td_ajax_filter_ids":"","el_class":"","color_preset":"","ajax_pagination_next_prev_swipe":"","border_top":"","css":"","tdc_css":"","tdc_css_class":"tdi_4","tdc_css_class_style":"tdi_4_rand_style"}'; block_tdi_4.td_column_number = "3"; block_tdi_4.block_type = "td_block_related_posts"; block_tdi_4.post_count = "3"; block_tdi_4.found_posts = "439"; block_tdi_4.header_color = ""; block_tdi_4.ajax_pagination_infinite_stop = ""; block_tdi_4.max_num_pages = "147"; tdBlocksArray.push(block_tdi_4); </script><h4 class="td-related-title td-block-title"><a id="tdi_5" class="td-related-left td-cur-simple-item" data-td_filter_value="" data-td_block_id="tdi_4" href="#">RELATED ARTICLES</a><a id="tdi_6" class="td-related-right" data-td_filter_value="td_related_more_from_author" data-td_block_id="tdi_4" href="#">MORE FROM AUTHOR</a></h4><div id=tdi_4 class="td_block_inner"> <div class="td-related-row"> <div class="td-related-span4"> <div class="td_module_related_posts td-animation-stack td_mod_related_posts"> <div class="td-module-image"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/pourquoi-je-ne-fais-plus-de-ruby-ruby-on-rails/" rel="bookmark" class="td-image-wrap " title="Pourquoi je ne fais plus de Ruby / Ruby on rails" ><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAACWAQMAAACCSQSPAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABpJREFUWMPtwQENAAAAwiD7p7bHBwwAAAAg7RD+AAGXD7BoAAAAAElFTkSuQmCC" alt="" title="Pourquoi je ne fais plus de Ruby / Ruby on rails" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2024/03/Pourquoi-je-ne-fais-plus-de-Ruby-Ruby-on-218x150.jpg" width="218" height="150" /></a></div> </div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/pourquoi-je-ne-fais-plus-de-ruby-ruby-on-rails/" rel="bookmark" title="Pourquoi je ne fais plus de Ruby / Ruby on rails">Pourquoi je ne fais plus de Ruby / Ruby on rails</a></h3> </div> </div> </div> <!-- ./td-related-span4 --> <div class="td-related-span4"> <div class="td_module_related_posts td-animation-stack td_mod_related_posts"> <div class="td-module-image"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/internationalisation-formation-symfony-7/" rel="bookmark" class="td-image-wrap " title="Internationalisation — Formation Symfony 7" ><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAACWAQMAAACCSQSPAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABpJREFUWMPtwQENAAAAwiD7p7bHBwwAAAAg7RD+AAGXD7BoAAAAAElFTkSuQmCC" alt="" title="Internationalisation — Formation Symfony 7" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2024/03/Internationalisation-—-Formation-Symfony-7-218x150.jpg" width="218" height="150" /></a></div> </div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/internationalisation-formation-symfony-7/" rel="bookmark" title="Internationalisation — Formation Symfony 7">Internationalisation — Formation Symfony 7</a></h3> </div> </div> </div> <!-- ./td-related-span4 --> <div class="td-related-span4"> <div class="td_module_related_posts td-animation-stack td_mod_related_posts"> <div class="td-module-image"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/heberger-symfony-sur-un-mutualise-infomaniak-ssh-git-formation-symfony-7/" rel="bookmark" class="td-image-wrap " title="Héberger Symfony sur un mutualisé Infomaniak (SSH / Git) — Formation Symfony 7" ><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAACWAQMAAACCSQSPAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABpJREFUWMPtwQENAAAAwiD7p7bHBwwAAAAg7RD+AAGXD7BoAAAAAElFTkSuQmCC" alt="" title="Héberger Symfony sur un mutualisé Infomaniak (SSH / Git) — Formation Symfony 7" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2024/03/Heberger-Symfony-sur-un-mutualise-Infomaniak-SSH-Git-—-218x150.jpg" width="218" height="150" /></a></div> </div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/heberger-symfony-sur-un-mutualise-infomaniak-ssh-git-formation-symfony-7/" rel="bookmark" title="Héberger Symfony sur un mutualisé Infomaniak (SSH / Git) — Formation Symfony 7">Héberger Symfony sur un mutualisé Infomaniak (SSH / Git) — Formation Symfony 7</a></h3> </div> </div> </div> <!-- ./td-related-span4 --></div><!--./row-fluid--></div><div class="td-next-prev-wrap"><a href="#" class="td-ajax-prev-page ajax-page-disabled" aria-label="prev-page" id="prev-page-tdi_4" data-td_block_id="tdi_4"><i class="td-next-prev-icon td-icon-font td-icon-menu-left"></i></a><a href="#" class="td-ajax-next-page" aria-label="next-page" id="next-page-tdi_4" data-td_block_id="tdi_4"><i class="td-next-prev-icon td-icon-font td-icon-menu-right"></i></a></div></div> <!-- ./block --> <div class="comments" id="comments"> </div> <!-- /.content --> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <!-- A generated by theme --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><div class="td-g-rec td-g-rec-id-sidebar tdi_7 td_block_template_4 "> <style>.tdi_7.td-a-rec{text-align:center}.tdi_7.td-a-rec:not(.td-a-rec-no-translate){transform:translateZ(0)}.tdi_7 .td-element-style{z-index:-1}.tdi_7.td-a-rec-img{text-align:left}.tdi_7.td-a-rec-img img{margin:0 auto 0 0}@media (max-width:767px){.tdi_7.td-a-rec-img{text-align:center}}</style><script type="text/javascript"> var td_screen_width = window.innerWidth; window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 1140 ) { /* large monitors */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:300px;height:250px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "6649926142"); (adsbygoogle = window.adsbygoogle || []).push({}); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 1019 && td_screen_width < 1140 ) { /* landscape tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:300px;height:250px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "6649926142"); (adsbygoogle = window.adsbygoogle || []).push({}); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 768 && td_screen_width < 1019 ) { /* portrait tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:200px;height:200px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "6649926142"); (adsbygoogle = window.adsbygoogle || []).push({}); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width < 768 ) { /* Phones */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:300px;height:250px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "6649926142"); (adsbygoogle = window.adsbygoogle || []).push({}); } });</script> <noscript id="td-ad-placeholder"></noscript></div> <!-- end A --> <div class="td_block_wrap td_block_2 td_block_widget tdi_8 td-pb-border-top td_block_template_4 td-column-1 td_block_padding" data-td-block-uid="tdi_8" > <style>.td_block_template_4 .td-block-title{font-size:16px;font-weight:400;margin-top:0;margin-bottom:26px;line-height:31px;text-align:left}.td_block_template_4 .td-block-title>*{background-color:var(--td_header_color,#000);color:var(--td_text_header_color,#fff);padding:0 12px;position:relative}.td_block_template_4 .td-block-title>*:before{content:'';position:absolute;top:100%;left:10px;margin:auto;width:0;height:0;border-style:solid;border-width:7px 7px 0 7px;border-color:var(--td_header_color,#000) transparent transparent transparent}@media (max-width:767px){.td_block_template_4 .td-related-title a{margin-right:0;font-size:15px}}.td_block_template_4 .td-related-title a:before{border-color:transparent!important}.td_block_template_4 .td-related-title .td-cur-simple-item{background-color:var(--td_theme_color,#4db2ec)}.td_block_template_4 .td-related-title .td-cur-simple-item:before{border-color:var(--td_header_color,var(--td_theme_color,#4db2ec)) transparent transparent transparent!important}@-moz-document url-prefix(){.td_block_template_4 .td-block-title>*{padding-bottom:2px}}</style> <style></style><script>var block_tdi_8 = new tdBlock(); block_tdi_8.id = "tdi_8"; block_tdi_8.atts = '{"custom_title":"Latest updates","custom_url":"","block_template_id":"","header_color":"#","header_text_color":"#","accent_text_color":"#","m2_tl":"","m2_el":"","m6_tl":"","limit":"5","offset":"","time_ago_add_txt":"ago","el_class":"","post_ids":"-2397","category_id":"","category_ids":"","tag_slug":"","autors_id":"","installed_post_types":"","sort":"","td_ajax_filter_type":"","td_ajax_filter_ids":"","td_filter_default_txt":"All","td_ajax_preloading":"","ajax_pagination":"","ajax_pagination_infinite_stop":"","class":"td_block_widget tdi_8","block_type":"td_block_2","separator":"","taxonomies":"","in_all_terms":"","include_cf_posts":"","exclude_cf_posts":"","popular_by_date":"","linked_posts":"","favourite_only":"","open_in_new_window":"","show_modified_date":"","time_ago":"","time_ago_txt_pos":"","review_source":"","f_header_font_header":"","f_header_font_title":"Block header","f_header_font_settings":"","f_header_font_family":"","f_header_font_size":"","f_header_font_line_height":"","f_header_font_style":"","f_header_font_weight":"","f_header_font_transform":"","f_header_font_spacing":"","f_header_":"","f_ajax_font_title":"Ajax categories","f_ajax_font_settings":"","f_ajax_font_family":"","f_ajax_font_size":"","f_ajax_font_line_height":"","f_ajax_font_style":"","f_ajax_font_weight":"","f_ajax_font_transform":"","f_ajax_font_spacing":"","f_ajax_":"","f_more_font_title":"Load more button","f_more_font_settings":"","f_more_font_family":"","f_more_font_size":"","f_more_font_line_height":"","f_more_font_style":"","f_more_font_weight":"","f_more_font_transform":"","f_more_font_spacing":"","f_more_":"","m2f_title_font_header":"","m2f_title_font_title":"Article title","m2f_title_font_settings":"","m2f_title_font_family":"","m2f_title_font_size":"","m2f_title_font_line_height":"","m2f_title_font_style":"","m2f_title_font_weight":"","m2f_title_font_transform":"","m2f_title_font_spacing":"","m2f_title_":"","m2f_cat_font_title":"Article category tag","m2f_cat_font_settings":"","m2f_cat_font_family":"","m2f_cat_font_size":"","m2f_cat_font_line_height":"","m2f_cat_font_style":"","m2f_cat_font_weight":"","m2f_cat_font_transform":"","m2f_cat_font_spacing":"","m2f_cat_":"","m2f_meta_font_title":"Article meta info","m2f_meta_font_settings":"","m2f_meta_font_family":"","m2f_meta_font_size":"","m2f_meta_font_line_height":"","m2f_meta_font_style":"","m2f_meta_font_weight":"","m2f_meta_font_transform":"","m2f_meta_font_spacing":"","m2f_meta_":"","m2f_ex_font_title":"Article excerpt","m2f_ex_font_settings":"","m2f_ex_font_family":"","m2f_ex_font_size":"","m2f_ex_font_line_height":"","m2f_ex_font_style":"","m2f_ex_font_weight":"","m2f_ex_font_transform":"","m2f_ex_font_spacing":"","m2f_ex_":"","m6f_title_font_header":"","m6f_title_font_title":"Article title","m6f_title_font_settings":"","m6f_title_font_family":"","m6f_title_font_size":"","m6f_title_font_line_height":"","m6f_title_font_style":"","m6f_title_font_weight":"","m6f_title_font_transform":"","m6f_title_font_spacing":"","m6f_title_":"","m6f_cat_font_title":"Article category tag","m6f_cat_font_settings":"","m6f_cat_font_family":"","m6f_cat_font_size":"","m6f_cat_font_line_height":"","m6f_cat_font_style":"","m6f_cat_font_weight":"","m6f_cat_font_transform":"","m6f_cat_font_spacing":"","m6f_cat_":"","m6f_meta_font_title":"Article meta info","m6f_meta_font_settings":"","m6f_meta_font_family":"","m6f_meta_font_size":"","m6f_meta_font_line_height":"","m6f_meta_font_style":"","m6f_meta_font_weight":"","m6f_meta_font_transform":"","m6f_meta_font_spacing":"","m6f_meta_":"","ajax_pagination_next_prev_swipe":"","css":"","tdc_css":"","td_column_number":1,"color_preset":"","border_top":"","tdc_css_class":"tdi_8","tdc_css_class_style":"tdi_8_rand_style"}'; block_tdi_8.td_column_number = "1"; block_tdi_8.block_type = "td_block_2"; block_tdi_8.post_count = "5"; block_tdi_8.found_posts = "78095"; block_tdi_8.header_color = "#"; block_tdi_8.ajax_pagination_infinite_stop = ""; block_tdi_8.max_num_pages = "15619"; tdBlocksArray.push(block_tdi_8); </script><div class="td-block-title-wrap"><h4 class="td-block-title"><span class="td-pulldown-size">Latest updates</span></h4></div><div id=tdi_8 class="td_block_inner"> <div class="td-block-span12"> <div class="td_module_2 td_module_wrap td-animation-stack"> <div class="td-module-image"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/pourquoi-je-ne-fais-plus-de-ruby-ruby-on-rails/" rel="bookmark" class="td-image-wrap " title="Pourquoi je ne fais plus de Ruby / Ruby on rails" ><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUQAAACgAQMAAABOhoelAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAAB1JREFUWMPtwTEBAAAAwiD7p/ZdCGAAAAAAAAAQBxpAAAH8le3bAAAAAElFTkSuQmCC" alt="" title="Pourquoi je ne fais plus de Ruby / Ruby on rails" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2024/03/Pourquoi-je-ne-fais-plus-de-Ruby-Ruby-on-324x160.jpg" width="324" height="160" /></a></div> </div> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/pourquoi-je-ne-fais-plus-de-ruby-ruby-on-rails/" rel="bookmark" title="Pourquoi je ne fais plus de Ruby / Ruby on rails">Pourquoi je ne fais plus de Ruby / Ruby on rails</a></h3> <div class="td-module-meta-info"> <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2024-03-20T10:04:11-04:00" >March 20, 2024</time></span> </div> <div class="td-excerpt"> Pourquoi je ne fais plus de Ruby / Ruby on rails Ruby a été une technologie qui a pas... </div> </div> </div> <!-- ./td-block-span12 --> <div class="td-block-span12"> <div class="td_module_6 td_module_wrap td-animation-stack"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/internationalisation-formation-symfony-7/" rel="bookmark" class="td-image-wrap " title="Internationalisation — Formation Symfony 7" ><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABGAQMAAAAASKMqAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABBJREFUKM9jGAWjYBQMKwAAA9QAAQWBn6cAAAAASUVORK5CYII=" alt="" title="Internationalisation — Formation Symfony 7" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2024/03/Internationalisation-—-Formation-Symfony-7-100x70.jpg" width="100" height="70" /></a></div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/internationalisation-formation-symfony-7/" rel="bookmark" title="Internationalisation — Formation Symfony 7">Internationalisation — Formation Symfony 7</a></h3> <div class="td-module-meta-info"> <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2024-03-13T11:19:46-04:00" >March 13, 2024</time></span> </div> </div> </div> </div> <!-- ./td-block-span12 --> <div class="td-block-span12"> <div class="td_module_6 td_module_wrap td-animation-stack"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/heberger-symfony-sur-un-mutualise-infomaniak-ssh-git-formation-symfony-7/" rel="bookmark" class="td-image-wrap " title="Héberger Symfony sur un mutualisé Infomaniak (SSH / Git) — Formation Symfony 7" ><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABGAQMAAAAASKMqAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABBJREFUKM9jGAWjYBQMKwAAA9QAAQWBn6cAAAAASUVORK5CYII=" alt="" title="Héberger Symfony sur un mutualisé Infomaniak (SSH / Git) — Formation Symfony 7" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2024/03/Heberger-Symfony-sur-un-mutualise-Infomaniak-SSH-Git-—-100x70.jpg" width="100" height="70" /></a></div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/heberger-symfony-sur-un-mutualise-infomaniak-ssh-git-formation-symfony-7/" rel="bookmark" title="Héberger Symfony sur un mutualisé Infomaniak (SSH / Git) — Formation Symfony 7">Héberger Symfony sur un mutualisé Infomaniak (SSH / Git) — Formation...</a></h3> <div class="td-module-meta-info"> <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2024-03-10T07:01:46-04:00" >March 10, 2024</time></span> </div> </div> </div> </div> <!-- ./td-block-span12 --> <div class="td-block-span12"> <div class="td_module_6 td_module_wrap td-animation-stack"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/heberger-symfony-sur-un-mutualise-o2switch-via-ssh-git-formation-symfony-7/" rel="bookmark" class="td-image-wrap " title="Héberger Symfony sur un mutualisé O2Switch (via SSH / Git) — Formation Symfony 7" ><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABGAQMAAAAASKMqAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABBJREFUKM9jGAWjYBQMKwAAA9QAAQWBn6cAAAAASUVORK5CYII=" alt="" title="Héberger Symfony sur un mutualisé O2Switch (via SSH / Git) — Formation Symfony 7" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2024/03/Heberger-Symfony-sur-un-mutualise-O2Switch-via-SSH-Git-100x70.jpg" width="100" height="70" /></a></div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/heberger-symfony-sur-un-mutualise-o2switch-via-ssh-git-formation-symfony-7/" rel="bookmark" title="Héberger Symfony sur un mutualisé O2Switch (via SSH / Git) — Formation Symfony 7">Héberger Symfony sur un mutualisé O2Switch (via SSH / Git) —...</a></h3> <div class="td-module-meta-info"> <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2024-03-10T06:00:45-04:00" >March 10, 2024</time></span> </div> </div> </div> </div> <!-- ./td-block-span12 --> <div class="td-block-span12"> <div class="td_module_6 td_module_wrap td-animation-stack"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/tutoriel-video-ssh-utiliser-une-clef-ssh/" rel="bookmark" class="td-image-wrap " title="Tutoriel vidéo SSH : Utiliser une clef SSH" ><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABGAQMAAAAASKMqAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABBJREFUKM9jGAWjYBQMKwAAA9QAAQWBn6cAAAAASUVORK5CYII=" alt="" title="Tutoriel vidéo SSH : Utiliser une clef SSH" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2024/03/Tutoriel-video-SSH-Utiliser-une-clef-SSH-100x70.jpg" width="100" height="70" /></a></div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/tutoriel-video-ssh-utiliser-une-clef-ssh/" rel="bookmark" title="Tutoriel vidéo SSH : Utiliser une clef SSH">Tutoriel vidéo SSH : Utiliser une clef SSH</a></h3> <div class="td-module-meta-info"> <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2024-03-10T04:59:46-04:00" >March 10, 2024</time></span> </div> </div> </div> </div> <!-- ./td-block-span12 --></div></div> <!-- ./block --> <!-- A generated by theme --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><div class="td-g-rec td-g-rec-id-sidebar tdi_9 td_block_template_4 "> <style>.tdi_9.td-a-rec{text-align:center}.tdi_9.td-a-rec:not(.td-a-rec-no-translate){transform:translateZ(0)}.tdi_9 .td-element-style{z-index:-1}.tdi_9.td-a-rec-img{text-align:left}.tdi_9.td-a-rec-img img{margin:0 auto 0 0}@media (max-width:767px){.tdi_9.td-a-rec-img{text-align:center}}</style><script type="text/javascript"> var td_screen_width = window.innerWidth; window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 1140 ) { /* large monitors */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:300px;height:250px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "6649926142"); (adsbygoogle = window.adsbygoogle || []).push({}); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 1019 && td_screen_width < 1140 ) { /* landscape tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:300px;height:250px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "6649926142"); (adsbygoogle = window.adsbygoogle || []).push({}); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width >= 768 && td_screen_width < 1019 ) { /* portrait tablets */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:200px;height:200px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "6649926142"); (adsbygoogle = window.adsbygoogle || []).push({}); } });window.addEventListener("load", function(){ var placeAdEl = document.getElementById("td-ad-placeholder"); if ( null !== placeAdEl && td_screen_width < 768 ) { /* Phones */ var adEl = document.createElement("ins"); placeAdEl.replaceWith(adEl); adEl.setAttribute("class", "adsbygoogle"); adEl.setAttribute("style", "display:inline-block;width:300px;height:250px"); adEl.setAttribute("data-ad-client", "ca-pub-5597483642361353"); adEl.setAttribute("data-ad-slot", "6649926142"); (adsbygoogle = window.adsbygoogle || []).push({}); } });</script> <noscript id="td-ad-placeholder"></noscript></div> <!-- end A --> </div> </div> </div> <!-- /.td-pb-row --> </article> <!-- /.post --> </div> <!-- /.td-container --> </div> <!-- /.td-main-content-wrap --> <div class="tdc-footer-wrap "> <!-- Footer --> <div class="td-footer-wrapper td-footer-container td-container-wrap td-footer-template-14 td_stretch_container td_stretch_content_1400"> <div class="td-container td-footer-bottom-full"> <div class="td-pb-row"> <div class="td-pb-span3"><aside class="footer-logo-wrap"><a href="https://motivationjob.com/"><img class="td-retina-data" src="https://motivationjob.com/wp-content/uploads/2019/05/logo-mobile.png" data-retina="https://motivationjob.com/wp-content/uploads/2019/05/logo-mobile-retina.png" alt="MotivationJob is focussed on empowering entrepreneurs worldwide to do greater things and build awesome companies. We do this by collecting and curating knowledge, inspiration and background business stories from around the web." title="MotivationJob : leading Business Inspiration and creativity Magazine, we provide a handpicked content, lists, infographics and more to help you TO SUCCESS in your business." width="140" height="31" /></a></aside></div><div class="td-pb-span5"><aside class="footer-text-wrap"><div class="block-title"><span>ABOUT US</span></div>MotivationJob is focussed on empowering entrepreneurs worldwide to do greater things and build awesome companies. We do this by collecting and curating knowledge, inspiration and background business stories from around the web.</aside></div><div class="td-pb-span4"><aside class="footer-social-wrap td-social-style-2"><div class="block-title"><span>FOLLOW US</span></div> <span class="td-social-icon-wrap"> <a target="_blank" href="#" title="Facebook"> <i class="td-icon-font td-icon-facebook"></i> <span style="display: none">Facebook</span> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="#" title="Instagram"> <i class="td-icon-font td-icon-instagram"></i> <span style="display: none">Instagram</span> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="#" title="Twitter"> <i class="td-icon-font td-icon-twitter"></i> <span style="display: none">Twitter</span> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="#" title="Youtube"> <i class="td-icon-font td-icon-youtube"></i> <span style="display: none">Youtube</span> </a> </span></aside></div> </div> </div> </div> <!-- Sub Footer --> <div class="td-sub-footer-container td-container-wrap td_stretch_container td_stretch_content_1400"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span td-sub-footer-menu"> <div class="menu-footer-container"><ul id="menu-footer" class="td-subfooter-menu"><li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first td-menu-item td-normal-menu menu-item-125"><a href="https://motivationjob.com/about-us/">About us</a></li> <li id="menu-item-126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy td-menu-item td-normal-menu menu-item-126"><a rel="privacy-policy" href="https://motivationjob.com/privacy-policy/">Privacy Policy</a></li> <li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu menu-item-127"><a href="https://motivationjob.com/contact/">Contact us</a></li> </ul></div> </div> <div class="td-pb-span td-sub-footer-copy"> © MotivationJob - Creativity, Passion, Possibilities </div> </div> </div> </div> </div><!--close td-footer-wrap--> </div><!--close td-outer-wrap--> <!-- Theme: Newspaper by tagDiv.com 2024 Version: 12.6.4 (rara) Deploy mode: deploy uid: 6746c07281f20 --> <script type="text/javascript" src="https://motivationjob.com/wp-includes/js/underscore.min.js?ver=1.13.4" id="underscore-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-cloud-library/assets/js/js_posts_autoload.min.js?ver=9e24474348f1755e0ebe145b87be714d" id="tdb_js_posts_autoload-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tagdiv_theme.min.js?ver=12.6.4" id="td-site-min-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tdPostImages.js?ver=12.6.4" id="tdPostImages-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tdSmartSidebar.js?ver=12.6.4" id="tdSmartSidebar-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tdSocialSharing.js?ver=12.6.4" id="tdSocialSharing-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tdModalPostImages.js?ver=12.6.4" id="tdModalPostImages-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-includes/js/comment-reply.min.js?ver=6.4.5" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-cloud-library/assets/js/js_files_for_front.min.js?ver=9e24474348f1755e0ebe145b87be714d" id="tdb_js_files_for_front-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tdLoadingBox.js?ver=12.6.4" id="tdLoadingBox-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tdAjaxSearch.js?ver=12.6.4" id="tdAjaxSearch-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tdLogin.js?ver=12.6.4" id="tdLogin-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tdMenu.js?ver=12.6.4" id="tdMenu-js"></script> <script type="text/javascript" src="https://motivationjob.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tdInfiniteLoader.js?ver=12.6.4" id="tdInfiniteLoader-js"></script> <!-- JS generated by theme --> <script> </script> <script>var td_res_context_registered_atts=[];</script> </body> </html>