Frontend Dogma

News and Views in Frontend Development

Articles and books, tips and tricks, craft and beauty from the world of frontend development. Explore all topics. Stay informed per feed and on Twitter.

  1. Templating in HTML (tweet this) · · ,
  2. Building Delight in Your Design System (tweet this) · · ,
  3. GIFs Without the .gif: The Most Performant Image and Video Options Right Now (tweet this) · · , , ,
  4. Useful JavaScript Math Functions and How to Use Them (tweet this) · · ,
  5. Named Element IDs Can Be Referenced as JavaScript Globals (tweet this) · · ,
  6. Learn HTML (tweet this) · · ,
  7. Closing a 30 Pixel Gap Between Native and Web (tweet this) · · , ,
  8. The New Wave of JavaScript Web Frameworks (tweet this) · · ,
  9. The 2022 Web Almanac (tweet this) · · , ,
  10. Sustainability (tweet this) · · ,
  11. SEO (tweet this) · · ,
  12. Security (tweet this) · · ,
  13. Page Weight (tweet this) · · ,
  14. Media (tweet this) · · , ,
  15. JavaScript (tweet this) · · ,
  16. Interoperability (tweet this) · · ,
  17. HTTP (tweet this) · · , ,
  18. Fonts (tweet this) · · ,
  19. CSS (tweet this) · · ,
  20. CMS (tweet this) · · ,
  21. Accessibility (tweet this) · · ,
  22. 6+5 Ways to Make a Two-Column Layout: From Pretty Reasonable to Completely Wrong (tweet this) · · ,
  23. Continue Using .env Files as Usual (tweet this) · · ,
  24. Audience-Based Website Navigation (tweet this) · · , ,
  25. Use Cases for CSS Comparison Functions (tweet this) · ·
  26. Things I Wish I Had Known About Angular When I Started (tweet this) · ·
  27. The Indisputable Truth About Accessibility (tweet this) · · ,
  28. Testing Web Design Color Contrast (tweet this) · · , ,
  29. Speedy CSS Tip! Animated Loader (tweet this) · · ,
  30. Randomness in CSS (tweet this) · ·
  31. Quick Reminder: HTML5 “required” and “pattern” Are Not a Security Feature (tweet this) · · , ,
  32. Blind People Need to Be Considered More When Making Data Visualizations (tweet this) · · ,
  33. A Designer’s Guide to Documenting Accessibility (tweet this) · · , , ,
  34. Will Serving Real HTML Content Make a Website Faster? Let’s Experiment! (tweet this) · · , ,
  35. Rest vs. Spread Syntax in JavaScript (tweet this) · · ,
  36. Designing Better Inline Validation UX (tweet this) · · , ,
  37. Creative Section Breaks Using CSS “clip-path” (tweet this) · · ,
  38. 5 Ways That UX Developers Influence SEO (tweet this) · · ,
  39. Why Designers Quit (tweet this) · · ,
  40. Type-Level TypeScript (tweet this) · · ,
  41. The Web Is Good Now (tweet this) · · ,
  42. Shell Scripting with Node.js (tweet this) · · , ,
  43. Prototyping to Learn (tweet this) · · ,
  44. Making Your Web Pages Printer-Friendly with CSS (tweet this) · · ,
  45. It’s Good to Make Mistakes (tweet this) · · ,
  46. How to Generate Random Numbers in JavaScript with “Math.random()” (tweet this) · · ,
  47. CSS Rules vs. CSS Rulesets (tweet this) · · ,
  48. Clarifying Color Contrast and Font Size Guidelines (tweet this) · · , , ,
  49. Accessibility Is Systemic (tweet this) · ·
  50. A “details” Element as a Burger Menu is Not Accessible (tweet this) · · , ,
  51. Web Sustainability and the Ethical Dilemma (tweet this) · · , ,
  52. Stop Using .env Files Now (tweet this) · · ,
  53. How Rapid Usability Testing Is Changing UX Research (tweet this) · · , ,
  54. Design 4.0: Leading Design in the New Industry (tweet this) · ·
  55. Building a Retro Draggable Web Component with Lit (tweet this) · · ,
  56. 5 Ways to Use Data Visualization in Your Content to Increase Traffic (tweet this) · · , ,
  57. Debunking Myths About HTTPS (tweet this) · · ,
  58. Accidental Dismissal of Overlays: A Common Mobile Usability Problem (tweet this) · · ,
  59. The Git Commands I Use Every Day (tweet this) · · ,
  60. When Design Systems Lie (tweet this) · · ,
  61. Brief Note on Super- and Subscript Text (tweet this) · · , , ,
  62. Accessibility Is for Every One (tweet this) · ·
  63. Why the Number Input Is the Worst Input (tweet this) · · , , ,
  64. Why Are Vanity Metrics Still Problematic? (tweet this) · ·
  65. Total Blocking Time: A Short and Sweet Guide for Happier Users (tweet this) · · ,
  66. The Rise of the TikTok Pattern (tweet this) · · ,
  67. Let’s Get Logical (tweet this) · · ,
  68. Five Things You Can Do to Be More Inclusive (tweet this) · · ,
  69. Buttons and the Baader–Meinhof Phenomenon (tweet this) · · ,
  70. Accessibility in Times of Headless (tweet this) · · , ,
  71. 7 Must Know JavaScript Tips and Tricks (tweet this) · · , ,
  72. When Is It OK to Disable Text Selection? (tweet this) · · , ,
  73. W3C TAG Ethical Web Principles (tweet this) · · ,
  74. The State of Digital Accessibility: Three Key Challenges (tweet this) · · , ,
  75. Secure Your Node.js App with JSON Web Tokens (tweet this) · · , ,
  76. Quick Tip: Embedding YouTube Videos in GitHub Pages (tweet this) · · , , ,
  77. On Better Browsers: Arbitrary Media Queries and Browser UIs (tweet this) · · , ,
  78. JavaScript APIs You Don’t Know About (tweet this) · · ,
  79. Container Queries in Browsers! (tweet this) · · , ,
  80. A Guide to Rounding Numbers in JavaScript (tweet this) · · ,
  81. 3 Problems Scrum Doesn’t Solve (tweet this) · · , ,
  82. Wtf Is an Island and Why Is It in My Website? (tweet this) · · , , ,
  83. What is Data Engineering? (tweet this) · ·
  84. The Power of CSS Blend Modes (tweet this) · · ,
  85. The Basics of Remix (tweet this) · · ,
  86. PureComponents vs. Functional Components with Hooks (tweet this) · · , ,
  87. Node.js Native Binary Compilation Using Vercel pkg (tweet this) · ·
  88. Making Sense of WAI-ARIA: A Comprehensive Guide (tweet this) · · , , ,
  89. First Batch of Color Fonts Arrives on Google Fonts (tweet this) · · , ,
  90. Detecting CSS Selector Support (tweet this) · · , , ,
  91. Conditionally Spreading Objects in JavaScript (tweet this) · ·
  92. Better Accessible Names (tweet this) · · ,
  93. Which Fonts to Use for Your Charts and Tables (tweet this) · · ,
  94. The Seventh Way to Call a JavaScript Function Without Parentheses (tweet this) · ·
  95. The “details” and “summary” Elements, Again (tweet this) · · ,
  96. Nuclear Footnotes (tweet this) · · ,
  97. Justin Yarbrough Talks About Alt Text (tweet this) · · , ,
  98. Best Practices for Creating a Modern npm Package (tweet this) · · ,
  99. 0 of the Global Top 100 Websites Use Valid HTML (in 2022) (tweet this) · · , , ,
  100. Mastering These 7 Basics CSS Skills Will Make You a Frontend Wizard (tweet this) · ·
  101. Antipersonas: What, How, Who, and Why? (tweet this) · · ,
  102. Make It Short—Make It Better (tweet this) · · ,
  103. Converting PNG Images to WebP Using PHP (tweet this) · · , ,
  104. How I Made a Pure CSS Puzzle Game (tweet this) · ·
  105. CSS “line-height” (tweet this) · · ,
  106. Button Minimum Width (tweet this) · · ,
  107. A Guide to Choosing the Right React State Management Solution (tweet this) · · , ,
  108. What’s New with Forms in 2022? (tweet this) · · , ,
  109. Towards a Factory Model of Designing User Interfaces—Slotted Systems in Figma (tweet this) · · , ,
  110. Me and React: 5 Years in 15 Minutes (tweet this) · ·
  111. Lightning CSS (tweet this) · · , ,
  112. A Quick Primer on Testing JavaScript (tweet this) · · ,
  113. 12 Modern UI Components to Inspire Your Future Designs (tweet this) · · ,
  114. WCAG 2.2 Hits Candidate Recommendation—But What Does It Mean? (tweet this) · · ,
  115. Rewriting Tests from Cypress to Playwright Using GPT3 (tweet this) · · , , ,
  116. How Your Favourite UI Libraries Manage Their Icons (tweet this) · · , ,
  117. Detect When Users Switch Tabs Using JavaScript (tweet this) · ·
  118. Dependabot Unlocks Transitive Dependencies for npm Projects (tweet this) · · , ,
  119. Building the Main Navigation for a Website (tweet this) · · , ,
  120. Are Modals in Web Design a UX Disaster? (tweet this) · · , ,
  121. An Overview of Node.js: Architecture, APIs, Event Loop, Concurrency (tweet this) · · , ,
  122. The Realities and Myths of Contrast and Color (tweet this) · · , ,
  123. So Your Designer Wants Stuff to Overlap (tweet this) · · ,
  124. Rewrite Your Git History in 4 Friendly Commands (tweet this) · · ,
  125. Introducing Signals (tweet this) · · ,
  126. How to Improve Largest Contentful Paint for Faster Load Times (tweet this) · · , ,
  127. Hacking CSS Animation State and Playback Time (tweet this) · · ,
  128. Critical CSS? Not So Fast! (tweet this) · · ,
  129. An Attempt at Outlining the Many Factors Influencing Developer Experience (tweet this) · ·
  130. A Whole Cascade of Layers (tweet this) · · ,
  131. Understanding Regulatory Compliance and Making It Work on Your Web Site (tweet this) · · ,
  132. Top 5 Technology Trends in UX Design (tweet this) · · , ,
  133. HTML Markup Tips for Developing Accessible Websites (tweet this) · · , ,
  134. Dreamy Blur (tweet this) · · , ,
  135. A/B Testing in 7 Steps to Quickly Improve Your Conversions (tweet this) · · , ,
  136. 5 Reasons to Invest in User Experience (tweet this) · ·
  137. Prestige Is the Designer’s Achilles’ Heel (tweet this) · ·
  138. Infinite Scrolling: When to Use It, When to Avoid It (tweet this) · · , ,
  139. A Content Warning Component (tweet this) · · , ,
  140. A Beginner’s Guide to Design Tokens (tweet this) · · ,
  141. Git Cheatsheet (tweet this) · · , ,
  142. Disabled JavaScript Turns Off Native Lazy Loading (tweet this) · · , ,
  143. Dear Oracle, Please Release the JavaScript Trademark (tweet this) · · ,
  144. The Accessibility and Usability Journey of Drupal’s Primary Navigation (tweet this) · · , ,
  145. Minimum Focus Appearance Explained (tweet this) · · , ,
  146. Is It “:modal”? (tweet this) · · ,
  147. Big O Notation Basics Made Dead Simple (tweet this) · · ,
  148. Useful JavaScript Data Grid Libraries (tweet this) · · , , ,
  149. Is Design Thinking Overhyped? (tweet this) · ·
  150. How I Maintain OSS Projects (tweet this) · · ,
  151. Don’t Overwrite Visual Labels with “aria-label” (tweet this) · · , ,
  152. DevTools Tips: How to Inspect and Debug CSS Flexbox (tweet this) · · , ,
  153. Default Exports in JavaScript Modules Are Terrible (tweet this) · ·
  154. Comparing JAWS, NVDA, and VoiceOver (tweet this) · · , , ,
  155. Accessible Lists and Tables (tweet this) · · ,
  156. Small Steps: Celebrating Four Accessibility Wins (tweet this) · · ,
  157. Neutrality Isn’t an Option When It Comes to Accessibility (tweet this) · ·
  158. 4 Ways to Minimize Your Dependencies in Node.js (tweet this) · · , ,
  159. Understanding “useMemo” and “useCallback” (tweet this) · · ,
  160. Things Not Available When Someone Blocks All Cookies (tweet this) · ·
  161. JavaScript Bugs Aplenty in Node.js Ecosystem—Found Automatically (tweet this) · · , , , , ,
  162. Interpolating Numeric CSS Variables (tweet this) · · ,
  163. Cypress Testing: A Guide to Running Web Application Tests (tweet this) · · , ,
  164. CSS Container Queries Are Finally Here (tweet this) · · ,
  165. An Argument Against CSS Opacity (tweet this) · · , ,
  166. What Makes A Great Toggle Button? II (tweet this) · · ,
  167. Should I Use a Button or a Link? (tweet this) · · ,
  168. Parents Counting Children in CSS (tweet this) · · ,
  169. Monitor Events and Function Calls Via Console (tweet this) · · ,
  170. Communication Around Digital Accessibility Must Improve: How Users and Businesses Alike Are Failing to Advance Digital Accessibility (tweet this) · · ,
  171. The Three Laws of Utility Classes (tweet this) · · ,
  172. An Ideal REST API—Best Practices (tweet this) · · ,
  173. What Is Closed Captioning? (tweet this) · · ,
  174. Using Grid Named Areas to Visualize (and Reference) Your Layout (tweet this) · · ,
  175. On Design System Support (tweet this) · ·
  176. Modern Alternatives to BEM (tweet this) · · , , ,
  177. Making a Twitter Bot in the Year 2022 with Node.js (tweet this) · · ,
  178. Be Good-Argument-Driven, Not Data-Driven (tweet this) · · ,
  179. Why Your Website Should Be Under 14 kB in Size (tweet this) · · ,
  180. Short Note on “figure” and “figcaption” (tweet this) · · ,
  181. Installing and Running Node.js Bin Scripts (tweet this) · · ,
  182. Implementing Promisable “setTimeout” (tweet this) · ·
  183. Designing Better Error Messages UX (tweet this) · · , , ,
  184. CSS Classes Considered Harmful (tweet this) · · ,
  185. Complex Conditional Width Using “flex-basis” with “clamp” (tweet this) · ·
  186. 20 Principles I Learned from 10 Years of Developing Software (tweet this) · · ,
  187. Why Every University Needs an Accessible Standard Website Template (tweet this) · · , ,
  188. What Is a REST API? (tweet this) · · ,
  189. What Customer-First Web Design Looks Like (tweet this) · ·
  190. TIL: You Can Access a User’s Camera with Just HTML (tweet this) · · ,
  191. The Design Principle Paradox (tweet this) · · ,
  192. Measure What You Impact, Not What You Influence (tweet this) · · , ,
  193. Creative List Styling (tweet this) · · ,
  194. Accessibility and Supporting Internet Explorer (tweet this) · · , ,
  195. What’s the Value of a Design System? (tweet this) · · ,
  196. Scaling SCM Front-End Design with a Design System (tweet this) · · ,
  197. How to Use localStorage in JavaScript: An Easy Guide (tweet this) · · , ,
  198. Exploring the Underrated “output” Element (tweet this) · ·
  199. Does Accessibility Stifle the Creative Process? (tweet this) · · ,
  200. A Handy Use for Cascade Layers (tweet this) · · ,