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. Core Web Vitals Tools to Boost Your Web Performance Scores (tweet this) · · , ,
  2. Zooming Images in a Grid Layout (tweet this) · · ,
  3. No Demo [Website] Reno (tweet this) · · ,
  4. Capturing Images and Videos from the Camera of Mobile Devices Using HTML (tweet this) · · ,
  5. One-Dimensional Website Optimization Considered Harmful (tweet this) · · ,
  6. AI-Generated Images from AI-Generated Alt Text (tweet this) · · , ,
  7. 5 Heading Accessibility Issues and How to Fix Them (tweet this) · · ,
  8. Migration from jQuery to Next.js: A Guide (tweet this) · · , , ,
  9. Introducing the New npm Dependency Selector Syntax (tweet this) · ·
  10. Finer Grained Control over CSS Transforms with Individual Transform Properties (tweet this) · ·
  11. Ruby Styling (tweet this) · · , ,
  12. Fluid Sizing Instead of Multiple Media Queries? (tweet this) · · ,
  13. Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers (tweet this) · · ,
  14. CSS Border Animations (tweet this) · · ,
  15. The Importance of Clean Code in Your Startup’s Success (tweet this) · ·
  16. Firefox (and Other Browsers), Forgotten? (tweet this) · · ,
  17. Checking If a JavaScript Native Function Is Monkey Patched (tweet this) · ·
  18. Which Generator Builds Markdown the Fastest? (tweet this) · · , , ,
  19. Use the Active Voice to Transform Your Design System Documentation (tweet this) · · , ,
  20. The Horizontal Overflow Problem (tweet this) · ·
  21. 10+ Things I Always Set Up in Git When I Prepare a New Environment (tweet this) · ·
  22. When Will Scrum Die? (tweet this) · · , , ,
  23. Underengineer Your Websites (tweet this) · · , ,
  24. Testable Frontend: The Good, the Bad, and the Flaky (tweet this) · ·
  25. Recreating MDN’s Truncated Text Effect (tweet this) · · ,
  26. Quick Tip: Negative Animation Delay (tweet this) · · , ,
  27. Detecting CSS Selector Support with JavaScript (tweet this) · · , , ,
  28. 8 Simple Steps to Complete a Technical SEO Audit (tweet this) · · ,
  29. 500 ms to 1.7 ms in React: A Journey and a Checklist (tweet this) · · ,
  30. You Don’t Need Microservices (tweet this) · ·
  31. Why I’m Learning Typescript (tweet this) · ·
  32. Design Systems for Humans (tweet this) · · ,
  33. Abbreviations Suck (tweet this) · · ,
  34. 3 Simple Ways to Center an Element Using CSS (tweet this) · ·
  35. The 10 Affirmations of Good Digital Accessibility (tweet this) · ·
  36. Speaking Up and Speaking Out: Tactical Communication in Accessibility (tweet this) · ·
  37. Neubrutalism Style in UX: A Twist on the Dominant Modern Minimalist (tweet this) · · , ,
  38. Maintenance Matters (tweet this) · · , , , , ,
  39. Introducing Even More Security Enhancements to npm (tweet this) · · ,
  40. #ADA32: The ADA Has Applied to Digital for Decades (tweet this) · · ,
  41. A Good Reset (tweet this) · · ,
  42. Typography in Web Design (tweet this) · · ,
  43. Solving the “Dangler” Conundrum with Container Queries and “:has()” (tweet this) · · ,
  44. Priority Hints—What Your Browser Doesn’t Know (Yet) (tweet this) · ·
  45. Everything You Need to Know About JavaScript Import Maps (tweet this) · ·
  46. “<article>” vs. “<section>”: How to Choose the Right One (tweet this) · · , ,
  47. 5 Best UX Careers to Pursue in 2022 (tweet this) · · ,
  48. Mobile UX: Study Guide (tweet this) · · , ,
  49. Clean Architecture: Applying with React (tweet this) · · ,
  50. The History of JavaScript (tweet this) · · ,
  51. Understanding CSS “:has()” (tweet this) · · , ,
  52. Say No to Tailwind, Embrace Plain CSS (tweet this) · · , ,
  53. Definitive Guide to CAPTCHA Accessibility (tweet this) · · , ,
  54. With “:focus-visible”, You Can Have Focus Styles When It Makes Sense (tweet this) · · , ,
  55. Where’s the Fun in Accessibility? (tweet this) · · ,
  56. Vector Animations with Figma and SVG Animate (tweet this) · · , ,
  57. Roundup of Recent Document Outline Chatter (tweet this) · · , ,
  58. Research Insight: Accessibility of Images (tweet this) · · , , ,
  59. RedwoodJS vs. BlitzJS: The Future of Fullstack JavaScript Meta-Frameworks (tweet this) · · , ,
  60. Introduction to SvelteKit (tweet this) · · ,
  61. Escaping the sRGB Prison (tweet this) · · ,
  62. 20 Git Commands Every Developer Should Know (tweet this) · ·
  63. Rethinking Device Emulation in Browsers (tweet this) · · , ,
  64. Powerful Image Optimization Tools (tweet this) · · , , , ,
  65. Creating an App Using Drag and Drop with React without Libraries (tweet this) · ·
  66. Create Complex Transitions with Individual CSS Transform Properties (tweet this) · · , ,
  67. An Introduction to Multithreading in Node.js (tweet this) · ·
  68. The 10 Most Common JavaScript Issues Developers Face (tweet this) · ·
  69. Subheadings, Subtitles, Alternative Titles, and Taglines in HTML (tweet this) · · , ,
  70. JavaScript SDK “Package Size Is Massive”—So We Reduced It by 29% (tweet this) · · , ,
  71. Expert Tips for Color Accessibility on the Web (tweet this) · · , ,
  72. 15 Common Beginner JavaScript Mistakes (tweet this) · ·
  73. Why I No Longer Care What People “Like” or “Don’t Like” (tweet this) · ·
  74. What Is Passwordless Authentication and How to Implement It (tweet this) · · ,
  75. Useful Tips and Tricks in JavaScript (tweet this) · · , ,
  76. JSON Creator Douglas Crockford Interview (tweet this) · · ,
  77. How Scrum with Kanban Works (tweet this) · · , , ,
  78. Abbreviations Can Be Problematic (tweet this) · · ,
  79. Using Grids in Interface Designs (tweet this) · · ,
  80. Use Firefox for Accessibility Testing (tweet this) · · , ,
  81. CSS Gradient Background from Figma to Codepen (tweet this) · · , ,
  82. Can SVG Symbols Affect Web Performance? (tweet this) · · ,
  83. An Approach to Continuous Learning (tweet this) · · ,
  84. 7 Tips for Clean React TypeScript Code You Must Know (tweet this) · · , ,
  85. What Does x% of Issues Mean? (tweet this) · · ,
  86. Welcome to the Dark Side (tweet this) · · , ,
  87. 7 Quick Facts About WCAG 2.2 (tweet this) · · , ,
  88. Working with File System Paths on Node.js (tweet this) · ·
  89. What Is the Best Way to Mark Up an Exclusive Button Group? (tweet this) · · , , ,
  90. The Hidden History of Screen Readers (tweet this) · · , , ,
  91. Perceived Affordances and the Functionality Mismatch (tweet this) · · , ,
  92. Minimal Social Markup (tweet this) · · , ,
  93. The “Array.prototype.at()” Method in Vanilla JavaScript (tweet this) · ·
  94. Optimizing Node.js Dependencies in AWS Lambda (tweet this) · · , , ,
  95. My War on Animation (tweet this) · · ,
  96. Custom ESM Loaders: Who, What, When, Where, Why, How (tweet this) · ·
  97. Bag Some AAA Wins Where You Can (tweet this) · · ,
  98. What You Need to Know About ARIA and How to Fix Common Mistakes (tweet this) · · , ,
  99. The Methods UX Professionals Use (tweet this) · · ,
  100. The Cost of Consistency in UI Frameworks (tweet this) · · ,
  101. Applying SOLID Principles in React (tweet this) · · , , ,
  102. The Many Faces of Themeable Design Systems (tweet this) · · ,
  103. Technical Writing for Developers (tweet this) · · ,
  104. Statements vs. Expressions (tweet this) · · ,
  105. Integer Math in JavaScript (tweet this) · · ,
  106. Guide to Trending Front-End Frameworks in 2022 (tweet this) · · , , , , , ,
  107. Generating Accessibility Test Results for a Whole Website with Pa11y CI (tweet this) · · , ,
  108. Fundamentals Matter (tweet this) · ·
  109. Building (or Rebuilding) a Website with Accessibility in Mind (tweet this) · ·
  110. Avoiding “<img>” Layout Shifts: “aspect-ratio” vs. “width” and “height” Attributes (tweet this) · · , , , ,
  111. A Look at Remix and the Differences with Next.js (tweet this) · · , , ,
  112. The Ultimate Guide to Debugging Accessibility Issues (tweet this) · · , ,
  113. JavaScript Obfuscation Techniques by Example (tweet this) · · ,
  114. Working on a New Feature as a Senior Frontend Developer (tweet this) · ·
  115. Figma Auto Layout = “display: flex” (tweet this) · · ,
  116. Choosing the Right Mindset to Design Complex Applications (tweet this) · · , ,
  117. The Future of CSS: Variable Units, Powered by Custom Properties (tweet this) · · ,
  118. Set JAWS Free! (tweet this) · · , ,
  119. Data Structure and Algorithms 102 (tweet this) · · ,
  120. CSS Complexity: It’s Complicated (tweet this) · · ,
  121. Why the HTML Outlining Algorithm Was Removed from the Spec—The Truth Will Shock You! (tweet this) · · , ,
  122. The CSS Cascade, a Deep Dive (tweet this) · · , ,
  123. It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility Via Display Properties (tweet this) · · , ,
  124. Holograms, Light-Leaks, and How to Build CSS-Only Shaders (tweet this) · · ,
  125. What Are Color Gamuts (tweet this) · ·
  126. Truly Portable Design Patterns (tweet this) · · ,
  127. The Joy of Variable Fonts: Getting Started on the Frontend (tweet this) · · ,
  128. The Hard Parts of Developer Advocacy (for Me) (tweet this) · · ,
  129. Captions: Humans vs. Artificial Intelligence: Who Wins? (tweet this) · · , , ,
  130. The Case for Null in Design Systems (tweet this) · ·
  131. The Ballad of Text Overflow (tweet this) · · ,
  132. Style with Stateful, Semantic Selectors (tweet this) · · ,
  133. Masonry? In CSS?! (tweet this) · · ,
  134. Inverted Media Queries and Breakpoints (tweet this) · · ,
  135. Executing Shell Commands from Node.js (tweet this) · · ,
  136. Two Levels of Customising “<selectmenu>” (tweet this) · · ,
  137. The Unlocked Possibilities of the “:has()” Selector (tweet this) · · ,
  138. Super-Helpful Tips When Working with Figma Component Properties (tweet this) · · , ,
  139. How to Make Text Improve User Experience: Insights Into UX Writing (tweet this) · · ,
  140. Body Margin 8px (tweet this) · · ,
  141. Frontend Web Performance: The Essentials (tweet this) · · ,
  142. css-browser-support (tweet this) · · , , , ,
  143. Imagemin Guard (tweet this) · · , , , , ,
  144. Faster WordPress Rendering with 3 Lines of Configuration (tweet this) · · , , , ,
  145. Write Git Commit Messages That Your Colleagues Will Love (tweet this) · ·
  146. Web Development Is Like Assembling IKEA Furniture (tweet this) · · ,
  147. Reimagining Front-End Web Development with htmx and Hyperscript (tweet this) · ·
  148. Breaking Out of a Central Wrapper (tweet this) · ·
  149. The New Wave of React State Management (tweet this) · · , ,
  150. “That's Not Accessible!” and Other Statements About Accessibility (tweet this) · ·
  151. CSS Variable Secrets (tweet this) · · ,
  152. 404 vs. 410—The Technical SEO Experiment (tweet this) · · , , ,
  153. What the Hell is “<!DOCTYPE html>”? (tweet this) · ·
  154. What Every Newbie Developer Should Know (tweet this) · ·
  155. Thoughts on an Accessibility “Get Well” Plan (tweet this) · · , ,
  156. Farewell to HTML5Rocks (tweet this) · · , ,
  157. Building Tabs in Web Components (tweet this) · ·
  158. Working with the File System on Node.js (tweet this) · · ,
  159. Googlebot and the 15 MB Thing (tweet this) · · ,
  160. Are You Sure That’s a Number Input? (tweet this) · ·
  161. What Do the Developers Do in the Last Week of the Sprint? (tweet this) · · , ,
  162. Style Queries (tweet this) · ·
  163. SPAs: Theory Versus Practice (tweet this) · · ,
  164. Demystifying the New Gatsby Framework (tweet this) · · ,
  165. A CLS Punishment for Progressive Enhancement? (tweet this) · · , ,
  166. UX Writing: Study Guide (tweet this) · · ,
  167. Using JavaScript to Fill localStorage to Its Maximum Capacity (tweet this) · · ,
  168. A Previous Sibling Selector (tweet this) · · ,
  169. Why Use Sass? (tweet this) · · ,
  170. GA4 Is Being Blocked by Content Security Policy (tweet this) · · , ,
  171. WCAG 2.1 AA Web Accessibility Checklist (tweet this) · · , ,
  172. Single Element Loaders: The Bars (tweet this) · ·
  173. Missing Introduction to React (tweet this) · ·
  174. Introduction to Defensive CSS (tweet this) · ·
  175. Accessible Design Systems (tweet this) · · ,
  176. 4+ Years of Cracking Technical Interviews (tweet this) · ·
  177. Stop the Screen Going to Sleep with JavaScript (tweet this) · ·
  178. Mastering “z-index” in CSS (tweet this) · ·
  179. Managing Specificity with CSS Cascade Layers (tweet this) · · , ,
  180. How We Designed an Accessible Color Palette from Scratch (tweet this) · · ,
  181. Getting Started with Vue Composables (tweet this) · ·
  182. Everything You Need to Know About Web Performance (in 5 Minutes) (tweet this) · · , ,
  183. Can We Enterprise CSS Grid? (tweet this) · · , ,
  184. Apple Is Not Defending Browser Engine Choice (tweet this) · · , ,
  185. 7 UX Laws You’re Probably Getting Wrong (tweet this) · · , ,
  186. 5 Useful CSS Properties That Get No Love (tweet this) · · ,
  187. What Would a Chromium-Only Web Look Like? (tweet this) · · , ,
  188. User Vulnerabilities in the Data Cycle (tweet this) · · , ,
  189. “text-overflow: ellipsis” Considered Harmful (tweet this) · · ,
  190. Style Scoping Versus Shadow DOM: Which Is Fastest? (tweet this) · · , , , ,
  191. Please Remove That .git Folder (tweet this) · · ,
  192. Looking Ahead—Insights from Jeffrey Zeldman and Eric Meyer (tweet this) · · , ,
  193. Introducing Keyboard Navigation (tweet this) · · ,
  194. In Defense of Blocks for Local Scopes (tweet this) · ·
  195. In Defense of Blocks for Local Scopes II (tweet this) · ·
  196. Different Ways to Write CSS in React (tweet this) · · ,
  197. What Is Alternative Text? How Do I Write It for Images, Charts, and Graphs? (tweet this) · · , , ,
  198. The Right Space Around Headings in Web Typography (tweet this) · · ,
  199. Svelte Origins: A JavaScript Documentary (tweet this) · · , ,
  200. How and When to Use the CSS “:has” Selector (tweet this) · · ,