cumulative layout shift (CLS) in html - pagespeed

I am getting CLS ON this piece of HTML can anyone tell the reason for why iam getting a layout shift. iam trying hard to get the CLS below 0.1 but failed to do so .. i guess bootstrap classes may causing the issue but how can i fix it
<section class="page-banner Games" style="height:400px;">
<div class="new-banner-collection-page" style="padding-bottom:1rem;">
<div class="row" style="height:100%">
<div class="col-md-7" style="height:100%; float:left">
<div id="tags-new-banner" class="" style="padding-left: 32px;padding-top:17px;">
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/" data-action="{"to Page":"/"}" data-category="clicked bread crumb" style="display: inline;">Home</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/games" data-action="{"to Page":"/search_contents/preview/games"}" data-category="clicked bread crumb" style="display: inline;">Games</a> >
</span>
<span class="playabe-breadcrum" max-width="100%">
<a class="playabe-breadcrum js-track-ga" href="/search_contents/preview/math-games" data-action="{"to Page":"/search_contents/preview/math-games"}" data-category="clicked bread crumb" style="display: inline;">Math Games</a> >
</span>
<span class="playabe-breadcrum">Counting Games</span>
</div>
<div class="title-new-collection-page" style="">
<h1 style="font-weight:700;">
Counting Games for Kids
</h1>
</div>
<p class="less-banner-content">
<span>The first step to embracing math is learning to count. Children learn to identify, group and classify objects by counting. SplashLearn’s cool online counting games provide respite from the monotony of practice worksheets through colorful virtual manipulatives. Children develop a bond </span>
<span id="js-read-more-banner-btn" onclick="readMoreFunc()" style="color:blue;">... Read more</span>
<span id="js-read-more-banner-content" style="display:none">with numbers that will see them through advanced math in the upcoming years.</span>
</p>
<div class="signup-ctas-new-banner">
<a class="new-banner-signup-link-parent" href="/parents/register#!/parent/creation">
<button class="new-banner-signup-btn-parent">Parents, Sign Up for Free</button>
</a>
<a class="new-banner-signup-link-teacher" href="/teachers/register">
<button class="new-banner-signup-btn-teacher">Teachers, Use for Free</button>
</a>
</div>
</div>
<div class="new-banner-images col-md-5" style="float:right">
<img alt="Imge" class="" style="max-width: 100%; width: 100%;height: 100%;object-fit: contain;" src="http://localhost:8300/cms_assets/images/Common-page.jpg">
</div>
</div>
</div>
</section>

Related

How to extract Amazon Reviews?

