Frontend Dogma

News and Tools for Frontend Development (15)

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

  1. A “details” Element as a Burger Menu Is Not Accessible · · , ,
  2. 5 Ways to Use Data Visualization in Your Content to Increase Traffic · · , ,
  3. Design 4.0: Leading Design in the New Industry · ·
  4. How Rapid Usability Testing Is Changing UX Research · · , , ,
  5. Rethinking a Design System · ·
  6. Web Sustainability and the Ethical Dilemma · · , ,
  7. CSS Drawings · · ,
  8. Building a Retro Draggable Web Component With Lit · · ,
  9. Stop Using .env Files Now · · ,
  10. How to Get the Current Timestamp in JavaScript · · ,
  11. Accidental Dismissal of Overlays: A Common Mobile Usability Problem · · , ,
  12. Debunking Myths About HTTPS · · ,
  13. The Git Commands I Use Every Day · · ,
  14. Accessibility Is for Every One · ·
  15. Brief Note on Super- and Subscript Text · · , , ,
  16. When Design Systems Lie · · ,
  17. How to (Not) Make a Button · · , , , ,
  18. Accessibility in Times of Headless · · , ,
  19. Design Tokens 101 · ·
  20. Let’s Get Logical · · ,
  21. The Rise of the TikTok Pattern · · ,
  22. Total Blocking Time: A Short and Sweet Guide for Happier Users · · ,
  23. Why Are Vanity Metrics Still Problematic? · ·
  24. Why the Number Input Is the Worst Input · · , , ,
  25. Invalid CSS · · ,
  26. Designing for People With Cognitive Disabilities and Everyone Else · · , ,
  27. I Never Thought This Would Be Possible With CSS · · , ,
  28. Five Things You Can Do to Be More Inclusive · · ,
  29. How to Substantially Slow Down Your Node.js Server · · , ,
  30. Buttons and the Baader–Meinhof Phenomenon · · ,
  31. 7 Must Know JavaScript Tips and Tricks · · ,
  32. 3 Problems Scrum Doesn’t Solve · · , ,
  33. A Guide to Rounding Numbers in JavaScript · · ,
  34. Container Queries in Browsers! · · , ,
  35. JavaScript APIs You Don’t Know About · · ,
  36. The State of Digital Accessibility: Three Key Challenges · · , ,
  37. W3C TAG Ethical Web Principles · · , ,
  38. When Is It OK to Disable Text Selection? · · , ,
  39. On Better Browsers: Arbitrary Media Queries and Browser UIs · · , ,
  40. Secure Your Node.js App With JSON Web Tokens · · , ,
  41. Quick Tip: Embedding YouTube Videos in GitHub Pages · · , , ,
  42. Better Accessible Names · · ,
  43. Conditionally Spreading Objects in JavaScript · · ,
  44. Disability Is Not a Dirty Word · · ,
  45. First Batch of Color Fonts Arrives on Google Fonts · · , ,
  46. The Basics of Remix · · ,
  47. Wtf Is an Island and Why Is It in My Website? · · , , ,
  48. Detecting CSS Selector Support · · , , ,
  49. Intrinsic CSS With Container Queries and Units · · , , ,
  50. PureComponents vs. Functional Components With Hooks · · , ,
  51. The Power of CSS Blend Modes · · ,
  52. Node.js Native Binary Compilation Using Vercel pkg · · ,
  53. Making Sense of WAI-ARIA: A Comprehensive Guide · · , , ,
  54. What Is Data Engineering? · · ,
  55. Best Practices for Creating a Modern npm Package · · ,
  56. Nuclear Footnotes · · ,
  57. When Life Gives You Lemons, Write Better Error Messages · · ,
  58. Which Fonts to Use for Your Charts and Tables · · , ,
  59. The “details” and “summary” Elements, Again · · ,
  60. My Five Biggest Design System Mistakes · · ,
  61. Justin Yarbrough Talks About Alt Text · · , , ,
  62. The Seventh Way to Call a JavaScript Function Without Parentheses · · ,
  63. 2022: 0 of the Global Top 100 Websites Use Valid HTML · · , , ,
  64. Antipersonas: What, How, Who, and Why? · · ,
  65. Your Next.js Bundle Will Thank You · · , ,
  66. Mastering These 7 Basics CSS Skills Will Make You a Frontend Wizard · ·
  67. Mastering DOM Manipulation With Vanilla JavaScript · · ,
  68. Converting PNG Images to WebP Using PHP · · , , , ,
  69. Make It Short—Make It Better · · ,
  70. A Guide to Choosing the Right React State Management Solution · · , ,
  71. CSS “line-height” · · ,
  72. How I Made a Pure CSS Puzzle Game · ·
  73. How to Monitor a Next.js Application · · , ,
  74. Keeping Your CSS Small: Scopes, Containers, and Other New Stuff · · , , ,
  75. Button Minimum Width · · ,
  76. A Quick Primer on Testing JavaScript · · ,
  77. Lightning CSS · · , ,
  78. Text Is the Universal Interface · ·
  79. Towards a Factory Model of Designing User Interfaces—Slotted Systems in Figma · · , ,
  80. What’s New With Forms in 2022? · · , ,
  81. 12 Modern UI Components to Inspire Your Future Designs · · ,
  82. Me and React: 5 Years in 15 Minutes · ·
  83. Dependabot Unlocks Transitive Dependencies for npm Projects · · , ,
  84. How Your Favourite UI Libraries Manage Their Icons · · , ,
  85. Building the Main Navigation for a Website · · , ,
  86. Are Modals in Web Design a UX Disaster? · · , , ,
  87. WCAG 2.2 Hits Candidate Recommendation—but What Does It Mean? · · ,
  88. Detect When Users Switch Tabs Using JavaScript · ·
  89. Rewriting Tests from Cypress to Playwright Using GPT3 · · , , , , ,
  90. An Overview of Node.js: Architecture, APIs, Event Loop, Concurrency · · , , , , ,
  91. A Whole Cascade of Layers · · ,
  92. An Attempt at Outlining the Many Factors Influencing Developer Experience · ·
  93. Critical CSS? Not So Fast! · · ,
  94. Hacking CSS Animation State and Playback Time · · ,
  95. So Your Designer Wants Stuff to Overlap · · ,
  96. The Realities and Myths of Contrast and Color · · , ,
  97. W3C Accessibility Maturity Model · · ,
  98. Rewrite Your Git History in 4 Friendly Commands · · ,
  99. How to Improve Largest Contentful Paint for Faster Load Times · · , , ,
  100. Introducing Signals · · , ,
  101. 5 Reasons to Invest in User Experience · ·
  102. A/B Testing in 7 Steps to Quickly Improve Your Conversions · · , ,
  103. Dreamy Blur · · , ,
  104. Top 5 Technology Trends in UX Design · · , ,
  105. Understanding Regulatory Compliance and Making It Work on Your Web Site · · ,
  106. HTML Markup Tips for Developing Accessible Websites · · , ,
  107. Getting Started With MathML · · ,
  108. A Beginner’s Guide to Design Tokens · · ,
  109. A Content Warning Component · · , ,
  110. Infinite Scrolling: When to Use It, When to Avoid It · · , ,
  111. Prestige Is the Designer’s Achilles’ Heel · ·
  112. Dear Oracle, Please Release the JavaScript Trademark · · ,
  113. Git Cheatsheet · · , ,
  114. Disabled JavaScript Turns Off Native Lazy Loading · · , , ,
  115. Is It “:modal”? · · , ,
  116. Big O Notation Basics Made Dead Simple · ·
  117. Focus Appearance Explained · · , , ,
  118. The Accessibility and Usability Journey of Drupal’s Primary Navigation · · , ,
  119. Accessible Lists and Tables · · , ,
  120. Default Exports in JavaScript Modules Are Terrible · ·
  121. Is Design Thinking Overhyped? · ·
  122. Useful JavaScript Data Grid Libraries · · , , ,
  123. Don’t Overwrite Visual Labels With “aria-label” · · , ,
  124. Comparing JAWS, NVDA, and VoiceOver · · , , , , , , , ,
  125. How I Maintain OSS Projects · · ,
  126. DevTools Tips: How to Inspect and Debug CSS Flexbox · · , , , , , ,
  127. 4 Ways to Minimize Your Dependencies in Node.js · · , ,
  128. Small Steps: Celebrating Four Accessibility Wins · · ,
  129. Neutrality Isn’t an Option When It Comes to Accessibility · ·
  130. An Argument Against CSS Opacity · · , ,
  131. CSS Container Queries Are Finally Here · · ,
  132. Cypress Testing: A Guide to Running Web Application Tests · · , ,
  133. JavaScript Bugs Aplenty in Node.js Ecosystem—Found Automatically · · , , , , ,
  134. Things Not Available When Someone Blocks All Cookies · ·
  135. Understanding “useMemo” and “useCallback” · · ,
  136. Interpolating Numeric CSS Variables · · ,
  137. Communication Around Digital Accessibility Must Improve: How Users and Businesses Alike Are Failing to Advance Digital Accessibility · · ,
  138. Parents Counting Children in CSS · · ,
  139. Monitor Events and Function Calls Via Console · · , ,
  140. What Makes A Great Toggle Button? II · · ,
  141. Should I Use a Button or a Link? · · , , ,
  142. The Three Laws of Utility Classes · · ,
  143. An Ideal REST API—Best Practices · · ,
  144. Be Good-Argument-Driven, Not Data-Driven · · ,
  145. On Design System Support · ·
  146. Using Grid Named Areas to Visualize (and Reference) Your Layout · · ,
  147. What Is Closed Captioning? · · , ,
  148. Making a Twitter Bot in the Year 2022 With Node.js · · ,
  149. Modern Alternatives to BEM · · , , , ,
  150. CSS Classes Considered Harmful · · ,
  151. Implementing Promisable “setTimeout” · ·
  152. Installing and Running Node.js Bin Scripts · · ,
  153. Short Note on “figure” and “figcaption” · · ,
  154. Why Your Website Should Be Under 14 kB in Size · · ,
  155. Designing Better Error Messages UX · · , , ,
  156. 20 Principles I Learned from 10 Years of Developing Software · ·
  157. Complex Conditional Width Using “flex-basis” With “clamp” · ·
  158. Measure What You Impact, Not What You Influence · · , ,
  159. The Design Principle Paradox · · ,
  160. What Customer-First Web Design Looks Like · ·
  161. What Is a REST API? · · ,
  162. Why Every University Needs an Accessible Standard Website Template · · , ,
  163. Creative List Styling · · ,
  164. TIL: You Can Access a User’s Camera With Just HTML · · ,
  165. Accessibility and Supporting Internet Explorer · · , , , ,
  166. Exploring the Underrated “output” Element · ·
  167. A Handy Use for Cascade Layers · · ,
  168. What’s the Value of a Design System? · · ,
  169. Scaling SCM Front-End Design With a Design System · · ,
  170. Does Accessibility Stifle the Creative Process? · · , ,
  171. 8 Tricks for SVG Optimization · · , ,
  172. How to Use localStorage in JavaScript: An Easy Guide · · , , ,
  173. Advanced TypeScript Patterns: API Contracts · · ,
  174. Class-Less CSS Frameworks · · , , ,
  175. Conducting an Effective Web-Site UX Audit · · ,
  176. Design Systems: Prototyping on Steroids · · ,
  177. Prepare for WCAG 2.2 and Beyond · · , , ,
  178. What Makes a Great Toggle Button? · · ,
  179. Why User Personas Matter in UX Design · · , , ,
  180. Meet the Top Layer: A Solution to “z-index:10000” · ·
  181. Bring Focus to the First Form Field With an Error · · , ,
  182. CSS Grid and Custom Shapes II · · ,
  183. Mac VoiceOver Testing the Simple Way · · , , , , , ,
  184. Learn 5 Optimization Tips for Webpack Step by Step · · , ,
  185. A Guide to Using User-Experience Research Methods · · , ,
  186. You’re Not Using HTTP Status Codes Right · · ,
  187. A Simple “clamp()” Function in PHP · · ,
  188. React Query vs. SWR · · , , ,
  189. Scaling a System · · ,
  190. An Introduction to Context Propagation in JavaScript · · ,
  191. Optimize Data Fetching · · ,
  192. When Do You Use CSS Columns? · · ,
  193. Inclusion Beats Optimization · · , ,
  194. Using “:has()” as a CSS Parent Selector and Much More · · ,
  195. Use the Right Container Query Syntax · · ,
  196. Dependency Injection in JS/TS · · ,
  197. How the CSS “:is”, “:where”, and “:has” Pseudo-Class Selectors Work · · ,
  198. Outline Is Your Friend · · ,
  199. Can Browsers Optimize the Loading of Third-Party Resources? · · , ,
  200. Better Conditionals in CSS Media Queries With Range Syntax · · ,
  201. React Re-Renders Guide: Preventing Unnecessary Re-Renders · · , ,
  202. Color and Contrast · · , , ,
  203. Why React Re-Renders · · ,
  204. Introduction to Screen Readers (Desktop Edition) · · , , , , , ,
  205. Designing a Better Back Button UX · · , ,
  206. Building Accessible Select Components in React · · , , ,
  207. Table Column Alignment With Variable Transforms · · , ,
  208. Accessible User Experience and A/B Testing · · , ,
  209. CSS Grid and Custom Shapes · · ,
  210. Check Heading Accessibility Using the WAVE Tool · · , , , , ,
  211. Top 9 Ways to Become a Successful Self-Taught Developer · · ,
  212. Tip: Use “fetchpriority=high” to Load Your LCP Hero Image Sooner · · , ,
  213. What Was That Media Query Code Again? · · , ,
  214. 5 Modern CLI Tools That Help Boost Your Productivity · · ,
  215. Automation and Accessibility—What You Need to Know · · , ,
  216. If You’re Not Checking, You’re Guessing · · ,
  217. On Ratings and Meters · · , ,
  218. Custom Event Naming Conventions · · , ,
  219. Creative CSS Layout · · , , ,
  220. (Re-)Introducing Gatsby, a Reactive Site Generator · · , , , , ,
  221. An Introduction to Constraint Based Design Systems · · ,
  222. The Console API · · , ,
  223. How and Why We Removed jQuery from GOV.UK · · , ,
  224. Modern CSS Selectors · · ,
  225. TypeScript vs. JavaScript: Which One You Should Use, and Why · · , ,
  226. Do You Know About “overflow: clip”? · ·
  227. TypeScript: It’s Not Actually Validating Your Types · · ,
  228. Results of Quick Testing of Documentation Tools’ Accessibility · · , ,
  229. Designing for Long-Form Articles · · ,
  230. Here, Here, and Here · ·
  231. Accessibility Is Writing · · ,
  232. Core Web Vitals Tools to Boost Your Web Performance Scores · · , ,
  233. Defining “Integration” Tests · ·
  234. Brief Note on Calendar Tables · · , ,
  235. How to Research Components and Patterns: Common Challenges and How to Overcome Them · · , ,
  236. Code Golfing Tips and Tricks: How to Minify Your JavaScript Code · · , , ,
  237. SEO Links Obfuscation and Accessibility Problems · · , , ,
  238. The Death of Mozilla Is the Death of the Open Web · · ,
  239. Dark Mode With Design Tokens · · ,
  240. Zooming Images in a Grid Layout · · ,
  241. The JavaScript Paradox · ·
  242. No Demo [Website] Reno · · ,
  243. Capturing Images and Videos from the Camera of Mobile Devices Using HTML · · , ,
  244. 5 Good Practices to Scale Your React Projects Easily · · , ,
  245. Bringing Perspective to CSS · ·
  246. The Infinite Marquee · · , ,
  247. Polyhierarchy in Information Architecture · · ,
  248. How I Added Scroll Snapping to My Twitter Timeline · · , ,
  249. How to Use Multithreading in Node.js · · , ,
  250. Light/Dark Mode · · , , ,