Fundamentals of Backend Engineering Design patterns udemy course (link redirects to udemy with coupon)
https://backend.husseinnasser.com
Fundamentals of Networking for Effective Backends udemy course (link redirects to udemy with coupon)
https://network.husseinnasser.com
Fundamentals of Database Engineering udemy course (link redirects to udemy with coupon)
https://database.husseinnasser.com
Introduction to NGINX (link redirects to udemy with coupon)
https://nginx.husseinnasser.com
Python on the Backend (link redirects to udemy with coupon)
https://python.husseinnasser.com

Backend Developer Roadmap - Everything you need to know in 2023 - YouTube
🧑🏻‍💻 Backend Developer Roadmap | Alex Hyett

Cookies

HTTP Cookies Crash Course - YouTube
Mozilla Explains: Cookies and supercookies | The Firefox Frontier

Don't break the web

EmberConf 2019 - Don't Break The Web by Melanie Sumner - YouTube
Don’t break the web: Why web standards matter and how to use them responsibly. | Build 2012 | Channel 9
The web and web standards - Learn web development | MDN

Micro webpage

Encodes the whole micro-webpage in hashtag.

itty.bitty
This amazing new web tool lets you create microsites that exist solely as URLs - The Verge

URL Pages Editor
jstrieb/urlpages: Create and view web pages stored entirely in the URL

Single Page Apps

