jensgro

Your State of HTML 2024 Reading List

HTML Media Capture

Capture input from the user’s camera.

The capture attribute specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute.

• MDN

jensgro

/* ========= nicht so praktisch ========= */
p {
	font-size: var(--fs-xs);
}
@media (min-width: 800px) {
	p {
		font-size: var(--fs-sm);
	}
}

jensgro

CSS Broken Grid Demo

A Pen by Jens Grochtdreis on CodePen.

License.

jensgro

CSS 2024 Reading List

lvh / lvw / lvmin / lvmax, sv*, dv*, etc.

The CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.

• https://developer.mozilla.org/en-US/docs/Web/CSS/length
• The large, small, and dynamic viewport units https://web.dev/viewport-units/ (web.dev)

Anchor Positioning

• Future CSS: Anchor Positioning (kizu.dev)

jensgro

:where(label:has(> input:disabled), label:has(+ input:disabled)) { cursor : not-allowed;}
.row:has(.topic-tags-block) {}
:where(button) { all : unset;}
footer:has(.broadcastinfo) {}
a:has(.lead) {}
.teaser:has(.topline[style="display: none;"]) .hgroup a:before {}
.media-liveblog:has(.topline) .topline:before {}

jensgro

Javascript

• JavaScript for Designers
• 30 Day Vanilla JS Coding Challenge - sehr gute Videos von WesBos
• Die dazugehörigen Aufgaben
• The Modern JavaScript Tutorial
• JavaScript the right way
• plain JS
• JavaScript fundamentals
• Learn JavaScript - von Google

jensgro

<div class="wrapper">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint quas aliquid in nesciunt eveniet alias quis aspernatur dicta! Ad eos, asperiores, at, veritatis dolores ullam officia impedit facilis ab velit aut excepturi voluptate fugiat quidem est quod dolor ducimus. Facilis nobis sed et omnis incidunt tenetur hic possimus quae quaerat itaque quas iure cupiditate, odit impedit. Quaerat, aliquam? Eaque odio accusamus minima vel molestias, illo ab dolorem. Soluta ab numquam ea temporibus voluptas eos amet blanditiis, in quaerat repudiandae distinctio eum quasi inventore provident vel at voluptate commodi molestias nisi consequatur. Fugiat, hic modi. Iste dolor velit in cum assumenda?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro vel quas quo nemo maiores labore atque harum itaque placeat repellat. Aliquam expedita alias vel quas fuga quod quos debitis cum labore possimus ipsum, maiores nisi dolor beatae animi voluptatibus cumque veritatis velit, laborum iure

jensgro

• The Future of 11ty — Zach Leatherman
• Hints and Suggestions — Miriam Suzanne
• 11ty and Large-Project Tooling — Paul Everitt
• Digital Frontiers, IndieWeb Cowboys, and A Place Online To Call Your Own— Henry Desroches
• You're Probably Doing Web Performance Wrong —  Sia Karamalegos
• Building a Town That Doesn't Exist — Dan Sinker
• 11ty for “Non-Developers” — Adrianna Tan
• Don't Fear the Cascade — Mayank
• Managing content management (with no vendor lock-in) — David Large, Liam Bigelow
• Come to the light side: HTML Web Components — Chris Ferdi

jensgro

rechtliches

• European Accessibility Act: What you need to know
• Gesetzliche Grundlagen und Pflichten für barrierefreie Websites

WCAG

• WCAG 2.1 auf Deutsch
• Es gibt mittlerweile auch schon die WCAG 2.2
• Wirkt sich die WCAG 2.2 aus?
• A Roundup Of WCAG 2.2 Explainers
• WCAG Cheat Sheets and Checklists

jensgro

*,
::after,
::before {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}