Frontend Dogma

News and Views in Frontend Development (7)

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. Use the “i” Element, and Use It Appropriately (tweet) · · ,
  2. Tip: Don’t Preprocess What You Can Design Token (tweet) · · ,
  3. The Most Popular Design Thinking Strategy Is BS (tweet) · · ,
  4. Screen Readers: Hearing the Unseen (tweet) · · , ,
  5. Resource Inlining in JavaScript Frameworks (tweet) · · , , ,
  6. Good News: Google No Longer Requires Publishers to Use the AMP Format (tweet) · · , , ,
  7. CSS Frameworks in Vogue, But Don’t Forget Style Fundamentals (tweet) · · , , ,
  8. My Journey from a Novice to a Front-End Engineer (tweet) · ·
  9. I Regret Being a Hipster in Tech (tweet) · ·
  10. timefind (tweet) · · ,
  11. All You Need Is 5 Fonts (tweet) · · , ,
  12. Using CSS to Enforce Accessibility (tweet) · · ,
  13. JavaScript Frameworks and the Lost Art of HTML (tweet) · · , ,
  14. Debugging JavaScript and Front-End (tweet) · · , ,
  15. Container Queries and the Future of CSS (tweet) · · , ,
  16. Building a Responsive Layout with CSS Grid and Container Queries (tweet) · · , , , ,
  17. The True Cost of a Redesign (tweet) · · ,
  18. React Architecture: How to Structure and Organize a React Application (tweet) · · ,
  19. No Code Reviews by Default (tweet) · ·
  20. Accessibility in React (tweet) · · ,
  21. What’s New in ES2021 (tweet) · · ,
  22. Sorting Colors in JavaScript (tweet) · · , ,
  23. RenderingNG—Ready for the Next Generation of Web Content (tweet) · · , ,
  24. Demystifying Styled Components (tweet) · · , ,
  25. Custom Scrollbars in CSS (tweet) · ·
  26. Craft Good Questions for Usability Tests (tweet) · · ,
  27. A Framework for Building Open Graph Images (tweet) · · ,
  28. Blogged Answers: The Evolution of Redux Testing Approaches (tweet) · · , , ,
  29. Organize Your CSS Declarations Alphabetically (tweet) · · ,
  30. Keeping It Consistent: Design Tokens (tweet) · · , ,
  31. How to Use Dynamic Imports in JavaScript (tweet) · ·
  32. Updating a 25-Year-Old Website (tweet) · · ,
  33. Optical Size, the Hidden Superpower of Variable Fonts (tweet) · · , ,
  34. OMG, SVG Favicons FTW! (tweet) · · , , ,
  35. How Apple Changed the Way We Navigate—Forever (tweet) · ·
  36. Shut Up, Old Man… (tweet) · ·
  37. npm Global Audit (tweet) · · , , , ,
  38. A Complete Guide to Accessibility Tooling (tweet) · · , ,
  39. Understanding and Preventing Common Security Vulnerabilities (tweet) · ·
  40. Everyday Accessibility (tweet) · · ,
  41. Regular Expressions (RegEx) in Google Search Console (tweet) · · , ,
  42. Provided “As Is,” Without Warranty of Any Kind (tweet) · · , ,
  43. When CSS Isn’t Enough: JavaScript Requirements for Accessible Components (tweet) · · , ,
  44. The Art of Frontend Engineering (tweet) · ·
  45. Serving Sharp Images to High Density Screens (tweet) · · ,
  46. React Cheat Sheet (Updated June 2021) (tweet) · · ,
  47. Half the Size of Images by Optimising for High Density Displays (tweet) · · , ,
  48. How to Center Anything in CSS Using Flexbox and Grid (tweet) · · ,
  49. Adding Shadows to SVG Icons with CSS and SVG Filters (tweet) · · , ,
  50. The Ultimate CSS Flexbox Cheat Sheet with Examples (tweet) · · , ,
  51. Let’s Learn About Aspect Ratio in CSS (tweet) · ·
  52. Why Validate? (tweet) · · , , ,
  53. Ready-Made Counter Styles (tweet) · · ,
  54. Micro-Expressions in User Testing: When Users Reveal Their True Emotional States (tweet) · · ,
  55. Meet :has, a Native CSS Parent Selector (And More) (tweet) · ·
  56. Building a Color Scheme (tweet) · · , ,
  57. An Interactive Guide to CSS Transitions (tweet) · · , ,
  58. Reasons Why Bugs Might Feel “Impossible” (tweet) · ·
  59. Improving the UX of Your Design System (tweet) · · ,
  60. Component-Specific Design Tokens (tweet) · · ,
  61. Vue.js vs. React—Not Your Usual Comparison (tweet) · · , , ,
  62. Using AVIF to Compress Images on Your Site (tweet) · · , , ,
  63. What Can the HTTP Archive Tell Us About Largest Contentful Paint? (tweet) · ·
  64. An Accessibility Strategy (tweet) · · ,
  65. Accessible Overflow (tweet) · · , ,
  66. 10 Utility Functions for Working with Objects in JavaScript (tweet) · ·
  67. Open Source Insights (tweet) · · , , , ,
  68. CSS System Colors (tweet) · · ,
  69. How To Fix Cumulative Layout Shift (CLS) Issues (tweet) · ·
  70. CSS for Web Vitals (tweet) · · , ,
  71. The Hidden World of “aria-hidden” (tweet) · · ,
  72. Embracing Design Constraints (tweet) · ·
  73. Thoughts for the Aging Web Developer (tweet) · ·
  74. Why Accessibility Overlays Hurt More Than Help (tweet) · ·
  75. Disabling a Link (tweet) · · ,
  76. What Makes a Great Component Library? (tweet) · · , ,
  77. How to Build an Image Comparison Slider (tweet) · · ,
  78. Writing Better Regular Expressions in PHP (tweet) · · , ,
  79. A Thorough Analysis of CSS-in-JS (tweet) · ·
  80. Accessible Web Forms (tweet) · · , ,
  81. Your Design System Is Actually a Product—Treat It Like One (tweet) · ·
  82. CSS Container Queries: Use Cases and Migration Strategies (tweet) · · ,
  83. Access Guide (tweet) · · , ,
  84. Svelte for the Experienced React Dev (tweet) · · ,
  85. Useful and Useless Code Comments (tweet) · · ,
  86. The New Responsive: Web Design in a Component-Driven World (tweet) · · , ,
  87. How to Name Your Design System (tweet) · · ,
  88. Don’t Overabstract Your Components (tweet) · · , ,
  89. We Need to Talk About WCAG (tweet) · · ,
  90. The Button Cheat Sheet (tweet) · · ,
  91. Container Queries in Web Components (tweet) · · ,
  92. Making Disabled Buttons More Inclusive (tweet) · · ,
  93. Building a React Design System for Adoption and Scale (tweet) · · ,
  94. A Complete Guide to Grid (tweet) · · , ,
  95. Web Application Development: The Ultimate Guide (2021) (tweet) · · , ,
  96. Rethinking Component Libraries (tweet) · · ,
  97. Custom Attributes Are Fast Good and Cheap (tweet) · · ,
  98. Overreliance on Overlays Is Counter to Enculturation of Accessibility (tweet) · · ,
  99. Auditing Design Systems for Accessibility (tweet) · · , , ,
  100. Understanding Design Systems—Designing Component APIs (tweet) · · , ,
  101. Better Onboarding: How to Prevent Codebase Overwhelm (tweet) · · ,
  102. Sometimes, a Billion Laughs Aren’t So Funny—Improving CSS Variables in WebKit (tweet) · · ,
  103. A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors (tweet) · · , , ,
  104. 136 Facts Every Web Dev Should Know Before They Burn Out and Turn to Landscape Painting or Nude Modelling (tweet) · · ,
  105. Intrinsic Typography is the Future of Styling Text on the Web (tweet) · · ,
  106. Five Reasons Your First Design System Will Fail (tweet) · · ,
  107. CSS Hell (tweet) · · ,
  108. Content-Aware Image Resizing in JavaScript (tweet) · · ,
  109. The 5 Most Popular Front-End Frameworks Compared (tweet) · · , , , , , ,
  110. Fifteen Design Trends from an Accessibility Perspective (tweet) · · , ,
  111. Web Developer’s Guide to AVIF Images (tweet) · · , ,
  112. Variable Scope, Lexical Scope, and Code Blocks in JavaScript (tweet) · ·
  113. Top 7 Facts About Web Content Accessibility Guidelines WCAG 2.2 You Must Know (tweet) · · ,
  114. Understanding Logical Focus Order (tweet) · · ,
  115. Comparing the New Generation of Build Tools (tweet) · · , ,
  116. Using Design Tokens to Accelerate Design Systems (tweet) · · , ,
  117. Code in Quarantine (tweet) · · ,
  118. How to Build a Developer Blog with Gatsby and MDX (tweet) · · ,
  119. 5 Things I’m Thinking About When I Check a Pull Request for Accessibility (tweet) · · ,
  120. Primitive Values, Objects, and References in JavaScript Made Simple (tweet) · ·
  121. Not Your Typical Horizontal Rules (tweet) · ·
  122. Human-Readable JavaScript: A Tale of Two Experts (tweet) · · ,
  123. Why Skip-Links Are Important for Accessibility (tweet) · · ,
  124. React vs. Vue in 2021: Best JavaScript Framework (tweet) · · , , ,
  125. “prefers-reduced-motion”: Taking a No-Motion-First Approach to Animations (tweet) · · , ,
  126. The 5-Hour CDN (tweet) · · , ,
  127. Comparing Svelte and React (tweet) · · , ,
  128. A Comprehensive Guide to JavaScript Design Patterns (tweet) · · , ,
  129. You Want Enabling CSS Selectors, Not Disabling Ones (tweet) · · ,
  130. JavaScript: What Is the Meaning of “this”? (tweet) · ·
  131. Beyond “console.log()”—Level Up Your Debugging Skills (tweet) · · ,
  132. Enforce, Enable, and Empower (tweet) · · ,
  133. Automating the Accessibility Tests of Your Source Code with GitHub Actions (tweet) · · , ,
  134. Hello World (tweet) · ·
  135. Managing CSS Colors Systems with a Single Source of Truth (tweet) · · , ,
  136. Understanding Z-Index in CSS (tweet) · ·
  137. Seven Myths About Alt Text (tweet) · ·
  138. One Figma Component—3,360 Variants (tweet) · · ,
  139. Uniwidth Typefaces for Interface Design (tweet) · · ,
  140. Building a Consistent Platform (tweet) · ·
  141. In Critical Defense of Frontend Development (tweet) · · ,
  142. The Definitive Guide to Feature Management (tweet) · · , , ,
  143. HTML: The 16 Content Categories and Their Elements (tweet) · · ,
  144. How Does CSS Work? (tweet) · ·
  145. HTML and CSS Techniques to Reduce Your JavaScript (tweet) · · , , ,
  146. Ethical Design Guide (tweet) · · , ,
  147. Ignore AMP (tweet) · · ,
  148. Why You Should Self-Host Google Fonts in 2021 (tweet) · · ,
  149. Page Weight (tweet) · · ,
  150. JavaScript (tweet) · · ,
  151. TLS and mTLS Demystified (tweet) · · , ,
  152. CSS (tweet) · · ,
  153. Accessibility (tweet) · · ,
  154. Alt vs. Figcaption (tweet) · · , ,
  155. Leveraging System Fonts on the Web (tweet) · ·
  156. The Raven Technique: One Step Closer to Container Queries (tweet) · · , ,
  157. Markup (tweet) · · ,
  158. Chasing the Pixel-Perfect Dream (tweet) · · , ,
  159. New Google Quality Rater Guidelines, Update Adds Emphasis on Needs Met (tweet) · · , ,
  160. An Opinionated Guide to Accessibility Testing (tweet) · · , ,
  161. How to Find the Cause of Horizontal Scrollbars (tweet) · · , ,
  162. CSS Variables 101 (tweet) · ·
  163. Drawing the Invisible: React Explained in Five Visual Metaphors (tweet) · · ,
  164. Custom Properties: Questioning “:root” (tweet) · · , ,
  165. Generate a Sitemap for Your Eleventy Website (tweet) · · , ,
  166. Use Advanced Typography with Local Fonts (tweet) · · , ,
  167. Loading Third-Party JavaScript (tweet) · · ,
  168. The Anti-Reset (to Reset to User Agent Styles) (tweet) · · ,
  169. Effective Code Browsing (tweet) · · , ,
  170. Islands Architecture (tweet) · · , ,
  171. Vue vs. React in 2021: Which Framework to Choose and When (tweet) · · , , ,
  172. Updating React at Etsy (tweet) · · , ,
  173. JavaScript to Know for React (tweet) · · ,
  174. The Ultimate Guide with All the Secrets You Will Need to Know to Become a Fabulous Design Unicorn (tweet) · · , ,
  175. Platform Adjacency Theory (tweet) · · , ,
  176. Javascript RORO Pattern (tweet) · ·
  177. Dark Patterns in UX (tweet) · · ,
  178. 30 Seconds of Code (tweet) · · , , ,
  179. Micro-Frontends in Context (tweet) · · ,
  180. How to Reevaluate Your Frontend Architecture (tweet) · ·
  181. Ask an Expert: Why Is CSS… the Way It Is? (tweet) · · ,
  182. A User’s Guide to CSS Variables (tweet) · · , ,
  183. What Every JavaScript Developer Should Know About Unicode (tweet) · · ,
  184. Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior (tweet) · · , ,
  185. What is mTLS and How Does It Work? (tweet) · ·
  186. The 4 Pillars of Good Embed Code (tweet) · · , ,
  187. The Frameworks Paradox (tweet) · · ,
  188. On the Responsibility That Comes with Good JavaScript Support (tweet) · · , ,
  189. Mutual TLS: Stuff You Should Know (tweet) · · , ,
  190. 10 Behavior Patterns for UX Design (tweet) · ·
  191. The Perils of Rehydration (tweet) · · ,
  192. Why Are We Talking About CSS4? (tweet) · · ,
  193. Simple Systems Have Less Downtime (tweet) · ·
  194. The Economics of JavaScript Web Apps (tweet) · · , ,
  195. Understanding Map and Set in JavaScript (tweet) · ·
  196. Design System UI Is More Expensive Than a Product Team’s UI (tweet) · · , ,
  197. Decision Strategies for a Micro Frontends Architecture (tweet) · · ,