{"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.","PERFORMANCE":"Performance","ACCESSIBILITY":"Accessibility","BEST_PRACTICES":"Best Practices","SEO":"SEO","MOBILE":"Mobile","TABLET":"Tablet","DESKTOP":"Desktop","VISITORS":"Visitors","ENGAGEMENT":"Engagement","CONVERSIONS":"Conversions","JAN":"Jan","FEB":"Feb","MAR":"Mar","APR":"Apr","MAY":"May","JUN":"Jun","JUL":"Jul","AUG":"Aug","SEP":"Sep","OCT":"Oct","NOV":"Nov","DEC":"Dec","METHOD_PHONE":"Phone","METHOD_EMAIL":"Email","FOOTER_TAGLINE":"We create unique digital experiences for brands and businesses."},"subdomains":{"blog":"blog","clients":"clients","videos":"videos","services":"services"},"ogSection":"Technology"},"slugs":["en","blog","javascript-librairies-youtube-like"],"component":"article","article":{"id":"content/articles/en/javascript-librairies-youtube-like.mdx","heroSection":{"heroTitle":"Javascript Libraries #1: Youtube","heroSubtitle":"","heroBadge":"","heroColoredWords":"4","heroBreakTitle":"","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%)","heroMaxWidth":"","heroMs":"0","heroTitleMb":"","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroContentBlur":"","heroBlurImage":"","navbarBg":"","navbarBorderColor":"","navbarLinkActive":"","navbarLinkHover":""},"imageAlt":"js libs youtube 1","imageWidth":1344,"imageHeight":768},"seoSection":{"metaTitle":"Youtube: JS Plugins & Scripts #1","metaDescription":"This week, JS libs introduces you to 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-12-09T00:41:07.231Z","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","subtitle":"","browserUrl":"","textPreview":{"type":"root","children":[]},"subdomainKey":"blog","subdomain":"blog","draft":false,"logoAlt":"","logoWidth":0,"logoHeight":0,"icon":"play-btn","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 website! 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 customizing!"}]},{"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":"Demo","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 background of your webpage. Simply integrate the plugin into your site, link your page's container to the ID of your YouTube video, and you're set!"}]},{"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"}]}},{"type":"h3","children":[{"type":"text","text":"PreViewTube"}]},{"type":"p","children":[{"type":"text","text":"A small jQuery plugin to animate thumbnails of your YouTube videos on hover or continuously. The speed of image transitions can be adjusted for smoother previews."}]},{"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":"Demo","link":"http://previewtube.vool.ie/","style":"light"}]}},{"type":"h3","children":[{"type":"text","text":"Youtube autoplay playlist"}]},{"type":"p","children":[{"type":"text","text":"This jQuery plugin enables automatic playback of YouTube playlists and also applies a cinematic effect to your videos by \"dimming the lights\" on your site! Numerous options and parameters are available to customize the appearance and playback mode of your videos."}]},{"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":"Demo","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","heroBadge":"","heroColoredWords":"","heroBreakTitle":"","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Founder of French Stack, I create complete IT solutions."}]},{"type":"p","children":[{"type":"text","text":"Full-stack developer, I mainly work on frontend projects using Angular, React, or Vue."}]},{"type":"p","children":[{"type":"text","text":"Passionate about design, 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":"."}]},{"type":"mdxJsxFlowElement","name":"socialLinks","children":[{"type":"text","text":""}],"props":{"links":[{"icon":"gitHub","link":"https://github.com/NicolasRoehm"},{"icon":"stackOverflow","link":"https://stackoverflow.com/users/7462178/nicolas-roehm?tab=profile"},{"icon":"linkedIn","link":"https://en.linkedin.com/in/nicolas-roehm-bettcher"}]}}]},"heroSubtitleIsInline":true,"heroHasBackground":false,"heroImage":"/images/nicolas-roehm-bettcher.png","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(312deg, #0800ff 0%, #4300ff00 70%)","heroMaxWidth":"","heroMs":"25%","heroTitleMb":"0.5rem","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroContentBlur":"","heroBlurImage":"","navbarBg":"#fff0","navbarBorderColor":"","navbarLinkActive":"#6785be","navbarLinkHover":"#6785be"},"imageAlt":"nicolas roehm bettcher","imageWidth":0,"imageHeight":0},"seoSection":{"metaTitle":"Nicolas Roehm, Software Engineer","metaDescription":"Passionate about computing, I design complete websites: design, development, SEO, e-reputation, e-mailing, hosting.","metaTags":"Nicolas Roehm, Software Engineer, web, mobile, website","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2024-12-09T00:39:02.584Z","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","avatar":"/images/nicolas-roehm-avatar.png","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"}]},"page":{"id":"content/subdomains/en/blog.mdx","heroSection":{"heroTitle":"Digital news","heroSubtitle":"","heroBadge":"","heroColoredWords":"2","heroBreakTitle":"","heroShape":"shiny","heroGradient":"business-gradient","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%)","heroMaxWidth":"","heroMs":"","heroTitleMb":"","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroContentBlur":"","heroBlurImage":"","navbarBg":"","navbarBorderColor":"","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"},"neighbors":[{"id":"content/articles/en/angular-form-validation-compare-multiple-fields.mdx","heroSection":{"heroTitle":"Comparing Multiple Fields","heroSubtitle":"","heroBadge":"Angular Form Validation","heroColoredWords":"1","heroBreakTitle":"","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"How to validate two form fields by comparing them?"}]},{"type":"p","children":[{"type":"text","text":"Let's verify multiple fields with a high-level validator!"}]}]},"heroSubtitleIsInline":false,"heroHasBackground":false,"heroImage":"/images/angular-form-validation.png","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(180deg, transparent 0%, #0e256ddb 17%, #ff4444db 120%)","heroMaxWidth":"","heroMs":"","heroTitleMb":"","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroContentBlur":"","heroBlurImage":"","navbarBg":"","navbarBorderColor":"","navbarLinkActive":"","navbarLinkHover":""},"imageAlt":"angular form validation","imageWidth":1344,"imageHeight":768},"seoSection":{"metaTitle":"Angular Form Validation: Comparing Multiple Fields","metaDescription":"How to validate two form fields by comparing them? Let's verify multiple fields with a high-level validator!","metaTags":"form, angular, validation, angular-validation","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2024-12-07T00:09:54.046Z","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":"Comparing Multiple Fields with Angular","subtitle":"","browserUrl":"","textPreview":{"type":"root","children":[]},"subdomainKey":"blog","subdomain":"blog","draft":false,"logoAlt":"","logoWidth":0,"logoHeight":0,"body":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Suppose our form has date fields "},{"type":"text","text":"startDate","code":true},{"type":"text","text":" and "},{"type":"text","text":"endDate","code":true},{"type":"text","text":", and we want to ensure 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 controls, we need to define the validation function at 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 High-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 Field comparison\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 (with any arbitrary name), such as "},{"type":"text","text":"return { invalidEndDate: true }","code":true},{"type":"text","text":"."}]},{"type":"p","children":[{"type":"text","text":"Make sure it always returns "},{"type":"text","text":"null","code":true},{"type":"text","text":" for valid or irrelevant cases, and a non-null object in cases where an error should be triggered 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  The 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","heroBadge":"","heroColoredWords":"","heroBreakTitle":"","heroDescription":{"type":"root","children":[{"type":"p","children":[{"type":"text","text":"Founder of French Stack, I create complete IT solutions."}]},{"type":"p","children":[{"type":"text","text":"Full-stack developer, I mainly work on frontend projects using Angular, React, or Vue."}]},{"type":"p","children":[{"type":"text","text":"Passionate about design, 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":"."}]},{"type":"mdxJsxFlowElement","name":"socialLinks","children":[{"type":"text","text":""}],"props":{"links":[{"icon":"gitHub","link":"https://github.com/NicolasRoehm"},{"icon":"stackOverflow","link":"https://stackoverflow.com/users/7462178/nicolas-roehm?tab=profile"},{"icon":"linkedIn","link":"https://en.linkedin.com/in/nicolas-roehm-bettcher"}]}}]},"heroSubtitleIsInline":true,"heroHasBackground":false,"heroImage":"/images/nicolas-roehm-bettcher.png","heroVideoBackground":"","heroStyle":{"heroBg":"linear-gradient(312deg, #0800ff 0%, #4300ff00 70%)","heroMaxWidth":"","heroMs":"25%","heroTitleMb":"0.5rem","heroTitleColor":"","heroContentBg":"","heroContentAlign":"","heroContentBlur":"","heroBlurImage":"","navbarBg":"#fff0","navbarBorderColor":"","navbarLinkActive":"#6785be","navbarLinkHover":"#6785be"},"imageAlt":"nicolas roehm bettcher","imageWidth":0,"imageHeight":0},"seoSection":{"metaTitle":"Nicolas Roehm, Software Engineer","metaDescription":"Passionate about computing, I design complete websites: design, development, SEO, e-reputation, e-mailing, hosting.","metaTags":"Nicolas Roehm, Software Engineer, web, mobile, website","socialImageWidth":0,"socialImageHeight":0},"heroUpdatedAt":"2024-12-09T00:39:02.584Z","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","avatar":"/images/nicolas-roehm-avatar.png","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"}]},null],"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":"x","account":"RoehmNicolas"},{"website":"instagram","account":"roehm.nicolas"},{"website":"facebook","account":"thefrenchstack"},{"website":"youtube","account":"@frenchstack"}],"hasSocial":true,"nav":[{"title":"French Stack","links":[{"href":"clients","label":"Clients"},{"href":"about","label":"About"},{"href":"contact-us","label":"Contact"}]},{"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":"Blog","links":[{"href":"blog/angular","label":"Angular"},{"href":"blog/jquery","label":"jQuery"}]},{"title":"Videos","links":[{"href":"videos/audiovisual-marketing","label":"Audiovisual Marketing"}]}]},"bottom":{"dateCreate":"2015-12-27T05:55:00.000Z","nav":[{"href":"legal-informations","label":"Legal informations"},{"href":"privacy-policy","label":"Privacy policy"}],"hasLinks":true},"contactInfo":{"contactMethods":[{"id":"email","icon":"envelope","value":"frenchstack@gmail.com"},{"id":"phone","icon":"phone","value":"0651570751"}]}}},"__N_SSG":true}