Welcome to the Linux Foundation Forum!

Validation rule of ch-4 labs-1

Posts: 58
in LFW212 Class Forum

Hi, I have noticed that the 2nd criteria of the validation - reuses the layout.hbs view to render validating HTML code via regexp.

And based on the regexp, it assumes that the last CSS rule in one CSS block should not be suffixed with semicolon.

Although the semicolon of last rule is not necessary, I was taught that it would be a good habit to reserve it instead of removing it. This is a good habit because e.g. you do not need to care about the semicolon if you want to change the order of the rules, you can also freely to append new rules without adding semicolon. So as to git diff, you will not see many history recods about the semicolon alone and leaving the import part highlightened.

So I always keep the semicolon of the last rule in CSS block. Which in turn prevents me from passing the validation.

Is it possible to make some adjustments? For example, we can use ;? to remove the constraint of 'must remove the semicolon of last rule in CSS blocks' ?

Thank you for your time in advance. :)

Comments

  • Posts: 270

    @krave this is a good point, if you'd like you can modify the regexp and post it here with your example input and I'll work on updating the validation code for that question

  • Posts: 58

    @davidmarkclements
    Here is the updated regexp

    RegExp

    1.   const markers = RegExp('<style>\\s+body\\s+{\\s+background:\\s+#333;\\s+margin:\\s+1\\.25rem;?\\s+}' +
    2.     '\\s+h1\\s+{\\s+color:\\s+#EEE;\\s+font-family:\\s+sans-serif;?\\s+}\\s+a\\s+{\\s+' +
    3.     'color:\\s+yellow;\\s+font-size:\\s+2rem;\\s+font-family:\\s+sans-serif;?\\s+}\\s+' +
    4.     '<\\/style>')

    Since the style sheet is originated from views/layout.hbs, I post two version of the file here as input examples.

    layout.hbs - all rules with semicolon

    1. <html>
    2.  
    3. <head>
    4.     <style>
    5.         body {
    6.             background: #333;
    7.             margin: 1.25rem;
    8.         }
    9.  
    10.         h1 {
    11.             color: #EEE;
    12.             font-family: sans-serif;
    13.         }
    14.  
    15.         a {
    16.             color: yellow;
    17.             font-size: 2rem;
    18.             font-family: sans-serif;
    19.         }
    20.     </style>
    21. </head>
    22.  
    23. <body>
    24.     {{{ body }}}
    25. </body>
    26.  
    27. </html>

    layout.hbs - last rule without semicolon

    1. <html>
    2.  
    3. <head>
    4.     <style>
    5.         body {
    6.             background: #333;
    7.             margin: 1.25rem
    8.         }
    9.  
    10.         h1 {
    11.             color: #EEE;
    12.             font-family: sans-serif
    13.         }
    14.  
    15.         a {
    16.             color: yellow;
    17.             font-size: 2rem;
    18.             font-family: sans-serif
    19.         }
    20.     </style>
    21. </head>
    22.  
    23. <body>
    24.     {{{ body }}}
    25. </body>
    26.  
    27. </html>

    I have tested the RegExp on both cases and both passed. Hope that helps.

Welcome!

It looks like you're new here. Sign in or register to get started.
Sign In

Welcome!

It looks like you're new here. Sign in or register to get started.
Sign In

Quick Links

Categories

Upcoming Training