Magician website

hilaryaq · 2020-05-22 08:51:34

It seems like it’s because I’m logged into YouTube on chrome maybe.. so in Firefox I see no cookies at all in the nocookie mode under the inspector panel, but in chrome I can but it is possible they have followed me from YouTube as a logged in person.. according to Firefox the nocookie is empty and according to chrome I see cookies but I wonder is that because I consented to that on the YouTube side. There’s a login_info cookie and a cookie labelled consent dated 2017.. which looks like I consented on the YouTube side maybe.

colak · 2020-05-22 09:06:24

hilaryaq wrote #323143:

That’s strange, why wouldn’t they show in the inspector>console then?

Is it saying it’s from the YouTube video?

Here they are:)

ajax.googleapis.com
use.fontawesome.com
fonts.googleapis.com
yt3.ggpht.com
fonts.gstatic.com
www.youtube-nocookie.com
www.youtube.com
i.ytimg.com
s.ytimg.com

and these are from the home page

ajax.googleapis.com
use.fontawesome.com
fonts.googleapis.com
www.youtube-nocookie.com
www.youtube.com
s.ytimg.com

gaekwad · 2020-05-22 09:09:30

Well done! I spotted a small snag with the ‘Book Me’ button in the header – see below:

https://youtu.be/xIYZFB01SPY

Video is unlisted, let me know when you want me to delete it.

Near the smaller breakpoint ‘Book Me’ splits over two lines. I only found this out with Tor when I was ~~buying heaps of illegal narcotics~~ cookie sleuthing, so it’s not likely to be a common occurrence, I don’t think.

I can’t test it here to say for sure, but a   may fix it.

hilaryaq · 2020-05-22 09:11:36

haha, thanks for the video! I’ll set the breakpoint higher is the easiest way out of it, and the right way, thanks!

hilaryaq · 2020-05-22 10:35:00

I’ve just got rid of YouTube completely until I can implement the solution above, no time right now! There should be no cookies now bar necessary ones. I think a google font cdn link would count as ok, if we can’t load them it’s back to web default fonts :(

gaekwad · 2020-05-22 10:36:31

hilaryaq wrote #323159:

I think a google font cdn link would count as ok, if we can’t load them it’s back to web default fonts :(

For when you have time: google-webfonts-helper.herokuapp.com/fonts

hilaryaq · 2020-05-22 12:13:20

Great resource! Site is improved thank you :)

hilaryaq · 2020-05-22 17:59:06

For anyone following this, I was just hesitant to set parameters in the url as Google can pick those up (you can instruct it not to).. so I found very handy code at https://codereview.stackexchange.com/questions/216103/block-youtube-iframes-until-user-consents-with-cookies

Which is just showing how to load an image first with no cookies until consent is clicked, without setting any parameter value or re-loading the page. Handy code!

Thanks for all your help above :)

colak · 2020-05-23 04:35:47

hilaryaq wrote #323176:

For anyone following this, I was just hesitant to set parameters in the url as Google can pick those up (you can instruct it not to).. so I found very handy code at https://codereview.stackexchange.com/questions/216103/block-youtube-iframes-until-user-consents-with-cookies

Which is just showing how to load an image first with no cookies until consent is clicked, without setting any parameter value or re-loading the page. Handy code!

Thanks for all your help above :)

Nice!

jakob · 2020-05-23 08:39:29

Nice site! :-) The lightning effect is magic!

On the video poster image thingy, you can retrieve the poster images in different sizes with php as discussed on this stackoverflow thread. The same principle also works for vimeo videos.

You can use that to display the preview with your own title, notice and play buttons that start the actual video (from the nocookies site 😏) with autostart switched on. On some browsers, the video then starts when you click play, on other browsers you have to click play a second time. A small penalty for not tracking regular site guests.

hilaryaq · 2020-05-23 12:35:50

Very handy link thanks Jacob! :)

Pat64 · 2020-05-23 17:22:11

Hi Hilary.

May I suggest you one little thing?
From my Firefox on PC, I noticed a vertical scrollbar display due to the 3D rotation of the cards with images.

Here is the minimum correction needed within the Image scroll element:

ul.imagescroll{
	...
	margin:.85em 0;
	...
}

And if you haven’t any other cards to show into your section outside this box, you could remove the horizontal scrollbar:

section#leader {
	...
	/* overflow-x: scroll */
	...
}

If you change the links place here in order to surround the list elements, you would get entire clickable cards (never mind where your visitors click or tap on it):

<ul class="imagescroll">
<li><a href="https://www.davidpeacemagic.ie/wedding/">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
     <img src="https://www.davidpeacemagic.ie/images/60t.jpg" alt="Image " loading="lazy">
      <h4 class="caption">Wedding</h4>
    </div>
    <div class="flip-card-back">
      <h3>Wedding <i class="fas fa-angle-double-right"></i></h3> 
      <p>David Peace can perform at your wedding, learn more here!</p>
    </div>
  </div>
</div>

<meta itemprop="width" content="800">
<meta itemprop="height" content="533">
<meta itemprop="url" content="https://www.davidpeacemagic.ie/images/60.jpg">

</a></li>
<li><a href="https://www.davidpeacemagic.ie/corporate/">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
     <img src="https://www.davidpeacemagic.ie/images/61t.jpg" alt="Image " loading="lazy">
      <h4 class="caption">Corporate</h4>
    </div>
    <div class="flip-card-back">
      <h3>Corporate <i class="fas fa-angle-double-right"></i></h3> 
     <p>David Peace can perform at your corporate event, learn more here!</p>
    </div>
  </div>
</div>

<meta itemprop="width" content="800">
<meta itemprop="height" content="533">
<meta itemprop="url" content="https://www.davidpeacemagic.ie/images/61.jpg">

</a></li>
<li><a href="https://www.davidpeacemagic.ie/show/">
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
     <img src="https://www.davidpeacemagic.ie/images/16t.jpg" alt="Image " loading="lazy">
     <h4 class="caption">Show</h4>
    </div>
    <div class="flip-card-back">
      <h3>Show <i class="fas fa-angle-double-right"></i></h3> 
<p>See details of David Peace's latest show, brochure available on request!</p>
    </div>
  </div>
</div>

<meta itemprop="width" content="1080">
<meta itemprop="height" content="720">
<meta itemprop="url" content="https://www.davidpeacemagic.ie/images/16.jpg">

</a></li>
</ul>

If you remove the 2 unedeed attributes into your video élément (governed by CSS instead), you could have a 100% W3C valid website.

Finally, checking your site through an online tool like Gmetrix will give you compressed images (for example): a chance to gain supplementary points for Google Speed Insights score. ;)

Last edited by Pat64 (2020-06-01 03:41:44)

Textpattern CMS

Textpattern CMS support forum

#13 2020-05-22 08:51:34

Re: Magician website

#14 2020-05-22 09:06:24

Re: Magician website

hilaryaq wrote #323143:

#15 2020-05-22 09:09:30

Re: Magician website

#16 2020-05-22 09:11:36

Re: Magician website

#17 2020-05-22 10:35:00

Re: Magician website

#18 2020-05-22 10:36:31

Re: Magician website

hilaryaq wrote #323159:

#19 2020-05-22 12:13:20

Re: Magician website

#20 2020-05-22 17:59:06

Re: Magician website

#21 2020-05-23 04:35:47

Re: Magician website

hilaryaq wrote #323176:

#22 2020-05-23 08:39:29

Re: Magician website

#23 2020-05-23 12:35:50

Re: Magician website

#24 2020-05-23 17:22:11

Re: Magician website

Board footer