{"id":1104,"date":"2014-10-21T15:15:40","date_gmt":"2014-10-21T12:15:40","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1104"},"modified":"2014-10-20T13:17:50","modified_gmt":"2014-10-20T10:17:50","slug":"boot-your-ajax-app-creating-a-splash-screen-with-nprogress","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/","title":{"rendered":"Boot your ajax app: Creating a splash screen with NProgress"},"content":{"rendered":"

While single-page JavaScript apps tend to be more dynamic and usually more interactive from the user point of view, they also most often have a longer startup time compared to more classic, server-side rendered apps. That’s usually where progress indicators and splash screens come into play.<\/p>\n

Obviously, the focus should clearly lie in optimizing the startup time to the maximum possible in order to avoid having the need for a splash screen at all. But as we all know that doesn’t always work out.<\/p>\n

Instead, what I really hate is when you see the app loading in pieces, meaning, you see how the JS app is being constructed while starting up, seing HTML views being added and filled with data while it is being received from some server-backend. I guess we can agree upon the fact that this is not the best user experience we can possibly have.<\/p>\n

What I usually do when starting up my SPA (Single Page App) is to..<\/p>\n

    \n
  1. hide the main HTML DOM container where your app lives in (often <div class='container js-appcontainer' style=\"display:none\"><\/div><\/code>)<\/li>\n
  2. show some progress indicator, signaling the user that something is going on<\/li>\n
  3. meanwhile start your JavaScript app, loading all of the required resources, including further JS files, view templates, data from backend through ajax calls, etc..<\/li>\n
  4. once finished, show the app container -> $('.js-appcontainer').fadeIn('fast')<\/code><\/li>\n
  5. hide the progress indicator<\/li>\n<\/ol>\n

    See – for instance – how GMail does it:<\/p>\n

    \"GMail<\/a>
    GMail progress indicator<\/figcaption><\/figure>\n

    In the simplest case you show an animated gif and that’s it. In a more sophisticated approach you might want to show the user some degree of real-time progress as the app loads. NProgress<\/a><\/strong> (GitHub<\/a>) might be a nice option in that case.<\/p>\n

    \"nprogress-demo\"<\/a>
    NProgress demo<\/figcaption><\/figure>\n

    The hard part about (non-infinite) progress bars is to properly advance the progress indicator based on the work that is being done and that’s where NProgress really shines. You start it with a simple NProgress.start()<\/code> and it will advance indefinitely. By then using NProgress.inc()<\/code> in your loading logic, you can then make it advance a little faster before you then call NProgress.done()<\/code> when you’re finished.<\/p>\n

    <\/figcaption><\/figure>\n

    I used this kind of approach in one of our apps, however the client noted that it might be too unimpressive, in the sense that people might not see the progress indicator. Well, fair enough, it’s the client, so an alternative would be to have a screen-centered splash-screen like approach we know from common desktop apps. But still, I didn’t want to leave NProgress behind, mainly due to the simplicity in its usage.<\/p>\n

    Splash screen with NProgress<\/h2>\n

    As such I quickly hacked down the following prototype. I basically came up with the this HTML template…<\/p>\n

    <div class='splash card'>\r\n    <div role='spinner'>\r\n        <div class='spinner-icon'><\/div>\r\n    <\/div>\r\n    <img class='img-circle' src='https:\/\/ssl.gstatic.com\/accounts\/ui\/avatar_2x.png'>\r\n    <p class='lead' style='text-align:center'>Please wait...<\/p>\r\n    <div class='progress'>\r\n        <div class='mybar' role='bar'>\r\n    <\/div>\r\n    <\/div>\r\n<\/div><\/pre>\n
    …which I configured to be rendered by NProgress:<\/p>\n
    NProgress.configure({\r\n    template: splashHtml\r\n});<\/pre>\n
    splashHtml<\/code> is a variable that holds the HTML code shown above. Ideally this comes from some templating engine, otherwise simple inline the HTML in your JS code. Some CSS to make it pretty (and obviously include Bootstrap for some more awesomeness)…<\/p>\n
    .splash {\r\n    position:absolute;\r\n    top:40%;\r\n    left:0;\r\n    right:0;\r\n    margin: auto;\r\n  }\r\n\r\n  .splash img {\r\n    display: block;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n    height: 100px;\r\n    width: 100px;\r\n  }\r\n\r\n  .card {\r\n    background-color: #f7f7f7;\r\n    padding: 20px 25px 15px;\r\n    margin: 0 auto 25px;\r\n    width: 380px;\r\n    -moz-border-radius: 2px;\r\n    -webkit-border-radius: 2px;\r\n    border-radius: 2px;\r\n    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);\r\n    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);\r\n    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);\r\n  }\r\n\r\n  .mybar {\r\n    background: #29d;\r\n    height:2px;\r\n  }\r\n\r\n  .progress {\r\n    height: 2px;\r\n  }\r\n\r\n  .spinner-icon {\r\n    position: absolute;\r\n    right: 20px;\r\n  }<\/pre>\n
    (Don’t take that too serious…I’m not a designer, nor did I optimize it)<\/em><\/p>\n
    …and voil\u00e1, the result:<\/p>\n
    \n
    \"splash-demo\"<\/a>
    Splash screen demo<\/figcaption><\/figure>\n<\/figcaption><\/figure>\n
    Obviously feel free to exchange the img with your application logo..this one is just a placeholder I quickly grabbed from the Google Login window.
    \nAlso note that I used Bootstrap which adds some nicer font-style and moreover handles the progress bar position using the .progress<\/code> class. If you want to avoid that, simply add the missing CSS styles by yourself.<\/p>\n
    You can find the entire code<\/strong> in this JsFiddle: http:\/\/jsfiddle.net\/juristr\/PmLCM\/1\/<\/a><\/p>\n
    How do I wait for all ajax requests to terminate??<\/h2>\n
    An issue you might encounter is on how you can wait for all ajax requests to terminate in order to know when the app really finished starting and is ready for being shown to the user. With jQuery it turns out to be quite straightforward. $.active<\/code> returns the number of active ajax calls and hence, by polling this variable you can determine when the app finished loading:<\/p>\n
    \/\/ wait till all ajax calls are done\r\nvar checkAjaxCalls = function () {\r\n    if ($.active > 0) {\r\n        setTimeout(checkAjaxCalls,300);\r\n    } else {\r\n        \/\/all done\r\n        $('.js-splashscreen').hide();\r\n        $('.js-container').fadeIn();\r\n        NProgress.done();\r\n    }\r\n};\r\ncheckAjaxCalls();<\/pre>\n
    \n\n\n\n
    Reference: <\/span><\/td>\nBoot your ajax app: Creating a splash screen with NProgress<\/a> from our WCG partner<\/a> Juri Strumpflohner at the Juri Strumpflohner’s TechBlog<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    While single-page JavaScript apps tend to be more dynamic and usually more interactive from the user point of view, they also most often have a longer startup time compared to more classic, server-side rendered apps. That’s usually where progress indicators and splash screens come into play. Obviously, the focus should clearly lie in optimizing the …<\/p>\n","protected":false},"author":5,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1104","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"\nBoot your ajax app: Creating a splash screen with NProgress - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"While single-page JavaScript apps tend to be more dynamic and usually more interactive from the user point of view, they also most often have a longer\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Boot your ajax app: Creating a splash screen with NProgress - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"While single-page JavaScript apps tend to be more dynamic and usually more interactive from the user point of view, they also most often have a longer\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-21T12:15:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Juri Strumpflohner\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@http:\/\/twitter.com\/juristr\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juri Strumpflohner\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/\"},\"author\":{\"name\":\"Juri Strumpflohner\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/33d3ee7edb105a80f1ff7199925b3060\"},\"headline\":\"Boot your ajax app: Creating a splash screen with NProgress\",\"datePublished\":\"2014-10-21T12:15:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/\"},\"wordCount\":895,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/\",\"name\":\"Boot your ajax app: Creating a splash screen with NProgress - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2014-10-21T12:15:40+00:00\",\"description\":\"While single-page JavaScript apps tend to be more dynamic and usually more interactive from the user point of view, they also most often have a longer\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Boot your ajax app: Creating a splash screen with NProgress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/33d3ee7edb105a80f1ff7199925b3060\",\"name\":\"Juri Strumpflohner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/45338315375849845e4c4b30f52cb417221e2d9a7e688785e4dd2af0e624a260?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/45338315375849845e4c4b30f52cb417221e2d9a7e688785e4dd2af0e624a260?s=96&d=mm&r=g\",\"caption\":\"Juri Strumpflohner\"},\"description\":\"Juri Strumpflohner mainly operates in the web sector developing rich applications with HTML5 and JavaScript. Beside having a Java background and developing Android applications he currently works as a software architect in the e-government sector. When he\u2019s not coding or blogging about his newest discoveries, he is practicing Yoseikan Budo where he owns a 2nd DAN.\",\"sameAs\":[\"http:\/\/juristr.com\/blog\/\",\"http:\/\/linkedin.com\/in\/juristr\/\",\"https:\/\/x.com\/http:\/\/twitter.com\/juristr\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/juri-strumpflohner\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Boot your ajax app: Creating a splash screen with NProgress - Web Code Geeks - 2026","description":"While single-page JavaScript apps tend to be more dynamic and usually more interactive from the user point of view, they also most often have a longer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/","og_locale":"en_US","og_type":"article","og_title":"Boot your ajax app: Creating a splash screen with NProgress - Web Code Geeks - 2026","og_description":"While single-page JavaScript apps tend to be more dynamic and usually more interactive from the user point of view, they also most often have a longer","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2014-10-21T12:15:40+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Juri Strumpflohner","twitter_card":"summary_large_image","twitter_creator":"@http:\/\/twitter.com\/juristr","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Juri Strumpflohner","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/"},"author":{"name":"Juri Strumpflohner","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/33d3ee7edb105a80f1ff7199925b3060"},"headline":"Boot your ajax app: Creating a splash screen with NProgress","datePublished":"2014-10-21T12:15:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/"},"wordCount":895,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/","name":"Boot your ajax app: Creating a splash screen with NProgress - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2014-10-21T12:15:40+00:00","description":"While single-page JavaScript apps tend to be more dynamic and usually more interactive from the user point of view, they also most often have a longer","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/boot-your-ajax-app-creating-a-splash-screen-with-nprogress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Boot your ajax app: Creating a splash screen with NProgress"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/33d3ee7edb105a80f1ff7199925b3060","name":"Juri Strumpflohner","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/45338315375849845e4c4b30f52cb417221e2d9a7e688785e4dd2af0e624a260?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/45338315375849845e4c4b30f52cb417221e2d9a7e688785e4dd2af0e624a260?s=96&d=mm&r=g","caption":"Juri Strumpflohner"},"description":"Juri Strumpflohner mainly operates in the web sector developing rich applications with HTML5 and JavaScript. Beside having a Java background and developing Android applications he currently works as a software architect in the e-government sector. When he\u2019s not coding or blogging about his newest discoveries, he is practicing Yoseikan Budo where he owns a 2nd DAN.","sameAs":["http:\/\/juristr.com\/blog\/","http:\/\/linkedin.com\/in\/juristr\/","https:\/\/x.com\/http:\/\/twitter.com\/juristr"],"url":"https:\/\/www.webcodegeeks.com\/author\/juri-strumpflohner\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=1104"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/1104\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=1104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=1104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=1104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}