Fullstack Checklist & Style Guide

HTML:

Doctype is declared & is HTML5 Importance: 3/3 :

<!DOCTYPE html>

Charset is UTF-8 Importance: 3/3 :

<meta charset="UTF-8">

Viewport is declared Importance: 3/3 :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Title is declared, and is no more than 50 characters Importance: 3/3 :

<title>Awesome website</title>

Description is declared, and is no more than 150 characters Importance: 2/3 :

<meta name="description" content="Description of the page">

Favicons are present, and declared in HTML Importance: 2/3 :

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">

Apple meta tags are declared Importance: 1/3 :

<link rel="apple-touch-icon" href="favicon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Windows Tiles are declared Importance: 1/3 :

In the HTML file:

<meta name="msapplication-config" content="browserconfig.xml">

In the browserconfig.xml file:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
	<msapplication>
		<tile>
			<square70x70logo src="small.png"/>
			<square150x150logo src="medium.png"/>
			<wide310x150logo src="wide.png"/>
			<square310x310logo src="large.png"/>
		</tile>
	</msapplication>
</browserconfig>

Canonical attribute is declared Importance: 1/3 :

<link rel="canonical" href="http://example.com/i/like/trains">

The lang attribute is present on the HTML tag and corresponds to the language of the website Importance: 3/3 :

<html lang="en">

The dir attribute is present on the HTML tag Importance: 3/3 :

<html dir="ltr">

Contidional comments for IE are present Importance: 1/3 :

<!--[if IE]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser.
	Please <a href="https://browsehappy.com/">upgrade your browser</a> to
	 improve your experience and security.</p>
<![endif]-->

CSS an JS ale placed in correct places (CSS in head, JS in body or head) Importance: 3/3 :

BAD:

<body>
		<link rel="stylesheet" href="style.css">
</body>
<script src="h.js"></script>

GOOD:

<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<script src="h.js"></script>
</body>

Meta tags for the Open Graph protocol are present Importance: 2/3 :

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Optional, but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Meta tags for the Twitter are present Importance: 2/3 :

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

No non-standard attributes are used, use data-* attributes instead Importance: 3/3 :

BAD:

<button state="on">Hi</button>

GOOD:

<button data-state="on">Hi</button>

In case of using target='_blank' use rel attributes Importance: 2/3 :

<a href="http://example.com" target="_blank" rel="noopener noreferrer">My awesome link</a>

HTML5 Semantic Elements are used Importance: 3/3 :
HTML5 Semantic Elements are used appropriately (header, section, footer, main...).

Pages are tested with W3C Validator, Webhint and Lighthouse Importance: 3/3 :
W3C Validator
Webhint
Lighthouse

The X-UA-Compatible meta tag is present Importance: 1/3 :

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Head, html, and body tags should be present Importance: 3/3 :

<!DOCTYPE html>
<html>
	<head>
		<!-- ... -->
	</head>
	<body>
		<!-- ... -->
	</body>
</html>

There are no spaces before attributes Style Guide :

BAD

<img src = "kasztan.webp">

GOOD

<img src="kasztan.webp">

No self-closing tags are closed Style Guide :

BAD:

<meta http-equiv="x-ua-compatible" content="ie=edge" />
<img src="h.webp"></img>

GOOD:

<meta http-equiv="x-ua-compatible" content="ie=edge">
<img src="h.webp">

No boolean attributes have a value (with the exception of ARIA) Style Guide :

BAD:

<input type="text" disabled="true">
<input type="checkbox" value="1" checked="">

GOOD:

<input type="text" disabled>
<input type="checkbox" value="1" checked>

No tags that require to be closed are left open Importance: 3/3 :

BAD:

<body>
	<p>h is the best letter

GOOD:

<body>
	<p>h is the best letter</p>
</body>

Doctype does not have a DTD Importance: 3/3 :

BAD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
			  "http://www.w3.org/TR/html4/strict.dtd">

GOOD:

<!DOCTYPE html>

There is no XML declaration Importance: 3/3 :

BAD:

<?xml version="1.1" encoding="UTF-8" standalone="yes"?>
			<!DOCTYPE html>

GOOD:

<!DOCTYPE html>

If you are running a blog/site that has posts, make sure you have a feed.xml file. Importance: 1/3 :

Fonts:

Webfont format Importance: 2/3 : Webfonts are provided in WOFF2, WOFF or TTF

Webfont size Importance: 3/3 : Total webfont size does not exceed 2MB

