scriptex / css-diagnostics

Highlight potentially invalid or erroneous HTML markup

Hi, I'm Atanas 👋

• Javascript/Typescript engineer doing Web and Mobile front-end development since 2011
• Lead front-end developer at dmarcian
• Former senior software developer and mentor at Three11
• Former lead front-end engineer in the E.ON Home project
• Former senior web and desktop applications developer at Kinetik Automotive
• Former senior front-end engineer and mentor at 2create
• Former senior front-end developer at htmlBurger
• Former senior front-end developer at htmlBoutique
• Former front-end developer at HTML Lab
• Part of "the top 3% in the world" at Toptal
• Founding talent member at Braintrust
• Senior front-end engineer at Andela
• Freelance Javascript/Typescript Engineer at Upwork
• Freelance Javascript/Typescript Engineer at Freelancer
• Freelance front-end engineer at 9am
• Freelance front-end developer at Wellfound
• Senior front-end engineer at People Per Hour
• Freelance front-end developer at FlexWork
• Freelance front-end developer at Arc.dev
• Freelance front-end developer at Codementor
• Open source software maintainer - check my projects.
• Author of web components at WebComponents.org
• Author of browser extensions for Google Chrome and Mozilla Firefox
• Google developer

My open source software is published on NPM and has been downloaded this many times in the past year:

Here is a bit more detailed graph showing my open source contributions in the past year:

Wondering how to pronounce my name? Not anymore!

---

Connect with me:

                     

---

Support and sponsor my work:

css-diagnostics's Issues

Create an extension for Opera

REVENGE.CSS

See if anything listed here is not yet a part of the current implementation. If not, add it.

Create an extension for Firefox

Create an extension for Edge

Check if easy and worth it

Create an extension for Safari

Check if easy and worth it

Add this snippet (and adjust it)

html:not([lang]),
html[lang=""] {
  border: 5px solid red;
}

head,
head *:not(title) {
  display: block;
}

meta[charset]:not([charset="UTF-8"])::before {
  content: "CSS Diagnostics: Bad charset: " attr(charset) " ";
  display: block;
  color: red;
}

meta[charset]:not(:first-child)::after {
  content: "CSS Diagnostics: Bad charset: not first child";
  display: block;
  color: red;
}

meta[name="viewport"][content*="user-scalable=no"]::after,
meta[name="viewport"][content*="maximum-scale"]::after,
meta[name="viewport"][content*="minimum-scale"]::after {
  content: " • Bad viewport: " attr(content);
  display: block;
  color: red;
}

script[type="text/javascript"]::before {
  content: " • Unnecessary type attribute on script: " attr(type);
  display: block;
  color: red;
}

link[rel="stylesheet"][type="text/css"]::before {
  content: " • Unnecessary type attribute on link: " attr(type);
  display: block;
  color: red;
}