Frontend Dogma

“html” Archive

  1. State of HTML 2023 · ·
  2. Upgrade Your HTML V · · , , ,
  3. Using Simple Tools as a Radical Act of Independence · · ,
  4. Using the Popover API for HTML Tooltips · · ,
  5. Combining CSS “:has()” and HTML “<select>” for Greater Conditional Styling · · , ,
  6. Popover API Is Here · · ,
  7. My Approach to HTML Web Components · ·
  8. The HTML, CSS, and SVG for a Classic Search Form · · , , ,
  9. Design Deja Vu · · , , ,
  10. HTML Attributes vs. DOM Properties · · ,
  11. How to Escape JavaScript for a Script Tag · · , ,
  12. Invoking Elements by Using Only HTML: A First Look at Invokers · · ,
  13. Images as the First Thing in a Button or Link · · , , ,
  14. How to Create CSS Utility Classes · ·
  15. Converting Plain Text to Encoded HTML With Vanilla JavaScript · · ,
  16. The Biggest Lie in HTML · ·
  17. Don’t Use the “maxlength” Attribute to Stop Users from Exceeding the Limit · · ,
  18. ARIA in HTML · · , ,
  19. My “Skip to Content” Markup Was Breaking the Back Button on iOS · · , ,
  20. Figma Prototypes vs. HTML Prototypes · · , , , ,
  21. Faster Websites With the “picture” Element · · ,
  22. Testing HTML With Modern CSS · · , ,
  23. How to Think About HTML Responsive Images · · ,
  24. 21 HTML Tips You Must Know About · ·
  25. When to Use “tabindex="0"” · · , ,
  26. Svelte Parses HTML All Wrong · · ,
  27. Kobold Letters · · ,
  28. On “disabled” and “aria-disabled” Attributes · · ,
  29. On Popover Accessibility: What the Browser Does and Doesn’t Do · · ,
  30. The Problem With Data-Attributes for Text Effects · · , ,
  31. Ruby Is Complicated ·
  32. Streaming HTML · · ,
  33. Distinguishing Between ARIA and Native HTML Attributes · · , ,
  34. CSS Button Styles You Might Not Know · · ,
  35. The Quiet, Pervasive Devaluation of Frontend · · , , ,
  36. Making Room for Long List Markers With Subgrid · ·
  37. Techniques to Break Words · · , ,
  38. An HTML Switch Control · · ,
  39. YouTube Video Embedding Harm Reduction · · , ,
  40. ARIA (Are Ya) Afraid of the Dark? Unmasking Common HTML Monsters to Create Better User Experiences · · , , ,
  41. HTML as the Baseline · ·
  42. “X” Marks the Spot: Landmark Elements · · , , ,
  43. Practice Safe DSD With “setHTMLUnsafe” (It’s Complicated) · · , , ,
  44. A Highly Configurable Switch Component Using Modern CSS Techniques · ·
  45. HTML Web Components on the Server Are Great · ·
  46. Unlocking the Power of HTML’s Native Browser “dialog” Element · ·
  47. Check for “accesskey” and “aria-keyshortcuts” Bookmarklet · · , ,
  48. Mind the Accessibility Gaps—Most of Accessibility Issues Originate in Design and How to Fix That · · , ,
  49. A Call for Consensus on HTML Semantics · ·
  50. The Color Input and the Color Picker · · ,
  51. Create a Currency Converter With HTML, CSS, and Vanilla JavaScript · · , ,
  52. Basic Accessibility Mistakes I Often See in Audits · · , , , , , ,
  53. Disable Browser Caching With “meta” HTML Tags · · ,
  54. Options for “optgroup” Labeling of “options” · · , , , , ,
  55. Using “abbr” Element With “title” Attribute · · , , ,
  56. Streaming HTML Out of Order Without JavaScript · ·
  57. Buttons and Links—Common Misconceptions · · , , ,
  58. Accounting for Internationalization With CSS and HTML · · ,
  59. Stop Closing Void Elements ·
  60. HTML Validation—Pros and Cons · ·
  61. Never Underestimate HTML · · ,
  62. The Devil Is in the Details: A Look into a Disclosure Widget Markup · · ,
  63. Recapturing Early-Internet Whimsy With HTML · · , , ,
  64. “HTML First” Is Not HTML First · · , ,
  65. The Implied Web · · ,
  66. The Road to HTMHell Is Paved With Semantics · · ,
  67. Revisiting Fundamentals—Semantic Lists for Improved Accessibility · · , ,
  68. Web Components · · , ,
  69. HTML Can Do This? ·
  70. The Ghosts of Markup Past · · ,
  71. HTML: The Bad Parts ·
  72. Test-Driven HTML and Accessibility · · , ,
  73. Behavior Belongs in the HTML · · ,
  74. The “hidden” Attribute in HTML ·
  75. What the Slot? · · , ,
  76. Media Queries in HTML Video · · , , ,
  77. Security Headers Using “<meta>” · · ,
  78. HTML5 Boilerplate v9.0.0 Released · · ,
  79. The Hellish History of HTML: An Incomplete and Personal Account · ·
  80. “sizes="auto"” Pretty Much Requires “width” and “height” Attributes · · ,
  81. Back to Basics: 5 HTML Attributes for Improved Accessibility and User Experience · · , ,
  82. The “form” Attribute—Enhancing Form Layout Flexibility · ·
  83. The UX of HTML · · ,
  84. Weird HTML Hacks · · , ,
  85. Shadow DOM Is for Hiding Your Shame · · , ,
  86. The Elevator Pitch for Web Components · · ,
  87. The 9 HTML Elements That Have an Attribute of the Same Name, or: The 9 Attributes That Have an Element of the Same Name ·
  88. An Attempted Taxonomy of Web Components · ·
  89. HTML Web Components Are Just JavaScript? · · ,
  90. Using Chrome’s Accessibility Tree for Manual Testing of HTML and ARIA · · , , , , , , ,
  91. Exclusive Accordions Exclude · ·
  92. HTML Web Components · ·
  93. HTML First · · ,
  94. Do You Really Need to Validate Your HTML Code? · · ,
  95. Understanding HTML Landmarks and How to Apply Them · · , ,
  96. HTML Web Components · · ,
  97. 13 HTML Attributes You Should Know About ·
  98. Removing List Styles Without Affecting Semantics · · , ,
  99. Don’t Turn a Table into an ARIA Grid Just for a Clickable Row · · , ,
  100. 2023: 0 of the Global Top 100 Websites Use Valid HTML · · , ,
  101. Let’s Reinvent the Wheel · · , , ,
  102. 20 Simple Ways to Style the HTML “details” Element · ·
  103. HTML vs. DOM? Let’s Debug Them · · , , ,
  104. Select Element: Now With Horizontal Rules · · , , , , , , ,
  105. HTML Meta Tags · ·
  106. Tailwind vs. Semantic CSS · · , , , ,
  107. Splitting Within Selects · · , , ,
  108. Strikethrough Accessibility · · , , , ,
  109. Using ChatGPT for Smart Truncation in Responsive Web Design · · , ,
  110. Why Unique ID Attributes Matter · · ,
  111. On the Uniting Power of a Commitment to HTML Conformance · · , , ,
  112. Does the HTML “hr” (Horizontal Rule) Benefit Screen Reader Users? · · , , ,
  113. CSS Findings from Photoshop Web Version · · ,
  114. The Selected Date Must Be Within the Last 10 Years · · ,
  115. Extending the Properties of an HTML Element in TypeScript · · ,
  116. An Anchored Navbar Solution · · ,
  117. The Most Minimal Valid HTML Document · · , ,
  118. Easy Dark Mode With “color-scheme” · · , , ,
  119. Stop Using JS for That: Moving Features to CSS and HTML · · , ,
  120. HTML Popover, Videos and “display:blackhole” · · ,
  121. How Mastodon Handles Images and Web Previews · · , , , ,
  122. Misconceptions Can Kill Accessibility Momentum · · ,
  123. State of HTML 2023 · ·
  124. What Makes an Accessible Date Picker? Is It Even Possible? · · ,
  125. How to Use the New “<search>” Element With WordPress · · ,
  126. What Can You Do With “data” Attributes? · ·
  127. State of Web Accessibility, ARIA in HTML, and Missing UI Patterns · · , ,
  128. Browser Video Players Review · · , , , , ,
  129. Dialog Dilemmas and Modal Mischief: A Deep Dive into Popovers and How to Build Them · · , ,
  130. Small Details to Improve Your Website’s Experience · · , ,
  131. Let’s Make a Rubber Button With HTML, CSS and SVG · · , ,
  132. Main-ly Speaking · ·
  133. XUL and HTML · · ,
  134. An Intro to the “dialog” Element · · , ,
  135. Beginner’s Guide to Lists and How to Make Them Accessible · · ,
  136. Progressively Enhanced HTML Accordion · · , ,
  137. 8 Common Heading Questions · · ,
  138. Progressively Enhanced Form Validation: HTML and CSS · · , , ,
  139. Contextual Form Errors and ARIA · · , ,
  140. A Blog Post With Every HTML Element · ·
  141. You Probably Don’t Need “http-equiv” Meta Tags · · , ,
  142. Help Design the Inaugural State of HTML Survey · ·
  143. Blockquotes in Screen Readers · · , , , ,
  144. I Blame the W3C’s HTML Standard for Ordered Lists · ·
  145. O “dialog” Focus, Where Art Thou? · · , ,
  146. Preload vs. Early Hints vs. Fetch Priority · · , , , ,
  147. All the Places Where You Can Use “prefers-color-scheme” Media Query · · , , ,
  148. The Case Against Self-Closing Tags in HTML ·
  149. How to Validate HTML On-Line at W3C · · , ,
  150. The “article” Element and Screen Readers · · , , , ,
  151. And 4 More HTML Concepts You Didn’t Know · · ,
  152. The “details” Element and In-Page Search · · , ,
  153. Under-Engineered Comboboxen? · · , ,
  154. Form and Search Landmarks · · , , , ,
  155. What Does the Image “decoding” Attribute Actually Do? · · ,
  156. Button Types · ·
  157. You Can Stop Using “user-scalable=no” and “maximum-scale=1” in Viewport Meta Tags Now · · , ,
  158. Assume the Position—a Labelling Story · · ,
  159. Semantic Code in HTML: What Is It and Does It Still Matter? · ·
  160. 21 Awesome Web Features You’re Not Using Yet · · , ,
  161. Brief Note on Popovers With Dialogs · · , , ,
  162. 11 HTML Best Practices for Login and Sign-Up Forms · · ,
  163. Querying Parsed HTML in BigQuery ·
  164. Introducing the “popover” API · · ,
  165. Be Careful Using “Menu” · · , ,
  166. How to Build Lean Efficient Websites in 2023 · · , ,
  167. Semantics and the “popover” Attribute: What to Use When? · · , ,
  168. Fieldsets, Legends, and Screen Readers Again · · , , , ,
  169. HTML Landmark Roles Screen Reader Demo · · , , , ,
  170. Using HTML Landmark Roles to Improve Accessibility · ·
  171. Screen Readers Don’t Announce When the User Reaches the “maxlength” Character Limit · · , , , ,
  172. Respect Your Children · · ,
  173. How Large DOM Sizes Affect Interactivity, and What You Can Do About It · · , ,
  174. Client-Side Rendering of HTML and Interactivity · · ,
  175. How Far Back in Time Can I Take My Website’s Design · · , , ,
  176. Short Note: Why Isn’t “role=presentation”/“none” Allowed on Focusable Elements? · · , ,
  177. Considering Content Warnings in HTML · · ,
  178. “details”/“summary” Inconsistencies · · , ,
  179. It’s Very Likely That… · · , ,
  180. The “details” Element Is Amazing ·
  181. HTML Accessibility API Mappings 1.0 · · ,
  182. New HTML Element: “search” · ·
  183. What Is Semantic HTML? · ·
  184. Five Pieces of Advice for More Accessible Websites · ·
  185. Modern HTML Email (Tables No Longer Required) · · ,
  186. HTML: Help Users to Download Files With the HTML “download” Attribute ·
  187. Getting Started With HTML Tables · · ,
  188. Fighting Inter-Component HTML Bloat · · , ,
  189. The “search” Element · · ,
  190. The End of Front-End Development · · ,
  191. The H1 Conundrum: Understanding the Challenges of Heading Level One · · , ,
  192. Progressively Enhancing a Table With a Web Component · · , , ,
  193. File Uploads for the Web: Uploading Files With HTML · ·
  194. HTML Garden · · ,
  195. A Tab Interface Before Its Time · ·
  196. 50.1% Empty Links · · , , ,
  197. Relative Rounded Corners · ·
  198. ARIA vs. HTML · · , , ,
  199. Avoid Spanning Table Headers · · , ,
  200. Representation of Style · ·
  201. A Step-by-Step Guide to Building Accessible Carousels · · , , ,
  202. Declarative Shadow DOM · · ,
  203. Screen Readers Don’t Convey the Semantics of “strong” and “em” · · , , , ,
  204. Mastodon and Open Graph · · , , ,
  205. Table of Contents Progress Animation · · , ,
  206. Interop 2023 CMS Checkin · · ,
  207. Rotating Gallery With CSS Scroll-Driven Animations · · , , ,
  208. HTML Input Types · ·
  209. Use the Dialog Element (Reasonably) · · ,
  210. Screen Readers Support for Text Level HTML Semantics · · , , , ,
  211. The Modern Way of Serving Images · · ,
  212. Musing Upon an “[alt]” Text Badge on Images · · ,
  213. If You Need a Link, Don’t Use a Button · · , , ,
  214. Improve Your HTML Semantic With Pico CSS · ·
  215. Unordered Lists in Main Navigations · · ,
  216. Two Ways to Safely Break a Long Word in HTML ·
  217. Three Attributes for Better Web Forms · ·
  218. Data URLs and Pool in Your URL · ·
  219. Faking Min Width on a Table Column · · , ,
  220. Customizing HTML Form Validation · · ,
  221. How to Build Great HTML Form Controls · · ,
  222. Conditional API Responses for JavaScript vs. HTML Forms · · , , ,
  223. Theme Toggles · · , ,
  224. A Problem With Link Relationships · · , ,
  225. Enforcing Better HTML Markup With Eleventy · · , ,
  226. Building an Accessible Theme Picker With HTML, CSS, and JavaScript · · , , ,
  227. A Theory of Web Relativity · · ,
  228. Common Nesting Issues in HTML · ·
  229. Interop 2022: End of Year Update · · , ,
  230. HTML Dialog · ·
  231. Mini-Guide to Add an Image · ·
  232. Modern HTML as a Foundation for Progressive Enhancement · ·
  233. 5 HTML Elements, and a Partridge in a Despair Tree · · ,
  234. Get That Marquee AeStHeTiC · · ,
  235. An HTML-First Mental Model · · ,
  236. 4 Ways CSS “:has()” Can Make Your HTML Forms Even Better · · , ,
  237. Table Like It’s 2023 · ·
  238. One Day We’ll Have a Fully Customisable Select · ·
  239. There Can Be Only One: Options for Building “Choose One” Fields · ·
  240. Dear Developer, Your Assumptions Are Wrong ·
  241. Inside the Mind of a Frontend Developer: Article Layout · · ,
  242. A Modern HTML Template (2022) · ·
  243. Meaningful Labels Using ARIA—or Not · · , ,
  244. 4 More HTML Concepts You Didn’t Know · · , ,
  245. Reading the Meter · · ,
  246. Brief Note on Description List Support · · , , ,
  247. Landmarks and Where to Put Them · · , ,
  248. You Don’t Need ARIA for That · · ,
  249. How to Transfigure Wireframes into HTML · · , ,
  250. HTML Semantics and Accessibility Cheat Sheet · · , ,