About HTML semantics and front-end architecture – Notes by Nicolas Gallagher

Alex Russell | Web Components and Model Driven Views | Fronteers 2011

There's a lot of tension between today's markup and the semantics we're trying to express in our apps. HTML5 adds a few new types to help describe common cases, but what about when there's no allegory in markup for what you're building? What we need now is infrastructure, not guilt about being "non-semantic". This talk explores new standards-track work in WebKit that's going to enable say-what-you-mean development in completely new ways.

Close to the metal: web design and the browser

Websites have evolved over the years, but in the name of evolution, there seems to be mistaken thinking that the process of building a website needs to get more complex, using Javascript frameworks and modern backend systems; when at the end of the day, browsers still only need static HTML content to interpret.

Front-end Inspiration, Resources, and Design References | Frontpedia

Curated frontend inspiration, design references, UI patterns, and development resources for modern web teams.

Webdesign as architecture

An attempt at modelling digital design as a form of psychological architecture, taking the form of a single HTML document.

Information Architecture. Basics for Designers.

The World Wide Web contains a tremendous amount of information which is hard to imagine unstructured because a human brain wouldn’t be able…

frontend-design - Skill

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Constructing an HTML Tree | Web Browser Engineering

So far, our browser sees web pages as a stream of open tags, close tags, and text. But HTML is actually a tree, and though the tree structure hasn’t been important yet, it will be central to later features like CSS, JavaScript, and visual effects. So this chapter adds a proper HTML parser and converts the layout engine to use it.

Laying Out Pages | Web Browser Engineering

So far, layout has been a linear process that handles open tags and close tags independently. But web pages are trees, and look like them: borders and backgrounds visually nest inside one another. To support that, this chapter switches to tree-based layout, where the tree of elements is transformed into a tree of layout objects before drawing. In the process, we’ll make web pages more colorful with backgrounds.

Hypermedia Systems

The revolutionary ideas that empowered the Web. A simpler approach to building applications on the Web and beyond with htmx and Hyperview. Enhancing web applications without using SPA frameworks.

Semantic Web

The Semantic Web, sometimes known as Web 3.0, is an extension of the World Wide Web through standards set by the World Wide Web Consortium (W3C). The goal of the Semantic Web is to make Internet data machine-readable.

playhtml — make the web feel alive

Make the web feel alive with interactive, collaborative HTML elements and no backend to run.

Object-Oriented UX

We know big, monolithic webpages won’t meet the needs of responsive sites and endless screens. But we’re often still quilting together design patterns and content modules, rather than truly thinkin…

The Symbol Management Problem

Or: Why I (still) use Semantic Web technology.

Supporting Embedded Content | Web Browser Engineering

While our browser can render complex styles, visual effects, and animations, all of those apply basically just to text. Yet web pages contain a variety of non-text embedded content, from images to other web pages. Support for embedded content has powerful implications for browser architecture, performance, security, and open information access, and has played a key role throughout the web’s history.

</> htmx ~ Hypermedia APIs vs. Data APIs

In this essay, Carson Gross explores the fundamental differences between hypermedia APIs and data APIs, He explains how hypermedia APIs, which return HTML over HTTP, can embrace frequent changes due to their self-describing nature, while data APIs require more stability and versioning to avoid breaking client code. Carson argues that these distinct characteristics should inform different design approaches for each type of API.