Not using Google Fonts Importance: 3/3 :
Webfonts are not loaded from Google Fonts, for Perfomace, Reliability and Privacy reasons.
Instead, fonts are loaded from local files.

Have a fallback font stack Importance: 3/3 :
In case a font does not load, or is still loading, you should fall back to a font provided by the system.
pzplUI has a fallback font stack built into it.

CSS:

Responsive Web Design Importance: 3/3 :
The website should look & work the same on all devices.

Avoid inline CSS Importance: 2/3 :

BAD:

<style>
	body {
		line-height: 1.5;
	}
</style>
<h1 style="color: red;">Hello World</h1>

GOOD:

<link rel="stylesheet" href="style.css">
<h1>Hello World</h1>

Vendor Prefixes are not used. Importance: 2/3 :

BAD:

.example {
	display: -ms-grid;
	display: grid;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
	background: -webkit-linear-gradient(top, white, black);
	background: -moz-linear-gradient(top, white, black);
	background: -o-linear-gradient(top, white, black);
	background: linear-gradient(to bottom, white, black);
}

GOOD:

.example {
	display: grid;
	transition: all .5s;
	user-select: none;
	background: linear-gradient(to bottom, white, black);
}

Semicolons are always used Style Guide :

BAD:

body {
	line-height: 1.5;
	display: flex
}

GOOD:

body {
	line-height: 1.5;
	display: flex;
}

Put a space after a selector and after a rule Style Guide :

BAD:

body{
	line-height:1.5;
	display:flex;
}

GOOD:

body {
	line-height: 1.5;
	display: flex;
}

Put a newline after a selector and after a rule Style Guide :

BAD:

body {
	line-height: 1.5; display: flex;
}
h1 {
	font-size: 3rem;
}

GOOD:

body {
	line-height: 1.5;
	display: flex;
}
			
h1 {
	font-size: 3rem;
}

Set a readable line-height Importance: 2/3 :

body {
	line-height: 1.5; /* use anything from 1.25 to 1.75 */
}

Don't use @import Importance: 2/3 :
Compared to links, @import is slower, adds extra page requests, and can cause other unforeseen problems.

BAD:

@import url("framework.css");
@import url("custom.css");

GOOD:

<link rel="stylesheet" href="framework.css">
<link rel="stylesheet" href="custom.css">

Use will-change on elements that will be animated a lot Importance: 1/3 :

.myawesomeanimation {
	will-change: contents;
}

Don't overuse will-change Importance: 1/3 :

BAD:

.myanimation {
	will-change: contents;
}
			
.myanimation2 {
	will-change: contents;
}
			
.myResourceHeavyanimation {
	will-change: contents;
}

GOOD:

.myResourceHeavyanimation {
	will-change: contents;
}

Don't Repeat Yourself (DRY) Style Guide :

BAD:

#myEl {
	font-size: 2rem;
}
			
#myEl2 {
	font-size: 2rem;
	color: red;
}
			
#myEl3 {
	font-size: 2rem;
}

GOOD:

#myEl, #myEl2, #myEl3 {
	font-size: 2rem;
}
			
#myEl2 {
	color: red;
}

Test your website on different screen sizes Importance: 3/3 :
Use the tools avalible in your browsers devtools.

Test your website on different web browsers Importance: 3/3 :
Firefox & Chromium is good for 90% use cases.

Images:

Compress your images Importance: 3/3 :
You can use Squoosh for that

Use the WebP or AVIF format for images Importance: 2/3 :
You can use Squoosh for that

Use lazy loading and async decoding Importance: 3/3 :

<img src="image.webp" decoding="async" loading="lazy">

Provide alternate text Importance: 3/3 :

<img src="image.webp" alt="A theatre" decoding="async" loading="lazy">

Use animated WebP's instead of GIF's Importance: 1/3 :

JavaScript:

Avoid inline JS Importance: 3/3 :

BAD:

<script>
	const h = "hhh";
</script>

GOOD:

<script src="script.js"></script>

Always use "use strict" Importance: 3/3 :

"use strict";
const h = "h";

If your website relies heavily on Javascript, use a noscript tag Importance: 2/3 :

<noscript>This site works best with JavaScript enabled. 
Please enable JavaScript or update your web browser.</noscript>

Make sure that you load JavaScript with defer or async attributes Importance: 2/3 :

<script src="h.js" defer></script>

Favor using vanillaJS/smaller libaries. Importance: 3/3 :

