veliovgroup / best-practices

Software development best practices

Web Development Best Practices

By @veliovgroup and @dr-dimitru

• For HTML
• For SASS/CSS
• For JavaScript

Front end

• normalize.min.css — Reset browser's default CSS styles
• copy-to-clipboard.js — Copy text into system clipboard programmatically without user interaction or upon a click, this script works on iOS, mobile devices, and when document is not in the focus
• To avoid "style leaking" between different pages or elments wrap SASS/SCSS/CSS code into a parent class. "CSS scoping" by page, element, or component is vital when working in a team. Otherwise, your CSS can "leak" affecting global styles, or styles of other pages, elements, and components. Enclosing CSS rules within a parent container helps to create more modular, maintainable code and prevent conflicts between different parts of the page.

PWA

• Use realfavicongenerator to generate all necessary icons assets, webmanifest, and related meta-tags
• Use Lighthouse to run "best practices" tests and audits locally from Chrome DevTools
• Use web.dev/measure to run "best practices" tests and audits on a remote host online