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. Farewell to HTML5Rocks (tweet) · · , ,
  2. Are You Sure That’s a Number Input? (tweet) · ·
  3. What Do the Developers Do in the Last Week of the Sprint? (tweet) · · , ,
  4. Style Queries (tweet) · ·
  5. Demystifying the New Gatsby Framework (tweet) · · ,
  6. A CLS Punishment for Progressive Enhancement? (tweet) · · , ,
  7. UX Writing: Study Guide (tweet) · · ,
  8. Single Element Loaders: The Bars (tweet) · ·
  9. Missing Introduction to React (tweet) · ·
  10. Introduction to Defensive CSS (tweet) · ·
  11. Accessible Design Systems (tweet) · · ,
  12. 4+ Years of Cracking Technical Interviews (tweet) · ·
  13. How We Designed an Accessible Color Palette from Scratch (tweet) · · ,
  14. Can We Enterprise CSS Grid? (tweet) · · , ,
  15. Apple Is Not Defending Browser Engine Choice (tweet) · · , ,
  16. 7 UX Laws You’re Probably Getting Wrong (tweet) · · , ,
  17. What Would a Chromium-Only Web Look Like? (tweet) · · , ,
  18. “text-overflow: ellipsis” Considered Harmful (tweet) · · ,
  19. Style Scoping Versus Shadow DOM: Which Is Fastest? (tweet) · · , , , ,
  20. Please Remove That .git Folder (tweet) · · ,
  21. In Defense of Blocks for Local Scopes (tweet) · ·
  22. In Defense of Blocks for Local Scopes II (tweet) · ·
  23. Different Ways to Write CSS in React (tweet) · · ,
  24. What Is Alternative Text? How Do I Write It for Images, Charts, and Graphs? (tweet) · · , ,
  25. The Right Space Around Headings in Web Typography (tweet) · · ,
  26. How and When to Use the CSS “:has” Selector (tweet) · · ,
  27. One Line of CSS to Add Basic Dark/Light Mode (tweet) · · ,
  28. How I Built a Dark Mode Toggle (tweet) · ·
  29. Best Practices for Overlays II (tweet) · · ,
  30. A Beginner’s Guide to Inclusive UX Design (tweet) · · , , ,
  31. The Dos and Don’ts of Pairing Typefaces (tweet) · · , , , ,
  32. The Case for Using Sass in 2022 (tweet) · · ,
  33. Alternatives to Installing npm Packages Globally (tweet) · · ,
  34. Using Web Streams on Node.js (tweet) · ·
  35. Pop-Ups Are Dead, Long Live Pop-Ups: Or, the Bait-and-Switch Hidden in Today’s Cookie Announcement (tweet) · · , ,
  36. Is It Expensive to Build an Eco-Friendly Website? (tweet) · · , ,
  37. Notes on Maintaining an Internal React Component Library (tweet) · · , , ,
  38. 3 Useful CSS Hacks (tweet) · · ,
  39. You Don’t Need a JavaScript Library for Your Components (tweet) · · , ,
  40. The Guide to Windows High Contrast Mode (tweet) · · ,
  41. How to Remove 99% of JavaScript from Main Thread (tweet) · · , ,
  42. How to Prevent Merge Conflicts (or at Least Have Less of Them) (tweet) · · ,
  43. Fun CSS-Only Scrolling Effects for Matterday (tweet) · · ,
  44. Do Dyslexia Fonts Improve Accessibility? (tweet) · · ,
  45. Conditionally Styling Selected Elements in a Grid Container (tweet) · · ,
  46. Communication Accessibility: It’s Time to Change How We Communicate (tweet) · ·
  47. 5 Very Simple Steps You Can Take for Accessibility Improvement (tweet) · ·
  48. Why You Shouldn’t Modify Scrum (tweet) · · , ,
  49. Understanding the JavaScript Window Object (tweet) · ·
  50. Software Engineering—The Soft Parts (tweet) · · ,
  51. Should I Have Separate GitHub Accounts for Personal and Professional Projects? (tweet) · · , , ,
  52. Dialogs and Shadow DOM: Can We Make It Accessible? (tweet) · · ,
  53. CSS Card Shadow Effects (tweet) · · ,
  54. What We’ve Learned from One Year of Real User Monitoring Data on GOV.UK (tweet) · · ,
  55. The Smallest CSS (tweet) · · ,
  56. The Folly of Design System “Foundations” (tweet) · ·
  57. Modern JavaScript, 10 Things You Should Be Using, Starting Today (tweet) · ·
  58. AbortController Is Your Friend (tweet) · ·
  59. Better Scrolling Through Modern CSS (tweet) · · ,
  60. Write HTML Right (tweet) · · ,
  61. The Many Definitions of Server-Side Rendering (tweet) · ·
  62. State of the Vuenion 2022 (tweet) · · ,
  63. Single Element Loaders: The Spinner (tweet) · · ,
  64. Measuring the Performance of Typefaces for Users II (tweet) · · , ,
  65. Make DevTools Pick Colors Outside of Chrome (tweet) · · ,
  66. How We Think About Browsers (tweet) · ·
  67. 10 Dos and Don’ts of Web Design in 2022 (tweet) · · ,
  68. The Future of Frontend Build Tools (tweet) · ·
  69. Design Systems; the Great Connector (tweet) · ·
  70. WCAG SC 1.4.4 Resize Text and 1.4.10 Reflow (tweet) · · ,
  71. Simplify Your Color Palette with CSS “color-mix()” (tweet) · · ,
  72. Patterns for Building JavaScript Websites in 2022 (tweet) · · , ,
  73. Mobile-First CSS: Is It Time for a Rethink? (tweet) · · ,
  74. JavaScript Hydration Is a Workaround, Not a Solution (tweet) · · ,
  75. Inclusive User Research: Analysing Findings (tweet) · · ,
  76. How to Use Headings for Website Accessibility (tweet) · · ,
  77. How to Animate SVG Shapes on Scroll (tweet) · · , ,
  78. Optimize the Use of “if–else” (tweet) · ·
  79. Meet Web Push (tweet) · · , , ,
  80. Mathematical Notation for JavaScript Developers Explained (tweet) · ·
  81. How to Create Dark Mode for Your Designs in Figma (tweet) · · ,
  82. Building Interoperable Web Components That Even Work with React (tweet) · · , ,
  83. Aspects of Accessibility—Semantics, Contrast, and… Anxiety? (tweet) · · , , ,
  84. Web Typography: Establishing a Strong Typographic System (tweet) · ·
  85. Shallow Copy and Deep Copy (tweet) · ·
  86. Best Practices for Overlays (tweet) · · ,
  87. Are You Ignoring Digital Accessibility at Your Job? (tweet) · · ,
  88. How to Use Variables in CSS (tweet) · · ,
  89. Can I DevTools? (tweet) · · , ,
  90. Measuring the Performance of Typefaces for Users (tweet) · · , ,
  91. Why Most Design Systems Implode (tweet) · · ,
  92. WCAG 3 Compliant? Check Again (tweet) · · , ,
  93. Hamburger Footer: Reaching the Bottom of Infinite Scroll (tweet) · · ,
  94. Web Development Resources (tweet) · · ,
  95. Don’t Sink Your Website with Third Parties (tweet) · · , ,
  96. A Brief History of Responsive Web Design (tweet) · · ,
  97. Useful Built-In Node.js APIs (tweet) · · ,
  98. Obscure CSS: Implicit List-Item Counter (tweet) · ·
  99. Monorepos in JavaScript and TypeScript (tweet) · · , ,
  100. How to Pick the Least Wrong Colors (tweet) · · , ,
  101. Do We Have a Lack of Developers or a False Assumption What the Job Is? (tweet) · · ,
  102. Declarative Design Systems (tweet) · ·
  103. Dealing with Hover on Mobile (tweet) · · , ,
  104. Writing Useful Alt Text (tweet) · · ,
  105. The Cicada Principle and Why It Matters to Web Designers (tweet) · · ,
  106. Understanding CSRF Attacks (tweet) · ·
  107. Two Lines of CSS That Boosts 7× Rendering Performance (tweet) · · , ,
  108. Interview with Léonie Watson (tweet) · · ,
  109. How Does Social Interaction Change in an Age of New Media? (tweet) · · ,
  110. Checklist for Moderating a Usability Test (tweet) · · , ,
  111. JavaScript of Halftone Printing (tweet) · ·
  112. 7 Tips to Improve Your TypeScript (tweet) · · ,
  113. You May Not Need a Bundler for Your npm Library (tweet) · · ,
  114. Just How Long Should Alt Text Be? (tweet) · · ,
  115. What’s the Alternative (Text)? (tweet) · · ,
  116. What npm Can Learn from Go (tweet) · ·
  117. The Story of the Custom Scrollbar Using CSS (tweet) · · ,
  118. The “Form” Element Created the Modern Web—Was It a Big Mistake? (tweet) · · , ,
  119. Processing Arrays Non-Destructively: “for-of” vs. “.reduce()” vs. “.flatMap()” (tweet) · · , ,
  120. npm Security Update: Attack Campaign Using Stolen OAuth Tokens (tweet) · · , , ,
  121. Manage Accessible Design System Themes with CSS “color-contrast()” (tweet) · · , ,
  122. How to Fix: “Buttons Do Not Have Accessible Names” (tweet) · · ,
  123. 8 Shocking HTML Tips You Probably Don't Know About (tweet) · · ,
  124. Why Are Iframe Titles Important for Accessibility? (tweet) · · , ,
  125. Understanding Weak Reference in JavaScript (tweet) · ·
  126. Single Page Applications (tweet) · ·
  127. Making Headers Sticky Using CSS for a Better Reading Experience (tweet) · · , ,
  128. JavaScript Closures, Explained (tweet) · ·
  129. Customizing Color Fonts on the Web (tweet) · · , ,
  130. CSS: Absolutely Positioning Things Relatively (tweet) · · ,
  131. A Perfect Table of Contents with HTML and CSS (tweet) · · ,
  132. Inclusive Design 101 (tweet) · · ,
  133. How to Position Your Design System Team for Success (tweet) · · , ,
  134. Four Tradeoffs When Designing Navigation Menus (tweet) · · ,
  135. Advocating for Your Design System (tweet) · ·
  136. Lesser-Known and Underused CSS Features in 2022 (tweet) · ·
  137. Dialog Components: Go Native HTML or Roll Your Own? (tweet) · · ,
  138. A Guide to Writing Industry Standard Git Commit Messages (tweet) · · , ,
  139. 5 Things I’d Want to See Improved in WordPress Core (tweet) · ·
  140. 15 Sprint Review Anti-Patterns—Scrum Anti-Patterns Guide 2022 (tweet) · · , , ,
  141. Accessibility from Different Perspectives (tweet) · ·
  142. The Balance Has Shifted Away from SPAs (tweet) · ·
  143. Triaging WCAG 2.1 Level AAA (tweet) · · , ,
  144. Fun with CSS Combinators (tweet) · · ,
  145. First Look at the CSS “object-view-box” Property (tweet) · ·
  146. What We Can Learn from Remix (tweet) · · ,
  147. Web Development === Accessibility (tweet) · · ,
  148. Web Accessibility Is Broken—It’s Time to Fix It (tweet) · · ,
  149. Use @ supports At-Rule for Feature Detection in CSS (tweet) · · , , ,
  150. The Importance of Organizational Leadership in Developing an Accessibility Culture: Buy-In, Metrics, and Structure (tweet) · · , , , ,
  151. React Hooks Best Practices in 2022 (tweet) · · ,
  152. React Accessibility Resources (tweet) · · , ,
  153. Patterns (tweet) · · , ,
  154. Let’s Make Accessibility Boring Again (tweet) · ·
  155. Automate Accessibility Tests with Storybook (tweet) · · , , ,
  156. Accessibility Not-Checklist (tweet) · · , ,
  157. 4 Web Accessibility Remediation Mistakes to Avoid (tweet) · ·
  158. The Rise and Fall of Neumorphism (tweet) · ·
  159. RFC 9239: Updates to ECMAScript Media Types (tweet) · · ,
  160. Quick and Dirty Text Diffing (tweet) · ·
  161. How to Ask for a Promotion (tweet) · ·
  162. Conditionally Loading CSS or Any Resource Using Media Queries (tweet) · · , ,
  163. Building a Button Component (tweet) · · , , , ,
  164. WCAG 2.2 and WCAG 3 Status Updates (tweet) · · , ,
  165. UI and UX Micro-Tips (tweet) · · , ,
  166. The Modern Way to Create and Host a WordPress Site (tweet) · · ,
  167. The Forgotten Benefits of “Low Tech” User Interfaces (tweet) · ·
  168. Reduce Array of Objects to an Object in JavaScript (tweet) · · ,
  169. How the HTML “lang” Attribute Helps Accessibility (tweet) · · , ,
  170. :where() :is() :has()? New CSS Selectors That Make Your Life Easier (tweet) · · ,
  171. Web Applications 101 (tweet) · · ,
  172. Unpack Arrays Conditionally in PHP (tweet) · · ,
  173. Unexpectedly HTTPS? (tweet) · · ,
  174. The Era of Rebellious Web Design Is Here (tweet) · ·
  175. Rethinking Server-Timing as a Critical Monitoring Tool (tweet) · · , ,
  176. Quick Tip: You Might Not Need “calc()” (tweet) · · ,
  177. Peering into the Accessibility of Dark Mode (tweet) · · ,
  178. Color Alignment for Multiple Design Systems (tweet) · · ,
  179. Building a Design System with Eleventy (tweet) · · ,
  180. An Affordable Work-from-Home Setup for Remote Workers (tweet) · ·
  181. 9 Ways to Design Inclusive Content (tweet) · · ,
  182. 24×24 Pixel Cursor Bookmarklet (tweet) · · , , ,
  183. Personas vs. Archetypes (tweet) · · , , ,
  184. More Common Accessibility Issues That You Can Fix Today (tweet) · ·
  185. Keyboard Testing: The A11y Enhancement to Your Definition of Done (tweet) · · ,
  186. Master the “:nth-child()” Pseudo-Class (tweet) · · , ,
  187. Don’t Fight the Browser Preload Scanner (tweet) · · , , ,
  188. Does Javascript Make My Site Less Accessible? (tweet) · · , ,
  189. Cool Hover Effects That Use CSS Text Shadow (tweet) · · ,
  190. A Designer’s Journey of Ignorance, Resentment, and Wisdom (tweet) · ·
  191. W3C TAG Ethical Web Principles (tweet) · · ,
  192. Tokens as Intents (tweet) · · , ,
  193. Light and Dark Mode in Just 14 Lines of CSS (tweet) · · ,
  194. How to Use Google CrUX to Analyze and Compare the Performance of JS Frameworks (tweet) · · , , ,
  195. Debugging Accessibility with Chrome DevTools (tweet) · · , , ,
  196. Bringing Page Transitions to the Web (tweet) · · , ,
  197. XHTML Syntax Is Still Worth Using (tweet) · ·
  198. Why WCAG 2.2 Is Still in the Oven (tweet) · · ,
  199. State of CSS 2022 (tweet) · ·
  200. On Design Thinking (tweet) · ·