[Resolved] W3C Validation Error after Update

Home Forums Support [Resolved] W3C Validation Error after Update

Home Forums Support W3C Validation Error after Update

Viewing 3 posts - 16 through 18 (of 18 total)
  • Author
    Posts
  • #1841967
    Maarten

    Dear Tom , I like to update you on this below image

    img

    The reason we see this in your plugin lightweight-social-icons is because of the code in CSS but I did realize something, the plugin is not in active development anymore so I do understand why you did not reply to this also this has nothing to do with your great Theme.

    Below on this image

    article.png

    Number 7 – We do get something about attribute aria, this is the theme and blog having 1 comment below it

    But when I saw the following, I was like okay W3C Do I really have to take your advice serious from now on, because if you start asking my users to have headings inside their comments, I am not taking this anymore serious, have a look Tom

    comment-heading ?

    For your plugin we need to preload the following font: fontello.woff if using Autoptimize / Check if you don’t in Lighthouse mobile test.

    We need to cache or have this inside .htaccess as well

    <IfModule mod_headers.c>
    <FilesMatch “\.(css|js)$”>
    Header set Cache-Control “max-age=2592000, public”
    </FilesMatch>
    </IfModule>

    <IfModule mod_headers.c>
    <FilesMatch “\.(png|jpe?g|ico|gif|woff)$”>
    Header set Cache-Control “max-age=31536000, public”
    </FilesMatch>
    </IfModule>

    <IfModule mod_expires.c>
    AddType application/x-font-woff .woff
    AddType image/svg+xml .svg
    ExpiresActive On
    ExpiresDefault “access plus 7200 seconds”
    ExpiresByType image/png “access plus 1 month”
    ExpiresByType image/jpg “access plus 1 month”
    ExpiresByType image/jpeg “access plus 1 month”
    ExpiresByType image/x-icon “access plus 1 month”
    ExpiresByType image/gif “access plus 1 month”
    ExpiresByType application/x-font-woff “access plus 1 month”
    </IfModule>

    The above is my small powerful .htaccess lines of code needed to get 100/100/100/100 in Lighthouse.

    But we still have the following for your plugin:

    I made the following note in my to-do list for my build:

    /////////////////////////////////
    // Note
    /////////////////////////////////

    Lightweight Social Icons
    We still have the following for fontello.woff
    Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading
    https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools

    Conclusion:

    I love your work, I have a very active client, she is also pretty famous in my Country and liked me to have her website re-build. I am very happy I can do this work for her as she also has a lot of comments on her site and a lot of posts.

    It will be a transition that I need to be careful with cause I do not want her to loose any share and SEO power, I did have some company help me so this will be fine.

    But now I really see in the real world how great GeneratePress is. I did need to make some changes and I am even so open to share my CSS so you can see what I do.

    .top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    }
    .top-bar-cta {
    display: flex;
    align-items: center;
    }
    .top-bar-cta-button {
    background: transparent;
    border: 2px solid #ffffff;
    padding: 8px 16px;
    margin-left: 20px;
    }
    .top-bar-cta-button:hover,
    .top-bar-cta-button:active {
    text-decoration: none !important;
    }
    .site-header, #mobile-header {
    border-bottom: 2px solid #efefef;
    }
    body:not(.page):not(.single) .inside-article {
    border-bottom: 2px solid #efefef;
    }
    .read-more:not(.read-more.button) {
    display: inline;
    font-weight: bold;
    }
    .inside-article p a:hover,
    .inside-article p a:active,
    .inside-article p a:visited {
    text-decoration: underline;
    }
    .taxonomy-description p a:hover,
    .taxonomy-description p a:active,
    .taxonomy-description p a:visited {
    text-decoration: underline;
    }
    .widget a:hover,
    .widget a:active,
    .widget a:visited {
    text-decoration: underline;
    }
    .copyright-bar a:hover,
    .copyright-bar a:active,
    .copyright-bar a:visited {
    text-decoration: underline;
    }
    .read-more.button {
    text-decoration: none !important;
    }
    .sidebar .widget {
    box-shadow: #efefef 3px 16px 20px 9px;
    border-radius: 5px;
    border-top: 2px solid #efefef;
    }
    .sidebar .widget .widget-title {
    text-align: center;
    }
    .footer-widgets {
    border-top: 2px solid #efefef;
    }
    .site-footer {
    position: relative;
    }
    a.generate-back-to-top {
    position: absolute;
    top: 20px;
    bottom: auto;
    }
    .widget:not(.widget_categories):not(.widget_pages):not(.widget_recent_entries):not(.widget_recent_comments):not(.widget_meta) ul {
    margin: 0 0 1.5em 3em;
    }
    .widget:not(.widget_categories):not(.widget_pages):not(.widget_recent_entries):not(.widget_recent_comments):not(.widget_meta) ul li {
    list-style-type: disc;
    }
    .bypostauthor > .comment-body > .comment-content {
    background-color: #fcb90003;
    }

    @media
    (max-width: 750px) {
    }

    I think you can see what I do : )
    Yes, the post author has his own background color, to stand out a bit.
    And Yes I do need a little grey line below the header/menu if it is white as this looks better to seperate the content from the menu-bar.
    And yes, having bullet-points be nice in Widgets except my (not) in CSS.
    The outlining for the Read More link, I needed this CSS in combination with some function.

    I only focus on High Performance sites and clients so I am also very particular with what Hosting they need, it just needs to be as perfect as I can find.

    I know that you put a lot of perfection in your code and I have the same, why do half ass work when you can be as perfect as you can be right?

    Yes, it takes longer and yes my client is a bit amazed that I take all this so serious for her. I logged into her old site and she has almost 90 plugins! To much just to much nonsens plugins that will effect her speed, she deserves a great fast GeneratePress site, point blank!

    Because I am now into Lighthouse, after so many years will I not need AutOptimize anymore, I do however still advice anyone to use it. I like wp rocket but you do not really need that at all to get perfect speed.

    I do have a question if I should use Infinite scroll with the button, but I will make a new post for it I do not want to confuse you of course.

    But yeah, I still think your plugin is great Tom, there are a lot of social share icon plugins but I just like your work and that it is so easy to use, but the final comment from Lighthouse I have no idea how to fix it.

    Here is it again:

    /////////////////////////////////
    // Note
    /////////////////////////////////

    Lightweight Social Icons
    We still have the following for fontello.woff
    Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading
    https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools

    Thanks again for your great work!

    #1843626
    Tom
    Lead Developer
    Lead Developer

    Thanks, Maarten!

    With blocks being added to the widget area in 5.8, it will actually be better to use our GenerateBlocks plugin to add social icons to the widget areas – Lightweight Social Icons will no longer be necessary (it was great for its time!).

    We’ve fixed some of those W3C Validation issues in GP 3.1 (due out mid-August). The <article> in the comments one is a little bit harder to fix, as we don’t overly want to change the element, but we also don’t want headings in the comments. We’ll figure it out.

    Thanks again!

    #1848233
    Maarten

    You are welcome! Good luck with the updates.

Viewing 3 posts - 16 through 18 (of 18 total)
  • You must be logged in to reply to this topic.