Angular, React -> VanillaJS, Preact, Vue, hyperHTML, Marko
Moment.js -> VanillaJS, Day.js, date-fns, Luxon
MooTools -> VanillaJS, jQuery, Zepto
Underscore, Lodash -> VanillaJS
Axios -> VanillaJS (fetch), VanillaJS (XMLHttpRequest)
jQuery -> VanillaJS, Zepto, hQuery
Twitter typeahead.js -> VanillaJS
jQuery Mobile, jQTouch -> VanillaJS
VideoJS, MediaElement.js, YouTube embeds -> VanillaJS (or maybe, VanillaHTML)
Typekit -> VanillaJS/CSS
Styled-components, Styled-JSS, CSS Modules, Emotion, Styled System, Styled JSX, Radium -> VanillaCSS
Handlebars, Mustache -> VanillaJS
AMP -> VanillaHTML
Knockout.js -> VanillaJS
Gatsby, Next.js -> VanillaHTML

Always put semicolons Style Guide :

BAD:

const theBestLetter = "h"
			
function logTheBestLetter() {
	console.log(theBestLetter);
}
			
if (5 > 4)
	console.log(theBestLetter);
}

GOOD:

const theBestLetter = "h";
			
function logTheBestLetter() {
	console.log(theBestLetter);
};
			
if (5 > 4)
	console.log(theBestLetter);
};

Only use arrow functions in closures, or where it's just plain better Style Guide :

BAD:

const h = () => {
	console.log("Hi");
	return "h";
};
		
setInterval(function () { console.log("h"); }, 5000);

GOOD:

function h() {
	console.log("Hi");
	return "h";
};
		
setInterval(() => { console.log("h"); }, 5000);

Don't put a newline after a function/if/etc statement Style Guide :

BAD:

function h() 
{
	return "h";
};
			
if (true) 
{
	return "h";
} 
else if (false)
{
	return "e";
} 
else {
	return "a";
};

GOOD:

function h() {
	return "h";
};
			
if (true) {
	return "h";
} else if (false) {
	return "e";
} else {
	return "a";
};

Prefer using querySelector instead of getElementById, etc. Style Guide :

// BAD:
document.getElementById("h");
// GOOD:
document.querySelector("#h");

Security:

HTTPS is avalible Importance: 2/3 :
HTTPS is avalible for all sites and external content

If forcing a HTTPS redirect, have a version of your site without HTTPS Importance: 2/3 :
Make it avalible to users with older operating systems, or those that can't set a correct time on their computer.

Implement a X-XSS-Protection header Importance: 1/3 :

X-XSS-Protection: 1; mode=block

Implement a X-Frame-Options header Importance: 1/3 :

Content-Security-Policy: frame-ancestors 'self'
X-Frame-Options: SAMEORIGIN

Implement a X-Content-Type-Options header Importance: 1/3 :

X-Content-Type-Options: nosniff

Implement a Referrer policy Importance: 2/3 :

Referrer-Policy: no-referrer, strict-origin-when-cross-origin

Make sure that your site is protected against XSS Importance: 3/3 :
In PHP just type

strip_tags($variable);

Performance:

Enable gzip/Brotli compression on your server Importance: 3/3 :
No description

Goals to Achieve Importance: 3/3 :

First Contentful Paint - 0,75s
Speed Index - 0,75s
Largest Contentful Paint - 0,75s
Time to interactive - The same as your First Contentful Paint Result
Total Blocking Time - 10ms
Critical File Size under 64kB gzipped

Cookie Size Importance: 2/3 :
There should be no more than 10
cookies, each should not cotain more than 4096 bytes of data.

Minify your code Importance: 1/3 :
Minify JS and CSS, HTML is optional

DNS Prefetch any content from third-party servers Importance: 1/3 :

<link rel="dns-prefetch" href="https://cdn.kasztan.art">

Preconnect any content from third-party servers that will be needed soon Importance: 1/3 :

<link rel="preconnect" href="https://cdn.kasztan.art">

Prefetch any content that will be needed soon Importance: 1/3 :

<link rel="prefetch" href="thebestletter.webp">

Preload any content that will be needed very soon
(Such as script tags at the end of the body tag) Importance: 1/3 :

<link rel="preload" href="script.js">

Place CSS tags before JavaScript tags Importance: 3/3 :

BAD:

<script src="foo.js"></script>
<link rel="stylesheet" href="bar.css">

GOOD:

<link rel="stylesheet" href="bar.css">
<script src="foo.js"></script>

Avoid iframes Importance: 3/3 :