I want to extract amazon reviews and all its related data like: Name of reviewer, rating, content, and (if possible) comments in response to that review.
I am using python 3.7.
You can achieve that by two methods:
API (reliable fast)
Ask for API from Amazon
Tools like Headless chrome or Selenium
check this post
Find DOM element in the page like
<div id="R1IZDPP09RA69A" data-hook="review" class="a-section review">
<div id="customer_review-R1IZDPP09RA69A" class="a-section celwidget" data-cel-widget="customer_review-R1IZDPP09RA69A">
<div class="a-row a-spacing-mini">
<a href="/gp/profile/amzn1.account.AGFB356ZQJQAHWZZABTTNIFGYMDA/ref=cm_cr_dp_d_gw_tr?ie=UTF8" class="a-profile" data-a-size="small">
<div aria-hidden="true" class="a-profile-avatar-wrapper">
<div class="a-profile-avatar">
<img src="https://images-eu.ssl-images-amazon.com/images/S/amazon-avatars/f0d86e6d-45d4-4cc7-a4b8-a062450c2c75._CR0,0,335,335_SX48_.jpg" class="" data-src="https://images-eu.ssl-images-amazon.com/images/S/amazon-avatars/f0d86e6d-45d4-4cc7-a4b8-a062450c2c75._CR0,0,335,335_SX48_.jpg">
<noscript><img src="https://images-eu.ssl-images-amazon.com/images/S/amazon-avatars/f0d86e6d-45d4-4cc7-a4b8-a062450c2c75._CR0,0,335,335_SX48_.jpg"></noscript>
</div>
</div>
<div class="a-profile-content"><span class="a-profile-name">Sana Khanam</span></div>
</a>
</div>
<div class="a-row"><a class="a-link-normal" title="4.0 out of 5 stars" href="/gp/customer-reviews/R1IZDPP09RA69A/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=B079Q9VNWQ"><i data-hook="review-star-rating" class="a-icon a-icon-star a-star-4 review-rating"><span class="a-icon-alt">4.0 out of 5 stars</span></i></a><span class="a-letter-space"></span><a data-hook="review-title" class="a-size-base a-link-normal review-title a-color-base a-text-bold" href="/gp/customer-reviews/R1IZDPP09RA69A/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=B079Q9VNWQ">Amazing service by VOLTAS !!Appreciated 🖒</a></div>
<span data-hook="review-date" class="a-size-base a-color-secondary review-date">17 May 2018</span>
<div class="a-row a-spacing-mini review-data review-format-strip"><span data-hook="avp-badge-linkless" class="a-size-mini a-color-state a-text-bold">Verified Purchase</span></div>
<div class="a-row a-spacing-small review-data">
<span data-hook="review-body" class="a-size-base review-text">
<div aria-live="polite" data-a-expander-name="review_text_read_more" data-a-expander-collapsed-height="300" class="a-expander-collapsed-height a-row a-expander-container a-expander-partial-collapse-container" style="max-height: none; height: 300px;">
<div data-hook="review-collapsed" aria-expanded="false" class="a-expander-content a-expander-partial-collapse-content" style="padding-bottom: 19px;">5 th day after having AC installed.<br>PROS:<br><br>-Cooling nice<br>-Looks good<br>-Good one in this price range<br>-Fast Installation within 24h<br>- Customer support response appriciated<br><br>CONS<br>-Started making weird little noises while decreasing temperature.<br><br>-I don't understand but some unpleasant smell being diffused after starting it at the 5th day of installation.<br><br>-Contacted seller, issue resolved!<br><br>Overall would RECOMMEND!! Go for it.</div>
<div class="a-expander-header a-expander-partial-collapse-header" style="opacity: 1; display: block;">
<div class="a-expander-content-fade"></div>
<i class="a-icon a-icon-extender-expand"></i><span class="a-expander-prompt">Read more</span>
</div>
</div>
</span>
</div>
<div data-hook="review-comments" class="a-row review-comments">
<span class="cr-vote" data-hook="review-voting-widget">
<div class="a-row a-spacing-small"><span data-hook="helpful-vote-statement" class="a-size-base a-color-tertiary cr-vote-text">5 people found this helpful</span></div>
<div class="cr-helpful-button aok-float-left">
<span class="a-button a-button-base" id="a-autoid-14">
<span class="a-button-inner">
<a href="https://www.amazon.in/ap/signin?openid.return_to=https%3A%2F%2Fwww.amazon.in%2Fdp%2FB079Q9VNWQ%2Fref%3Dcm_cr_dp_d_vote_lft%3Fie%3DUTF8%26voteInstanceId%3DR1IZDPP09RA69A%26voteValue%3D1%26csrfT%3DgiYnW3e%252Fv7p8y07m5Je2hA3LGXQ2gVKHQWzD%252F40AAAAJAAAAAFuvcotyYXcAAAAAFVfwLBerPie4v1Ep%252F%252F%252F%252F%23R1IZDPP09RA69A&openid.identity=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.claimed_id=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0%2Fidentifier_select&openid.assoc_handle=inflex&openid.mode=checkid_setup&openid.ns=http%3A%2F%2Fspecs.openid.net%2Fauth%2F2.0" data-hook="vote-helpful-button" class="a-button-text" role="button" id="a-autoid-14-announce">
<div class="cr-helpful-text">
Helpful
</div>
</a>
</span>
</span>
</div>
</span>
<i class="a-icon a-icon-text-separator" role="img" aria-label="|"></i><a data-hook="review-comment" class="a-size-base a-link-normal a-color-secondary a-text-normal" href="/gp/customer-reviews/R1IZDPP09RA69A/ref=cm_cr_dp_d_rvw_btm?ie=UTF8&ASIN=B079Q9VNWQ#wasThisHelpful">Comment</a><span class="cr-footer-line-height">
<span><i class="a-icon a-icon-text-separator" role="img" aria-label="|"></i><span class="a-declarative" data-action="cr-popup" data-cr-popup="{"width":"580","title":"ReportAbuse","url":"/hz/reviews-render/report-abuse?ie=UTF8&voteDomain=Reviews&ref=cm_cr_dp_d_rvw_hlp&csrfT=giYnW3e%2Fv7p8y07m5Je2hA3LGXQ2gVKHQWzD%2F40AAAAJAAAAAFuvcotyYXcAAAAAFVfwLBerPie4v1Ep%2F%2F%2F%2F&entityId=R1IZDPP09RA69A&sessionId=257-1905223-9805712","height":"380"}"><a class="a-size-base a-link-normal a-color-secondary report-abuse-link a-text-normal" href="/hz/reviews-render/report-abuse?ie=UTF8&voteDomain=Reviews&ref=cm_cr_dp_d_rvw_hlp&csrfT=giYnW3e%2Fv7p8y07m5Je2hA3LGXQ2gVKHQWzD%2F40AAAAJAAAAAFuvcotyYXcAAAAAFVfwLBerPie4v1Ep%2F%2F%2F%2F&entityId=R1IZDPP09RA69A&sessionId=257-1905223-9805712">Report abuse</a></span></span></span>
</div>
</div>
</div>
here you can find reviewer name rating and review under each div having attribute data-hook="review".
Name under <span class="a-profile-name">Sana Khanam</span>
Rating <span class="a-icon-alt">4.0 out of 5 stars</span>
Review <div data-hook="review-collapsed" aria-expanded="false" class="a-expander-content a-expander-partial-collapse-content" style="padding-bottom: 19px;">5 th day after...</div>

