Frontend Dogma

“html” Archive (2)

  1. 2022: 0 of the Global Top 100 Websites Use Valid HTML · · , ,
  2. The “details” and “summary” Elements, Again · ·
  3. Nuclear Footnotes · ·
  4. What’s New With Forms in 2022? · · ,
  5. Building the Main Navigation for a Website · · ,
  6. HTML Markup Tips for Developing Accessible Websites · · ,
  7. A Content Warning Component · · ,
  8. Disabled JavaScript Turns Off Native Lazy Loading · · , ,
  9. Don’t Overwrite Visual Labels With “aria-label” · · ,
  10. Accessible Lists and Tables · · ,
  11. Should I Use a Button or a Link? · · , ,
  12. The Three Laws of Utility Classes · ·
  13. Short Note on “figure” and “figcaption” · ·
  14. CSS Classes Considered Harmful · ·
  15. TIL: You Can Access a User’s Camera With Just HTML · ·
  16. Creative List Styling · ·
  17. Exploring the Underrated “output” Element ·
  18. Table Column Alignment With Variable Transforms · · ,
  19. Tip: Use “fetchpriority=high” to Load Your LCP Hero Image Sooner · · ,
  20. On Ratings and Meters · · ,
  21. Capturing Images and Videos from the Camera of Mobile Devices Using HTML · · ,
  22. The Infinite Marquee · · ,
  23. Making a Website Under 1 kB · · ,
  24. Ruby Styling · ·
  25. Abbreviations Suck · ·
  26. “<article>” vs. “<section>”: How to Choose the Right One · · ,
  27. Roundup of Recent Document Outline Chatter · · ,
  28. Subheadings, Subtitles, Alternative Titles, and Taglines in HTML · · , ,
  29. Abbreviations Can Be Problematic · ·
  30. What Is the Best Way to Mark Up an Exclusive Button Group? · · , ,
  31. Minimal Social Markup · · ,
  32. What You Need to Know About ARIA and How to Fix Common Mistakes · · , ,
  33. Avoiding “<img>” Layout Shifts: “aspect-ratio” vs. “width” and “height” Attributes · · , , ,
  34. Why the HTML Outlining Algorithm Was Removed from the Spec—the Truth Will Shock You! · · ,
  35. Two Levels of Customising “<selectmenu>” · ·
  36. Best Practices for Images · · ,
  37. What the Hell Is “<!DOCTYPE html>”? ·
  38. Farewell to HTML5Rocks · · ,
  39. Are You Sure That’s a Number Input? ·
  40. Write HTML Right · ·
  41. 8 Shocking HTML Tips You Probably Don’t Know About · ·
  42. The “Form” Element Created the Modern Web—Was It a Big Mistake? · · , ,
  43. A Perfect Table of Contents With HTML and CSS · ·
  44. Why Are Iframe Titles Important for Accessibility? · · ,
  45. Building a Button Component · · , , ,
  46. Conditionally Loading CSS or Any Resource Using Media Queries · · ,
  47. How the HTML “lang” Attribute Helps Accessibility · · ,
  48. Don’t Fight the Browser Preload Scanner · · , ,
  49. XHTML Syntax Is Still Worth Using ·
  50. Divs Are Bad! · ·
  51. Learn HTML [and] CSS · · ,
  52. What’s Your Heading? · · , ,
  53. How to Use Videos With Alpha Transparency on the Web · · ,
  54. Please, Stop Disabling Zoom · ·
  55. Under-Engineered Multi-Selects · · ,
  56. Foundations: Lists · ·
  57. Introducing “inert” · · ,
  58. Common Frontend Interview Questions I’ve Been Asked · · ,
  59. The CSS Art Paradox · · , ,
  60. Non-Interactive Elements With the “inert” Attribute · ·
  61. Plain Old Semantic HTML: A Perfect Basis for Accessibility · · ,
  62. How Web Browsers Work: Parsing the HTML · · ,
  63. Progressive Enhancement and HTML Forms: Use “FormData” · · ,
  64. Does Valid and Semantic HTML Still Matter? · · , ,
  65. Building a Dialog Component · · , , ,
  66. Those HTML Elements You Never Use · ·
  67. Designing Better Breadcrumbs · · ,
  68. HTML Is All You Need to Make a Website ·
  69. Alternative Text (Alt Text) · · , ,
  70. 12 Years Beyond a HTML Joke · ·
  71. “aria-labelledby” Usage Notes · · ,
  72. Accessible Cards · · ,
  73. How to Match HTML Elements With an Indeterminate State · · , ,
  74. HTML-Only Keyboard Shortcuts · · ,
  75. Picture Perfect Images With the Modern “<img>” Element · · , ,
  76. Those HTML Attributes You Never Use ·
  77. Write HTML, the HTML Way (Not the XHTML Way) · ·
  78. HTML Semantics · ·
  79. The Impact That High Quality Mark-Up Can Have on Accessibility, Performance, and Discoverability · · , ,
  80. Building a Loading Bar Component · · , ,
  81. The Weirdly Obscure Art of Streamed HTML · · ,
  82. How to Automatically Size a Textarea Based on Its [Text] Using Vanilla JavaScript · · ,
  83. It Needs to Map Back to a Role · · , ,
  84. Aligning Content in Different Wrappers · ·
  85. A Look at the Dialog Element’s Super Powers · · ,
  86. Creating Native Web Components · · ,
  87. It’s Always Been You, Canvas2D · · ,
  88. Foundations: Headings · · , ,
  89. Web Component Pseudo-Classes and Pseudo-Elements Are Easier Than You Think · · ,
  90. (Not So) Short Note on Being Owned · · ,
  91. HTML Comments Work in JavaScript Too · · ,
  92. Support for Marking Radio Buttons Required, Invalid · ·
  93. Column Headers and Browser Support · · ,
  94. There Is No Character Limit for “Alt Text” · · ,
  95. How to Create a Search Page for a Static Website With Vanilla JS · · , , ,
  96. Why Radio Buttons Are Called Radio Buttons in UIs? · · ,
  97. MHTML in Chromium · ·
  98. Replace JavaScript Dialogs With the New HTML Dialog Element · · ,
  99. Introducing the Dialog Element · · ,
  100. 24 Lesser-Known HTML Attributes You May Want to Use ·
  101. How to Convert Markdown to HTML · · , ,
  102. More to Give Than Just the Div: Semantics and How to Get Them Right · · ,
  103. Context-Aware Web Components Are Easier Than You Think · · ,
  104. Div Divisiveness · ·
  105. On the Peculiarities of Counting the Number of HTML Elements ·
  106. Find HTML Parsing Errors · · , , ,
  107. Boolean Attributes in HTML and ARIA: What’s the Difference? · ·
  108. HTML Is General, ARIA Is Specific · ·
  109. Alt Tag Emptiness · · , , ,
  110. Labeling the Point: Scenarios of Label Misuse in WCAG · · ,
  111. Accessible Heading Structure · · ,
  112. Faster Websites by Using Less HTML · · , , ,
  113. Form Autocomplete · ·
  114. 5 Common Misconceptions About WAI-ARIA and Accessibility · · ,
  115. How to Define Your Relationship to Sites You Link To · · , , ,
  116. Image Display Elements · · ,
  117. 4 HTML Concepts You Didn’t Know · · ,
  118. CSS Can Help Improve Your HTML!? Buttons and Links · · , , ,
  119. Details/Summary · ·
  120. Embrace the Platform · · , ,
  121. Defer Non-Critical Resources · ·
  122. Markup · ·
  123. On Yak Shaving and “<md-block>”, a New HTML Element for Markdown · · ,
  124. The 6 Ways of Writing HTML (and Their Combinations) ·
  125. Control Layout in a Multi-Directional Website · · ,
  126. Dear HTML Element ·
  127. How to Make Blob Menu Using HTML, CSS and JavaScript · · , ,
  128. Generate a Pull Request of Static Content With a Simple HTML Form · ·
  129. Get Your “Head” Straight · · ,
  130. Detecting Specific Text Input With HTML and CSS · ·
  131. Designing a Reorderable List Component · · , ,
  132. Debugging HTML: Accessibility · · ,
  133. In Defence of Dialog · ·
  134. Learn Forms · · ,
  135. Building Real-Life Components: Facebook Messenger’s Chat Bubble · · ,
  136. Accessible Toggles · · ,
  137. HTMLoween—HTML, JS, and CSS to Make Your Blood Boil · · ,
  138. Indecisive Skip Links and Their Targets—the Renaissance of the “<hr>” Element · · ,
  139. If HTML and ARIA Don’t Allow It, It’s Probably a Bad Idea · · ,
  140. Switch Role Support · · ,
  141. Semantic “menu” Context · ·
  142. Making the Web Developer’s Pilgrimage ·
  143. Decoupling HTML, CSS, and JavaScript in Design Systems · · , ,
  144. HTML With Superpowers · · ,
  145. Landmarks · · ,
  146. Beginner’s Guide to Responsive Images: How to Get Them Right · · , ,
  147. Building a Multi-Select Component · · , ,
  148. How to Win at CORS · · , , ,
  149. A Tangled Web of ARIA · · ,
  150. Buttons vs. Links · · , , ,
  151. How to Implement and Style the “Dialog” Element · · , ,
  152. The Options for Password-Revealing Inputs · · , , ,
  153. How to Build an Expandable Accessible Gallery · · , ,
  154. Redundantly Redundant a11y Accessibility · ·
  155. Links, Missing “href” Attributes, and Over-Engineered Code · · ,
  156. How I Built a Modern Website in 2021 · · ,
  157. Declaring Page Language—and Declaring Changes in Language · · ,
  158. Comparing Page Language Declaration Setups in Screen Readers · · , , , , ,
  159. 7 Useful HTML Attributes You May Not Know ·
  160. 29 Projects to Help You Practice HTML CSS Javascript 2021 · · ,
  161. Blowing Up HTML Size With Responsive Images · · , ,
  162. Element Diversity ·
  163. Twitter’s Div Soup and Uglyfied CSS, Explained · · ,
  164. Building a Split-Button Component · · , ,
  165. Building a Stepper Component · · ,
  166. Small Wins for Accessibility and Resilience · ·
  167. Named and Framed · ·
  168. One Favicon to Rule Them All · · ,
  169. ARIA Spec for the Uninitiated · · ,
  170. The Complete Guide to HTML Forms and Constraint Validation · · , ,
  171. On the “<dl>” ·
  172. A Deep Dive on Skipping to Content · · ,
  173. The Ultimate Cheat Sheet List for Web Developers · · , ,
  174. 6 Useful Frontend Techniques That You May Not Know About · · , ,
  175. Accessibility of the “Section” Element · ·
  176. Designing for the Unexpected · · ,
  177. The 3-Second Frontend Developer Test · · , ,
  178. The Document Outline · ·
  179. ARIA in HTML · · ,
  180. Accessibility and SEO · · ,
  181. Use the “i” Element, and Use It Appropriately · ·
  182. JavaScript Frameworks and the Lost Art of HTML · · ,
  183. OMG, SVG Favicons FTW! · · , ,
  184. Half the Size of Images by Optimising for High Density Displays · · ,
  185. Why Validate? · · , , ,
  186. Accessible Overflow · · ,
  187. The Hidden World of “aria-hidden” · ·
  188. Don’t Overabstract Your Components · · ,
  189. 2021: 98% of the Top 100 U.S. Websites Use Invalid HTML · · , ,
  190. The Button Cheat Sheet · ·
  191. Upgrade Your HTML III · · , , ,
  192. Understanding Logical Focus Order · · ,
  193. Not Your Typical Horizontal Rules · ·
  194. Why Skip-Links Are Important for Accessibility · ·
  195. Revisiting Dark Patterns With the HTML “dialog” Tag · · ,
  196. HTML: The 16 Content Categories and Their Elements · ·
  197. HTML and CSS Techniques to Reduce Your JavaScript · · , ,
  198. Alt vs. Figcaption · · ,
  199. Know Your Standards · · , , , ,
  200. Upgrade Your HTML II · · , , ,
  201. Markup · ·
  202. Islands Architecture · · ,
  203. Alt Text Decision Helper · , , ,
  204. XFN Link Generator · , , , ,
  205. Social Media Checker · , , ,
  206. Social Markup Previewer and Generator (OpenGraph) · , , ,
  207. Social Markup Previewer and Generator (Meta Tags) · , , ,
  208. “nofollow” Checker · , ,
  209. Inline CSS Checker · , , ,
  210. HTML Outline Extractor · ,
  211. HTML “hreflang” Checker · , ,
  212. HTML Form Checker · , ,
  213. HTML Optimizer (HTML De-crapulator) · , ,
  214. HTML to Text Email Converter · , ,
  215. Unquoted Attribute Value Validator · , , , ,
  216. HTML, CSS, and JavaScript Minifier · , , , , ,
  217. hCard Generator · , , ,
  218. hCalendar Generator · , , ,
  219. Contact Form Generator · , , , ,
  220. HTML Nesting Checker · , , , ,
  221. HTML Tag Remover · , , ,
  222. Markdown to HTML Converter · , , ,
  223. HTML to PHP Converter · , , ,
  224. HTML to PDF Converter · , ,
  225. HTML Encoder and Decoder · , ,
  226. HTML Optimizer (HtmlWasher) · , ,
  227. HTML Optimizer and Minifier · , , ,
  228. HTML Formatter · , , ,
  229. HTML, CSS, JavaScript, JSON, and XML Un-Minifier · , , , , , , ,
  230. HTML, CSS, and JavaScript Formatter · , , , , ,
  231. Table Generator (TablesGenerator.com) · , , ,
  232. Table Generator (Accessify) · , , ,
  233. Structured Data Generator · , , , , ,
  234. Pop-Up Generator · , , ,
  235. Meta Elements Generator · , , ,
  236. HTML/XML Character Escape Generator · , , , ,
  237. HTML Template Generator · , ,
  238. Hero Element Generator · , , ,
  239. Geo Tag Generator · , ,
  240. Form Generator · , , , ,
  241. Checkbox Generator · , , ,
  242. HTML Table Linearizer · , , , ,
  243. HTML Diff · , , , ,
  244. HTML Size Analyzer · , ,
  245. HTML Validator · , ,
  246. Accessibility Checker (FAE) · , , ,