On Web Development in General

On Big Picture Thinking in Web Development

Selector Performance

Maintainability

Design Consistency

Accessibility

Vision

User-Centered Web Development

Web Developers Have Users

Web Developers Can Focus on End Users

Web Developers Can Focus on Developer Users

A Short Guide to Minimal Web Development

Master the Core Technologies

Read the Specs

Practice

Publish

Familiarize with Related Topics

Primary Subjects

Secondary Subjects

Do It Yourself

Recommended

To Be Avoided

Find the Shortest Way

Keep It Simple

Tailor

Know Simple and Simple

Automate

Review

Two Paradigms of Web Development

Boring Web Development

Celebrating the Wrong Side of Web Development

Successful Web Development Is Boring Web Development

My Web Development Wishlist 2024

On Ethics in Web Development (With a Brief Overview of Ethical Theories)

A Quick Overview of Ethical Theories

What This Means and How It Can Be Used

Expert Web Development: A 3rd Key Differentiator

Letter and Spirit of Web Development

Website Issues: On the Relevance of Audience Size and Impact

Issues in Relation to Audience Size and Impact on the Audience

A Model to Enable Better Prioritization

Audience Size and Impact in Your Work

An Attempt at Outlining the Many Factors Influencing Developer Experience

Extrinsic Factors

Quality

Usability

Community

Intrinsic Factors

Understandable-Simple vs. Minimal-Simple Code

Code in Quarantine

What Code to Put Under Quarantine

How to Mark Code in Quarantine

How to Proceed with Code in Quarantine

HTML, CSS, and Dependency Direction

The Relationship Between HTML and CSS

The Situation With Long-Term Maintenance

HTML and CSS and the 2019 Web Almanac

HTML

CSS

“Must Work Without JavaScript”

On the Responsibility That Comes With Good JavaScript Support

JavaScript Abuse and Its Consequences

Responsible JavaScript

Two Approaches to Accessibility on the Web

Author-Centered Accessibility

…Won’t Lead to Automagical Access

Conformance and Accessibility

The Problem With Web Development Checklists, or: The Frontend Checklist, Revised

The Frontend Checklist: Use 33, Question 13, Ignore 41 Items

Doctype: The doctype is HTML5 and is at the top of your HTML pages

Charset: The charset declared (UTF-8) is declared correctly

Viewport: The viewport is declared correctly

Title: A title is used on all pages

Description: A meta description is provided, it is unique and doesn’t possess more than 150 characters

Favicons: Each favicon has been created and displays correctly

Apple web app meta: Apple meta tags are present

Windows tiles: Windows tiles are present and linked

Canonical: Use rel="canonical" to avoid duplicate content

Language attribute: The lang attribute of your website is specified and related to the language of the current page

Direction attribute: The direction of [reading] is specified on the html tag (it can be used on another HTML tag)

Alternate language: The language tag of your website is specified and related to the language of the current page

Conditional Comments: Conditional Comments are present for [Internet Explorer] if needed

RSS feed: If your project is a blog or has articles, an RSS link was provided

Inline critical CSS: The inline critical CSS is correctly injected in the [document] head

CSS order: All CSS files are loaded before any JavaScript files in the [document] head

Facebook Open Graph

Twitter Card

HTML5 Semantic Elements: HTML5 Semantic Elements are used appropriately (header, section, footer, main…)

Error pages: Error 404 page and 5xx exist

noopener: In case you are using external links with target="_blank", your link should have a rel="noopener" attribute […]

Clean up comments: Unnecessary code needs to be removed before sending the page to production

W3C compliant: All pages need to be tested with the W3C validator to identify possible issues in the HTML code

HTML lint: I use tools to help me analyze any issues I could have on my HTML code

Link checker: There are no broken links in my page, verify that you don’t have any 404 error

Adblockers test: Your website shows your content correctly with adblockers enabled

Webfont format: WOFF, WOFF2 and TTF are supported by all modern browsers

Webfont size: Webfont sizes don’t exceed 2 MB (all variants included)

Webfont loader: Control loading behavior with a webfont loader

Responsive Web Design: The website is using responsive web design

[Print CSS]: A print stylesheet is provided and is correct on each page

Unique ID: If IDs are used, they are unique to a page

Reset CSS: A CSS reset (reset, normalize or reboot) is used and up to date

JS prefix: All classes (or [IDs] used in JavaScript files) begin with js- and are not styled into the CSS files

Embedded or inline CSS: Avoid at all cost [embedding] CSS in <style> tags or using inline CSS

Vendor prefixes: CSS vendor prefixes are used and are generated accordingly with your browser support compatibility

Concatenation: CSS files are concatenated in a single file (not for HTTP/2)

Minification: All CSS files are minified

Non-blocking: CSS files need to be non-blocking to prevent the DOM from taking time to load

