{"pageProps":{"locale":{"code":"en","domain":"frenchstack.com","lang":"en-US","json":{"TRANSLATE":"Translate into","EN":"English","FR":"French","NO_TRANSLATION_AVAILABLE":"No translation available","PROFILE_OF":"Profile of","FILTER_BY_TAG":"Filter by tag","REMOVE_FILTER":"Remove filter","RESULT":"Result","RESULTS":"Results","FORM_CONTACT_SUPPORT":"Support","FORM_CONTACT_SALES":"Sales","FORM_CONTACT_BUGS":"Report a bug","FORM_LOADING":"Loading","FORM_SEND":"Send","FORM_VERIFY":"Verify","FORM_NAME":"Name","FORM_TOPIC":"Subject","FORM_PHONE":"Phone","FORM_EMAIL":"Email","FORM_MESSAGE":"Message","FORM_DOMAIN_PLACEHOLDER":"example.com","FORM_DOMAIN_AVAILABLE":"Congrats, <span data-selector='domain'></span> is available!","FORM_DOMAIN_TAKEN":"Sorry, <span data-selector='domain'></span> is taken.","SUBSCRIBE":"Subscribe","SUCCESS_CONTACT":"Your message has been successfully sent! We'll be in touch soon.","SOMETING_WENT_WRONG":"Oops, something went wrong. Please try again later."},"subdomains":{"blog":"blog","clients":"clients","videos":"videos","services":"services"},"ogSection":"Technology"},"slugs":["en","blog","nicolas-roehm-bettcher"],"component":"paging","articles":[{"id":"content/articles/en/angular-form-validation-compare-multiple-fields.mdx","heroSection":{"heroTitle":"Compare multiple fields","heroSubtitle":"","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"ANGULAR FORM VALIDATION"}]},{"type":"p","children":[{"type":"text","text":"How to validate two fields of a form doing a comparison?"}]},{"type":"p","children":[{"type":"text","text":"Let's check multiple fields with a top level validator!"}]}]},"heroSubtitleIsInline":false,"heroHasBackground":false,"heroImage":"/images/angular-form-validation.png","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(180deg, transparent 0%, #0e256ddb 17%, #ff4444db 120%)","heroMs":"","heroWidth":"","heroTitleMb":"","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroBlurImage":"","navbarBg":"","navbarLinkActive":"","navbarLinkHover":""},"imageAlt":"angular form validation","imageWidth":1720,"imageHeight":900},"seoSection":{"metaTitle":"Angular form validation : compare multiple fields","metaDescription":"How to validate two fields of a form doing a comparison? Let's check multiple fields with a top level validator!","metaTags":"forms, angular, validation, angular-forms, angular-validation","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2023-08-20T12:36:19.922Z","localeCode":"en","slug":"angular-form-validation-compare-multiple-fields","url":"/en/blog/angular-form-validation-compare-multiple-fields","ogId":"angular-form-validation-compare-multiple-fields-blog-en","ogImagePath":"/og/angular-form-validation-compare-multiple-fields-blog-en.png","type":"Article","title":"Compare multiple fields using Angular","subdomainKey":"blog","subdomain":"blog","body":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Let's suppose that our form has a "},{"type":"text","text":"startDate","code":true},{"type":"text","text":" and an "},{"type":"text","text":"endDate","code":true},{"type":"text","text":" date fields and we want to make sure that "},{"type":"text","text":"startDate","code":true},{"type":"text","text":" must be before "},{"type":"text","text":"endDate","code":true},{"type":"text","text":"."}]},{"type":"p","children":[{"type":"text","text":"To implement validations containing one or more sibling (form) controls, we need to set the validator function to a higher level than the sibling controls."}]},{"type":"mdxJsxFlowElement","name":"codeHeader","children":[{"type":"text","text":""}],"props":{"filePath":"app / src / pages / form-example / form-example.component.ts","fileName":"form-example.component.ts","svgFile":"typescript"}},{"type":"code_block","lang":"typescript","value":"ngOnInit() : void\n{\n  this.formGroup = this.formBuilder.group(\n  {\n    startDate : new FormControl({\n      value    : null,\n      disabled : false\n    }, [ Validators.required ]),\n    endDate : new FormControl({\n      value    : null,\n      disabled : false\n    }, [ Validators.required ]),\n  },\n  // NOTE Top level validator\n  { validator : DateValidator.dateRangeValidator });\n}","children":[{"type":"text","text":""}]},{"type":"p","children":[{"type":"text","text":"Then we define a custom validator in a separate file, for example "},{"type":"text","text":"date.validator.ts","code":true},{"type":"text","text":"."}]},{"type":"mdxJsxFlowElement","name":"codeHeader","children":[{"type":"text","text":""}],"props":{"fileName":"date.validator.ts","filePath":"app / src / shared / validators / date.validator.ts","svgFile":"typescript"}},{"type":"code_block","lang":"typescript","value":"// Angular modules\nimport { Injectable }       from '@angular/core';\nimport { AbstractControl }  from '@angular/forms';\nimport { ValidationErrors } from '@angular/forms';\n\n@Injectable({\n  providedIn : 'root'\n})\nexport class DateValidator\n{\n  constructor() {}\n\n  public static dateRangeValidator(control : AbstractControl) : ValidationErrors | null\n  {\n    // NOTE Safety check\n    if (!control.get('startDate').value || !control.get('endDate').value)\n      return null;\n\n    // NOTE Compare fields\n    // const mStart  = moment(control.get('startDate').value);\n    // const mEnd    = moment(control.get('endDate').value);\n    // const isValid = mStart.isBefore(mEnd);\n\n    // NOTE Invalid\n    if (!isValid)\n      return { invalidDateRange : true };\n\n    // NOTE Valid\n    return null;\n  }\n}","children":[{"type":"text","text":""}]},{"type":"p","children":[{"type":"text","text":"If invalid, return an error object (any arbitrary name), like, "},{"type":"text","text":"return { invalidEndDate: true }","code":true},{"type":"text","text":"."}]},{"type":"p","children":[{"type":"text","text":"Make sure it always returns a "},{"type":"text","text":"null","code":true},{"type":"text","text":" for valid or non-relevant cases, and a 'non-null' object for when an error should be raised on the "},{"type":"text","text":"formGroup","code":true},{"type":"text","text":"."}]},{"type":"p","children":[{"type":"text","text":"To display the error in our view, we use the "},{"type":"text","text":"invalidDateRange","code":true},{"type":"text","text":" key returned by our validator."}]},{"type":"mdxJsxFlowElement","name":"codeHeader","children":[{"type":"text","text":""}],"props":{"fileName":"form-example.component.html","filePath":"app / src / pages / form-example / form-example.component.html","svgFile":"html"}},{"type":"code_block","lang":"html","value":"<div *ngIf=\"formGroup.hasError('invalidDateRange')\">\n  Start date is not before the end date\n</div>","children":[{"type":"text","text":""}]}]},"dateCreate":"2021-03-17T10:46:42.000Z","dateUpdate":"2021-09-15T10:57:26.000Z","author":{"id":"content/authors/en/nicolas-roehm-bettcher.mdx","heroSection":{"heroTitle":"Nicolas Roehm","heroSubtitle":"Software engineer","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Founder of FrenchStack, I design complete IT solutions."}]},{"type":"p","children":[{"type":"text","text":"Full-stack developer, I work mainly on frontend projects with Angular, React or Vue."}]},{"type":"p","children":[{"type":"text","text":"Designer in my spare time, here are some of my "},{"type":"a","url":"https://www.artstation.com/nicolas-roehm","title":"ArtStation - Nicolas Roehm","children":[{"type":"text","text":"graphic designs"}]},{"type":"text","text":"."}]}]},"heroSubtitleIsInline":true,"heroHasBackground":false,"heroImage":"/images/nicolas-roehm-bettcher.png","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(312deg, #0800ff 0%, #4300ff00 70%)","heroMs":"25%","heroWidth":"75%","heroTitleMb":"0.5rem","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroBlurImage":"","navbarBg":"#fff0","navbarLinkActive":"#6785be","navbarLinkHover":"#6785be"},"imageAlt":"nicolas roehm bettcher","imageWidth":0,"imageHeight":0},"seoSection":{"metaTitle":"Nicolas Roehm, Software engineer","metaDescription":"I design websites in their entirety: template, development, SEO, e-reputation, e-mailling and hosting","metaTags":"Nicolas Roehm, Software engineer, web, mobile, website","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2023-08-18T08:52:56.731Z","localeCode":"en","slug":"nicolas-roehm-bettcher","url":"/en/nicolas-roehm-bettcher","ogId":"nicolas-roehm-bettcher-en","ogImagePath":"/og/nicolas-roehm-bettcher-en.png","type":"Author","title":"Nicolas Roehm-Bettcher","lname":"Roehm","fname":"Nicolas","name":"Nicolas Roehm","translations":[{"localeCode":"fr","title":"Nicolas Roehm-Bettcher","slug":"nicolas-roehm-bettcher","url":"/fr/nicolas-roehm-bettcher"}]},"translations":[{"localeCode":"fr","title":"Comparer plusieurs champs avec Angular","slug":"angular-validation-formulaire-comparer-plusieurs-champs","url":"/fr/blog/angular-validation-formulaire-comparer-plusieurs-champs"}],"tags":[{"id":"content/tags/en/angular.mdx","localeCode":"en","title":"Angular","slug":"angular","url":"/en/blog/angular"}]},{"id":"content/articles/en/javascript-librairies-youtube-like.mdx","heroSection":{"heroTitle":"Javascript libraries #1 : Youtube","heroSubtitle":"","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Discover the best « Youtube like » plugins and scripts for your website!"}]}]},"heroSubtitleIsInline":false,"heroHasBackground":false,"heroImage":"/images/js-libs-youtube-1.png","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(180deg, #010093eb 0%, #ffd400 100%)","heroMs":"0","heroWidth":"100%","heroTitleMb":"","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroBlurImage":"","navbarBg":"","navbarLinkActive":"","navbarLinkHover":""},"imageAlt":"js libs youtube 1","imageWidth":845,"imageHeight":475},"seoSection":{"metaTitle":"Youtube : JS plugins & scripts #1","metaDescription":"This week JS libs makes you discover Youtube like plugins for your website","metaTags":"youtube js, youtube javascript, youtube libraries, youtube script, youtube plugin, youtube jquery","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2024-11-14T00:59:52.283Z","localeCode":"en","slug":"javascript-librairies-youtube-like","url":"/en/blog/javascript-librairies-youtube-like","ogId":"javascript-librairies-youtube-like-blog-en","ogImagePath":"/og/javascript-librairies-youtube-like-blog-en.png","type":"Article","title":"JS libs #1 : Youtube","subdomainKey":"blog","subdomain":"blog","body":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Discover a selection of "},{"type":"text","text":"web resources","bold":true},{"type":"text","text":", "},{"type":"text","text":"scripts","bold":true},{"type":"text","text":", "},{"type":"text","text":"plugins","bold":true},{"type":"text","text":" and "},{"type":"text","text":"CSS tools","bold":true},{"type":"text","text":" to customize your site! The first episode of "},{"type":"text","text":"JS libs","bold":true},{"type":"text","text":" is dedicated to "},{"type":"text","text":"Youtube plugins","bold":true},{"type":"text","text":". Happy customization!"}]},{"type":"h3","children":[{"type":"text","text":"Youtube Loading Bar"}]},{"type":"p","children":[{"type":"text","text":"A small jQuery plugin that allows you to add a « Youtube-like » loading bar to all your ajax links."}]},{"type":"h4","children":[{"type":"text","text":"Initialization example"}]},{"type":"code_block","lang":"javascript","value":"$('.ajax-link').loadingbar({\n  replaceURL : true, // You can visibly change the URL of the browser to reflect the clicked links by toggling this to true\n  target     : '#loadingbar-frame', // The container's selector where you want the ajax result to appear\n  direction  : 'right', // The direction where the the loading bar will progress\n});","children":[{"type":"text","text":""}]},{"type":"p","children":[{"type":"img","url":"/images/you-tube-loading-bar.png","alt":"Script Web : Youtube Loading Bar","caption":"845x475","children":[{"type":"text","text":""}]}]},{"type":"mdxJsxFlowElement","name":"buttons","children":[{"type":"text","text":""}],"props":{"buttons":[{"icon":"gitHub","label":"GitHub","link":"https://github.com/peachananr/loading-bar","style":"primary"},{"icon":"","label":"Demonstration","link":"http://peachananr.github.io/loading-bar/demo.html","style":"light"}]}},{"type":"h3","children":[{"type":"text","text":"Tubular.js"}]},{"type":"p","children":[{"type":"text","text":"Tubular is a jQuery plugin that allows you to set a YouTube video as the page background. To do this, all you have to do is integrate the plugin into your site and then link the container of your page to the ID of your Youtube video and you're done!"}]},{"type":"h4","children":[{"type":"text","text":"Initialization example"}]},{"type":"code_block","lang":"javascript","value":"$('#wrapper').tubular({ videoId : 'aJTGyyRXDh4' }); // where videoId is the YouTube ID","children":[{"type":"text","text":""}]},{"type":"h4","children":[{"type":"text","text":"Configurable options"}]},{"type":"code_block","lang":"javascript","value":"ratio            : 16 / 9, // Usually either 4/3 or 16/9 -- tweak as needed\nvideoId          : 'aJTGyyRXDh4',\nmute             : true,\nrepeat           : true,\nwidth            : $(window).width(), // No need to override\nwrapperZIndex    : 99,\nplayButtonClass  : 'tubular-play',\npauseButtonClass : 'tubular-pause',\nmuteButtonClass  : 'tubular-mute',\nvolumeUpClass    : 'tubular-volume-up',\nvolumeDownClass  : 'tubular-volume-down',\nincreaseVolumeBy : 10, // Increment value; volume range is 1-100\nstart            : 0 // Starting position in seconds","children":[{"type":"text","text":""}]},{"type":"p","children":[{"type":"img","url":"/images/you-tube-video-background.png","caption":"845x475","children":[{"type":"text","text":""}],"alt":"You Tube Video Background"}]},{"type":"mdxJsxFlowElement","name":"buttons","children":[{"type":"text","text":""}],"props":{"buttons":[{"icon":"google","label":"Google Code","link":"https://code.google.com/archive/p/jquery-tubular/","style":"primary"},{"icon":"","label":"Demonstration","link":"http://www.seanmccambridge.com/tubular/","style":"light"}]}},{"type":"h3","children":[{"type":"text","text":"PreViewTube"}]},{"type":"p","children":[{"type":"text","text":"A small jQuery plugin to animate the thumbnails of your YouTube videos on hover or continuously.It is possible to adjust the flow rate of the images for a better fluidity of the preview."}]},{"type":"h4","children":[{"type":"text","text":"Initialization example"}]},{"type":"code_block","lang":"javascript","value":"$('.preViewTube').PreViewTube();","children":[{"type":"text","text":""}]},{"type":"h4","children":[{"type":"text","text":"Configurable options"}]},{"type":"code_block","lang":"javascript","value":"interval: 500, // The animation rate in ms (default: 500ms)\nmode     : 'constant' // How the animation should run 'constant' or 'hover' (default : hover)","children":[{"type":"text","text":""}]},{"type":"p","children":[{"type":"img","url":"/images/you-tube-thumbnail-images.png","caption":"845x475","children":[{"type":"text","text":""}],"alt":"You Tube Thumbnail Images"}]},{"type":"mdxJsxFlowElement","name":"buttons","children":[{"type":"text","text":""}],"props":{"buttons":[{"icon":"gitHub","label":"GitHub","link":"https://github.com/vool/PreViewTube.js","style":"primary"},{"icon":"","label":"Demonstration","link":"http://previewtube.vool.ie/","style":"light"}]}},{"type":"h3","children":[{"type":"text","text":"Youtube autoplay playlist"}]},{"type":"p","children":[{"type":"text","text":"Automatic Youtube playlist player, this jQuery plugin also allows you to apply a cinema effect to your videos by \"turning off the light\" on your site! There are many options and settings available to customize how videos look and play."}]},{"type":"h4","children":[{"type":"text","text":"Initialization example"}]},{"type":"code_block","lang":"javascript","value":"$('#youtubevideo').youTubePlaylistResponsive({\n  listtype  : 'custom',\n  listvalue : 'gFftC9O9EZ0,-Fv-iUhLcys,Vv2YXjCWg1A,eIa7YxlHq3A'\n});","children":[{"type":"text","text":""}]},{"type":"h4","children":[{"type":"text","text":"Configurable options"}]},{"type":"code_block","lang":"javascript","value":"listtype        : 'search', // Choose between playlist, user_uploads, custom or search (max. 20 video's)\nlistvalue       : 'nature', // Playlist ID, channel name, ID's seperated by comma's (custom) or search for keywords\nautoplay        : false,    // If set to true the player will play onload\nshowrelated     : false,    // Show related movies at the end of the movie\nshowinfo        : true,     // Display thumbnail images for the videos in the playlist\nautohide        : false,    // Indicates whether the video controls will automatically hide after a video begins playing\ntheme           : false,    // Set the color scheme foer the player. true is white ad false is black\nmodestbranding  : true,     // Set to false to show the youtube logo in the player controll bar\niv_load_policy  : false,    // Setting to true will cause video annotations to be shown by default\nallowfullscreen : true,     // Show the fullscreen button\ncontrols        : true,     // This parameter indicates whether the video player controls will display\nhd              : false,    // Play the video's in HD at startup\nmaxwidth        : '',       // Here you can set the maxwidth in % or px\ncenter          : false,    // If maxwidth is set you can optional center the player\nlightsout       : true      // Mouseover the video turns out the light effect (background fading)","children":[{"type":"text","text":""}]},{"type":"p","children":[{"type":"img","url":"/images/you-tube-autoplay-playlist.png","caption":"845x475","children":[{"type":"text","text":""}],"alt":"You Tube Autoplay Playlist"}]},{"type":"mdxJsxFlowElement","name":"buttons","children":[{"type":"text","text":""}],"props":{"buttons":[{"icon":"codeFile","label":"Documentation","link":"https://www.cfcms.nl/youtube-responsive/documentation/index.html#styles","style":"primary"},{"icon":"","label":"Demonstration","link":"https://www.cfcms.nl/youtube-responsive/index.html","style":"light"}]}}]},"dateCreate":"2016-05-23T09:56:46.000Z","dateUpdate":"2021-05-13T01:50:56.000Z","author":{"id":"content/authors/en/nicolas-roehm-bettcher.mdx","heroSection":{"heroTitle":"Nicolas Roehm","heroSubtitle":"Software engineer","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Founder of FrenchStack, I design complete IT solutions."}]},{"type":"p","children":[{"type":"text","text":"Full-stack developer, I work mainly on frontend projects with Angular, React or Vue."}]},{"type":"p","children":[{"type":"text","text":"Designer in my spare time, here are some of my "},{"type":"a","url":"https://www.artstation.com/nicolas-roehm","title":"ArtStation - Nicolas Roehm","children":[{"type":"text","text":"graphic designs"}]},{"type":"text","text":"."}]}]},"heroSubtitleIsInline":true,"heroHasBackground":false,"heroImage":"/images/nicolas-roehm-bettcher.png","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(312deg, #0800ff 0%, #4300ff00 70%)","heroMs":"25%","heroWidth":"75%","heroTitleMb":"0.5rem","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroBlurImage":"","navbarBg":"#fff0","navbarLinkActive":"#6785be","navbarLinkHover":"#6785be"},"imageAlt":"nicolas roehm bettcher","imageWidth":0,"imageHeight":0},"seoSection":{"metaTitle":"Nicolas Roehm, Software engineer","metaDescription":"I design websites in their entirety: template, development, SEO, e-reputation, e-mailling and hosting","metaTags":"Nicolas Roehm, Software engineer, web, mobile, website","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2023-08-18T08:52:56.731Z","localeCode":"en","slug":"nicolas-roehm-bettcher","url":"/en/nicolas-roehm-bettcher","ogId":"nicolas-roehm-bettcher-en","ogImagePath":"/og/nicolas-roehm-bettcher-en.png","type":"Author","title":"Nicolas Roehm-Bettcher","lname":"Roehm","fname":"Nicolas","name":"Nicolas Roehm","translations":[{"localeCode":"fr","title":"Nicolas Roehm-Bettcher","slug":"nicolas-roehm-bettcher","url":"/fr/nicolas-roehm-bettcher"}]},"translations":[{"localeCode":"fr","title":"JS libs #1 : Youtube","slug":"javascript-librairies-youtube-like","url":"/fr/blog/javascript-librairies-youtube-like"}],"tags":[{"id":"content/tags/en/jquery.mdx","localeCode":"en","title":"jQuery","slug":"jquery","url":"/en/blog/jquery"}]}],"tags":[{"id":"content/tags/en/angular.mdx","heroSection":{"heroTitle":"Angular","heroSubtitle":"","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"TypeScript-based open-source web application framework led by Google"}]},{"type":"p","children":[{"type":"text","text":"and by a community of individuals and corporations"}]}]},"heroSubtitleIsInline":false,"heroHasBackground":false,"heroImage":"/images/angular.svg","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(140deg, rgb(0,69,145,0.83) 31%, rgb(221,7,49) 100%)","heroMs":"","heroWidth":"","heroTitleMb":"","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroBlurImage":"","navbarBg":"","navbarLinkActive":"","navbarLinkHover":""},"imageAlt":"angular","imageWidth":0,"imageHeight":0},"seoSection":{"metaTitle":"Angular","metaDescription":"TypeScript-based open-source web application framework led by Google and by a community of individuals and corporations","metaTags":"Angular, Typescript, Material, Bootstrap","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2023-08-18T08:52:56.731Z","localeCode":"en","slug":"angular","url":"/en/blog/angular","ogId":"angular-blog-en","ogImagePath":"/og/angular-blog-en.png","type":"Tag","title":"Angular","subdomainKey":"blog","subdomain":"blog","translations":[{"localeCode":"fr","title":"Angular","slug":"angular","url":"/fr/blog/angular"}]},{"id":"content/tags/en/jquery.mdx","heroSection":{"heroTitle":"jQuery","heroSubtitle":"","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"jQuery is an open-source JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax"}]}]},"heroSubtitleIsInline":false,"heroHasBackground":false,"heroImage":"/images/jquery-logo.svg","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(140deg, rgba(0,69,145,0) 31%, rgba(0,174,255,100) 100%)","heroMs":"","heroWidth":"","heroTitleMb":"","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroBlurImage":"","navbarBg":"","navbarLinkActive":"","navbarLinkHover":""},"imageAlt":"jquery logo","imageWidth":0,"imageHeight":0},"seoSection":{"metaTitle":"jQuery","metaDescription":"jQuery is an open-source JavaScript library designed to simplify HTML DOM tree traversal and manipulation, event handling, CSS animation, Ajax request","metaTags":"jQuery, Javascript, library, DOM HTML","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2023-08-18T08:52:56.731Z","localeCode":"en","slug":"jquery","url":"/en/blog/jquery","ogId":"jquery-blog-en","ogImagePath":"/og/jquery-blog-en.png","type":"Tag","title":"jQuery","subdomainKey":"blog","subdomain":"blog","translations":[{"localeCode":"fr","title":"jQuery","slug":"jquery","url":"/fr/blog/jquery"}]}],"author":{"id":"content/authors/en/nicolas-roehm-bettcher.mdx","heroSection":{"heroTitle":"Nicolas Roehm","heroSubtitle":"Software engineer","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Founder of FrenchStack, I design complete IT solutions."}]},{"type":"p","children":[{"type":"text","text":"Full-stack developer, I work mainly on frontend projects with Angular, React or Vue."}]},{"type":"p","children":[{"type":"text","text":"Designer in my spare time, here are some of my "},{"type":"a","url":"https://www.artstation.com/nicolas-roehm","title":"ArtStation - Nicolas Roehm","children":[{"type":"text","text":"graphic designs"}]},{"type":"text","text":"."}]}]},"heroSubtitleIsInline":true,"heroHasBackground":false,"heroImage":"/images/nicolas-roehm-bettcher.png","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(312deg, #0800ff 0%, #4300ff00 70%)","heroMs":"25%","heroWidth":"75%","heroTitleMb":"0.5rem","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroBlurImage":"","navbarBg":"#fff0","navbarLinkActive":"#6785be","navbarLinkHover":"#6785be"},"imageAlt":"nicolas roehm bettcher","imageWidth":0,"imageHeight":0},"seoSection":{"metaTitle":"Nicolas Roehm, Software engineer","metaDescription":"I design websites in their entirety: template, development, SEO, e-reputation, e-mailling and hosting","metaTags":"Nicolas Roehm, Software engineer, web, mobile, website","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2023-08-18T08:52:56.731Z","localeCode":"en","slug":"nicolas-roehm-bettcher","url":"/en/nicolas-roehm-bettcher","ogId":"nicolas-roehm-bettcher-en","ogImagePath":"/og/nicolas-roehm-bettcher-en.png","type":"Author","title":"Nicolas Roehm-Bettcher","lname":"Roehm","fname":"Nicolas","name":"Nicolas Roehm","translations":[{"localeCode":"fr","title":"Nicolas Roehm-Bettcher","slug":"nicolas-roehm-bettcher","url":"/fr/nicolas-roehm-bettcher"}]},"pages":[0],"curPage":1,"page":{"id":"content/subdomains/en/blog.mdx","heroSection":{"heroTitle":"Digital news","heroSubtitle":"","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Our online magazine presents new generation "},{"type":"text","text":"web trends","bold":true},{"type":"text","text":":"}]},{"type":"p","children":[{"type":"text","text":"design, SEO and SEM, marketing, development, optimization ..."}]},{"type":"p","children":[{"type":"text","text":"Discover our articles dedicated to "},{"type":"text","text":"new technologies","bold":true},{"type":"text","text":" and "},{"type":"text","text":"web standards","bold":true},{"type":"text","text":"!"}]},{"type":"p","children":[{"type":"text","text":"Subscribe via email or follow us on social networks to stay tuned about web news."}]}]},"heroSubtitleIsInline":false,"heroHasBackground":false,"heroImage":"/images/blog-news-web.jpg","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(353deg, rgba(255,129,0,0.64) 0%, #0018ffe0 120%)","heroMs":"","heroWidth":"","heroTitleMb":"","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroBlurImage":"","navbarBg":"","navbarLinkActive":"","navbarLinkHover":""},"imageAlt":"blog news web","imageWidth":0,"imageHeight":0},"seoSection":{"metaTitle":"Digital news","metaDescription":"Online magazine to learn the Web, find resources, browse trends and enjoy a hot coffee","metaTags":"Web Inspiration, Tutorials, web trends","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2023-08-18T08:52:56.731Z","localeCode":"en","slug":"blog","url":"/en/blog","ogId":"blog-en","ogImagePath":"/og/blog-en.png","type":"Subdomain","title":"Blog","subdomainKey":"blog","subdomain":"blog","translations":[{"localeCode":"fr","title":"Blog","slug":"blog","url":"/fr/blog"}],"canShare":true,"canComment":true,"hasAuthor":true,"tagsInPanel":true,"cardContainer":"col-md-6","cardTemplate":"default"},"global":{"id":"content/global/en/settings.json","localeCode":"en","header":{"nav":[{"href":"index","label":"Home"},{"href":"blog","label":"Blog"},{"href":"videos","label":"Videos"},{"href":"services","label":"Services"},{"href":"clients","label":"Clients"},{"href":"about","label":"About"},{"href":"contact-us","label":"Contact"}]},"footer":{"social":[{"website":"facebook","account":"StudioCenturio"},{"website":"youtube","account":"UCBLJwUROjmJPB1CIk0lPVdg"}],"hasSocial":true,"nav":[{"title":"Blog","links":[{"href":"blog/angular","label":"Angular"},{"href":"blog/jquery","label":"jQuery"}]},{"title":"Videos","links":[{"href":"videos/audiovisual-marketing","label":"Audiovisual Marketing"}]},{"title":"Services","links":[{"href":"services/graphic-design","label":"Design"},{"href":"services/web-mobile-development","label":"Development"},{"href":"services/web-marketing","label":"Marketing"},{"href":"services/it-training","label":"Training"}]},{"title":"FrenchStack","links":[{"href":"clients","label":"Clients"},{"href":"about","label":"About"},{"href":"contact-us","label":"Contact"}]}]},"bottom":{"dateCreate":"2015-12-27T05:55:00.000Z","nav":[{"href":"legal-informations","label":"Legal informations"},{"href":"privacy-policy","label":"Privacy policy"}],"hasLinks":true}}},"__N_SSG":true}