Frontend Dogma

News and Tools for Frontend Development (24)

(Stay up-to-date on all topics by RSS feed or on Mastodon.)

  1. The Performance Effects of Too Much Lazy-Loading · · , ,
  2. Angular Is Costing Companies Billions · ·
  3. The 3-Second Frontend Developer Test · · , , ,
  4. What’s the Difference Between the Alignment Values of “start”, “flex-start”, and “self-start”? · ·
  5. The Ultimate Guide to Browser-Side Storage · · , , ,
  6. Build Complex CSS Transitions Using Custom Properties and “cubic-bezier()” · · , , ,
  7. I’m Changing How I Review Code · · ,
  8. The Most Important Lessons I’ve Learned from Senior Software Engineers · · ,
  9. An Unreasonably Long Introduction to ARIA (With Example Implementation) · · , , , ,
  10. Detecting Media Query Support in CSS and JavaScript · · , , ,
  11. How to Migrate from jQuery to Next.js · · , , ,
  12. Gridless Design · · , ,
  13. Refactoring CSS: Introduction · · , , ,
  14. TypeScript Interfaces: A Quick Guide to Help You Get Started · · ,
  15. What People Should Know Before Writing Articles or Creating Products About Accessibility · · ,
  16. Freelance React Developer Checklist · · ,
  17. Image Descriptions: A Human Technique That Robots Can’t Grasp · · ,
  18. How to Convert Arrays to Human-Readable Lists in JavaScript · · , , ,
  19. Making a Strong Case for Accessibility · ·
  20. The Document Outline · · ,
  21. Creating Accessible CSS Art · · , ,
  22. Performance Design: The Illusion of Speed · · ,
  23. The Large, Small, and Dynamic Viewports · · , ,
  24. The Numeric Colour Palettes in Modern Web Frameworks Explained · · , ,
  25. Five Ways to Include D/Deaf Users in Your Designs · · ,
  26. TypeScript and Native ESM on Node.js · · , ,
  27. ARIA in HTML · · , ,
  28. Accessibility and Inclusivity: Distinctions in Experience Design · · , ,
  29. How Does Node.js Load Its Built-In/Native Modules? · · , ,
  30. The Dilemma of Naming Font Size Variables · · , ,
  31. How to Use “Promise.all()” · · , ,
  32. Using HSL Colors in CSS · · ,
  33. Where Did This Interaction Come From?—A Brief History of Interaction Design · · ,
  34. Feature Checklists Are Not Enough: How to Avoid Making Bad Software · · , , ,
  35. Basics of JavaScript Test Driven Development (TDD) With Jest · · , , ,
  36. “export default thing” Is Different to “export { thing as default }” · ·
  37. Evaluating Color and Contrast—How Hard Can It Be? · · , ,
  38. Short Note on Skip Links With Sticky Headers · · , ,
  39. Accessibility and SEO · · , ,
  40. It’s a (Front-End Testing) Trap! Six Common Testing Pitfalls and How to Solve Them · · ,
  41. Towards Richer Colors on the Web · · ,
  42. 10 Figma Best Practices to 10× Your Workflow · · , , ,
  43. Detecting Hover-Capable Devices · ·
  44. The Internet Is Rotting · · ,
  45. When a Click Is Not Just a Click · ·
  46. How We Built React Components for Any Front End · · , ,
  47. 9 Tips to Help You Ace a Whiteboard Interview · · , ,
  48. Encoding Data for POST Requests · · , ,
  49. The State of Web Workers in 2021 · · ,
  50. Colorblind Accessibility Manifesto · · , , ,
  51. Use the “i” Element, and Use It Appropriately · · ,
  52. CSS Frameworks in Vogue, but Don’t Forget Style Fundamentals · · , , ,
  53. Good News: Google No Longer Requires Publishers to Use the AMP Format · · , ,
  54. Resource Inlining in JavaScript Frameworks · · , , ,
  55. The Most Popular Design Thinking Strategy Is BS · · ,
  56. Screen Readers: Hearing the Unseen · · , , ,
  57. Tip: Don’t Preprocess What You Can Design Token · · ,
  58. My Journey from a Novice to a Front-End Engineer · ·
  59. I Regret Being a Hipster in Tech · ·
  60. timefind · · , ,
  61. All You Need Is 5 Fonts · · , ,
  62. Container Queries and the Future of CSS · · , ,
  63. Debugging JavaScript and Front-End · · , ,
  64. JavaScript Frameworks and the Lost Art of HTML · · , ,
  65. Using CSS to Enforce Accessibility · · ,
  66. Building a Responsive Layout With CSS Grid and Container Queries · · , , , ,
  67. Making the Web—Faster · · , , ,
  68. No Code Reviews by Default · ·
  69. Accessibility in React · · ,
  70. React Architecture: How to Structure and Organize a React Application · · , ,
  71. The True Cost of a Redesign · · ,
  72. Craft Good Questions for Usability Tests · · ,
  73. Custom Scrollbars in CSS · ·
  74. Demystifying Styled Components · · , ,
  75. Sorting Colors in JavaScript · · , ,
  76. What’s New in ES2021 · · , ,
  77. A Framework for Building Open Graph Images · · ,
  78. RenderingNG—Ready for the Next Generation of Web Content · · , , , ,
  79. Keeping It Consistent: Design Tokens · · , ,
  80. Organize Your CSS Declarations Alphabetically · · ,
  81. Blogged Answers: The Evolution of Redux Testing Approaches · · , , ,
  82. How to Use Dynamic Imports in JavaScript · · ,
  83. Updating a 25-Year-Old Website · ·
  84. How Apple Changed the Way We Navigate—Forever · · , ,
  85. OMG, SVG Favicons FTW! · · , , ,
  86. Optical Size, the Hidden Superpower of Variable Fonts · · , ,
  87. A Complete Guide to Accessibility Tooling · · , ,
  88. NPM Global Audit · · , , , ,
  89. Shut Up, Old Man… · ·
  90. Understanding and Preventing Common Security Vulnerabilities · ·
  91. Everyday Accessibility · ·
  92. Dart Basics · · , ,
  93. When CSS Isn’t Enough: JavaScript Requirements for Accessible Components · · , ,
  94. Regular Expressions (RegEx) in Google Search Console · · , ,
  95. Provided “As Is,” Without Warranty of Any Kind · · , ,
  96. Half the Size of Images by Optimising for High Density Displays · · , ,
  97. Serving Sharp Images to High Density Screens · · ,
  98. The Art of Frontend Engineering · ·
  99. Adding Shadows to SVG Icons With CSS and SVG Filters · · , , ,
  100. React Cheat Sheet (Updated June 2021) · · ,
  101. How to Center Anything in CSS Using Flexbox and Grid · · , ,
  102. Let’s Learn About Aspect Ratio in CSS · ·
  103. The Ultimate CSS Flexbox Cheat Sheet With Examples · · , , ,
  104. An Interactive Guide to CSS Transitions · · , ,
  105. Micro-Expressions in User Testing: When Users Reveal Their True Emotional States · · ,
  106. Ready-Made Counter Styles · · ,
  107. Why Validate? · · , , , ,
  108. Meet :has, a Native CSS Parent Selector (and More) · ·
  109. Building a Color Scheme · · , , ,
  110. Improving the UX of Your Design System · · , ,
  111. Reasons Why Bugs Might Feel “Impossible” · · ,
  112. Component-Specific Design Tokens · · ,
  113. Accessible Overflow · · , ,
  114. An Accessibility Strategy · · ,
  115. What Can the HTTP Archive Tell Us About Largest Contentful Paint? · ·
  116. Using AVIF to Compress Images on Your Site · · , , ,
  117. Vue.js vs. React—Not Your Usual Comparison · · , , ,
  118. 10 Utility Functions for Working With Objects in JavaScript · · , ,
  119. A Little Book of Accessibility · ·
  120. JavaScript: Debouncing and Throttling · · , ,
  121. Best Practices for Fonts · · , ,
  122. CSS System Colors · · ,
  123. Open Source Insights · · , , , ,
  124. Getting Started With a Kanban Board: 6 Tips for Productive Work · · , , , ,
  125. CSS for Web Vitals · · , ,
  126. How to Fix Cumulative Layout Shift (CLS) Issues · · , ,
  127. Thoughts for the Aging Web Developer · ·
  128. Embracing Design Constraints · ·
  129. The Hidden World of “aria-hidden” · · ,
  130. Why Accessibility Overlays Hurt More Than Help · · ,
  131. Disabling a Link · · , ,
  132. What Makes a Great Component Library? · · ,
  133. How to Build an Image Comparison Slider · · , ,
  134. Accessible Web Forms · · , ,
  135. A Thorough Analysis of CSS-in-JS · · , ,
  136. History of Web Browser Engines from 1990 Until Today · · , ,
  137. Writing Better Regular Expressions in PHP · · , ,
  138. 25 Years of CSS · · ,
  139. Your Design System Is Actually a Product—Treat It Like One · ·
  140. Access Guide · · , ,
  141. CSS Container Queries: Use Cases and Migration Strategies · · ,
  142. Svelte for the Experienced React Dev · · ,
  143. A11y Audit Bookmarklets · · , , ,
  144. Professional Development Is a Choice · · ,
  145. Don’t Overabstract Your Components · · , ,
  146. Dark Patterns Tip Line · · , ,
  147. The New Responsive: Web Design in a Component-Driven World · · , ,
  148. Useful and Useless Code Comments · · ,
  149. How to Name Your Design System · · , ,
  150. Learn CSS · · ,
  151. We Need to Talk About WCAG · · ,
  152. 2021: 98% of the Top 100 U.S. Websites Use Invalid HTML · · , , ,
  153. The Button Cheat Sheet · · ,
  154. Theoretical Foundations for Server-Side Rendering and Static-Rendering · · , ,
  155. Container Queries in Web Components · · , ,
  156. Create Scripts in JavaScript With zx · · , ,
  157. Upgrade Your HTML III · · , , , ,
  158. A Complete Guide to Grid · · , ,
  159. Building a React Design System for Adoption and Scale · · ,
  160. Making Disabled Buttons More Inclusive · · ,
  161. A Primer on CSS Container Queries · · ,
  162. Everything You Need to Know About A/B Testing · · ,
  163. Rethinking Component Libraries · ·
  164. Web Application Development: The Ultimate Guide (2021) · · ,
  165. Introduction to Using Dart in Flutter · · , ,
  166. Meet zx: A Better Way to Write Scripts With Node.js · · ,
  167. Introduction to HTTP Cookies · · , ,
  168. Custom Attributes Are Fast Good and Cheap · · ,
  169. How to Satisfy User Intent When Considering Search vs. Browse · · , , , ,
  170. Overreliance on Overlays Is Counter to Enculturation of Accessibility · · ,
  171. Is Vendor Prefixing Dead? · · ,
  172. Auditing Design Systems for Accessibility · · , , ,
  173. Using Hotwire to Build a Search Form With Minimal JavaScript · · , , ,
  174. Understanding Design Systems—Designing Component APIs · · , ,
  175. Designing Adaptive Components, Beyond Responsive Breakpoints · · , ,
  176. Better Onboarding: How to Prevent Codebase Overwhelm · · ,
  177. Level Up Your Team Workflows With These Kanban Board Best Practices · · , ,
  178. Sometimes, a Billion Laughs Aren’t So Funny—Improving CSS Variables in WebKit · · , , ,
  179. A Guide to Newly Supported, Modern CSS Pseudo-Class Selectors · · , , ,
  180. 21 Best Practices for a Clean React Project · · , ,
  181. 136 Facts Every Web Dev Should Know Before They Burn Out and Turn to Landscape Painting or Nude Modelling · ·
  182. Intrinsic Typography Is the Future of Styling Text on the Web · · ,
  183. Five Reasons Your First Design System Will Fail · ·
  184. Content-Aware Image Resizing in JavaScript · · ,
  185. CSS Hell · · ,
  186. Fifteen Design Trends from an Accessibility Perspective · · , ,
  187. The 5 Most Popular Front-End Frameworks Compared · · , , , , , ,
  188. Top 7 Facts About Web Content Accessibility Guidelines WCAG 2.2 You Must Know · · ,
  189. Web Developer’s Guide to AVIF Images · · , ,
  190. Variable Scope, Lexical Scope, and Code Blocks in JavaScript · · ,
  191. Understanding Logical Focus Order · · , ,
  192. Comparing the New Generation of Build Tools · · , , ,
  193. Write a Plugin for Tailwind CSS · · ,
  194. Getting Started With Preact · · ,
  195. Building an Accessibility Library · · ,
  196. Defining a Strategy for Accessibility · · ,
  197. Code in Quarantine · · ,
  198. Using Design Tokens to Accelerate Design Systems · · , ,
  199. Sentence Case versus Title Case · · , ,
  200. 5 Things I’m Thinking About When I Check a Pull Request for Accessibility · · ,
  201. How to Build a Developer Blog With Gatsby and MDX · · , ,
  202. Primitive Values, Objects, and References in JavaScript Made Simple · · ,
  203. Why Should We Care About Developer Experience (DX) · ·
  204. Human-Readable JavaScript: A Tale of Two Experts · · ,
  205. Not Your Typical Horizontal Rules · · ,
  206. How to Build a Great Developer Experience · · ,
  207. Why Skip-Links Are Important for Accessibility · · ,
  208. Taming Blend Modes: “difference” and “exclusion” · · ,
  209. Git Maintenance · · ,
  210. React vs. Vue in 2021: Best JavaScript Framework · · , , ,
  211. “prefers-reduced-motion”: Taking a No-Motion-First Approach to Animations · · , ,
  212. Why Your Website Should Work Without JavaScript · · , , ,
  213. The 5-Hour CDN · · ,
  214. Minimalism Is Boring · · ,
  215. Comparing Svelte and React · · , ,
  216. A Comprehensive Guide to JavaScript Design Patterns · · , ,
  217. JavaScript: What Is the Meaning of “this”? · ·
  218. You Want Enabling CSS Selectors, Not Disabling Ones · · ,
  219. Beyond “console.log()”—Level Up Your Debugging Skills · · , ,
  220. Enforce, Enable, and Empower · ·
  221. Semantic Versioning Will Not Save You · ·
  222. Introduction to ARIA Live Regions · · , , ,
  223. Automating the Accessibility Tests of Your Source Code With GitHub Actions · · , , ,
  224. Hello World · ·
  225. Managing CSS Colors Systems With a Single Source of Truth · · , ,
  226. Front-of-the-Front-End and Back-of-the-Front-End Web Development · ·
  227. Understanding Z-Index in CSS · ·
  228. How to Test the Accessibility of Your Components With Storybook · · , , ,
  229. The Significance of Building Offline-First Apps · · ,
  230. The Never-Ending Job of Selling Design Systems · ·
  231. Seven Myths About Alt Text · · ,
  232. 10 Principles of the Best Landing Page Design · · , ,
  233. Revisiting Dark Patterns With the HTML “dialog” Tag · · , ,
  234. 5 Tips for Your Next Promotion or Salary Raise · ·
  235. One Figma Component—3,360 Variants · · ,
  236. Uniwidth Typefaces for Interface Design · · ,
  237. Hotwire: HTML over the Wire · ·
  238. Building a Consistent Platform · ·
  239. Javascript Obfuscation: What, Why, and How? · · ,
  240. The Do’s and Don’ts of Code Reviews · · , ,
  241. In Critical Defense of Frontend Development · ·
  242. HTML: The 16 Content Categories and Their Elements · · ,
  243. The Definitive Guide to Feature Management · · , ,
  244. How Does CSS Work? · ·
  245. Laravel and Hotwire Intro · · , ,
  246. Ethical Design Guide · · , ,
  247. HTML and CSS Techniques to Reduce Your JavaScript · · , , ,
  248. Using “throw” as an Expression in PHP 8 · ·
  249. Symbols to Copy · · , ,
  250. Ignore AMP · ·