Hi there! Frontend Dogma is just starting the engines. Expect updates.

Frontend Dogma

News and Views in Frontend Development

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

  1. Using Google Drive as a CMS · · , ,
  2. Custom Properties and @property · · , ,
  3. The Accessibility Stalemate · · , ,
  4. A Visual Guide to React Rendering—It Always Re-Renders · · ,
  5. Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines · · , ,
  6. Maintaining End-to-End Quality with Visual Testing · · , , ,
  7. Journey of a Web Page—How Browsers Work · · , , ,
  8. 6 Useful Frontend Techniques That You May Not Know About · · , , , ,
  9. Designing for Information Density · · ,
  10. What Is Tree Shaking? · · , ,
  11. There’s No Such Thing as Fully Automated Web Accessibility · · , ,
  12. The Performance Effects of Too Much Lazy-Loading · · , ,
  13. How to Get a Pixel-Perfect, Linearly Scaled UI · · , , ,
  14. Designing for the Unexpected · · , , ,
  15. The Ultimate Guide to Browser-Side Storage · · , , ,
  16. What’s the Difference Between the Alignment Values of “start”, “flex-start”, and “self-start”? · · ,
  17. The 3-Second Frontend Developer Test · · , , , ,
  18. I’m Changing How I Review Code · · , ,
  19. Build Complex CSS Transitions Using Custom Properties and “cubic-bezier()” · · , , ,
  20. Detecting Media Query Support in CSS and JavaScript · · , , ,
  21. TypeScript Interfaces: A Quick Guide to Help You Get Started · · ,
  22. Refactoring CSS: Introduction · · , , ,
  23. Gridless Design · · , ,
  24. How to Convert Arrays to Human-Readable Lists in JavaScript · · ,
  25. Freelance React Developer Checklist · · , ,
  26. The Document Outline · · , ,
  27. Making a Strong Case for Accessibility · · , ,
  28. TypeScript and Native ESM on Node.js · · , , ,
  29. Five Ways to Include D/Deaf Users in Your Designs · · , ,
  30. ARIA in HTML · · , , ,
  31. The Dilemma of Naming Font Size Variables · · , , ,
  32. How to Use “Promise.all()” · · ,
  33. How Does Node.js Load Its Built-In/Native Modules? · · , ,
  34. Accessibility and Inclusivity: Distinctions in Experience Design · · , , ,
  35. Using HSL Colors in CSS · · , ,
  36. Feature Checklists Are Not Enough: How to Avoid Making Bad Software · · , , ,
  37. Basics of JavaScript Test Driven Development (TDD) with Jest · · , , ,
  38. Where Did This Interaction Come From?—A Brief History of Interaction Design · · , , ,
  39. “export default thing” Is Different to “export { thing as default }” · · ,
  40. Evaluating Color and Contrast—How Hard Can It Be? · · , , ,
  41. Towards Richer Colors on the Web · · , ,
  42. It’s a (Front-End Testing) Trap! Six Common Testing Pitfalls and How to Solve Them · · , ,
  43. When a Click Is Not Just a Click · · ,
  44. The State of Web Workers in 2021 · · , ,
  45. The Internet Is Rotting · · , ,
  46. Encoding Data for POST Requests · · , ,
  47. Detecting Hover-Capable Devices · · ,
  48. 10 Figma Best Practices to 10x Your Workflow · · , , ,
  49. Tip: Don’t Preprocess What You Can Design Token · · , ,
  50. The Most Popular Design Thinking Strategy Is BS · · ,
  51. Screen Readers: Hearing the Unseen · · , ,
  52. Good News: Google No Longer Requires Publishers to Use the AMP Format · · , , , ,
  53. CSS Frameworks in Vogue, But Don’t Forget Style Fundamentals · · , , , ,
  54. My Journey from a Novice to a Front-End Engineer · · ,
  55. I Regret Being a Hipster in Tech · · ,
  56. All You Need Is 5 Fonts · · , ,
  57. Using CSS to Enforce Accessibility · · , ,
  58. JavaScript Frameworks and the Lost Art of HTML · · , , ,
  59. Container Queries and the Future of CSS · · , ,
  60. Building a Responsive Layout with CSS Grid and Container Queries · · , , ,
  61. The True Cost of a Redesign · · , ,
  62. Accessibility in React · · , ,
  63. What’s New in ES2021 · · , ,
  64. Sorting Colors in JavaScript · · , , ,
  65. Demystifying Styled Components · · , , ,
  66. Custom Scrollbars in CSS · · ,
  67. Craft Good Questions for Usability Tests · · , ,
  68. Organize Your CSS Declarations Alphabetically · · , ,
  69. Updating a 25-Year-Old Website · · , ,
  70. Optical Size, the Hidden Superpower of Variable Fonts · · , ,
  71. OMG, SVG Favicons FTW! · · , , ,
  72. How Apple Changed the Way We Navigate—Forever · · ,
  73. Shut Up, Old Man… · · ,
  74. npm Global Audit · · , , ,
  75. A Complete Guide to Accessibility Tooling · · , ,
  76. Everyday Accessibility · · , ,
  77. Regular Expressions (RegEx) in Google Search Console · · , ,
  78. Provided “As Is,” Without Warranty of Any Kind · · , , ,
  79. When CSS Isn’t Enough: JavaScript Requirements for Accessible Components · · , , ,
  80. The Art of Frontend Engineering · · ,
  81. Serving Sharp Images to High Density Screens · · , ,
  82. React Cheat Sheet (Updated June 2021) · · , ,
  83. Half the Size of Images by Optimising for High Density Displays · · , , ,
  84. How to Center Anything in CSS Using Flexbox and Grid · · , ,
  85. Adding Shadows to SVG Icons with CSS and SVG Filters · · , , ,
  86. Let’s Learn About Aspect Ratio in CSS · · ,
  87. Why Validate? · · , , ,
  88. Ready-Made Counter Styles · · , ,
  89. Micro-Expressions in User Testing: When Users Reveal Their True Emotional States · · , ,
  90. Meet :has, a Native CSS Parent Selector (And More) · · ,
  91. Building a Color Scheme · · , ,
  92. An Interactive Guide to CSS Transitions · · , ,
  93. Reasons Why Bugs Might Feel “Impossible” · · ,
  94. Component-Specific Design Tokens · · , ,
  95. Using AVIF to Compress Images on Your Site · · , , ,
  96. What Can the HTTP Archive Tell Us About Largest Contentful Paint? · · ,
  97. An Accessibility Strategy · · ,
  98. 10 Utility Functions for Working with Objects in JavaScript · · ,
  99. Open Source Insights · · , , , ,
  100. CSS System Colors · · , ,