Make angular-material's md-cards not overlap

At the first picture everything is ok.
But if i make the width of my browser a little bigger, the result is the following:
Each md-card overlaps the next one and adds overflow-y. This issue is only on xs resolutions. Here is my html:
<div ng-view="" flex="" class="ng-scope flex">
<md-content layout-xs="column" layout="row" class="md-padding ng-scope layout-xs-column layout-row">
<div layout="column" layout-gt-xs="row" layout-wrap="" infinite-scroll="ctrl.nextArticles()" infinite-scroll-disabled="ctrl.isBusy || ctrl.isEnd" infinite-scroll-distance="1" class="layout-wrap ng-isolate-scope layout-gt-xs-row layout-column">
<!-- ngRepeat: article in ctrl.articles -->
<div ng-repeat="article in ctrl.articles" class="post ng-scope flex-xs-100 flex-xl-20 flex-sm-50 flex-md-33 flex-lg-25" flex-xs="100" flex-sm="50" flex-md="33" flex-lg="25" flex-xl="20">
<md-card>
<md-card-header>
<md-card-avatar>
<img src="/images/sidenav-icons/Bomb.svg">
</md-card-avatar>
<md-card-header-text>
<span class="md-title ng-binding">FakeTitle147</span>
<span class="md-subhead ng-binding">FakeRubric3</span>
</md-card-header-text>
</md-card-header>
<img ng-src="/images/test-img.jpg" alt="*ALT*" class="md-card-image" src="/images/test-img.jpg">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card header</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
The titles
</p>
</md-card-content>
<button class="md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.showArticle(article._id)" aria-label="Button">
<span class="ng-scope">Button</span>
</button>
</md-card>
I have no custom css (only background-color). Thanks for your ideas.
The problem was in layout="column". I just replaced this:
<div layout="column" layout-gt-xs="row" layout-wrap="" ...
to this:
<div layout="row" layout-wrap="" ...
This solution is OK for me.

DomCrawler complex div nesting

I'm having trouble trying to get to some data using the dom crawler.
I want to get the name 'Avocado' and '£1.50' I though I'd be able to do something like
$message = $crawler->filterXPath('h3')->text();
<div class="product">
<div class="productInner">
<div class="productInfoWrapper">
<div class="productInfo">
<h3>
<a href="http://website.com" >
Avocado
<img src="pic.jpg" alt="" />
</a>
</h3>
</div>
</div>
<div class="pricingAndTrolleyOptions">
<div class="pricing">
<p class="pricePerUnit">
£1.50<abbr title="per">/</abbr><abbr title="unit"><span class="pricePerUnitUnit">unit</span></abbr>
</p>
<p class="pricePerMeasure">£1.50<abbr
title="per">/</abbr><abbr
title="each"><span class="pricePerMeasureMeasure">ea</span></abbr>
</p>
</div>
</div>
</div>
To get h3 text:
$message = $crawler->filterXPath('//div[#class="productInfo"]/h3')->text();
To get price (i.e. for class pricePerMeasure):
$price= $crawler->filterXPath('//p[#class="pricePerMeasure"]')->text();

