Tag: html
Context-aware headings in HTML
A common issue that we've probably all faced at some point is having a component that includes a heading, which sometimes should be an H2 and sometimes maybe an H3, depending on where it's used.
Don't put aria-label on generic elements like divs
This post is part of a series called #WebAccessibilityFails, where I collect common issues I find in accessibility audits so that you can avoid them in the future.
Nice Select
Building a modern custom select with base-select.
Pure Internet: NFC
HTML, CSS & minimal JS combined with NFC tech to create serverless web experiences.
Pure Internet: NFC
HTML, CSS & minimal JS combined with NFC tech to create serverless web experiences.
I Put A Workshop On Chrome Developers Youtube
UI Workshop Sprinkle scroll driven animations, view transitions, popovers and container queries onto an ecommerce home page with me! Video · Code
What's a Single-Page App?
The web development community talks a lot about single-page apps, but are we all on a single page? Here's my ontology of web app architectures, organized by rendering and navigation.
The Over Easy Mini Web Machine
Ep #5 The Over-Easy Machine UI layering with anchor() no more complex position: absolute keyword alignment intrinsically sized based on content pairs radically with popover elements Try the machine: Basic · Author Cards · Animated Popover The latest Mini Web Machine on Chrome Dev…
The Closewatcher Api
Excellent post on the CloseWatcher API by Abdelrahman Awad .
Google Io Connect 2024 In Beijing China
Join me in Beijing‽ I'm giving a workshop that'll use CSS to add some rad upgrades to a store page.
Pop N Lock Dialog Mini Web Machine
Ep #4 Pop n' Lock <dialog> basics top-layer , transition-behavior and overlay explained how to transition a <dialog> The latest Mini Web Machine on Chrome Developers · Tiny bits of code that power great UX .
The Looper Pile Mini Web Machine Fushion
Ep #3 The Looper Pile - Mini Web Machine Fusion ⤷ layout a "Looper" with the "Pile" This episode represents the overarching theme of the series! Combining small bits of code together can be a great way to build larger experiences. Watch episode 3 on YouTube
The Pile Mini Web Machine
Ep #2 The Pile element layering layout machine replaces many use cases for position: absolute offers group or individual keyword alignment can be intrinsically sized based on content Watch episode 2: The Pile The latest Mini Web Machine on Chrome Developers · Tiny bits of code th…
Steal this popover code
Transition a popover in and out of the top layer penthouse
The Website vs. Web App Dichotomy Doesn't Exist
A one-dimensional spectrum can't sufficiently capture the tradeoffs involved in web development.
Weird HTML Hacks
Many of these code quirks shouldn’t work, but somehow they do. We’re highlighting 10 hacky website coding strategies—some big, some small.
<section> is the new <div>
The use of the div element in code is still over-abundant, but the section element is replacing that.
The Perpetual Circle of Accessibility
Twenty-five years and we can't get off the ever-merry-go-round
Deploy html on Replit
Replit is great but lacks HTML deployment.
Deploy html on Replit
Replit is great but lacks HTML deployment.
Thinking On Ways To Solve Morphing Buttons
Thinking on ways to solve a Morphing Button In this GUI Challenge , I show how view transitions can upgrade the experience of changing the innerHTML of a button by animating the change. demo · source
Pull to Refresh with Scroll Snap and Scroll Driven Animation
Scroll snap handles the scrolling stop points, SDA handles the animations and scrollend provides the event needed to trigger it all.
Mint thyself
Zora's HTML editions let you mint internet content on blockchain, stored on IPFS for permanence.
Mint thyself
Zora's HTML editions let you mint internet content on blockchain, stored on IPFS for permanence.
Thinking On Ways To Solve Switch Groups
Thinking on ways to solve Switch Groups In this GUI Challenge , I show how to take a fieldset packed with a radio group, and turn it into a switch group that controls text alignment. demo · source
CSS :before vs ::before & :after vs ::after
Is there a difference in CSS between `:before` and `::before`? Which one is valid? What about similar syntaxes like `:hover` and `::first-child`?
First Commit To The HTML Spec
Made my first commit to the HTML Spec for the scrollend event.
The correct semantic HTML for adding subtitles to h1 tags
This is the right format to use if you want to add a subtitle below an h1 tag on your html pages. Semantic HTML makes your site more accessible and better for SEO, since it is easier for search engines to process.
Why hyperlinks are blue
Revisiting why hyperlinks are blue. For anyone interested in the history of hypertext, the web or precursors to it
Source Tags & Codes
The saga of the Missouri governor reflects a failure by the powerful to embrace curiosity—curiosity encouraged by the HTML language he fails to understand.
Thoughts On Flash
Pondering the demise of Adobe’s Flash through shifting approaches to digital creation these days—and why we may not have anything quite like it again.
Making Accessible Drop Caps
Because stories don't start with "O-nce upon a time".
How to Give an HTML Element an Aspect Ratio
Sometimes you just need a element to shrink or grow in height proportionally with the width.
Write Cleaner Code by Separating Logic from Templates
CSS Frameworks like Bootstrap, Foundation, and Bulma help us describe our HTML in terms of layout structure and components, but I'm not a fan of that approach.
Released My Slide Presentation CSS Framework
Released Slyd ! < slyds > < slyd > < h1 >Slide 1</ h1 > < h2 >subtitle</ h2 > </ slyd > ... </ slyds > Scroll snap powered, parallax featured, bi-directional slide framework.
New Emails, Old Tech
How HTML helped, then hindered, the evolution of email, or why all those fancy marketing emails you get in your inbox still rely on HTML tables in 2019.
My solution to the "Impossible Layout
My solution to the so called "Impossible Layout".
Write Better Code with CSS Grid
HTML is for structuring and describing your content and not for layout.
How to Improve Dropdown Navigation with Animation
Trying to move diagonally to a hover-triggered menu and having it disappear on you. Flames. On the sides of my face.
Your Code Is Junky
FrontPage tried to solve an important problem in the early-internet era—the idea of making web design accessible to mere mortals—but the code wasn't so hot.