Stylelint: All CSS or SCSS files are without any errors

Responsive web design: All pages were tested with the correct breakpoints

CSS validator: The CSS was tested and pertinent errors were corrected

Desktop browsers: All pages were tested on all current desktop browsers (Safari, Firefox, Chrome, Internet Explorer, Edge…)

Mobile browsers: All pages were tested on all current mobile browsers (Native browser, Chrome, Safari…)

OS: All pages were tested on all current OS (Windows, Android, iOS, Mac…)

Reading direction: All pages need to be tested for LTR and RTL languages if they need to be supported

JavaScript inline: You don’t have any JavaScript code inline (mixed with your HTML code)

Concatenation: JavaScript files are concatenated

Minification: JavaScript files are minified (you can add the .min suffix)

noscript tag: Use [the] <noscript> tag in the HTML body if a script type on the page is unsupported or if scripting is currently turned off […]

Non-blocking: JavaScript files are loaded asynchronously using async or deferred using [the] defer attribute

Modernizr: If you need to target some specific features you can use a custom Modernizr to add classes in your <html> tag

ESLint: No errors are flagged by ESLint (based on your configuration or standards rules)

Optimization: All images are optimized to be rendered in the browser; WebP format could be used for critical pages (like [the] Homepage)

picture/srcset: You use picture/srcset to provide the most appropriate image for the current viewport of the user

Retina: You provide layout images 2× or 3×, support retina display

Sprite: Small images are in a sprite file (in the case of icons, they can be in an SVG sprite image)

Width and height: Set width and height attributes on <img> if the final rendered image size is known (can be omitted for CSS sizing)

Alternative text: All <img> have an alternative text which describe the image visually

Lazy loading: Images are lazy-loaded (a noscript fallback is always provided)

Progressive Enhancement: Major functionality like main navigation and search should work without JavaScript enabled

Color contrast: Color contrast should at least pass WCAG AA (AAA for mobile)

h1: All pages have an h1 which is not the title of the website

Headings: Headings should be used properly and in the right order (h1 to h6)

Specific HTML5 input types are used: This is especially important for mobile devices that show customized keypads and widgets for different types

Label: A label is associated with each input form element; in case a label can’t be displayed, use aria-label instead

Accessibility standards testing: Use the WAVE tool to test if your page respects the accessibility standards

Keyboard navigation: Test your website using only your keyboard in a previsible order; all interactive elements are reachable and usable

Screen reader: All pages were tested in two or more screen readers (such as JAWS, VoiceOver, and NVDA)

Focus style: If the focus is disabled, it is replaced by visible state in CSS

Page weight: The weight of each page is between 0 and 500 KB

Minified HTML: Your HTML is minified

Lazy loading: Images, scripts and CSS need to be lazy loaded to improve the response time of the current page

Cookie size: If you are using cookies be sure each cookie doesn’t exceed 4,096 bytes and your domain name doesn’t have more than 20 cookies

DNS resolution: DNS of third-party services that may be needed are resolved in advance during idle time using dns-prefetch

Preconnection: DNS lookup, TCP handshake and TLS negotiation with services that will be needed soon is done in advance during idle time using preconnect

Prefetching: Resources that will be needed soon (e.g. lazy loaded images) are requested in advance during idle time using prefetch

Preloading: Resources needed in the current page (e.g. scripts placed at the end of <body>) [are requested] in advance using preload

Google PageSpeed: All your pages were tested (not only the homepage) and have a score of at least 90/100

Google Analytics: Google Analytics is installed and correctly configured

Headings logic: Heading text helps to understand the content in the current page

sitemap.xml: A sitemap.xml exists and was submitted to Google Search Console

robots.txt: The robots.txt is not blocking webpages

Structured data: Pages using structured data are tested and are without errors

Structured data helps crawlers understand the content in the current page

Sitemap HTML: An HTML sitemap is provided and is accessible via a link in the footer of your website

Pagination link tags: Provide rel="prev" and rel="next" to indicate paginated content

In Critical Defense of Frontend Development

What Is Frontend Development?

Problem 1: Frontend Development Is Much Larger

Problem 2: Frontend Development Is Much More Complex

Start Respecting Frontend Development

3 [+1] Books to Become a Better Developer

A Philosophy of Software Design by John K. Ousterhout

The Pragmatic Programmer by Thomas David and Hunt Andrew

Clean Code by Robert C. Martin

Addition: Fundamentals of Software Architecture by Mark Richards and Neal Ford

What We Should Teach Up-and-Coming Developers

Great Sources

Great Principles

Great Ethics

How to Identify Your Unknown Unknowns in Web Development

Web Development Has a Short-Term Memory

The 3-Second Frontend Developer Test

Definition of Web Developer

Thoughts for the Aging Web Developer

Focus on Your Strengths

Specialize

Reinvent Yourself

Take the Next Step