Try not to use any iframes. If you want to fetch data from an external file, you can use some PHP code:

echo file_get_contents("myFile.html");

or, if you are using pzplPHP:

echo Storage::get("myFile.html");

Use lazy-loading in iframes Importance: 2/3 :

<iframe src="hello.html" loading="lazy"></iframe>

Use SVG Importance: 2/3 :
If it's possible, use SVG instead of other file formats for images

Enable Caching for files that won't be updated often Importance: 1/3 :
Use the cache-control header, if the resource will be updated just
add a ?v parameter to the request URL

Don't load polyfills for older browsers in modern browsers Importance: 2/3 :
Or simply, don't load polyfills at all.

Don't use client-side analytics Importance: 3/3 :
If you want analytics, consider using something like Plausible of Fantom, which weight only ~1kb.

Don't prefetch/preload too much stuff Importance: 3/3 :

I found this code on my shools website the other day. It dns-prefetches a lot of websites that the
visitor won't even visit, therefore slowing down the website.
It also tries to prefetch it's own domain, which is completly useless.

<link rel="dns-prefetch" href="//zsp.lubochnia.pl">
<link rel="dns-prefetch" href="//www.wikom.pl">
<link rel="dns-prefetch" href="//zs-plubochnia.bip.wikom.pl">
<link rel="dns-prefetch" href="//uonetplus.vulcan.net.pl">
<link rel="dns-prefetch" href="//www.saferinternet.pl">
<link rel="dns-prefetch" href="//www.bobr.edu.pl">
<link rel="dns-prefetch" href="//pixchallenge.org">
<link rel="dns-prefetch" href="//codeweek.eu">
<link rel="dns-prefetch" href="//hourofcode.com">
<link rel="dns-prefetch" href="//www.szkolneblogi.pl">
<link rel="dns-prefetch" href="//iteatr.tvp.pl">
<link rel="dns-prefetch" href="//czytamy.org">
<link rel="dns-prefetch" href="//autorytet.org">
<link rel="dns-prefetch" href="//szkolaniepodleglej.zhr.pl">
<link rel="dns-prefetch" href="//bohateron.pl">
<link rel="dns-prefetch" href="//www.w3.org">
<link rel="dns-prefetch" href="//www.google.pl">
<link rel="dns-prefetch" href="//wikom.pl">

A solution in this case would be to remove all dns-prefetches, therefore speeding up the website.

Don't use a third party CDN Importance: 3/3 :
Using a third-party CDN is less secure, less private, less reliable and slower.

Accessibility:

Progressive enhancement Importance: 2/3 :
The most important functionality (such as navbars) should work without JS

Color Contrast Importance: 2/3 :
Color contrast should pass WCAG AA.

Headings should be in correct order Importance: 2/3 :
Headings should be used in the right order - from h1 to h6.

The website should be tested Importance: 2/3 :
The website should be tested with a tool, such as the one built into Firefox DevTools.

Input Labels Importance: 3/3 :
There should be always a label associated with a input.

SEO:

sitemap.xml Importance: 3/3 :
There should be a sitemap.xml file avalilble

<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
    <url>
        <loc>http://example.com/</loc>
        <lastmod>2006-11-18</lastmod>
        <changefreq>daily</changefreq>
        <priority>0.8</priority>
    </url>
</urlset>

robots.txt Importance: 3/3 :
There should be a robots.txt file avalilble

# www.robotstxt.org/

# Allow crawling of all content
User-agent: *
Disallow:

Webmaster Tools Importance: 1/3 :
The website is added onto Google Search Console, Bing Webmaster Tools, and Yandex Webmaster

.editorconfig:

Have a extension for your editor that will follow your .editorconfig file Importance: 1/3 :

Have an .editorconfig file Warning: Undefined array key "priority" in /usr/home/ProgrammerPL/domains/programistazpolski.ct8.pl/public_html/checklist/index.view.php on line 30 Warning: Undefined array key "priority" in /usr/home/ProgrammerPL/domains/programistazpolski.ct8.pl/public_html/checklist/index.view.php on line 34 Warning: Undefined array key "priority" in /usr/home/ProgrammerPL/domains/programistazpolski.ct8.pl/public_html/checklist/index.view.php on line 38 Importance: 1/3 :
An example editorconfig file that I use:

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = false
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.php]
insert_final_newline = true

PHP:

Use the MVC Pattern Importance: 3/3 :
Seperate your logic from your HTML.

Before: index.php

<?php
	$connection = DB::connect("settings");
	$data = DB::fetch("mydata", $connection);
	shuffle($data);
