Mathies
Mathies
KPCKevin Powell - Community
Created by Mathies on 12/13/2024 in #front-end
How to optimize mediocre page speed results with Canvas element and Fontawesome.
Hi all! As a fresh new designer turned front end guy I'm having a hard time optimizing my website with some big things that according to Pagespeed insights are problematic. Namely (what I think are the biggest issues) my canvas element and Fontawesome. I'm using Hugo to generate static pages with vanilla CSS and JS with some external connections. Here is my speedtest result: https://pagespeed.web.dev/analysis/https-www-theory7-net/7xvt6fkqjw?form_factor=mobile Regarding the canvas element at the top of the page in the hero section: This is a script that someone provided (link to codepen) that has an animation that isn't needed for page structure or anything like that. I've made sure that it loads after the DOM has loaded, however it looks like it is taking up significant time for Pagespeed. Is there any way to tell the browser more that it isn't an important resource to load so that it doesn't affect my pagespeed so much? Regarding Fontawesome: My Fontawesome files are so large it's taking about 6.5s to load on the mobile test. This is already the minified version they provide. Any way to optimize the speed for this more? You can visit the website (hosted in the EU) here if it helps! https://www.theory7.net/ Greatly appreciate any advice on increasing the speed further, thanks so much! Some images still need optimizing yes, but I thought I'd start here for now.
20 replies
KPCKevin Powell - Community
Created by Mathies on 1/25/2024 in #front-end
Hover dropdown menu next to normal <a> navigation items, use a pointer cursor or no?
No description
2 replies
KPCKevin Powell - Community
Created by Mathies on 6/28/2023 in #front-end
Creating seamless transition between pages, idea's on how this is done?
I found this website: https://aboutcoolblue.com/nl/. By clicking on one of the navigation items (1 through 6, 7 doesn't seem to do the same thing) in the center of the page everything seems to transition so seamless without any sort of reload of the resources. Looks like the <head> stays the same for example when switching pages. Does anyone know how this is done?
10 replies
KPCKevin Powell - Community
Created by Mathies on 5/3/2023 in #front-end
How to make sure grid-template-columns with repeat minmax function doesn't create a row with 1 item?
[2]
4 replies
KPCKevin Powell - Community
Created by Mathies on 4/19/2023 in #front-end
Is it possible to change the styling of a parent element when focusing on a child element?
I'm trying to change the background-color of the parent element when focus is applied to a child <input> element. When looking around I've only found solutions that involve changing an element that comes after the first element. My code:
<div class="checker-input">
<i class="checker-icon fa-duotone fa-magnifying-glass"></i>
<input type="url" name="checker" id="checker" placeholder="Check je domein">
<button href="http://" class="boxbutton">Checken</button>
</div>
<div class="checker-input">
<i class="checker-icon fa-duotone fa-magnifying-glass"></i>
<input type="url" name="checker" id="checker" placeholder="Check je domein">
<button href="http://" class="boxbutton">Checken</button>
</div>
So; when focus is applied to the <input> element I want something to happen to the <div>
4 replies