Single page apps in depth (a.k.a. Mixu' single page app book)
Static Web Apps - A Field Guide

6. A Single Page Story - Henrik Joreteg - YouTube

Have Single-Page Apps Ruined the Web? | Transitional Apps with Rich Harris, NYTimes - YouTube

Server Side Rendering (SSR)

Server Side Rendering - Loadable Components
Server Rendering in JavaScript Series' Articles - DEV Community

Visual Explanation and Comparison of CSR, SSR, SSG and ISR - DEV Community
Understanding SSR, CSR, ISR, and SSG: A Comprehensive Guide - DEV Community

The many definitions of Server-Side Rendering—zachleat.com Component frameworks's SSR could be SSG (pre-rendering) or SSR (runtime rendering).

If the site is rendered ahead of time at build, it is known as "Static Site Generation"/"Server Side Generated" (SSG).
"Static Optimization" in Next.js is SSG.

10 Rendering Patterns for Web Apps - YouTube
Do you REALLY need SSR? - YouTube
How modern web apps are rendered - YouTube

reactjs#Server Side Rendering/Hydration
nextjs
nuxtjs
svelte#SvelteKit

React

What’s New With Server-Side Rendering in React 16 – Hacker Noon
An Introduction to React Server-Side Rendering ← Alligator.io
Server Rendering in JavaScript: Optimizing Performance - DEV Community

StrongLoop | How to Implement Node + React Isomorphic JavaScript & Why it Matters

Progressive Web Apps (PWA)

A Progressive Web App uses modern web capabilities to deliver an app-like user experience.

Progressive Web Apps | Web | Google Developers
Get started with Progressive Web Apps - Microsoft Edge Development | Microsoft Docs
A selection of Progressive Web Apps
Make Progressive Web App (PWA) Your Best Friend – Yudiz Solutions – Medium
A Beginner's Guide To Progressive Web Apps – Smashing Magazine
What are Progressive Web Apps? | The Official Ionic Blog
Progressive Web App Overview – codeburst
Progressive Web Applications: A Progressive State of the Web
Progressive Web Apps (PWA), its got electrolytes! – codeburst
Progressive Web Apps coming to all Chrome platforms
Creating a Progressive Web App in React A Beginners Guide - DEV Community
Building Progressive Web Apps [Book]
Top 7 Features of Progressive Web Apps

Progressive Web Apps with React.js: Part I — Introduction – Medium
Progressive Web Apps with React.js: Part 2 — Page Load Performance – Medium
Progressive Web Apps with React.js: Part 3 — Offline support and network resilience – Medium

Making Progressive Web Apps (PWAs) with React ← Alligator.io
Making a Progressive Web App · Create React App
How to use IndexedDB to build Progressive Web Apps - ITNEXT

A one year PWA retrospective – Pinterest Engineering – Medium

sonarwhal, a linting tool for the web
Optimizing web apps with the Sonarwhal linter | InfoWorld

Homescreen

Web Manifest Validator
Installable Web Apps with the Web App Manifest in Chrome for Android | Web | Google Developers
Increasing Engagement with Web App Install Banners | Web | Google Developers

Tools

GoogleChrome/lighthouse: auditing and performance metrics for Progressive Web Apps
Question: How to test page behind authentication? · Issue #1418 · GoogleChrome/lighthouse

Adaptive Web Design

= "Progressive Enhancement"?
vs "Responsive Design"?

5by5 | The Big Web Show #140: Progressive Enhancement FTW with Aaron Gustafson

Adaptive Web Design
Future of Web Design & Øredev, From the Notebook of Aaron Gustafson
On Adaptive Web Design’s Second Edition, From the Notebook of Aaron Gustafson

A List Apart Author: Aaron Gustafson

Responsive Design

The guide to responsive web design in 2023

Useful & Responsive Layouts, no Media Queries required - YouTube

@media (max-width: width): desktop first design (styles change on small screen)
@media (min-width: width): mobile first design (styles change on large screen)

The start of a new era for Responsive Web Design | by Francois Brill | Oct, 2021 | UX Collective

preference-based media queries
container/element queries

50 Useful Libraries and Resources for Responsive Web Design | Tutorialzine
Responsive Design Bookmarklet
Responsive Design Testing

A List Apart Articles about Responsive Design
Responsive Web Design · An A List Apart Article

Responsive Design Tutorial | HTML & CSS Is Hard
Free e-Course ~ Responsive Web Design Fundamentals

Responsive Web Design – Modern Website Code for Beginners
the new code – Web Developer Reading List: Responsive Navigation, Tables, and Video

Learn Resize Observer In 5 Minutes - YouTube
ResizeObserver - Web APIs | MDN

Responsive Image

Implementing Responsive Images with Jason Grigsby | The Web Ahead
the new code – Web Developer Reading List: Responsive Images

ResponsiveImages.org
Responsive Images Tutorial | HTML & CSS Is Hard
Automating resource selection with Client Hints — Google Web Updates`
» Responsive Images, Part 10: Conclusion Cloud Four Blog
Responsive Image Breakpoints Generator, A New Open Source Tool – Smashing Magazine
為什麼 HTML 元素很少見人使用？_張鑫旭 - MdEditor

How to make Image responsive using Aspect ratio? No media queries are needed - DEV Community

react-progressive-image
tuupola/lazyload: Vanilla JavaScript plugin for lazyloading images

srcset
size, handled by pre-parser
Media, type attribute takes precedence
{% asset_img srcset.jpg %}

<img>, srcset, size, picture, <media>

Using CSS's object-fit and object-position Properties good for cropping image

Scroll Position

In SPA, scroll position is loss upon back

History.scrollRestoration - Web APIs | MDN

https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-restoration-mode

janpaul123/delayed-scroll-restoration-polyfill: Polyfill that mimics Chrome's scroll restoration behavior.

Scroll Observer (Intersection Observer)

Intersection Observer API - Web APIs | MDN

rdmurphy/scroller: 📜 A super-tiny library for your scrollytelling needs.

Intersection Observer API Makes Lazy Loading a Snap
Animate on Scroll with Intersection Observer | by Mirosław Ciastek | Medium
Parallax Scroll Animations with Intersection Observer and GSAP3 | Elegant Seagulls

Offline First

Beyond Offline — Medium
pazguille/offline-first
Offline First: Love the Idea, Hate the Name, From the Notebook of Aaron Gustafson
Making your web app work offline, Part 1: The Setup | CSS-Tricks
Making your web app work offline, Part 2: The Implementation | CSS-Tricks
How to build performant web applications for slow networks - LogRocket Blog

Workbox | Google Developers replaces SW-precache

Working with the JavaScript Cache API - LogRocket Blog

Issue 4: Offline badging, DevTools, Testing, Travis, Web Storage, Service Worker Scopes, Data… – Totally Tooling Tears – Medium

UpUp - The Offline First Library
Making Sense of Offline Web Development | Adam Reacts

sdras/firefighter-demo: 🚨 Demo to improve an existing firefighter app by making it queue tasks offline

KV Storage: the Web's First Built-in Module | Web | Google Developers

Worklet

Worklet - Web APIs | MDN

App Cache

Web Storage

marcuswestin/store.js: Cross-browser storage for all use cases, used across the web.
How to Use the Web Storage API - Bits and Pieces

Navigator.share() - Web APIs | MDN
How to share anything from your website by Web Share API - DEV Community

Service Workers/Web Workers

web-worker

Web Sockets

web-push

Server-sent Events (SSE)

web-push

Web Components

web-components

Web Speech

How to Build a Speech to Emotion Converter with the Web Speech API and Node.js

Micro Frontends

Micro Frontends - extending the microservice idea to frontend development
A Look at Micro Front-Ends, Their Architecture, and More - DZone Microservices
Micro Front Ends With Example - DZone Microservices
Micro Frontends
A simple Micro Frontends explainer | Fathym
Micro-Frontends – Paul Sweeney – Medium
Micro Frontend Architecture. Before diving into the micro front-end… | by Muhammad Anser | Oct, 2021 | Level Up Coding
Two years of micro-frontends: A retrospective | by Brody McKee | Beamery Hacking Talent | Medium

micro-frontends-demo

Using Micro-Frontends to Permanently Solve the Legacy JavaScript Problem
Two years of micro-frontends: A retrospective - Hacking Talent - Medium
Building micro-frontends with webpack's Module Federation - LogRocket Blog

Microfrontends based on React - DEV Community 👩‍💻👨‍💻
Piral - Portal Solutions using Microfrontends

single-spa A javascript router for front-end microservices

Revolutionizing Micro Frontends with Webpack 5, Module Federation and Bit | by Nathan Sebhastian | Bits and Pieces
5 Steps to Turn a Random React Application Into a Micro Front-End
3 Steps to Turn a Random React Application Into a Micro-Frontend Container

You probably don’t need a micro-frontend

Pointer Events

Pointer events - Web APIs | MDN
The HTML5 Pointer Events API: Combining touch, mouse, and pen - mobiForge

[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#search=pointer events)

👆 Pointer events with React — The why, how, and what?

jquery/PEP: Pointer Events Polyfill: a unified event system for the web platform

Video

LevelUpTuts - YouTube
NewCircle Training - YouTube
Nodecasts, Premium Node.js Screencasts
Traversy Media - YouTube

Lets create a screen recorder with JS - DEV Community

Embedding files in HTML

from https://github.com/wojtekmaj/react-pdf/wiki/Frequently-Asked-Questions

<Document file={`data:application/pdf;base64,${base64String}`}>
  <Page pageNumber={1} />
</Document>

<img src={`data:image/svg+xml;utf8,${encodeURIComponent(svg)}`} />

HTML

The WHATWG Blog

HTML (HyperText Markup Language) | MDN
HTML Elements
Interneting Is Hard | Web Development Tutorials For Complete Beginners
W3Schools Online Web Tutorials
HTML Vocabulary
HTML5 Beginner's Guide - Tutorial by WebsiteSetup.org
Twenty Five Seconds. That’s All It Took Before The “HTML5 Element Flowchart” Was My Best Friend. — May The Code Be With Me — Medium

joshbuchea/HEAD: A list of everything that could go in the of your document
Can I include a tag to a tag? Based on HTML Spec WHATWG

8.2 Parsing HTML documents — HTML5 character encoding

HTMHell - Markup from hell
Tutorial on Creating Cross-Browser Compatible HTML and CSS - DZone Web Dev
The poor, misunderstood innerText — Perfection Kills
Content Jumping (and How To Avoid It) | CSS-Tricks
the new code – Smooth Page Scroll in 5 Lines of JavaScript
Some Hands-On with the HTML Dialog Element | CSS-Tricks

What’s in the head? Metadata in HTML - Learn web development | MDN
The Deal with the Section Element | CSS-Tricks

Favicon

Favicon - Wikiwand
What is FAVICON.ICO and How to Create a Favicon Icon for Your Website (thesitewizard.com)
What is a favicon and how to use it

The Public Folder (and favicons!!) in create-react-app | by Jennifer Dobak | Medium

Favicon & App Icon Generator
favicon.ico Generator
Online ICO converter
Favicon Generator for perfect icons on all browsers
faven - generate your favcion in the browser

audreyr/favicon-cheat-sheet
The Making of an Animated Favicon | CSS-Tricks
Animated Favicon Gif Generator - Create Animated Gif Favicon Ico Just 3 Steps

StenAL/favicon-marquee: An animated scrolling favicon for your website

# create a 36*36 favicon
convert -resize 72x72 -extent 72x72 -gravity center -background white input.svg -resize 36x36 favicon.ico

# IE is still braindead so still use `.ico`

convert -resize x16 -gravity center -crop 16x16+0+0 -flatten -colors 256 input.png output-16x16.ico
convert -resize x32 -gravity center -crop 32x32+0+0 -flatten -colors 256 input.png output-32x32.ico
convert -resize x64 -gravity center -crop 64x64+0+0 -flatten -colors 256 input.png output-64x64.ico
convert -flatten -resize 32x32 -colors 256 input.png output.ico
convert output-16x16.ico output-32x32.ico output-64x64.ico favicon.ico

# Then, HTML needs to specify size="XxY" as largest size due to browser bugs

<link rel="shortcut icon" href="/favicon.ico" sizes="32x32">

# Create apple ones

convert -resize x152 input.png apple-touch-icon-152x152.png
convert -resize x120 input.png apple-touch-icon-120x120.png
convert -resize x76  input.png apple-touch-icon-76x76.png
convert -resize x60  input.png apple-touch-icon-60x60.png

# HTML for apple

<link rel="apple-touch-icon" sizes="152x152" href="<%= image_path 'apple-touch-icon-152x152.png' %>">
<link rel="apple-touch-icon" sizes="120x120" href="<%= image_path 'apple-touch-icon-120x120.png' %>">
<link rel="apple-touch-icon" sizes="76x76" href="<%= image_path 'apple-touch-icon-76x76.png' %>">
<link rel="apple-touch-icon" href="<%= image_path 'apple-touch-icon-60x60.png' %>">

JavaScript

javascript-notes

Node

nodejs-notes

Browser

web-browsers

Backend Frameworks

nodejs-settings#App Frameworks
fastify
feathersjs
hapi

Build internal web apps quickly in the language you already know | Pglet Python, Node.js, Bash, PowerShell

I built 10 web apps... with 10 different languages - YouTube

Hono - Ultrafast web framework for the Edges

Express.js

Express - Node.js web application framework
Express middleware

Stop using express.js - DEV Community

Frontend Frameworks

web-frontend-frameworks

No code/Low code

20 Tools for Building Stunning Websites without coding - DEV Community

Webflow: The no-code platform for web design and development
Build & operate businesses without code | Makerpad
How to choose a low-code development platform | InfoWorld

How to Build a Multi-Tenant App with Custom Domains Using Next.js – Vercel Docs
vercel/platforms: A template for site builders and low-code tools.

LiveReload

LiveReload
LiveReload Protocol

Live reload in Hapi

JAM Stack

Jamstack: The static website revolution upending web development | InfoWorld

Free JAMstack video course developed by Phil Hawksworth. Check out the explanations and examples in this extended video from freeCodeCamp to learn about the JAMstack. Full of links and resources.
JAMstack Course - Build websites that are simpler, faster, and more secure - YouTube

Jamstack | JavaScript, APIs, and Markup
All posts | JAMstack CMS
WTF is JAMstack?
Jamstack: The static website revolution upending web development | InfoWorld
Building a JAMstack ecommerce website - LogRocket Blog

Your Web App Backend is NOT an API. Let’s Face it! | by Ashan Fernando | Bits and Pieces
Sam Newman - Backends For Frontends
Takeaways Using The Backends For Frontends Pattern | by Gustavo A. López | kommit
The “right” way to render your Jamstack site - Applozic Blog

HTML over Wire

HTML Over WebSockets | TestDriven.io
The Future of Web Software Is HTML-over-WebSockets – A List Apart
JavaScript Framework Unpoly and the HTML Over-the-Wire Trend – The New Stack

htmx

</> htmx - high power tools for html
Htmx: HTML Approach to Interactivity in a JavaScript World – The New Stack

Todo App using: Go Postgres HTMx TailwindCSS | This is the way - YouTube
Go TEMPL + HTMX | Brief look - YouTube

HTMX is awesome and here's why - YouTube
Golang + HTMX - Creating a Go webserver / HTMX Integration / Template Fragments - YouTube
HTM - YouTube

NO BUILD SYSTEM FOR HTMX???? | Prime Reacts - YouTube

The Truth About HTMX - YouTube
The Truth About HTMX | Prime Reacts - YouTube

ThPrimeTime
From React To HTMX - YouTube
HTMX IS INSECURE (XSS) | Prime News - YouTube

Hotwire/Stimulus

HTML Over The Wire | Hotwire
Stimulus: A modest JavaScript framework for the HTML you already have.

Unpoly

Unpoly: Unobtrusive JavaScript framework

Phoenix Framework

Phoenix Framework Elixir
phoenixframework/phoenix_live_view: Rich, real-time user experiences with server-rendered HTML

FastCGI

FastCGI - Wikiwand

inanzzz | Testing PHP-FPM without having a web server
Directly connect to PHP-FPM

Terr/pyfcgiclient: Python client interface to FastCGI servers

LastLeaf/node-fastcgi-client: A FastCGI client implementation in Node.js, mostly designed for cummunication with PHP.
lhkzh/fibjs-fastcgi-client: fibjs cgi-client
lfoma/http-node-phpfpm: node.js run php scripts via phpfpm

WSGI

A Comprehensive Overview of Backend Servers for Django Applications - DEV Community

WSGI — WSGI.org
PEP 3333 – Python Web Server Gateway Interface v1.0.1 | peps.python.org
Web Server Gateway Interface - Wikiwand
Introduction — WSGI Tutorial
Secrets of a WSGI master. - YouTube
WSGI for Web Developers (Ryan Wilson-Perkin) - YouTube
Standalone WSGI Containers — Flask Documentation

uWSGI - Wikiwand
The uWSGI project — uWSGI documentation
DjangoCon US 2017 - Type UWSGI; Press Enter; What Happens? by Philip James - YouTube Linux sockets

Gunicorn - Python WSGI HTTP Server for UNIX

mod_wsgi — mod_wsgi 4.7.0 documentation

ASGI

Async version of WSGI

ASGI Documentation

The Three Python ASGI Servers - DEV Community 👩‍💻👨‍💻
Choosing the Right ASGI Server for Deploying FastAPI · Issue #2062 · tiangolo/fastapi
Uvicorn Python ASGI web server, uses uvloop instead of asyncio with uvicorn[standard] variant
Hypercorn documentation — Hypercorn documentation
django/daphne: Django Channels HTTP/WebSocket server

An introduction to ASGI, Asynchronous Server Gateway Interface - Philip Jones - PyLondinium19 - YouTube
[ENG] Dmitry Nazarov: "Future Pythonic Web: ASGI & Daphne" - YouTube

URL/URI

RFC 1738 - A Gopher URL Format
RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
RFC 3987 - Internationalized Resource Identifiers (IRIs)
RFC 6570 - URI Template
7595 URI Scheme Guidelines

3406 URN Namespace Definition Mechanisms
5301 Service URN
7163 URN for Country-Specific Emergency Services

Uniform Resource Identifier (URI) Schemes registered schemes
A retired index of WWW Addressing Schemes

URI : URL | URN
URIs, URLs, and URNs: Clarifications and Recommendations 1.0 a bit outdated as its recommendations are already implemented
http - What is the difference between URI, URL and URN? - Stack Overflow
Difference between URI, URL and URN | Quintuple Developers

The History of the URL

My URL isn’t your URL | daniel.haxx.se
URL Standard from WHATWG

The Difference Between URLs and URIs

seo - URLs: Dash vs. Underscore - Stack Overflow
Keep a simple URL structure - Search Console Help
Of Spaces, Underscores and Dashes

#perfmatters

Techniques to make a web app load fast, even on a feature phone
Web Performance Calendar » 2020
Book of Speed
How to Optimize Page Speed: 18 Secs to 2 Secs Loading Time
The Complete Guide to Reducing Page Weight
Solving the Web Performance Crisis | The Microsoft Edge Dev Show | Channel 9
Measure performance with the RAIL model
18 Tips for Website Performance Optimization - KeyCDN

The Cost Of JavaScript – Dev Channel – Medium
The Cost Of JavaScript In 2018 – Addy Osmani – Medium
The PRPL Pattern | Web Fundamentals | Google Developers

Push critical resources for the initial URL route.
Render initial route.
Pre-cache remaining routes.
Lazy-load and create remaining routes on demand.

Improve Page Rendering Speed Using Only CSS | by Rumesh Eranga Hapuarachchi | Bits and Pieces

DOM performance case study
Profiling the hidden costs of JSON and HTTP(S) | by Giuseppe Maggiore | Hoppinger | Medium

rikschennink/conditioner: 💆🏻 Frizz free, context-aware, JavaScript modules
Lazy Loading JavaScript Modules With ConditionerJS — Smashing Magazine

Prefetching, preloading, prebrowsing | CSS-Tricks
Experimenting With Link Rel=preconnect Using Custom Script Injection in WebPageTest

prerender.js | CSS-Tricks
genderev/prerender.js: Fast webpages for all browsers.
instant.page preload links on hover
instant.page | CSS-Tricks

SpeedCurve | Rendering Metrics discuss different rendering metrics and whether each can be automated
Performance Calendar » Time To Interactive – Measuring more of the user experience
The Cost Of JavaScript In 2018 – Addy Osmani – Medium
性能测试应该怎么做？ | | 酷壳 - CoolShell

Web Performance Made Easy: Google I/O 2018 edition | Web | Google Developers
Making dev.to Incredibly fast - DEV Community 👩‍💻👨‍💻
Website Performance Optimization | Udacity
A sense of speed — Medium
60fps on the mobile web — Flipboard Engineering
How to lose weight (in the browser)
Optimize Website Speed With Chrome DevTools | Tools for Web Developers | Google Developers

Core Web Vitals (CWV)

Web Vitals
Tricking CWV | CSS-Tricks CLS, LCP, FID
Improve Largest Contentful Paint (LCP) With A JS + CSS Trick - Propel Digital Media Solutions
How to Optimize LCP and Speed Index for Next.js Websites | NE Digital

Evolving the CLS metric
How To Fix Cumulative Layout Shift (CLS) Issues — Smashing Magazine
Solving CLS Issues In A Next.js-Powered E-Commerce Website (Case Study) — Smashing Magazine
AddyOsmani.com - Infinite Scroll without Layout Shifts
What is Cumulative Layout Shift? | Ignite Visibility

Browser cache

Using Immutable Caching To Speed Up The Web ★ Mozilla Hacks – the Web developer blog
Reload, reloaded - Google Docs

Compression

Comparison of Brotli, Deflate, Zopfli, LZMA, LZHAM and Bzip2 Compression Algorithms
Measuring the Effects of Brotli Compression on WordPress - SitePoint

gzip - Wikiwand
RFC 1950 - ZLIB Compressed Data Format Specification version 3.3
RFC 1951 - DEFLATE Compressed Data Format Specification version 1.3
RFC 1952 - GZIP file format specification version 4.3

google/zopfli: Zopfli Compression Algorithm is a compression library programmed in C to perform very good, but slow, deflate or zlib compression.

google/brotli: Brotli compression format

Tools

Top Free Website Speed Test Tools - KeyCDN
15 Free Website Performance Testing Tools

PageSpeed Insights
GeoPeeker - A tool for viewing sites from different geographic locations
Website Speed Test - Check Full Page Performance | KeyCDN Tools
Sitespeed.io - Welcome to the wonderful world of Web Performance
The Coach: A Modern Alternative to YSlow
WebPageTest - Website Performance and Optimization Test test CDN, Hong Kong
Website Speed Test | Pingdom Tools
GTmetrix | Website Speed and Performance Optimization
Profile | Web Tools - Google Developers perf ESLint on Node
Web Performance Tooling - Google I/O 2016 - YouTube
GoogleChrome/big-rig: A proof-of-concept Performance Dashboard, CLI and Node module

mrdoob/stats.js: JavaScript Performance Monitor

Application Load Testing Tools for API Endpoints with loader.io
CyberFlood - Spirent
The Complete Continuous Testing Platform | BlazeMeter

Network

How Time to First Byte Impacts Web Performance
Link prefetching FAQ - HTTP | MDN

High Performance Browser Networking (O'Reilly)
Ilya Grigorik - igvita.com

Page load

Browser Rendering Optimization - Udacity
Measure Resource Loading Times | Web Tools - Google Developers
The New Perspective on Performance | Keynote

How does Stack Overflow do pagination? - Meta Stack Overflow
Create Pagination with Node.js, MongoDB, Express and EJS Step by Step from Scratch

Image

Performance Calendar » Upgrading jpegtran to mozjpeg
Image Optimization Part 1: The Importance of Images
Image Optimization Part 2: Selecting the Right File Format
Image Optimization, Part 3: Four Steps to File Size Reduction
Image Optimization, Part 4: Progressive JPEG...Hot or Not?

A hitchhikers guide to web images on 2019 - DEV Community 👩‍💻👨‍💻

Color issue:
Jeffrey Friedl's Blog » So Much For That Glorious iPad Screen: iOS and its Apps are Not Even Color Managed
Issue 44872 - chromium - Unmanaged CSS colors - An open-source project to help move the web forward. - Google Project Hosting

PJAX

pjax
react-pjax

Compliance

FLOSS Weekly 426 SIMP
SIMP Compliance Automation

Workflow

Web Tooling & Automation | Udacity
Web developer tools
miripiruni/frontdesk
Book of Modern frontend tooling

The 2016 Web Development Workflow - Google I/O 2016 - YouTube

Web churn

Has Web Dev Gotten Worse? - YouTube new frameworks extends the scopes and features, so they seems more complex; but working full stack is easier

Disappearing Frameworks - Samsung Internet Developers - Medium

Why is it so hard to find a good front end developer? — The Creative Business — Medium
Why JavaScript ‘churn’ is a good thing? — JavaScript Insights — Medium
On being overwhelmed with our fast paced industry | Wes Bos
Did You Pick the Wrong Web Framework?! | Marvin Li | LinkedIn

Drowning in Tools in the Web Development Industry
Tools don’t solve the web’s problems, they ARE the problem - QuirksBlog
What's the Difference Between a Framework and Library?

When using a framework you are not building a solution, you are molding your problem to fit the framework. You may find a hard time doing so if you hit a bug or edge case of the framework. Time spent on this is not productive on other technology. You don't really understand the problem and solution.

Forward?
Move The Web Forward | Guide to getting involved with standards and browser development
Stop pushing the web forward - QuirksBlog