?>
	
<h1>Hello <?= $data[0] ?></h1>
<p>foo <?= $data[1] ?></p>

After: index.php

<?php
	$connection = DB::connect("settings");
	$data = DB::fetch("mydata", $connection);
	shuffle($data);
	require_once "index.view.php"; // or view(); if you are using laravel or pzplPHP
?>

index.view.php

<h1>Hello <?= $data[0] ?></h1>
<p>foo <?= $data[1] ?></p>

Use namespaces Importance: 1/3 :

namespace Website\Controllers;

Use require_once and include_once instead of require and include Importance: 2/3 :

Use PDO instead of mysqli Importance: 3/3 :
PDO prevents SQL injection, and has a number of useful features

Strictly type arguments in your functions when possible Importance: 3/3 :

function hello(String $whoToGreet = "World") 
{
	echo "Hello, {$whoToGreet}";
}

Use <?= ?> instead of <?php echo ?> Importance: 2/3 :

<?= $myVariable ?>

Use for loops and if statements directly in DOM Importance: 2/3 :

<?php if ($myCondition) : ?>
	<p>Nice!</p>
<?php elseif ($mySecondCondition) : ?>
	<p>OK!</p>
<?php else: ?>
	<p>Neat!</p>
<?php endif; ?>
			
<?php foreach ($data as $key => $value) : ?>
	<?= $value ?>
<?php endforeach; ?>

Put newlines before brackets Style Guide :

function hello($whoToGreet = "World") 
{
	echo "Hello, {$whoToGreet}";
}

Laravel:

Make an Eloquent model for most DB elements Importance: 1/3 :

php artisan make:model litera

Use more HTTP methods, not only GET and POST Importance: 1/3 :

Route::get($uri, $callback);
Route::post($uri, $callback);
Route::put($uri, $callback);
Route::patch($uri, $callback);
Route::delete($uri, $callback);
Route::options($uri, $callback);

Webhint:

Install the webhint extension in your editor Importance: 1/3 :

Have an .hintrc file Warning: Undefined array key "priority" in /usr/home/ProgrammerPL/domains/programistazpolski.ct8.pl/public_html/checklist/index.view.php on line 30 Warning: Undefined array key "priority" in /usr/home/ProgrammerPL/domains/programistazpolski.ct8.pl/public_html/checklist/index.view.php on line 34 Warning: Undefined array key "priority" in /usr/home/ProgrammerPL/domains/programistazpolski.ct8.pl/public_html/checklist/index.view.php on line 38 Importance: 1/3 :
An example hintrc file that I use:

{
	"browserslist": [
		"> 1%",
		"last 2 versions"
	]
}

XML:

Prefer using XML version 1.1 when possible Importance: 2/3 :

<?xml version="1.1"?>

Always have a encoding property set to UTF-8 Importance: 3/3 :

<?xml version="1.1" encoding="UTF-8"?>

Have a standalone property set to yes or no Importance: 2/3 :

<?xml version="1.1" encoding="UTF-8" standalone="yes"?>

Prefer not using attributes when they are very long Style Guide :

<!-- BAD -->
<letter>
	<name>h</name>
</letter>
<letter name="h" type="awesome" rating="435897/345" yes="y e s" somepropertyidkwhattowrite="abcdefghkjklmnopqrstuwxyz" />
			
<!-- GOOD -->
<letter name="h" />
	<letter>
	<name>h</name>
	<type>awesome</type>
	<rating>435897/345</rating>
	<yes>y e s</yes>
	<somepropertyidkwhattowrite>
	abcdefghkjklmnopqrstuwxyz
	</somepropertyidkwhattowrite>
</letter>

The XML document is well-structured Importance: 3/3 :

BAD

<?xml version="1.1" encoding="UTF-8" standalone="yes"?>
<post name="Lorem"/>
<post name="Ipsum"/>
<post name="Dolor"/>

GOOD

<?xml version="1.1" encoding="UTF-8" standalone="yes"?>
<posts>
	<post name="Lorem"/>
	<post name="Ipsum"/>
	<post name="Dolor"/>
</posts>

Other:

Error Pages exist (403, 404, 500, etc.) Importance: 1/3 :
You can use Ignition for this.

The files are intended as: 4, tabs Style Guide :
Tabs provide smaller filesizes than spaces.

Use the LF End of Line sequence Style Guide :
No description

Don't put a newline at the end of a file Style Guide :
(With the exception of PHP)