POC pages:

Some useful tips about implementing POC pages in boost:

HTML tag’s structure:

In the POC code given to us to implement in Boost there will be a standard html file with a html structure but the POC itself is not a real HTML page, it is a HTML component, so in order to upload it correctly, we need to leave our code wrap only with <div> tag, and to remove the <html>, <body>, <head>, <title> and <meta> tags.Any code inside the <head> tag should move outside the <head> tag.

javaScripts:

1. Duplicated jQuery files:

In the code we get from the Angles there may be a jQuery they use so the code will work locally. Boost automatically loads jQuery but there is a chance that boost’s jQuery is too old so we need to look up the libraries online and see if they can use our version and if:

  • Our version supports all the external libraries- delete the Angels call to jQuery.

  • One or more of the libraries needs more updated version- use jQuery noConflict In the JS:

u.execWhenReady(function(){
    $.when(
        $.getScript("
        https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"),
        $.Deferred(function( deferred ){
            $( deferred.resolve );
        })
    ).done(function() {
        $.noConflict(false);
        (function(e){})})

2. Js loading:

Especially when implementing code that uses a lot of external libraries sometimes it takes too much time to load the javaScripts from the assets and the browser fails to get them. In that case, the solution will be to combine a minified version of all the libraries scripts (separated and with documentation) to a one javaScript file and add it to the bottom of the POC html as <script> with few attributes:

  • src=”yourSrc.js”

  • async

  • defer

Please note: the libraries may depend on each other so make sure you paste the scripts in the order they were loaded when the last snippet of code will be yours.

Https:

In many of the POC pages there will be a request for the page to be valid in https.

For that to happen we need to make sure all links are agnostic-

that means start with “//” and not with a specific protocol(http/https).

Places there can be a protocol specific link in your code:

  • HTML/CSS- all the src\href\url must be agnostic.

  • Tag manager- all the links Boost automatically loads should be agnostic but sometimes an old file can be loaded in an “http” way. In that case you should asked for it to be changes or remove if it is not relevant.

  • So, you removed all the http from your code and tag manager and still something doesn't work? The reason can be a bug in boost that doesn't replace agnostic addresses to the CDN addresses. In that case you can go to a live site copy the cdn address and use it instead of the address given when uploading assets to BOOST.

//boost-assets-production.s3-website-us-east-1.amazonaws.com/ will be replaced it with //d15o9qq6jqrrp9.cloudfront.net (the CDN adresse may change so it is best to check on a live site).

Long loading:

The loading time of POC page can be longer than usual for many reasons and there several things we can do the help with that:

Use external libraries just when essential.

Make the JS and CSS efficient as possible.

Make sure all external files are load from the CDN. in the browser look for s3 and if you find files that still have a s3 url path manually change its url to //d15o9qq6jqrrp9.cloudfront.net/ in the source code.

To make the loading faster we can take all the css from the css files and add it to a <style> tag in the beginning of the html code. After you added the css code to the html it now should be approved by the renderer and:

  • The renderer is sensitive to all small css mistakes and fails if finds one.

  • When writing a rule in the form of selector{property:value;} (the rule in one line) the renderer sees the {string} as like it is a variable and when not finding it, it fails so make sure the css code is always written with space between the opening or closing ‘{’, The easiest way to do that is to “Beautify” your CSS with an online Beautifier.

Font:

When we get POC code we must check if there is external font loaded in it, what font, and in what way.

1. Where to look for the external fonts:

a. The HTML- the loading of the fonts can be in the HTML code as a <link> tag:
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700⊂=latin,greek' rel='stylesheet' 
type='text/css'>
b. The CSS: the loading of the font can be in the CSS in two forms:

As a source of a font-face:

(@font-face { font-family:'Lucida Grande';
src: url('../../fonts/Lucida Grande Bold.woff2') format('woff2'),
url('../../fonts/Lucida Grande Bold.woff') format('woff');})

Note-uploading fonts as files can be used only with open license fonts and only by uploading the file manually to the CDN in the PS assets folder (BOOST doesn’t support uploading fonts as regular assets).

As a url imported:

@import url ('https://fonts.googleapis.com /css?family=Roboto');
c. The JS: the loading of the can be in the JS file as a typekit script:
(function(d) {~lb}
var config = {~lb}
kitId: 'pol4ohc',
    scriptTimeout: 3000,
    async: true
{~rb},
h=d.documentElement,t=setTimeout(function(){~lb}h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";{~rb},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){~lb}a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{~lb}Typekit.load(config){~rb}catch(e){~lb}{~rb}{~rb};s.parentNode.insertBefore(tk,s)
{~rb})(document);

2. Types of fonts:

There are two ways we can upload external font depend on their license:

a. Open license fonts:

there are lots of fonts free to use like google fonts. Those fonts can be loaded with a link provided by the site offering the font. For example when you look for Roboto or Open Sans in the internet you will get to the google fonts site- https://fonts.google.com/ in which for every font you select you get a link:

<link href='https://fonts.googleapis.com/css ?family=Roboto:400,300,700&subset=latin,greek' 
rel='stylesheet' type='text/css'>

You can put in the HTML

or:

@import url('https://fonts.googleapis.com/css?family=Roboto');

you can put in the CSS and then the only thing left to do is Specify the font in the CSS:

font-family: 'Roboto', sans-serif;

b. Paid Fonts:

if you look for the font you need to embed and you see it’s not a google font and it is not written that the font has free license (for commercial use) then we can’t only use a url because then we violate the Fonts copyrights. So In that case the way we can load the font is through typekit. A Typekit is an adobe platform in which you can purchase packages of fonts and then use them for commercial purposes.

If a designer wants to use a paid font he needs to purchase it in the company account and register the site using it, after he does that he will get two scripts to implement in the page:

<script src="https://use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

But, that is the basic way to implement a typekit and this way does not work correctly in BOOST so we need to use the Advanced embedAdvanced embed code way (for more information please read: https://helpx.adobe.com/typekit/using/embed-codes.html#Advancedembedcode) so what you need to do is to take the code below and just give it the xxxxxxx value from the script source given to us by the designer.

An example of a typekit code:

(function(d) {~lb}
var config = {~lb}
kitId: xxxxxxx,
    scriptTimeout: 3000,
    async: true
{~rb},
h=d.documentElement,t=setTimeout(function(){~lb}h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";{~rb},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){~lb}a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{~lb}Typekit.load(config){~rb}catch(e){~lb}{~rb}{~rb};s.parentNode.insertBefore(tk,s)
{~rb})(document);

3. Font events:

Fonts are loaded as assets into a web page—just like images or video. Depending on your browser or your connection speed, they can load quickly or lag behind the rest of the page. Typekit gives you control over how the page is styled while fonts are loading via Font Events, when fonts are loading, a class of .wf-loading is applied to the HTML element. Once the fonts have loaded, that class changes to .wf-active so you can add style rules to the css elements with default css until the fonts are loaded like:

.wf-loading h1 {
    /* styles to use while Typekit is loading */
}
.wf-active h1 {
    /* styles to use after Typekit is loaded */
}

And in that way we can make the styling to change in a smoother way because the change from your default styling won’t be as drastic as the user agent styling.

For more information:https://helpx.adobe.com/typekit/using/font-events.html

results matching ""

    No results matching ""