Getting last of Multiple div in the same parent

I have been asked to get the span.vatText which has the text incl. VAT.
<ul class="products" data-role="listview" data-theme="d">
<li class="product" data-productid="1504x2-Rung-Superior-Multi-Purpose-Ladder">
<a href="/product/1504x2-Rung-Superior-Multi-Purpose-Ladder" class="hasThumb">
<div class="thumb">
<img src="http://www.blah.co.uk/acatalog/4x2.jpg" alt="blah" />
</div>
<h2 class="wrappable">Products name</h2>
<p class="price">
<span class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="GBP" />
<span class="priceExclVat">
<span class="priceOriginal">£133.32</span>
<strong class="priceSale">£49.99</strong>
<span class="vatText">excl. VAT</span>
</span>
<span>
<span class="priceOriginal">£159.99</span>
<strong class="priceSale" itemprop="price">£59.99</strong>
<span class="vatText">incl. VAT</span>
</span>
</span>
</p>
</a>
</li>
I have tried using the pseudo code such has nth-child and nth-of-type but these don't seem to work. I was just wondering how I can obtain just the last .vatText. Thank you for any help which you can provide
Use last-child pseudo attribute to achieve what you are looking for.

Use divs to display data in two columns

I'm trying to format the data display HTML below using CSS. I want the data to display in two columns within each dataContentSection div. The solutions I have seen so far require you to specify another div within the dataContentSection, one for the left and one for the right.
What I want to do is specify a height on the dataContentSection divs and then have the data within it listed on the left and then automatically move to the right after the list runs out of room on the left. E.g.
Part A
Col1: foo Col4: 05/11/1955
Col2: bar Col5: Choo
Col3: 32
Part B
Col6: foo Col9: 05/11/1955
Col7: bar Col10: Choo
Col8: 32
I have used Col1, Col2, Col3 etc. for this example but they will actually be data fields returned by a dataset.
<div class="dataContentSection">
<span class="titleText">Part A</span>
<br />
<div id="Col1">
<span class="dataFieldText">Col1</span>
<span class="dataFieldValue"><%# GetValue("Col1")%></span>
</div>
<div id="Col2">
<span class="dataFieldText">Col2</span>
<span class="dataFieldValue"><%# GetValue("Col2")%></span>
</div>
<div id="Col3">
<span class="dataFieldText">Col3</span>
<span class="dataFieldValue"><%# GetValue("Col3")%></span>
</div>
<div id="Col4">
<span class="dataFieldText">Col4</span>
<span class="dataFieldValue"><%# GetValue("Col4")%></span>
</div>
<div id="Col5">
<span class="dataFieldText">Col5</span>
<span class="dataFieldValue"><%# GetValue("Col5")%></span>
</div>
</div>
<div class="dataContentSection">
<span class="titleText">Part B</span>
<br />
<div id="Col6">
<span class="dataFieldText">Col6</span>
<span class="dataFieldValue"><%# GetValue("Col6")%></span>
</div>
<div id="Col7">
<span class="dataFieldText">Col7</span>
<span class="dataFieldValue"><%# GetValue("Col7")%></span>
</div>
<div id="Col8">
<span class="dataFieldText">Col8</span>
<span class="dataFieldValue"><%# GetValue("Col8")%></span>
</div>
<div id="Col9">
<span class="dataFieldText">Col9</span>
<span class="dataFieldValue"><%# GetValue("Col9")%></span>
</div>
<div id="Col10">
<span class="dataFieldText">Col10</span>
<span class="dataFieldValue"><%# GetValue("Col10")%></span>
</div>
</div>
#spangeman; you can use css3 column-count property for this you can check my example here
How to stack divs from top to bottom in CSS
for example http://jsfiddle.net/sandeep/pMbtk/
but it's not work IE for that you can use column-count js pulgin
CSS
div.dataContentSection div {
height: 100px;
width: 100px;
float: right;
}
I hope this helps
<style>
.dataFieldText{display:inline;}
.dataFieldValue{display:inline;}
</style>

Resources