Frontend Dogma

News and Views in Frontend Development (6)

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

  1. Tip: Don’t Preprocess What You Can Design Token · · ,
  2. The Most Popular Design Thinking Strategy Is BS · ·
  3. Screen Readers: Hearing the Unseen · · ,
  4. Resource Inlining in JavaScript Frameworks · · , , ,
  5. Good News: Google No Longer Requires Publishers to Use the AMP Format · · , ,
  6. CSS Frameworks in Vogue, But Don’t Forget Style Fundamentals · · , , ,
  7. My Journey from a Novice to a Front-End Engineer · ·
  8. I Regret Being a Hipster in Tech · ·
  9. timefind · · ,
  10. All You Need Is 5 Fonts · · , ,
  11. Using CSS to Enforce Accessibility · · ,
  12. JavaScript Frameworks and the Lost Art of HTML · · , ,
  13. Container Queries and the Future of CSS · · , ,
  14. Building a Responsive Layout with CSS Grid and Container Queries · · , , , ,
  15. The True Cost of a Redesign · · ,
  16. React Architecture: How to Structure and Organize a React Application · · ,
  17. Accessibility in React · · ,
  18. What’s New in ES2021 · · ,
  19. Sorting Colors in JavaScript · · , ,
  20. RenderingNG—Ready for the Next Generation of Web Content · · , ,
  21. Demystifying Styled Components · · , ,
  22. Custom Scrollbars in CSS · ·
  23. Craft Good Questions for Usability Tests · · ,
  24. A Framework for Building Open Graph Images · · ,
  25. Organize Your CSS Declarations Alphabetically · · ,
  26. How to Use Dynamic Imports in JavaScript · ·
  27. Updating a 25-Year-Old Website · · ,
  28. Optical Size, the Hidden Superpower of Variable Fonts · · , ,
  29. OMG, SVG Favicons FTW! · · , ,
  30. How Apple Changed the Way We Navigate—Forever · ·
  31. Shut Up, Old Man… · ·
  32. npm Global Audit · · , , , ,
  33. A Complete Guide to Accessibility Tooling · · ,
  34. Understanding and Preventing Common Security Vulnerabilities · ·
  35. Everyday Accessibility · · ,
  36. Regular Expressions (RegEx) in Google Search Console · · ,
  37. Provided “As Is,” Without Warranty of Any Kind · · , ,
  38. When CSS Isn’t Enough: JavaScript Requirements for Accessible Components · · , ,
  39. The Art of Frontend Engineering · ·
  40. Serving Sharp Images to High Density Screens · · ,
  41. React Cheat Sheet (Updated June 2021) · · ,
  42. Half the Size of Images by Optimising for High Density Displays · · , ,
  43. How to Center Anything in CSS Using Flexbox and Grid · · ,
  44. Adding Shadows to SVG Icons with CSS and SVG Filters · · , ,
  45. The Ultimate CSS Flexbox Cheat Sheet with Examples · · ,
  46. Let’s Learn About Aspect Ratio in CSS · ·
  47. Why Validate? · · , , ,
  48. Ready-Made Counter Styles · · ,
  49. Micro-Expressions in User Testing: When Users Reveal Their True Emotional States · · ,
  50. Meet :has, a Native CSS Parent Selector (And More) · ·
  51. Building a Color Scheme · · ,
  52. An Interactive Guide to CSS Transitions · · ,
  53. Reasons Why Bugs Might Feel “Impossible” · ·
  54. Improving the UX of Your Design System · · ,
  55. Component-Specific Design Tokens · · ,
  56. Vue.js vs. React—Not Your Usual Comparison · · , , ,
  57. Using AVIF to Compress Images on Your Site · · , , ,
  58. What Can the HTTP Archive Tell Us About Largest Contentful Paint? · ·
  59. An Accessibility Strategy · ·
  60. Accessible Overflow · · , ,
  61. 10 Utility Functions for Working with Objects in JavaScript · ·
  62. Open Source Insights · · , , , ,
  63. CSS System Colors · · ,
  64. How To Fix Cumulative Layout Shift (CLS) Issues · ·
  65. CSS for Web Vitals · · , ,
  66. The Hidden World of “aria-hidden” · · ,
  67. Embracing Design Constraints · ·
  68. Thoughts for the Aging Web Developer · ·
  69. Why Accessibility Overlays Hurt More Than Help · ·
  70. Disabling a Link · · ,
  71. What Makes a Great Component Library? · · , ,
  72. How to Build an Image Comparison Slider · · ,
  73. Writing Better Regular Expressions in PHP · · , ,
  74. A Thorough Analysis of CSS-in-JS · ·
  75. Your Design System Is Actually a Product—Treat It Like One · ·
  76. CSS Container Queries: Use Cases and Migration Strategies · · ,
  77. Access Guide · · ,
  78. Svelte for the Experienced React Dev · · ,
  79. Useful and Useless Code Comments · · ,
  80. The New Responsive: Web Design in a Component-Driven World · · , ,
  81. How to Name Your Design System · · ,
  82. Don’t Overabstract Your Components · · , ,
  83. We Need to Talk About WCAG · · ,
  84. The Button Cheat Sheet · · ,
  85. Container Queries in Web Components · · ,
  86. Making Disabled Buttons More Inclusive · · ,
  87. Building a React Design System for Adoption and Scale · · ,
  88. A Complete Guide to Grid · · ,
  89. Web Application Development: The Ultimate Guide (2021) · ·
  90. Custom Attributes Are Fast Good and Cheap · · ,
  91. Overreliance on Overlays Is Counter to Enculturation of Accessibility · · ,
  92. Auditing Design Systems for Accessibility · · , , ,
  93. Understanding Design Systems—Designing Component APIs · · , ,
  94. Better Onboarding: How to Prevent Codebase Overwhelm · · ,
  95. Sometimes, a Billion Laughs Aren’t So Funny—Improving CSS Variables in WebKit · · ,
  96. A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors · · ,
  97. Intrinsic Typography is the Future of Styling Text on the Web · · ,
  98. Five Reasons Your First Design System Will Fail · · ,
  99. CSS Hell · · ,
  100. Content-Aware Image Resizing in JavaScript · · ,