standards - sasjakoning/blok-tech-2022 GitHub Wiki
This project has a couple of coding standards.
- If possible, avoid using
<div>. Try using more semantic alternatives like<section>or<article>. - File sizes should be as small as possible. Use svg for icons and webp or jpg for images. For accessibility, use the
<picture>tag and offer multiple file types. - Use comments to explain code where needed.
- Regularly run formatters to make code as readable as possible.
Example code
.navBtn > div {
position: absolute;
width: 2em;
background-image: url(../images/menu-open.svg);
color: black;
background-size: contain;
height: 2em;
background-repeat: no-repeat;
background-position: center;
z-index: 22;
}- CSS should be written with tabs and spacing for optimal readability. Also try grouping rules together..
.navBtn > div {
position: absolute;
width: 2em;
height: 2em;
color: black;
background-image: url(../images/menu-open.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 22;
}- Use shorthands where possible.
.navBtn > div {
position: absolute;
width: 2em;
height: 2em;
color: black;
background: url(../images/menu-open.svg) no-repeat center;
z-index: 22;
}- if colors are re-used, use CSS variables.
.navBtn > div {
position: absolute;
width: 2em;
height: 2em;
color: var(--text-color);
background: url(../images/menu-open.svg) no-repeat center;
z-index: 22;
}- Place comments where needed
/* Navigation */
.navBtn > div {
position: absolute;
width: 2em;
height: 2em;
color: var(--text-color);
background: url(../images/menu-open.svg) no-repeat center;
z-index: 22;
}
/* --- */It is also important to group classes together. For example, everything about navigation should be put together with a clear comment.
- Use ES6 syntax;
- Arrow functions
- let, const
- Variables should be named clearly with camelCase.
- Prefer
querySelectorovergetElementById - Use comments to explain code where needed.
// get all users from database etc
const getUsers = async () => {
// find the admin user (which is being used as "logged in user" for demo purposes)
const admin = await AdminUserModel.findOne({ username: "adminuser" });
// find which users admin has matched
const adminMatches = admin.matches;
// return all users except the already matched ones
const usersList = await UserModel.find({
_id: { $nin: adminMatches },
}).lean();
const adminLeaned = await AdminUserModel.findOne({
username: "adminuser",
}).lean();
return [usersList, admin, adminLeaned];
};