Blog posts around Front End Development

<!DOCTYPE html>    <html lang="en-US" itemscope itemtype="http://schema.org/Blog" prefix="og: http://ogp.me/ns#">  <head>  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N939BGV');</script>  <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11" />  <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/style.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/stylesheet.css"> <link rel="stylesheet" type="text/css" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/ie.css"> <link rel="stylesheet" href="https://www.tothenew.com/blog/wp-content/themes/ttn/css/jquery.mCustomScrollbar.css"> <link href="https://www.tothenew.com/blog/wp-content/themes/ttn/images/favicon.ico" rel="icon" type="image/x-icon"/> <script src="https://assets.adobedtm.com/02384cfb0f99/28701c80a9a8/launch-353f9f5a1184-development.min.js" async></script>  <title>Blog posts around Front End Development | TO THE NEW Blog</title> <meta name="robots" content="max-image-preview:large" /> <link rel="canonical" href="https://www.tothenew.com/blog/category/front-end-development/" /> <link rel="next" href="https://www.tothenew.com/blog/category/front-end-development/page/2/" /> <meta name="generator" content="All in One SEO (AIOSEO) 4.3.7" /> <script type="application/ld+json" class="aioseo-schema"> {"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/www.tothenew.com\/blog\/category\/front-end-development\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/#listItem","position":1,"item":{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/","name":"Home","description":"Dive into TO THE NEW's blogs for insights on digital tech services, product engineering, Cloud solutions, and more. Our articles cover trending tech topics from design to development to MarTech.","url":"https:\/\/www.tothenew.com\/blog\/"},"nextItem":"https:\/\/www.tothenew.com\/blog\/category\/front-end-development\/#listItem"},{"@type":"ListItem","@id":"https:\/\/www.tothenew.com\/blog\/category\/front-end-development\/#listItem","position":2,"item":{"@type":"WebPage","@id":"https:\/\/www.tothenew.com\/blog\/category\/front-end-development\/","name":"Front End Development","url":"https:\/\/www.tothenew.com\/blog\/category\/front-end-development\/"},"previousItem":"https:\/\/www.tothenew.com\/blog\/#listItem"}]},{"@type":"CollectionPage","@id":"https:\/\/www.tothenew.com\/blog\/category\/front-end-development\/#collectionpage","url":"https:\/\/www.tothenew.com\/blog\/category\/front-end-development\/","name":"Blog posts around Front End Development | TO THE NEW Blog","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.tothenew.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.tothenew.com\/blog\/category\/front-end-development\/#breadcrumblist"}},{"@type":"Organization","@id":"https:\/\/www.tothenew.com\/blog\/#organization","name":"TO THE NEW Blog","url":"https:\/\/www.tothenew.com\/blog\/"},{"@type":"WebSite","@id":"https:\/\/www.tothenew.com\/blog\/#website","url":"https:\/\/www.tothenew.com\/blog\/","name":"TO THE NEW Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.tothenew.com\/blog\/#organization"}}]} </script>  <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="TO THE NEW Blog" /> <meta property="og:type" content="blog" /> <meta property="og:title" content="Blog posts around Front End Development | TO THE NEW Blog" /> <meta property="og:url" content="https://www.tothenew.com/blog/category/front-end-development/" /> <meta property="og:image" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <meta property="og:image:secure_url" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@tothenew" /> <meta name="twitter:title" content="Blog posts around Front End Development | TO THE NEW Blog" /> <meta name="twitter:image" content="https://www.tothenew.com/blog/wp-content/themes/ttn/images/social-logo.png" /> <link rel='dns-prefetch' href='//www.tothenew.com' /> <link rel='dns-prefetch' href='//ajax.googleapis.com' /> <link rel='dns-prefetch' href='//static.addtoany.com' /> <link rel='dns-prefetch' href='//tps.tothenew.com' /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Feed" href="https://www.tothenew.com/blog/feed/" /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Comments Feed" href="https://www.tothenew.com/blog/comments/feed/" /> <link rel="alternate" type="application/rss+xml" title="TO THE NEW Blog » Front End Development Category Feed" href="https://www.tothenew.com/blog/category/front-end-development/feed/" /> <link rel='stylesheet' id='sweetalert2-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/sweetalert2/sweetalert2.min.css?ver=10.16.7' type='text/css' media='all' /> <link rel='stylesheet' id='user-registration-general-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/user-registration.css?ver=2.3.5' type='text/css' media='all' /> <link rel='stylesheet' id='user-registration-smallscreen-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/user-registration-smallscreen.css?ver=2.3.5' type='text/css' media='only screen and (max-width: 768px)' /> <link rel='stylesheet' id='user-registration-my-account-layout-css' href='https://www.tothenew.com/blog/wp-content/plugins/user-registration/assets/css/my-account-layout.css?ver=2.3.5' type='text/css' media='all' /> <link rel='stylesheet' id='dashicons-css' href='https://www.tothenew.com/blog/wp-includes/css/dashicons.min.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='https://www.tothenew.com/blog/wp-includes/css/dist/block-library/style.min.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='mpp_gutenberg-css' href='https://www.tothenew.com/blog/wp-content/plugins/metronet-profile-picture/dist/blocks.style.build.css?ver=2.6.0' type='text/css' media='all' /> <link rel='stylesheet' id='classic-theme-styles-css' href='https://www.tothenew.com/blog/wp-includes/css/classic-themes.min.css?ver=6.2.2' type='text/css' media='all' /> <style id='global-styles-inline-css' type='text/css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} .wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;} :where(.wp-block-columns.is-layout-flex){gap: 2em;} .wp-block-pullquote{font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='ap-fileuploader-animation-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/loading-animation.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-fileuploader-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/fileuploader.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-jquery-ui-style-css' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-tagit-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/jquery.tagit.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-tagit-ui-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/tagit.ui-zendesk.css?ver=6.2.2' type='text/css' media='all' /> <link rel='stylesheet' id='fontawesome-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/fontawesome/css/all.css?ver=5.15.1' type='text/css' media='all' /> <link rel='stylesheet' id='ap-front-styles-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/css/frontend-style.css?ver=4.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='ap-lightbox-css-css' href='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/lightbox/css/lightbox.css?ver=4.0.2' type='text/css' media='all' /> <link rel='stylesheet' id='login-with-google-css' href='https://www.tothenew.com/blog/wp-content/plugins/login-with-google/assets/build/css/login.css?ver=1732271165' type='text/css' media='all' /> <link rel='stylesheet' id='ttn_new-fonts-css' href='https://tps.tothenew.com/css?family=Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext' type='text/css' media='all' /> <link rel='stylesheet' id='ttn_new-style-css' href='https://www.tothenew.com/blog/wp-content/themes/ttn/style.css?ver=6.2.2' type='text/css' media='all' />  <link rel='stylesheet' id='addtoany-css' href='https://www.tothenew.com/blog/wp-content/plugins/add-to-any/addtoany.min.css?ver=1.16' type='text/css' media='all' /> <link rel='stylesheet' id='wppb_stylesheet-css' href='https://www.tothenew.com/blog/wp-content/plugins/profile-builder/assets/css/style-front-end.css?ver=3.12.4' type='text/css' media='all' /> <script type='text/javascript' defer src='//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js?ver=6.2.2' id='ap-jquery-ui-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/tag-it.js?ver=4.0.2' id='ap-tagit-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/tag-it-custom.js?ver=4.0.2' id='ap-tagit-custom-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/fileuploader.js?ver=6.2.2' id='ap-fileuploader-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/lightbox/js/lightbox.js?ver=4.0.2' id='ap-lightbox-js-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/jquery/ui/core.min.js?ver=1.13.2' id='jquery-ui-core-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.13.2' id='jquery-ui-datepicker-js'></script> <script type='text/javascript' id='jquery-ui-datepicker-js-after'> jQuery(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});}); </script> <script type='text/javascript' id='ap-frontend-js-js-extra'> /* <![CDATA[ */ var ap_fileuploader = {"upload_url":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php","nonce":"59b1791b19"}; var ap_form_required_message = ["This field is required","anonymous-post-pro"]; var ap_captcha_error_message = ["Sum is not correct.","anonymous-post-pro"]; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/accesspress-anonymous-post-pro/js/frontend.js?ver=4.0.2' id='ap-frontend-js-js'></script> <script type='text/javascript' id='addtoany-core-js-before'> window.a2a_config=window.a2a_config||{};a2a_config.callbacks=[];a2a_config.overlays=[];a2a_config.templates={}; </script> <script type='text/javascript' defer async src='https://static.addtoany.com/menu/page.js' id='addtoany-core-js'></script> <script type='text/javascript' defer async src='https://www.tothenew.com/blog/wp-content/plugins/add-to-any/addtoany.min.js?ver=1.1' id='addtoany-jquery-js'></script> <script type='text/javascript' id='loadmore_script-js-extra'> /* <![CDATA[ */ var loadmore_params = {"ajaxurl":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/ajax.js?ver=6.2.2' id='loadmore_script-js'></script> <link rel="https://api.w.org/" href="https://www.tothenew.com/blog/wp-json/" /><link rel="alternate" type="application/json" href="https://www.tothenew.com/blog/wp-json/wp/v2/categories/3429" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.tothenew.com/blog/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.2.2" /> <style type="text/css" id="wp-custom-css"> .blogs h2 b, .blogs h3 b, .blogs h4, .blogs h5 b, .blogs h2 strong, .blogs h3 strong, .blogs h4 strong, .blogs h5 strong, body h2, body h3, body h4, body h5{ font-weight: 500 !important; } .blog-dashboard td, .blog-dashboard th{padding: 10px 0px;} body b, body strong{ font-weight: 600 !important; } /* css for tick mark list */ #blog-section{ border-bottom: 1px solid #e5e2e2; } .page-header.acs_search_header{ max-width: 1210px; margin: 0 auto; padding: 15px; width: 100%; } .acs_twenty{ background: #f6f4f4; } .search-no-results .acs_search_results_container { min-height: inherit; } .search-no-results .acs_search_header { text-align: center; padding-top: 60px; } #header .search-icon:after, #header .search-icon:before{ top: 26px; transition: inherit; } #header.clone .search-icon::before, #header.clone .search-icon::after { top: 10px; } .search .page-header { border: 0; padding: 0px 0px 30px 0px !important; } .search .entry-header h1 { font-size: 18px !important; margin: 0px 0px 20px 0px; line-height: 27px; } .search h2.entry-title { font-size: 16px !important; } .acs_search_results_items{ display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 0.5rem; grid-auto-rows: 1fr; max-width: 1210px; margin: 0 auto; width: 100%; } .acs_search_results_items .border{ padding-top: 25px; width:auto; } .acs_search_results_items .border .blue-box{ height:100%; } .acs_search_results_container .acs_search_results_status{ background: #f6f4f4; margin: 0; border-bottom: 1px solid #e5e2e2; padding: 20px 0px; } li.checksome:before { content: '✓'; font-size: 17px; font-weight: 700; } p.mandatory { color: red !important; text-align: right; } .ap-pro-front-form #mceu_28-body { white-space: break-spaces; } .hs_error_rollup>ul.no-list.hs-error-msgs.inputs-list { display: none !important; } .wp-admin .js .tmce-active .wp-editor-area { color: #333; } .btn-load-more { padding: 10px 40px; background: none; border-color: #d9177f; color: #d9177f; border-radius: unset; } .load_more.text-center { margin-bottom: 48px; } .btn-load-more:hover { background: #d9177f; color: #fff; } .addtoany_share_save_container.addtoany_content.addtoany_content_bottom { text-align: center; } .site-logo { background: url(/themes/custom/ttnd/images/TTN-logo.svg) no-repeat; } .social li a { background: url(/themes/custom/ttnd/images/social_icons.svg) no-repeat; } #new_post_form #mceu_28-body { white-space: break-spaces; } .ap-pro-front-form #mceu_11 { display: none; } form#loginform input#wp-submit:hover { background: #b40a65; } #header.clone #menu li.topmyaccount:last-child a:hover{ background: transparent; color: #d9167e !important; } #header.clone #menu > ul .menu-expanded.topmyaccount ul{ border-top: 0px; border-radius: 0px; } #header.clone #menu li.topmyaccount:last-child ul li:last-child { border-top: 1px solid #ccc; } #header.clone #menu li.topmyaccount:last-child ul li a:hover { border: 0px; } li.user-registration-MyAccount-navigation-link.user-registration-MyAccount-navigation-link--edit-password { display: none !important; } /* writing css for admin login*/ .ttn-login-tutorial { margin: 42px 0 30px; box-sizing: border-box; padding: 0px 30px; background-color: #fff; } #header.clone #menu li:last-child a{ border: inherit; padding-left: inherit; padding-right: inherit; color: inherit; padding: 10px 15px !important; } form#loginform { padding: 15px; border: 1px solid #dee0e9; box-shadow: none; background: 0 0; } form#loginform p{ margin:10px 0px; font-size:14px; color:#000; } form#loginform input#user_login,input#user_pass { border: 1px solid #ccc; outline: none !important; margin: 10px 0px; } form#loginform p.login-submit { text-align: center; } form#loginform input#wp-submit { width: 200px; background: #d9167e; color: #fff; font-size: 18px; margin: 5px 0px; height: 46px; line-height: 20px; } form#loginform p.login-remember label{ display: inline-block; padding-right: 10px; white-space: nowrap; } form#loginform input[type="checkbox"]{ border: 1px solid #ccc; outline: none !important; vertical-align: middle; width: 20%; margin-right: 7%; font-size: 14px; } /*css for admin login ends here*/ /*css for details update page starts here*/ #user-registration.horizontal{ border:1px solid #dee0e9; box-shadow:none; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { border-bottom:10px solid #d9167e !important; } .user-registration-MyAccount-content label { text-align: left; letter-spacing: 0px; color: #000000; margin: 14px 0px; } .select2-container .select2-selection--single { height:41px !important } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #000; line-height: 36px !important; font-size: 16px !important; font-weight:500 !important } #user-registration input { border: 1px solid #ccc; outline: none !important; padding: 0px 10px; font-size: 16px; font-weight: 500; } input#edit_profile { width: 33%; color: #fff; font-size: 16px; background: #d9167e; border: 0px; } input#edit_profile:hover{ background: #b40a65; border-color: #b40a65; } span.select2.select2-container.select2-container--default { width: auto !important; } @media screen and (max-width:991px){ .tag-cloud {height: auto;} #header.search-open .search-icon{ top: -12px; } } @media screen and (max-width:480px){ input#edit_profile{ width:50%; } } /*css for details upate page ends here*/ nav.user-registration-MyAccount-navigation { background: #000; } .logged-in .forlogout, .wp_google_login__divider{ display:none;} .forlogin { display:none;} .logged-in .forlogin { display:block;} #wppb-edit-user #description { height: 100px; } .wppb-form-field.wppb-default-password { display: none; } .topmyaccount ul { width: 123px !important; margin-top: -6px; } .search-results .breadcrumbs li:last-child { display: none; } .user-registration-register.register a { display: none; } .forlogout {text-align: center; margin: 20px;} .forlogout a{ width: 200px; background: #d9167e; color: #fff; font-size: 18px; height: 46px; padding: 8px 8px; display: inline-block;} .reject-notify { text-align: right; margin-right: 11px; margin-bottom: 10px; } .rejection-form-item textarea { width: 100%; min-height: 190px; } .userblog h2.entry-title a, .userblog h2.entry-title { color: #000; text-align:left; } .updated-user-blog { display: flex; } .userblog .updated-user-blog .button{ background: url(/blog/wp-ttn-blog/uploads/2021/05/edit.png); background-repeat: no-repeat; background-size: 18px; width: 72px; font-size: 16px; background-position: right 2px; height: 20px; box-shadow: none; } .userblog .entry-content { text-align: left; } .publishedblog .status-publish:hover, .unpublishedblog .status-publish, .userblog .status-draft:hover { transform: scale(1.04); transition: ease-in-out; transition-duration: .4s; } .publishedblog .status-publish:hover h2.entry-title a, .unpublishedblog .status-publish, .userblog .status-draft:hover h2.entry-title a{ color:#d9167e; } li.user-registration-MyAccount-navigation-link.user-registration-MyAccount-navigation-link--edit-blog { display: none !important; } #new_post_form .label-wrap { text-align: left; } .publishedblog .entry-content p { text-align: left; } #new_post_form input[type="checkbox"] { height: 16px; width: 16px; } .blog-cont-box { top: -32px !important; } #new_post_form input[type="submit"] { max-width: 200px; background: #d9167e; border: 0px !important; box-shadow: inherit !important; font-size: 16px; height: 46px; line-height: 46px; color: #fff; margin-bottom: 36px; } #new_post_form .ap-checkbox-wrap label.ap-checkbox-label { text-align: left; } .comment-form-cookies-consent label { margin-left: 28px; font-size: 13px; margin-top: -11px; } .comment-form-cookies-consent input { width: 20px; height: 20px; } .ap-checkbox-wrap label.ap-checkbox-label { font-size: 14px; font-weight: normal; width: 30%; display: inline-block; margin: 0; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background-color: transparent !important; border-bottom: 3px solid #d9177f; font-size: 15px; } h2.ap-pro-front-form-title { text-align: center; margin-bottom: 12px !important; } .thankyounav { display:none;} .logged-in .thankyounav { display:block;} .ur-frontend-form label.user-registration-error { padding: 0px; font-weight: 400; margin-top: -9px !important; } .prftxt>i { display: none; } .ur-frontend-form #ur-submit-message-node { margin: -32px 0 0; font-size: 16px; } .user-registration-MyAccount-content fieldset { border:none; padding: 0;} .cntlinehght { line-height: 28px; font-size: 20px; } .user-registration-error::before { content: none; } .ur-frontend-form input { border: 1px solid #ccc; } .user-registration-error { border-top-color: #fff; background: no-repeat; color: #f4000a; } .ur-field-item.field-description { width: 97% !important; } .ur-frontend-form .ur-form-row .ur-form-grid textarea { border: 1px solid #a2a7ae; } .user-registration-account .user-registration-profile-fields .form-row { display: block !important; } .user-registration-profile-fields p { display: flex; justify-content: center; margin-top: 10px; } .user-registration-profile-fields label { text-align: left; } .user-registration-page #secondary { display: none; } .thank_login { padding: 10px 40px; background: #d9177f; color: #fff !important; border-color: #d9177f; text-decoration: none !important; } .user-registration-submit-Button {background: #d9177f; color: #fff !important; border-color: #d9177f;} .user-registration-Button { background: none repeat scroll 0 0 #d9177f; border: medium none; color: #fff; cursor: pointer; font-weight: 600; padding: 10px 0 6px; text-transform: uppercase; width: 100%;} #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { color: #fff; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background-color: #d9177f; } #user-registration p.blogtext { margin: 23px 0px 0px; letter-spacing: 0px; color: #000000; text-align: center; font-size: 16px; } .user-registration-account .status-publish, .userblog .status-draft{ width: 74%; margin: 0 auto; -webkit-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); -moz-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); margin-top: 40px; padding: 28px; margin-bottom: 40px; } .ap-pro-front-form .ap-form-error { margin-top: 4px; } .ap-pro-front-form .author-name .ap-pro-textfield { cursor: not-allowed; } .page-template-default .status-publish{ width: 74%; margin: 0 auto; -webkit-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); -moz-box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); box-shadow: 0px 0px 7px 0px rgba(194, 194, 194, 1); margin-top: 40px; padding: 28px; margin-bottom: 40px; } .page-template-default header.entry-header h1 { font-size: 28px; } .page-template-default header.entry-header{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #ccc; } .page-template-default header.entry-header:after { position: absolute; height: 5px; width: 20%; background: #d9167e; content: ""; bottom: -3px; } h2.ap-pro-front-form-title { text-align: center; } .ap-pro-form-field-wrapper { margin-bottom: 0px; } .ap-pro-form-field-wrapper p { padding-top: 10px; } .ap-pro-form-field-wrapper .label-wrap label { padding-bottom: 0px; } .ap-pro-form-field .wp-editor-container textarea.wp-editor-area { min-height: 148px; } .ap-pro-form-field-wrapper.category select { padding: 10px; font-size: 15px; } .ap-pro-form-field-wrapper.payment-agreement { text-align: center; } .payment-agreement.ap-pro-form-field-wrapper input[type="submit"] { max-width: 200px; background: #d9167e; border: 0px !important; box-shadow: inherit !important; font-size: 16px; height: 46px; line-height:46px; } .payment-agreement.ap-pro-form-field-wrapper input[type="submit"]:hover { background: #b40a65 !important; } .user-registration-account header.entry-header h1 { font-size: 28px; } .user-registration-account header.entry-header{ position: relative; padding-bottom: 20px; border-bottom: 1px solid #ccc; } .user-registration-account header.entry-header:after { position: absolute; height: 5px; width: 20%; background: #d9167e; content: ""; bottom: -3px; } .blog-user-registration .post-title input, .blog-user-registration .post-content input, .blog-user-registration .primary-competency input, .blog-user-registration .ap-checkbox-wrap input{background: #F8F8F8 0% 0% no-repeat padding-box; box-shadow: inset 0px 3px 6px #7B7B7B29; border: 1px solid #BFBFBF; opacity: 1;} span.edit-link { display: none !important; } #user-registration { margin: 42px 0 30px; } .user-registration-account .login .form-row{ justify-content: center; display: flex; flex-wrap: wrap; } .user-registration-account .form-row.form-row-wide{ display:block } .user-registration-account .form-row input[type=submit]{ width: 200px; background: #d9167e; color: #fff; font-size: 18px; margin-top: 10px; height: 46px; line-height: 20px; } .ur-frontend-form .ur-button-container .ur-submit-button, .user-registration-MyAccount-content .ap-form-submit-wrapper input { margin: 20px auto 34px; width: 200px; background: #d9167e; color: #fff; font-size: 18px; height: 46px; line-height: 20px; } .user-registration-MyAccount-content .ap-form-submit-wrapper{ text-align: center; } .user-registration-MyAccount-content .ap-form_field select{ font-size: 16px; } .user-registration-MyAccount-content .ap-form-field-wrapper label{ font-size: 14px; } .ur-frontend-form { margin-top: 38px; padding: 30px; } .ur-frontend-form .ur-field-item { width: 46.666%; display: inline-block; margin: 0 1.333% 0px !important; } .ap-form-wrapper{ text-align:left; } .user-registration-account span.edit-link { margin-top: -21px; display: block; } .publishedblog { padding-bottom: 40px; } .publishedblog h2 { margin-bottom: 12px !important; } span.user-registration-nick-name { display: none; } .publishedblog .status-publish, .unpublishedblog .status-publish, .userblog .status-draft{ width: 47%; display: inline-block; margin: 0 1%; margin-top: 26px; vertical-align: top; min-height: 330px; } #user-registration p { color: #333; font-size: 14px; } #user-registration .user-registration-MyAccount-content .edit-password legend, #user-registration .user-registration-MyAccount-content h2{ font-family: "Montserrat", sans-serif; color: #000000; opacity: 1; text-align: center;} .user-registration-message a { padding: 12px 10px; clear: both; font-size: 14px; display: block; margin-left: 14px; border: 1px solid #d9167e; max-width: 178px; margin: 0 auto; background: #d9167e; color: #fff; text-decoration: none; } .user-registration-message a:hover{ background:#b40a65; } .user-registration-message { border-top-color: #d9167e; background: rgba(143,174,27,.1); color: #000000; font-size: 16px; font-weight: 600; text-align: center; display: block; margin-bottom: 12px !important; } .register .buisness-error, .register .user-registration-error { font-size: 13px !important; position: absolute; } form.register .ur-field-item { position: relative; } input[type=checkbox]{-webkit-appearance: auto;} .ap-pro-form-field-wrapper input[type="checkbox"] { height: 16px; width: 16px; } .register .user-registration-message{display:none;} #header #menu > ul .menu-expanded ul li:last-child a{text-transform: none;} .category-list ul li a { text-transform: inherit; } @media screen and (max-width: 1023px){ #header .search-icon{ background-position: -10px 13px; background-size: 180%; background-color: transparent !important; } #header .search-icon span{display:none;} .site-logo{background-position: -98px 3px !important;} } @media screen and (max-width: 991px){ .ttn-login-tutorial{ padding: 0 !important; } .user-registration { padding: 0 !important; } .ur-frontend-form .ur-field-item, .page-template-default .status-publish { width: 100%; margin: 0 !important; } .ur-frontend-form { padding: 10px; } .publishedblog .status-publish, .unpublishedblog .status-publish, .userblog .status-draft{width: 100%;margin:10px 0px;} .ap-checkbox-wrap label.ap-checkbox-label{ width:50%; } .acs_search_results_items{ grid-template-columns: repeat(2,1fr); } } @media screen and (max-width: 800px){ div.ap-form-wrapper { padding: 10px 8px !important; } .breadcrumbs{ height: 32px; overflow:inherit; white-space:inherit; } .breadcrumbs li:before { padding: 0 8px; } .page-template-default .status-publish{ padding: 20px 10px; } .user-registration-MyAccount-content .wppb-user-forms ul{ padding: 0 15px; } .wppb-user-forms ul li { margin: 0; padding-bottom: 14px; display: flex; justify-content: center; flex-wrap: wrap; } .wppb-user-forms label { text-align: left; margin: 2px 0px; width: 100%; font-size: 13px; } .wppb-user-forms .wppb-form-field input, .wppb-user-forms textarea { width: 100% !important; } } @media screen and (max-width: 600px){ #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { padding: 10px 4px; font-size: 15px !important; letter-spacing: -1px; } #user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link{display: inline-block;} div.ap-checkbox-wrap label.ap-checkbox-label { width: 50%; font-size: 12px !important; } div.ap-pro-form-field-wrapper input[type="checkbox"] { margin: 0 5px 5px 0; } #user-registration .user-registration-MyAccount-content { padding: 15px 0px; } .acs_search_results_items{ grid-template-columns: auto; } .col-xs-1.col-md-1.clear-all-filter{ bottom: 20px; } } @media screen and (max-width: 480px){ .category-list .cat-dropdown ul{max-height: 130px;overflow: auto;} .category-list .cat-dropdown .sort-by-dropdown-blog{max-height:inherit;} .ap-checkbox-wrap label.ap-checkbox-label{ width:100%; } div.ap-pro-form-field-wrapper input[type="checkbox"] { height: 14px; width: 12px; } } @media screen and (max-width:1024px){ #header ul#menu-ttn-menu li a { padding: 11px 20px 15px 0px !important; } } </style> <meta name="description" itemprop="description" content="Front End Development blog posts. Read blog posts around Front End Development at TO THE NEW blog. In-depth blog posts about Front End Development by experts - page 1" /> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.min.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.selectbox-0.2.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/bootstrap.min.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.validate.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/application.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/masonry.pkgd.min.js"></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/jquery.cookie.min.js"></script>  <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '296707276361693'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=296707276361693&ev=PageView&noscript=1" /></noscript>   <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">  </head> <body class="archive category category-front-end-development category-3429 user-registration-page custom-font-enabled">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N939BGV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-M2TS6P" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-M2TS6P');</script>  <div id="container"> <header id="header"> <div class="container"> <div class="clearfix region-header"> <div class="logo"> <a rel="nofollow" href="/" class="site-logo"></a> </div> <div class="custom-search"> <form accept-charset="UTF-8" id="views-exposed-form-search-result-page-1" method="get" action="/search"> <div class="form--inline clearfix"> <label for="edit-combine"> </label> <input type="text" class="form-text" maxlength="128" size="30" value="" name="search_keyword" id="edit-combine" placeholder="Enter search term" /> <input type="submit" class="button js-form-submit form-submit" value="Apply" id="edit-submit-search-result" /> </div> </form> </div> <nav class="clearfix"> <div id="menu"> <ul id="menu-ttn-menu" class="clearfix menu"><li class="menu-expanded"><a href="/services">Services</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/digital-engineering">Digital Engineering</a></li> <li class="menu-item"><a href="/cloud-devops">Cloud & DevOps</a></li> <li class="menu-item"><a href="/media-and-entertainment-solutions">Media & Entertainment Solutions</a></li> <li class="menu-item"><a href="/data-analytics">Data & Analytics</a></li> <li class="menu-item"><a href="/cx">CX & Content</a></li> <li class="menu-item"><a href="/digital-marketing">Digital Marketing</a></li> </ul> </li> <li class="menu-expanded"><a href="/industries">Industries</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/industries/isv">Independent Software Vendors</a></li> <li class="menu-item"><a href="/industries/media-entertainment">Media & Entertainment</a></li> <li class="menu-item"><a href="/industries/consumer-internet">Consumer Internet</a></li> <li class="menu-item"><a href="/industries/ecommerce">E-Commerce</a></li> <li class="menu-item"><a href="/industries/bfsi">Financial Services</a></li> <li class="menu-item"><a href="/industries/healthcare-pharma">Healthcare & Pharma</a></li> <li class="menu-item"><a href="/industries/igaming">iGaming</a></li> </ul> </li> <li class="menu-expanded"><a href="/solutions">Solutions</a><span class="arrow"></span> <ul> <li class="menu-item has-description"><a href="/solutions/hawk">HAWK<span class="wrap">| Infra monitoring & Log Analytics</span></a></li> <li class="menu-item has-description"><a href="/solutions/Prism">Prism<span class="wrap">| AI-based Test Automation</span></a></li> <li class="menu-item has-description"><a href="/solutions/nimbus">Nimbus<span class="wrap">| Custom Data Ingestion Solution</span></a></li> <li class="menu-item has-description"><a href="/solutions/videoready">VideoReady<span class="wrap">| OTT & Video CMS framework</span></a></li> <li class="menu-item has-description"><a href="/solutions/bolt">BOLT<span class="wrap">| Faster AEM Development</span></a></li> </ul> </li> <li class=""><a href="/technologies">Technologies</a></li> <li class="menu-expanded"><a href="/insights">Insights</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/success-stories">Success Stories</a></li> <li class="menu-item"><a href="/insights?resource=67">Whitepapers</a></li> <li class="menu-item"><a href="/insights?resource=66">Webinars</a></li> <li class="menu-item"><a href="/insights?resource=652">Podcasts</a></li> <li class="menu-item"><a href="/blog/">Blogs</a></li> <li class="menu-item"><a href="/insights?resource=62">e-Books</a></li> <li class="menu-item"><a href="/insights?resource=162">Magazines</a></li> <li class="menu-item"><a href="/insights?resource=574">Spotlight</a></li> </ul> </li> <li class=""><a href="/careers">Careers</a></li> <li class="menu-expanded"><a href="/about-us">About</a><span class="arrow"></span> <ul> <li class="menu-item"><a href="/about-us">About Us</a></li> <li class="menu-item"><a href="/leadership">Leadership</a></li> <li class="menu-item"><a href="/partnership">Partners</a></li> <li class="menu-item"><a href="/press-releases">Press Releases</a></li> <li class="menu-item"><a href="/media-coverage">Media Coverage</a></li> <li class="menu-item"><a href="/awards">Awards & Analyst Relations</a></li> <li class="menu-item"><a href="/events">Events</a></li> <li class="menu-item"><a href="/our-social-impact">CSR</a></li> </ul> </li> <li class=""><a href="/contact-us" id=h-contact-us>Contact Us</a></li> </ul> </div> <div class="menu-btn"> <div class="burger-container"> <div id="burger"> <div class="bar topBar"></div> <div class="bar btmBar"></div> </div> </div> </div> <a class="search-icon" href="#">Search <span>|</span></a> </nav> </div> </div> </header> <div id="banner" class="clearfix"> <div class="overlay"> <img src="https://www.tothenew.com/blog/wp-content/themes/ttn/images/banner/blog_banner.png" alt="Blog"> </div> <div class="banner-text"> <h2>Blogs</h2> <p>Told you, we love sharing!</p> <div class="subscribe-mobo-btn header-subscribe"> <div class="subscrb"> <div class="subscribe"> <ul class="sign-up-frm"> <li class="width100"> <input class="submit subscribeButton" type="submit" value="Subscribe Blogs"> </li> </ul> </div> </div> </div> </div> <div class="col-xs-12 breadcrumbs padding0"> <ul>  <li><a rel="nofollow" href="/">Home</a></li><li><a rel="v:url" property="v:title" title="Go to TO THE NEW Blog." href="https://www.tothenew.com/blog/" class="home">Blog</a></li><li><span property="v:title">Front End Development</span></li> </ul> </div> </div> <div class="clearfix category-list white"> <div class="container"> <div class="row"> <div class="normal"> <div class="col-xs-9 col-sm-9 col-md-9 category-filter-outer-b"> <div class="col-xs-8 col-md-4 main-cat category-filter-blog"> <div class="heading category-head">Category</div> <div class="cat-dropdown category-filter-blog-dropdown"> <div class="cat-drop-inner mCustomScrollbar inset-dark"> <div class="heading">Categories</div> <ul> <li class="cat-item cat-item-5867"><a href="https://www.tothenew.com/blog/category/net/">.NET</a> </li> <li class="cat-item cat-item-5868"><a href="https://www.tothenew.com/blog/category/adobe/">Adobe</a> </li> <li class="cat-item cat-item-1993"><a href="https://www.tothenew.com/blog/category/agile-2/">Agile</a> </li> <li class="cat-item cat-item-4685"><a href="https://www.tothenew.com/blog/category/anaytics/">Anaytics</a> </li> <li class="cat-item cat-item-518"><a href="https://www.tothenew.com/blog/category/android/">Android</a> </li> <li class="cat-item cat-item-1439"><a href="https://www.tothenew.com/blog/category/angular/">AngularJS</a> </li> <li class="cat-item cat-item-2026"><a href="https://www.tothenew.com/blog/category/appsec/">Application Security</a> </li> <li class="cat-item cat-item-1818"><a href="https://www.tothenew.com/blog/category/automation-testing-testing-2/">Automation Testing</a> </li> <li class="cat-item cat-item-1174"><a href="https://www.tothenew.com/blog/category/aws-2/">AWS</a> </li> <li class="cat-item cat-item-4837"><a href="https://www.tothenew.com/blog/category/b2b-2/">B2B</a> </li> <li class="cat-item cat-item-4925"><a href="https://www.tothenew.com/blog/category/b2c/">B2C</a> </li> <li class="cat-item cat-item-5869"><a href="https://www.tothenew.com/blog/category/ba/">BA</a> </li> <li class="cat-item cat-item-5870"><a href="https://www.tothenew.com/blog/category/bi/">BI</a> </li> <li class="cat-item cat-item-1395"><a href="https://www.tothenew.com/blog/category/big-data/">Big Data</a> </li> <li class="cat-item cat-item-4778"><a href="https://www.tothenew.com/blog/category/blockchain/">Blockchain</a> </li> <li class="cat-item cat-item-4308"><a href="https://www.tothenew.com/blog/category/cloud-devops-technology/">Cloud</a> </li> <li class="cat-item cat-item-4682"><a href="https://www.tothenew.com/blog/category/cloud-managed-services/">Cloud Managed Services</a> </li> <li class="cat-item cat-item-3479"><a href="https://www.tothenew.com/blog/category/connected-tv/">Connected TV</a> </li> <li class="cat-item cat-item-1541"><a href="https://www.tothenew.com/blog/category/corporate/">Corporate</a> </li> <li class="cat-item cat-item-4835"><a href="https://www.tothenew.com/blog/category/covid-19/">Covid 19</a> </li> <li class="cat-item cat-item-4831"><a href="https://www.tothenew.com/blog/category/data-analytics/">Data & Analytics</a> </li> <li class="cat-item cat-item-6194"><a href="https://www.tothenew.com/blog/category/data-engineering/">Data Engineering</a> </li> <li class="cat-item cat-item-5871"><a href="https://www.tothenew.com/blog/category/data-science/">Data Science</a> </li> <li class="cat-item cat-item-5872"><a href="https://www.tothenew.com/blog/category/database-administration/">Database Administration</a> </li> <li class="cat-item cat-item-2348"><a href="https://www.tothenew.com/blog/category/devops-technology/">DevOps</a> </li> <li class="cat-item cat-item-2251"><a href="https://www.tothenew.com/blog/category/digital-analytics/">Digital Analytics</a> </li> <li class="cat-item cat-item-4839"><a href="https://www.tothenew.com/blog/category/digital-engineering/">Digital Engineering</a> </li> <li class="cat-item cat-item-1964"><a href="https://www.tothenew.com/blog/category/digital-marketing/">Digital Marketing</a> </li> <li class="cat-item cat-item-4112"><a href="https://www.tothenew.com/blog/category/digital-transformation-2/">Digital Transformation</a> </li> <li class="cat-item cat-item-5873"><a href="https://www.tothenew.com/blog/category/dm-analytics/">DM – Analytics</a> </li> <li class="cat-item cat-item-3602"><a href="https://www.tothenew.com/blog/category/drupal/">Drupal</a> </li> <li class="cat-item cat-item-3887"><a href="https://www.tothenew.com/blog/category/user-experience-design/">Experience Design</a> </li> <li class="cat-item cat-item-3429 current-cat"><a aria-current="page" href="https://www.tothenew.com/blog/category/front-end-development/">Front End Development</a> </li> <li class="cat-item cat-item-7"><a href="https://www.tothenew.com/blog/category/grails/">Grails</a> </li> <li class="cat-item cat-item-6853"><a href="https://www.tothenew.com/blog/category/healthtech/">HealthTech</a> </li> <li class="cat-item cat-item-4687"><a href="https://www.tothenew.com/blog/category/hybrid/">Hybrid</a> </li> <li class="cat-item cat-item-5981"><a href="https://www.tothenew.com/blog/category/igaming/">iGaming</a> </li> <li class="cat-item cat-item-1814"><a href="https://www.tothenew.com/blog/category/industry-buzz/">Industry Buzz</a> </li> <li class="cat-item cat-item-1400"><a href="https://www.tothenew.com/blog/category/ios/">iOS</a> </li> <li class="cat-item cat-item-446"><a href="https://www.tothenew.com/blog/category/java/">Java/JVM</a> </li> <li class="cat-item cat-item-5876"><a href="https://www.tothenew.com/blog/category/js/">JS</a> </li> <li class="cat-item cat-item-1817"><a href="https://www.tothenew.com/blog/category/manual-testing/">Manual Testing</a> </li> <li class="cat-item cat-item-1953"><a href="https://www.tothenew.com/blog/category/marketing/">Marketing</a> </li> <li class="cat-item cat-item-4926"><a href="https://www.tothenew.com/blog/category/marketing-automation/">Marketing Automation</a> </li> <li class="cat-item cat-item-4684"><a href="https://www.tothenew.com/blog/category/mean-2/">MEAN</a> </li> <li class="cat-item cat-item-4686"><a href="https://www.tothenew.com/blog/category/mobile-automation-testing-2/">Mobile Automation Testing</a> </li> <li class="cat-item cat-item-1772"><a href="https://www.tothenew.com/blog/category/mobility/">Mobility</a> </li> <li class="cat-item cat-item-5877"><a href="https://www.tothenew.com/blog/category/msp/">MSP</a> </li> <li class="cat-item cat-item-1185"><a href="https://www.tothenew.com/blog/category/node-js-2/">Node.js</a> </li> <li class="cat-item cat-item-3917"><a href="https://www.tothenew.com/blog/category/product-engineering-2/">Product Engineering</a> </li> <li class="cat-item cat-item-5878"><a href="https://www.tothenew.com/blog/category/project-management/">Project Management</a> </li> <li class="cat-item cat-item-5879"><a href="https://www.tothenew.com/blog/category/python/">Python</a> </li> <li class="cat-item cat-item-5880"><a href="https://www.tothenew.com/blog/category/qe/">QE</a> </li> <li class="cat-item cat-item-5881"><a href="https://www.tothenew.com/blog/category/react-native/">React Native</a> </li> <li class="cat-item cat-item-3038"><a href="https://www.tothenew.com/blog/category/react-js/">React.js</a> </li> <li class="cat-item cat-item-4670"><a href="https://www.tothenew.com/blog/category/sails-js/">Sails JS</a> </li> <li class="cat-item cat-item-6009"><a href="https://www.tothenew.com/blog/category/salesforce/">Salesforce</a> </li> <li class="cat-item cat-item-5270"><a href="https://www.tothenew.com/blog/category/digital-marketing/seo/">SEO</a> </li> <li class="cat-item cat-item-3477"><a href="https://www.tothenew.com/blog/category/smart-tv/">Smart TV</a> </li> <li class="cat-item cat-item-1994"><a href="https://www.tothenew.com/blog/category/software-development/">Software development</a> </li> <li class="cat-item cat-item-1"><a href="https://www.tothenew.com/blog/category/technology/">Technology</a> </li> <li class="cat-item cat-item-1816"><a href="https://www.tothenew.com/blog/category/testing-2/">Testing</a> </li> <li class="cat-item cat-item-3109"><a href="https://www.tothenew.com/blog/category/user-experience/">User Experience</a> </li> <li class="cat-item cat-item-4683"><a href="https://www.tothenew.com/blog/category/video-solutions/">Video Solutions</a> </li> <li class="cat-item cat-item-4488"><a href="https://www.tothenew.com/blog/category/web-content-management/">Web Content Management</a> </li> <li class="cat-item cat-item-5021"><a href="https://www.tothenew.com/blog/category/wordpress/">WordPress</a> </li> </ul> </div> </div> </div> <div class="col-xs-2 col-md-3 main-cat year-filter-blog"> <div class="heading"> Sort By </div> <div class="cat-dropdown year-filter-blog-dropdown"> <div class="cat-drop-inner mCustomScrollbar inset-dark"> <ul class='sort-by-dropdown-blog'> <li class="latest active">Latest</li> <li class="year"> <div class="year-heading"> Year</div> <div class="year-dropdown"> <ul class='year-filter-dropdown-blog'> <li class="cat-item"> <a href="">2024</a> </li> <li class="cat-item"> <a href="">2023</a> </li> <li class="cat-item"> <a href="">2022</a> </li> <li class="cat-item"> <a href="">2021</a> </li> <li class="cat-item"> <a href="">2020</a> </li> <li class="cat-item"> <a href="">2019</a> </li> <li class="cat-item"> <a href="">2018</a> </li> <li class="cat-item"> <a href="">2017</a> </li> <li class="cat-item"> <a href="">2016</a> </li> <li class="cat-item"> <a href="">2015</a> </li> <li class="cat-item"> <a href="">2014</a> </li> <li class="cat-item"> <a href="">2013</a> </li> <li class="cat-item"> <a href="">2012</a> </li> <li class="cat-item"> <a href="">2011</a> </li> <li class="cat-item"> <a href="">2010</a> </li> <li class="cat-item"> <a href="">2009</a> </li> <li class="cat-item"> <a href="">2008</a> </li> </ul></div> </li> </ul> </div> </div> </div> <div class="search-form"> <form id="searchform" action="https://www.tothenew.com/blog/"> <div> <input type="submit" id="searchsubmit" value="Search" class="btn" /> <input type="text" id="textstring" name="s" id="s" value="Search blog" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> </div> </form> </div> <div class="col-xs-1 col-md-1 clear-all-filter"> </div> </div> <div class="col-xs-3 col-sm-3 col-md-3 subscribe-mobo-btn menu-subscribe"> <div class="col-md-12 subscrb"> <div class="subscribe">  <ul class="sign-up-frm"> <li class="width100">  <input class="submit subscribeButton" type="submit" value="Subscribe Blogs"> </li> </ul>  </div> </div> </div> </div> </div> </div> </div> </div> <section id="blog-section testarchive"> <form class="filter-blog-form" method="GET" style="display:none;" action="https://www.tothenew.com/blog"> <input type="text" value="" name="y" id ="year" /> <input type="text" value="latest" name="l" id ="latest" /> <input type="submit" value="apply" id="submit-blog-filter"> </form> <div id="blog-section" style="padding-top: 19px;"> <div class="container"> <div class="row"> <div class="col-md-12 latest_posts_wrapper left-content"> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/adobe/" title="View all posts in Adobe">Adobe</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/software-development/" title="View all posts in Software development">Software development</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/building-custom-vue-js-component-and-integration-with-aem/" rel="bookmark"><span class="heading-outer"><span class="heading">Building Custom Vue.js Component and integration with AEM</span></span></a></header><p>Overview of AEM and vue.js Adobe Experience Manager (AEM) is a powerful content management system that allows for seamless content creation and management. On the other hand, vue.js is a progressive JavaScript framework that simplifies front-end development. Integrating AEM with vue.js can enhance the user experience and streamline development processes. Benefits of Integrating AEM with […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/suraj-rath/" title="View all posts by Suraj Rath" rel="nofollow">Suraj Rath</a> <br> </u></div> <div class="col-sm-6 by-dates">April 30, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/angular/" title="View all posts in AngularJS">AngularJS</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/mean-2/" title="View all posts in MEAN">MEAN</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/enhancing-javascript-coding-with-ai-using-visual-studio-code/" rel="bookmark"><span class="heading-outer"><span class="heading">Enhancing JavaScript Coding with AI: Using Visual Studio Code</span></span></a></header><p>In the rapidly evolving software development landscape, technologies like Artificial Intelligence (AI) are revolutionizing traditional workflows, making them more efficient and productive. For JavaScript programmers, integrating AI tools into their preferred development environment, such as Visual Studio Code (VS Code), can significantly enhance the coding experience. In this blog post, we’ll explore how JavaScript developers […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/mahendra-agrawal/" title="View all posts by Mahendra Kumar Agrawal" rel="nofollow">Mahendra Kumar Agrawal</a> <br> </u></div> <div class="col-sm-6 by-dates">April 28, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/react-js/" title="View all posts in React.js">React.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/unleashing-the-power-of-components-react-for-dynamic-web-apps/" rel="bookmark"><span class="heading-outer"><span class="heading">Unleashing the Power of Components: React for Dynamic Web Apps</span></span></a></header><p>Understanding React.js: React.js is an open-source JavaScript library maintained by Facebook and a community of developers. It is primarily used for building user interfaces (UIs) for single-page applications. React.js follows the component-based architecture, where UIs are composed of reusable and self-contained components. Core Features of React.js Component-Based Architecture: React.js encourages breaking down the user interface […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/harshit-singhal/" title="View all posts by Harshit Singhal" rel="nofollow">Harshit Singhal</a> <br> </u></div> <div class="col-sm-6 by-dates">April 19, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/react-js/" title="View all posts in React.js">React.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/route-planning-using-open-street-map/" rel="bookmark"><span class="heading-outer"><span class="heading">Route Planning Using Open Street Map</span></span></a></header><p>Introduction In this blog post, we will delve into the utilization of Leaflet.js, an open-source JavaScript library, in conjunction with React to craft interactive maps as a substitute for Google Maps. Understanding the application of Leaflet.js can enable us to showcase location data effectively and construct personalized map-centric applications effortlessly. For this tutorial and into […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/abdul-samad/" title="View all posts by Abdul Samad" rel="nofollow">Abdul Samad</a> <br> </u></div> <div class="col-sm-6 by-dates">April 19, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/angular/" title="View all posts in AngularJS">AngularJS</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/node-js-2/" title="View all posts in Node.js">Node.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/when-to-use-promises-and-observables-in-angular/" rel="bookmark"><span class="heading-outer"><span class="heading">When to use Promises and Observables in Angular</span></span></a></header><p>One of the most confusing scenarios is whether I should use a promise or an observable.   Have you ever worked with both Promises and Observable? Or maybe you’ve heard of them but don’t know which one to use at what time? To avoid this confusion, we need to understand their differences to pick the […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/guddu-kumar1/" title="View all posts by Guddu Kumar" rel="nofollow">Guddu Kumar</a> <br> </u></div> <div class="col-sm-6 by-dates">April 16, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/angular/" title="View all posts in AngularJS">AngularJS</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/react-js/" title="View all posts in React.js">React.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/javascript-frameworks-choosing-the-right-one-for-your-projects/" rel="bookmark"><span class="heading-outer"><span class="heading">JavaScript Frameworks: Choosing the Right One for Your Projects</span></span></a></header><p>Choosing the right JavaScript framework or library for your web development projects can be crucial. React, Angular, and Vue.js are three of the most popular choices in this domain, each with its own strengths and use cases. Let’s delve into a comparison of React, Angular, and Vue.js to help you understand their differences and make […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/mahendra-agrawal/" title="View all posts by Mahendra Kumar Agrawal" rel="nofollow">Mahendra Kumar Agrawal</a> <br> </u></div> <div class="col-sm-6 by-dates">April 16, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/hybrid/" title="View all posts in Hybrid">Hybrid</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/mobility/" title="View all posts in Mobility">Mobility</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/demystifying-freezed-annotations-mastering-data-modeling-for-complex-state-in-flutter-%f0%9f%a5%b6/" rel="bookmark"><span class="heading-outer"><span class="heading">Demystifying Freezed Annotations: Mastering Data Modeling for Complex State in Flutter 🥶</span></span></a></header><p>The world of Flutter development thrives on well-structured and maintainable code. When it comes to data modeling for intricate state management, the freezed package emerges as a champion. It offers a powerful annotation toolkit that empowers you to create robust and expressive data classes. This blog post delves into four key annotations – @Union, @with, […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/naveen-verma/" title="View all posts by Naveen Verma" rel="nofollow">Naveen Verma</a> <br> </u></div> <div class="col-sm-6 by-dates">April 12, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/technology/" title="View all posts in Technology">Technology</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/unveiling-the-power-of-design-patterns-in-javascript/" rel="bookmark"><span class="heading-outer"><span class="heading">Unveiling the Power of Design Patterns in JavaScript</span></span></a></header><p>As JavaScript developers, we’re constantly faced with the challenge of writing code that is not only functional but also maintainable and scalable. Design patterns offer us proven solutions to common problems encountered in software development. The design patterns are backed by a strong community of developers which makes them safe to use. Many developers face […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/himanshi/" title="View all posts by Himanshi Gera" rel="nofollow">Himanshi Gera</a> <br> </u></div> <div class="col-sm-6 by-dates">April 11, 2024</div></div> </div></div></div> <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 border"> <div class="blog-box blue-box"> <p class="bottom"> <a rel="nofollow" href="https://www.tothenew.com/blog/category/front-end-development/" title="View all posts in Front End Development">Front End Development</a>, <a rel="nofollow" href="https://www.tothenew.com/blog/category/react-js/" title="View all posts in React.js">React.js</a> </p> <header class="entry-header"> <a href="https://www.tothenew.com/blog/creating-a-custom-calendar-view-using-react-big-calendar/" rel="bookmark"><span class="heading-outer"><span class="heading">Creating a Custom Calendar View using React Big Calendar</span></span></a></header><p>In the dynamic field of web development, presenting schedules and events in an intuitive and user-friendly manner stands as a pivotal requirement. Enter React Big Calendar, a highly acclaimed scheduler component library renowned for its robust solutions. Offering a plethora of customization options, interactivity, and feature-rich functionalities, React Big Calendar empowers users to effortlessly create […]</p> <div class="blog-dated"><div class="row"><div class="col-sm-6 by-name"><u>by <a class="url fn n" href="https://www.tothenew.com/blog/author/akash-patel/" title="View all posts by Akash Patel" rel="nofollow">Akash Patel</a> <br> </u></div> <div class="col-sm-6 by-dates">April 6, 2024</div></div> </div></div></div> </div></div><script> var limit = 9, page = 1, type = 'cat', category = '3429', after = '', before = '', max_pages_latest = 18</script> <div class="load_more text-center"> <a href="#" class="btn btn-circle btn-inverse btn-load-more">Load More</a> </div> <script type="text/javascript"> var ajaxUrl = "https://www.tothenew.com/blog/wp-admin/admin-ajax.php"; var page = 1; var ppp = 9; $("#more_posts").on("click",function(){ $("#more_posts").attr("disabled",true); $.post(ajaxUrl, { action:"more_post_ajax", offset: (page * ppp) + 1, ppp: ppp }).success(function(posts){ page++; $(".ajax-posts").append(posts); // CHANGE THIS! $("#more_posts").attr("disabled",false); }); }); </script> </div> </div> </section> <div id="subscribe-blog">  </div> <footer> <div class="gry-bg"> <div class="container"> <div class="footer-menus"> <nav> <div class="f-heading">Who We Are</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/about-us">About</a></li> <li class="menu-item"><a rel="dofollow" href="/leadership">Leadership</a></li> <li class="menu-item"><a href="/partnership" rel="dofollow">Partners</a></li> <li class="menu-item"><a rel="dofollow" href="/press-releases">Press Releases</a></li> <li class="menu-item"><a rel="dofollow" href="/awards">Awards</a></li> <li class="menu-item"><a rel="dofollow" href="/media-coverage">Media Coverage</a></li> <li class="menu-item"><a rel="dofollow" href="/events">Events</a></li> <li class="menu-item"><a href="/our-social-impact" rel="dofollow">CSR</a> </li> <li class="menu-item"><a rel="dofollow" href="/privacy-policy">Privacy Policy</a></li> <li class="menu-item"><a rel="dofollow" href="/modern-slavery-statement">Modern Slavery Statement</a></li> </ul> </nav> <nav> <div class="f-heading">What We Do</div> <ul class="clearfix menu"> <li class="menu-item"><a href="/services" rel="dofollow">Services</a></li> <li class="menu-item"><a href="/technologies"rel="dofollow">Technologies</a></li> <li class="menu-item"><a href="/solutions" rel="dofollow">Solutions</a> </li> <li class="menu-item"><a href="/industries" rel="dofollow">Industries</a> </li> <li class="menu-item"><a rel="dofollow" href="/idanim">Idanim</a></li> </ul> </nav> <nav> <div class="f-heading">Insights</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/success-stories">Success Stories</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=67">Whitepapers</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=66">Webinars</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=652">Podcasts</a></li> <li class="menu-item"><a rel="dofollow" href="/blog/">Blogs</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=62">E-Books</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=162">Magazines</a></li> <li class="menu-item"><a rel="dofollow" href="/insights?resource=574">Spotlight</a></li> </ul> </nav> <nav> <div class="f-heading">Contact Us</div> <ul class="clearfix menu"> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=request-form">Request for Services</a></li> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=join-form">Join us!</a></li> <li class="menu-item"><a rel="dofollow" href="/contact-us?q=media-form">Media Queries</a></li> <li class="menu-item"><a rel="dofollow" href="/careers">Career</a></li> <li class="menu-item"><a rel="dofollow" href="/responsible-disclosure">Responsible Disclosure</a></li> </ul> </nav> </div> <div class="footer-right"> <div class="heading">Connect With Us</div> <div class="social"> <ul> <li class="ln"><a href="https://www.linkedin.com/company/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="twt"><a href="https://twitter.com/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="fb"><a href="https://www.facebook.com/TOTHENEWDigital/" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li>  <li class="Ytube"><a href="https://www.youtube.com/c/tothenew" rel="dofollow" onclick="window.open(this.href);return false;"> </a></li> <li class="glassdoor-footer"><a href="https://www.glassdoor.co.in/Overview/Working-at-TO-THE-NEW-EI_IE1011609.11,21.htm" onclick="window.open(this.href);return false;" rel="dofollow">Glassdoor</a></li> </ul> </div> <div class="copyright"> <img alt="ttn logo" src="/cms-assets/s3fs-public/2021-08/ttnweb.svg"><p>©2024 TO THE NEW</p> </div> </div> </div> </div> </footer> <div id="bottom"> <div class="container"> <div class="row"> <div class="col-xs-12 servicesSection"> <div class="heading">Services</div> <span class="bottom-arrow-down"></span> <ul class="clearfix"> <li class="clearfix"> <span>Cloud & DevOps</span> <ul class="clearfix">   <li><a href="/devops-automation-consulting" title="DevOps as a Service">DevOps as a Service</a></li> <li><a href="/devops-aws" title="DevOps on AWS">DevOps on AWS</a></li> <li><a href="/devops-chef-puppet-docker" title="DevOps Tools">DevOps Tools</a></li>  </ul> </li> <li class="clearfix"> <span>Backend Engineering</span> <ul class="clearfix"> <li><a href="/python-development" title="Python Development">Python Development</a></li> <li><a href="/mean-node-js-development-consulting" title="Node.js Development">Node.js Development</a></li> <li><a href="/grails-application-development" title="Grails Development">Grails Development</a></li> <li><a href="/java-development-services" title="Java Development">Java Development</a></li> <li><a href="/mean-stack-web-development-consulting" title="MEAN Development">MEAN Development</a></li>  </ul> </li> <li class="clearfix"> <span>Digital Marketing</span> <ul> <li><a href="/digital-marketing/email-marketing" title="Email Marketing">Email Marketing</a></li> <li><a href="/digital-marketing/search-engine-optimization" title="Search Engine Optimization">Search Engine Optimization</a></li> <li><a href="/digital-marketing/marketing-automation" title="Marketing Automation">Marketing Automation</a></li> <li><a href="/digital-marketing/social-listening" title="Social Listening">Social Listening</a></li> <li><a href="/digital-marketing/digital-analytics" title="">Digital Analytics</a></li> <li><a href="/digital-marketing/analytics" title="Web Analytics">Web Analytics</a></li> <li><a href="/digital-marketing" title="Digital Marketing">Digital Marketing</a></li> <li><a href="/digital-marketing/influencer-marketing" title="Influencer Marketing">Influencer Marketing</a></li> <li><a href="/digital-marketing/content-marketing" title="Content Marketing">Content Marketing</a></li> <li><a href="/digital-marketing/social-media-marketing" title="Social Media Marketing">Social Media Marketing</a></li> <li><a href="/digital-marketing/creative-strategy" title="Creative Strategy">Creative Strategy</a></li> <li><a href="/digital-marketing/digital-campaigns-activations" title="Digital Campaigns and Activations">Digital Campaigns and Activations</a></li> <li><a href="/digital-marketing/media-buying-planning-company" title="Media planning and buying">Media planning and buying</a></li> <li><a href="/digital-marketing/search-marketing" title="Search Marketing">Search Marketing</a></li> <li><a href="/digital-marketing/digital-strategy" title="Digital Strategy">Digital Strategy</a></li> </ul> </li> <li class="clearfix"> <span>Web Content Management</span> <ul class="clearfix"> <li><a href="/wcm/web-content-management-services" title="Web Content Management">Web Content Management</a></li> <li><a href="/wcm/cq-aem-development-consulting" title="AEM Development">AEM Development</a></li> <li><a href="/wcm/drupal-development-consulting-services" title="Drupal Development">Drupal Development</a></li>  </ul> </li> <li class="clearfix"> <span>Digital Transformation</span> <ul> <li><a href="/digital-transformation" title="Digital Transformation">Digital Transformation</a></li> </ul> </li> <li class="clearfix"> <span>Experience Design</span> <ul class="clearfix"> <li><a href="/experience-design" title="Experience Design">Experience Design</a></li> </ul> </li> <li class="clearfix"> <span>Mobility</span> <ul class="clearfix"> <li><a href="/mobile-application-development-services" title="Mobility">Mobility</a></li> <li><a href="/mobile-ios-application-development-services" title="iOS App Development">iOS App Development</a></li> <li><a href="/mobile-android-application-development-services" title="Android Development">Android Development</a></li> <li><a href="/digital-engineering/smart-tv-apps" title="Smart TV App Development">Smart TV App Development</a></li> <li><a href="/testing/automated-mobile-application-testing" title="Mobile Automation Testing">Mobile Automation Testing</a></li> <li><a href="/mobile-hybrid-application-development" title="Hybrid Application Development">Hybrid Application Development</a></li>  </ul> </li> <li class="clearfix"> <span>Frontend Engineering</span> <ul class="clearfix"> <li><a href="/front-end-angularjs-development" title="AngularJS Development">AngularJS Development</a></li> <li><a href="/react-native-development-services" title="React Native Development">React Native Development</a></li> <li><a href="/react-js-development-consulting-company" title="React js Development">React js Development</a></li> </ul> </li>  <li class="clearfix"> <span>Video Solutions</span> <ul class="clearfix"> <li><a href="/digital-video-solutions" title="Video Solutions">Video Solutions</a></li>  <li><a href="/digital-multiscreen-video-solution" title="Multiscreen Solutions">Multiscreen Solutions</a></li> </ul> </li> <li class="clearfix"> <span>Software Development</span> <ul class="clearfix"> <li><a href="/offshore-software-development-company" title="Offshore Software Development">Offshore Software Development</a></li> <li><a href="/outsourced-software-product-development" title="Outsourced Software Product Development">Outsourced Software Product Development</a></li> <li><a href="/custom-software-development-company" title="Custom Software Development">Custom Software Development</a></li> <li><a href="/bespoke-software-development-company" title="Bespoke Software Development">Bespoke Software Development</a></li> </ul> </li> <li class="clearfix"> <span>Web Application Development</span> <ul class="clearfix"> <li><a href="/custom-web-application-development-company" title="Custom Web Application Development">Custom Web Application Development</a></li> <li><a href="/outsource-web-application-development" title="Outsource Web Application Development">Outsource Web Application Development</a></li> </ul> </li> <li class="clearfix"> <span>Development Center</span> <ul class="clearfix"> <li><a href="/offshore-development-center" title="Offshore Development Center">Offshore Development Center</a></li> </ul> </li> </ul> </div> </div> </div> </div> <script type="text/javascript"> jQuery('body a').each((index, element) => { if (element.href.match("^http://")) { element.href = element.href.replace('http://', 'https://'); } else if (element.href.match('^www.')) { element.href = 'https://' + element.href; } }) </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/plugins/metronet-profile-picture/js/mpp-frontend.js?ver=2.6.0' id='mpp_gutenberg_tabs-js'></script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/navigation.js?ver=20140711' id='ttn_new-navigation-js'></script> <script type='text/javascript' id='elastic-search-js-extra'> /* <![CDATA[ */ var ajax_object = {"ajax_url":"https:\/\/www.tothenew.com\/blog\/wp-admin\/admin-ajax.php","nonce":"66c0826a96"}; /* ]]> */ </script> <script type='text/javascript' defer src='https://www.tothenew.com/blog/wp-content/themes/ttn/js/elastic-search.js' id='elastic-search-js'></script> <script type="text/javascript" src="https://www.tothenew.com/blog/wp-content/themes/ttn/js/post-block.js"></script> <script type="text/javascript"> jQuery(document).ajaxComplete(function(){ //for box height var highestBox = 0; jQuery('.latest_posts_wrapper .border .blue-box').each(function(){ if(jQuery(this).height() > highestBox){ highestBox = jQuery(this).height(); } }); jQuery('.latest_posts_wrapper .border .blue-box').height(highestBox); }); jQuery(document).ready(function(){ //for box height var highestBox = 0; jQuery('.latest_posts_wrapper .border .blue-box').each(function(){ if(jQuery(this).height() > highestBox){ highestBox = jQuery(this).height(); } }); jQuery('.latest_posts_wrapper .border .blue-box').height(highestBox); setTimeout(function(){ jQuery("#ap_form_post_content_1-tmce").trigger('click'); }, 2000); }); jQuery(document).ready(function(){ setTimeout(function(){ jQuery("#postcontent-tmce").trigger('click'); }, 2000); }); jQuery(document).ready(function(){ jQuery(function (e) { // jQuery("#cat").selectbox(); // jQuery(".postform").selectbox(); jQuery('.normal .main-cat .heading').click(function () { jQuery(this).siblings().slideToggle(); jQuery(this).parent().toggleClass('active'); jQuery('.overlay-cat').toggleClass('hide'); }); jQuery('.overlay-cat').click(function () { jQuery('.normal .main-cat .heading').parent().removeClass('active'); jQuery('.cat-dropdown').slideUp(); jQuery('.overlay-cat').toggleClass('hide'); }); jQuery('.subscribeButton').click(function(){ //jQuery('body').append(subscribeModal); jQuery("#subModal").modal('show'); //jQuery('.pop').addClass('show'); }); }); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { jQuery('.register').find(':submit').click(function(e) { if( ! isGmail( jQuery('#user_email').val() ) ) { e.preventDefault(); if (jQuery('.user-registration .field-user_email .form-row .buisness-error').length<1) { jQuery('.user-registration .field-user_email .form-row').append('<label class="user-registration-error buisness-error">You can only register with an @tothenew.com email address!</label>'); } return false; } else{ jQuery('.user-registration .field-user_email .form-row .buisness-error').remove(); } }); jQuery('#user_email').on("keypress keydown keyup",function(e) { if( ! isGmail( jQuery('#user_email').val() ) ) { if (jQuery('.user-registration .field-user_email .form-row .buisness-error').length<1) { jQuery('.user-registration .field-user_email .form-row').append('<label class="user-registration-error buisness-error">You can only register with an @tothenew.com email address!</label>'); } } else{ jQuery('.user-registration .field-user_email .form-row .buisness-error').remove(); } }); }); function isGmail( address ) { if (address.indexOf("@")>0 && address.indexOf(".")>0) { if (address.substr(address.indexOf(".")+1).length>0) { return address.indexOf("@tothenew.com", this.length - 10) !== -1; } } return true; } jQuery(window).scroll(function(){ var headerHeight = jQuery('#header').innerHeight(); var resource = jQuery('.resources').height(); var suggested = jQuery('.suggested').height(); var totalHeight = headerHeight + resource + suggested + 360; var sticky = jQuery('.white'); var sticky1 = jQuery('.followUs'); scroll = jQuery(window).scrollTop(); if (scroll >= 300){ sticky.addClass('fixed'); jQuery('#blog-section').css('padding-top', '91px'); }else { sticky.removeClass('fixed'); jQuery('#blog-section').css('padding-top', '19px'); } if (scroll >= totalHeight){ var widthS = jQuery('.suggested').width()+31; sticky1.addClass('fixed1'); sticky1.css('width', widthS); }else { sticky1.removeClass('fixed1'); sticky1.css('width', '100%'); } }); jQuery(document).ready(function(){ }); jQuery(document).ready(function(){ bindFooterScroller(); bindLoaderScroller(); jQuery(".year-data").click(function(){ jQuery(this).parents('li').find('.blog-month').slideToggle(); jQuery(this).find('.plus-icon').toggleClass('active'); jQuery(this).parent().siblings().find('.plus-icon').removeClass('active'); jQuery(this).parent().siblings().children().next().slideUp(); return false; }); jQuery('.burger-container').click(function(){ jQuery(this).parent().parent().find('#menu').toggleClass('menu-opened'); }); jQuery('.f-heading').on('click', function () { jQuery(this).parent().toggleClass('visible'); }); var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); if (jQuery(window).width() <= 1024){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '75%'); } if (jQuery(window).width() <= 640){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); } }); jQuery(window).resize(function(){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); if (jQuery(window).width() <= 1024){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '75%'); } if (jQuery(window).width() <= 640){ var catWidth = jQuery('.normal').width()-15; jQuery('.cat-dropdown').width(catWidth); jQuery('.cat-dropdown').css('font-size', '100%'); } }); $header = jQuery("#header"), $clone = $header.before($header.clone().addClass("clone")); jQuery(window).scroll(function () { jQuery("#header").toggleClass("down", (jQuery(window).scrollTop() > 100)); }) jQuery.fn.scrollStopped = function (callback) { var jQuerythis = jQuery(this), self = this; jQuerythis.scroll(function () { if (jQuerythis.data('scrollTimeout')) { clearTimeout(jQuerythis.data('scrollTimeout')); } jQuerythis.data('scrollTimeout', setTimeout(callback, 250, self)); }); }; function bindFooterScroller() { jQuery(window).scroll(function () { var headerHeight = jQuery('#header').innerHeight(); var sticky1 = jQuery('.followUs'); var sticky = jQuery('.white'); var footerElement = jQuery('#subscribe-blog'); // if (isScrolledIntoView(footerElement)) { // sticky.hide(); // sticky1.hide(); // //jQuery('#blog-section').css('padding-top', '19px'); // } // else { var headerHeight = jQuery('#header').innerHeight(); var resource = jQuery('.resources').height(); var suggested = jQuery('.suggested').height(); var totalHeight = headerHeight + resource + suggested + 360; var sticky1 = jQuery('.followUs'); sticky.show(); sticky1.show(); var sticky = jQuery('.white'); var sticky1 = jQuery('.followUs'); scroll = jQuery(window).scrollTop(); if (scroll >= 300){ jQuery('#blog-section').css('padding-top', '91px'); jQuery('.controls').css('display','block'); }else { //jQuery('#blog-section').css('padding-top', '19px'); jQuery('.controls').css('display','none'); } if (scroll >= totalHeight){ var widthS = jQuery('.suggested').width()+31; sticky1.addClass('fixed1'); sticky1.css('width', widthS); }else { sticky1.removeClass('fixed1'); sticky1.css('width', '100%'); } // } }) } function isScrolledIntoView(jQueryelem) { var docViewTop = jQuery(window).scrollTop() + jQuery(window).height(); var elemTop = jQueryelem.offset().top; return (elemTop <= docViewTop); } function bindLoaderScroller() { jQuery(window).scroll(function () { var loaderElement = jQuery('#loader'); if (isScrolledIntoView1(loaderElement)) { setTimeout(function(){ jQuery(".left-content .border:eq(9), .left-content .border:eq(10), .left-content .border:eq(11), .left-content .border:eq(12), .left-content .border:eq(13), .left-content .border:eq(14), .left-content .border:eq(15), .left-content .border:eq(16),.left-content .border:eq(17), .more-post").fadeIn( "slow" ); jQuery('#loader').fadeOut("slow"); jQuery('.left-content').isotope({ itemSelector: '.border' }); }, 2000); } }) } function isScrolledIntoView1(jQueryelem1) { var docViewTop = jQuery(window).scrollTop() + jQuery(window).height(); var elemTop = jQueryelem1.offset().top; return (elemTop <= docViewTop); } jQuery(window).load(function(){ var Wwidth = jQuery(window).width(); if ((Wwidth <=767)) { var rsW = jQuery('.resources1 .banner-text').innerHeight(); jQuery('.resources1 .overlay img').css('height', rsW); }else{ jQuery('.resources1 .overlay img').css('height', 'auto'); } }); jQuery(window).resize(function(){ var Wwidth = jQuery(window).width(); if ((Wwidth <=767)) { var rsW = jQuery('.resources1 .banner-text').innerHeight(); jQuery('.resources1 .overlay img').css('height', rsW); }else{ jQuery('.resources1 .overlay img').css('height', 'auto'); } }); var bcrumb1; jQuery(document).ready(function(){ var all = []; var s = 0; jQuery('.breadcrumbs li').each(function () { all[s++] = jQuery(this).text().trim(); }); bcrumb1 = all.join('|'); }); </script> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "Organization", "address": { "@type": "PostalAddress", "addressLocality": "New Jersey, USA", "postalCode": "08902-3040", "streetAddress": "1588 US Highway 130 - North Brunswick" }, "name" : "TO THE NEW", "url" : "http://www.tothenew.com", "logo" : "https://www.tothenew.com/blog/wp-content/themes/ttn/images/logo-large.png", "sameAs" : [ "https://www.linkedin.com/company/tothenew", "https://twitter.com/TOTHENEW", "https://www.facebook.com/TOTHENEWDigital/", "https://plus.google.com/+TOTHENEW", "https://www.youtube.com/c/tothenew", "http://www.slideshare.net/tothenewtech", "http://www.slideshare.net/tothenew" ] } </script> <div class="overlay-cat hide"></div> <div class="modal fade" id="subModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="subscribe-popup"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>  <div class="subs-hbsp-form">  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ portalId: "481864", formId: "7a02d2db-8a8f-44bb-94ac-85b3421eea2d" }); </script> </div> </div> </div> </div> <div id="instructionModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Tips for writing a blog</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <iframe src="https://www.tothenew.com/blog/wp-content/plugins/ttn-blog-enhancements//docs/how-to-write-a-blog.pdf" style="width: 100%; height:500px;" frameborder="0"></iframe> </div> </div> </div> </div> <div id="captionHelpModal" class="modal fade" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Learn how to write a caption</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <iframe src="https://www.tothenew.com/blog/wp-content/plugins/ttn-blog-enhancements//docs/how-to-add-perfect-caption.pdf" style="width: 100%; height:500px;" frameborder="0"></iframe> </div> </div> </div> </div> <script> $(document).ready(function(){ }); </script> </body> </html>

CINXE.COM

Blog posts around Front End Development | TO THE NEW Blog