Skip to content

Latest commit

 

History

History
208 lines (138 loc) · 3.77 KB

README.md

File metadata and controls

208 lines (138 loc) · 3.77 KB

Custom-HTML-Linter

In this project, I built a custom HTML linter using Ruby to check if the code follows the best practices and warns the user if he/she does not follow them.

Built With

  • Ruby
  • RSpec for TDD

Getting Started

To get a local copy up and running follow these simple steps

To clone this repo, run this code on a terminal window:

git clone https://github.com/Maha-Magdy/Build-Custom-Linter.git

To have all gem files installed in your machine, run this command in your terminal:

bundle

To run the TDD in your machine, run this command in your terminal:

rspec

Basic Usage

It's simple to get started:

  • You have two option:

    • Pass a local HTML code into the workspace.html file by overriding what already exists, and run this command
    ruby bin/main.rb workspace.html
    • Pass any local HTML file path or webpage path as an argument after ruby bin/main.rb, like this command.
    ruby bin/main.rb file_path

The expected result

  • It may become one of these options.

    • No offenses detected if your code follows the best practices.
    • The number of detected errors that needed to fix.
    • Warnings if you do not pass file path/valid HTML file

Here are examples of the best practices which this custom HTML linter check

  • Use proper document structure
# Good Code

<!DOCTYPE html>
<html>
    <head>
        <title>proper title for the file</title>
    </head>
    <body>
        <img src="" alt="proper description for the image">
        <p><span></span></p>
    </body>
</html>

# Bad Code

<html>
    <head>
        <title>proper title for the file</title>
    </head>

    <img src="" alt="proper description for the image">
    <p><span></span></p>

</html>
  • Declare the correct doctype
# Good Code

<!DOCTYPE html>
  • Always close tags
# Good Code

<!DOCTYPE html>
    
    <div>
        <h1>Title</h1>
        <p>some text</p>
    </div>

# Bad Code

    <div>
        <h1>Title
        <p>some text
  • Don't use inline styles
# Good Code

    <h1>Title</h1>

# Bad Code

    <h1 style="padding: 15px">Title</h1>
  • Use alt attribute with images
# Good Code

    <img src="" alt="proper description for the image">

# Bad Code

    <img src="">
  • Place external style sheets within the tag
# Good Code

    <html>
      <head>
        <link rel="stylesheet" href="">
      </head>
    </html>

# Bad Code

    <html>
      <body>
        <link rel="stylesheet" href="">
      </body>
    </html>
  • Use lowercase markup for tags' name
# Good Code

    <html>
      <head>
        <title>proper title for the file</title>
      </head>
      <body>
        <img src="" alt="proper description for the image">
        <p><span></span></p>
      </body>
    </html>

# Bad Code

    <HTML>
      <HEAD>
        <title>proper title for the file</title>
      </HEAD>
      <BODY>
        <IMG src="" alt="proper description for the image">
        <P><SPAN></SPAN></SPAN>
      </BODY>
    </HTML>

Author

👤Maha Magdy

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.